First draft of toolbar.

We are adding a thin horizontal toolbar below the menubar. This
commit adds the basic UI elements. Still need to hook up the actions
and make this hidable.

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

@@ -0,0 +1,82 b''
+//----------------------------------------------------------------------------
+//  Copyright (C) 2008-2011  The IPython Development Team
+//
+//  Distributed under the terms of the BSD License.  The full license is in
+//  the file COPYING, distributed as part of this software.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// ToolBar
+//============================================================================
+
+var IPython = (function (IPython) {
+
+    var ToolBar = function (selector) {
+        this.selector = selector;
+        if (this.selector !== undefined) {
+            this.element = $(selector);
+            this.style();
+            this.bind_events();
+        }
+    };
+
+
+    ToolBar.prototype.style = function () {
+        this.element.addClass('border-box-sizing');
+        this.element.find('#save_b').button({
+            icons : {primary: 'ui-icon-disk'},
+            text : false
+        });
+        this.element.find('#cut_b').button({
+            icons: {primary: 'ui-icon-scissors'},
+            text : false
+        });
+        this.element.find('#copy_b').button({
+            icons: {primary: 'ui-icon-copy'},
+            text : false
+        });
+        this.element.find('#paste_b').button({
+            icons: {primary: 'ui-icon-clipboard'},
+            text : false
+        });
+        this.element.find('#cut_copy_paste').buttonset();
+        this.element.find('#move_up_b').button({
+            icons: {primary: 'ui-icon-arrowthick-1-n'},
+            text : false
+        });
+        this.element.find('#move_down_b').button({
+            icons: {primary: 'ui-icon-arrowthick-1-s'},
+            text : false
+        });
+        this.element.find('#move_up_down').buttonset();
+        this.element.find('#insert_above_b').button({
+            icons: {primary: 'ui-icon-arrowthickstop-1-n'},
+            text : false
+        });
+        this.element.find('#insert_below_b').button({
+            icons: {primary: 'ui-icon-arrowthickstop-1-s'},
+            text : false
+        });
+        this.element.find('#insert_above_below').buttonset();
+        this.element.find('#run_b').button({
+            icons: {primary: 'ui-icon-play'},
+            text : false
+        });
+        this.element.find('#interrupt_b').button({
+            icons: {primary: 'ui-icon-stop'},
+            text : false
+        });
+        this.element.find('#run_int').buttonset();
+    };
+
+
+    ToolBar.prototype.bind_events = function () {
+
+    };
+
+
+    IPython.ToolBar = ToolBar;
+
+    return IPython;
+
+}(IPython));

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

@@ -1,383 +1,389 b''
 /**
  * Primary styles
  *
  * Author: IPython Development Team
  */
 
 
 body {
     background-color: white;
     /* This makes sure that the body covers the entire window and needs to
        be in a different element than the display: box in wrapper below */
     position: absolute;
     left: 0px;
     right: 0px;
     top: 0px;
     bottom: 0px;
     overflow: hidden;
 }
 
 span#save_widget {
     padding: 5px;
     margin: 0px 0px 0px 300px;
     display:inline-block;
 }
 
 span#notebook_name {
     height: 1em;
     line-height: 1em;
     padding: 3px;
     border: none;
     font-size: 146.5%;
 }
 
 #menubar {
     /* Initially hidden to prevent FLOUC */
     display: none;
 }
 
 .ui-menubar-item .ui-button .ui-button-text {
     padding: 0.4em 1.0em;
     font-size: 100%;
 }
 
 .ui-menu {
   -moz-box-shadow:    0px 6px 10px -1px #adadad;
   -webkit-box-shadow: 0px 6px 10px -1px #adadad;
   box-shadow:         0px 6px 10px -1px #adadad;
 }
 
 .ui-menu .ui-menu-item a {
     padding: 2px 1.6em;
 }
 
 .ui-menu hr {
     margin: 0.3em 0;
 }
 
