Implemented basic notebook browser and fixed numerous bugs.

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

@@ -0,0 +1,56 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;
+}
+
+
+div#header {
+    /* Initially hidden to prevent FLOUC */
+    display: none;
+    position: relative;
+    height: 45px;
+    padding: 5px;
+    margin: 0px;
+    width: 100%;
+}
+
+span#ipython_notebook {
+    position: absolute;
+    padding: 2px;
+}
+
+span#ipython_notebook h1 {
+    font-family: Verdana, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
+    font-size: 197%;
+    display: inline;
+    color: black;
+}
+
+div#main_app {
+    /* Initially hidden to prevent FLOUC */
+    display: none;
+    width: 100%;
+    position: relative;
+}
+
+.ui-button .ui-button-text {
+    padding: 0.2em 0.8em;
+    font-size: 77%;
+}
+
+

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

@@ -0,0 +1,73 b''
+/**
+ * HTML5 ✰ Boilerplate
+ *
+ * style.css contains a reset, font normalization and some base styles.
+ *
+ * Credit is left where credit is due.
+ * Much inspiration was taken from these projects:
+ * - yui.yahooapis.com/2.8.1/build/base/base.css
+ * - camendesign.com/design/
+ * - praegnanz.de/weblog/htmlcssjs-kickstart
+ */
+
+
+/**
+ * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
+ * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
+ * html5doctor.com/html-5-reset-stylesheet/
+ */
+
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+blockquote, q { quotes: none; }
+
+blockquote:before, blockquote:after,
+q:before, q:after { content: ""; content: none; }
+
+ins { background-color: #ff9; color: #000; text-decoration: none; }
+
+mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
+
+del { text-decoration: line-through; }
+
+abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
+
+table { border-collapse: collapse; border-spacing: 0; }
+
+hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
+
+input, select { vertical-align: middle; }
+
+
+/**
+ * Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/
+ */
+
+body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity */
+select, input, textarea, button { font:99% sans-serif; }
+
+/* Normalize monospace sizing:
+   en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
+pre, code, kbd, samp { font-family: monospace, sans-serif; }
+
+

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

@@ -0,0 +1,64 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: auto;
+}
+
+#content_panel {
+    width: 600px;
+}
+
+#content_toolbar {
+    padding: 10px 5px;
+}
+
+#header_border {
+    width: 100%;
+    height: 2px;
+}
+
+#app_hbox {
+    width: 100%;
+}
+
+#notebooks_buttons {
+    float: right;
+}
+
+#project_name {
+    height: 25px;
+    line-height: 25px;
+    padding: 3px;
+}
+
+.notebook_item {
+    height: 25px;
+    line-height: 25px;
+    padding: 3px;
+}
+
+.notebook_item a {
+    text-decoration: none;
+}
+
+.item_buttons {
+    float: right;
+}
+
+.highlight_text {
+    color: blue;
+}

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

@@ -0,0 +1,30 b''
+
+//============================================================================
+// On document ready
+//============================================================================
+
+
+$(document).ready(function () {
+
+    $('div#header').addClass('border-box-sizing');
+    $('div#header_border').addClass('border-box-sizing ui-widget ui-widget-content');
+
+    $('div#main_app').addClass('border-box-sizing ui-widget');
+    $('div#app_hbox').addClass('hbox center');
+
+    $('div#content_toolbar').addClass('ui-widget ui-helper-clearfix');    
+
+    $('#new_notebook').click(function (e) {
+        window.open('/new');
+    });
+
+    IPython.notebook_list = new IPython.NotebookList('div#notebook_list');
+    IPython.notebook_list.load_list();
+
+    // These have display: none in the css file and are made visible here to prevent FLOUC.
+    $('div#header').css('display','block');
+    $('div#main_app').css('display','block');
+
+
+});
+

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

@@ -0,0 +1,63 b''
+
+//============================================================================
+// Cell
+//============================================================================
+
+var IPython = (function (IPython) {
+
+    var NotebookList = function (selector) {
+        this.selector = selector;
+        if (this.selector !== undefined) {
+            this.element = $(selector);
+            this.style();
+            this.bind_events();
+        }
+    };
+
+    NotebookList.prototype.style = function () {
+        this.element.addClass('ui-widget ui-widget-content');
+        $('div#project_name').addClass('ui-widget ui-widget-header');
+    };
+
+
+    NotebookList.prototype.bind_events = function () {
+
+    };
+
+
+    NotebookList.prototype.load_list = function () {
+        var settings = {
+            processData : false,
+            cache : false,
+            type : "GET",
+            dataType : "json",
+            success : $.proxy(this.list_loaded,this)
+        };
+        $.ajax("/notebooks", settings);
+    };
+
+
+    NotebookList.prototype.list_loaded = function (data, status, xhr) {
+        var len = data.length;
+        for (var i=0; i<len; i++) {
+            var div = $('<div/>').addClass('notebook_item ui-widget ui-widget-content ui-helper-clearfix');
+            var nbname = $('<span/>').addClass('item_name').append(
+                $('<a/>').attr('href','/'+data[i].notebook_id).
+                attr('target','_blank').
+                text(data[i].name)
+            );
+            var buttons = $('<span/>').addClass('item_buttons').append(
+                $('<button>Delete</button>').button()
+            )
+            div.append(nbname).append(buttons);
+            this.element.append(div);
+        }
+    };
+
+
+    IPython.NotebookList = NotebookList;
+
+    return IPython;
+
+}(IPython));
+

IPython/frontend/html/notebook/handlers.py

@@ -17,7 +17,14 b' from tornado import websocket'
 #-----------------------------------------------------------------------------
 
 
-class MainHandler(web.RequestHandler):
+class NBBrowserHandler(web.RequestHandler):
+    def get(self):
+        nbm = self.application.notebook_manager
+        project = nbm.notebook_dir
+        self.render('nbbrowser.html', project=project)
+
+
+class NewHandler(web.RequestHandler):
     def get(self):
         notebook_id = self.application.notebook_manager.new_notebook()
         self.render('notebook.html', notebook_id=notebook_id)

IPython/frontend/html/notebook/notebookapp.py

@@ -30,7 +30,7 b' from tornado import web'
 from .kernelmanager import KernelManager
 from .sessionmanager import SessionManager
 from .handlers import (
-    MainHandler, NamedNotebookHandler,
+    NBBrowserHandler, NewHandler, NamedNotebookHandler,
     KernelHandler, KernelActionHandler, ZMQStreamHandler,
     NotebookRootHandler, NotebookHandler
 )
@@ -67,7 +67,8 b' class NotebookWebApplication(web.Application):'
 
     def __init__(self, kernel_manager, log, kernel_argv, config):
         handlers = [
-            (r"/", MainHandler),
+            (r"/", NBBrowserHandler),
+            (r"/new", NewHandler),
             (r"/%s" % _notebook_id_regex, NamedNotebookHandler),
             (r"/kernels", KernelHandler),
             (r"/kernels/%s/%s" % (_kernel_id_regex, _kernel_action_regex), KernelActionHandler),

IPython/frontend/html/notebook/notebookmanager.py

@@ -44,8 +44,9 b' class NotebookManager(Configurable):'
             dict(notebook_id=notebook,name=name)
         """
         names = os.listdir(self.notebook_dir)
-        names = [name.strip(self.filename_ext)\
+        names = [name.split(u'.')[0] \
             for name in names if name.endswith(self.filename_ext)]
+        print names
         data = []
         for name in names:
             if name not in self.rev_mapping:
@@ -53,6 +54,7 b' class NotebookManager(Configurable):'
             else:
                 notebook_id = self.rev_mapping[name]
             data.append(dict(notebook_id=notebook_id,name=name))
+        data = sorted(data, key=lambda item: item['name'])
         return data
 
     def new_notebook_id(self, name):
@@ -112,11 +114,13 b' class NotebookManager(Configurable):'
             with open(path,'r') as f:
                 s = f.read()
                 try:
-                    # v2 and later have xml in the .ipynb files
+                    # v2 and later have xml in the .ipynb files.
                     nb = current.reads(s, 'xml')
                 except:
-                    # v1 had json in the .ipynb files
+                    # v1 had json in the .ipynb files.
                     nb = current.reads(s, 'json')
+                    # v1 notebooks don't have a name field, so use the filename.
+                    nb.name = os.path.split(path)[-1].split(u'.')[0]
         except:
             raise web.HTTPError(404)
         return last_modified, nb

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

@@ -1,75 +1,3 b''
-/**
- * HTML5 ✰ Boilerplate
- *
- * style.css contains a reset, font normalization and some base styles.
- *
- * Credit is left where credit is due.
- * Much inspiration was taken from these projects:
- * - yui.yahooapis.com/2.8.1/build/base/base.css
- * - camendesign.com/design/
- * - praegnanz.de/weblog/htmlcssjs-kickstart
- */
-
-
-/**
- * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
- * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
- * html5doctor.com/html-5-reset-stylesheet/
- */
-
-html, body, div, span, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
-small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section, summary,
-time, mark, audio, video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline;
-}
-
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-  display: block;
-}
-
-blockquote, q { quotes: none; }
-
-blockquote:before, blockquote:after,
-q:before, q:after { content: ""; content: none; }
-
-ins { background-color: #ff9; color: #000; text-decoration: none; }
-
-mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
-
-del { text-decoration: line-through; }
-
-abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
-
-table { border-collapse: collapse; border-spacing: 0; }
-
-hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
-
-input, select { vertical-align: middle; }
-
-
-/**
- * Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/
- */
-
-body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity */
-select, input, textarea, button { font:99% sans-serif; }
-
-/* Normalize monospace sizing:
-   en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
-pre, code, kbd, samp { font-family: monospace, sans-serif; }
-
 
 /**
  * Primary styles
@@ -90,28 +18,6 b' body {'
     overflow: hidden;
 }
 
-
-div#header {
-    /* Initially hidden to prevent FLOUC */
-    display: none;
-    position: relative;
-    height: 45px;
-    padding: 5px;
-    margin: 0px;
-    width: 100%;
-}
-
-span#ipython_notebook {
-    position: absolute;
-    padding: 2px;
-}
-
-span#ipython_notebook h1 {
-    font-family: Verdana, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
-    font-size: 197%;
-    display: inline;
-}
-
 span#save_widget {
     position: absolute;
     left: 0px;
