Merge pull request #3325 from ellisonbg/jsreorg

Organize the JS and less files by component, in the `static` directory of the notebook.

This PR does the client side re-org that parallels the server side work in #3321.  There are now subdirectories in `static/` for each part of the client; roughly speaking there is one subdir for each page, web service or component.

IPython/frontend/html/notebook/README.md

@@ -1,6 +1,6 @@
 # IPython Notebook development
 
-# Development dependencies
+## Development dependencies
 
 Developers of the IPython Notebook will need to install the following tools:
 
@@ -9,7 +9,7 @@ Developers of the IPython Notebook will need to install the following tools:
 * less (`npm install -g less`)
 * bower (`npm install -g bower`)
 
-# Components
+## Components
 
 We are moving to a model where our JavaScript dependencies are managed using 
 [bower](http://bower.io/). These packages are installed in `static/components`
@@ -22,8 +22,52 @@ we maintain our own fork of CodeMirror that is used with bower. This fork should
 track the upstream CodeMirror exactly; the only difference is that we are adding
 semantic versioned tags to our repo.
 
-# less
+## less
 
 If you edit our `.less` files you will need to run the less compiler to build
 our minified css files.  This can be done by running `fab css` from this directory.
 
+## JavaScript Documentation
+
+
+How to  Build/ view the doc  for JavaScript. JavaScript documentation  should follow a
+style close  to JSDoc  one, so you  should be  able to build  them with  your favorite
+documentation builder. Still  the documentation comment are mainly written  to be read
+with YUI  doc. You can either  build a static version,  or start a YUIdoc  server that
+will live update the doc at every page request.
+
+
+
+To do so, you will need to install YUIdoc.
+
+### Install NodeJS
+
+Node is a browser less javascript interpreter. To install it please refer to
+the documentation for your platform. Install also NPM (node package manager) if
+it does not come bundled with it.  
+
+### Get YUIdoc
+
+npm does by default install package in `./node_modules` instead of doing a
+system wide install. I'll leave you to yuidoc docs if you want to make a system
+wide install.
+
+First, cd into js directory :
+```bash
+cd IPython/frontend/html/notebook/static/js/
+# install yuidoc
+npm install yuidocjs
+```
+
+
+### Run YUIdoc server
+
+From IPython/frontend/html/notebook/static/js/
+```bash
+# run yuidoc for install dir 
+./node_modules/yuidocjs/lib/cli.js --server .
+```
+
+Follow the instruction and the documentation should be available on localhost:3000
+
+Omitting `--server` will build a static version in the `out` folder by default.

IPython/frontend/html/notebook/fabfile.py

@@ -7,15 +7,24 @@ import os
 static_dir = 'static'
 components_dir = os.path.join(static_dir, 'components')
 
-
-def css(minify=True):
+def css(minify=True, verbose=False):
     """generate the css from less files"""
-    if minify not in ['True', 'False', True, False]:
-        abort('minify must be Boolean')
-    minify = (minify in ['True',True])
+    source = os.path.join('style', 'style.less')
+    target = os.path.join('style', 'style.min.css')
+    _compile_less(source, target, minify, verbose)
 
-    min_flag= '-x' if minify is True else ''
+def _to_bool(b):
+    if not b in ['True', 'False', True, False]:
+        abort('boolean expected, got: %s' % b)
+    return (b in ['True', True])
+
+def _compile_less(source, target, minify=True, verbose=False):
+    """Complie a less file by source and target relative to static_dir"""
+    minify = _to_bool(minify)
+    verbose = _to_bool(verbose)
+    min_flag = '-x' if minify is True else ''
+    ver_flag = '--verbose' if verbose is True else ''
     lessc = os.path.join('components', 'less.js', 'bin', 'lessc')
     with lcd(static_dir):
-        local('{lessc} {min_flag} less/style.less css/style.min.css'.format(**locals()))
+        local('{lessc} {min_flag} {ver_flag} {source} {target}'.format(**locals()))
 

IPython/frontend/html/notebook/notebook/handlers.py

@@ -43,7 +43,7 @@ class NamedNotebookHandler(IPythonHandler):
         nbm = self.notebook_manager
         if not nbm.notebook_exists(notebook_id):
             raise web.HTTPError(404, u'Notebook does not exist: %s' % notebook_id)       
-        self.write(self.render_template('notebooks.html',
+        self.write(self.render_template('notebook.html',
             project=self.project,
             notebook_id=notebook_id,
             kill_kernel=False,

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

@@ -0,0 +1,8 @@
+/*This file contains any manual css for this page that needs to override the global styles.
+This is only required when different pages style the same element differently. This is just
+a hack to deal with our current css styles and no new styling should be added in this file.*/
+
+#ipython-main-app {
+    margin: 50px auto;
+    text-align: center;
+}

IPython/frontend/html/notebook/static/auth/less/login.less

@@ -0,0 +1 @@
+// Custom styles for login.html

IPython/frontend/html/notebook/static/auth/less/logout.less

@@ -0,0 +1,2 @@
+// Custom styles for logout.html
+

IPython/frontend/html/notebook/static/auth/less/style.less

@@ -0,0 +1,2 @@
+@import "../auth/less/login.less";
+@import "../auth/less/logout.less";

IPython/frontend/html/notebook/static/base/less/mixins.less

@@ -0,0 +1,11 @@
+// Mixin CSS classes
+
+.border-box-sizing {
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+}
+
+.corner-all {
+    border-radius: @corner_radius;
+}

IPython/frontend/html/notebook/static/base/less/page.less

@@ -68,10 +68,3 @@ input.ui-button {
 span#login_widget {
     float: right;
 }
-
-.border-box-sizing {
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-}
-

IPython/frontend/html/notebook/static/base/less/style.less

@@ -0,0 +1,4 @@
+@import "../base/less/variables.less";
+@import "../base/less/mixins.less";
+@import "../base/less/flexbox.less";
+@import "../base/less/page.less";

IPython/frontend/html/notebook/static/base/less/variables.less

@@ -0,0 +1,10 @@
+// Our customizations to bootstrap go here.
+
+@textColor:             @black;
+@baseFontSize:          13px;
+@baseLineHeight:        1.231;
+@monoFontFamily:		monospace;  // to allow user to customize their fonts
+
+// Our own global variables for all pages go here
+
+@corner_radius:					4px;

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

@@ -1,6 +0,0 @@
-
-#ipython-main-app {
-    height: 100px;
-    width: 350px;
-    margin: 50px auto;
-}

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

@@ -1,7 +0,0 @@
-
-#ipython-main-app {
-    height: 100px;
-    width: 200px;
-    margin: 50px auto;
-}
-

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

@@ -1,7 +1,7 @@
 /*
 Placeholder for custom user CSS
 
-mainly to be overridden in profile/static/css/custom.css
+mainly to be overridden in profile/static/custom/custom.css
 
 This will always be an empty file in IPython
 */

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

@@ -3,14 +3,14 @@
  *
  *
  * Placeholder for custom user javascript
- * mainly to be overridden in profile/static/js/custom.js
+ * mainly to be overridden in profile/static/custom/custom.js
  * This will always be an empty file in IPython
  *
- * User could add any javascript in the `profile/static/js/custom.js` file
+ * User could add any javascript in the `profile/static/custom/custom.js` file
  * (and should create it if it does not exist).
  * It will be executed by the ipython notebook at load time.
  *
- * Same thing with `profile/static/css/custom.css` to inject custom css into the notebook.
+ * Same thing with `profile/static/custom/custom.css` to inject custom css into the notebook.
  *
  * Example :
  *
@@ -34,10 +34,10 @@
  *  to load custom script into the notebook.
  *
  *    // to load the metadata ui extension example.
- *    $.getScript('/static/js/celltoolbarpresets/example.js');
+ *    $.getScript('/static/notebook/js/celltoolbarpresets/example.js');
  *    // or
  *    // to load the metadata ui extension to control slideshow mode / reveal js for nbconvert
- *    $.getScript('/static/js/celltoolbarpresets/slideshow.js');
+ *    $.getScript('/static/notebook/js/celltoolbarpresets/slideshow.js');
  *
  *
  * @module IPython

IPython/frontend/html/notebook/static/less/notebook.less

@@ -1,513 +0,0 @@
-/**
- * Primary styles
- *
- * Author: IPython Development Team
- */
-
-@import "variables.less";
-@import "highlight.less";
-
-body {
-    background-color:@notebook_background;
-}
-    
-body.notebook_app {
-    overflow: hidden;
-}
-
-blockquote {
-    border-left: 4px solid #DDD;
-    padding: 0 15px;
-    color: #777;
-}
-
-span#save_widget {
-    padding: 5px;
-    margin: 0px 0px 0px 300px;
-    display:inline-block;
-}
-
-span#checkpoint_status span#autosave_status {
-    font-size: small;
-}
-
-/*span#save_widget > span#autosave_status {
-    font-size: x-small;
-}
-*/
-span#notebook_name {
-    height: 1em;
-    line-height: 1em;
-    padding: 3px;
-    border: none;
-    font-size: 146.5%;
-}
-
-
-.ui-menubar-item .ui-button .ui-button-text {
-    padding: 0.4em 1.0em;
-    font-size: 100%;
-}
-
-.ui-menu {
-	.box-shadow(0px 6px 10px -1px #adadad);
-}
-
-.ui-menu .ui-menu-item a {
-    border: 1px solid transparent;
-    padding: 2px 1.6em;
-}
-
-.ui-menu .ui-menu-item a.ui-state-focus {
-    margin: 0;
-}
-
-.ui-menu hr {
-    margin: 0.3em 0;
-}
-
-#menubar_container {
-    position: relative;
-}
-
-#notification_area {
-    position: absolute;
-    right: 0px;
-    top: 0px;
-    height: 25px;
-    padding: 3px 0px;
-    padding-right: 3px;
-    z-index: 10;
-}
-
-.notification_widget{
-    float : right;
-    right: 0px;
-    top: 1px;
-    height: 25px;
-    padding: 3px 6px;
-    z-index: 10;
-}
-
-.toolbar {
-    padding: 3px 15px;
-    border-bottom: @borderwidth @border_color solid;
-
-    button {
-        margin-top:2px;
-        margin-bottom:2px;
-    }
-
-
-    select, label {
-        height : 19px;
-        vertical-align:middle;
-        margin-right:2px;
-        margin-bottom:0;
-        display: inline;
-        font-size: 92%;
-        margin-left:0.3em;
-        margin-right:0.3em;
-        padding: 0px;
-    }
-}
-
-.toolbar select{
-    width:auto;
-}
-
-
-#ipython-main-app {
-    width: 100%;
-    position: relative;
-    font-size: 110%;
-}
-
-span#quick_help_area {
-    position: static;
-    padding: 5px 0px;
-    margin: 0px 0px 0px 0px;
-}
-
-.help_string {
-    float: right;
-    width: 170px;
-    padding: 0px 5px;
-    text-align: left;
-    font-size: 85%;
-}
-
-.help_string_label {
-    float: right;
-    font-size: 85%;
-}
-
-div#notebook_panel {
-    margin: 0px 0px 0px 0px;
-    padding: 0px;
-}
-
-div#notebook {
-    overflow-y: scroll;
-    overflow-x: auto;
-    width: 100%;
-    /* This spaces the cell away from the edge of the notebook area */
-    padding: 5px 5px 15px 5px;
-    margin: 0px;
-}
-
-div#pager_splitter {
-    height: 8px;
-}
-
-#pager_container {
-    position : relative;
-}
-
-div#pager {
-    padding: 15px;
-    overflow: auto;
-    display: none;
-}
-
-div.ui-widget-content {
-    border: 1px solid @border_color;
-    outline: none;
-}
-
-.cell {
-    border: 1px solid transparent;
-    .vbox();
-
-    &.selected {
-        .corner-all;
-        border : thin @border_color solid;
-    }
-}
-
-div.cell {
-    width: 100%;
-    padding: 5px 5px 5px 0px;
-    /* This acts as a spacer between cells, that is outside the border */
-    margin: 2px 0px 2px 0px;
-    outline: none;
-}
-
-div.code_cell {
-}
-
-/* any special styling for code cells that are currently running goes here */
-div.code_cell.running {
-}
-
-div.prompt {
-    /* This needs to be wide enough for 3 digit prompt numbers: In[100]: */
-    width: 11ex;
-    /* This 0.4em is tuned to match the padding on the CodeMirror editor. */
-    padding: 0.4em;
-    margin: 0px;
-    font-family: monospace;
-    text-align: right;
-    /* This has to match that of the the CodeMirror class line-height below */	
-    line-height: 1.231;
-}
-
-div.input {
-    page-break-inside: avoid;
-    .hbox();
-}
-
-/* input_area and input_prompt must match in top border and margin for alignment */
-div.input_area {
-    /*color: @fontBaseColor;*/
-    border: 1px solid @light_border_color;
-    .corner-all;
-    background: @cell_background;
-}
-
-div.input_prompt {
-    color: navy;
-    border-top: 1px solid transparent;
-}
-
-div.output_wrapper {
-    /* This is a spacer between the input and output of each cell */
-    margin-top: 5px;
-    margin-left: 5px;
-    /* FF needs explicit width to stretch */
-    width: 100%;
-    /* this position must be relative to enable descendents to be absolute within it */
-    position: relative;
-}
-
-/* class for the output area when it should be height-limited */
-div.output_scroll {
-  /* ideally, this would be max-height, but FF barfs all over that */
-  height: 24em;
-  /* FF needs this *and the wrapper* to specify full width, or it will shrinkwrap */
-  width: 100%;
-
-  overflow: auto;
-  .corner-all;
-  .box-shadow(inset 0 2px 8px rgba(0, 0, 0, .8));
-}
-
-/* output div while it is collapsed */
-div.output_collapsed {
-  margin-right: 5px;
-}
-
-div.out_prompt_overlay {
-  height: 100%;
-  padding: 0px;
-  position: absolute;
-  .corner-all;
-}
-
-div.out_prompt_overlay:hover {
-  /* use inner shadow to get border that is computed the same on WebKit/FF */
-  .box-shadow(inset 0 0 1px #000);
-  background: rgba(240, 240, 240, 0.5);
-}
-
-div.output_prompt {
-    color: darkred;
-    /* 5px right shift to account for margin in parent container */
-    margin: 0 5px 0 -5px;
-}
-
-/* This class is the outer container of all output sections. */
-div.output_area {
-    padding: 0px;
-    page-break-inside: avoid;
-    .hbox();
-}
-
-	
-/* This is needed to protect the pre formating from global settings such
-   as that of bootstrap */
-div.output_area pre {	
-    font-family: monospace;	
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font-size: 100%;
-    vertical-align: baseline;
-    color: black;
-}
-
-/* This class is for the output subarea inside the output_area and after
-   the prompt div. */
-div.output_subarea {
-    padding: 0.44em 0.4em 0.4em 1px;
-    .box-flex1();
-}
-
-/* The rest of the output_* classes are for special styling of the different
-   output types */
-
-/* all text output has this class: */
-div.output_text {
-    text-align: left;
-    color: @fontBaseColor;
-    font-family: monospace;
-    /* This has to match that of the the CodeMirror class line-height below */	
-    line-height: 1.231;
-}
-
-/* stdout/stderr are 'text' as well as 'stream', but pyout/pyerr are *not* streams */
-div.output_stream {
-    padding-top: 0.0em;
-    padding-bottom: 0.0em;
-}
-div.output_stdout {
-}
-div.output_stderr {
-    background: #fdd; /* very light red background for stderr */
-}
-
-div.output_latex {
-    text-align: left;
-}
-
-div.output_html {
-}
-
-div.output_png {
-}
-
-div.output_jpeg {
-}
-
-div.text_cell {
-    padding: 5px 5px 5px 5px;
-}
-
-div.text_cell_input {
-    color: @fontBaseColor;
-    border: 1px solid @light_border_color;
-    .corner-all;
-    background: @cell_background;
-}
-
-div.text_cell_render {
-    /*font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;*/
-    outline: none;
-    resize: none;
-    width:  inherit;
-    border-style: none;
-    padding: 5px;
-    color: @fontBaseColor;
-}
-
-/* The following gets added to the <head> if it is detected that the user has a
- * monospace font with inconsistent normal/bold/italic height.  See
- * notebookmain.js.  Such fonts will have keywords vertically offset with
- * respect to the rest of the text.  The user should select a better font.
- * See: https://github.com/ipython/ipython/issues/1503
- *
- * .CodeMirror span {
- *      vertical-align: bottom;
- * }
- */
-
-.CodeMirror {
-    line-height: 1.231;  /* Changed from 1em to our global default */
-	height: auto;     /* Changed to auto to autogrow */
-	background: none;  /* Changed from white to allow our bg to show through */
-}
-
-.CodeMirror-scroll {
-    /*  The CodeMirror docs are a bit fuzzy on if overflow-y should be hidden or visible.*/
-    /*  We have found that if it is visible, vertical scrollbars appear with font size changes.*/
-    overflow-y: hidden;
-    overflow-x: auto; /* Changed from auto to remove scrollbar */
-}
-
-.CodeMirror-lines {
-	/* In CM2, this used to be 0.4em, but in CM3 it went to 4px. We need the em value because */
-	/* we have set a different line-height and want this to scale with that. */
-	padding: 0.4em;
-}
-
-.CodeMirror pre {
-	/* In CM3 this went to 4px from 0 in CM2. We need the 0 value because of how we size */
-	/* .CodeMirror-lines */
-	padding: 0;
-}
-
-/* CSS font colors for translated ANSI colors. */
-
-
-.ansiblack {color: @fontBaseColor;}
-.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: hidden;
-    border: 1px solid @border_color;
-	.corner-all;
-	.box-shadow(0px 6px 10px -1px #adadad);
-}
-
-.completions select {
-    background: white;
-    outline: none;
-    border: none;
-    padding: 0px;
-    margin: 0px;
-    overflow: auto;
-    font-family: monospace;
-	font-size: 110%;
-    color: @fontBaseColor;
-}
-
-.completions select option.context {
-  color: @blueDark;
-}
-
-pre.dialog {
-    background-color: @cell_background;
-    border: 1px solid #ddd;
-    .corner-all;
-    padding: 0.4em;
-    padding-left: 2em;
-}
-
-p.dialog {
-    padding : 0.2em;
-}
-
-.shortcut_key {
-    display: inline-block;
-    width: 15ex;
-    text-align: right;
-    font-family: monospace;
-}
-
-.shortcut_descr {
-}
-
-/* Word-wrap output correctly.  This is the CSS3 spelling, though Firefox seems
-   to not honor it correctly.  Webkit browsers (Chrome, rekonq, Safari) do.
- */
-pre, code, kbd, samp { white-space: pre-wrap; }
-
-#fonttest {
-    font-family: monospace;
-}
-
-.js-error {
-    color: darkred;
-}
-
-a {
-  text-decoration: underline;
-}
-
-p {
-
-margin-bottom:0;
-
-}
-
-a.heading-anchor:link, a.heading-anchor:visited {
-  text-decoration: none;
-  color: inherit;
-}
-
-/* raw_input styles */
-
-div.raw_input {
-  padding-top: 0px;
-  padding-bottom: 0px;
-  height: 1em;
-  line-height: 1em;
-  font-family: monospace;
-}
-span.input_prompt {
-  font-family: inherit;
-}
-input.raw_input {
-  font-family: inherit;
-  font-size: inherit;
-  color: inherit;
-  width: auto;
-  margin: -2px 0px 0px 1px;
-  padding-left: 1px;
-  padding-top: 2px;
-  height: 1em;
-}
-
-p.p-space {
-  margin-bottom: 10px;
-}
-

