Controls in cell section have a solid layout.

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

@@ -123,14 +123,42 b' div.section_content {'
     padding: 5px;
 }
 
+#expand_cell, #collapse_cell, #insert_cell_above, #insert_cell_below,
+#move_cell_up, #move_cell_down, #to_code, #to_text, #run_selected_cell,
+#run_all_cells {
+    width: 65px;
+}
+
+.cell_section_row {
+    margin: 5px 0px;
+}
+
+.cell_section_row_buttons {
+    float: right;
+}
+
+.cell_section_row_header {
+    float: left;
+    font-size: 0.8em;
+    padding: 0.2em 0em;
+    font-weight: bold;
+}
 
 span.button_label {
-    padding: 0.3em 1em;
+    padding: 0.2em 1em;
     font-size: 0.8em;
+    float: right;
 }
 
+/* This is needed because FF was adding a 2px margin top and bottom. */
+.cell_section_row .ui-button {
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
+
+
 .ui-button .ui-button-text {
-    padding: 0.3em 0.9em;
+    padding: 0.2em 0.8em;
     font-size: 0.7em;
 }
 

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

@@ -53,16 +53,6 b' $(document).ready(function () {'
 //    $("#delete_cell").button("option", "text", false);
 //    $("#delete_cell").click(function () {IPython.notebook.delete_cell();});
 
-//    $("#cell_type").buttonset();
-//    $("#to_code").click(function () {IPython.notebook.text_to_code();});
-//    $("#to_text").click(function () {IPython.notebook.code_to_text();});
-
-//    $("#sort").buttonset();
-//    $("#sort_cells").click(function () {IPython.notebook.sort_cells();});
-
-//    $("#toggle").buttonset();
-//    $("#collapse").click(function () {IPython.notebook.collapse();});
-//    $("#expand").click(function () {IPython.notebook.expand();});
 
 });
 

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

@@ -131,65 +131,66 b' var IPython = (function (IPython) {'
         this.content.find('#to_text').click(function () {
             IPython.notebook.code_to_text();
         });
+        this.content.find('#run_selected_cell').click(function () {
+            alert("Not Implemented");
+        });
+        this.content.find('#run_all_cells').click(function () {
+            alert("Not Implemented");
+        });
     };
 
 
     CellSection.prototype.create_children = function () {
-        var row0 = $('<div>').
-            append($('<span/>').attr('id','toggle').
-                append( $('<button>Collapse</button>').attr('id','collapse_cell') ).
-                append( $('<button>Expand</button>').attr('id','expand_cell') ) ).
-            append($('<span/>').
-                append($('<button>X</button>').attr('id','delete_cell')));
-        row0.find('#toggle').buttonset();            
-        row0.find('button#delete_cell').button();
-        this.content.append(row0);
 
-        var row1 = $('<div>').
-            append($('<span/>').html('Insert').addClass('button_label')).
-            append($('<span/>').attr('id','insert').
+        this.content.addClass('ui-helper-clearfix');
+
+        var row1 = $('<div>').addClass('cell_section_row ui-helper-clearfix').
+            append($('<span/>').addClass('cell_section_row_buttons').
+                append($('<button>X</button>').attr('id','delete_cell'))).
+            append($('<span/>').html('Actions').addClass('cell_section_row_header'));
+        row1.find('#delete_cell').button();
+        this.content.append(row1);
+
+        var row1 = $('<div>').addClass('cell_section_row ui-helper-clearfix').
+            append($('<span/>').attr('id','insert').addClass('cell_section_row_buttons').
                 append( $('<button>Above</button>').attr('id','insert_cell_above') ).
-                append( $('<button>Below</button>').attr('id','insert_cell_below') ) );
+                append( $('<button>Below</button>').attr('id','insert_cell_below') )).
+            append($('<span/>').html('Insert').addClass('button_label'));
         row1.find('#insert').buttonset();
         this.content.append(row1);
 
-        var row2 = $('<div>').
-            append($('<span/>').html('Move').addClass('button_label')).
-            append($('<span/>').attr('id','move').
+        var row2 = $('<div>').addClass('cell_section_row ui-helper-clearfix').
+            append($('<span/>').attr('id','move').addClass('cell_section_row_buttons').
                 append( $('<button>Up</button>').attr('id','move_cell_up') ).
-                append( $('<button>Down</button>').attr('id','move_cell_down') ) );
+                append( $('<button>Down</button>').attr('id','move_cell_down') ) ).
+            append($('<span/>').html('Move').addClass('button_label'));
         row2.find('#move').buttonset();
         this.content.append(row2);
 
-        var row3 = $('<div>').
-            append($('<span/>').html('Cell Type').addClass('button_label')).
-            append($('<span/>').attr('id','cell_type').
+        var row3 = $('<div>').addClass('cell_section_row ui-helper-clearfix').
+            append($('<span/>').attr('id','cell_type').addClass('cell_section_row_buttons').
                 append( $('<button>Code</button>').attr('id','to_code') ).
-                append( $('<button>Text</button>').attr('id','to_text') ) );
+                append( $('<button>Text</button>').attr('id','to_text') ) ).
+            append($('<span/>').html('Cell Type').addClass('button_label'));
         row3.find('#cell_type').buttonset();
-        this.content.append(row3)
+        this.content.append(row3);
+
+        var row0 = $('<div>').addClass('cell_section_row ui-helper-clearfix').
+            append($('<span/>').attr('id','toggle_output').addClass('cell_section_row_buttons').
+                append( $('<button>Collapse</button>').attr('id','collapse_cell') ).
+                append( $('<button>Expand</button>').attr('id','expand_cell') ) ).
+            append($('<span/>').html('Output').addClass('button_label'));
+        row0.find('#toggle_output').buttonset();
+        this.content.append(row0);
+
+        var row0 = $('<div>').addClass('cell_section_row').
+            append($('<span/>').attr('id','run_cells').addClass('cell_section_row_buttons').
+                append( $('<button>Selected</button>').attr('id','run_selected_cell') ).
+                append( $('<button>All</button>').attr('id','run_all_cells') ) ).
+            append($('<span/>').html('Run').addClass('button_label'));
+        row0.find('#run_cells').buttonset();
+        this.content.append(row0);
     };
-//            <span id="move_cell">
-//                <button id="move_up">Move up</button>
-//                <button id="move_down">Move down</button>
-//            </span>
-//            <span id="insert_delete">
-//                <button id="insert_cell_before">Before</button>
-//                <button id="insert_cell_after">After</button>
-//                <button id="delete_cell">Delete</button>
-//            </span>
-//            <span id="cell_type">
-//                <button id="to_code">Code</button>
-//                <button id="to_text">Text</button>
-//            </span>
-//            <span id="sort">
-//                <button id="sort_cells">Sort</button>
-//            </span>
-//            <span id="toggle">
-//                <button id="collapse">Collapse</button>
-//                <button id="expand">Expand</button>
-//            </span>
-//        </span>
 
 
     // KernelSection

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

@@ -16,7 +16,7 b' var IPython = (function (IPython) {'
 
 
     TextCell.prototype.create_element = function () {
-        var cell = $("<div>").addClass('cell text_cell').
+        var cell = $("<div>").addClass('cell text_cell border-box-sizing').
                    append(
                        $("<textarea>" + this.placeholder + "</textarea>").
                        addClass('text_cell_input monospace-font').