+#toolbar {
+    /* Initially hidden to prevent FLOUC */
+    display: none;
+    padding: 3px 15px;
+}
+
 span#quick_help_area {
     position: static;
     padding: 5px 0px;
     margin: 0px 0px 0px 0px;
 }
 
 span#kernel_status {
     position: absolute;
     padding: 8px 5px 5px 5px;
     right: 10px;
     font-weight: bold;
 }
 
 
 .status_idle {
     color: gray;
     visibility: hidden;
 }
 
 .status_busy {
     color: red;
 }
 
 .status_restarting {
     color: black;
 }
 
 #kernel_persist {
     float: right;
 }
 
 .help_string {
     float: right;
     width: 170px;
     padding: 0px 5px;
     text-align: left;
     font-size: 85%;
 }
 
 .help_string_label {
     float: right;
     font-size: 85%;
 }
 
 div#notebook_panel {
     margin: 0px 0px 0px 0px;
     padding: 0px;
 }
 
 div#notebook {
     overflow-y: scroll;
     overflow-x: auto;
     width: 100%;
     /* This spaces the cell away from the edge of the notebook area */
     padding: 5px 5px 15px 5px;
     margin: 0px
     background-color: white;
 }
 
 div#pager_splitter {
     height: 8px;
 }
 
 div#pager {
     padding: 15px;
     overflow: auto;
     display: none;
 }
 
 div.cell {
     width: 100%;
     padding: 5px 5px 5px 0px;
     /* This acts as a spacer between cells, that is outside the border */
     margin: 2px 0px 2px 0px;
 }
 
 div.code_cell {
     background-color: white;
 }
 /* any special styling for code cells that are currently running goes here */
 div.code_cell.running {
 }
 
 div.prompt {
     /* This needs to be wide enough for 3 digit prompt numbers: In[100]: */
     width: 11ex;
     /* This 0.4em is tuned to match the padding on the CodeMirror editor. */
     padding: 0.4em;
     margin: 0px;
     font-family: monospace;
     text-align:right;
 }
 
 div.input {
     page-break-inside: avoid;
 }
 
 /* input_area and input_prompt must match in top border and margin for alignment */
 div.input_area {
     color: black;
     border: 1px solid #ddd;
     border-radius: 3px;
     background: #f7f7f7;
 }
 
 div.input_prompt {
     color: navy;
     border-top: 1px solid transparent;
 }
 
 div.output {
     /* This is a spacer between the input and output of each cell */
     margin-top: 5px;
 }
 
 div.output_prompt {
     color: darkred;
 }
 
 /* This class is the outer container of all output sections. */
 div.output_area {
     padding: 0px;
     page-break-inside: avoid;
 }
 
 /* This class is for the output subarea inside the output_area and after
    the prompt div. */
 div.output_subarea {
     padding: 0.4em 6.1em 0.4em 0.4em;
 }
 
 /* The rest of the output_* classes are for special styling of the different
    output types */
 
 /* all text output has this class: */
 div.output_text {
     text-align: left;
     color: black;
     font-family: monospace;
 }
 
 /* stdout/stderr are 'text' as well as 'stream', but pyout/pyerr are *not* streams */
 div.output_stream {
     padding-top: 0.0em;
     padding-bottom: 0.0em;
 }
 div.output_stdout {
 }
 div.output_stderr {
     background: #fdd; /* very light red background for stderr */
 }
 
 div.output_latex {
     text-align: left;
     color: black;
 }
 
 div.output_html {
 }
 
 div.output_png {
 }
 
 div.output_jpeg {
 }
 
 div.text_cell {
     background-color: white;
     padding: 5px 5px 5px 5px;
 }
 
 div.text_cell_input {
     color: black;
     border: 1px solid #ddd;
     border-radius: 3px;
     background: #f7f7f7;
 }
 
 div.text_cell_render {
     font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
     outline: none;
     resize: none;
     width:  inherit;
     border-style: none;
     padding: 5px;
     color: black;
 }
 
 .CodeMirror {
     line-height: 1.231;  /* Changed from 1em to our global default */
 }
 
 .CodeMirror-scroll {
     height: auto;     /* Changed to auto to autogrow */
     /*  The CodeMirror docs are a bit fuzzy on if overflow-y should be hidden or visible.*/
     /*  We have found that if it is visible, vertical scrollbars appear with font size changes.*/
     overflow-y: hidden;
     overflow-x: auto; /* Changed from auto to remove scrollbar */
 }
 
 /* CSS font colors for translated ANSI colors. */
 
 
 .ansiblack {color: black;}
 .ansired {color: darkred;}
 .ansigreen {color: darkgreen;}
 .ansiyellow {color: brown;}
 .ansiblue {color: darkblue;}
 .ansipurple {color: darkviolet;}
 .ansicyan {color: steelblue;}
 .ansigrey {color: grey;}
 .ansibold {font-weight: bold;}
 
 .completions , .tooltip {
     position: absolute;
     z-index: 10;
     overflow: auto;
     border: 1px solid black;
 }
 
 .completions select {
     background: white;
     outline: none;
     border: none;
     padding: 0px;
     margin: 0px;
     font-family: monospace;
 }
 
 @-moz-keyframes fadeIn {
     from {opacity:0;}
     to {opacity:1;}
 }
 
 @-webkit-keyframes fadeIn {
     from {opacity:0;}
     to {opacity:1;}
 }
 
 @keyframes fadeIn {
     from {opacity:0;}
     to {opacity:1;}
 }
 
 /*"close" "expand" and "Open in pager button" of
 /* the tooltip*/
 .tooltip a {
     float:right;
 }
 
 /*properties of tooltip after "expand"*/
 .bigtooltip {
     height:30%;
 }
 
 /*properties of tooltip before "expand"*/
 .smalltooltip {
     text-overflow: ellipsis;
     overflow: hidden;
     height:15%;
 }
 
 .tooltip {
     /*transition when "expand"ing tooltip */
     -webkit-transition-property: height;
     -webkit-transition-duration: 1s;
     -moz-transition-property: height;
     -moz-transition-duration: 1s;
     transition-property: height;
     transition-duration: 1s;
     max-width:700px;
     border-radius: 0px 10px 10px 10px;
     box-shadow: 3px 3px 5px #999;
     /*fade-in animation when inserted*/
     -webkit-animation: fadeIn 200ms;
     -moz-animation: fadeIn 200ms;
     animation: fadeIn 200ms;
     vertical-align: middle;
     background: #FDFDD8;
     outline: none;
     padding: 3px;
     margin: 0px;
     font-family: monospace;
     min-height:50px;
 }
 
 /*fixed part of the completion*/
 .completions p b {
     font-weight:bold;
 }
 
 .completions p {
     background: #DDF;
     /*outline: none;
     padding: 0px;*/
     border-bottom: black solid 1px;
     padding: 1px;
     font-family: monospace;
 }
 
 pre.dialog {
     background-color: #f7f7f7;
     border: 1px solid #ddd;
     border-radius: 3px;
     padding: 0.4em;
     padding-left: 2em;
 }
 
 p.dialog {
     padding : 0.2em;
 }
 
 .shortcut_key {
     display: inline-block;
     width: 15ex;
     text-align: right;
     font-family: monospace;
 }
 
 .shortcut_descr {
 }
 
 /* Word-wrap output correctly.  This is the CSS3 spelling, though Firefox seems
    to not honor it correctly.  Webkit browsers (Chrome, rekonq, Safari) do.
  */
 pre, code, kbd, samp { white-space: pre-wrap; }

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

