Merge pull request #5049 from ivanov/quickhelp-update

update quickhelp on adding and removing shortcuts

IPython/html/static/base/js/keyboard.js

@@ -44,12 +44,12 b' IPython.keyboard = (function (IPython) {'
     // These apply to Firefox and Opera
     var _mozilla_keycodes = {
         '; :': 59, '= +': 61, '- _': 173, 'meta': 224
-    }
+    };
     
     // This apply to Webkit and IE
     var _ie_keycodes = {
-        '; :': 186, '= +': 187, '- _': 189, 
-    }
+        '; :': 186, '= +': 187, '- _': 189
+    };
     
     var browser = IPython.utils.browser[0];
     var platform = IPython.utils.platform;
@@ -65,45 +65,47 b' IPython.keyboard = (function (IPython) {'
     for (var name in _keycodes) {
         var names = name.split(' ');
         if (names.length === 1) {
-            var n = names[0]
-            keycodes[n] = _keycodes[n]
-            inv_keycodes[_keycodes[n]] = n
+            var n = names[0];
+            keycodes[n] = _keycodes[n];
+            inv_keycodes[_keycodes[n]] = n;
         } else {
             var primary = names[0];
             var secondary = names[1];
-            keycodes[primary] = _keycodes[name]
-            keycodes[secondary] = _keycodes[name]
-            inv_keycodes[_keycodes[name]] = primary
+            keycodes[primary] = _keycodes[name];
+            keycodes[secondary] = _keycodes[name];
+            inv_keycodes[_keycodes[name]] = primary;
         }
     }
 
     var normalize_key = function (key) {
         return inv_keycodes[keycodes[key]];
-    }
+    };
 
     var normalize_shortcut = function (shortcut) {
         // Put a shortcut into normalized form:
         // 1. Make lowercase
         // 2. Replace cmd by meta
-        // 3. Sort '+' separated modifiers into the order alt+ctrl+meta+shift
+        // 3. Sort '-' separated modifiers into the order alt-ctrl-meta-shift
         // 4. Normalize keys
         shortcut = shortcut.toLowerCase().replace('cmd', 'meta');
-        var values = shortcut.split("+");
+        shortcut = shortcut.replace(/-$/, '_');  // catch shortcuts using '-' key
+        var values = shortcut.split("-");
         if (values.length === 1) {
-            return normalize_key(values[0])
+            return normalize_key(values[0]);
         } else {
             var modifiers = values.slice(0,-1);
             var key = normalize_key(values[values.length-1]);
             modifiers.sort();
-            return modifiers.join('+') + '+' + key;
+            return modifiers.join('-') + '-' + key;
         }
-    }
+    };
 
     var shortcut_to_event = function (shortcut, type) {
-        // Convert a shortcut (shift+r) to a jQuery Event object
+        // Convert a shortcut (shift-r) to a jQuery Event object
         type = type || 'keydown';
         shortcut = normalize_shortcut(shortcut);
-        var values = shortcut.split("+");
+        shortcut = shortcut.replace(/-$/, '_');  // catch shortcuts using '-' key
+        var values = shortcut.split("-");
         var modifiers = values.slice(0,-1);
         var key = values[values.length-1];
         var opts = {which: keycodes[key]};
@@ -112,19 +114,19 b' IPython.keyboard = (function (IPython) {'
         if (modifiers.indexOf('meta') !== -1) {opts.metaKey = true;}
         if (modifiers.indexOf('shift') !== -1) {opts.shiftKey = true;}
         return $.Event(type, opts);
-    }
+    };
 
     var event_to_shortcut = function (event) {
-        // Convert a jQuery Event object to a shortcut (shift+r)
+        // Convert a jQuery Event object to a shortcut (shift-r)
         var shortcut = '';
-        var key = inv_keycodes[event.which]
-        if (event.altKey && key !== 'alt') {shortcut += 'alt+';}
-        if (event.ctrlKey && key !== 'ctrl') {shortcut += 'ctrl+';}
-        if (event.metaKey && key !== 'meta') {shortcut += 'meta+';}
-        if (event.shiftKey && key !== 'shift') {shortcut += 'shift+';}
+        var key = inv_keycodes[event.which];
+        if (event.altKey && key !== 'alt') {shortcut += 'alt-';}
+        if (event.ctrlKey && key !== 'ctrl') {shortcut += 'ctrl-';}
+        if (event.metaKey && key !== 'meta') {shortcut += 'meta-';}
+        if (event.shiftKey && key !== 'shift') {shortcut += 'shift-';}
         shortcut += key;
-        return shortcut
-    }
+        return shortcut;
+    };
 
     var trigger_keydown = function (shortcut, element) {
         // Trigger shortcut keydown on an element
@@ -132,17 +134,17 b' IPython.keyboard = (function (IPython) {'
         element = $(element);
         var event = shortcut_to_event(shortcut, 'keydown');
         element.trigger(event);
-    }
+    };
 
 
     // Shortcut manager class
 
     var ShortcutManager = function (delay) {
-        this._shortcuts = {}
-        this._counts = {}
-        this._timers = {}
+        this._shortcuts = {};
+        this._counts = {};
+        this._timers = {};
         this.delay = delay || 800; // delay in milliseconds
-    }
+    };
 
     ShortcutManager.prototype.help = function () {
         var help = [];
@@ -168,15 +170,15 b' IPython.keyboard = (function (IPython) {'
             return 0;
         });
         return help;