IPython/frontend/html/notebook/static/less/style.less

@@ -1,6 +0,0 @@
-@import "bootstrap-custom.less";
-@import "variables.less";
-@import "flexible-box-model.less";
-@import "notebook.less";
-@import "renderedhtml.less";
-@import "tooltip.less";

IPython/frontend/html/notebook/static/less/variables.less

@@ -1,18 +0,0 @@
-@corner_radius: 4px;
-@notebook_background : white;
-@cell_selected_background: darken(@notebook_background, 2%);
-@cell_background: darken(@notebook_background, 3.2%);
-@border_color: darken(@cell_selected_background, 31%);
-@light_border_color: darken(@cell_selected_background, 17%);
-@borderwidth : 1px;
-@fontBaseColor : black;
-
-
-
-
-
-// utilities mixins
-
-.corner-all {
-    border-radius:@corner_radius;
-}

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

@@ -0,0 +1,9 @@
+/*This file contains any manual css for this page that needs to override the global styles.
+This is only required when different pages style the same element differently. This is just
+a hack to deal with our current css styles and no new styling should be added in this file.*/
+
+#ipython-main-app {
+    width: 100%;
+    position: relative;
+    font-size: 110%;
+}

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

@@ -44,7 +44,7 @@ $(document).ready(function () {
     IPython.page = new IPython.Page();
     IPython.layout_manager = new IPython.LayoutManager();
     IPython.pager = new IPython.Pager('div#pager', 'div#pager_splitter');
-    IPython.quick_help = new IPython.QuickHelp('span#quick_help_area');
+    IPython.quick_help = new IPython.QuickHelp();
     IPython.login_widget = new IPython.LoginWidget('span#login_widget',{baseProjectUrl:baseProjectUrl});
     IPython.notebook = new IPython.Notebook('div#notebook',{baseProjectUrl:baseProjectUrl, read_only:IPython.read_only});
     IPython.save_widget = new IPython.SaveWidget('span#save_widget');

IPython/frontend/html/notebook/static/notebook/less/ansicolors.less

@@ -0,0 +1,13 @@
+/* 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;}
+

IPython/frontend/html/notebook/static/notebook/less/cell.less

@@ -0,0 +1,29 @@
+.cell {
+    border: 1px solid transparent;
+    .vbox();
+
+    &.selected {
+        .corner-all;
+        border : thin @border_color solid;
+    }
+}
+
+div.cell {
+    width: 100%;
+    padding: 5px 5px 5px 0px;
+    /* This acts as a spacer between cells, that is outside the border */
+    margin: 2px 0px 2px 0px;
+    outline: none;
+}
+
+div.prompt {
+    /* This needs to be wide enough for 3 digit prompt numbers: In[100]: */
+    width: 11ex;
+    /* This 0.4em is tuned to match the padding on the CodeMirror editor. */
+    padding: 0.4em;
+    margin: 0px;
+    font-family: @monoFontFamily;
+    text-align: right;
+    /* This has to match that of the the CodeMirror class line-height below */	
+    line-height: @baseLineHeight;
+}

IPython/frontend/html/notebook/static/notebook/less/codecell.less

@@ -0,0 +1,69 @@
+div.code_cell {
+}
+
+/* any special styling for code cells that are currently running goes here */
+div.code_cell.running {
+}
+
+div.input {
+    page-break-inside: avoid;
+    .hbox();
+}
+
+/* input_area and input_prompt must match in top border and margin for alignment */
+div.input_area {
+    border: 1px solid @light_border_color;
+    .corner-all;
+    background: @cell_background;
+}
+
+div.input_prompt {
+    color: navy;
+    border-top: 1px solid transparent;
+}
+
+div.output_wrapper {
+    /* This is a spacer between the input and output of each cell */
+    margin-top: 5px;
+    margin-left: 5px;
+    /* FF needs explicit width to stretch */
+    width: 100%;
+    /* this position must be relative to enable descendents to be absolute within it */
+    position: relative;
+}
+
+/* class for the output area when it should be height-limited */
+div.output_scroll {
+  /* ideally, this would be max-height, but FF barfs all over that */
+  height: 24em;
+  /* FF needs this *and the wrapper* to specify full width, or it will shrinkwrap */
+  width: 100%;
+
+  overflow: auto;
+  .corner-all;
+  .box-shadow(inset 0 2px 8px rgba(0, 0, 0, .8));
+}
+
+/* output div while it is collapsed */
+div.output_collapsed {
+  margin-right: 5px;
+}
+
+div.out_prompt_overlay {
+  height: 100%;
+  padding: 0px;
+  position: absolute;
+  .corner-all;
+}
+
+div.out_prompt_overlay:hover {
+  /* use inner shadow to get border that is computed the same on WebKit/FF */
+  .box-shadow(inset 0 0 1px #000);
+  background: rgba(240, 240, 240, 0.5);
+}
+
+div.output_prompt {
+    color: darkred;
+    /* 5px right shift to account for margin in parent container */
+    margin: 0 5px 0 -5px;
+}

IPython/frontend/html/notebook/static/notebook/less/codemirror.less

@@ -0,0 +1,50 @@
+/* The following gets added to the <head> if it is detected that the user has a
+ * monospace font with inconsistent normal/bold/italic height.  See
+ * notebookmain.js.  Such fonts will have keywords vertically offset with
+ * respect to the rest of the text.  The user should select a better font.
+ * See: https://github.com/ipython/ipython/issues/1503
+ *
+ * .CodeMirror span {
+ *      vertical-align: bottom;
+ * }
+ */
+
+.CodeMirror {
+    line-height: @baseLineHeight;  /* Changed from 1em to our global default */
+	height: auto;     /* Changed to auto to autogrow */
+	background: none;  /* Changed from white to allow our bg to show through */
+}
+
+.CodeMirror-scroll {
+    /*  The CodeMirror docs are a bit fuzzy on if overflow-y should be hidden or visible.*/
+    /*  We have found that if it is visible, vertical scrollbars appear with font size changes.*/
+    overflow-y: hidden;
+    overflow-x: auto; /* Changed from auto to remove scrollbar */
+}
+
+.CodeMirror-lines {
+	/* In CM2, this used to be 0.4em, but in CM3 it went to 4px. We need the em value because */
+	/* we have set a different line-height and want this to scale with that. */
+	padding: 0.4em;
+}
+
+.CodeMirror-linenumber {
+	// This is needed to fine tune the position of the line numbers because we use the 0.4em
+	// spacing in various places. Fine tuned to look right.
+  	padding: 0 8px 0 4px;
+}
+
+.CodeMirror-gutters {
+  // This is needed because our cell has rounded corners, otherwise the gutter area square
+  // corner cuts into the rounded cell border.
+  border-bottom-left-radius: @corner_radius;
+  border-top-left-radius: @corner_radius;
+}
+
+.CodeMirror pre {
+	/* In CM3 this went to 4px from 0 in CM2. We need the 0 value because of how we size */
+	/* .CodeMirror-lines */
+	padding: 0;
+	border: 0;
+	.border-radius(0)
+}

IPython/frontend/html/notebook/static/notebook/less/completer.less

@@ -0,0 +1,24 @@
+.completions {
+    position: absolute;
+    z-index: 10;
+    overflow: hidden;
+    border: 1px solid @border_color;
+	.corner-all;
+	.box-shadow(0px 6px 10px -1px #adadad);
+}
+
+.completions select {
+    background: white;
+    outline: none;
+    border: none;
+    padding: 0px;
+    margin: 0px;
+    overflow: auto;
+    font-family: @monoFontFamily;
+	font-size: 110%;
+    color: @textColor;
+}
+
+.completions select option.context {
+  color: @blueDark;
+}

IPython/frontend/html/notebook/static/notebook/less/menubar.less

@@ -0,0 +1,25 @@
+.ui-menubar-item .ui-button .ui-button-text {
+    padding: 0.4em 1.0em;
+    font-size: 100%;
+}
+
+.ui-menu {
+	.box-shadow(0px 6px 10px -1px #adadad);
+}
+
+.ui-menu .ui-menu-item a {
+    border: 1px solid transparent;
+    padding: 2px 1.6em;
+}
+
+.ui-menu .ui-menu-item a.ui-state-focus {
+    margin: 0;
+}
+
+.ui-menu hr {
+    margin: 0.3em 0;
+}
+
+#menubar_container {
+    position: relative;
+}

IPython/frontend/html/notebook/static/notebook/less/notebook.less

@@ -0,0 +1,71 @@
+
+body {
+    background-color:	@bodyBackground;
+}
+    
+body.notebook_app {
+    overflow: hidden;
+}
+
+span#notebook_name {
+    height: 1em;
+    line-height: 1em;
+    padding: 3px;
+    border: none;
+    font-size: 146.5%;
+}
+
+div#notebook_panel {
+    margin: 0px 0px 0px 0px;
+    padding: 0px;
+}
+
+div#notebook {
+    overflow-y: scroll;
+    overflow-x: auto;
+    width: 100%;
+    /* This spaces the cell away from the edge of the notebook area */
+    padding: 5px 5px 15px 5px;
+    margin: 0px;
+}
+
+div.ui-widget-content {
+    border: 1px solid @border_color;
+    outline: none;
+}
+
+pre.dialog {
+    background-color: @cell_background;
+    border: 1px solid #ddd;
+    .corner-all;
+    padding: 0.4em;
+    padding-left: 2em;
+}
+
+p.dialog {
+    padding : 0.2em;
+}
+
+/* Word-wrap output correctly.  This is the CSS3 spelling, though Firefox seems
+   to not honor it correctly.  Webkit browsers (Chrome, rekonq, Safari) do.
+ */
+pre, code, kbd, samp { white-space: pre-wrap; }
+
+#fonttest {
+    font-family: @monoFontFamily;
+}
+
+a {
+	text-decoration: underline;
+}
+
+p {
+	margin-bottom:0;
+}
+
+a.heading-anchor:link, a.heading-anchor:visited {
+  text-decoration: none;
+  outline: none;
+  color: inherit;
+}
+

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