@@ -1,48 +1,49 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-2011  The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // Layout
 //============================================================================
 
 var IPython = (function (IPython) {
 
     var LayoutManager = function () {
         this.bind_events();
     };
 
 
     LayoutManager.prototype.bind_events = function () {
         $(window).resize($.proxy(this.do_resize,this));
     };
 
 
     LayoutManager.prototype.do_resize = function () {
         var win = $(window);
         var w = win.width();
         var h = win.height();
         var header_height = $('div#header').outerHeight(true);
         var menubar_height = $('div#menubar').outerHeight(true);
-        var app_height = h-header_height-menubar_height-2;  // content height
+        var toolbar_height = $('div#toolbar').outerHeight(true);
+        var app_height = h-header_height-menubar_height-toolbar_height-2;  // content height
 
         $('div#main_app').height(app_height + 2);  // content+padding+border height
 
         var pager_height = IPython.pager.percentage_height*app_height;
         var pager_splitter_height = $('div#pager_splitter').outerHeight(true);
         $('div#pager').height(pager_height);
         if (IPython.pager.expanded) {
             $('div#notebook').height(app_height-pager_height-pager_splitter_height);
         } else {
             $('div#notebook').height(app_height-pager_splitter_height);
         }
     };
 
     IPython.LayoutManager = LayoutManager;
 
     return IPython;
 
 }(IPython));

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

