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

@@ -1,125 +1,132 b''
 """Tornado handlers for the notebook."""
 
 #-----------------------------------------------------------------------------
 # Imports
 #-----------------------------------------------------------------------------
 
 import json
 import logging
 import urllib
 
 from tornado import web
 from tornado import websocket
 
 
 #-----------------------------------------------------------------------------
 # Handlers
 #-----------------------------------------------------------------------------
 
 
-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)
 
 
 class NamedNotebookHandler(web.RequestHandler):
     def get(self, notebook_id):
         nbm = self.application.notebook_manager
         if not nbm.notebook_exists(notebook_id):
             raise web.HTTPError(404)
         self.render('notebook.html', notebook_id=notebook_id)
 
 
 class KernelHandler(web.RequestHandler):
 
     def get(self):
         self.write(json.dumps(self.application.kernel_ids))
 
     def post(self):
         kernel_id = self.application.start_kernel()
         self.set_header('Location', '/'+kernel_id)
         self.write(json.dumps(kernel_id))
 
 
 class KernelActionHandler(web.RequestHandler):
 
     def post(self, kernel_id, action):
         # TODO: figure out a better way of handling RPC style calls.
         if action == 'interrupt':
             self.application.interrupt_kernel(kernel_id)
         if action == 'restart':
             new_kernel_id = self.application.restart_kernel(kernel_id)
             self.write(json.dumps(new_kernel_id))
 
 
 class ZMQStreamHandler(websocket.WebSocketHandler):
 
     def initialize(self, stream_name):
         self.stream_name = stream_name
 
     def open(self, kernel_id):
         self.router = self.application.get_router(kernel_id, self.stream_name)
         self.client_id = self.router.register_client(self)
         logging.info("Connection open: %s, %s" % (kernel_id, self.client_id))
 
     def on_message(self, msg):
         self.router.forward_msg(self.client_id, msg)
 
     def on_close(self):
         self.router.unregister_client(self.client_id)
         logging.info("Connection closed: %s" % self.client_id)
 
 
 class NotebookRootHandler(web.RequestHandler):
 
     def get(self):
         nbm = self.application.notebook_manager
         files = nbm.list_notebooks()
         self.write(json.dumps(files))
 
     def post(self):
         nbm = self.application.notebook_manager
         body = self.request.body.strip()
         format = self.get_argument('format', default='json')
         if body:
             notebook_id = nbm.save_new_notebook(body, format)
         else:
             notebook_id = nbm.new_notebook()
         self.set_header('Location', '/'+notebook_id)
         self.write(json.dumps(notebook_id))
 
 
 class NotebookHandler(web.RequestHandler):
 
     SUPPORTED_METHODS = ('GET', 'PUT', 'DELETE')
 
     def get(self, notebook_id):
         nbm = self.application.notebook_manager
         format = self.get_argument('format', default='json')
         last_mod, name, data = nbm.get_notebook(notebook_id, format)
         if format == u'json':
             self.set_header('Content-Type', 'application/json')
             self.set_header('Content-Disposition','attachment; filename=%s.json' % name)
         elif format == u'xml':
             self.set_header('Content-Type', 'text/xml')
             self.set_header('Content-Disposition','attachment; filename=%s.ipynb' % name)
         elif format == u'py':
             self.set_header('Content-Type', 'text/plain')
             self.set_header('Content-Disposition','attachment; filename=%s.py' % name)
         self.set_header('Last-Modified', last_mod)
         self.finish(data)
 
     def put(self, notebook_id):
         nbm = self.application.notebook_manager
         format = self.get_argument('format', default='json')
         nbm.save_notebook(notebook_id, self.request.body, format)
         self.set_status(204)
         self.finish()
 
     def delete(self, notebook_id):
         nbm = self.application.notebook_manager
         nbm.delete_notebook(notebook_id)
         self.set_status(204)
         self.finish()
 

IPython/frontend/html/notebook/notebookapp.py