@@ -0,0 +1,9 @@
+#notification_area {
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    height: 25px;
+    padding: 3px 0px;
+    padding-right: 3px;
+    z-index: 10;
+}

IPython/frontend/html/notebook/static/notebook/less/notificationwidget.less

@@ -0,0 +1,8 @@
+.notification_widget{
+    float : right;
+    right: 0px;
+    top: 1px;
+    height: 25px;
+    padding: 3px 6px;
+    z-index: 10;
+}

IPython/frontend/html/notebook/static/notebook/less/outputarea.less

@@ -0,0 +1,96 @@
+/* This class is the outer container of all output sections. */
+div.output_area {
+    padding: 0px;
+    page-break-inside: avoid;
+    .hbox();
+}
+
+
+/* This is needed to protect the pre formating from global settings such
+   as that of bootstrap */
+div.output_area pre {	
+    font-family: @monoFontFamily;	
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    vertical-align: baseline;
+    color: black;
+    background-color: transparent;
+    .border-radius(0);
+    line-height: inherit;
+}
+
+/* This class is for the output subarea inside the output_area and after
+   the prompt div. */
+div.output_subarea {
+    padding: 0.44em 0.4em 0.4em 1px;
+    .box-flex1();
+}
+
+/* The rest of the output_* classes are for special styling of the different
+   output types */
+
+/* all text output has this class: */
+div.output_text {
+    text-align: left;
+    color: @textColor;
+    font-family: @monoFontFamily;
+    /* This has to match that of the the CodeMirror class line-height below */	
+    line-height: @baseLineHeight;
+}
+
+/* stdout/stderr are 'text' as well as 'stream', but pyout/pyerr are *not* streams */
+div.output_stream {
+    padding-top: 0.0em;
+    padding-bottom: 0.0em;
+}
+div.output_stdout {
+}
+div.output_stderr {
+    background: #fdd; /* very light red background for stderr */
+}
+
+div.output_latex {
+    text-align: left;
+}
+
+div.output_html {
+}
+
+div.output_png {
+}
+
+div.output_jpeg {
+}
+
+.js-error {
+    color: darkred;
+}
+
+/* raw_input styles */
+
+div.raw_input {
+  padding-top: 0px;
+  padding-bottom: 0px;
+  height: 1em;
+  line-height: 1em;
+  font-family: @monoFontFamily;
+}
+span.input_prompt {
+  font-family: inherit;
+}
+input.raw_input {
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  width: auto;
+  margin: -2px 0px 0px 1px;
+  padding-left: 1px;
+  padding-top: 2px;
+  height: 1em;
+}
+
+p.p-space {
+  margin-bottom: 10px;
+}

