submenu enhancements

* improve keyboard navigation (use right-/left-arrows to enter/leave)
* delay popping up submenus when mousing over submenu items
* right-align submenu indicator (same as a shortcut)
* keep submenus open if the mouse leaves them
* support creating custom drop-downs from nested dictionaries

blocks.js

@@ -9,7 +9,7 @@
     written by Jens Mönig
     jens@moenig.org
 
-    Copyright (C) 2016 by Jens Mönig
+    Copyright (C) 2017 by Jens Mönig
 
     This file is part of Snap!.
 
@@ -149,7 +149,7 @@ isSnapObject, copy, PushButtonMorph, SpriteIconMorph, Process, AlignmentMorph*/
 
 // Global stuff ////////////////////////////////////////////////////////
 
-modules.blocks = '2016-December-27';
+modules.blocks = '2017-January-03';
 
 var SyntaxElementMorph;
 var BlockMorph;
@@ -5723,7 +5723,7 @@ ScriptsMorph.prototype.userMenu = function () {
     if (this.dropRecord) {
         if (this.dropRecord.lastRecord) {
             hasUndropQueue = true;
-            menu.addItem(
+            menu.addPair(
                 [
                     new SymbolMorph(
                         'turnBack',
@@ -5732,12 +5732,13 @@ ScriptsMorph.prototype.userMenu = function () {
                     localize('undrop')
                 ],
                 'undrop',
+                '⌘Z',
                 'undo the last\nblock drop\nin this pane'
             );
         }
         if (this.dropRecord.nextRecord) {
             hasUndropQueue = true;
-            menu.addItem(
+            menu.addPair(
                 [
                     new SymbolMorph(
                         'turnForward',
@@ -5746,6 +5747,7 @@ ScriptsMorph.prototype.userMenu = function () {
                     localize('redrop')
                 ],
                 'redrop',
+                '⌘Y',
                 'redo the last undone\nblock drop\nin this pane'
             );
         }
@@ -7531,11 +7533,19 @@ InputSlotMorph.prototype.setContents = function (aStringOrFloat) {
 // InputSlotMorph drop-down menu:
 
 InputSlotMorph.prototype.dropDownMenu = function (enableKeyboard) {
-    var choices = this.choices,
+    var menu = this.menuFromDict(this.choices);
-        key,
+    if (menu.items.length > 0) {
-		oldmenu,
+        if (enableKeyboard) {
-		items,
+            menu.popup(this.world(), this.bottomLeft());
-        menuStack = [],
+            menu.getFocus();
+        } else {
+            menu.popUpAtHand(this.world());
+        }
+    }
+};
+
+InputSlotMorph.prototype.menuFromDict = function (choices, noEmptyOption) {
+    var key,
         menu = new MenuMorph(
             this.setContents,
             null,
@@ -7548,60 +7558,24 @@ InputSlotMorph.prototype.dropDownMenu = function (enableKeyboard) {
     } else if (isString(choices)) {
         choices = this[choices]();
     }
-    if (!choices) {
+    if (!noEmptyOption) {
-        return null;
-    }
         menu.addItem(' ', null);
+    }
     for (key in choices) {
         if (Object.prototype.hasOwnProperty.call(choices, key)) {
             if (key[0] === '~') {
                 menu.addLine();
             // } else if (key.indexOf('§_def') === 0) {
             //     menu.addItem(choices[key].blockInstance(), choices[key]);
-            } else if (key[key.length - 1] == '{') {
+            } else if (choices[key] instanceof Object &&
-                // Submenu
+                    !(choices[key] instanceof Array)) {
-                // 0x25ba = Unicode "BLACK RIGHT-POINTING POINTER"
+                menu.addMenu(key, this.menuFromDict(choices[key], true));
-                // (not to be confused with "black right-pointing TRIANGLE")
-                menu.addItem(key.substring(0,key.length - 1) + '\u25ba',
-							 choices[key]);
-                menuStack.push(menu);
-                menu = new MenuMorph(
-                                     this.setContents,
-                                     null,
-                                     this,
-                                     this.fontSize
-                                 );
-            } else if (key.charAt(0) == '}') {
-                // "BLACK LEFT-POINTING POINTER"
-                oldmenu = menuStack[menuStack.length - 1];
-                items = oldmenu.items;
-                items[items.length - 1][6] = menu;
-                oldmenu.addChild(menu);
-                menu = menuStack.pop();
             } else {
                 menu.addItem(key, choices[key]);
             }
         }
     }
-
+    return menu;
-    while (menuStack.length > 0) {
-        oldmenu=menuStack[menuStack.length - 1];
-		items=oldmenu.items;
-        items[items.length-1][6] = menu;
-        oldmenu.addChild(menu);
-        menu = menuStack.pop();
-    }
-
-    if (menu.items.length > 0) {
-        if (enableKeyboard) {
-            menu.popup(this.world(), this.bottomLeft());
-            menu.getFocus();
-        } else {
-            menu.popUpAtHand(this.world());
-        }
-    } else {
-        return null;
-    }
 };
 
 InputSlotMorph.prototype.messagesMenu = function () {
@@ -7634,7 +7608,6 @@ InputSlotMorph.prototype.messagesMenu = function () {
             myself.world()
         );
     };
-
     return dict;
 };
 
@@ -7666,7 +7639,6 @@ InputSlotMorph.prototype.messagesReceivedMenu = function () {
             myself.world()
         );
     };
-
     return dict;
 };
 

byob.js

@@ -9,7 +9,7 @@
     written by Jens Mönig
     jens@moenig.org
 
-    Copyright (C) 2016 by Jens Mönig
+    Copyright (C) 2017 by Jens Mönig
 
     This file is part of Snap!.
 
@@ -107,7 +107,7 @@ SymbolMorph, isNil, CursorMorph, VariableFrame, WatcherMorph, Variable*/
 
 // Global stuff ////////////////////////////////////////////////////////
 
-modules.byob = '2016-December-29';
+modules.byob = '2017-January-03';
 
 // Declarations
 
@@ -291,22 +291,31 @@ CustomBlockDefinition.prototype.inputOptionsOfIdx = function (idx) {
 };
 
 CustomBlockDefinition.prototype.dropDownMenuOf = function (inputName) {
-    var dict = {},
-	    gensym = 1;
     if (this.declarations[inputName] && this.declarations[inputName][2]) {
-        this.declarations[inputName][2].split('\n').forEach(function (line) {
+        return this.parseChoices(this.declarations[inputName][2]);
-            var pair = line.split('='),
-			    unique = pair[0];
-			if (unique == '~' || unique == '}') {
-				unique += gensym++;
-			};
-            dict[unique] = isNil(pair[1]) ? unique : pair[1];
-        });
-        return dict;
     }
     return null;
 };
 
+CustomBlockDefinition.prototype.parseChoices = function (string) {
+    var dict = {},
+        stack = [dict];
+    string.split('\n').forEach(function (line) {
+        var pair = line.split('=');
+        if (pair[0] === '}') {
+            stack.pop();
+            dict = stack[stack.length - 1];
+        } else if (pair[1] === '{') {
+            dict = {};
+            stack[stack.length - 1][pair[0]] = dict;
+            stack.push(dict);
+        } else {
+            dict[pair[0]] = isNil(pair[1]) ? pair[0] : pair[1];
+        }
+    });
+    return dict;
+};
+
 CustomBlockDefinition.prototype.isReadOnlyInput = function (inputName) {
     return this.declarations[inputName] &&
         this.declarations[inputName][3] === true;
@@ -3259,8 +3268,9 @@ InputSlotDialogMorph.prototype.editSlotOptions = function () {
         myself.fragment.options,
         myself.world(),
         null,
-        localize('Enter one option per line.' +
+        localize('Enter one option per line.\n' +
-            'Optionally use "=" as key/value delimiter\n' +
+            'Optionally use "=" as key/value delimiter ' +
+            'and {} for submenus. ' +
             'e.g.\n   the answer=42')
     );
 };

gui.js

@@ -9,7 +9,7 @@
     written by Jens Mönig
     jens@moenig.org
 
-    Copyright (C) 2016 by Jens Mönig
+    Copyright (C) 2017 by Jens Mönig
 
     This file is part of Snap!.
 
@@ -72,7 +72,7 @@ isRetinaSupported, SliderMorph, Animation*/
 
 // Global stuff ////////////////////////////////////////////////////////
 
-modules.gui = '2016-December-29';
+modules.gui = '2017-January-03';
 
 // Declarations
 
@@ -2798,9 +2798,9 @@ IDE_Morph.prototype.projectMenu = function () {
     menu = new MenuMorph(this);
     menu.addItem('Project notes...', 'editProjectNotes');
     menu.addLine();
-    menu.addItem('New', 'createNewProject');
+    menu.addPair('New', 'createNewProject', '⌘N');
-    menu.addItem('Open...', 'openProjectsBrowser');
+    menu.addPair('Open...', 'openProjectsBrowser', '⌘O');
-    menu.addItem('Save', "save");
+    menu.addPair('Save', "save", '⌘S');
     menu.addItem('Save As...', 'saveProjectsBrowser');
     menu.addLine();
     menu.addItem(
@@ -3209,7 +3209,7 @@ IDE_Morph.prototype.aboutSnap = function () {
         world = this.world();
 
     aboutTxt = 'Snap! 4.0.10 - dev -\nBuild Your Own Blocks\n\n'
-        + 'Copyright \u24B8 2016 Jens M\u00F6nig and '
+        + 'Copyright \u24B8 2017 Jens M\u00F6nig and '
         + 'Brian Harvey\n'
         + 'jens@moenig.org, bh@cs.berkeley.edu\n\n'
 

history.txt

@@ -3228,6 +3228,20 @@ http://snap.berkeley.edu/run#cloud:Username=jens&ProjectName=rotation
 * BYOB: Disabled hover-help for custom blocks (some people find it annoying)
 * GUI: Hide setting for “prefer smooth animations” (now - mostly - redundant)
 
+161231
+------
+* Morphic: support for menu shortcuts (ongoing)
+* GUI, Blocks: menu shortcuts (experimental)
+
+170102
+------
+* Morphic: use animations to schedule tool tips
+
+170103
+------
+* Hierarchical menus, thanks, Brian!
+* Tweaks to hierarchical menus
+
 
 == v4.10 === (in development)
 
@@ -3242,6 +3256,7 @@ Features:
 * svg support for images from the web (svg files have been supported for a long time)
 * use media dialog for browsing and importing sounds
 * highly experimental infix-expression-to-reporter parser. Thanks, Bernat, for the brilliant idea to add it to the search-blocks field!
+* hierarchical menus, also for custom blocks, thanks, Brian!
 
 Fixes:
 * Music (play note) to work again in new and recent browser versions (Chrome 55)

morphic.js

@@ -8,7 +8,7 @@
     written by Jens Mönig
     jens@moenig.org
 
-    Copyright (C) 2016 by Jens Mönig
+    Copyright (C) 2017 by Jens Mönig
 
     This file is part of Snap!.
 
@@ -1136,7 +1136,7 @@
 
 /*global window, HTMLCanvasElement, FileReader, Audio, FileList*/
 
-var morphicVersion = '2016-December-27';
+var morphicVersion = '2017-January-03';
 var modules = {}; // keep track of additional loaded modules
 var useBlurredShadows = getBlurredShadowSupport(); // check for Chrome-bug
 
@@ -3347,7 +3347,8 @@ Morph.prototype.toggleVisibility = function () {
 // Morph full image:
 
 Morph.prototype.fullImageClassic = function () {
-    var fb = this.cachedFullBounds || this.fullBounds(), // use the cache since fullDrawOn() will
+    // use the cache since fullDrawOn() will
+    var fb = this.cachedFullBounds || this.fullBounds(),
         img = newCanvas(fb.extent()),
         ctx = img.getContext('2d');
     ctx.translate(-fb.origin.x, -fb.origin.y);
@@ -4067,12 +4068,7 @@ Morph.prototype.developersMenu = function () {
         menu = new MenuMorph(this, this.constructor.name ||
             this.constructor.toString().split(' ')[1].split('(')[0]);
     if (userMenu) {
-        menu.addItem(
+        menu.addMenu('user features', userMenu);
-            'user features...',
-            function () {
-                userMenu.popUpAtHand(world);
-            }
-        );
         menu.addLine();
     }
     menu.addItem(
@@ -7470,6 +7466,7 @@ MenuMorph.prototype.init = function (target, title, environment, fontSize) {
     this.isListContents = false;
     this.hasFocus = false;
     this.selection = null;
+    this.submenu = null;
 
     // initialize inherited properties:
     MenuMorph.uber.init.call(this);
@@ -7489,7 +7486,8 @@ MenuMorph.prototype.addItem = function (
     color,
     bold, // bool
     italic, // bool
-    doubleClickAction // optional, when used as list contents
+    doubleClickAction, // optional, when used as list contents
+    shortcut // optional string, icon (Morph or Canvas) or tuple [icon, string]
 ) {
     /*
     labelString is normally a single-line string. But it can also be one
@@ -7506,17 +7504,22 @@ MenuMorph.prototype.addItem = function (
         color,
         bold || false,
         italic || false,
-        doubleClickAction]);
+        doubleClickAction,
+        shortcut]);
+};
+
+MenuMorph.prototype.addMenu = function (label, aMenu, indicator) {
+    this.addPair(label, aMenu, isNil(indicator) ? '\u25ba' : indicator);
+};
+
+MenuMorph.prototype.addPair = function (label, action, shortcut, hint) {
+    this.addItem(label, action, hint, null, null, null, null, shortcut);
 };
 
 MenuMorph.prototype.addLine = function (width) {
     this.items.push([0, width || 1]);
 };
 
-MenuMorph.prototype.addSubmenu = function (key, submenu) {
-	this.addItem(key, key, null, null, null, null, null, submenu);
-};
-
 MenuMorph.prototype.createLabel = function () {
     var text;
     if (this.label !== null) {
@@ -7602,7 +7605,8 @@ MenuMorph.prototype.drawNew = function () {
                 tuple[3], // color
                 tuple[4], // bold
                 tuple[5], // italic
-                tuple[6] // doubleclick action
+                tuple[6], // doubleclick action
+                tuple[7] // shortcut
             );
         }
         if (isLine) {
@@ -7631,9 +7635,12 @@ MenuMorph.prototype.maxWidth = function () {
         }
     }
     this.children.forEach(function (item) {
-
         if (item instanceof MenuItemMorph) {
-            w = Math.max(w, item.children[0].width() + 8);
+            w = Math.max(
+                w,
+                item.label.width() + 8 +
+                    (item.shortcut ? item.shortcut.width() + 4 : 0)
+            );
         } else if ((item instanceof StringFieldMorph) ||
                 (item instanceof ColorPickerMorph) ||
                 (item instanceof SliderMorph)) {
@@ -7653,6 +7660,7 @@ MenuMorph.prototype.adjustWidths = function () {
     this.children.forEach(function (item) {
         item.silentSetWidth(w);
         if (item instanceof MenuItemMorph) {
+            item.fixLayout();
             isSelected = (item.image === item.pressImage);
             item.createBackgrounds();
             if (isSelected) {
@@ -7681,25 +7689,18 @@ MenuMorph.prototype.unselectAllItems = function () {
 };
 
 MenuMorph.prototype.popup = function (world, pos) {
-	var submenu = (this.parent instanceof MenuMorph);
-	// submenu is True if this menu is a submenu,
-	// so that we don't make it the world's activeMenu nor
-	// destroy its parent menu.
-
     this.drawNew();
     this.setPosition(pos);
     this.addShadow(new Point(2, 2), 80);
     this.keepWithin(world);
-    if (world.activeMenu && !submenu) {
+    if (world.activeMenu) {
         world.activeMenu.destroy();
     }
     if (this.items.length < 1 && !this.title) { // don't show empty menus
         return;
     }
-    if (!submenu) {
     world.add(this);
     world.activeMenu = this;
-    }
     this.world = world; // optionally enable keyboard support
     this.fullChanged();
 };
@@ -7731,6 +7732,24 @@ MenuMorph.prototype.popUpCenteredInWorld = function (world) {
     );
 };
 
+// MenuMorph submenus
+
+MenuMorph.prototype.closeRootMenu = function () {
+    if (this.parent instanceof MenuMorph) {
+        this.parent.closeRootMenu();
+    } else {
+        this.destroy();
+    }
+};
+
+MenuMorph.prototype.closeSubmenu = function () {
+    if (this.submenu) {
+        this.submenu.destroy();
+        this.submenu = null;
+        this.unselectAllItems();
+    }
+};
+
 // MenuMorph keyboard accessibility
 
 MenuMorph.prototype.getFocus = function () {
@@ -7741,20 +7760,25 @@ MenuMorph.prototype.getFocus = function () {
 };
 
 MenuMorph.prototype.processKeyDown = function (event) {
-    //console.log(event.keyCode);
+    // console.log(event.keyCode);
     switch (event.keyCode) {
     case 13: // 'enter'
     case 32: // 'space'
         if (this.selection) {
             this.selection.mouseClickLeft();
+            if (this.submenu) {
+                this.submenu.getFocus();
+            }
         }
         return;
     case 27: // 'esc'
         return this.destroy();
+    case 37: // 'left arrow'
+        return this.leaveSubmenu();
     case 38: // 'up arrow'
         return this.selectUp();
     case 39: // 'right arrow'
-		return this.selectRight();
+        return this.enterSubmenu();
     case 40: // 'down arrow'
         return this.selectDown();
     default:
@@ -7818,18 +7842,22 @@ MenuMorph.prototype.selectDown = function () {
     this.select(triggers[idx]);
 };
 
-MenuMorph.prototype.selectRight = function () {
+MenuMorph.prototype.enterSubmenu = function () {
-    var triggers, idx;
+    if (this.selection && this.selection.action instanceof MenuMorph) {
-
+        this.selection.popUpSubmenu();
-    triggers = this.children.filter(function (each) {
+        if (this.submenu) {
-        return each instanceof MenuItemMorph;
+            this.submenu.getFocus();
-    });
-    if (!this.selection) {
-        return;
         }
-	if (this.selection.doubleClickAction instanceof MenuMorph) {
+    }
-		this.selection.mouseEnter();
+};
-		this.selection.doubleClickAction.getFocus();
+
+MenuMorph.prototype.leaveSubmenu = function () {
+    var menu = this.parent;
+    if (this.parent instanceof MenuMorph) {
+        menu.submenu = null;
+        menu.hasFocus = true;
+        this.destroy();
+        menu.world.keyboardReceiver = menu;
     }
 };
 
@@ -7840,44 +7868,10 @@ MenuMorph.prototype.select = function (aMenuItem) {
     this.selection = aMenuItem;
 };
 
-MenuMorph.prototype.mouseLeave = function () {
-    if (this.parent instanceof MenuMorph) {
-        // this is a submenu so we vanish when lose focus
-		this.destroy();
-    };
-}
-            
-
 MenuMorph.prototype.destroy = function () {
-var subitems = function(menu) {
-        return menu.children.filter(function (child) {
-                    return (child instanceof MenuItemMorph) &&
-                           (child.doubleClickAction instanceof MenuMorph);
-			} );
-	};
-
     if (this.hasFocus) {
-		if (this.parent instanceof MenuMorph) {
-			this.world.keyboardReceiver = this.parent;
-			this.parent.selectFirst();
-		} else {
         this.world.keyboardReceiver = null;
     }
-    }
-
-    if ((this.parent instanceof MenuMorph) && this.world) {
-        // If I'm a submenu, un-highlight the item pointing to me.
-		subitems(this.parent).forEach(function (item) {
-            item.image = item.normalImage;
-            item.changed();
-        } )
-    };
-
-    // Also kill my submenus if any.
-    subitems(this).forEach(function (item) {
-                              item.doubleClickAction.destroy();
-                          });
-
     MenuMorph.uber.destroy.call(this);
 };
 
@@ -9158,6 +9152,7 @@ TriggerMorph.prototype.init = function (
     this.labelString = labelString || null;
     this.label = null;
     this.hint = hint || null; // null, String, or Function
+    this.schedule = null; // animation slot for displaying hints
     this.fontSize = fontSize || MorphicPreferences.menuFontSize;
     this.fontStyle = fontStyle || 'sans-serif';
     this.highlightColor = new Color(192, 192, 192);
@@ -9251,6 +9246,9 @@ TriggerMorph.prototype.trigger = function () {
         treat it as function property of target and execute it
         for selector-like actions
     */
+    if (this.schedule) {
+        this.schedule.isActive = false;
+    }
     if (typeof this.target === 'function') {
         if (typeof this.action === 'function') {
             this.target.call(this.environment, this.action.call(), this);
@@ -9270,6 +9268,9 @@ TriggerMorph.prototype.triggerDoubleClick = function () {
     // same as trigger() but use doubleClickAction instead of action property
     // note that specifying a doubleClickAction is optional
     if (!this.doubleClickAction) {return; }
+    if (this.schedule) {
+        this.schedule.isActive = false;
+    }
     if (typeof this.target === 'function') {
         if (typeof this.doubleClickAction === 'function') {
             this.target.call(
@@ -9303,6 +9304,9 @@ TriggerMorph.prototype.mouseEnter = function () {
 TriggerMorph.prototype.mouseLeave = function () {
     this.image = this.normalImage;
     this.changed();
+    if (this.schedule) {
+        this.schedule.isActive = false;
+    }
     if (this.hint) {
         this.world().hand.destroyTemporaries();
     }
@@ -9330,15 +9334,17 @@ TriggerMorph.prototype.rootForGrab = function () {
 // TriggerMorph bubble help:
 
 TriggerMorph.prototype.bubbleHelp = function (contents) {
-    var myself = this;
+    var world = this.world(),
-    this.fps = 2;
+        myself = this;
-    this.step = function () {
+    this.schedule = new Animation(
-        if (this.bounds.containsPoint(this.world().hand.position())) {
+        nop,
-            myself.popUpbubbleHelp(contents);
+        nop,
-        }
+        0,
-        myself.fps = 0;
+        500,
-        delete myself.step;
+        nop,
-    };
+        function () {myself.popUpbubbleHelp(contents); }
+    );
+    world.animations.push(this.schedule);
 };
 
 TriggerMorph.prototype.popUpbubbleHelp = function (contents) {
@@ -9375,8 +9381,14 @@ function MenuItemMorph(
     color,
     bold,
     italic,
-    doubleClickAction // optional when used as list morph item
+    doubleClickAction, // optional when used as list morph item
+    shortcut // optional string, Morph, Canvas or tuple: [icon, string]
 ) {
+    // additional properties:
+    this.shortcutString = shortcut || null;
+    this.shortcut = null;
+
+    // initialize inherited properties:
     this.init(
         target,
         action,
@@ -9393,31 +9405,58 @@ function MenuItemMorph(
 }
 
 MenuItemMorph.prototype.createLabel = function () {
-    var icon, lbl, np;
+    var w, h;
-    if (this.label !== null) {
+    if (this.label) {
         this.label.destroy();
     }
-    if (isString(this.labelString)) {
+    this.label = this.createLabelPart(this.labelString);
-        this.label = this.createLabelString(this.labelString);
+    this.add(this.label);
-    } else if (this.labelString instanceof Array) {
+    w = this.label.width();
+    h = this.label.height();
+    if (this.shortcut) {
+        this.shortcut.destroy();
+    }
+    if (this.shortcutString) {
+        this.shortcut = this.createLabelPart(this.shortcutString);
+        w += this.shortcut.width() + 4;
+        h = Math.max(h, this.shortcut.height());
+        this.add(this.shortcut);
+    }
+    this.silentSetExtent(new Point(w + 8, h));
+    this.fixLayout();
+};
+
+MenuItemMorph.prototype.fixLayout = function () {
+    var cntr = this.center();
+    this.label.setCenter(cntr);
+    this.label.setLeft(this.left() + 4);
+    if (this.shortcut) {
+        this.shortcut.setCenter(cntr);
+        this.shortcut.setRight(this.right() - 4);
+    }
+};
+
+MenuItemMorph.prototype.createLabelPart = function (source) {
+    var part, icon, lbl;
+    if (isString(source)) {
+        return this.createLabelString(source);
+    }
+    if (source instanceof Array) {
         // assume its pattern is: [icon, string]
-        this.label = new Morph();
+        part = new Morph();
-        this.label.alpha = 0; // transparent
+        part.alpha = 0; // transparent
-        icon = this.createIcon(this.labelString[0]);
+        icon = this.createIcon(source[0]);
-        this.label.add(icon);
+        part.add(icon);
-        lbl = this.createLabelString(this.labelString[1]);
+        lbl = this.createLabelString(source[1]);
-        this.label.add(lbl);
+        part.add(lbl);
         lbl.setCenter(icon.center());
         lbl.setLeft(icon.right() + 4);
-        this.label.bounds = (icon.bounds.merge(lbl.bounds));
+        part.bounds = (icon.bounds.merge(lbl.bounds));
-        this.label.drawNew();
+        part.drawNew();
-    } else { // assume it's either a Morph or a Canvas
+        return part;
-        this.label = this.createIcon(this.labelString);
     }
-    this.silentSetExtent(this.label.extent().add(new Point(8, 0)));
+    // assume it's either a Morph or a Canvas
-    np = this.position().add(new Point(4, 0));
+    return this.createIcon(source);
-    this.label.bounds = np.extent(this.label.extent());
-    this.add(this.label);
 };
 
 MenuItemMorph.prototype.createIcon = function (source) {
@@ -9455,37 +9494,36 @@ MenuItemMorph.prototype.createLabelString = function (string) {
 // MenuItemMorph events:
 
 MenuItemMorph.prototype.mouseEnter = function () {
+    var menu = this.parentThatIsA(MenuMorph);
+    if (this.isShowingSubmenu()) {
+        return;
+    }
+    if (menu) {
+        menu.closeSubmenu();
+    }
     if (!this.isListItem()) {
         this.image = this.highlightImage;
         this.changed();
     }
-    if (this.doubleClickAction instanceof MenuMorph) {
+    if (this.action instanceof MenuMorph) {
-        if (!contains(this.parent.children, this.doubleClickAction)) {
+        this.delaySubmenu();
-            this.parent.addChild(this.doubleClickAction);
+    } else if (this.hint) {
-		}
-        this.doubleClickAction.popup(this.world(),
-                                     new Point(this.parent.bounds.right()-10,
-                                               this.position().y-4));
-    }
-    if (this.hint) {
         this.bubbleHelp(this.hint);
     }
 };
 
 MenuItemMorph.prototype.mouseLeave = function () {
-    if (this.doubleClickAction instanceof MenuMorph) {
+    if (!this.isListItem()) {
-		if (!contains(this.world().hand.allMorphsAtPointer(),
+        if (this.isShowingSubmenu()) {
-                      this.doubleClickAction)) {
+            this.image = this.highlightImage;
-            this.doubleClickAction.destroy();
+        } else {
             this.image = this.normalImage;
+        }
         this.changed();
     }
-    } else if (!this.isListItem()) {
+    if (this.schedule) {
-        this.image = this.normalImage;
+        this.schedule.isActive = false;
-        this.changed();
     }
-
-
     if (this.hint) {
         this.world().hand.destroyTemporaries();
     }
@@ -9495,10 +9533,8 @@ MenuItemMorph.prototype.mouseDownLeft = function (pos) {
     if (this.isListItem()) {
         this.parent.unselectAllItems();
         this.escalateEvent('mouseDownLeft', pos);
-        this.image = this.pressImage;
-    } else if (!(this.doubleClickAction instanceof MenuMorph)) {
-        this.image = this.pressImage;
     }
+    this.image = this.pressImage;
     this.changed();
 };
 
@@ -9509,25 +9545,17 @@ MenuItemMorph.prototype.mouseMove = function () {
 };
 
 MenuItemMorph.prototype.mouseClickLeft = function () {
-	if (!(this.doubleClickAction instanceof MenuMorph)) {
+    if (this.action instanceof MenuMorph) {
+        this.popUpSubmenu();
+    } else {
         if (!this.isListItem()) {
-            var topmenu = this.parent;
+            this.parent.closeRootMenu();
-            while (topmenu.parent instanceof MenuMorph) {
+            this.world().activeMenu = null;
-                topmenu = topmenu.parent;
-            }
-            topmenu.destroy();
-            this.root().activeMenu = null;
         }
         this.trigger();
     }
 };
 
-MenuItemMorph.prototype.mouseDoubleClick = function () {
-    if (!(this.doubleClickAction instanceof MenuMorph)) {
-        this.triggerDoubleClick();
-	}
-};
-
 MenuItemMorph.prototype.isListItem = function () {
     if (this.parent) {
         return this.parent.isListContents;
@@ -9542,6 +9570,44 @@ MenuItemMorph.prototype.isSelectedListItem = function () {
     return false;
 };
 
+MenuItemMorph.prototype.isShowingSubmenu = function () {
+    var menu = this.parentThatIsA(MenuMorph);
+    if (menu && (this.action instanceof MenuMorph)) {
+        return menu.submenu === this.action;
+    }
+    return false;
+};
+
+// MenuItemMorph submenus:
+
+MenuItemMorph.prototype.delaySubmenu = function () {
+    var world = this.world(),
+        myself = this;
+    this.schedule = new Animation(
+        nop,
+        nop,
+        0,
+        500,
+        nop,
+        function () {myself.popUpSubmenu(); }
+    );
+    world.animations.push(this.schedule);
+};
+
+MenuItemMorph.prototype.popUpSubmenu = function () {
+    var menu = this.parentThatIsA(MenuMorph);
+    if (!(this.action instanceof MenuMorph)) {return; }
+    this.action.drawNew();
+    this.action.setPosition(this.topRight().subtract(new Point(0, 5)));
+    this.action.addShadow(new Point(2, 2), 80);
+    this.action.keepWithin(this.world());
+    if (this.action.items.length < 1 && !this.action.title) {return; }
+    menu.add(this.action);
+    menu.submenu = this.action;
+    menu.submenu.world = menu.world; // keyboard control
+    this.action.fullChanged();
+};
+
 // FrameMorph //////////////////////////////////////////////////////////
 
 // I clip my submorphs at my bounds

objects.js

@@ -9,7 +9,7 @@
     written by Jens Mönig
     jens@moenig.org
 
-    Copyright (C) 2016 by Jens Mönig
+    Copyright (C) 2017 by Jens Mönig
 
     This file is part of Snap!.
 
@@ -82,7 +82,7 @@ SpeechBubbleMorph, RingMorph, isNil, FileReader, TableDialogMorph,
 BlockEditorMorph, BlockDialogMorph, PrototypeHatBlockMorph, localize,
 TableMorph, TableFrameMorph, normalizeCanvas, BooleanSlotMorph*/
 
-modules.objects = '2016-December-27';
+modules.objects = '2017-January-03';
 
 var SpriteMorph;
 var StageMorph;
@@ -2272,7 +2272,11 @@ SpriteMorph.prototype.freshPalette = function (category) {
             });
         }
 
-        menu.addItem('find blocks...', function () {myself.searchBlocks(); });
+        menu.addPair(
+            'find blocks...',
+            function () {myself.searchBlocks(); },
+            '⌘F'
+        );
         if (canHidePrimitives()) {
             menu.addItem(
                 'hide primitives',

widgets.js

@@ -7,7 +7,7 @@
     written by Jens Mönig
     jens@moenig.org
 
-    Copyright (C) 2015 by Jens Mönig
+    Copyright (C) 2017 by Jens Mönig
 
     This file is part of Snap!.
 
@@ -74,7 +74,7 @@ HTMLCanvasElement, fontHeight, SymbolMorph, localize, SpeechBubbleMorph,
 ArrowMorph, MenuMorph, isString, isNil, SliderMorph, MorphicPreferences,
 ScrollFrameMorph*/
 
-modules.widgets = '2016-July-19';
+modules.widgets = '2017-January-03';
 
 var PushButtonMorph;
 var ToggleButtonMorph;
@@ -575,6 +575,9 @@ ToggleButtonMorph.prototype.mouseLeave = function () {
         this.image = this.normalImage;
         this.changed();
     }
+    if (this.schedule) {
+        this.schedule.isActive = false;
+    }
     if (this.hint) {
         this.world().hand.destroyTemporaries();
     }