Add submenu under kernel for changing kernel

IPython/html/static/notebook/js/kernelselector.js

@@ -1,72 +1,80
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 define([
     'base/js/namespace',
     'jquery',
     'base/js/utils',
 ], function(IPython, $, utils) {
     "use strict";
     
     var KernelSelector = function(selector, notebook) {
         this.selector = selector;
         this.notebook = notebook;
         this.events = notebook.events;
         this.current_selection = notebook.default_kernel_name;
         this.kernelspecs = {};
         if (this.selector !== undefined) {
             this.element = $(selector);
             this.request_kernelspecs();
         }
         this.bind_events();
     };
     
     KernelSelector.prototype.request_kernelspecs = function() {
         var url = utils.url_join_encode(this.notebook.base_url, 'api/kernelspecs');
         $.ajax(url, {success: $.proxy(this.got_kernelspecs, this)});
     };
     
     KernelSelector.prototype.got_kernelspecs = function(data, status, xhr) {
         this.kernelspecs = {};
         var menu = this.element.find("#kernel_selector");
+        var change_kernel_submenu = $("#menu-change-kernel-submenu");
+        console.log(change_kernel_submenu);
         for (var i = 0; i < data.length; i++) {
             var ks = data[i];
             this.kernelspecs[ks.name] = ks;
             var ksentry = $("<li>").attr("id", "kernel-" +ks.name).append($('<a>')
                 .attr('href', '#')
                 .click($.proxy(this.change_kernel, this, ks.name))
                 .text(ks.display_name));
             menu.append(ksentry);
+
+            var ks_submenu_entry = $("<li>").attr("id", "kernel-submenu-"+ks.name).append($('<a>')
+                .attr('href', '#')
+                .click($.proxy(this.change_kernel, this, ks.name))
+                .text(ks.display_name));
+            change_kernel_submenu.append(ks_submenu_entry);
         }
     };
 
     KernelSelector.prototype.change_kernel = function(kernel_name) {
         if (kernel_name === this.current_selection) {
             return;
         }
         var ks = this.kernelspecs[kernel_name];
         this.events.trigger('spec_changed.Kernel', ks);
         this.notebook.session.delete();
         this.notebook.start_session(kernel_name);
     };
     
     KernelSelector.prototype.bind_events = function() {
         var that = this;
         this.events.on('spec_changed.Kernel', function(event, data) {
             that.current_selection = data.name;
             that.element.find("#current_kernel_spec").find('.kernel_name').text(data.display_name);
         });
         
         this.events.on('started.Session', function(events, session) {
             if (session.kernel_name !== that.current_selection) {
                 // If we created a 'python' session, we only know if it's Python
                 // 3 or 2 on the server's reply, so we fire the event again to
                 // set things up.
                 var ks = that.kernelspecs[session.kernel_name];
                 that.events.trigger('spec_changed.Kernel', ks);
             }
         });
     };
 
     return {'KernelSelector': KernelSelector};
 });

IPython/html/templates/notebook.html