IPython/frontend/html/notebook/static/notebook/less/pager.less

@@ -0,0 +1,21 @@
+div#pager_splitter {
+    height: 8px;
+}
+
+#pager_container {
+    position : relative;
+}
+
+div#pager {
+    padding: 15px;
+    overflow: auto;
+    display: none;
+	
+	pre {
+		font-size:			@baseFontSize;
+		line-height: 		@baseLineHeight;
+		color: 				@textColor;
+		background-color: 	@cell_background;
+		padding:			0.4em;
+	}
+}

IPython/frontend/html/notebook/static/notebook/less/quickhelp.less

@@ -0,0 +1,9 @@
+.shortcut_key {
+    display: inline-block;
+    width: 15ex;
+    text-align: right;
+    font-family: @monoFontFamily;
+}
+
+.shortcut_descr {
+}

IPython/frontend/html/notebook/static/notebook/less/renderedhtml.less

@@ -31,6 +31,14 @@
         margin: 1em 2em;
     }
 
+	pre, code {
+		border:				0;
+		background-color:	@bodyBackground;
+		color: 				@textColor;
+		font-size:			100%;
+		padding:			0px;
+	}
+
     blockquote {
         margin: 1em 2em;
     }

IPython/frontend/html/notebook/static/notebook/less/savewidget.less

