bunch of menu optimizations

* A minimum width for the menu, the same as the aggregate menu, in order to prevent the menu with from growing on submenu open.
* A maximum width for uncontrolled content (font, image and drawing names). Same value and same reason.
* Style the font family labels in idle loop to open the submenu fastly.
* Add the drawing gicons in idle loop to open the submenu smoothly.

files.js

@@ -50,7 +50,16 @@ const ThemedIconNames = {
     TOOL_IMAGE: 'insert-image', TOOL_TEXT: 'insert-text',
 };
 
-var Icons = {};
+var Icons = {
+    get FAKE() {
+        if (!this._fake) {
+            let bytes = new GLib.Bytes('<svg/>');
+            this._fake = Gio.BytesIcon.new(bytes);
+        }
+        
+        return this._fake;
+    }
+};
 
 ICON_NAMES.forEach(name => {
     Object.defineProperty(Icons, name.toUpperCase().replace(/-/gi, '_'), {

menu.js

@@ -523,6 +523,7 @@ var DrawingMenu = new Lang.Class({
         item.icon.set_gicon(icon);
         
         item.menu.itemActivated = item.menu.close;
+        item.menu.actor.add_style_class_name('draw-on-your-screen-menu-ellipsized');
         
         item.menu.openOld = item.menu.open;
         item.menu.open = (animate) => {
@@ -532,8 +533,12 @@ var DrawingMenu = new Lang.Class({
                         item.label.set_text(DisplayStrings.getFontFamily(family));
                         this.area.currentFontFamily = family;
                     });
+                    
                     if (FONT_FAMILY_STYLE)
+                        GLib.idle_add(GLib.PRIORITY_DEFAULT_IDLE, () => {
                             subItem.label.set_style(`font-family:${family}`);
+                        });
+                    
                     getActor(subItem).connect('key-focus-in', updateSubMenuAdjustment);
                 });
             }
@@ -552,6 +557,7 @@ var DrawingMenu = new Lang.Class({
         item.update();
         
         item.menu.itemActivated = item.menu.close;
+        item.menu.actor.add_style_class_name('draw-on-your-screen-menu-ellipsized');
         
         item.menu.openOld = item.menu.open;
         item.menu.open = (animate) => {
@@ -560,7 +566,13 @@ var DrawingMenu = new Lang.Class({
                     let subItem = item.menu.addAction(image.toString(), () => {
                         this.area.currentImage = image;
                         item.update();
-                    }, image.thumbnailGicon || undefined);
+                    }, Files.Icons.FAKE);
+                    
+                    GLib.idle_add(GLib.PRIORITY_DEFAULT_IDLE, () => {
+                        if (subItem.setIcon && image.thumbnailGicon)
+                            subItem.setIcon(image.thumbnailGicon);
+                    });
+                    
                     getActor(subItem).connect('key-focus-in', updateSubMenuAdjustment);
                 });
             }
@@ -574,6 +586,7 @@ var DrawingMenu = new Lang.Class({
     _addDrawingNameItem: function(menu) {
         this.drawingNameMenuItem = new PopupMenu.PopupMenuItem('', { reactive: false, activate: false });
         this.drawingNameMenuItem.setSensitive(false);
+        getActor(this.drawingNameMenuItem).add_style_class_name('draw-on-your-screen-menu-ellipsized');
         menu.addMenuItem(this.drawingNameMenuItem);
         this._updateDrawingNameMenuItem();
     },
@@ -595,6 +608,7 @@ var DrawingMenu = new Lang.Class({
         item.icon.set_icon_name(icon);
         
         item.menu.itemActivated = item.menu.close;
+        item.menu.actor.add_style_class_name('draw-on-your-screen-menu-ellipsized');
         
         item.menu.openOld = item.menu.open;
         item.menu.open = (animate) => {
@@ -616,7 +630,12 @@ var DrawingMenu = new Lang.Class({
                 this.area.loadJson(json);
                 this._updateDrawingNameMenuItem();
                 this._updateActionSensitivity();
-            }, json.gicon);
+            }, Files.Icons.FAKE);
+            
+            GLib.idle_add(GLib.PRIORITY_DEFAULT_IDLE, () => {
+                if (subItem.setIcon)
+                    subItem.setIcon(json.gicon);
+            });
             
             subItem.label.get_clutter_text().set_use_markup(true);
             getActor(subItem).connect('key-focus-in', updateSubMenuAdjustment);

stylesheet.css

@@ -37,6 +37,7 @@
 
 .draw-on-your-screen-menu {
    font-size: 0.97em; /* default: 1em */
+   min-width: 21em; /* like the aggregate menu */
 }
 
 .draw-on-your-screen-menu .popup-menu-item {
@@ -49,6 +50,11 @@
     padding-top: 0.03em;
 }
 
+/* max size for uncontrolled contents (font, image and drawing names) */
+.draw-on-your-screen-menu-ellipsized {
+    max-width: 21em;
+}
+
 .draw-on-your-screen-menu .toggle-switch {
     height: 1.35em; /* default: 22px */
 }