@@ -1,331 +1,336
 {% extends "page.html" %}
 
 {% block stylesheet %}
 
 {% if mathjax_url %}
 <script type="text/javascript" src="{{mathjax_url}}?config=TeX-AMS_HTML-full&delayStartupUntil=configured" charset="utf-8"></script>
 {% endif %}
 <script type="text/javascript">
 // MathJax disabled, set as null to distingish from *missing* MathJax,
 // where it will be undefined, and should prompt a dialog later.
 window.mathjax_url = "{{mathjax_url}}";
 </script>
 
 <link rel="stylesheet" href="{{ static_url("components/bootstrap-tour/build/css/bootstrap-tour.min.css") }}" type="text/css" />
 <link rel="stylesheet" href="{{ static_url("components/codemirror/lib/codemirror.css") }}">
 
 {{super()}}
 
 <link rel="stylesheet" href="{{ static_url("notebook/css/override.css") }}" type="text/css" />
 
 {% endblock %}
 
 {% block params %}
 
 data-project="{{project}}"
 data-base-url="{{base_url}}"
 data-ws-url="{{ws_url}}"
 data-notebook-name="{{notebook_name}}"
 data-notebook-path="{{notebook_path}}"
 class="notebook_app"
 
 {% endblock %}
 
 
 {% block header %}
 
 
 <span id="save_widget" class="nav pull-left">
     <span id="notebook_name"></span>
     <span id="checkpoint_status"></span>
     <span id="autosave_status"></span>
 </span>
 
 <span id="kernel_selector_widget" class="pull-right dropdown">
     <button href="#" class="dropdown-toggle" data-toggle="dropdown" type='button' id="current_kernel_spec">
         <span class='kernel_name'>Python</span>
         <span class="caret"></span> 
     </button>
     <ul id="kernel_selector" class="dropdown-menu">
     </ul>
 </span>
 
 {% endblock %}
 
 
 {% block site %}
 
 <div id="menubar-container" class="container">
 <div id="menubar">
     <div id="menus" class="navbar navbar-default" role="navigation">
         <div class="container-fluid">
             <ul class="nav navbar-nav">
                 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">File</a>
                     <ul id="file_menu" class="dropdown-menu">
                         <li id="new_notebook"
                             title="Make a new notebook (Opens a new window)">
                             <a href="#">New</a></li>
                         <li id="open_notebook"
                             title="Opens a new window with the Dashboard view">
                             <a href="#">Open...</a></li>
                         <!-- <hr/> -->
                         <li class="divider"></li>
                         <li id="copy_notebook"
                             title="Open a copy of this notebook's contents and start a new kernel">
                             <a href="#">Make a Copy...</a></li>
                         <li id="rename_notebook"><a href="#">Rename...</a></li>
                         <li id="save_checkpoint"><a href="#">Save and Checkpoint</a></li>
                         <!-- <hr/> -->
                         <li class="divider"></li>
                         <li id="restore_checkpoint" class="dropdown-submenu"><a href="#">Revert to Checkpoint</a>
                           <ul class="dropdown-menu">
                             <li><a href="#"></a></li>
                             <li><a href="#"></a></li>
                             <li><a href="#"></a></li>
                             <li><a href="#"></a></li>
                             <li><a href="#"></a></li>
                           </ul>
                         </li>
                         <li class="divider"></li>
                         <li id="print_preview"><a href="#">Print Preview</a></li>
                         <li class="dropdown-submenu"><a href="#">Download as</a>
                             <ul class="dropdown-menu">
                                 <li id="download_ipynb"><a href="#">IPython Notebook (.ipynb)</a></li>
                                 <li id="download_py"><a href="#">Python (.py)</a></li>
                                 <li id="download_html"><a href="#">HTML (.html)</a></li>
                                 <li id="download_rst"><a href="#">reST (.rst)</a></li>
                                 <li id="download_pdf"><a href="#">PDF (.pdf)</a></li>
                             </ul>
                         </li>
                         <li class="divider"></li>
                         <li id="trust_notebook"
                             title="Trust the output of this notebook">
                             <a href="#" >Trust Notebook</a></li>
                         <li class="divider"></li>
                         <li id="kill_and_exit"
                             title="Shutdown this notebook's kernel, and close this window">
                             <a href="#" >Close and halt</a></li>
                     </ul>
                 </li>
                 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Edit</a>
                     <ul id="edit_menu" class="dropdown-menu">
                         <li id="cut_cell"><a href="#">Cut Cell</a></li>
                         <li id="copy_cell"><a href="#">Copy Cell</a></li>
                         <li id="paste_cell_above" class="disabled"><a href="#">Paste Cell Above</a></li>
                         <li id="paste_cell_below" class="disabled"><a href="#">Paste Cell Below</a></li>
                         <li id="paste_cell_replace" class="disabled"><a href="#">Paste Cell &amp; Replace</a></li>
                         <li id="delete_cell"><a href="#">Delete Cell</a></li>
                         <li id="undelete_cell" class="disabled"><a href="#">Undo Delete Cell</a></li>
                         <li class="divider"></li>
                         <li id="split_cell"><a href="#">Split Cell</a></li>
                         <li id="merge_cell_above"><a href="#">Merge Cell Above</a></li>
                         <li id="merge_cell_below"><a href="#">Merge Cell Below</a></li>
                         <li class="divider"></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 class="divider"></li>
                         <li id="edit_nb_metadata"><a href="#">Edit Notebook Metadata</a></li>
                     </ul>
                 </li>
                 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">View</a>
                     <ul id="view_menu" class="dropdown-menu">
                         <li id="toggle_header"
                             title="Show/Hide the IPython Notebook logo and notebook title (above menu bar)">
                             <a href="#">Toggle Header</a></li>
                         <li id="toggle_toolbar"
                             title="Show/Hide the action icons (below menu bar)">
                             <a href="#">Toggle Toolbar</a></li>
                     </ul>
                 </li>
                 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Insert</a>
                     <ul id="insert_menu" class="dropdown-menu">
                         <li id="insert_cell_above"
                             title="Insert an empty Code cell above the currently active cell">
                             <a href="#">Insert Cell Above</a></li>
                         <li id="insert_cell_below"
                             title="Insert an empty Code cell below the currently active cell">
                             <a href="#">Insert Cell Below</a></li>
                     </ul>
                 </li>
                 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Cell</a>
                     <ul id="cell_menu" class="dropdown-menu">
                         <li id="run_cell" title="Run this cell, and move cursor to the next one">
                             <a href="#">Run</a></li>
                         <li id="run_cell_select_below" title="Run this cell, select below">
                             <a href="#">Run and Select Below</a></li>
                         <li id="run_cell_insert_below" title="Run this cell, insert below">
                             <a href="#">Run and Insert Below</a></li>
                         <li id="run_all_cells" title="Run all cells in the notebook">
                             <a href="#">Run All</a></li>
                         <li id="run_all_cells_above" title="Run all cells above (but not including) this cell">
                             <a href="#">Run All Above</a></li>
                         <li id="run_all_cells_below" title="Run this cell and all cells below it">
                             <a href="#">Run All Below</a></li>
                         <li class="divider"></li>
                         <li id="change_cell_type" class="dropdown-submenu"
                             title="All cells in the notebook have a cell type. By default, new cells are created as 'Code' cells">
                             <a href="#">Cell Type</a>
                             <ul class="dropdown-menu">
                               <li id="to_code"
                                   title="Contents will be sent to the kernel for execution, and output will display in the footer of cell">
                                   <a href="#">Code</a></li>
                               <li id="to_markdown"
                                   title="Contents will be rendered as HTML and serve as explanatory text">
                                   <a href="#">Markdown</a></li>
                               <li id="to_raw"
                                   title="Contents will pass through nbconvert unmodified">
                                   <a href="#">Raw NBConvert</a></li>
                               <li id="to_heading1"><a href="#">Heading 1</a></li>
                               <li id="to_heading2"><a href="#">Heading 2</a></li>
                               <li id="to_heading3"><a href="#">Heading 3</a></li>
                               <li id="to_heading4"><a href="#">Heading 4</a></li>
                               <li id="to_heading5"><a href="#">Heading 5</a></li>
                               <li id="to_heading6"><a href="#">Heading 6</a></li>
                             </ul>
                         </li>
                         <li class="divider"></li>
                         <li id="current_outputs" class="dropdown-submenu"><a href="#">Current Output</a>
                             <ul class="dropdown-menu">
                                 <li id="toggle_current_output"
                                     title="Hide/Show the output of the current cell">
                                     <a href="#">Toggle</a>
                                 </li>
                                 <li id="toggle_current_output_scroll"
                                     title="Scroll the output of the current cell">
                                     <a href="#">Toggle Scrolling</a>
                                 </li>
                                 <li id="clear_current_output"
                                     title="Clear the output of the current cell">
                                     <a href="#">Clear</a>
                                 </li>
                             </ul>
                         </li>
                         <li id="all_outputs" class="dropdown-submenu"><a href="#">All Output</a>
                             <ul class="dropdown-menu">
                                 <li id="toggle_all_output"
                                     title="Hide/Show the output of all cells">
                                     <a href="#">Toggle</a>
                                 </li>
                                 <li id="toggle_all_output_scroll"
                                     title="Scroll the output of all cells">
                                     <a href="#">Toggle Scrolling</a>
                                 </li>
                                 <li id="clear_all_output"
                                     title="Clear the output of all cells">
                                     <a href="#">Clear</a>
                                 </li>
                             </ul>
                         </li>
                     </ul>
                 </li>
                 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Kernel</a>
                     <ul id="kernel_menu" class="dropdown-menu">
                         <li id="int_kernel"
                             title="Send KeyboardInterrupt (CTRL-C) to the Kernel">
                             <a href="#">Interrupt</a></li>
                         <li id="restart_kernel"
                             title="Restart the Kernel">
                             <a href="#">Restart</a></li>