@@ -144,13 +50,6 b' span#kernel_status {'
     color: black;
 }
 
-div#notebook_app {
-    /* Initially hidden to prevent FLOUC */
-    display: none;
-    width: 100%;
-    position: relative;
-}
-
 div#left_panel {
     overflow-y: auto;
     top: 0px;
@@ -200,12 +99,6 b' span.button_label {'
     margin-bottom: 0px;
 }
 
-
-.ui-button .ui-button-text {
-    padding: 0.2em 0.8em;
-    font-size: 77%;
-}
-
 #download_format {
     float: right;
     font-size: 85%;

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

@@ -22,7 +22,7 b' var IPython = (function (IPython) {'
         var header_height = $('div#header').outerHeight(true);
         var app_height = h - header_height - 2;  // content height
 
-        $('div#notebook_app').height(app_height + 2);  // content+padding+border height
+        $('div#main_app').height(app_height + 2);  // content+padding+border height
 
         $('div#left_panel').height(app_height);
 

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

@@ -61,14 +61,14 b' var IPython = (function (IPython) {'
         });
 
         this.element.bind('collapse_pager', function () {
-            var app_height = $('div#notebook_app').height(); // content height
+            var app_height = $('div#main_app').height(); // content height
             var splitter_height = $('div#pager_splitter').outerHeight(true);
             var new_height = app_height - splitter_height;
             that.element.animate({height : new_height + 'px'}, 'fast');
         });
 
         this.element.bind('expand_pager', function () {
-            var app_height = $('div#notebook_app').height(); // content height
+            var app_height = $('div#main_app').height(); // content height
             var splitter_height = $('div#pager_splitter').outerHeight(true);
             var pager_height = $('div#pager').outerHeight(true);
             var new_height = app_height - pager_height - splitter_height; 
@@ -94,6 +94,12 b' var IPython = (function (IPython) {'
         this.element.animate({scrollTop:this.element.get(0).scrollHeight}, 0);
     };
 
+
+    Notebook.prototype.scroll_to_top = function () {
+        this.element.animate({scrollTop:0}, 0);
+    };
+
+
     // Cell indexing, retrieval, etc.
 
 
@@ -296,12 +302,10 b' var IPython = (function (IPython) {'
         // TODO: Bounds check for i
         var i = this.index_or_selected(index);
         var cell = new IPython.CodeCell(this);
-        // cell.set_input_prompt(this.next_prompt_number);
         cell.set_input_prompt();
-        this.next_prompt_number = this.next_prompt_number + 1;
         this.insert_cell_before(cell, i);
         this.select(this.find_cell_index(cell));
-        return this;
+        return cell;
     }
 
 