@@ -0,0 +1,9 @@
+span#save_widget {
+    padding: 5px;
+    margin: 0px 0px 0px 300px;
+    display:inline-block;
+}
+
+span#checkpoint_status span#autosave_status {
+    font-size: small;
+}

IPython/frontend/html/notebook/static/notebook/less/style.less

@@ -0,0 +1,20 @@
+@import "variables.less";
+@import "ansicolors.less";
+@import "cell.less";
+@import "celltoolbar.less";
+@import "codecell.less";
+@import "codemirror.less";
+@import "completer.less";
+@import "highlight.less";
+@import "menubar.less";
+@import "notebook.less";
+@import "notificationarea.less";
+@import "notificationwidget.less";
+@import "outputarea.less";
+@import "pager.less";
+@import "quickhelp.less";
+@import "renderedhtml.less";
+@import "savewidget.less";
+@import "textcell.less";
+@import "toolbar.less";
+@import "tooltip.less";

IPython/frontend/html/notebook/static/notebook/less/textcell.less

@@ -0,0 +1,21 @@
+div.text_cell {
+    padding: 5px 5px 5px 5px;
+}
+
+div.text_cell_input {
+    color: @textColor;
+    border: 1px solid @light_border_color;
+    .corner-all;
+    background: @cell_background;
+}
+
+div.text_cell_render {
+    /*font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;*/
+    outline: none;
+    resize: none;
+    width:  inherit;
+    border-style: none;
+    padding: 5px;
+    color: @textColor;
+}
+

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

