clean up CSS and firefox clicks

- `#button-select-all` toggles the all/none checkbox
  and the all/none checkbox now works on firefox
- static appearance of the `#button-select-all` button
  (even on counter change, up to two digits)
- clean up `tree.less`

IPython/html/static/tree/js/notebooklist.js

@@ -123,7 +123,15 b' define(['
 
             // Bind events for selection checkboxes.
             $('.tree-selector').change(function(){that.select($(this).attr('id'),$(this).is(':checked'))});
-            
+            $('#button-select-all').click(function(e) {
+                // toggle checkbox if the click doesn't come from the checkbox already
+                if (!$(e.target).is('input[type=checkbox]')) {
+                    var checkbox = $('#select-all');
+                    checkbox.prop('checked', !checkbox.prop('checked'));
+                    that.select('select-all',checkbox.prop('checked'));
+                }
+            });
+
             // Make the dropdown sticky
             // Dirty solution by stopping click propagation
             // $('#tree-selector-menu').click(function(event){event.stopPropagation();})
@@ -132,7 +140,8 b' define(['
                 $(this).parent().toggleClass('open');
             });
             $('body').on('click', function (e) {
-                if (!$('#tree-selector-btn').is(e.target) && $('#tree-selector-btn').has(e.target).length === 0 && $('.open').has(e.target).length === 0) {
+                // Close the menu if a click happens outside of the menu list (and of the tree-selector-btn)
+                if (!$('#tree-selector-btn').is(e.target) && $('#tree-selector-btn').has(e.target).length === 0 && $('#tree-selector-menu').has(e.target).length === 0) {
                     $('#tree-selector-btn').parent().removeClass('open');
                 }
             });
@@ -520,8 +529,13 b' define(['
                     $('#'+checkbox_ids[i]).parent().parent().removeClass('disabled');
                 }
             }
-            // Update badge
-            $('#badge-'+checkbox_ids[i]).text(selected_nums[i]===0 ? '' : selected_nums[i]);
+            // Update counters
+            // Turn empty counter into a ' ' on the main checkbox for correct button height.
+            var empty_counter = i===0 ? ' ' : '';
+            $('#counter-'+checkbox_ids[i]).html(selected_nums[i]===0 ? empty_counter : selected_nums[i]);
+            // Alternative : display selected/total
+            // $('#counter-'+checkbox_ids[i]).html(selected_nums[i]===0 ? empty_counter : selected_nums[i] + '/' + total_nums[i]);
+            
             // Update each checkbox status
             if (selected_nums[i] === 0) {
                 $('#'+checkbox_ids[i])[0].indeterminate = false;

IPython/html/static/tree/less/tree.less

@@ -12,7 +12,6 b''
 @btn_small_height: 24px;
 @btn_mini_height: 22px;
 @dark_dashboard_color: @breadcrumb-color;
-@list_stripe_color: lighten(@page-backdrop-color,3%);
 
 // The left padding of the selector button's contents.
 @dashboard-selectorbtn-lpad: 7px;
@@ -183,25 +182,23 b' input.engine_num_input {'
 }
 
 #tree-selector {
-    display: inline-block;
-    padding-right: 5px;
+    padding-right: 0px;
+}
+
+#button-select-all {
+    min-width: 50px;
 }
 
 #select-all {
-    margin-top:-1px;
     margin-left: @dashboard_lr_pad;
-    vertical-align: baseline;
+    margin-right: 2px;
 }
 
 #tree-selector-menu {
-        width: 200px;
-        .menuitem label{
-            margin-bottom: 0px;
-        }
-        input[type=checkbox] {
-            margin-left: 0px;
-            vertical-align: baseline;
-        }
+    width: 200px;
+    input[type=checkbox] {
+        margin-left: 0px;
+    }
 }
 
 .tab-content .row {

IPython/html/templates/tree.html

@@ -77,9 +77,8 b' data-terminals-available="{{terminals_available}}"'
           <div id="notebook_list">
             <div id="notebook_list_header" class="row list_header">
               <div class="btn-group dropdown" id='tree-selector'>
-                <button type="button" class="btn btn-default btn-xs">
-                  <span class="badge pull-right" id="badge-select-all"></span>
-                  <input type="checkbox" class="tree-selector" id="select-all"></input>
+                <button type="button" class="btn btn-default btn-xs" id="button-select-all">
+                  <input type="checkbox" class="tree-selector pull-left" id="select-all"><span id="counter-select-all">&nbsp;</span></input>
                 </button>
                 <button class="btn btn-default btn-xs dropdown-toggle" type="button" id="tree-selector-btn" aria-expanded="true">
                   <span class="caret"></span>
@@ -88,7 +87,7 b' data-terminals-available="{{terminals_available}}"'
                 <ul id="tree-selector-menu" class="dropdown-menu" role="menu" aria-labelledby="tree-selector-btn">
                   <li role="presentation">
                     <a role="menuitem">
-                      <span class="badge pull-right" id="badge-select-folders"></span>
+                      <span class="badge pull-right" id="counter-select-folders"></span>
                       <input type="checkbox" class="tree-selector" id="select-folders"></input>
                       <label for="select-folders">
                         <i class="folder_icon icon-fixed-width"></i>
@@ -98,7 +97,7 b' data-terminals-available="{{terminals_available}}"'
                   </li>
                   <li role="presentation">
                     <a role="menuitem">
-                      <span class="badge pull-right" id="badge-select-notebooks"></span>
+                      <span class="badge pull-right" id="counter-select-notebooks"></span>
                       <input type="checkbox" class="tree-selector" id="select-notebooks"></input>
                       <label for="select-notebooks">
                         <i class="notebook_icon icon-fixed-width"></i>
@@ -108,7 +107,7 b' data-terminals-available="{{terminals_available}}"'
                   </li>
                   <li role="presentation">
                     <a role="menuitem">
-                      <span class="badge pull-right" id="badge-select-running-notebooks"></span>
+                      <span class="badge pull-right" id="counter-select-running-notebooks"></span>
                       <input type="checkbox" class="tree-selector" id="select-running-notebooks"></input>
                       <label for="select-running-notebooks">
                         <i class="running_notebook_icon icon-fixed-width"></i>
@@ -118,7 +117,7 b' data-terminals-available="{{terminals_available}}"'
                   </li>
                   <li role="presentation">
                     <a role="menuitem">
-                      <span class="badge pull-right" id="badge-select-files"></span>
+                      <span class="badge pull-right" id="counter-select-files"></span>
                       <input type="checkbox" class="tree-selector" id="select-files"></input>
                       <label for="select-files">
                         <i class="file_icon icon-fixed-width"></i>