@@ -1,115 +1,117 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-2011  The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // On document ready
 //============================================================================
 
 
 $(document).ready(function () {
     if (window.MathJax){ 
         // MathJax loaded
         MathJax.Hub.Config({
             tex2jax: {
                 inlineMath: [ ['$','$'], ["\\(","\\)"] ],
                 displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
             },
             displayAlign: 'left', // Change this to 'center' to center equations.
             "HTML-CSS": {
                 styles: {'.MathJax_Display': {"margin": 0}}
             }
         });
     }else if (window.mathjax_url != ""){
         // Don't have MathJax, but should. Show dialog.
         var dialog = $('<div></div>')
             .append(
                 $("<p></p>").addClass('dialog').html(
                     "Math/LaTeX rendering will be disabled."
                 )
             ).append(
                 $("<p></p>").addClass('dialog').html(
                     "If you have administrative access to the notebook server and" +
                     " a working internet connection, you can install a local copy" +
                     " of MathJax for offline use with the following command on the server" +
                     " at a Python or IPython prompt:"
                 )
             ).append(
                 $("<pre></pre>").addClass('dialog').html(
                     ">>> from IPython.external import mathjax; mathjax.install_mathjax()"
                 )
             ).append(
                 $("<p></p>").addClass('dialog').html(
                     "This will try to install MathJax into the IPython source directory."
                 )
             ).append(
                 $("<p></p>").addClass('dialog').html(
                     "If IPython is installed to a location that requires" +
                     " administrative privileges to write, you will need to make this call as" +
                     " an administrator, via 'sudo'."
                 )
             ).append(
                 $("<p></p>").addClass('dialog').html(
                     "When you start the notebook server, you can instruct it to disable MathJax support altogether:"
                 )
             ).append(
                 $("<pre></pre>").addClass('dialog').html(
                     "$ ipython notebook --no-mathjax"
                 )
             ).append(
                 $("<p></p>").addClass('dialog').html(
                     "which will prevent this dialog from appearing."
                 )
             ).dialog({
                 title: "Failed to retrieve MathJax from '" + window.mathjax_url + "'",
                 width: "70%",
                 modal: true,
             })
     }else{
         // No MathJax, but none expected. No dialog.
     }
 
 
     IPython.markdown_converter = new Markdown.Converter();
     IPython.read_only = $('meta[name=read_only]').attr("content") == 'True';
 
     $('div#header').addClass('border-box-sizing');
     $('div#main_app').addClass('border-box-sizing ui-widget ui-widget-content');
     $('div#notebook_panel').addClass('border-box-sizing ui-widget');
 
     IPython.layout_manager = new IPython.LayoutManager();
     IPython.pager = new IPython.Pager('div#pager', 'div#pager_splitter');
     IPython.save_widget = new IPython.SaveWidget('span#save_widget');
     IPython.quick_help = new IPython.QuickHelp('span#quick_help_area');
     IPython.login_widget = new IPython.LoginWidget('span#login_widget');
     IPython.notebook = new IPython.Notebook('div#notebook');
     IPython.kernel_status_widget = new IPython.KernelStatusWidget('#kernel_status');
     IPython.menubar = new IPython.MenuBar('#menubar')
+    IPython.toolbar = new IPython.ToolBar('#toolbar')
     IPython.kernel_status_widget.status_idle();
 
     IPython.layout_manager.do_resize();
 
     // These have display: none in the css file and are made visible here to prevent FLOUC.
     $('div#header').css('display','block');
 
     if(IPython.read_only){
         // hide various elements from read-only view
         $('div#pager').remove();
         $('div#pager_splitter').remove();
         $('span#login_widget').removeClass('hidden');
 
         // set the notebook name field as not modifiable
         $('#notebook_name').attr('disabled','disabled')
     }
 
     $('div#menubar').css('display','block');
+    $('div#toolbar').css('display','block');
     $('div#main_app').css('display','block');
 
     IPython.layout_manager.do_resize();
     IPython.notebook.load_notebook();
 
 });
 

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