+                        <li class="divider"></li>
+                        <li id="menu-change-kernel" class="dropdown-submenu">
+                            <a href="#">Change kernel</a>
+                            <ul class="dropdown-menu" id="menu-change-kernel-submenu"></ul>
+                        </li>
                     </ul>
                 </li>
                 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Help</a>
                     <ul  id="help_menu" class="dropdown-menu">
                         <li id="notebook_tour" title="A quick tour of the notebook user interface"><a href="#">User Interface Tour</a></li>
                         <li id="keyboard_shortcuts" title="Opens a tooltip with all keyboard shortcuts"><a href="#">Keyboard Shortcuts</a></li>
                         <li class="divider"></li>
                         {% set
                             sections = (
                                 (
                                     ("http://ipython.org/documentation.html","IPython Help",True),
                                     ("http://nbviewer.ipython.org/github/ipython/ipython/tree/2.x/examples/Index.ipynb", "Notebook Help", True),
                                 ),(
                                     ("http://docs.python.org","Python",True),
                             ("http://help.github.com/articles/github-flavored-markdown","Markdown",True),
                                     ("http://docs.scipy.org/doc/numpy/reference/","NumPy",True),
                                     ("http://docs.scipy.org/doc/scipy/reference/","SciPy",True),
                                     ("http://matplotlib.org/contents.html","Matplotlib",True),
                                     ("http://docs.sympy.org/latest/index.html","SymPy",True),
                                     ("http://pandas.pydata.org/pandas-docs/stable/","pandas", True)
                                 )
                             )
                         %}
 
                         {% for helplinks in sections %}
                             {% for link in helplinks %}
                                 <li><a href="{{link[0]}}" {{'target="_blank" title="Opens in a new window"' if link[2]}}>
                                 {{'<i class="icon-external-link menu-icon pull-right"></i>' if link[2]}}
                                 {{link[1]}}
                                 </a></li>
                             {% endfor %}
                             {% if not loop.last %}
                                 <li class="divider"></li>
                             {% endif %}
                         {% endfor %}
                         </li>
                     </ul>
                 </li>
             </ul>
             <ul class="nav navbar-nav navbar-right">
                 <div id="kernel_indicator">
                    <i id="kernel_indicator_icon"></i>
                 </div>
                 <div id="modal_indicator">
                    <i id="modal_indicator_icon"></i>
                 </div>
                 <div id="notification_area"></div>
             </ul>
         </div>
     </div>
 </div>
 <div id="maintoolbar" class="navbar">
   <div class="toolbar-inner navbar-inner navbar-nobg">
     <div id="maintoolbar-container" class="container"></div>
   </div>
 </div>
 </div>
 
 <div id="ipython-main-app">
 
     <div id="notebook_panel">
         <div id="notebook"></div>
         <div id="pager_splitter"></div>
         <div id="pager">
             <div id='pager_button_area'>
             </div>
             <div id="pager-container" class="container"></div>
         </div>
     </div>
 
 </div>
 <div id='tooltip' class='ipython_tooltip' style='display:none'></div>
 
 
 {% endblock %}
 
 
 {% block script %}
 {{super()}}
 
 <script src="{{ static_url("components/codemirror/lib/codemirror.js") }}" charset="utf-8"></script>
 <script type="text/javascript">
     CodeMirror.modeURL = "{{ static_url("components/codemirror/mode/%N/%N.js", include_version=False) }}";
 </script>
 <script src="{{ static_url("components/codemirror/addon/mode/loadmode.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("components/codemirror/addon/mode/multiplex.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("components/codemirror/addon/mode/overlay.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("components/codemirror/addon/edit/matchbrackets.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("components/codemirror/addon/edit/closebrackets.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("components/codemirror/addon/comment/comment.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("components/codemirror/mode/htmlmixed/htmlmixed.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("components/codemirror/mode/xml/xml.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("components/codemirror/mode/javascript/javascript.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("components/codemirror/mode/css/css.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("components/codemirror/mode/rst/rst.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("components/codemirror/mode/markdown/markdown.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("components/codemirror/mode/python/python.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("notebook/js/codemirror-ipython.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("notebook/js/codemirror-ipythongfm.js") }}" charset="utf-8"></script>
 
 <script src="{{ static_url("notebook/js/main.js") }}" charset="utf-8"></script>
 
 {% endblock %}