@@ -1,269 +1,270 b''
 """A tornado based IPython notebook server."""
 
 #-----------------------------------------------------------------------------
 #  Copyright (C) 2011  The IPython Development Team
 #
 #  Distributed under the terms of the BSD License.  The full license is in
 #  the file COPYING.txt, distributed as part of this software.
 #-----------------------------------------------------------------------------
 
 #-----------------------------------------------------------------------------
 # Imports
 #-----------------------------------------------------------------------------
 
 import logging
 import os
 import signal
 import sys
 
 import zmq
 
 # Install the pyzmq ioloop. This has to be done before anything else from
 # tornado is imported.
 from zmq.eventloop import ioloop
 import tornado.ioloop
 tornado.ioloop = ioloop
 
 from tornado import httpserver
 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
 )
 from .routers import IOPubStreamRouter, ShellStreamRouter
 from .notebookmanager import NotebookManager
 
 from IPython.core.application import BaseIPythonApplication
 from IPython.core.profiledir import ProfileDir
 from IPython.frontend.qt.console.rich_ipython_widget import RichIPythonWidget
 from IPython.zmq.session import Session
 from IPython.zmq.zmqshell import ZMQInteractiveShell
 from IPython.zmq.ipkernel import (
     flags as ipkernel_flags,
     aliases as ipkernel_aliases,
     IPKernelApp
 )
 from IPython.utils.traitlets import Dict, Unicode, Int, Any, List, Enum
 
 #-----------------------------------------------------------------------------
 # Module globals
 #-----------------------------------------------------------------------------
 
 _kernel_id_regex = r"(?P<kernel_id>\w+-\w+-\w+-\w+-\w+)"
 _kernel_action_regex = r"(?P<action>restart|interrupt)"
 _notebook_id_regex = r"(?P<notebook_id>\w+-\w+-\w+-\w+-\w+)"
 
 LOCALHOST = '127.0.0.1'
 
 #-----------------------------------------------------------------------------
 # The Tornado web application
 #-----------------------------------------------------------------------------
 
 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),
             (r"/kernels/%s/iopub" % _kernel_id_regex, ZMQStreamHandler, dict(stream_name='iopub')),
             (r"/kernels/%s/shell" % _kernel_id_regex, ZMQStreamHandler, dict(stream_name='shell')),
             (r"/notebooks", NotebookRootHandler),
             (r"/notebooks/%s" % _notebook_id_regex, NotebookHandler)
         ]
         settings = dict(
             template_path=os.path.join(os.path.dirname(__file__), "templates"),
             static_path=os.path.join(os.path.dirname(__file__), "static"),
         )
         web.Application.__init__(self, handlers, **settings)
 
         self.kernel_manager = kernel_manager
         self.log = log
         self.kernel_argv = kernel_argv
         self.config = config
         self._routers = {}
         self._session_dict = {}
         self.notebook_manager = NotebookManager(config=self.config)
 
     #-------------------------------------------------------------------------
     # Methods for managing kernels and sessions
     #-------------------------------------------------------------------------
 
     @property
     def kernel_ids(self):
         return self.kernel_manager.kernel_ids
 
     def start_kernel(self):
         kwargs = dict()
         kwargs['extra_arguments'] = self.kernel_argv
         kernel_id = self.kernel_manager.start_kernel(**kwargs)
         self.log.info("Kernel started: %s" % kernel_id)
         self.log.debug("Kernel args: %r" % kwargs)
         self.start_session_manager(kernel_id)
         return kernel_id
 
     def start_session_manager(self, kernel_id):
         sm = self.kernel_manager.create_session_manager(kernel_id)
         self._session_dict[kernel_id] = sm
         iopub_stream = sm.get_iopub_stream()
         shell_stream = sm.get_shell_stream()
         iopub_router = IOPubStreamRouter(
             zmq_stream=iopub_stream, session=sm.session, config=self.config
         )
         shell_router = ShellStreamRouter(
             zmq_stream=shell_stream, session=sm.session, config=self.config
         )
         self._routers[(kernel_id, 'iopub')] = iopub_router
         self._routers[(kernel_id, 'shell')] = shell_router
 
     def kill_kernel(self, kernel_id):
         sm = self._session_dict.pop(kernel_id)
         sm.stop()
         self.kernel_manager.kill_kernel(kernel_id)
         self.log.info("Kernel killed: %s" % kernel_id)
 
     def interrupt_kernel(self, kernel_id):
         self.kernel_manager.interrupt_kernel(kernel_id)
         self.log.debug("Kernel interrupted: %s" % kernel_id)
 
     def restart_kernel(self, kernel_id):
         # Create the new kernel first so we can move the clients over.
         new_kernel_id = self.start_kernel()
 
         # Copy the clients over to the new routers.
         old_iopub_router = self.get_router(kernel_id, 'iopub')
         old_shell_router = self.get_router(kernel_id, 'shell')
         new_iopub_router = self.get_router(new_kernel_id, 'iopub')
         new_shell_router = self.get_router(new_kernel_id, 'shell')
         new_iopub_router.copy_clients(old_iopub_router)
         new_shell_router.copy_clients(old_shell_router)
 
         # Now shutdown the old session and the kernel.
         # TODO: This causes a hard crash in ZMQStream.close, which sets
         # self.socket to None to hastily. We will need to fix this in PyZMQ
         # itself. For now, we just leave the old kernel running :(
         # Maybe this is fixed now, but nothing was changed really.
         self.kill_kernel(kernel_id)
 
         self.log.debug("Kernel restarted: %s -> %s" % (kernel_id, new_kernel_id))
         return new_kernel_id
 
     def get_router(self, kernel_id, stream_name):
         router = self._routers[(kernel_id, stream_name)]
         return router
 
     
 
 #-----------------------------------------------------------------------------
 # Aliases and Flags
 #-----------------------------------------------------------------------------
 
 flags = dict(ipkernel_flags)
 
 # the flags that are specific to the frontend
 # these must be scrubbed before being passed to the kernel,
 # or it will raise an error on unrecognized flags
 notebook_flags = []
 
 aliases = dict(ipkernel_aliases)
 
 aliases.update(dict(
     ip = 'IPythonNotebookApp.ip',
     port = 'IPythonNotebookApp.port',
     colors = 'ZMQInteractiveShell.colors',
     editor = 'RichIPythonWidget.editor',
 ))
 
 #-----------------------------------------------------------------------------
 # IPythonNotebookApp
 #-----------------------------------------------------------------------------
 
 class IPythonNotebookApp(BaseIPythonApplication):
     name = 'ipython-notebook'
     default_config_file_name='ipython_notebook_config.py'
     
     description = """
         The IPython HTML Notebook.
         
         This launches a Tornado based HTML Notebook Server that serves up an
         HTML5/Javascript Notebook client.
     """
     
     classes = [IPKernelApp, ZMQInteractiveShell, ProfileDir, Session,
                KernelManager, SessionManager, RichIPythonWidget]
     flags = Dict(flags)
     aliases = Dict(aliases)
 
     kernel_argv = List(Unicode)
 
     log_level = Enum((0,10,20,30,40,50,'DEBUG','INFO','WARN','ERROR','CRITICAL'),
                     default_value=logging.INFO,
                     config=True,
                     help="Set the log level by value or name.")
 
     # connection info:
     ip = Unicode(LOCALHOST, config=True,
         help="The IP address the notebook server will listen on."
     )
 
     port = Int(8888, config=True,
         help="The port the notebook server will listen on."
     )
 
     # the factory for creating a widget
     widget_factory = Any(RichIPythonWidget)
 
     def parse_command_line(self, argv=None):
         super(IPythonNotebookApp, self).parse_command_line(argv)
         if argv is None:
             argv = sys.argv[1:]
 
         self.kernel_argv = list(argv) # copy
         # kernel should inherit default config file from frontend
         self.kernel_argv.append("--KernelApp.parent_appname='%s'"%self.name)
         # scrub frontend-specific flags
         for a in argv:
             if a.startswith('-') and a.lstrip('-') in notebook_flags:
                 self.kernel_argv.remove(a)
 
     def init_kernel_manager(self):
         # Don't let Qt or ZMQ swallow KeyboardInterupts.
         signal.signal(signal.SIGINT, signal.SIG_DFL)
 
         # Create a KernelManager and start a kernel.
         self.kernel_manager = KernelManager(config=self.config, log=self.log)
 
     def init_logging(self):
         super(IPythonNotebookApp, self).init_logging()
         # This prevents double log messages because tornado use a root logger that
         # self.log is a child of. The logging module dipatches log messages to a log
         # and all of its ancenstors until propagate is set to False.
         self.log.propagate = False
 
     def initialize(self, argv=None):
         super(IPythonNotebookApp, self).initialize(argv)
         self.init_kernel_manager()
         self.web_app = NotebookWebApplication(
             self.kernel_manager, self.log, self.kernel_argv, self.config
         )
         self.http_server = httpserver.HTTPServer(self.web_app)
         self.http_server.listen(self.port)
 
     def start(self):
         self.log.info("The IPython Notebook is running at: http://%s:%i" % (self.ip, self.port))
         ioloop.IOLoop.instance().start()
 
 #-----------------------------------------------------------------------------
 # Main entry point
 #-----------------------------------------------------------------------------
 
 def launch_new_instance():
     app = IPythonNotebookApp()
     app.initialize()
     app.start()
 

IPython/frontend/html/notebook/notebookmanager.py