@@ -0,0 +1,26 @@
+.toolbar {
+    padding: 3px 15px;
+    border-bottom: @border_width @border_color solid;
+
+    button {
+        margin-top:2px;
+        margin-bottom:2px;
+    }
+
+
+    select, label {
+        height : 19px;
+        vertical-align:middle;
+        margin-right:2px;
+        margin-bottom:0;
+        display: inline;
+        font-size: 92%;
+        margin-left:0.3em;
+        margin-right:0.3em;
+        padding: 0px;
+    }
+}
+
+.toolbar select{
+    width:auto;
+}

IPython/frontend/html/notebook/static/notebook/less/tooltip.less

@@ -101,12 +101,12 @@
     background-color: @cell_background;
 
     overflow : visible;
-    border: @border_color @borderwidth solid;
+    border: @border_color @border_width solid;
     outline: none;
     padding: 3px;
     margin: 0px;
     padding-left:7px;
-    font-family: monospace;
+    font-family: @monoFontFamily;
     min-height:50px;
 
     .dropshadow;
@@ -118,7 +118,15 @@
     position: absolute;
 
 	z-index: 2;
-
+	
+	.tooltiptext {
+		pre {
+			border: 0;
+			.border-radius(0);
+			font-size: 100%;
+			background-color: @cell_background;
+		}
+	}
 }
 
 .pretooltiparrow {
@@ -134,7 +142,7 @@
 
 .pretooltiparrow:before {
   background-color : @cell_background;
-  border : @borderwidth @border_color solid;
+  border : @border_width @border_color solid;
   z-index:11;
   content: "";
   position: absolute;

IPython/frontend/html/notebook/static/notebook/less/variables.less

@@ -0,0 +1,9 @@
+
+// Our own variables for this page
+
+@cell_selected_background: 		darken(@bodyBackground, 2%);
+@cell_background: 				darken(@bodyBackground, 3.2%);
+@border_color:					darken(@cell_selected_background, 31%);
+@light_border_color:			darken(@cell_selected_background, 17%);
+@border_width:					1px;
+

IPython/frontend/html/notebook/static/style/style.less

@@ -0,0 +1,16 @@
+// Bootstrap
+@import "../components/bootstrap/less/bootstrap.less";
+
+// base
+@import "../base/less/style.less";
+
+// auth
+@import "../auth/less/style.less";
+
+// tree
+@import "../tree/less/style.less";
+
+// notebook
+@import "../notebook/less/style.less";
+
+

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

@@ -0,0 +1,8 @@
+/*This file contains any manual css for this page that needs to override the global styles.
+This is only required when different pages style the same element differently. This is just
+a hack to deal with our current css styles and no new styling should be added in this file.*/
+
+#ipython-main-app {
+    width: 920px;
+    margin: 30px auto 0px auto;
+}

IPython/frontend/html/notebook/static/tree/less/style.less

@@ -0,0 +1,2 @@
+@import "../tree/less/altuploadform.less";
+@import "../tree/less/tree.less";

IPython/frontend/html/notebook/static/tree/less/tree.less

@@ -5,11 +5,6 @@
  * Author: IPython Development Team
  */
 
-#ipython-main-app {
-    width: 920px;
-    margin: 30px auto 0px auto;
-}
-
 #tabs {
     border-style: none;
 }

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

