tweak global hide/show

make hierarchical rather than either/or.  Also, don't use the same class name for the outer and inner css classes.

IPython/html/static/notebook/js/celltoolbar.js

@@ -37,37 +37,39 var IPython = (function (IPython) {
         this.inner_element = $('<div/>').addClass('celltoolbar')
         this.element = $('<div/>').addClass('ctb_hideshow')
             .append(this.inner_element);
+        this.show();
     };
 
 
     // The default css style for the outer celltoolbar div
-    // (ctb_hideshow) is display: none. We add the ctb_show
-    // class to either 1) the body to show all cell's toolbars
-    // or 2) to the individual celltoolbar divs to show just one
-    // cell's toolbar.
+    // (ctb_hideshow) is display: none.
+    // To show the cell toolbar, *both* of the following conditions must be met:
+    // - A parent container has class `ctb_global_show`
+    // - The celltoolbar has the class `ctb_show`
+    // This allows global show/hide, as well as per-cell show/hide.
 
     CellToolbar.global_hide = function () {
-        $('body').removeClass('ctb_show');
-    }
+        $('body').removeClass('ctb_global_show');
+    };
 
 
     CellToolbar.global_show = function () {
-       $('body').addClass('ctb_show');
-    }
+        $('body').addClass('ctb_global_show');
+    };
 
 
     CellToolbar.prototype.hide = function () {
         this.element.removeClass('ctb_show');
-    }
+    };
 
 
     CellToolbar.prototype.show = function () {
         this.element.addClass('ctb_show');
-    }
+    };
 
 
     /**
-     * Class variable that should contain a dict of all availlable callback
+     * Class variable that should contain a dict of all available callback
      * we need to think of wether or not we allow nested namespace
      * @property _callback_dict
      * @private

IPython/html/static/notebook/less/celltoolbar.less

@@ -1,12 +1,10
-/* Css for the metadata edit area */
-
+/* CSS for the cell toolbar */
 
 .celltoolbar {
     border: thin solid #CFCFCF;
     border-bottom: none;
     background : #EEE;
-    border-top-right-radius: 3px;
-    border-top-left-radius: 3px;
+    border-radius : 3px 3px 0px 0px;
     width:100%;
     -webkit-box-pack: end;
     height:22px;
@@ -14,20 +12,6
     .reverse();
 }
 
-
-.no_input_radius {
-    border-top-right-radius: 0px;
-    border-top-left-radius: 0px;
-}
-
-.text_cell .ctb_prompt {
-    display: none;
-}
-
-.code_cell .ctb_prompt {
-    display: block;
-}
-
 .ctb_hideshow {
     display:none;
     vertical-align:bottom;
@@ -38,41 +22,21
    padding-top: 0px;
 }
 
-.ctb_area {
-    margin:0;
-    padding:0;
-    width:100%;
 
-}
-
-
-/*ctb_show is added to either body or the ctb_hideshow div to show
-all or one cell's toolbars.
+/* ctb_show is added to the ctb_hideshow div to show the cell toolbar.
+   Cell toolbars are only shown when the ctb_global_show class is also set.
 */
-.ctb_show.ctb_hideshow, .ctb_show .ctb_hideshow {
-    display:block;
+.ctb_global_show .ctb_show.ctb_hideshow {
+    display: block;
 }
 
-.ctb_show .input_area,
-.ctb_show .ctb_hideshow + div.text_cell_input {
+.ctb_global_show .ctb_show + .input_area,
+.ctb_global_show .ctb_show + div.text_cell_input
+{
     border-top-right-radius: 0px;
     border-top-left-radius: 0px;
 }
 
-.ctb_show > .celltoolbar {
-    border-bottom-right-radius: 0px;
-    border-bottom-left-radius: 0px;
-}
-
-.button_container {
-    margin-top:0;
-    margin-bottom:0;
-}
-
-
-.ui-button {
-    min-width:30px;
-}
 .celltoolbar .button_container select {
     margin: 10px;
     margin-top: 1px;
@@ -108,4 +72,5 all or one cell's toolbars.
     border: none;
     vertical-align:top;
     height:20px;
+    min-width:30px;
 }

IPython/html/static/style/style.min.css

@@ -1537,23 +1537,16 pre,code,kbd,samp{white-space:pre-wrap;}
 #fonttest{font-family:monospace;}
 p{margin-bottom:0;}
 .end_space{height:200px;}
-.celltoolbar{border:thin solid #CFCFCF;border-bottom:none;background:#EEE;border-top-right-radius:3px;border-top-left-radius:3px;width:100%;-webkit-box-pack:end;height:22px;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;-webkit-box-direction:reverse;-moz-box-direction:reverse;box-direction:reverse;}
-.no_input_radius{border-top-right-radius:0px;border-top-left-radius:0px;}
-.text_cell .ctb_prompt{display:none;}
-.code_cell .ctb_prompt{display:block;}
+.celltoolbar{border:thin solid #CFCFCF;border-bottom:none;background:#EEE;border-radius:3px 3px 0px 0px;width:100%;-webkit-box-pack:end;height:22px;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;-webkit-box-direction:reverse;-moz-box-direction:reverse;box-direction:reverse;}
 .ctb_hideshow{display:none;vertical-align:bottom;padding-right:2px;}
 .celltoolbar>div{padding-top:0px;}
-.ctb_area{margin:0;padding:0;width:100%;}
-.ctb_show.ctb_hideshow,.ctb_show .ctb_hideshow{display:block;}
-.ctb_show .input_area,.ctb_show .ctb_hideshow+div.text_cell_input{border-top-right-radius:0px;border-top-left-radius:0px;}
-.ctb_show>.celltoolbar{border-bottom-right-radius:0px;border-bottom-left-radius:0px;}
-.button_container{margin-top:0;margin-bottom:0;}
-.ui-button{min-width:30px;}
+.ctb_global_show .ctb_show.ctb_hideshow{display:block;}
+.ctb_global_show .ctb_show+.input_area,.ctb_global_show .ctb_show+div.text_cell_input{border-top-right-radius:0px;border-top-left-radius:0px;}
 .celltoolbar .button_container select{margin:10px;margin-top:1px;margin-bottom:0px;padding:0;font-size:87%;width:auto;display:inline-block;height:18px;line-height:18px;vertical-align:top;}
 .celltoolbar label{display:inline-block;height:15px;line-height:15px;vertical-align:top;}
 .celltoolbar label span{font-size:85%;}
 .celltoolbar input[type=checkbox]{margin:0px;margin-left:4px;margin-right:4px;}
-.celltoolbar .ui-button{border:none;vertical-align:top;height:20px;}
+.celltoolbar .ui-button{border:none;vertical-align:top;height:20px;min-width:30px;}
 .completions{position:absolute;z-index:10;overflow:hidden;border:1px solid #ababab;border-radius:4px;-webkit-box-shadow:0px 6px 10px -1px #adadad;-moz-box-shadow:0px 6px 10px -1px #adadad;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:#000000;}
 .completions select option.context{color:#0064cd;}