Add readonly indicator to notification area.

IPython/html/static/notebook/js/notificationarea.js

@@ -1,337 +1,347 b''
 define([
     'base/js/namespace',
     'jquery',
     'base/js/utils',
     'base/js/dialog',
     'base/js/notificationarea',
     'moment'
 ], function(IPython, $, utils, dialog, notificationarea, moment) {
     "use strict";
     var NotificationArea = notificationarea.NotificationArea;
     
     var NotebookNotificationArea = function(selector, options) {
         NotificationArea.apply(this, [selector, options]);
         this.save_widget = options.save_widget;
         this.notebook = options.notebook;
         this.keyboard_manager = options.keyboard_manager;
     };
     
     NotebookNotificationArea.prototype = Object.create(NotificationArea.prototype);
     
     /**
      * Initialize the default set of notification widgets.
      *
      * @method init_notification_widgets
      */
     NotebookNotificationArea.prototype.init_notification_widgets = function () {
         this.init_kernel_notification_widget();
         this.init_notebook_notification_widget();
     };
 
     /**
      * Initialize the notification widget for kernel status messages.
      *
      * @method init_kernel_notification_widget
      */
     NotebookNotificationArea.prototype.init_kernel_notification_widget = function () {
         var that = this;
         var knw = this.new_notification_widget('kernel');
         var $kernel_ind_icon = $("#kernel_indicator_icon");
         var $modal_ind_icon = $("#modal_indicator");
+        var $readonly_ind_icon = $('#readonly-indicator');
         var $body = $('body');
 
+        // Listen for the notebook loaded event.  Set readonly indicator.
+        this.events.on('notebook_loaded.Notebook', function() {
+            if (that.notebook.writable) {
+                $readonly_ind_icon.hide();
+            } else {
+                $readonly_ind_icon.show();
+            }
+        });
+
         // Command/Edit mode
         this.events.on('edit_mode.Notebook', function () {
             that.save_widget.update_document_title();
             $body.addClass('edit_mode');
             $body.removeClass('command_mode');
             $modal_ind_icon.attr('title','Edit Mode');
         });
 
         this.events.on('command_mode.Notebook', function () {
             that.save_widget.update_document_title();
             $body.removeClass('edit_mode');
             $body.addClass('command_mode');
             $modal_ind_icon.attr('title','Command Mode');
         });
 
         // Implicitly start off in Command mode, switching to Edit mode will trigger event
         $modal_ind_icon.addClass('modal_indicator').attr('title','Command Mode');
         $body.addClass('command_mode');
 
         // Kernel events
 
         // this can be either kernel_created.Kernel or kernel_created.Session
         this.events.on('kernel_created.Kernel kernel_created.Session', function () {
             knw.info("Kernel Created", 500);
         });
 
         this.events.on('kernel_reconnecting.Kernel', function () {
             knw.warning("Connecting to kernel");
         });
 
         this.events.on('kernel_connection_dead.Kernel', function (evt, info) {
             knw.danger("Not Connected", undefined, function () {
                 // schedule reconnect a short time in the future, don't reconnect immediately
                 setTimeout($.proxy(info.kernel.reconnect, info.kernel), 500);
             }, {title: 'click to reconnect'});
         });
 
         this.events.on('kernel_connected.Kernel', function () {
             knw.info("Connected", 500);
         });
 
         this.events.on('kernel_restarting.Kernel', function () {
             that.save_widget.update_document_title();
             knw.set_message("Restarting kernel", 2000);
         });
 
         this.events.on('kernel_autorestarting.Kernel', function (evt, info) {
             // Only show the dialog on the first restart attempt. This
             // number gets tracked by the `Kernel` object and passed
             // along here, because we don't want to show the user 5
             // dialogs saying the same thing (which is the number of
             // times it tries restarting).
             if (info.attempt === 1) {
 
                 dialog.kernel_modal({
                     notebook: that.notebook,
                     keyboard_manager: that.keyboard_manager,
                     title: "Kernel Restarting",
                     body: "The kernel appears to have died. It will restart automatically.",
                     buttons: {
                         OK : {
                             class : "btn-primary"
                         }
                     }
                 });
             }
 
             that.save_widget.update_document_title();
             knw.danger("Dead kernel");
             $kernel_ind_icon.attr('class','kernel_dead_icon').attr('title','Kernel Dead');
         });
 
         this.events.on('kernel_interrupting.Kernel', function () {
             knw.set_message("Interrupting kernel", 2000);
         });
 
         this.events.on('kernel_disconnected.Kernel', function () {
             $kernel_ind_icon
                 .attr('class', 'kernel_disconnected_icon')
                 .attr('title', 'No Connection to Kernel');
         });
 
         this.events.on('kernel_connection_failed.Kernel', function (evt, info) {
             // only show the dialog if this is the first failed
             // connect attempt, because the kernel will continue
             // trying to reconnect and we don't want to spam the user
             // with messages
             if (info.attempt === 1) {
 
                 var msg = "A connection to the notebook server could not be established." +
                         " The notebook will continue trying to reconnect, but" +
                         " until it does, you will NOT be able to run code. Check your" +
                         " network connection or notebook server configuration.";
 
                 dialog.kernel_modal({
                     title: "Connection failed",
                     body: msg,
                     keyboard_manager: that.keyboard_manager,
                     notebook: that.notebook,
                     buttons : {
                         "OK": {}
                     }
                 });
             }
         });
 
         this.events.on('kernel_killed.Kernel kernel_killed.Session', function () {
             that.save_widget.update_document_title();
             knw.warning("No kernel");
             $kernel_ind_icon.attr('class','kernel_busy_icon').attr('title','Kernel is not running');
         });
 
         this.events.on('kernel_dead.Kernel', function () {
 
             var showMsg = function () {
 
                 var msg = 'The kernel has died, and the automatic restart has failed.' +
                         ' It is possible the kernel cannot be restarted.' +
                         ' If you are not able to restart the kernel, you will still be able to save' +
                         ' the notebook, but running code will no longer work until the notebook' +
                         ' is reopened.';
 
                 dialog.kernel_modal({
                     title: "Dead kernel",
                     body : msg,
                     keyboard_manager: that.keyboard_manager,
                     notebook: that.notebook,
                     buttons : {
                         "Manual Restart": {
                             class: "btn-danger",
                             click: function () {
                                 that.notebook.start_session();
                             }
                         },
                     "Don't restart": {}
                     }
                 });
 
                 return false;
             };
 
             that.save_widget.update_document_title();
             knw.danger("Dead kernel", undefined, showMsg);
             $kernel_ind_icon.attr('class','kernel_dead_icon').attr('title','Kernel Dead');
 
             showMsg();
         });
         
         this.events.on("no_kernel.Kernel", function (evt, data) {
             $("#kernel_indicator").find('.kernel_indicator_name').text("No Kernel");
         });
 
         this.events.on('kernel_dead.Session', function (evt, info) {
             var full = info.xhr.responseJSON.message;
             var short = info.xhr.responseJSON.short_message || 'Kernel error';
             var traceback = info.xhr.responseJSON.traceback;
 
             var showMsg = function () {
                 var msg = $('<div/>').append($('<p/>').text(full));
                 var cm, cm_elem, cm_open;
 
                 if (traceback) {
                     cm_elem = $('<div/>')
                         .css('margin-top', '1em')
                         .css('padding', '1em')
                         .addClass('output_scroll');
                     msg.append(cm_elem);
                     cm = CodeMirror(cm_elem.get(0), {
                         mode:  "python",
                         readOnly : true
                     });
                     cm.setValue(traceback);
                     cm_open = $.proxy(cm.refresh, cm);
                 }
 
                 dialog.kernel_modal({
                     title: "Failed to start the kernel",
                     body : msg,
                     keyboard_manager: that.keyboard_manager,
                     notebook: that.notebook,
                     open: cm_open,
                     buttons : {
                         "Ok": { class: 'btn-primary' }
                     }
                 });
 
                 return false;
             };
 
             that.save_widget.update_document_title();
             $kernel_ind_icon.attr('class','kernel_dead_icon').attr('title','Kernel Dead');
             knw.danger(short, undefined, showMsg);
         });
 
         this.events.on('kernel_starting.Kernel kernel_created.Session', function () {
             window.document.title='(Starting) '+window.document.title;
             $kernel_ind_icon.attr('class','kernel_busy_icon').attr('title','Kernel Busy');
             knw.set_message("Kernel starting, please wait...");
         });
 
         this.events.on('kernel_ready.Kernel', function () {
             that.save_widget.update_document_title();
             $kernel_ind_icon.attr('class','kernel_idle_icon').attr('title','Kernel Idle');
             knw.info("Kernel ready", 500);
         });
 
         this.events.on('kernel_idle.Kernel', function () {
             that.save_widget.update_document_title();
             $kernel_ind_icon.attr('class','kernel_idle_icon').attr('title','Kernel Idle');
         });
 
         this.events.on('kernel_busy.Kernel', function () {
             window.document.title='(Busy) '+window.document.title;
             $kernel_ind_icon.attr('class','kernel_busy_icon').attr('title','Kernel Busy');
         });
 
         this.events.on('spec_match_found.Kernel', function (evt, data) {
             that.widget('kernelspec').info("Using kernel: " + data.found.spec.display_name, 3000, undefined, {
                 title: "Only candidate for language: " + data.selected.language + " was " + data.found.spec.display_name
             });
         });
 
         
         // Start the kernel indicator in the busy state, and send a kernel_info request.
         // When the kernel_info reply arrives, the kernel is idle.
         $kernel_ind_icon.attr('class','kernel_busy_icon').attr('title','Kernel Busy');
     };
 
     /**
      * Initialize the notification widget for notebook status messages.
      *
      * @method init_notebook_notification_widget
      */
     NotebookNotificationArea.prototype.init_notebook_notification_widget = function () {
         var nnw = this.new_notification_widget('notebook');
 
         // Notebook events
         this.events.on('notebook_loading.Notebook', function () {
             nnw.set_message("Loading notebook",500);
         });
         this.events.on('notebook_loaded.Notebook', function () {
             nnw.set_message("Notebook loaded",500);
         });
         this.events.on('notebook_saving.Notebook', function () {
             nnw.set_message("Saving notebook",500);
         });
         this.events.on('notebook_saved.Notebook', function () {
             nnw.set_message("Notebook saved",2000);
         });
         this.events.on('notebook_save_failed.Notebook', function (evt, error) {
             nnw.warning(error.message || "Notebook save failed");
         });
         this.events.on('notebook_copy_failed.Notebook', function (evt, error) {
             nnw.warning(error.message || "Notebook copy failed");
         });
         
         // Checkpoint events
         this.events.on('checkpoint_created.Notebook', function (evt, data) {
             var msg = "Checkpoint created";
             if (data.last_modified) {
                 var d = new Date(data.last_modified);
                 msg = msg + ": " + moment(d).format("HH:mm:ss");
             }
             nnw.set_message(msg, 2000);
         });
         this.events.on('checkpoint_failed.Notebook', function () {
             nnw.warning("Checkpoint failed");
         });
         this.events.on('checkpoint_deleted.Notebook', function () {
             nnw.set_message("Checkpoint deleted", 500);
         });
         this.events.on('checkpoint_delete_failed.Notebook', function () {
             nnw.warning("Checkpoint delete failed");
         });
         this.events.on('checkpoint_restoring.Notebook', function () {
             nnw.set_message("Restoring to checkpoint...", 500);
         });
         this.events.on('checkpoint_restore_failed.Notebook', function () {
             nnw.warning("Checkpoint restore failed");
         });
 
         // Autosave events
         this.events.on('autosave_disabled.Notebook', function () {
             nnw.set_message("Autosave disabled", 2000);
         });
         this.events.on('autosave_enabled.Notebook', function (evt, interval) {
             nnw.set_message("Saving every " + interval / 1000 + "s", 1000);
         });
     };
 
     // Backwards compatibility.
     IPython.NotificationArea = NotebookNotificationArea;
     
     return {'NotebookNotificationArea': NotebookNotificationArea};
 });