@@ -309,12 +313,10 b' var IPython = (function (IPython) {'
         // TODO: Bounds check for i
         var i = this.index_or_selected(index);
         var cell = new IPython.CodeCell(this);
-        // cell.set_input_prompt(this.next_prompt_number);
         cell.set_input_prompt();
-        this.next_prompt_number = this.next_prompt_number + 1;
         this.insert_cell_after(cell, i);
         this.select(this.find_cell_index(cell));
-        return this;
+        return cell;
     }
 
 
@@ -325,7 +327,7 b' var IPython = (function (IPython) {'
         cell.config_mathjax();
         this.insert_cell_before(cell, i);
         this.select(this.find_cell_index(cell));
-        return this;
+        return cell;
     }
 
 
@@ -336,7 +338,7 b' var IPython = (function (IPython) {'
         cell.config_mathjax();
         this.insert_cell_after(cell, i);
         this.select(this.find_cell_index(cell));
-        return this;
+        return cell;
     }
 
 
@@ -517,14 +519,15 b' var IPython = (function (IPython) {'
             var new_cells = worksheet.cells;
             ncells = new_cells.length;
             var cell_data = null;
+            var new_cell = null;
             for (var i=0; i<ncells; i++) {
                 cell_data = new_cells[i];
                 if (cell_data.cell_type == 'code') {
-                    this.insert_code_cell_after();
-                    this.selected_cell().fromJSON(cell_data);
+                    new_cell = this.insert_code_cell_after();
+                    new_cell.fromJSON(cell_data);
                 } else if (cell_data.cell_type === 'text') {
-                    this.insert_text_cell_after();
-                    this.selected_cell().fromJSON(cell_data);
+                    new_cell = this.insert_text_cell_after();
+                    new_cell.fromJSON(cell_data);
                 };
             };          
         };
