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

@@ -1,890 +1,904
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 define([
     'base/js/namespace',
     'jquery',
     'base/js/utils',
     'base/js/dialog',
     'base/js/events',
     'base/js/keyboard',
 ], function(IPython, $, utils, dialog, events, keyboard) {
     "use strict";
     
     var NotebookList = function (selector, options) {
         /**
          * Constructor
          *
          * Parameters:
          *  selector: string
          *  options: dictionary
          *      Dictionary of keyword arguments.
          *          session_list: SessionList instance
          *          element_name: string
          *          base_url: string
          *          notebook_path: string
          *          contents: Contents instance
          */
         var that = this;
         this.session_list = options.session_list;
         // allow code re-use by just changing element_name in kernellist.js
         this.element_name = options.element_name || 'notebook';
         this.selector = selector;
         if (this.selector !== undefined) {
             this.element = $(selector);
             this.style();
             this.bind_events();
         }
         this.notebooks_list = [];
         this.sessions = {};
         this.base_url = options.base_url || utils.get_body_data("baseUrl");
         this.notebook_path = options.notebook_path || utils.get_body_data("notebookPath");
         this.contents = options.contents;
         if (this.session_list && this.session_list.events) {
             this.session_list.events.on('sessions_loaded.Dashboard', 
                 function(e, d) { that.sessions_loaded(d); });
         }
         this.selected = [];
     };
 
     NotebookList.prototype.style = function () {
         var prefix = '#' + this.element_name;
         $(prefix + '_toolbar').addClass('list_toolbar');
         $(prefix + '_list_info').addClass('toolbar_info');
         $(prefix + '_buttons').addClass('toolbar_buttons');
         $(prefix + '_list_header').addClass('list_header');
         this.element.addClass("list_container");
     };
 
     NotebookList.prototype.bind_events = function () {
         var that = this;
         $('#refresh_' + this.element_name + '_list').click(function () {
             that.load_sessions();
         });
         this.element.bind('dragover', function () {
             return false;
         });
         this.element.bind('drop', function(event){
             that.handleFilesUpload(event,'drop');
             return false;
         });
 
         // Bind events for singleton controls.
         if (!NotebookList._bound_singletons) {
             NotebookList._bound_singletons = true;
             $('#new-file').click(function(e) {
                 var w = window.open();
                 that.contents.new_untitled(that.notebook_path || '', {type: 'file', ext: '.txt'}).then(function(data) {
                     var url = utils.url_join_encode(
                         that.base_url, 'edit', data.path
                     );
                     w.location = url;
                 }).catch(function (e) {
                     w.close();
                     dialog.modal({
                         title: 'Creating File Failed',
                         body: $('<div/>')
                             .text("An error occurred while creating a new file.")
                             .append($('<div/>')
                                 .addClass('alert alert-danger')
                                 .text(e.message || e)),
                         buttons: {
                             OK: {'class': 'btn-primary'}
                         }
                     });
                 });
                 that.load_sessions();
             });
             $('#new-folder').click(function(e) {
                 that.contents.new_untitled(that.notebook_path || '', {type: 'directory'})
                 .then(function(){
                     that.load_list();
                 }).catch(function (e) {
                     dialog.modal({
                         title: 'Creating Folder Failed',
                         body: $('<div/>')
                             .text("An error occurred while creating a new folder.")
                             .append($('<div/>')
                                 .addClass('alert alert-danger')
                                 .text(e.message || e)),
                         buttons: {
                             OK: {'class': 'btn-primary'}
                         }
                     });
                 });
                 that.load_sessions();
             });
 
             // Bind events for action buttons.
             $('.rename-button').click($.proxy(this.rename_selected, this));
             $('.shutdown-button').click($.proxy(this.shutdown_selected, this));
             $('.duplicate-button').click($.proxy(this.duplicate_selected, this));
             $('.delete-button').click($.proxy(this.delete_selected, this));
 
             // 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();})
             // Cleaner solution by reimplementing the open-close dynamics (and removing data-toggle="dropdown" in html)
             $('#tree-selector-btn').on('click', function(event) {
                 $(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');
                 }
             });
         }
     };
 
     NotebookList.prototype.handleFilesUpload = function(event, dropOrForm) {
         var that = this;
         var files;
         if(dropOrForm =='drop'){
             files = event.originalEvent.dataTransfer.files;
         } else 
         {
             files = event.originalEvent.target.files;
         }
         for (var i = 0; i < files.length; i++) {
             var f = files[i];
             var name_and_ext = utils.splitext(f.name);
             var file_ext = name_and_ext[1];
 
             var reader = new FileReader();
             if (file_ext === '.ipynb') {
                 reader.readAsText(f);
             } else {
                 // read non-notebook files as binary
                 reader.readAsArrayBuffer(f);
             }
             var item = that.new_item(0, true);
             item.addClass('new-file');
             that.add_name_input(f.name, item, file_ext == '.ipynb' ? 'notebook' : 'file');
             // Store the list item in the reader so we can use it later
             // to know which item it belongs to.
             $(reader).data('item', item);
             reader.onload = function (event) {
                 var item = $(event.target).data('item');
                 that.add_file_data(event.target.result, item);
                 that.add_upload_button(item);
             };
             reader.onerror = function (event) {
                 var item = $(event.target).data('item');
                 var name = item.data('name');
                 item.remove();
                 dialog.modal({
                     title : 'Failed to read file',
                     body : "Failed to read file '" + name + "'",
                     buttons : {'OK' : { 'class' : 'btn-primary' }}
                 });
             };
         }
         // Replace the file input form wth a clone of itself. This is required to
         // reset the form. Otherwise, if you upload a file, delete it and try to 
         // upload it again, the changed event won't fire.
         var form = $('input.fileinput');
         form.replaceWith(form.clone(true));
         return false;
     };
 
     NotebookList.prototype.clear_list = function (remove_uploads) {
         /**
          * Clears the navigation tree.
          *
          * Parameters
          * remove_uploads: bool=False
          *      Should upload prompts also be removed from the tree.
          */
         if (remove_uploads) {
             this.element.children('.list_item').remove();
         } else {
             this.element.children('.list_item:not(.new-file)').remove();  
         }
     };
 
     NotebookList.prototype.load_sessions = function(){
         this.session_list.load_sessions();
     };
 
 
     NotebookList.prototype.sessions_loaded = function(data){
         this.sessions = data;
         this.load_list();
     };
 
     NotebookList.prototype.load_list = function () {
         var that = this;
         this.contents.list_contents(that.notebook_path).then(
             $.proxy(this.draw_notebook_list, this),
             function(error) {
                 that.draw_notebook_list({content: []}, "Server error: " + error.message);
             }
         );
     };
 
     /**
      * Draw the list of notebooks
      * @method draw_notebook_list
      * @param {Array} list An array of dictionaries representing files or
      *     directories.
      * @param {String} error_msg An error message
      */
 
 
     var type_order = {'directory':0,'notebook':1,'file':2};
 
     NotebookList.prototype.draw_notebook_list = function (list, error_msg) {
         // Remember what was selected before the refresh.
         var selected_before = this.selected;
 
         list.content.sort(function(a, b) {
             if (type_order[a['type']] < type_order[b['type']]) {
                 return -1;
             }
             if (type_order[a['type']] > type_order[b['type']]) {
                 return 1;
             }
             if (a['name'] < b['name']) {
                 return -1;
             }
             if (a['name'] > b['name']) {
                 return 1;
             }
             return 0;
         });
         var message = error_msg || 'Notebook list empty.';
         var item = null;
         var model = null;
         var len = list.content.length;
         this.clear_list();
         var n_uploads = this.element.children('.list_item').length;
         if (len === 0) {
             item = this.new_item(0);
             var span12 = item.children().first();
             span12.empty();
             span12.append($('<div style="margin:auto;text-align:center;color:grey"/>').text(message));
         }
         var path = this.notebook_path;
         var offset = n_uploads;
         if (path !== '') {
             item = this.new_item(offset, false);
             model = {
                 type: 'directory',
                 name: '..',
                 path: utils.url_path_split(path)[0],
             };
             this.add_link(model, item);
             offset += 1;
         }
         for (var i=0; i<len; i++) {
             model = list.content[i];
             item = this.new_item(i+offset, true);
             this.add_link(model, item);
         }
         // Trigger an event when we've finished drawing the notebook list.
         events.trigger('draw_notebook_list.NotebookList');
 
         // Reselect the items that were selected before.  Notify listeners
         // that the selected items may have changed.  O(n^2) operation.
         selected_before.forEach(function(item) {
             var list_items = $('.list_item');
             for (var i=0; i<list_items.length; i++) {
                 var $list_item = $(list_items[i]);
                 if ($list_item.data('path') == item.path) {
                     $list_item.find('input[type=checkbox]').prop('checked', true);
                     break;
                 }
             }
         });
         this._selection_changed();
     };
 
 
     /**
      * Creates a new item.
      * @param  {integer} index
      * @param  {boolean} [selectable] - tristate, undefined: don't draw checkbox,
      *                                  false: don't draw checkbox but pad
      *                                  where it should be, true: draw checkbox.
      * @return {JQuery} row
      */
     NotebookList.prototype.new_item = function (index, selectable) {
         var row = $('<div/>')
             .addClass("list_item")
             .addClass("row");
 
         var item = $("<div/>")
             .addClass("col-md-12")
             .appendTo(row);
 
         var checkbox;
         if (selectable !== undefined) {
             checkbox = $('<input/>')
                 .attr('type', 'checkbox')
                 .attr('title', 'Click here to rename, delete, etc.')
                 .appendTo(item);
         }
 
         $('<i/>')
             .addClass('item_icon')
             .appendTo(item);
 
         var link = $("<a/>")
             .addClass("item_link")
             .appendTo(item);
 
         $("<span/>")
             .addClass("item_name")
             .appendTo(link);
         
         if (selectable === false) {
             checkbox.css('visibility', 'hidden');
         } else if (selectable === true) {
             var that = this;
             link.click(function(e) {
                 e.stopPropagation();
             });
             checkbox.click(function(e) {
                 e.stopPropagation();
                 that._selection_changed();
             });
             row.click(function(e) {
                 e.stopPropagation();
                 checkbox.prop('checked', !checkbox.prop('checked'));
                 that._selection_changed();
             });
         }
 
         var buttons = $('<div/>')
             .addClass("item_buttons  pull-right")
             .appendTo(item);
 
         $('<div/>')
             .addClass('running-indicator')
             .text('Running')
             .css('visibility', 'hidden')
             .appendTo(buttons);
         
         if (index === -1) {
             this.element.append(row);
         } else {
             this.element.children().eq(index).after(row);
         }
         return row;
     };
 
 
     NotebookList.icons = {
         directory: 'folder_icon',
         notebook: 'notebook_icon',
         file: 'file_icon',
     };
 
     NotebookList.uri_prefixes = {
         directory: 'tree',
         notebook: 'notebooks',
         file: 'edit',
     };
 
     /**
      * Select all items in the tree of specified type.
      * checkbox_id : string among "select-all, "select-folders", "select-notebooks", "select-running-notebooks", "select-files"
      * state : boolean, true to select and false to deselect
      */
     NotebookList.prototype.select = function(checkbox_id,state) {
         var that = this;
         $('.list_item').each(function(index, item) {
             // For each item, determine if the state should be set, depending on the checkbox_id that triggered select
             var set_state = (checkbox_id === "select-all");
             set_state = set_state || (checkbox_id === "select-folders" && $(item).data('type') === 'directory');
             set_state = set_state || (checkbox_id === "select-notebooks" && $(item).data('type') === 'notebook');
             set_state = set_state || (checkbox_id === "select-running-notebooks" && $(item).data('type') === 'notebook' && that.sessions[$(item).data('path')] !== undefined);
             set_state = set_state || (checkbox_id === "select-files" && $(item).data('type') === 'file');
             if (set_state) {
                 $(item).find('input[type=checkbox]').prop('checked', state);
             }
         });
         this._selection_changed();
     };
 
 
     /**
      * Handles when any row selector checkbox is toggled.
      */
     NotebookList.prototype._selection_changed = function() {
         // Use a JQuery selector to find each row with a checkbox.  If
         // we decide to add more checkboxes in the future, this code will need
         // to be changed to distinguish which checkbox is the row selector.
         var selected = [];
         var num_sel_notebook = 0;
         var num_sel_running_notebook = 0;
         var num_sel_directory = 0;
         var num_sel_file = 0;
         var num_notebook = 0;
         var num_running_notebook = 0;
         var num_directory = 0;
         var num_file = 0;
         var that = this;
         
         $('.list_item input[type=checkbox]').each(function(index, item) {
             var parent = $(item).parent().parent();
             // If the item doesn't have an upload button, isn't the 
             // breadcrumbs and isn't the parent folder '..', then it can be selected.  
             // Breadcrumbs path == ''.
             if (parent.find('.upload_button').length === 0 && parent.data('path') !=='' && parent.data('path') !== utils.url_path_split(that.notebook_path)[0]) {
                 if (parent.data('type') == 'notebook') {
                     num_notebook++;
                     if (that.sessions[parent.data('path')] !== undefined) {
                         num_running_notebook++;
                     }
                 } else if (parent.data('type') == 'file') {
                     num_file++;
                 } else if (parent.data('type') == 'directory') {
                     num_directory++;
                 }
                 if ($(item).is(':checked')) {
                     selected.push({
                     name: parent.data('name'), 
                     path: parent.data('path'), 
                     type: parent.data('type')
                     });
                     if (parent.data('type') == 'notebook') {
                         num_sel_notebook++;
                         if (that.sessions[parent.data('path')] !== undefined) {
                             num_sel_running_notebook++;
                         }
                     } else if (parent.data('type') == 'file') {
                         num_sel_file++;
                     } else if (parent.data('type') == 'directory') {
                         num_sel_directory++;
                     }   
                 }
             }
         });
         
         // Set flags according to what is selected.  Flags are later
         // used to decide which action buttons are visible.        
         var has_running_notebook = num_sel_running_notebook > 0;
         var has_directory = num_sel_directory > 0;
         var has_file = num_sel_file > 0;
         this.selected = selected;
 
         // Rename is only visible when one item is selected.
         if (selected.length==1) {
             $('.rename-button').css('display', 'inline-block');
         } else {
             $('.rename-button').css('display', 'none');
         }
 
         // Shutdown is only visible when one or more notebooks running notebooks
         // are selected and no non-notebook items are selected.
         if (has_running_notebook && !(has_file || has_directory)) {
             $('.shutdown-button').css('display', 'inline-block');
         } else {
             $('.shutdown-button').css('display', 'none');
         }
 
         // Duplicate isn't visible when a directory is selected.
         if (selected.length > 0 && !has_directory) {
             $('.duplicate-button').css('display', 'inline-block');
         } else {
             $('.duplicate-button').css('display', 'none');
         }
 
         // Delete is visible if one or more items are selected.
         if (selected.length > 0) {
             $('.delete-button').css('display', 'inline-block');
         } else {
             $('.delete-button').css('display', 'none');
         }
 
         // If all of the items are selected, show the selector as checked.  If
         // some of the items are selected, show it as indeterminate.  Otherwise,
         // uncheck it.
         var checkbox_ids = ['select-all','select-folders','select-notebooks','select-running-notebooks','select-files'];
         var total_nums = [num_file+num_directory+num_notebook, num_directory, num_notebook, num_running_notebook, num_file];
         var selected_nums = [num_sel_file+num_sel_directory+num_sel_notebook, num_sel_directory, num_sel_notebook, num_sel_running_notebook, num_sel_file];
         
         // Disable the main checkbox if the list is empty
         $('#'+checkbox_ids[0]).parent().prop('disabled',total_nums[0] === 0);
         for (var i=0; i < 5; i++) {
             if (i>0) {
                 // Disable each menu item if there is nothing to select
                 $('#'+checkbox_ids[i]).prop('disabled',total_nums[i] === 0);
                 if (total_nums[i] === 0) {
                     $('#'+checkbox_ids[i]).parent().parent().addClass('disabled');
                 } else {
                     $('#'+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 '&nbsp;' on the main checkbox for correct button height.
+            var empty_counter = i===0 ? '&nbsp;' : '';
+            $('#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;
                 $('#'+checkbox_ids[i]).prop('checked', false);
             } else {
                 if (selected_nums[i] === total_nums[i]) {
                     $('#'+checkbox_ids[i])[0].indeterminate = false;
                     $('#'+checkbox_ids[i]).prop('checked', true);
                 } else {
                     $('#'+checkbox_ids[i]).prop('checked', false);
                     $('#'+checkbox_ids[i])[0].indeterminate = true;
                 }
             }
         }
     };
 
     NotebookList.prototype.add_link = function (model, item) {
         var path = model.path,
             name = model.name;
         var running = (model.type == 'notebook' && this.sessions[path] !== undefined);
         
         item.data('name', name);
         item.data('path', path);
         item.data('type', model.type);
         item.find(".item_name").text(name);
         var icon = NotebookList.icons[model.type];
         if (running) {
             icon = 'running_' + icon;
         }
         var uri_prefix = NotebookList.uri_prefixes[model.type];
         item.find(".item_icon").addClass(icon).addClass('icon-fixed-width');
         var link = item.find("a.item_link")
             .attr('href',
                 utils.url_join_encode(
                     this.base_url,
                     uri_prefix,
                     path
                 )
             );
 
         item.find(".item_buttons .running-indicator").css('visibility', running ? '' : 'hidden');
 
         // directory nav doesn't open new tabs
         // files, notebooks do
         if (model.type !== "directory") {
             link.attr('target','_blank');
         }
     };
 
 
     NotebookList.prototype.add_name_input = function (name, item, icon_type) {
         item.data('name', name);
         item.find(".item_icon").addClass(NotebookList.icons[icon_type]).addClass('icon-fixed-width');
         item.find(".item_name").empty().append(
             $('<input/>')
             .addClass("filename_input")
             .attr('value', name)
             .attr('size', '30')
             .attr('type', 'text')
             .keyup(function(event){
                 if(event.keyCode == 13){item.find('.upload_button').click();}
                 else if(event.keyCode == 27){item.remove();}
             })
         );
     };
 
 
     NotebookList.prototype.add_file_data = function (data, item) {
         item.data('filedata', data);
     };
 
 
     NotebookList.prototype.shutdown_selected = function() {
         var that = this;
         this.selected.forEach(function(item) {
             if (item.type == 'notebook') {
                 that.shutdown_notebook(item.path);
             }
         });
     };
 
     NotebookList.prototype.shutdown_notebook = function(path) {
         var that = this;
         var settings = {
             processData : false,
             cache : false,
             type : "DELETE",
             dataType : "json",
             success : function () {
                 that.load_sessions();
             },
             error : utils.log_ajax_error,
         };
 
         var session = this.sessions[path];
         if (session) {
             var url = utils.url_join_encode(
                 this.base_url,
                 'api/sessions',
                 session
             );
             $.ajax(url, settings);
         }
     };
 
     NotebookList.prototype.rename_selected = function() {
         if (this.selected.length != 1) return;
 
         var that = this;
         var path = this.selected[0].path;
         var input = $('<input/>').attr('type','text').attr('size','25').addClass('form-control')
             .val(path);
         var dialog_body = $('<div/>').append(
             $("<p/>").addClass("rename-message")
                 .text('Enter a new directory name:')
         ).append(
             $("<br/>")
         ).append(input);
         var d = dialog.modal({
             title : "Rename directory",
             body : dialog_body,
             buttons : {
                 OK : {
                     class: "btn-primary",
                     click: function() {
                         that.contents.rename(path, input.val()).then(function() {
                             that.load_list();
                         }).catch(function(e) { 
                             dialog.modal({
                                 title: "Rename Failed",
                                 body: $('<div/>')
                                     .text("An error occurred while renaming \"" + path + "\" to \"" + input.val() + "\".")
                                     .append($('<div/>')
                                         .addClass('alert alert-danger')
                                         .text(e.message || e)),
                                 buttons: {
                                     OK: {'class': 'btn-primary'}
                                 }
                             });
                         });
                     }
                 },
                 Cancel : {}
             },
             open : function () {
                 // Upon ENTER, click the OK button.
                 input.keydown(function (event) {
                     if (event.which === keyboard.keycodes.enter) {
                         d.find('.btn-primary').first().click();
                         return false;
                     }
                 });
                 input.focus().select();
             }
         });
     };
 
     NotebookList.prototype.delete_selected = function() {
         var message;
         if (this.selected.length == 1) {
             message = 'Are you sure you want to permanently delete: ' + this.selected[0].name + '?';
         } else {
             message = 'Are you sure you want to permanently delete the ' + this.selected.length + ' files/folders selected?';
         }
         var that = this;
         dialog.modal({
             title : "Delete",
             body : message,
             buttons : {
                 Delete : {
                     class: "btn-danger",
                     click: function() {
                         // Shutdown any/all selected notebooks before deleting 
                         // the files.
                         that.shutdown_selected();
 
                         // Delete selected.
                         that.selected.forEach(function(item) {
                             that.contents.delete(item.path).then(function() {
                                     that.notebook_deleted(item.path);
                             }).catch(function(e) { 
                                 dialog.modal({
                                     title: "Delete Failed",
                                     body: $('<div/>')
                                         .text("An error occurred while deleting \"" + item.path + "\".")
                                         .append($('<div/>')
                                             .addClass('alert alert-danger')
                                             .text(e.message || e)),
                                     buttons: {
                                         OK: {'class': 'btn-primary'}
                                     }
                                 });
                             });
                         });
                     }
                 },
                 Cancel : {}
             }
         });
     };
 
     NotebookList.prototype.duplicate_selected = function() {
         var message;
         if (this.selected.length == 1) {
             message = 'Are you sure you want to duplicate: ' + this.selected[0].name + '?';
         } else {
             message = 'Are you sure you want to duplicate the ' + this.selected.length + ' files selected?';
         }
         var that = this;
         dialog.modal({
             title : "Delete",
             body : message,
             buttons : {
                 Duplicate : {
                     class: "btn-primary",
                     click: function() {
                         that.selected.forEach(function(item) {
                             that.contents.copy(item.path, that.notebook_path).then(function () {
                                 that.load_list();
                             }).catch(function(e) { 
                                 dialog.modal({
                                     title: "Delete Failed",
                                     body: $('<div/>')
                                         .text("An error occurred while deleting \"" + item.path + "\".")
                                         .append($('<div/>')
                                             .addClass('alert alert-danger')
                                             .text(e.message || e)),
                                     buttons: {
                                         OK: {'class': 'btn-primary'}
                                     }
                                 });
                             });
                         });
                     }
                 },
                 Cancel : {}
             }
         });
     };
 
     NotebookList.prototype.notebook_deleted = function(path) {
         /**
          * Remove the deleted notebook.
          */
         var that = this;
         $( ":data(path)" ).each(function() {
             var element = $(this);
             if (element.data("path") === path) {
                 element.remove();
                 events.trigger('notebook_deleted.NotebookList');
                 that._selection_changed();
             }
         });
     };
 
 
     NotebookList.prototype.add_upload_button = function (item) {
         var that = this;
         var upload_button = $('<button/>').text("Upload")
             .addClass('btn btn-primary btn-xs upload_button')
             .click(function (e) {
                 var filename = item.find('.item_name > input').val();
                 var path = utils.url_path_join(that.notebook_path, filename);
                 var filedata = item.data('filedata');
                 var format = 'text';
                 if (filename.length === 0 || filename[0] === '.') {
                     dialog.modal({
                         title : 'Invalid file name',
                         body : "File names must be at least one character and not start with a dot",
                         buttons : {'OK' : { 'class' : 'btn-primary' }}
                     });
                     return false;
                 }
                 if (filedata instanceof ArrayBuffer) {
                     // base64-encode binary file data
                     var bytes = '';
                     var buf = new Uint8Array(filedata);
                     var nbytes = buf.byteLength;
                     for (var i=0; i<nbytes; i++) {
                         bytes += String.fromCharCode(buf[i]);
                     }
                     filedata = btoa(bytes);
                     format = 'base64';
                 }
                 var model = {};
 
                 var name_and_ext = utils.splitext(filename);
                 var file_ext = name_and_ext[1];
                 var content_type;
                 if (file_ext === '.ipynb') {
                     model.type = 'notebook';
                     model.format = 'json';
                     try {
                         model.content = JSON.parse(filedata);
                     } catch (e) {
                         dialog.modal({
                             title : 'Cannot upload invalid Notebook',
                             body : "The error was: " + e,
                             buttons : {'OK' : {
                                 'class' : 'btn-primary',
                                 click: function () {
                                     item.remove();
                                 }
                             }}
                         });
                         return false;
                     }
                     content_type = 'application/json';
                 } else {
                     model.type = 'file';
                     model.format = format;
                     model.content = filedata;
                     content_type = 'application/octet-stream';
                 }
                 filedata = item.data('filedata');
 
                 var on_success = function () {
                     item.removeClass('new-file');
                     that.add_link(model, item);
                     that.session_list.load_sessions();
                 };
                 
                 var exists = false;
                 $.each(that.element.find('.list_item:not(.new-file)'), function(k,v){
                     if ($(v).data('name') === filename) { exists = true; return false; }
                 });
                 
                 if (exists) {
                     dialog.modal({
                         title : "Replace file",
                         body : 'There is already a file named ' + filename + ', do you want to replace it?',
                         buttons : {
                             Overwrite : {
                                 class: "btn-danger",
                                 click: function () {
                                     that.contents.save(path, model).then(on_success);
                                 }
                             },
                             Cancel : {
                                 click: function() { item.remove(); }
                             }
                         }
                     });
                 } else {
                     that.contents.save(path, model).then(on_success);
                 }
                 
                 return false;
             });
         var cancel_button = $('<button/>').text("Cancel")
             .addClass("btn btn-default btn-xs")
             .click(function (e) {
                 item.remove();
                 return false;
             });
         item.find(".item_buttons").empty()
             .append(upload_button)
             .append(cancel_button);
     };
 
 
     // Backwards compatability.
     IPython.NotebookList = NotebookList;
 
     return {'NotebookList': NotebookList};
 });

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

@@ -1,321 +1,318
 
 /**
  * Primary styles
  *
  * Author: IPython Development Team
  */
 
 @dashboard_tb_pad: 4px;
 @dashboard_lr_pad: 7px;
 // These are the total heights of the Bootstrap small and mini buttons. These values
 // are not less variables so we have to track them statically.
 @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;
 
 ul#tabs {
     margin-bottom: @dashboard_tb_pad;
 }
 
 ul#tabs a {
     padding-top: @dashboard_tb_pad + 2px;
     padding-bottom: @dashboard_tb_pad;
 }
 
 ul.breadcrumb {
     a:focus, a:hover {
         text-decoration: none;
     }
     i.icon-home {
         font-size: 16px;
         margin-right: 4px;
     }
     
     span {
         color: @dark_dashboard_color;
     }
 }
 
 .list_toolbar {
     padding: @dashboard_tb_pad 0 @dashboard_tb_pad 0;
     vertical-align: middle;
 
     .tree-buttons {
         padding-top: 1px;
     }
 }
 
 .dynamic-buttons {
     display: inline-block;
 }
 
 .list_toolbar [class*="span"] {
     min-height: @btn_small_height;
 }
 
 .list_header {
     font-weight: bold;
     background-color: @page-backdrop-color
 }
 
 .list_container {
   margin-top: @dashboard_tb_pad;
   margin-bottom: 5*@dashboard_tb_pad;
   border: 1px solid @table-border-color;
   border-radius: @border-radius-base;
 }
 
 .list_container > div {
   border-bottom: 1px solid @table-border-color;
   &:hover .list-item{
     background-color: red;
   };
 }
 
 .list_container > div:last-child {
   border: none;
 }
 
 .list_item {
   &:hover .list_item {
     background-color: @table-border-color;
   };
   a {text-decoration: none;}
   &:hover {
     background-color: darken(white,2%);
   }
 }
 
 .action_col {
     text-align: right;
 }
 
 .list_header>div, .list_item>div {
     padding-top: @dashboard_tb_pad;
     padding-bottom: @dashboard_tb_pad;
     padding-left: @dashboard_lr_pad;
     padding-right: @dashboard_lr_pad;
     line-height: @btn_mini_height;
 
     input {
         margin-right: @dashboard_lr_pad;
         margin-left: @dashboard_lr_pad + @dashboard-selectorbtn-lpad;
         vertical-align: baseline;
         line-height: @btn_mini_height;
         position: relative;
         top: -1px;
     }
 
     .item_link {
         margin-left: -1px;
         vertical-align: baseline;
         line-height: @btn_mini_height;
     }
 }
 
 .new-file input[type=checkbox] {
     visibility: hidden;
 }
 
 .item_name {
     line-height: @btn_mini_height;
     height: @btn_small_height;
 }
 
 .item_icon {
     font-size: 14px; 
     color: @dark_dashboard_color;
     margin-right: @dashboard_lr_pad;
     margin-left: @dashboard_lr_pad;
     line-height: @btn_mini_height;
     vertical-align: baseline;
 }
 
 .item_buttons {
     padding-top: @dashboard_tb_pad;
     line-height: 1em;
     .btn-toolbar();
     .btn {
         min-width: 13ex;
     }
     .running-indicator {
         color: @brand-success;
     }
 }
 
 .toolbar_info {
     height: @btn_small_height;
     line-height: @btn_small_height;
 }
 
 input.nbname_input, input.engine_num_input {
     // These settings give these inputs a height that matches @btn_mini_height = 22
     padding-top: 3px;
     padding-bottom: 3px;
     height: @btn_mini_height;
     line-height: 14px;
     margin: 0px;
 }
 
 input.engine_num_input {
     width: 60px;
 }
 
 .highlight_text {
     color: blue;
 }
 
 #project_name {
     display: inline-block;
     padding-left: @dashboard_lr_pad;
     margin-left: -2px;
 
     > .breadcrumb {
         padding: 0px;
         margin-bottom: 0px;
         background-color: transparent;
         font-weight: bold;
     }
 }
 
 #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 {
     margin-left: 0px;
     margin-right: 0px;
 }
 
 .folder_icon:before {
     .icon(@fa-var-folder-o);
 }
 
 .notebook_icon:before {
     .icon(@fa-var-book);
     position: relative;
     top: -1px;
 }
 
 .running_notebook_icon:before {
     .icon(@fa-var-book);
     position: relative;
     top: -1px;
 
     color: @brand-success;
 }
 
 
 .file_icon:before {
     .icon(@fa-var-file-o);
     position: relative;
     top: -2px;
 }
 
 #notebook_toolbar .pull-right {
     padding-top: 0px;
     margin-right: -1px;
 }
 
 ul#new-menu {
     // align right instead of left
     left: auto;
     right: 0;
 }
 
 .kernel-menu-icon {
     padding-right: 12px;
     width: 24px;
     content: @fa-var-square-o;
 }
 
 .kernel-menu-icon:before {
     content: @fa-var-square-o;
 }
 
 .kernel-menu-icon-current:before {
     content: @fa-var-check;
 }
 
 #tab_content {
     padding-top: @page-header-padding;
 }
 
 #running {
     .panel-group{
         .panel {
             margin-top: 3px;
             margin-bottom: 1em;
 
             .panel-heading {
                 background-color: @page-backdrop-color;
                 padding-top: @dashboard_tb_pad;
                 padding-bottom: @dashboard_tb_pad;
                 padding-left: @dashboard_lr_pad;
                 padding-right: @dashboard_lr_pad;
                 line-height: @btn_mini_height;
                 
                 a:focus, a:hover {
                     text-decoration: none;
                 }
             }
 
             .panel-body {
                 padding: 0px;
 
                 .list_container {
                     margin-top: 0px;
                     margin-bottom: 0px;
                     border: 0px;
                     border-radius: 0px;
 
                     .list_item {
                         border-bottom: 1px solid @table-border-color;
 
                         &:last-child {
                             border-bottom: 0px;
                         }
                     }
                 }
             }
         }
     }
 }
 
 .delete-button {
     display: none;
 }
 
 .duplicate-button {
     display: none;
 }
 
 .rename-button {
     display: none;
 }
 
 .shutdown-button {
     display: none;
 }

