Cleaning up menu code.

* QuickHelp button has been removed in favor of a Help menu item.
* Keyboard shortcuts are now in the menus.
* Numerous fixes to subtle aspects of the wijmenu implementation.

IPython/frontend/html/notebook/static/css/notebook.css

@@ -60,6 +60,10 span#kernel_status {
     padding: 0px;
 }
 
+.wijmo-wijmenu .wijmo-wijmenu-parent .wijmo-wijmenu-child {
+    width: 225px;
+}
+
 #kernel_persist {
     float: right;
 }
@@ -347,7 +351,7 p.dialog {
 
 .shortcut_key {
     display: inline-block;
-    width: 13ex;
+    width: 15ex;
     text-align: right;
     font-family: monospace;
 }

IPython/frontend/html/notebook/static/js/menubar.js

@@ -26,6 +26,21 var IPython = (function (IPython) {
         $('ul#menus').wijmenu("option", "showDelay", 200);
         $('ul#menus').wijmenu("option", "hideDelay", 200);
         $(".selector").wijmenu("option", "animation", {animated:"fade", duration: 200, easing: null})
+        // Close all menus when a menu item is clicked. This is needed when
+        // menu shortcuts are used as they have a slightly different structure
+        // in the DOM.
+        $(".wijmo-wijmenu-text").parent().bind("click", function () {
+            $('ul#menus').wijmenu("hideAllMenus");
+            console.log('I am closing you!');
+        });
+        // Make sure we hover over menu items correctly. This is needed when
+        // menu shortcuts are used as they have a slightly different structure
+        // in the DOM.
+        $(".wijmo-wijmenu-link").hover(function () {
+            $(this).addClass("ui-state-hover");
+        }, function () {
+            $(this).removeClass("ui-state-hover");
+        });
     };
 
 
@@ -65,6 +80,12 var IPython = (function (IPython) {
         this.element.find('#move_cell_down').click(function () {
             IPython.notebook.move_cell_down();
         });
+        this.element.find('#select_previous').click(function () {
+            IPython.notebook.select_prev();
+        });
+        this.element.find('#select_next').click(function () {
+            IPython.notebook.select_next();
+        });
         // Insert
         this.element.find('#insert_cell_above').click(function () {
             IPython.notebook.insert_code_cell_above();
@@ -101,6 +122,10 var IPython = (function (IPython) {
         this.element.find('#restart_kernel').click(function () {
             IPython.notebook.restart_kernel();
         });
+        // Help
+        this.element.find('#keyboard_shortcuts').click(function () {
+            IPython.quick_help.show_keyboard_shortcuts();
+        });
     };
 
 

IPython/frontend/html/notebook/static/js/notebook.js

@@ -213,50 +213,6 var IPython = (function (IPython) {
     };
 
 
-    Notebook.prototype.toggle_keyboard_shortcuts = function () {
-        // toggles display of keyboard shortcut dialog
-        var that = this;
-        if ( this.shortcut_dialog ){
-            // if dialog is already shown, close it
-            this.shortcut_dialog.dialog("close");
-            this.shortcut_dialog = null;
-            return;
-        }
-        var dialog = $('<div/>');
-        this.shortcut_dialog = dialog;
-        var shortcuts = [
-            {key: 'Shift-Enter', help: 'run cell'},
-            {key: 'Ctrl-Enter', help: 'run cell in-place'},
-            {key: 'Ctrl-m d', help: 'delete cell'},
-            {key: 'Ctrl-m a', help: 'insert cell above'},
-            {key: 'Ctrl-m b', help: 'insert cell below'},
-            {key: 'Ctrl-m t', help: 'toggle output'},
-            {key: 'Ctrl-m l', help: 'toggle line numbers'},
-            {key: 'Ctrl-m s', help: 'save notebook'},
-            {key: 'Ctrl-m j', help: 'move cell down'},
-            {key: 'Ctrl-m k', help: 'move cell up'},
-            {key: 'Ctrl-m c', help: 'code cell'},
-            {key: 'Ctrl-m m', help: 'markdown cell'},
-            {key: 'Ctrl-m p', help: 'select previous'},
-            {key: 'Ctrl-m n', help: 'select next'},
-            {key: 'Ctrl-m i', help: 'interrupt kernel'},
-            {key: 'Ctrl-m .', help: 'restart kernel'},
-            {key: 'Ctrl-m h', help: 'show keyboard shortcuts'}
-        ];
-        for (var i=0; i<shortcuts.length; i++) {
-            dialog.append($('<div>').
-                append($('<span/>').addClass('shortcut_key').html(shortcuts[i].key)).
-                append($('<span/>').addClass('shortcut_descr').html(' : ' + shortcuts[i].help))
-            );
-        };
-        dialog.bind('dialogclose', function(event) {
-            // dialog has been closed, allow it to be drawn again.
-            that.shortcut_dialog = null;
-        });
-        dialog.dialog({title: 'Keyboard shortcuts'});
-    };
-
-
     Notebook.prototype.scroll_to_bottom = function () {
         this.element.animate({scrollTop:this.element.get(0).scrollHeight}, 0);
     };
@@ -691,6 +647,7 var IPython = (function (IPython) {
             resizable: false,
             modal: true,
             title: "Restart kernel or continue running?",
+            closeText: '',
             buttons : {
                 "Restart": function () {
                     that.kernel.restart($.proxy(that.kernel_started, that));

IPython/frontend/html/notebook/static/js/quickhelp.js

@@ -12,24 +12,49
 var IPython = (function (IPython) {
 
     var QuickHelp = function (selector) {
-        this.selector = selector;
-        if (this.selector !== undefined) {
-            this.element = $(selector);
-            this.style();
-            this.bind_events();
-        }
-    };
-
-    QuickHelp.prototype.style = function () {
-        this.element.find('button#quick_help').button();
-        this.element.find('button#quick_help').attr('title', "Show/Hide the keyboard shortcuts for the IPython Notebook");
     };
 
-    QuickHelp.prototype.bind_events = function () {
+    QuickHelp.prototype.show_keyboard_shortcuts = function () {
+        // toggles display of keyboard shortcut dialog
         var that = this;
-        this.element.find("button#quick_help").click(function () {
-            IPython.notebook.toggle_keyboard_shortcuts();
+        if ( this.shortcut_dialog ){
+            // if dialog is already shown, close it
+            this.shortcut_dialog.dialog("close");
+            this.shortcut_dialog = null;
+            return;
+        }
+        var dialog = $('<div/>');
+        this.shortcut_dialog = dialog;
+        var shortcuts = [
+            {key: 'Shift-Enter', help: 'run cell'},
+            {key: 'Ctrl-Enter', help: 'run cell in-place'},
+            {key: 'Ctrl-m d', help: 'delete cell'},
+            {key: 'Ctrl-m a', help: 'insert cell above'},
+            {key: 'Ctrl-m b', help: 'insert cell below'},
+            {key: 'Ctrl-m t', help: 'toggle output'},
+            {key: 'Ctrl-m l', help: 'toggle line numbers'},
+            {key: 'Ctrl-m s', help: 'save notebook'},
+            {key: 'Ctrl-m j', help: 'move cell down'},
+            {key: 'Ctrl-m k', help: 'move cell up'},
+            {key: 'Ctrl-m c', help: 'code cell'},
+            {key: 'Ctrl-m m', help: 'markdown cell'},
+            {key: 'Ctrl-m p', help: 'select previous'},
+            {key: 'Ctrl-m n', help: 'select next'},
+            {key: 'Ctrl-m i', help: 'interrupt kernel'},
+            {key: 'Ctrl-m .', help: 'restart kernel'},
+            {key: 'Ctrl-m h', help: 'show keyboard shortcuts'}
+        ];
+        for (var i=0; i<shortcuts.length; i++) {
+            dialog.append($('<div>').
+                append($('<span/>').addClass('shortcut_key').html(shortcuts[i].key)).
+                append($('<span/>').addClass('shortcut_descr').html(' : ' + shortcuts[i].help))
+            );
+        };
+        dialog.bind('dialogclose', function(event) {
+            // dialog has been closed, allow it to be drawn again.
+            that.shortcut_dialog = null;
         });
+        dialog.dialog({title: 'Keyboard shortcuts', closeText: ''});
     };
 
     // Set module variables

IPython/frontend/html/notebook/templates/notebook.html

@@ -48,9 +48,6
         <input type="text" id="notebook_name" size="20"></textarea>
         <button id="save_notebook"><u>S</u>ave</button>
     </span>
-    <span id="quick_help_area">
-      <button id="quick_help">Quick<u>H</u>elp</button>
-    </span>
 
     <span id="login_widget">
       {% comment  This is a temporary workaround to hide the logout button %}
@@ -69,10 +66,15
     <ul id="menus">
         <li><a href="#">File</a>
             <ul>
-                <li id="new_notebook"><a href="#">New</a></li>
-                <li id="open_notebook"><a href="#">Open...</a></li>
+                <li id="new_notebook"><span class="wijmo-wijmenu-text">New</span></li>
+                <li id="open_notebook"><span class="wijmo-wijmenu-text">Open</span></li>
                 <li></li>
-                <li id="save_notebook"><a href="#">Save</a></li>
+                <li id="save_notebook">
+                    <div>
+                        <span class="wijmo-wijmenu-text">Save</span>
+                        <span class="wijmo-wijmenu-icon-right">Ctrl+m s</span>
+                    </div>
+                </li>
                 <li></li>
                 <li><a href="#">Download as</a>
                     <ul>
@@ -82,48 +84,124
                 </li>
                 <li></li>
                 <li id="print_notebook"><a href="#">Print</a></li>
-                
             </ul>
         </li>
         <li><a href="#">Edit</a>
             <ul>
-                <li id="delete_cell"><a href="#">Delete</a></li>
+                <li id="delete_cell">
+                    <div>
+                        <span class="wijmo-wijmenu-text">Delete</span>
+                        <span class="wijmo-wijmenu-icon-right">Ctrl+m d</span>
+                    </div>
+                </li>
                 <li></li>
-                <li id="move_cell_up"><a href="#">Move Cell Up</a></li>
-                <li id="move_cell_down"><a href="#">Move Cell Down</a></li>
+                <li id="move_cell_up">
+                    <div>
+                        <span class="wijmo-wijmenu-text">Move Cell Up</span>
+                        <span class="wijmo-wijmenu-icon-right">Ctrl+m k</span>
+                    </div>
+                </li>
+                <li id="move_cell_down">
+                    <div>
+                        <span class="wijmo-wijmenu-text">Move Cell Down</span>
+                        <span class="wijmo-wijmenu-icon-right">Ctrl+m j</span>
+                    </div>
+                </li>
+                <li></li>
+                <li id="select_previous">
+                    <div>
+                        <span class="wijmo-wijmenu-text">Select Previous</span>
+                        <span class="wijmo-wijmenu-icon-right">Ctrl+m p</span>
+                    </div>
+                </li>
+                <li id="select_next">
+                    <div>
+                        <span class="wijmo-wijmenu-text">Select Next</span>
+                        <span class="wijmo-wijmenu-icon-right">Ctrl+m n</span>
+                    </div>
+                </li>
             </ul>
         </li>
         <li><a href="#">Insert</a>
             <ul>
-                <li id="insert_cell_above"><a href="#">Insert Cell Above</a>
-                <li id="insert_cell_below"><a href="#">Insert Cell Below</a>
+                <li id="insert_cell_above">
+                    <div>
+                        <span class="wijmo-wijmenu-text">Insert Cell Above</span>
+                        <span class="wijmo-wijmenu-icon-right">Ctrl+m a</span>
+                    </div>
+                </li>
+                <li id="insert_cell_below">
+                    <div>
+                        <span class="wijmo-wijmenu-text">Insert Cell Below</span>
+                        <span class="wijmo-wijmenu-icon-right">Ctrl+m b</span>
+                    </div>
                 </li>
             </ul>
         </li>
         <li><a href="#">Cell</a>
             <ul>
-                <li id="run_cell"><a href="#">Run</a></li>
-                <li id="run_cell_in_place"><a href="#">Run in Place</a></li>
+                <li id="run_cell">
+                    <div>
+                        <span class="wijmo-wijmenu-text">Run</span>
+                        <span class="wijmo-wijmenu-icon-right">Shift+Enter</span>
+                    </div>
+                </li>
+                <li id="run_cell_in_place">
+                    <div>
+                        <span class="wijmo-wijmenu-text">Run in Place</span>
+                        <span class="wijmo-wijmenu-icon-right">Ctrl+Enter</span>
+                    </div>
+                </li>
                 <li id="run_all_cells"><a href="#">Run All</a></li>
                 <li></li>
-                <li id="to_code"><a href="#">Code Cell</a></li>
-                <li id="to_markdown"><a href="#">Markdown Cell</a></li>
+                <li id="to_code">
+                    <div>
+                        <span class="wijmo-wijmenu-text">Code Cell</span>
+                        <span class="wijmo-wijmenu-icon-right">Ctrl+m c</span>
+                    </div>
+                </li>
+                <li id="to_markdown">
+                    <div>
+                        <span class="wijmo-wijmenu-text">Markdown Cell</span>
+                        <span class="wijmo-wijmenu-icon-right">Ctrl+m s</span>
+                    </div>
+                </li>
                 <li></li>
-                <li id="toggle_output"><a href="#">Toggle Output</a></li>
+                <li id="toggle_output">
+                    <div>
+                        <span class="wijmo-wijmenu-text">Toggle Output</span>
+                        <span class="wijmo-wijmenu-icon-right">Ctrl+m t</span>
+                    </div>
+                </li>
                 <li id="clear_all_output"><a href="#">Clear All Output</a></li>
             </ul>
         </li>
         <li><a href="#">Kernel</a>
             <ul>
-                <li id="int_kernel"><a href="#">Interrupt</a></li>
-                <li id="restart_kernel"><a href="#">Restart</a></li>
+                <li id="int_kernel">
+                    <div>
+                        <span class="wijmo-wijmenu-text">Interrupt</span>
+                        <span class="wijmo-wijmenu-icon-right">Ctrl+m i</span>
+                    </div>
+                </li>
+                <li id="restart_kernel">
+                    <div>
+                        <span class="wijmo-wijmenu-text">Restart</span>
+                        <span class="wijmo-wijmenu-icon-right">Ctrl+m s</span>
+                    </div>
+                </li>
             </ul>
         </li>
         <li><a href="#">Help</a>
             <ul>
                 <li><a href="http://ipython.org/documentation.html" target="_blank">IPython Help</a></li>
                 <li><a href="http://ipython.org/ipython-doc/stable/interactive/htmlnotebook.html" target="_blank">Notebook Help</a></li>
-                <li><a href="#">Notebook QuickRef</a></li>
+                <li id="keyboard_shortcuts">
+                    <div>
+                        <span class="wijmo-wijmenu-text">Keyboard Shortcuts</span>
+                        <span class="wijmo-wijmenu-icon-right">Ctrl+m h</span>
+                    </div>
+                </li>
                 <li><h2>External Docs</h2></li>
                 <li><a href="http://docs.python.org" target="_blank">Python</a></li>
                 <li><a href="http://docs.scipy.org/doc/numpy/reference/" target="_blank">NumPy</a></li>