@@ -1,16 +1,14 @@
-{% extends "base.html" %}
+{% extends "page.html" %}
+
 
 {% block stylesheet %}
-
-<link rel="stylesheet" href="{{static_url("css/login.css") }}" type="text/css"/>
-
+{{super()}}
+<link rel="stylesheet" href="{{ static_url("auth/css/override.css") }}" type="text/css" />
 {% endblock %}
 
-
 {% block login_widget %}
 {% endblock %}
 
-
 {% block site %}
 
 <div id="ipython-main-app">
@@ -37,6 +35,6 @@
 
 {% block script %}
 
-<script src="{{static_url("js/loginmain.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{static_url("auth/js/loginmain.js") }}" type="text/javascript" charset="utf-8"></script>
 
 {% endblock %}

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

@@ -1,12 +1,10 @@
-{% extends "base.html" %}
+{% extends "page.html" %}
 
 {% block stylesheet %}
-
-<link rel="stylesheet" href="{{static_url("css/logout.css") }}" type="text/css"/>
-
+{{super()}}
+<link rel="stylesheet" href="{{ static_url("auth/css/override.css") }}" type="text/css" />
 {% endblock %}
 
-
 {% block login_widget %}
 {% endblock %}
 
@@ -35,6 +33,6 @@
 
 {% block script %}
 
-<script src="{{static_url("js/logoutmain.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{static_url("auth/js/logoutmain.js") }}" type="text/javascript" charset="utf-8"></script>
 
 {% endblock %}

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

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "page.html" %}
 
 {% block stylesheet %}
 
@@ -13,10 +13,10 @@ window.mathjax_url = "{{mathjax_url}}";
 
 <link rel="stylesheet" href="{{ static_url("components/codemirror/lib/codemirror.css") }}">
 
-<link rel="stylesheet" href="{{ static_url("css/celltoolbar.css") }}" type="text/css" />
-
 {{super()}}
 
+<link rel="stylesheet" href="{{ static_url("notebook/css/override.css") }}" type="text/css" />
+
 {% endblock %}
 
 {% block params %}
@@ -196,7 +196,7 @@ class="notebook_app"
 <script src="{{ static_url("components/codemirror/addon/mode/loadmode.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("components/codemirror/addon/mode/multiplex.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("components/codemirror/addon/mode/overlay.js") }}" charset="utf-8"></script>
-<script src="{{ static_url("js/codemirror-ipython.js") }}" charset="utf-8"></script>
+<script src="{{ static_url("notebook/js/codemirror-ipython.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("components/codemirror/mode/htmlmixed/htmlmixed.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("components/codemirror/mode/xml/xml.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("components/codemirror/mode/javascript/javascript.js") }}" charset="utf-8"></script>
@@ -210,33 +210,33 @@ class="notebook_app"
 
 <script src="{{ static_url("dateformat/date.format.js") }}" charset="utf-8"></script>
 