IPython/html/static/notebook/less/notificationarea.less

@@ -1,61 +1,71 b''
 #notification_area {
     .pull-right();
     z-index: 10;
 }
 
 .indicator_area {
     .pull-right();
     color: @navbar-default-link-color;
     margin-left: 5px;
     margin-right: 5px;
     width: 11px;
     z-index: 10;
     text-align: center;
     width: auto;
 }
 
 #kernel_indicator {
     .indicator_area();
     
     border-left: 1px solid;
     
     .kernel_indicator_name {
         padding-left: 5px;
         padding-right: 5px;
     }
 }
 
 #modal_indicator {
     .pull-right();
     .indicator_area();
 }
 
+#readonly-indicator {
+    .pull-right();
+    .indicator_area();
+
+    margin-top: 2px;
+    margin-bottom: 0px;
+    margin-left: 0px;
+    margin-right: 0px;
+}
+
 .modal_indicator:before {
     .fa-fw();
 }
 
 .edit_mode .modal_indicator:before {
     .icon(@fa-var-pencil);
 }
 
 .command_mode .modal_indicator:before {
     .icon(' ');
 }
 
 .kernel_idle_icon:before {
     .icon(@fa-var-circle-o);
 }
 
 .kernel_busy_icon:before {
     .icon(@fa-var-circle);
 }
 
 .kernel_dead_icon:before {
     .icon(@fa-var-bomb);
 }
 
 .kernel_disconnected_icon:before {
     .icon(@fa-var-chain-broken);
 }
 
 