@@ -573,7 +576,8 b' var IPython = (function (IPython) {'
     }
 
 
-    Notebook.prototype.load_notebook = function () {
+    Notebook.prototype.load_notebook = function (callback) {
+        var that = this;
         var notebook_id = IPython.save_widget.get_notebook_id();
         // We do the call with settings so we can set cache to false.
         var settings = {
@@ -581,7 +585,12 b' var IPython = (function (IPython) {'
           cache : false,
           type : "GET",
           dataType : "json",
-          success : $.proxy(this.notebook_loaded,this)
+            success : function (data, status, xhr) {
+                that.notebook_loaded(data, status, xhr);
+                if (callback !== undefined) {
+                    callback();
+                };
+            }
         };
         IPython.save_widget.status_loading();
         $.ajax("/notebooks/" + notebook_id, settings);
@@ -596,6 +605,12 b' var IPython = (function (IPython) {'
         IPython.save_widget.status_save();
         IPython.save_widget.set_notebook_name(data.name);
         this.start_kernel();
+        // fromJSON always selects the last cell inserted. We need to wait
+        // until that is done before scrolling to the top.
+        setTimeout(function () {
+            IPython.notebook.select(0);
+            IPython.notebook.scroll_to_top();
+        }, 50);
     };
 
     IPython.Notebook = Notebook;

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

@@ -18,7 +18,7 b' $(document).ready(function () {'
     });
 
     $('div#header').addClass('border-box-sizing');