@@ -1,189 +1,221 b''
 <!DOCTYPE HTML>
 <html>
 
 <head>
     <meta charset="utf-8">
 
     <title>IPython Notebook</title>
 
     {% if mathjax_url %}
     <script type="text/javascript" src="{{mathjax_url}}?config=TeX-AMS_HTML" charset="utf-8"></script>
     {% end %}
     <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/jquery/css/themes/base/jquery-ui.min.css" type="text/css" />
     <link rel="stylesheet" href="/static/codemirror/lib/codemirror.css">
     <link rel="stylesheet" href="/static/codemirror/theme/ipython.css">
 
     <link rel="stylesheet" href="/static/prettify/prettify.css"/>
 
     <link rel="stylesheet" href="/static/css/boilerplate.css" type="text/css" />
     <link rel="stylesheet" href="/static/css/layout.css" type="text/css" />
     <link rel="stylesheet" href="/static/css/base.css" type="text/css" />
     <link rel="stylesheet" href="/static/css/notebook.css" type="text/css" />
     <link rel="stylesheet" href="/static/css/renderedhtml.css" type="text/css" />
 
     {% comment  In the notebook, the read-only flag is used to determine %}
     {% comment  whether to hide the side panels and switch off input %}
     <meta name="read_only" content="{{read_only and not logged_in}}"/>
 
 </head>
 
 <body
     data-project={{project}} data-notebook-id={{notebook_id}}
     data-base-project-url={{base_project_url}} data-base-kernel-url={{base_kernel_url}}
 >
 
 <div id="header">
     <span id="ipython_notebook"><h1><a href='..' alt='dashboard'><img src='/static/ipynblogo.png' alt='IPython Notebook'/></a></h1></span>
     <span id="save_widget">
         <span id="notebook_name"></span>
         <span id="save_status"></span>
     </span>
 
     <span id="login_widget">
       {% comment  This is a temporary workaround to hide the logout button %}
       {% comment  when appropriate until notebook.html is templated %}
       {% if logged_in %}
         <button id="logout">Logout</button>
       {% elif not logged_in and login_available %}
         <button id="login">Login</button>
       {% end %}
     </span>
 
     <span id="kernel_status">Idle</span>
 </div>
 
 <div id="menubar">
     <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>
                 <hr/>
                 <li id="copy_notebook"><a href="#">Make a Copy...</a></li>
                 <li id="rename_notebook"><a href="#">Rename...</a></li>
                 <li id="save_notebook"><a href="#">Save</a></li>
                 <hr/>
                 <li><a href="#">Download as</a>
                     <ul>
                         <li id="download_ipynb"><a href="#">IPython (.ipynb)</a></li>
                         <li id="download_py"><a href="#">Python (.py)</a></li>
                     </ul>
                 </li>
                 <hr/>
                 <li id="print_notebook"><a href="/{{notebook_id}}/print" target="_blank">Print View</a></li>
             </ul>
         </li>
         <li><a href="#">Edit</a>
             <ul>
                 <li id="cut_cell"><a href="#">Cut</a></li>
                 <li id="copy_cell"><a href="#">Copy</a></li>
                 <li id="paste_cell" class="ui-state-disabled"><a href="#">Paste</a></li>
                 <li id="paste_cell_above" class="ui-state-disabled"><a href="#">Paste Above</a></li>
                 <li id="paste_cell_below" class="ui-state-disabled"><a href="#">Paste Below</a></li>
                 <li id="delete_cell"><a href="#">Delete</a></li>
                 <hr/>
                 <li id="split_cell"><a href="#">Split</a></li>
                 <li id="merge_cell_above"><a href="#">Merge Above</a></li>
                 <li id="merge_cell_below"><a href="#">Merge Below</a></li>
                 <hr/>
                 <li id="move_cell_up"><a href="#">Move Up</a></li>
                 <li id="move_cell_down"><a href="#">Move Down</a></li>
                 <hr/>
                 <li id="select_previous"><a href="#">Select Previous</a></li>
                 <li id="select_next"><a href="#">Select Next</a></li>
             </ul>
         </li>
         <li><a href="#">Insert</a>
             <ul>
                 <li id="insert_cell_above"><a href="#">Insert Cell Above</a></li>
                 <li id="insert_cell_below"><a href="#">Insert Cell Below</a></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_all_cells"><a href="#">Run All</a></li>
                 <hr/>
                 <li id="to_code"><a href="#">Code Cell</a></li>
                 <li id="to_markdown"><a href="#">Markdown Cell</a></li>
                 <hr/>
                 <li id="toggle_output"><a href="#">Toggle Output</a></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>
             </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 id="keyboard_shortcuts"><a href="#">Keyboard Shortcuts</a></li>
                 <hr/>
                 <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>
                 <li><a href="http://docs.scipy.org/doc/scipy/reference/" target="_blank">SciPy</a></li>
                 <li><a href="http://docs.sympy.org/dev/index.html" target="_blank">SymPy</a></li>
                 <li><a href="http://matplotlib.sourceforge.net/" target="_blank">Matplotlib</a></li>
             </ul>
         </li>
     </ul>
 
 </div>
 