-    }
+    };
 
     ShortcutManager.prototype.clear_shortcuts = function () {
         this._shortcuts = {};
-    }
+    };
 
-    ShortcutManager.prototype.add_shortcut = function (shortcut, data) {
+    ShortcutManager.prototype.add_shortcut = function (shortcut, data, suppress_help_update) {
         if (typeof(data) === 'function') {
-            data = {help: '', help_index: '', handler: data}
+            data = {help: '', help_index: '', handler: data};
         }
         data.help_index = data.help_index || '';
         data.help = data.help || '';
@@ -187,19 +189,29 b' IPython.keyboard = (function (IPython) {'
         shortcut = normalize_shortcut(shortcut);
         this._counts[shortcut] = 0;
         this._shortcuts[shortcut] = data;
-    }
+        if (!suppress_help_update) {
+            // update the keyboard shortcuts notebook help
+            $([IPython.events]).trigger('rebuild.QuickHelp');
+        }
+    };
 
     ShortcutManager.prototype.add_shortcuts = function (data) {
         for (var shortcut in data) {
-            this.add_shortcut(shortcut, data[shortcut]);
+            this.add_shortcut(shortcut, data[shortcut], true);
         }
-    }
+        // update the keyboard shortcuts notebook help
+        $([IPython.events]).trigger('rebuild.QuickHelp');
+    };
 
-    ShortcutManager.prototype.remove_shortcut = function (shortcut) {
+    ShortcutManager.prototype.remove_shortcut = function (shortcut, suppress_help_update) {
         shortcut = normalize_shortcut(shortcut);
         delete this._counts[shortcut];
         delete this._shortcuts[shortcut];
-    }
+        if (!suppress_help_update) {
+            // update the keyboard shortcuts notebook help
+            $([IPython.events]).trigger('rebuild.QuickHelp');
+        }
+    };
 
     ShortcutManager.prototype.count_handler = function (shortcut, event, data) {
         var that = this;
@@ -219,7 +231,7 b' IPython.keyboard = (function (IPython) {'
             t[shortcut] = timer;
         }
         return false;
-    }
+    };
 
     ShortcutManager.prototype.call_handler = function (event) {
         var shortcut = event_to_shortcut(event);
@@ -235,7 +247,7 b' IPython.keyboard = (function (IPython) {'
             }
         }
         return true;
-    }
+    };
 
     ShortcutManager.prototype.handles = function (event) {
         var shortcut = event_to_shortcut(event);
@@ -252,6 +264,6 b' IPython.keyboard = (function (IPython) {'
         shortcut_to_event : shortcut_to_event,
         event_to_shortcut : event_to_shortcut,
         trigger_keydown : trigger_keydown
-    }
+    };
 
 }(IPython));

IPython/html/static/base/less/variables.less