-    $('div#notebook_app').addClass('border-box-sizing ui-widget ui-widget-content');
+    $('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();
@@ -33,11 +33,12 b' $(document).ready(function () {'
 
     // These have display: none in the css file and are made visible here to prevent FLOUC.
     $('div#header').css('display','block');
-    $('div#notebook_app').css('display','block');
-
-    IPython.notebook.load_notebook();
+    $('div#main_app').css('display','block');
 
     // Perform these actions after the notebook has been loaded.
+    // We wait 100 milliseconds because the notebook scrolls to the top after a load
+    // is completed and we need to wait for that to mostly finish.
+    IPython.notebook.load_notebook(function () {
     setTimeout(function () {
         IPython.save_widget.update_url();
         IPython.layout_manager.do_resize();
@@ -45,3 +46,5 b' $(document).ready(function () {'
     }, 100);
 });
 
+});
+

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

@@ -93,11 +93,10 b' var IPython = (function (IPython) {'
         PanelSection.prototype.bind_events.apply(this);
         var that = this;
         this.content.find('#new_notebook').click(function () {
-            console.log('click!')
-            window.open('/');
+            window.open('/new');
         });
         this.content.find('#open_notebook').click(function () {
-            alert('Not Implemented');
+            window.open('/');
         });
         this.content.find('#download_notebook').click(function () {
             var format = that.content.find('#download_format').val();

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

@@ -1,30 +1,64 b''
 <!DOCTYPE HTML>
+<html>
 
 <head>
   <meta charset="utf-8">
 
+    <title>IPython Notebook</title>
 
-  <title>IPython Notebook Browser</title>
-  <meta name="description" content="Browser for local IPython notebooks">
-  <meta name="author" content="IPython dev team">
-
-  <link rel="stylesheet" href="static/css/nbbrowser.css" type="text/css" />
-  <link rel="stylesheet" href="static/jquery/css/jquery.wijmo-open.1.1.3.css" type="text/css" />
   <link rel="stylesheet" href="static/jquery/css/themes/aristo/jquery-wijmo.css" type="text/css" />
+<!--     <link rel="stylesheet" href="static/jquery/css/themes/rocket/jquery-wijmo.css" type="text/css" /> -->
+<!--    <link rel="stylesheet" href="static/jquery/css/themes/smoothness/jquery-ui-1.8.14.custom.css" type="text/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/nbbrowser.css" type="text/css" />
 
 </head>
 
 <body>
 
+<div id="header">
+    <span id="ipython_notebook"><h1>IPython Notebook</h1></span>
+</div>
+
+<div id="header_border"></div>
+
+<div id="main_app">
+
+    <div id="app_hbox">
+
+<!--    <div id="left_panel">-->
+<!--    </div>-->
 
+    <div id="content_panel">
+        <div id="content_toolbar">
+            <span id="notebooks_buttons">
+                <button id="new_notebook">New Notebook</button>
+            </span>
+        </div>
+        <div id="notebook_list">
+            <div id="project_name"><h2>{{project}}</h2></div>
+        </div>
 
-  <!-- JavaScript at the bottom for fast page loading -->
+    </div>
 
-  <script src="static/jquery/js/jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
-  <script src="static/jquery/js/jquery-ui-1.8.10.custom.min.js" type="text/javascript" charset="utf-8"></script>
-  <script src="static/jquery/js/jquery.wijmo-open.1.1.3.min.js" type="text/javascript" charset="utf-8"></script>
-  <script src="static/js/nbbrowser.js" type="text/javascript" charset="utf-8"></script>
+<!--    <div id="right_panel">-->
+<!--    </div>-->
+    
+    </div>
+
+</div>
+
+<script src="static/jquery/js/jquery-1.6.2.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="static/jquery/js/jquery-ui-1.8.14.custom.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="static/js/namespace.js" type="text/javascript" charset="utf-8"></script>
+<script src="static/js/notebooklist.js" type="text/javascript" charset="utf-8"></script>
+<script src="static/js/nbbrowser_main.js" type="text/javascript" charset="utf-8"></script>
 
 </body>
+
 </html>
+
+

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

@@ -22,7 +22,9 b''
     <link rel="stylesheet" href="static/codemirror2/lib/codemirror.css">
     <link rel="stylesheet" href="static/codemirror2/mode/python/python.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" />
 
 </head>
@@ -39,7 +41,7 b''
     <span id="kernel_status">Idle</span>
 </div>
 
-<div id="notebook_app">
+<div id="main_app">
 
     <div id="left_panel">