IPython/html/templates/tree.html

@@ -1,222 +1,221
 {% extends "page.html" %}
 
 {% block title %}{{page_title}}{% endblock %}
 
 
 {% block params %}
 
 data-base-url="{{base_url}}"
 data-notebook-path="{{notebook_path}}"
 data-terminals-available="{{terminals_available}}"
 
 {% endblock %}
 
 
 {% block site %}
 
   <div id="ipython-main-app" class="container">
     <div id="tab_content" class="tabbable">
       <ul id="tabs" class="nav nav-tabs">
         <li class="active"><a href="#notebooks" data-toggle="tab">Files</a></li>
         <li><a href="#running" data-toggle="tab">Running</a></li>
         <li><a href="#clusters" data-toggle="tab">Clusters</a></li>
       </ul>
       <div class="tab-content">
         <div id="notebooks" class="tab-pane active">
           <div id="notebook_toolbar" class="row">
             <div class="col-sm-8 no-padding">
               <form id='alternate_upload'  class='alternate_upload'>
                 <span id="notebook_list_info">
                 To import a notebook, drag the file onto the listing below or
                 <span class="input-overlay">
                 <input type="file" name="datafile" class="fileinput" multiple='multiple'>
                 click here.
                 </span>
                 </span>
               </form>
             </div>
             <div class="col-sm-4 no-padding tree-buttons">
               <div class="pull-right">
                 <div class="dynamic-buttons">
                     <button title="Duplicate selected" class="duplicate-button btn btn-default btn-xs">Duplicate</button>
                     <button title="Rename selected" class="rename-button btn btn-default btn-xs">Rename</button>
                     <button title="Shutdown selected notebook(s)" class="shutdown-button btn btn-default btn-xs btn-warning">Shutdown</button>
                     <button title="Deleted selected" class="delete-button btn btn-default btn-xs btn-danger"><i class="fa fa-trash"></i></button>
                 </div>
                 <div id="new-buttons" class="btn-group">
                   <button class="dropdown-toggle btn btn-default btn-xs" data-toggle="dropdown">
                   <span>New</span>
                   <span class="caret"></span>
                   </button>
                   <ul id="new-menu" class="dropdown-menu">
                     <li role="presentation" id="new-file">
                       <a role="menuitem" tabindex="-1" href="#">Text File</a>
                     </li>
                     <li role="presentation" id="new-folder">
                       <a role="menuitem" tabindex="-1" href="#">Folder</a>
                     </li>
                     {% if terminals_available %}
                     <li role="presentation" id="new-terminal">
                       <a role="menuitem" tabindex="-1" href="#">Terminal</a>
                     </li>
                     {% else %}
                     <li role="presentation" id="new-terminal-disabled" class="disabled">
                       <a role="menuitem" tabindex="-1" href="#">Terminals Unavailable</a>
                     </li>
                     {% endif %}
                     <li role="presentation" class="divider"></li>
                     <li role="presentation" class="dropdown-header" id="notebook-kernels">Notebooks</li>
                   </ul>
                 </div>
                 <div class="btn-group">
                     <button id="refresh_notebook_list" title="Refresh notebook list" class="btn btn-default btn-xs"><i class="fa fa-refresh"></i></button>
                 </div>
               </div>
             </div>
           </div>
           <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>
                   <span class="sr-only">Toggle Dropdown</span>
                 </button>
                 <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>
                         Folders
                       </label>
                     </a>
                   </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>
                         All Notebooks
                       </label>
                     </a>
                   </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>
                         Running
                       </label>
                     </a>
                   </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>
                         Files  
                       </label>
                     </a>
                   </li>
                 </ul>
               </div>
               <div id="project_name">
                 <ul class="breadcrumb">
                   <li><a href="{{breadcrumbs[0][0]}}"><i class="fa fa-home"></i></a></li>
                 {% for crumb in breadcrumbs[1:] %}
                   <li><a href="{{crumb[0]}}">{{crumb[1]}}</a></li>
                 {% endfor %}
                 </ul>
               </div>
             </div>
           </div>
         </div>
         <div id="running" class="tab-pane">
           <div id="running_toolbar" class="row">
             <div class="col-sm-8 no-padding">
               <span id="running_list_info">Currently running Jupyter processes</span>
             </div>
             <div class="col-sm-4 no-padding tree-buttons">
               <span id="running_buttons" class="pull-right">
               <button id="refresh_running_list" title="Refresh running list" class="btn btn-default btn-xs"><i class="fa fa-refresh"></i></button>
               </span>
             </div>
           </div>
           <div class="panel-group" id="accordion" >
             <div class="panel panel-default">
               <div class="panel-heading">
                 <a data-toggle="collapse" data-target="#collapseOne" href="#">
                   Terminals
                 </a>
               </div>
               <div id="collapseOne" class=" collapse in">
                 <div class="panel-body">
                   <div id="terminal_list">
                     <div id="terminal_list_header" class="row list_header">
                     {% if terminals_available %}
                       <div> There are no terminals running. </div>
                     {% else %}
                       <div> Terminals are unavailable. </div>
                     {% endif %}
                     </div>
                   </div>
                 </div>
               </div>
             </div>
             <div class="panel panel-default">
               <div class="panel-heading">
                 <a data-toggle="collapse" data-target="#collapseTwo" href="#">
                   Notebooks
                 </a>
               </div>
               <div id="collapseTwo" class=" collapse in">
                 <div class="panel-body">
                   <div id="running_list">
                     <div id="running_list_header" class="row list_header">
                       <div> There are no notebooks running. </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>   
         </div>
         <div id="clusters" class="tab-pane">
           <div id="cluster_toolbar" class="row">
             <div class="col-xs-8 no-padding">
               <span id="cluster_list_info">IPython parallel computing clusters</span>
             </div>
             <div class="col-xs-4 no-padding tree-buttons">
               <span id="cluster_buttons" class="pull-right">
               <button id="refresh_cluster_list" title="Refresh cluster list" class="btn btn-default btn-xs"><i class="fa fa-refresh"></i></button>
               </span>
             </div>
           </div>
           <div id="cluster_list">
             <div id="cluster_list_header" class="row list_header">
               <div class="profile_col col-xs-4">profile</div>
               <div class="status_col col-xs-3">status</div>
               <div class="engines_col col-xs-3" title="Enter the number of engines to start or empty for default"># of engines</div>
               <div class="action_col col-xs-2">action</div>
             </div>
           </div>
         </div>
       </div><!-- class:tab-content -->
     </div><!-- id:tab_content --> 
   </div><!-- ipython-main-app  -->
 
 {% endblock %}
 
 {% block script %}
     {{super()}}
 
 <script src="{{ static_url("tree/js/main.js") }}" type="text/javascript" charset="utf-8"></script>
 {% endblock %}