@@ -5,5 +5,9 b''
 @monoFontFamily:        monospace;  // to allow user to customize their fonts
 @navbarHeight:          36px;
 
+code {
+  color: @black; // default code color in bootstrap is #d14 (crimson / amaranth)
+}
+
 // Our own global variables for all pages go here
 

IPython/html/static/notebook/js/keyboardmanager.js

@@ -26,7 +26,7 b' var IPython = (function (IPython) {'
                 return true;
             }
         },
-        'shift+enter' : {
+        'shift-enter' : {
             help    : 'run cell, select below',
             help_index : 'ba',
             handler : function (event) {
@@ -34,7 +34,7 b' var IPython = (function (IPython) {'
                 return false;
             }
         },
-        'ctrl+enter' : {
+        'ctrl-enter' : {
             help    : 'run cell',
             help_index : 'bb',
             handler : function (event) {
@@ -42,7 +42,7 b' var IPython = (function (IPython) {'
                 return false;
             }
         },
-        'alt+enter' : {
+        'alt-enter' : {
             help    : 'run cell, insert below',
             help_index : 'bc',
             handler : function (event) {
@@ -53,7 +53,7 b' var IPython = (function (IPython) {'
     };
 
     if (platform === 'MacOS') {
-        default_common_shortcuts['cmd+s'] =
+        default_common_shortcuts['cmd-s'] =
             {
                 help    : 'save notebook',
                 help_index : 'fb',
@@ -64,7 +64,7 b' var IPython = (function (IPython) {'
                 }
             };
     } else {
-        default_common_shortcuts['ctrl+s'] =
+        default_common_shortcuts['ctrl-s'] =
             {
                 help    : 'save notebook',
                 help_index : 'fb',
@@ -87,7 +87,7 b' var IPython = (function (IPython) {'
                 return false;
             }
         },
-        'ctrl+m' : {
+        'ctrl-m' : {
             help    : 'command mode',
             help_index : 'ab',
             handler : function (event) {
@@ -141,7 +141,7 b' var IPython = (function (IPython) {'
                 }
             }
         },
-        'alt+-' : {
+        'alt--' : {
             help    : 'split cell',
             help_index : 'ea',
             handler : function (event) {
@@ -149,7 +149,7 b' var IPython = (function (IPython) {'
                 return false;
             }
         },
-        'alt+subtract' : {
+        'alt-subtract' : {
             help    : '',
             help_index : 'eb',
             handler : function (event) {
@@ -161,40 +161,40 b' var IPython = (function (IPython) {'
             help    : 'indent or complete',
             help_index : 'ec',
         },
-        'shift+tab' : {
+        'shift-tab' : {
             help    : 'tooltip',
             help_index : 'ed',
         },
     };
 
     if (platform === 'MacOS') {
-        default_edit_shortcuts['cmd+/'] =
+        default_edit_shortcuts['cmd-/'] =
             {
                 help    : 'toggle comment',
                 help_index : 'ee'
             };
-        default_edit_shortcuts['cmd+]'] =
+        default_edit_shortcuts['cmd-]'] =
             {
                 help    : 'indent',
                 help_index : 'ef'
             };
-        default_edit_shortcuts['cmd+['] =
+        default_edit_shortcuts['cmd-['] =
             {
                 help    : 'dedent',
                 help_index : 'eg'
             };
     } else {
-        default_edit_shortcuts['ctrl+/'] =
+        default_edit_shortcuts['ctrl-/'] =
             {
                 help    : 'toggle comment',
                 help_index : 'ee'
             };
-        default_edit_shortcuts['ctrl+]'] =
+        default_edit_shortcuts['ctrl-]'] =
             {
                 help    : 'indent',
                 help_index : 'ef'
             };
-        default_edit_shortcuts['ctrl+['] =
+        default_edit_shortcuts['ctrl-['] =
             {
                 help    : 'dedent',
                 help_index : 'eg'
@@ -276,7 +276,7 b' var IPython = (function (IPython) {'
                 return false;
             }
         },
-        'shift+v' : {
+        'shift-v' : {
             help    : 'paste cell above',
             help_index : 'eg',
             handler : function (event) {
@@ -401,7 +401,7 b' var IPython = (function (IPython) {'
                 return false;
             }
         },
-        'shift+o' : {
+        'shift-o' : {
             help    : 'toggle output scrolling',
             help_index : 'gc',
             handler : function (event) {
@@ -417,7 +417,7 b' var IPython = (function (IPython) {'
                 return false;
             }
         },
-        'ctrl+j' : {
+        'ctrl-j' : {
             help    : 'move cell down',
             help_index : 'eb',
             handler : function (event) {
@@ -425,7 +425,7 b' var IPython = (function (IPython) {'
                 return false;
             }
         },
-        'ctrl+k' : {
+        'ctrl-k' : {
             help    : 'move cell up',
             help_index : 'ea',
             handler : function (event) {
@@ -475,7 +475,7 b' var IPython = (function (IPython) {'
                 return false;
             }
         },
-        'shift+m' : {
+        'shift-m' : {
             help    : 'merge cell below',
             help_index : 'ek',
             handler : function (event) {

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

@@ -18,6 +18,11 b' var IPython = (function (IPython) {'
     QuickHelp.prototype.show_keyboard_shortcuts = function () {
         // toggles display of keyboard shortcut dialog
         var that = this;
+        if ( this.force_rebuild ) {
+            this.shortcut_dialog.remove();
+            delete(this.shortcut_dialog);
+            this.force_rebuild = false;
+        }
         if ( this.shortcut_dialog ){
             // if dialog is already shown, close it
             $(this.shortcut_dialog).modal("toggle");
@@ -38,7 +43,7 b' var IPython = (function (IPython) {'
             'allows you to type code/text into a cell and is indicated by a green cell '+
             'border. <b>Command mode</b> binds the keyboard to notebook level actions '+
             'and is indicated by a grey cell border.'
-        )
+        );
         element.append(doc);
 
         // Command mode
@@ -57,73 +62,63 b' var IPython = (function (IPython) {'
                 Close : {}
             }
         });
+        
+        $([IPython.events]).on('rebuild.QuickHelp', function() { that.force_rebuild = true;});
     };
 
     QuickHelp.prototype.build_command_help = function () {
         var command_shortcuts = IPython.keyboard_manager.command_shortcuts.help();
-        var help, shortcut;
-        var i, half, n;
+        return build_div('<h4>Command Mode (press <code>Esc</code> to enable)</h4>', command_shortcuts);
+    };
 
-        // Command mode
-        var cmd_div = $('<div/>').append($('<h4>Command Mode (press <code>esc</code> to enable)</h4>'));
-        var cmd_sub_div = $('<div/>').addClass('hbox');
-        var cmd_col1 = $('<div/>').addClass('box-flex0');
-        var cmd_col2 = $('<div/>').addClass('box-flex0');
-        n = command_shortcuts.length;
-        half = ~~(n/2);  // Truncate :)
-        for (i=0; i<half; i++) {
-            help = command_shortcuts[i]['help'];
-            shortcut = command_shortcuts[i]['shortcut'];
-            cmd_col1.append($('<div>').addClass('quickhelp').
-                append($('<span/>').addClass('shortcut_key').text(shortcut)).
-                append($('<span/>').addClass('shortcut_descr').text(' : ' + help))
-            );
-        };
-        for (i=half; i<n; i++) {
-            help = command_shortcuts[i]['help'];
-            shortcut = command_shortcuts[i]['shortcut'];
-            cmd_col2.append($('<div>').addClass('quickhelp').
-                append($('<span/>').addClass('shortcut_key').text(shortcut)).
-                append($('<span/>').addClass('shortcut_descr').text(' : ' + help))
-            );
-        };
-        cmd_sub_div.append(cmd_col1).append(cmd_col2);
-        cmd_div.append(cmd_sub_div);
-        return cmd_div;
-    }
+    var special_case = { pageup: "PageUp", pagedown: "Page Down", 'minus': '-' };
+    var prettify = function (s) {
+        s = s.replace(/-$/, 'minus'); // catch shortcuts using '-' key
+        var keys = s.split('-');
+        var k, i;
+        for (i in keys) {
+            k = keys[i];
+            if ( k.length == 1 ) {
+                keys[i] = "<code><strong>" + k + "</strong></code>";
+                continue; // leave individual keys lower-cased
+            }
+            keys[i] = ( special_case[k] ? special_case[k] : k.charAt(0).toUpperCase() + k.slice(1) );
+            keys[i] = "<code><strong>" + keys[i] + "</strong></code>";
+        }
+        return keys.join('-');
+
+
+    };
 
     QuickHelp.prototype.build_edit_help = function () {
         var edit_shortcuts = IPython.keyboard_manager.edit_shortcuts.help();
-        var help, shortcut;
-        var i, half, n;
-
         // Edit mode
-        var edit_div = $('<div/>').append($('<h4>Edit Mode (press <code>enter</code> to enable)</h4>'));
-        var edit_sub_div = $('<div/>').addClass('hbox');
-        var edit_col1 = $('<div/>').addClass('box-flex0');
-        var edit_col2 = $('<div/>').addClass('box-flex0');
-        n = edit_shortcuts.length;
+        return build_div('<h4>Edit Mode (press <code>Enter</code> to enable)</h4>', edit_shortcuts);
+    };
+
+    var build_one = function (s) {
+        var help = s.help;
+        var shortcut = prettify(s.shortcut);
+        return $('<div>').addClass('quickhelp').
+            append($('<span/>').addClass('shortcut_key').append($(shortcut))).
+            append($('<span/>').addClass('shortcut_descr').text(' : ' + help));
+
+    };
+
+    var build_div = function (title, shortcuts) {
+        var i, half, n;
+        var div = $('<div/>').append($(title));
+        var sub_div = $('<div/>').addClass('hbox');
+        var col1 = $('<div/>').addClass('box-flex0');
+        var col2 = $('<div/>').addClass('box-flex0');
+        n = shortcuts.length;
         half = ~~(n/2);  // Truncate :)
-        for (i=0; i<half; i++) {
-            help = edit_shortcuts[i]['help'];
-            shortcut = edit_shortcuts[i]['shortcut'];
-            edit_col1.append($('<div>').addClass('quickhelp').
-                append($('<span/>').addClass('shortcut_key').text(shortcut)).
-                append($('<span/>').addClass('shortcut_descr').text(' : ' + help))
-            );
-        };
-        for (i=half; i<n; i++) {
-            help = edit_shortcuts[i]['help'];
-            shortcut = edit_shortcuts[i]['shortcut'];
-            edit_col2.append($('<div>').addClass('quickhelp').
-                append($('<span/>').addClass('shortcut_key').text(shortcut)).
-                append($('<span/>').addClass('shortcut_descr').text(' : ' + help))
-            );
-        };
-        edit_sub_div.append(edit_col1).append(edit_col2);
-        edit_div.append(edit_sub_div);
-        return edit_div;
-    }
+        for (i=0; i<half; i++) { col1.append( build_one(shortcuts[i]) ); }
+        for (i=half; i<n; i++) { col2.append( build_one(shortcuts[i]) ); }
+        sub_div.append(col1).append(col2);
+        div.append(sub_div);
+        return div;
+    };
 
     // Set module variables
     IPython.QuickHelp = QuickHelp;

IPython/html/static/notebook/js/tour.js

@@ -56,7 +56,7 b' var tour_steps = ['
     title: "Edit Mode",
     placement: 'bottom',
     onShow: function(tour) { edit_mode(); },
-    content: "Pressing <code>enter</code> or clicking in the input text area of the cell switches to Edit Mode."
+    content: "Pressing <code>Enter</code> or clicking in the input text area of the cell switches to Edit Mode."
   }, {
     element: '.selected',
     title: "Edit Mode",
@@ -68,7 +68,7 b' var tour_steps = ['
     title: "Back to Command Mode",
     placement: 'bottom',
     onShow: function(tour) { IPython.notebook.command_mode(); },
-    content: "Pressing <code>esc</code> or clicking outside of the input text area takes you back to Command Mode."
+    content: "Pressing <code>Esc</code> or clicking outside of the input text area takes you back to Command Mode."
   }, {
     element: '#keyboard_shortcuts',
     title: "Keyboard Shortcuts",

IPython/html/static/notebook/less/quickhelp.less

@@ -1,6 +1,6 b''
 .shortcut_key {
     display: inline-block;
-    width: 15ex;
+    width: 16ex;
     text-align: right;
     font-family: @monoFontFamily;
 }

IPython/html/static/style/ipython.min.css

@@ -2,6 +2,7 b''
 .clearfix:after{clear:both}
 .hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}
 .input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
+code{color:#000}
 .border-box-sizing{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
 .corner-all{border-radius:4px}
 .hbox{display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;display:flex;flex-direction:row;align-items:stretch}

IPython/html/static/style/style.min.css

@@ -1265,6 +1265,7 b' a .icon-rotate-90:before,a .icon-rotate-180:before,a .icon-rotate-270:before,a .'
 .icon-vk:before{content:"\f189"}
 .icon-weibo:before{content:"\f18a"}
 .icon-renren:before{content:"\f18b"}
+code{color:#000}
 .border-box-sizing{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
 .corner-all{border-radius:4px}
 .hbox{display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;display:flex;flex-direction:row;align-items:stretch}
@@ -1514,7 +1515,7 b' ul#help_menu li a{overflow:hidden;padding-right:2.2em}ul#help_menu li a i{margin'
 div#pager_splitter{height:8px}
 #pager-container{position:relative;padding:15px 0}
 div#pager{font-size:14px;line-height:20px;overflow:auto;display:none}div#pager pre{font-size:13px;line-height:1.21429em;color:#000;background-color:#f7f7f7;padding:.4em}
-.shortcut_key{display:inline-block;width:15ex;text-align:right;font-family:monospace}
+.shortcut_key{display:inline-block;width:16ex;text-align:right;font-family:monospace}
 .shortcut_descr{display:inline-block}
 span#save_widget{padding:0 5px;margin-top:12px}
 span#checkpoint_status,span#autosave_status{font-size:small}

IPython/html/tests/base/keyboard.js

@@ -1,13 +1,13 b''
 
 
 var normalized_shortcuts = [
-    'ctrl+shift+m',
-    'alt+meta+p',
+    'ctrl-shift-m',
+    'alt-meta-p',
 ];
 
 var to_normalize = [
-    ['shift+%', 'shift+5'],
-    ['ShiFT+MeTa+CtRl+AlT+m', 'alt+ctrl+meta+shift+m'],
+    ['shift-%', 'shift-5'],
+    ['ShiFT-MeTa-CtRl-AlT-m', 'alt-ctrl-meta-shift-m'],
 ];
 
 var unshifted = "` 1 2 3 4 5 6 7 8 9 0 - = q w e r t y u i o p [ ] \\ a s d f g h j k l ; ' z x c v b n m , . /";
@@ -33,7 +33,7 b' casper.notebook_test(function () {'
             }, item);
             this.test.assertEquals(result, item[1], 'Normalize shortcut: '+item[0]);
         });
-    })
+    });
 
     this.then(function () {
         this.each(normalized_shortcuts, function (self, item) {
@@ -46,4 +46,4 b' casper.notebook_test(function () {'
         });
     });
 
-});
  No newline at end of file
+});

IPython/html/tests/notebook/execute_code.js

@@ -22,7 +22,7 b' casper.notebook_test(function () {'
         var cell = IPython.notebook.get_cell(0);
         cell.set_text('a=11; print(a)');
         cell.clear_output();
-        IPython.keyboard.trigger_keydown('shift+enter');
+        IPython.keyboard.trigger_keydown('shift-enter');
     });
 
     this.wait_for_output(0);
@@ -41,7 +41,7 b' casper.notebook_test(function () {'
         var cell = IPython.notebook.get_cell(0);
         cell.set_text('a=12; print(a)');
         cell.clear_output();
-        IPython.keyboard.trigger_keydown('ctrl+enter');
+        IPython.keyboard.trigger_keydown('ctrl-enter');
     });
 
     this.wait_for_output(0);