@@ -1,195 +1,199 b''
 #-----------------------------------------------------------------------------
 #  Copyright (C) 2011  The IPython Development Team
 #
 #  Distributed under the terms of the BSD License.  The full license is in
 #  the file COPYING.txt, distributed as part of this software.
 #-----------------------------------------------------------------------------
 
 #-----------------------------------------------------------------------------
 # Imports
 #-----------------------------------------------------------------------------
 
 import datetime
 import os
 import uuid
 
 from tornado import web
 
 from IPython.config.configurable import Configurable
 from IPython.nbformat import current
 from IPython.utils.traitlets import Unicode, List, Dict
 
 
 #-----------------------------------------------------------------------------
 # Code
 #-----------------------------------------------------------------------------
 
 
 class NotebookManager(Configurable):
 
     notebook_dir = Unicode(os.getcwd())
     filename_ext = Unicode(u'.ipynb')
     allowed_formats = List([u'json',u'xml',u'py'])
 
     # Map notebook_ids to notebook names
     mapping = Dict()
     # Map notebook names to notebook_ids
     rev_mapping = Dict()
 
     def list_notebooks(self):
         """List all notebooks in the notebook dir.
 
         This returns a list of dicts of the form::
 
             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:
                 notebook_id = self.new_notebook_id(name)
             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):
         """Generate a new notebook_id for a name and store its mappings."""
         notebook_id = unicode(uuid.uuid4())
         self.mapping[notebook_id] = name
         self.rev_mapping[name] = notebook_id
         return notebook_id
 
     def delete_notebook_id(self, notebook_id):
         """Delete a notebook's id only. This doesn't delete the actual notebook."""
         name = self.mapping[notebook_id]
         del self.mapping[notebook_id]
         del self.rev_mapping[name]
 
     def notebook_exists(self, notebook_id):
         """Does a notebook exist?"""
         if notebook_id not in self.mapping:
             return False
         path = self.get_path_by_name(self.mapping[notebook_id])
         if not os.path.isfile(path):
             return False
         return True        
 
     def find_path(self, notebook_id):
         """Return a full path to a notebook given its notebook_id."""
         try:
             name = self.mapping[notebook_id]
         except KeyError:
             raise web.HTTPError(404)
         return self.get_path_by_name(name)
 
     def get_path_by_name(self, name):
         """Return a full path to a notebook given its name."""
         filename = name + self.filename_ext
         path = os.path.join(self.notebook_dir, filename)
         return path       
 
     def get_notebook(self, notebook_id, format=u'json'):
         """Get the representation of a notebook in format by notebook_id."""
         format = unicode(format)
         if format not in self.allowed_formats:
             raise web.HTTPError(415)
         last_modified, nb = self.get_notebook_object(notebook_id)
         data = current.writes(nb, format)
         name = nb.get('name','notebook')
         return last_modified, name, data
 
     def get_notebook_object(self, notebook_id):
         """Get the NotebookNode representation of a notebook by notebook_id."""
         path = self.find_path(notebook_id)
         if not os.path.isfile(path):
             raise web.HTTPError(404)
         info = os.stat(path)
         last_modified = datetime.datetime.utcfromtimestamp(info.st_mtime)
         try:
             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
 
     def save_new_notebook(self, data, format=u'json'):
         """Save a new notebook and return its notebook_id."""
         if format not in self.allowed_formats:
             raise web.HTTPError(415)
         try:
             nb = current.reads(data, format)
         except:
             raise web.HTTPError(400)
         try:
             name = nb.name
         except AttributeError:
             raise web.HTTPError(400)
         notebook_id = self.new_notebook_id(name)
         self.save_notebook_object(notebook_id, nb)
         return notebook_id
 
     def save_notebook(self, notebook_id, data, format=u'json'):
         """Save an existing notebook by notebook_id."""
         if format not in self.allowed_formats:
             raise web.HTTPError(415)
         try:
             nb = current.reads(data, format)
         except:
             raise web.HTTPError(400)
         self.save_notebook_object(notebook_id, nb)
 
     def save_notebook_object(self, notebook_id, nb):
         """Save an existing notebook object by notebook_id."""
         if notebook_id not in self.mapping:
             raise web.HTTPError(404)
         old_name = self.mapping[notebook_id]
         try:
             new_name = nb.name
         except AttributeError:
             raise web.HTTPError(400)
         path = self.get_path_by_name(new_name)
         try:
             with open(path,'w') as f:
                 current.write(nb, f, u'xml')
         except:
             raise web.HTTPError(400)
         if old_name != new_name:
             old_path = self.get_path_by_name(old_name)
             if os.path.isfile(old_path):
                 os.unlink(old_path)
             self.mapping[notebook_id] = new_name
             self.rev_mapping[new_name] = notebook_id
 
     def delete_notebook(self, notebook_id):
         """Delete notebook by notebook_id."""
         path = self.find_path(notebook_id)
         if not os.path.isfile(path):
             raise web.HTTPError(404)
         os.unlink(path)
         self.delete_notebook_id(notebook_id)
 
     def new_notebook(self):
         """Create a new notebook and returns its notebook_id."""
         i = 0
         while True:
             name = u'Untitled%i' % i
             path = self.get_path_by_name(name)
             if not os.path.isfile(path):
                 break
             else:
                 i = i+1
         notebook_id = self.new_notebook_id(name)
         nb = current.new_notebook(name=name, id=notebook_id)
         with open(path,'w') as f:
             current.write(nb, f, u'xml')
         return notebook_id
 

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

@@ -1,103 +1,103 b''
 
 .border-box-sizing {
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
 }
 
 /* Flexible box model classes */
 /* Taken from Alex Russell http://infrequently.org/2009/08/css-3-progress/ */
  
 .hbox {
 	display: -webkit-box;
 	-webkit-box-orient: horizontal;
 	-webkit-box-align: stretch;
  
 	display: -moz-box;
 	-moz-box-orient: horizontal;
 	-moz-box-align: stretch;
  
 	display: box;
 	box-orient: horizontal;
 	box-align: stretch;
 }
  
 .hbox > * {
 	-webkit-box-flex: 0;
 	-moz-box-flex: 0;
 	box-flex: 0;
 }
  
 .vbox {
 	display: -webkit-box;
 	-webkit-box-orient: vertical;
 	-webkit-box-align: stretch;
  
 	display: -moz-box;
 	-moz-box-orient: vertical;
 	-moz-box-align: stretch;
  
 	display: box;
 	box-orient: vertical;
 	box-align: stretch;
 }
  
 .vbox > * {
 	-webkit-box-flex: 0;
 	-moz-box-flex: 0;
 	box-flex: 0;
 }
   
 .reverse {
 	-webkit-box-direction: reverse;
 	-moz-box-direction: reverse;
 	box-direction: reverse;
 }
  
 .box-flex0 {
 	-webkit-box-flex: 0;
 	-moz-box-flex: 0;
 	box-flex: 0;
 }
  
 .box-flex1, .box-flex {
 	-webkit-box-flex: 1;
 	-moz-box-flex: 1;
 	box-flex: 1;
 }
  
 .box-flex2 {
 	-webkit-box-flex: 2;
 	-moz-box-flex: 2;
 	box-flex: 2;
 }
  
 .box-group1 {
 	-webkit-box-flex-group: 1;
 	-moz-box-flex-group: 1;
 	box-flex-group: 1;
 }
  
 .box-group2 {
 	-webkit-box-flex-group: 2;
 	-moz-box-flex-group: 2;
 	box-flex-group: 2;
 }
  
 .start {
 	-webkit-box-pack: start;
 	-moz-box-pack: start;
 	box-pack: start;
 }
  
 .end {
 	-webkit-box-pack: end;
 	-moz-box-pack: end;
 	box-pack: end;
 }
  
 .center {
 	-webkit-box-pack: center;
 	-moz-box-pack: center;
 	box-pack: center;
-}
  No newline at end of file
+}

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

@@ -1,385 +1,278 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
  *
  * 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;
-}
-
 span#save_widget {
     position: absolute;
     left: 0px;
     padding: 5px 0px;
     margin: 0px 0px 0px 0px;
 }
 
 input#notebook_name {
     height: 1em;
     line-height: 1em;
     padding: 5px;
 }
 
 span#kernel_status {
     position: absolute;
     padding: 8px 5px 5px 5px;
     right: 10px;
 	font-weight: bold;
 }
 
 .status_idle {
     color: gray;
 }
 
 .status_busy {
     color: red;
 }
 
 .status_restarting {
     color: black;
 }
 
-div#notebook_app {
-    /* Initially hidden to prevent FLOUC */
-    display: none;
-    width: 100%;
-    position: relative;
-}
-
 div#left_panel {
     overflow-y: auto;
     top: 0px;
     left: 0px;
     margin: 0px;
     padding: 0px;
     position: absolute;
 }
 
 h3.section_header {
     padding: 5px;
 }
 
 div.section_content {
     padding: 5px;
 }
 
 
 span.section_row_buttons > button {
     width: 60px;
 }
 
 .section_row {
     margin: 5px 0px;
 }
 
 .section_row_buttons {
     float: right;
 }
 
 .section_row_header {
     float: left;
     font-size: 85%;
     padding: 0.2em 0em;
     font-weight: bold;
 }
 
 span.button_label {
     padding: 0.2em 1em;
     font-size: 77%;
     float: right;
 }
 
 /* This is needed because FF was adding a 2px margin top and bottom. */
 .section_row .ui-button {
     margin-top: 0px;
     margin-bottom: 0px;
 }
 
-
-.ui-button .ui-button-text {
-    padding: 0.2em 0.8em;
-    font-size: 77%;
-}
-
 #download_format {
     float: right;
     font-size: 85%;
     width: 60px;
     margin: 1px 5px;
 }
 
 div#left_panel_splitter {
     width: 8px;
     top: 0px;
     left: 202px;
     margin: 0px;
     padding: 0px;
     position: absolute;
 }
 
 div#notebook_panel {
 /*    The L margin will be set in the Javascript code*/
     margin: 0px 0px 0px 0px;
     padding: 0px;
 }
 
 div#notebook {
     overflow-y: scroll;
     overflow-x: auto;
     width: 100%;
     padding: 0px 15px 0px 15px;
     margin: 0px
     background-color: white;
 }
 
 div#pager_splitter {
     height: 8px;
 }
 
 div#pager {
     padding: 15px;
     overflow: auto;
 }
 
 div.cell {
     width: 100%;
     padding: 5px;
     /* This acts as a spacer between cells, that is outside the border */
     margin: 15px 0px 15px 0px;
 }
 
 div.code_cell {
     background-color: white;
 }
 
 div.prompt {
     width: 80px;
     padding: 0.4em;
     margin: 0px;
     font-family: monospace;
 }
 
 div.input_prompt {
     color: navy;
 }
 
 div.output {
     /* This is a spacer between the input and output of each cell */
     margin-top: 15px;
 }
 
 div.output_prompt {
     color: darkred;
 }
 
 div.output_area {
     text-align: left;
     color: black;
     font-family: monospace;
 }
 
 div.output_stream {
     padding: 0.4em;
 }
 
 div.output_latex {
     /* Slightly bigger than the rest of the notebook */
     font-size: 116%;
 }
 
 div.output_html {
 }
 
 div.output_png {
 }
 
 div.text_cell {
     background-color: white;
 }
 
 textarea.text_cell_input {
     /* Slightly bigger than the rest of the notebook */
     font-size: 116%;
     font-family: monospace;
     outline: none;
     resize: none;
     width:  inherit;
     border-style: none;
     padding: 0px;
     margin: 0px;
     color: black;
 }
 
 div.text_cell_render {
     font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
     /* Slightly bigger than the rest of the notebook */
     font-size: 116%;
     outline: none;
     resize: none;
     width:  inherit;
     border-style: none;
     padding: 5px;
     color: black;
 }
 
 div.text_cell_render em {font-style: italic;}
 div.text_cell_render strong {font-weight: bold;}
 div.text_cell_render u {text-decoration: underline;}
 div.text_cell_render :link { text-decoration: underline }
 div.text_cell_render :visited { text-decoration: underline }
 div.text_cell_render h1 {font-size: 197%; margin: .67em 0; font-weight: bold;}
 div.text_cell_render h2 {font-size: 153.9%; margin: .75em 0; font-weight: bold;}
 div.text_cell_render h3 {font-size: 116%; margin: .83em 0; font-weight: bold;}
 div.text_cell_render h4 {margin: 1.12em 0; font-weight: bold;}
 div.text_cell_render h5 {font-size: 85%.; margin: 1.5em 0; font-weight: bold;}
 div.text_cell_render h6 {font-size: 77%; margin: 1.67em 0; font-weight: bold;}
 div.text_cell_render ul {list-style:disc; margin-left: 40px;}
 div.text_cell_render ul ul {list-style:square; margin-left: 40px;}
 div.text_cell_render ul ul ul {list-style:circle; margin-left: 40px;}
 div.text_cell_render ol {list-style:upper-roman; margin-left: 40px;}
 div.text_cell_render ol ol {list-style:upper-alpha;}
 div.text_cell_render ol ol ol {list-style:decimal;}
 div.text_cell_render ol ol ol ol {list-style:lower-alpha;}
 div.text_cell_render ol ol ol ol ol {list-style:lower-roman;}
 
 
 .CodeMirror {
   overflow: hidden; /* Changed from auto to remove scrollbar */
   height: auto;     /* Changed to auto to autogrow */
   line-height: 1.231;  /* Changed from 1em to our global default */
 }
 
 /* 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 {
     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;
 }
 

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

@@ -1,55 +1,55 b''
 
 //============================================================================
 // 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 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);
 
         $('div#left_panel_splitter').height(app_height);
 
         $('div#notebook_panel').height(app_height);
         var left_panel_width = $('div#left_panel').outerWidth();
         var left_panel_splitter_width = $('div#left_panel_splitter').outerWidth();
         if (IPython.left_panel.expanded) {
             $('div#notebook_panel').css({marginLeft : left_panel_width+left_panel_splitter_width});
         } else {
         $('div#notebook_panel').css({marginLeft : left_panel_splitter_width});
         }
 
 
         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/notebook.js

@@ -1,606 +1,621 b''
 
 //============================================================================
 // Notebook
 //============================================================================
 
 var IPython = (function (IPython) {
 
     var utils = IPython.utils;
 
     var Notebook = function (selector) {
         this.element = $(selector);
         this.element.scroll();
         this.element.data("notebook", this);
         this.next_prompt_number = 1;
         this.kernel = null;
         this.msg_cell_map = {};
         this.style();
         this.create_elements();
         this.bind_events();
     };
 
 
     Notebook.prototype.style = function () {
         $('div#notebook').addClass('border-box-sizing');
     };
 
 
     Notebook.prototype.create_elements = function () {
         // We add this end_space div to the end of the notebook div to:
         // i) provide a margin between the last cell and the end of the notebook
         // ii) to prevent the div from scrolling up when the last cell is being
         // edited, but is too low on the page, which browsers will do automatically.
         this.element.append($('<div class="end_space"></div>').height(50));
         $('div#notebook').addClass('border-box-sizing');
     };
 
 
     Notebook.prototype.bind_events = function () {
         var that = this;
         $(document).keydown(function (event) {
             // console.log(event);
             if (event.which === 38) {
                 var cell = that.selected_cell();
                 if (cell.at_top()) {
                     event.preventDefault();
                     that.select_prev();
                 };
             } else if (event.which === 40) {
                 var cell = that.selected_cell();
                 if (cell.at_bottom()) {
                     event.preventDefault();
                     that.select_next();
                 };
             } else if (event.which === 13 && event.shiftKey) {
                 that.execute_selected_cell();
                 return false;
             } else if (event.which === 13 && event.ctrlKey) {
                 that.execute_selected_cell({terminal:true});
                 return false;
             };
         });
 
         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; 
             that.element.animate({height : new_height + 'px'}, 'fast');
         });
 
         this.element.bind('collapse_left_panel', function () {
             var splitter_width = $('div#left_panel_splitter').outerWidth(true);
             var new_margin = splitter_width;
             $('div#notebook_panel').animate({marginLeft : new_margin + 'px'}, 'fast');
         });
 
         this.element.bind('expand_left_panel', function () {
             var splitter_width = $('div#left_panel_splitter').outerWidth(true);
             var left_panel_width = IPython.left_panel.width;
             var new_margin = splitter_width + left_panel_width;
             $('div#notebook_panel').animate({marginLeft : new_margin + 'px'}, 'fast');
         });
     };
 
 
     Notebook.prototype.scroll_to_bottom = function () {
         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.
 
 
     Notebook.prototype.cell_elements = function () {
         return this.element.children("div.cell");
     }
 
 
     Notebook.prototype.ncells = function (cell) {
         return this.cell_elements().length;
     }
 
 
     // TODO: we are often calling cells as cells()[i], which we should optimize
     // to cells(i) or a new method.
     Notebook.prototype.cells = function () {
         return this.cell_elements().toArray().map(function (e) {
             return $(e).data("cell");
         });
     }
 
 
     Notebook.prototype.find_cell_index = function (cell) {
         var result = null;
         this.cell_elements().filter(function (index) {
             if ($(this).data("cell") === cell) {
                 result = index;
             };
         });
         return result;
     };
 
 
     Notebook.prototype.index_or_selected = function (index) {
         return index || this.selected_index() || 0;
     }
 
 
     Notebook.prototype.select = function (index) {
         if (index !== undefined && index >= 0 && index < this.ncells()) {
             if (this.selected_index() !== null) {
                 this.selected_cell().unselect();
             };
             this.cells()[index].select();
             if (index === (this.ncells()-1)) {
                 this.scroll_to_bottom();
             };
         };
         return this;
     };
 
 
     Notebook.prototype.select_next = function () {
         var index = this.selected_index();
         if (index !== null && index >= 0 && (index+1) < this.ncells()) {
             this.select(index+1);
         };
         return this;
     };
 
 
     Notebook.prototype.select_prev = function () {
         var index = this.selected_index();
         if (index !== null && index >= 0 && (index-1) < this.ncells()) {
             this.select(index-1);
         };
         return this;
     };
 
 
     Notebook.prototype.selected_index = function () {
         var result = null;
         this.cell_elements().filter(function (index) {
             if ($(this).data("cell").selected === true) {
                 result = index;
             };
         });
         return result;
     };
 
 
     Notebook.prototype.cell_for_msg = function (msg_id) {
         var cell_id = this.msg_cell_map[msg_id];
         var result = null;
         this.cell_elements().filter(function (index) {
             cell = $(this).data("cell");
             if (cell.cell_id === cell_id) {
                 result = cell;
             };
         });
         return result;
     };
 
 
     Notebook.prototype.selected_cell = function () {
         return this.cell_elements().eq(this.selected_index()).data("cell");
     }
 
 
     // Cell insertion, deletion and moving.
 
 
     Notebook.prototype.delete_cell = function (index) {
         var i = index || this.selected_index();
         if (i !== null && i >= 0 && i < this.ncells()) {
             this.cell_elements().eq(i).remove();
             if (i === (this.ncells())) {
                 this.select(i-1);
             } else {
                 this.select(i);
             };
         };
         return this;
     };
 
 
     Notebook.prototype.append_cell = function (cell) {
         this.element.find('div.end_space').before(cell.element);
         return this;
     };
 
 
     Notebook.prototype.insert_cell_after = function (cell, index) {
         var ncells = this.ncells();
         if (ncells === 0) {
             this.append_cell(cell);
             return this;
         };
         if (index >= 0 && index < ncells) {
             this.cell_elements().eq(index).after(cell.element);
         };
         return this
     };
 
 
     Notebook.prototype.insert_cell_before = function (cell, index) {
         var ncells = this.ncells();
         if (ncells === 0) {
             this.append_cell(cell);
             return this;
         };
         if (index >= 0 && index < ncells) {
             this.cell_elements().eq(index).before(cell.element);
         };
         return this;
     };
 
 
     Notebook.prototype.move_cell_up = function (index) {
         var i = index || this.selected_index();
         if (i !== null && i < this.ncells() && i > 0) {
             var pivot = this.cell_elements().eq(i-1);
             var tomove = this.cell_elements().eq(i);
             if (pivot !== null && tomove !== null) {
                 tomove.detach();
                 pivot.before(tomove);
                 this.select(i-1);
             };
         };
         return this;
     }
 
 
     Notebook.prototype.move_cell_down = function (index) {
         var i = index || this.selected_index();
         if (i !== null && i < (this.ncells()-1) && i >= 0) {
             var pivot = this.cell_elements().eq(i+1)
             var tomove = this.cell_elements().eq(i)
             if (pivot !== null && tomove !== null) {
                 tomove.detach();
                 pivot.after(tomove);
                 this.select(i+1);
             };
         };
         return this;
     }
 
 
     Notebook.prototype.sort_cells = function () {
         var ncells = this.ncells();
         var sindex = this.selected_index();
         var swapped;
         do {
             swapped = false
             for (var i=1; i<ncells; i++) {
                 current = this.cell_elements().eq(i).data("cell");
                 previous = this.cell_elements().eq(i-1).data("cell");
                 if (previous.input_prompt_number > current.input_prompt_number) {
                     this.move_cell_up(i);
                     swapped = true;
                 };
             };
         } while (swapped);
         this.select(sindex);
         return this;
     };
 
 
     Notebook.prototype.insert_code_cell_before = function (index) {
         // 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;
     }
 
 
     Notebook.prototype.insert_code_cell_after = function (index) {
         // 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;
     }
 
 
     Notebook.prototype.insert_text_cell_before = function (index) {
         // TODO: Bounds check for i
         var i = this.index_or_selected(index);
         var cell = new IPython.TextCell(this);
         cell.config_mathjax();
         this.insert_cell_before(cell, i);
         this.select(this.find_cell_index(cell));
-        return this;
+        return cell;
     }
 
 
     Notebook.prototype.insert_text_cell_after = function (index) {
         // TODO: Bounds check for i
         var i = this.index_or_selected(index);
         var cell = new IPython.TextCell(this);
         cell.config_mathjax();
         this.insert_cell_after(cell, i);
         this.select(this.find_cell_index(cell));
-        return this;
+        return cell;
     }
 
 
     Notebook.prototype.text_to_code = function (index) {
         // TODO: Bounds check for i
         var i = this.index_or_selected(index);
         var source_element = this.cell_elements().eq(i);
         var source_cell = source_element.data("cell");
         if (source_cell instanceof IPython.TextCell) {
             this.insert_code_cell_after(i);
             var target_cell = this.cells()[i+1];
             target_cell.set_code(source_cell.get_text());
             source_element.remove();
         };
     };
 
 
     Notebook.prototype.code_to_text = function (index) {
         // TODO: Bounds check for i
         var i = this.index_or_selected(index);
         var source_element = this.cell_elements().eq(i);
         var source_cell = source_element.data("cell");
         if (source_cell instanceof IPython.CodeCell) {
             this.insert_text_cell_after(i);
             var target_cell = this.cells()[i+1];
             var text = source_cell.get_code();
             if (text === "") {text = target_cell.placeholder;};
             target_cell.set_text(text);
             source_element.remove();
             target_cell.edit();
         };
     };
 
 
     // Cell collapsing
 
     Notebook.prototype.collapse = function (index) {
         var i = this.index_or_selected(index);
         this.cells()[i].collapse();
     };
 
 
     Notebook.prototype.expand = function (index) {
         var i = this.index_or_selected(index);
         this.cells()[i].expand();
     };
 
 
     // Kernel related things
 
     Notebook.prototype.start_kernel = function () {
         this.kernel = new IPython.Kernel();
         this.kernel.start_kernel($.proxy(this.kernel_started, this));
     };
 
 
     Notebook.prototype.handle_shell_reply = function (e) {
         reply = $.parseJSON(e.data);
         var header = reply.header;
         var content = reply.content;
         var msg_type = header.msg_type;
         // console.log(reply);
         var cell = this.cell_for_msg(reply.parent_header.msg_id);
         if (msg_type === "execute_reply") {
             cell.set_input_prompt(content.execution_count);
         } else if (msg_type === "complete_reply") {
             cell.finish_completing(content.matched_text, content.matches);
         };
         var payload = content.payload || [];
         this.handle_payload(payload);
     };
 
 
     Notebook.prototype.handle_payload = function (payload) {
         var l = payload.length;
         if (l > 0) {
             IPython.pager.clear();
             IPython.pager.expand();
         };
         for (var i=0; i<l; i++) {
             IPython.pager.append_text(payload[i].text);
         };
     };
 
 
     Notebook.prototype.handle_iopub_reply = function (e) {
         reply = $.parseJSON(e.data);
         var content = reply.content;
         // console.log(reply);
         var msg_type = reply.header.msg_type;
         var cell = this.cell_for_msg(reply.parent_header.msg_id);
         if (msg_type === "stream") {
             cell.expand();
             cell.append_stream(content.data + "\n");
         } else if (msg_type === "display_data") {
             cell.expand();
             cell.append_display_data(content.data);
         } else if (msg_type === "pyout") {
             cell.expand();
             cell.append_pyout(content.data, content.execution_count)
         } else if (msg_type === "pyerr") {
             cell.expand();
             cell.append_pyerr(content.ename, content.evalue, content.traceback);
         } else if (msg_type === "status") {
             if (content.execution_state === "busy") {
                 IPython.kernel_status_widget.status_busy();
             } else if (content.execution_state === "idle") {
                 IPython.kernel_status_widget.status_idle();
             };
         }
     };
 
 
     Notebook.prototype.kernel_started = function () {
         console.log("Kernel started: ", this.kernel.kernel_id);
         this.kernel.shell_channel.onmessage = $.proxy(this.handle_shell_reply,this);
         this.kernel.iopub_channel.onmessage = $.proxy(this.handle_iopub_reply,this);
     };
 
 
     Notebook.prototype.execute_selected_cell = function (options) {
         // add_new: should a new cell be added if we are at the end of the nb
         // terminal: execute in terminal mode, which stays in the current cell
         default_options = {terminal: false, add_new: true}
         $.extend(default_options, options)
         var that = this;
         var cell = that.selected_cell();
         var cell_index = that.find_cell_index(cell);
         if (cell instanceof IPython.CodeCell) {
             cell.clear_output();
             var code = cell.get_code();
             var msg_id = that.kernel.execute(cell.get_code());
             that.msg_cell_map[msg_id] = cell.cell_id;
         } else if (cell instanceof IPython.TextCell) {
             cell.render();
         }
         if (default_options.terminal) {
             cell.clear_input();
         } else {
             if ((cell_index === (that.ncells()-1)) && default_options.add_new) {
                 that.insert_code_cell_after();
                 // If we are adding a new cell at the end, scroll down to show it.
                 that.scroll_to_bottom();
             } else {
                 that.select(cell_index+1);
             };
         };
     };
 
 
     Notebook.prototype.execute_all_cells = function () {
         var ncells = this.ncells();
         for (var i=0; i<ncells; i++) {
             this.select(i);
             this.execute_selected_cell({add_new:false});
         };
         this.scroll_to_bottom();
     };
 
 
     Notebook.prototype.complete_cell = function (cell, line, cursor_pos) {
         var msg_id = this.kernel.complete(line, cursor_pos);
         this.msg_cell_map[msg_id] = cell.cell_id;
     };
 
     // Persistance and loading
 
 
     Notebook.prototype.fromJSON = function (data) {
         var ncells = this.ncells();
         for (var i=0; i<ncells; i++) {
             // Always delete cell 0 as they get renumbered as they are deleted.
             this.delete_cell(0);
         };
         // Only handle 1 worksheet for now.
         var worksheet = data.worksheets[0];
         if (worksheet !== undefined) {
             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);
                 };
             };          
         };
     };
 
 
     Notebook.prototype.toJSON = function () {
         var cells = this.cells();
         var ncells = cells.length;
         cell_array = new Array(ncells);
         for (var i=0; i<ncells; i++) {
             cell_array[i] = cells[i].toJSON();
         };
         data = {
             // Only handle 1 worksheet for now.
             worksheets : [{cells:cell_array}]
         }
         return data
     };
 
     Notebook.prototype.save_notebook = function () {
         if (IPython.save_widget.test_notebook_name()) {
             var notebook_id = IPython.save_widget.get_notebook_id();
             var nbname = IPython.save_widget.get_notebook_name();
             // We may want to move the name/id/nbformat logic inside toJSON?
             var data = this.toJSON();
             data.name = nbname;
             data.nbformat = 2;
             data.id = notebook_id
             // We do the call with settings so we can set cache to false.
             var settings = {
               processData : false,
               cache : false,
               type : "PUT",
               data : JSON.stringify(data),
               success : $.proxy(this.notebook_saved,this)
             };
             IPython.save_widget.status_saving();
             $.ajax("/notebooks/" + notebook_id, settings);
         };
     };
 
 
     Notebook.prototype.notebook_saved = function (data, status, xhr) {
         IPython.save_widget.status_save();
     }
 
 
-    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 = {
-          processData : false,
-          cache : false,
-          type : "GET",
-          dataType : "json",
-          success : $.proxy(this.notebook_loaded,this)
+            processData : false,
+            cache : false,
+            type : "GET",
+            dataType : "json",
+            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);
     }
 
 
     Notebook.prototype.notebook_loaded = function (data, status, xhr) {
         this.fromJSON(data);
         if (this.ncells() === 0) {
             this.insert_code_cell_after();
         };
         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;
 
     return IPython;
 
 }(IPython));
 

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

@@ -1,47 +1,50 b''
 
 //============================================================================
 // On document ready
 //============================================================================
 
 
 $(document).ready(function () {
 
     MathJax.Hub.Config({
         tex2jax: {
             inlineMath: [ ['$','$'], ["\\(","\\)"] ],
             displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
         },
         displayAlign: 'left', // Change this to 'center' to center equations.
         "HTML-CSS": {
             styles: {'.MathJax_Display': {"margin": 0}}
         }
     });
 
     $('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();
     IPython.pager = new IPython.Pager('div#pager', 'div#pager_splitter');
     IPython.left_panel = new IPython.LeftPanel('div#left_panel', 'div#left_panel_splitter');
     IPython.save_widget = new IPython.SaveWidget('span#save_widget');
     IPython.notebook = new IPython.Notebook('div#notebook');
     IPython.kernel_status_widget = new IPython.KernelStatusWidget('#kernel_status');
     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');
-    $('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.
-    setTimeout(function () {
-        IPython.save_widget.update_url();
-        IPython.layout_manager.do_resize();
-        IPython.pager.collapse();
-    }, 100);
+    // 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();
+            IPython.pager.collapse();
+        },100);
+    });
+
 });
 

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

@@ -1,236 +1,235 b''
 
 //============================================================================
 // Cell
 //============================================================================
 
 var IPython = (function (IPython) {
 
     var utils = IPython.utils;
 
     // Base PanelSection class
 
     var PanelSection = function (selector) {
         this.selector = selector;
         if (this.selector !== undefined) {
             this.element = $(selector);
             this.header = this.element.find('h3.section_header');
             this.content = this.element.find('div.section_content');
             this.style();
             this.bind_events();
         }
         this.expanded = true;
     };
 
 
     PanelSection.prototype.style = function () {
         this.header.addClass('ui-widget ui-state-default');
         this.content.addClass('ui-widget section_content');
     };
 
 
     PanelSection.prototype.bind_events = function () {
         var that = this;
         this.header.click(function () {
             that.toggle();
         });
         this.header.hover(function () {
             that.header.toggleClass('ui-state-hover');
         });
     };
 
 
     PanelSection.prototype.expand = function () {
         if (!this.expanded) {
             this.content.slideDown('fast');
             this.expanded = true;
         };
     };
 
 
     PanelSection.prototype.collapse = function () {
         if (this.expanded) {
             this.content.slideUp('fast');
             this.expanded = false;
         };
     };
 
 
     PanelSection.prototype.toggle = function () {
         if (this.expanded === true) {
             this.collapse();
         } else {
             this.expand();
         };
     };
 
 
     PanelSection.prototype.create_children = function () {};
 
 
     // NotebookSection
 
     var NotebookSection = function () {
         PanelSection.apply(this, arguments);
     };
 
 
     NotebookSection.prototype = new PanelSection();
 
 
     NotebookSection.prototype.style = function () {
         PanelSection.prototype.style.apply(this);
         this.content.addClass('ui-helper-clearfix');
         this.content.find('div.section_row').addClass('ui-helper-clearfix');
         this.content.find('#new_open').buttonset();
         this.content.find('#download_notebook').button();
         this.content.find('#upload_notebook').button();
         this.content.find('#download_format').addClass('ui-widget ui-widget-content');
         this.content.find('#download_format option').addClass('ui-widget ui-widget-content');
     };
 
 
     NotebookSection.prototype.bind_events = function () {
         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();
             var notebook_id = IPython.save_widget.get_notebook_id();
             var url = '/notebooks/' + notebook_id + '?format=' + format;
             window.open(url,'_newtab');
         });
     };
 
     // CellSection
 
     var CellSection = function () {
         PanelSection.apply(this, arguments);
     };
 
 
     CellSection.prototype = new PanelSection();
 
 
     CellSection.prototype.style = function () {
         PanelSection.prototype.style.apply(this);
         this.content.addClass('ui-helper-clearfix');
         this.content.find('div.section_row').addClass('ui-helper-clearfix');
         this.content.find('#delete_cell').button();
         this.content.find('#insert').buttonset();
         this.content.find('#move').buttonset();
         this.content.find('#cell_type').buttonset();
         this.content.find('#toggle_output').buttonset();
         this.content.find('#run_cells').buttonset();
     };
 
 
     CellSection.prototype.bind_events = function () {
         PanelSection.prototype.bind_events.apply(this);
         this.content.find('#collapse_cell').click(function () {
             IPython.notebook.collapse();
         });
         this.content.find('#expand_cell').click(function () {
             IPython.notebook.expand();
         });
         this.content.find('#delete_cell').click(function () {
             IPython.notebook.delete_cell();
         });
         this.content.find('#insert_cell_above').click(function () {
             IPython.notebook.insert_code_cell_before();
         });
         this.content.find('#insert_cell_below').click(function () {
             IPython.notebook.insert_code_cell_after();
         });
         this.content.find('#move_cell_up').click(function () {
             IPython.notebook.move_cell_up();
         });
         this.content.find('#move_cell_down').click(function () {
             IPython.notebook.move_cell_down();
         });
         this.content.find('#to_code').click(function () {
             IPython.notebook.text_to_code();
         });
         this.content.find('#to_text').click(function () {
             IPython.notebook.code_to_text();
         });
         this.content.find('#run_selected_cell').click(function () {
             IPython.notebook.execute_selected_cell();
         });
         this.content.find('#run_all_cells').click(function () {
             IPython.notebook.execute_all_cells();
         });
     };
 
 
     // KernelSection
 
     var KernelSection = function () {
         PanelSection.apply(this, arguments);
     };
 
 
     KernelSection.prototype = new PanelSection();
 
 
     KernelSection.prototype.style = function () {
         PanelSection.prototype.style.apply(this);
         this.content.addClass('ui-helper-clearfix');
         this.content.find('div.section_row').addClass('ui-helper-clearfix');
         this.content.find('#int_restart').buttonset();
     };
 
 
     KernelSection.prototype.bind_events = function () {
         PanelSection.prototype.bind_events.apply(this);
         this.content.find('#restart_kernel').click(function () {
             IPython.notebook.kernel.restart();
         });
         this.content.find('#int_kernel').click(function () {
             IPython.notebook.kernel.interrupt();
         });
     };
 
 
     // HelpSection
 
     var HelpSection = function () {
         PanelSection.apply(this, arguments);
     };
 
 
     HelpSection.prototype = new PanelSection();
 
 
     HelpSection.prototype.style = function () {
         PanelSection.prototype.style.apply(this);
         PanelSection.prototype.style.apply(this);
         this.content.addClass('ui-helper-clearfix');
         this.content.find('div.section_row').addClass('ui-helper-clearfix');
         this.content.find('#help_buttons0').buttonset();
         this.content.find('#help_buttons1').buttonset();
     };
 
 
     HelpSection.prototype.bind_events = function () {
         PanelSection.prototype.bind_events.apply(this);
     };
 
 
     // Set module variables
 
     IPython.PanelSection = PanelSection;
     IPython.NotebookSection = NotebookSection;
     IPython.CellSection = CellSection;
     IPython.KernelSection = KernelSection;
     IPython.HelpSection = HelpSection;
 
     return IPython;
 
 }(IPython));
 

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

@@ -1,30 +1,64 b''
 <!DOCTYPE HTML>
+<html>
 
 <head>
-  <meta charset="utf-8">
+    <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/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>
  No newline at end of file
+
+</html>
+
+

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

@@ -1,186 +1,188 b''
 <!DOCTYPE HTML>
 <html>
 
 <head>
     <meta charset="utf-8">
 
     <title>IPython Notebook</title>
 
     <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" />-->
 
     <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML" charset="utf-8"></script>
     <!-- <script type='text/javascript' src='static/mathjax/MathJax.js?config=TeX-AMS_HTML' charset='utf-8'></script> -->
     <script type="text/javascript">
     if (typeof MathJax == 'undefined') {
         console.log("Trying to load local copy of MathJax");
         document.write(unescape("%3Cscript type='text/javascript' src='static/mathjax/MathJax.js%3Fconfig=TeX-AMS_HTML' charset='utf-8'%3E%3C/script%3E"));
     }
     </script>
 
     <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>
 
 <body>
 
 <div id="header">
     <span id="ipython_notebook"><h1>IPython Notebook</h1></span>
     <span id="save_widget">
         <input type="text" id="notebook_name" size="20"></textarea>
         <span id="notebook_id" style="display:none">{{notebook_id}}</span>
         <button id="save_notebook">Save</button>
     </span>
     <span id="kernel_status">Idle</span>
 </div>
 
-<div id="notebook_app">
+<div id="main_app">
 
     <div id="left_panel">
 
         <div id="notebook_section">
             <h3 class="section_header">Notebook</h3>
             <div class="section_content">
                 <div class="section_row">
                     <span id="new_open" class="section_row_buttons">
                         <button id="new_notebook">New</button>
                         <button id="open_notebook">Open</button>
                     </span>
                     <span class="section_row_header">Actions</span>
                 </div>
                 <div class="section_row">
                     <span class="section_row_buttons">
                         <button id="download_notebook">Export</button>
                     </span>
                     <span>
                         <select id="download_format">
                             <option value="xml">xml</option>
                             <option value="json">json</option>
                             <option value="py">py</option>
                         </select>
                     </span>
                 </div>
             </div>
         </div>
 
         <div id="cell_section">
             <h3 class="section_header">Cell</h3>
             <div class="section_content">
                 <div class="section_row">
                     <span class="section_row_buttons">
                         <button id="delete_cell">Delete</button>
                     </span>
                     <span class="section_row_header">Actions</span>
                 </div>
                 <div class="section_row">
                     <span id="insert" class="section_row_buttons">
                         <button id="insert_cell_above">Above</button>
                         <button id="insert_cell_below">Below</button>
                     </span>
                     <span class="button_label">Insert</span>
                 </div>
                 <div class="section_row">
                     <span id="move" class="section_row_buttons">
                         <button id="move_cell_up">Up</button>
                         <button id="move_cell_down">Down</button>
                     </span>
                     <span class="button_label">Move</span>
                 </div>
                 <div class="section_row">
                     <span id="cell_type" class="section_row_buttons">
                         <button id="to_code">Code</button>
                         <button id="to_text">Text</button>
                     </span>
                     <span class="button_label">Cell Type</span>
                 </div>
                 <div class="section_row">
                     <span id="toggle_output" class="section_row_buttons">
                         <button id="collapse_cell">Collapse</button>
                         <button id="expand_cell">Expand</button>
                     </span>
                     <span class="button_label">Output</span>
                 </div>
                 <div class="section_row">
                     <span id="run_cells" class="section_row_buttons">
                         <button id="run_selected_cell">Selected</button>
                         <button id="run_all_cells">All</button>
                     </span>
                     <span class="button_label">Run</span>
                 </div>
             </div>
         </div>
 
         <div id="kernel_section">
             <h3 class="section_header">Kernel</h3>
             <div class="section_content">
                 <div class="section_row">
                     <span id="int_restart" class="section_row_buttons">
                         <button id="int_kernel">Interrupt</button>
                         <button id="restart_kernel">Restart</button>
                     </span>
                     <span class="section_row_header">Actions</span>
                 </div>
             </div>
         </div>
 
         <div id="help_section">
             <h3 class="section_header">Help</h3>
             <div class="section_content">
                 <div class="section_row">
                     <span id="help_buttons0" class="section_row_buttons">
                         <button id="python_help"><a href="http://docs.python.org" target="_blank">Python</a></button>
                         <button id="ipython_help"><a href="http://ipython.org/documentation.html" target="_blank">IPython</a></button>
                         <button id="numpy_help"><a href="http://docs.scipy.org/doc/numpy/reference/" target="_blank">NumPy</a></button>
                     </span>
                     <span class="section_row_header">Links</span>
                 </div>
                 <div class="section_row">
                     <span id="help_buttons1" class="section_row_buttons">
                         <button id="matplotlib_help"><a href="http://matplotlib.sourceforge.net/" target="_blank">MPL</a></button>
                         <button id="scipy_help"><a href="http://docs.scipy.org/doc/scipy/reference/" target="_blank">SciPy</a></button>
                         <button id="sympy_help"><a href="http://docs.sympy.org/dev/index.html" target="_blank">SymPy</a></button>
                     </span>
                 </div>
             </div>
         </div>
 
     </div>
     <div id="left_panel_splitter"></div>
     <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.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/jquery/js/jquery.autogrow.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/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/pager.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/panelsection.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/leftpanel.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/notebook_main.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/codemirror2/lib/codemirror.js"></script>
 <script src="static/codemirror2/mode/python/python.js"></script>
 
 </body>
 
 </html>