Further work on the toolbar UI.

* Cell type selection box is wired up and styled.
* New View menu that allows toolbar/header to be toggled.

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

@@ -61,6 +61,10 span#notebook_name {
     padding: 3px 15px;
 }
 
+#cell_type {
+    font-size: 85%;
+}
+
 span#quick_help_area {
     position: static;
     padding: 5px 0px;

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

@@ -25,9 +25,19 var IPython = (function (IPython) {
         var win = $(window);
         var w = win.width();
         var h = win.height();
-        var header_height = $('div#header').outerHeight(true);
+        var header_height;
+        if ($('div#header').css('display') === 'none') {
+            header_height = 0;
+        } else {
+            header_height = $('div#header').outerHeight(true);
+        }
         var menubar_height = $('div#menubar').outerHeight(true);
-        var toolbar_height = $('div#toolbar').outerHeight(true);
+        var toolbar_height;
+        if ($('div#toolbar').css('display') === 'none') {
+            toolbar_height = 0;
+        } else {
+            toolbar_height = $('div#toolbar').outerHeight(true);
+        }
         var app_height = h-header_height-menubar_height-toolbar_height-2;  // content height
 
         $('div#main_app').height(app_height + 2);  // content+padding+border height

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

@@ -98,6 +98,14 var IPython = (function (IPython) {
         this.element.find('#select_next').click(function () {
             IPython.notebook.select_next();
         });
+        // View
+        this.element.find('#toggle_header').click(function () {
+            $('div#header').toggle();
+            IPython.layout_manager.do_resize();
+        });
+        this.element.find('#toggle_toolbar').click(function () {
+            IPython.toolbar.toggle();
+        });
         // Insert
         this.element.find('#insert_cell_above').click(function () {
             IPython.notebook.insert_cell_above('code');

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

@@ -357,7 +357,9 var IPython = (function (IPython) {
             if (sindex !== null && index !== sindex) {
                 this.get_cell(sindex).unselect();
             };
-            this.get_cell(index).select();
+            var cell = this.get_cell(index)
+            cell.select();
+            IPython.toolbar.set_cell_type(cell.cell_type);
         };
         return this;
     };

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

@@ -23,6 +23,7 var IPython = (function (IPython) {
 
     ToolBar.prototype.style = function () {
         this.element.addClass('border-box-sizing');
+        this.element.find('#cell_type').addClass('ui-widget ui-widget-content');
         this.element.find('#save_b').button({
             icons : {primary: 'ui-icon-disk'},
             text : false
@@ -71,7 +72,26 var IPython = (function (IPython) {
 
 
     ToolBar.prototype.bind_events = function () {
+        this.element.find('#cell_type').change(function () {
+            var cell_type = $(this).val();
+            if (cell_type === 'code') {
+                IPython.notebook.to_code();
+            } else if (cell_type === 'markdown')  {
+                IPython.notebook.to_markdown();
+            };
+        });
+
+    };
+
+
+    ToolBar.prototype.set_cell_type = function (cell_type) {
+        this.element.find('#cell_type').val(cell_type);
+    };
+
 
+    ToolBar.prototype.toggle = function () {
+        this.element.toggle();
+        IPython.layout_manager.do_resize();
     };
 
 

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

@@ -99,6 +99,12
                 <li id="select_next"><a href="#">Select Next</a></li>
             </ul>
         </li>
+        <li><a href="#">View</a>
+            <ul>
+                <li id="toggle_header"><a href="#">Toggle Header</a></li>
+                <li id="toggle_toolbar"><a href="#">Toggle Toolbar</a></li>
+            </ul>
+        </li>
         <li><a href="#">Insert</a>
             <ul>
                 <li id="insert_cell_above"><a href="#">Insert Cell Above</a></li>