IPython/html/templates/notebook.html

@@ -1,321 +1,327 b''
 {% 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" />
 <link rel="stylesheet" href=""  id='kernel-css'                             type="text/css" />
 
 {% endblock %}
 
 {% block bodyclasses %}notebook_app {{super()}}{% 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}}"
 
 {% endblock %}
 
 
 {% block headercontainer %}
 
 
 <span id="save_widget" class="pull-left save_widget">
     <span id="notebook_name" class="filename"></span>
     <span class="checkpoint_status"></span>
     <span class="autosave_status"></span>
 </span>
 
 <span id="kernel_logo_widget">
   <img class="current_kernel_logo" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
 </span>
 
 {% endblock headercontainer %}
 
 {% block header %}
 <div id="menubar-container" class="container">
 <div id="menubar">
     <div id="menus" class="navbar navbar-default" role="navigation">
         <div class="container-fluid">
             <button type="button" class="btn btn-default navbar-btn navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
               <i class="fa fa-bars"></i>
               <span class="navbar-text">Menu</span>
             </button>
             <p id="kernel_indicator" class="navbar-text indicator_area">
               <span class="kernel_indicator_name">Kernel</span>
               <i id="kernel_indicator_icon"></i>
             </p>
+            <i id="readonly-indicator" class="navbar-text">
+                <span class="fa-stack">
+                    <i class="fa fa-save fa-stack-1x"></i>
+                    <i class="fa fa-ban fa-stack-2x text-danger"></i>
+                </span>
+            </i>
             <i id="modal_indicator" class="navbar-text"></i>
             <span id="notification_area"></span>
             <div class="navbar-collapse collapse">
               <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" class="dropdown-submenu">
                             <a href="#">New Notebook</a>
                             <ul class="dropdown-menu" id="menu-new-notebook-submenu"></ul>
                         </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_script"><a href="#">Script</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>
                             </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 id="reconnect_kernel"
                             title="Reconnect to the Kernel">
                             <a href="#">Reconnect</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://nbviewer.ipython.org/github/ipython/ipython/blob/3.x/examples/Notebook/Index.ipynb", "Notebook Help", True),
                                     ("https://help.github.com/articles/markdown-basics/","Markdown",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="fa fa-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 class="divider"></li>
                         <li title="About IPython Notebook"><a id="notebook_about" href="#">About</a></li>
                     </ul>
                 </li>
               </ul>
             </div>
         </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 class="lower-header-bar"></div>
 {% endblock header %}
 
 {% block site %}
 
 <div id="ipython-main-app">
     <div id="notebook_panel">
         <div id="notebook"></div>
         <div id='tooltip' class='ipython_tooltip' style='display:none'></div>
     </div>
 </div>
 
 
 {% endblock %}
 
 {% block after_site %}
 
 <div id="pager">
     <div id="pager-contents">
         <div id="pager-container" class="container"></div>
     </div>
     <div id='pager-button-area'></div>
 </div>
 
 {% endblock %}
 
 {% block script %}
 {{super()}}
 <script type="text/javascript">
     sys_info = {{sys_info}};
 </script>
 
 <script src="{{ static_url("components/text-encoding/lib/encoding.js") }}" charset="utf-8"></script>
 
 <script src="{{ static_url("notebook/js/main.js") }}" charset="utf-8"></script>
 
 {% endblock %}