+<div id="toolbar">
+
+    <span>
+        <button id="save_b">Save</button>
+    </span>
+    <span id="cut_copy_paste">
+        <button id="cut_b" title="Cut">Cut</button>
+        <button id="copy_b" title="Copy">Copy</button>
+        <button id="paste_b" title="Paste">Paste</button>
+    </span>
+    <span id="move_up_down">
+        <button id="move_up_b" title="Move Up">Move Up</button>
+        <button id="move_down_b" title="Move Down">Move Down</button>
+    </span>
+    <span id="insert_above_below">
+        <button id="insert_above_b" title="Insert Above">Insert Above</button>
+        <button id="insert_below_b" title="Insert Below">Insert Below</button>
+    </span>
+    <span id="run_int">
+        <button id="run_b" title="Run">Run</button>
+        <button id="interrupt_b" title="Interrupt">Interrupt</button>
+    </span>
+    <span>
+        <select id="cell_type">
+             <option value="code">Code</option>
+             <option value="markdown">Markdown</option>
+        </select>
+    </span>
+
+</div>
+
 <div id="main_app">
 
     <div id="notebook_panel">
         <div id="notebook"></div>
         <div id="pager_splitter"></div>
         <div id="pager"></div>
     </div>
 
 </div>
 
 <script src="/static/jquery/js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/jquery/js/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
 
 <script src="/static/codemirror/lib/codemirror.js" charset="utf-8"></script>
 <script src="/static/codemirror/mode/python/python.js" charset="utf-8"></script>
 <script src="/static/codemirror/mode/htmlmixed/htmlmixed.js" charset="utf-8"></script>
 <script src="/static/codemirror/mode/xml/xml.js" charset="utf-8"></script>
 <script src="/static/codemirror/mode/javascript/javascript.js" charset="utf-8"></script>
 <script src="/static/codemirror/mode/css/css.js" charset="utf-8"></script>
 <script src="/static/codemirror/mode/rst/rst.js" charset="utf-8"></script>
 <script src="/static/codemirror/mode/markdown/markdown.js" charset="utf-8"></script>
 
 <script src="/static/pagedown/Markdown.Converter.js" charset="utf-8"></script>
 
 <script src="/static/prettify/prettify.js" charset="utf-8"></script>
 <script src="/static/dateformat/date.format.js" charset="utf-8"></script>
 
 <script src="/static/js/namespace.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/js/utils.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/js/cell.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/js/codecell.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/js/textcell.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/js/kernel.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/js/kernelstatus.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/js/layout.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/js/savewidget.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/js/quickhelp.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/js/loginwidget.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/js/pager.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/js/menubar.js" type="text/javascript" charset="utf-8"></script>
+<script src="/static/js/toolbar.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/js/notebook.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/js/notebookmain.js" type="text/javascript" charset="utf-8"></script>
 
 </body>
 
 </html>