-<script src="{{ static_url("js/events.js") }}" type="text/javascript" charset="utf-8"></script>
-<script src="{{ static_url("js/utils.js") }}" type="text/javascript" charset="utf-8"></script>
-<script src="{{ static_url("js/layoutmanager.js") }}" type="text/javascript" charset="utf-8"></script>
-<script src="{{ static_url("js/mathjaxutils.js") }}" type="text/javascript" charset="utf-8"></script>
-<script src="{{ static_url("js/outputarea.js") }}" type="text/javascript" charset="utf-8"></script>
-<script src="{{ static_url("js/cell.js") }}" type="text/javascript" charset="utf-8"></script>
-<script src="{{ static_url("js/celltoolbar.js") }}" type="text/javascript" charset="utf-8"></script>
-<script src="{{ static_url("js/codecell.js") }}" type="text/javascript" charset="utf-8"></script>
-<script src="{{ static_url("js/completer.js") }}" type="text/javascript" charset="utf-8"></script>
-<script src="{{ static_url("js/textcell.js") }}" type="text/javascript" charset="utf-8"></script>
-<script src="{{ static_url("js/kernel.js") }}" type="text/javascript" charset="utf-8"></script>
-<script src="{{ static_url("js/savewidget.js") }}" type="text/javascript" charset="utf-8"></script>
-<script src="{{ static_url("js/quickhelp.js") }}" type="text/javascript" charset="utf-8"></script>
-<script src="{{ static_url("js/pager.js") }}" type="text/javascript" charset="utf-8"></script>
-<script src="{{ static_url("js/menubar.js") }}" type="text/javascript" charset="utf-8"></script>
-<script src="{{ static_url("js/toolbar.js") }}" type="text/javascript" charset="utf-8"></script>
-<script src="{{ static_url("js/maintoolbar.js") }}" type="text/javascript" charset="utf-8"></script>
-<script src="{{ static_url("js/notebook.js") }}" type="text/javascript" charset="utf-8"></script>
-<script src="{{ static_url("js/notificationwidget.js") }}" type="text/javascript" charset="utf-8"></script>
-<script src="{{ static_url("js/notificationarea.js") }}" type="text/javascript" charset="utf-8"></script>
-<script src="{{ static_url("js/tooltip.js") }}" type="text/javascript" charset="utf-8"></script>
-<script src="{{ static_url("js/config.js") }}" type="text/javascript" charset="utf-8"></script>
-<script src="{{ static_url("js/notebookmain.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("base/js/events.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("base/js/utils.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("notebook/js/layoutmanager.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("notebook/js/mathjaxutils.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("notebook/js/outputarea.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("notebook/js/cell.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("notebook/js/celltoolbar.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("notebook/js/codecell.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("notebook/js/completer.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("notebook/js/textcell.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("services/kernels/js/kernel.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("notebook/js/savewidget.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("notebook/js/quickhelp.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("notebook/js/pager.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("notebook/js/menubar.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("notebook/js/toolbar.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("notebook/js/maintoolbar.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("notebook/js/notebook.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("notebook/js/notificationwidget.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("notebook/js/notificationarea.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("notebook/js/tooltip.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("notebook/js/config.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("notebook/js/main.js") }}" type="text/javascript" charset="utf-8"></script>
 
-<script src="{{ static_url("js/contexthint.js") }}" charset="utf-8"></script>
+<script src="{{ static_url("notebook/js/contexthint.js") }}" charset="utf-8"></script>
 
-<script src="{{ static_url("js/celltoolbarpresets/default.js") }}" type="text/javascript" charset="utf-8"></script>
-<script src="{{ static_url("js/celltoolbarpresets/slideshow.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("notebook/js/celltoolbarpresets/default.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("notebook/js/celltoolbarpresets/slideshow.js") }}" type="text/javascript" charset="utf-8"></script>
 
 {% endblock %}

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

@@ -10,20 +10,20 @@
     <meta charset="utf-8">
 
     <title>{% block title %}IPython Notebook{% endblock %}</title>
+	<link rel="shortcut icon" type="image/x-icon" href="{{static_url("base/images/favicon.ico") }}">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <link rel="stylesheet" href="{{static_url("jquery/css/themes/base/jquery-ui.min.css") }}" type="text/css" />
-    <link rel="stylesheet" href="{{static_url("css/boilerplate.css") }}" type="text/css" />
-    <link rel="stylesheet" href="{{static_url("css/page.css") }}" type="text/css"/>
+    <link rel="stylesheet" href="{{static_url("base/css/boilerplate.css") }}" type="text/css" />
     {% block stylesheet %}
     {% block lesscss %}
-        {% if use_less %}
-            <link rel="stylesheet/less" href="{{ static_url("less/style.less") }}" type="text/css" />
-        {% else %}
-            <link rel="stylesheet" href="{{ static_url("css/style.min.css") }}" type="text/css"/>
-        {% endif %}
-    {% endblock lesscss%}
+	    {% if use_less %}
+	        <link rel="stylesheet/less" href="{{ static_url("style/style.less") }}" type="text/css" />
+	    {% else %}
+	        <link rel="stylesheet" href="{{ static_url("style/style.min.css") }}" type="text/css"/>
+	    {% endif %}
     {% endblock %}
-    <link rel="stylesheet" href="{{ static_url("css/custom.css") }}" type="text/css" />
+    {% endblock %}
+    <link rel="stylesheet" href="{{ static_url("custom/custom.css") }}" type="text/css" />
 
 
     {% block meta %}
@@ -34,7 +34,7 @@
 <body {% block params %}{% endblock %}>
 
 <div id="header">
-    <span id="ipython_notebook"><div><a href="{{base_project_url}}" alt='dashboard'><img src='{{static_url("ipynblogo.png") }}' alt='IPython Notebook'/></a></div></span>
+    <span id="ipython_notebook"><div><a href="{{base_project_url}}" alt='dashboard'><img src='{{static_url("base/images/ipynblogo.png") }}' alt='IPython Notebook'/></a></div></span>
 
     {% block login_widget %}
 
@@ -59,9 +59,9 @@
 
 <script src="{{static_url("jquery/js/jquery-1.7.1.min.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{static_url("jquery/js/jquery-ui.min.js") }}" type="text/javascript" charset="utf-8"></script>
-<script src="{{static_url("js/namespace.js") }}" type="text/javascript" charset="utf-8"></script>
-<script src="{{static_url("js/page.js") }}" type="text/javascript" charset="utf-8"></script>
-<script src="{{static_url("js/loginwidget.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{static_url("base/js/namespace.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{static_url("base/js/page.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{static_url("auth/js/loginwidget.js") }}" type="text/javascript" charset="utf-8"></script>
 
 {% block script %}
     {% if use_less %}
@@ -69,7 +69,7 @@
     {% endif %}
 {% endblock %}
 
-<script src="{{static_url("js/custom.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{static_url("custom/custom.js") }}" type="text/javascript" charset="utf-8"></script>
 
 </body>
 

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

@@ -1,14 +1,12 @@
-{% extends "base.html" %}
+{% extends "page.html" %}
 
 {% block title %}IPython Dashboard{% endblock %}
 
-{% block stylesheet %}
-    {{super()}}
-    <link rel="stylesheet" href="{{static_url("css/alternateuploadform.css") }}" type="text/css" />
-    <link rel="stylesheet" href="{{static_url("css/style.min.css") }}" type="text/css" />
-    <link rel="stylesheet" href="{{static_url("css/projectdashboard.css") }}" type="text/css" />
-{% endblock %}
 
+{% block stylesheet %}
+{{super()}}
+<link rel="stylesheet" href="{{ static_url("tree/css/override.css") }}" type="text/css" />
+{% endblock %}
 
 {% block params %}
 
@@ -84,7 +82,7 @@ data-read-only={{read_only}}
 
 {% block script %}
     {{super()}}
-    <script src="{{static_url("js/notebooklist.js") }}" type="text/javascript" charset="utf-8"></script>
-    <script src="{{static_url("js/clusterlist.js") }}" type="text/javascript" charset="utf-8"></script>
-    <script src="{{static_url("js/projectdashboardmain.js") }}" type="text/javascript" charset="utf-8"></script>
+    <script src="{{static_url("tree/js/notebooklist.js") }}" type="text/javascript" charset="utf-8"></script>
+    <script src="{{static_url("tree/js/clusterlist.js") }}" type="text/javascript" charset="utf-8"></script>
+    <script src="{{static_url("tree/js/main.js") }}" type="text/javascript" charset="utf-8"></script>
 {% endblock %}