Moving file selection checkbox to the field name.

chrome/browser/resources/file_manager/js/file_manager.js

 // Copyright (c) 2011 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 // Setting the src of an img to an empty string can crash the browser, so we
 // use an empty 1x1 gif instead.
 const EMPTY_IMAGE_URI = 'data:image/gif;base64,'
         + 'R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw%3D%3D';
 
 var g_slideshow_data = null;
@@ skipping 1142 matching lines @@
         new cr.ui.table.TableColumn('cachedMtime_',
                                     str('DATE_COLUMN_LABEL'), 21)
     ];
 
     columns[0].renderFunction = this.renderName_.bind(this);
     columns[1].renderFunction = this.renderSize_.bind(this);
     columns[2].renderFunction = this.renderType_.bind(this);
     columns[3].renderFunction = this.renderDate_.bind(this);
 
     if (this.showCheckboxes_) {
-      columns.unshift(new cr.ui.table.TableColumn('checkbox_', '', 3.6));
-      columns[0].renderFunction = this.renderCheckbox_.bind(this);
       columns[0].headerRenderFunction =
-          this.renderCheckboxColumnHeader_.bind(this);
+          this.renderNameColumnHeader_.bind(this, columns[0].name);
     }
 
     this.table_ = this.dialogDom_.querySelector('.detail-table');
     cr.ui.Table.decorate(this.table_);
 
     this.table_.selectionModel = new this.selectionModelClass_();
     this.table_.columnModel = new cr.ui.table.TableColumnModel(columns);
 
     this.table_.addEventListener(
         'dblclick', this.onDetailDoubleClick_.bind(this));
@@ skipping 365 matching lines @@
     if (this.selection && this.selection.entries.indexOf(entry) != -1) {
       // Our DOM nodes get discarded as soon as we're scrolled out of view,
       // so we have to make sure the check state is correct when we're brought
       // back to life.
       input.checked = true;
     }
 
     return input;
   };
 
-  FileManager.prototype.renderCheckboxColumnHeader_ = function(table) {
+  FileManager.prototype.renderNameColumnHeader_ = function(name, table) {
     var input = this.document_.createElement('input');
     input.setAttribute('type', 'checkbox');
     input.setAttribute('tabindex', -1);
     input.id = 'select-all-checkbox';
     input.checked = this.areAllItemsSelected();
 
     var self = this;
     input.addEventListener('click', function(event) {
       if (self.areAllItemsSelected())
         table.selectionModel.unselectAll();
       else
         table.selectionModel.selectAll();
       event.preventDefault();
+      event.stopPropagation();
     });
 
-    return input;
+    var fragment = this.document_.createDocumentFragment();
+    fragment.appendChild(input);
+    fragment.appendChild(this.document_.createTextNode(name));
+    return fragment;
   };
 
   /**
    * Check if all items in the current list are selected.
    * @return {boolean} True if all items are selected.
    */
   FileManager.prototype.areAllItemsSelected = function() {
-    return this.selection &&
+    return this.selection && this.dataModel_.length > 0 &&
            this.dataModel_.length == this.selection.totalCount;
   };
 
   /**
    * Update the thumbnail image to fit/fill the square container.
    *
    * Using webkit center packing does not align the image properly, so we need
    * to wait until the image loads and its proportions are known, then manually
    * position it at the center.
    *
@@ skipping 88 matching lines @@
   /**
    * Render the type column of the detail table.
    *
    * Invoked by cr.ui.Table when a file needs to be rendered.
    *
    * @param {Entry} entry The Entry object to render.
    * @param {string} columnId The id of the column to be rendered.
    * @param {cr.ui.Table} table The table doing the rendering.
    */
   FileManager.prototype.renderIconType_ = function(entry, columnId, table) {
-    var div = this.document_.createElement('div');
-    div.className = 'detail-icon-container';
-
     var icon = this.document_.createElement('div');
     icon.className = 'detail-icon';
     this.getIconType(entry);
     icon.setAttribute('iconType', entry.cachedIconType_);
-    div.appendChild(icon);
-
-    return div;
+    return icon;
   };
 
   FileManager.prototype.getLabelForRootPath_ = function(path) {
     // This hack lets us localize the top level directories.
     if (path == 'Downloads')
       return str('DOWNLOADS_DIRECTORY_LABEL');
 
     if (path == 'archive')
       return str('ARCHIVE_DIRECTORY_LABEL');
 
     if (path == 'removable')
       return str('REMOVABLE_DIRECTORY_LABEL');
 
     return path || str('ROOT_DIRECTORY_LABEL');
   };
 
   /**
    * Render the Name column of the detail table.
    *
    * Invoked by cr.ui.Table when a file needs to be rendered.
    *
    * @param {Entry} entry The Entry object to render.
    * @param {string} columnId The id of the column to be rendered.
    * @param {cr.ui.Table} table The table doing the rendering.
    */
   FileManager.prototype.renderName_ = function(entry, columnId, table) {
     var label = this.document_.createElement('div');
+    if (this.showCheckboxes_)
+      label.appendChild(this.renderCheckbox_(entry));
     label.appendChild(this.renderIconType_(entry, columnId, table));
     label.entry = entry;
-    label.className = 'detail-name filename-label';
+    label.className = 'detail-name';
     if (this.currentDirEntry_.name == '') {
       label.appendChild(this.document_.createTextNode(
           this.getLabelForRootPath_(entry.name)));
     } else {
       label.appendChild(this.document_.createTextNode(entry.name));
     }
 
     return label;
   };
 
   /**
    * Render the Size column of the detail table.
    *
    * @param {Entry} entry The Entry object to render.
    * @param {string} columnId The id of the column to be rendered.
    * @param {cr.ui.Table} table The table doing the rendering.
    */
   FileManager.prototype.renderSize_ = function(entry, columnId, table) {
     var div = this.document_.createElement('div');
-    div.className = 'detail-size';
 
     div.textContent = '...';
     cacheEntrySize(entry, function(entry) {
       if (entry.cachedSize_ == -1) {
         div.textContent = '';
       } else {
         div.textContent = util.bytesToSi(entry.cachedSize_);
       }
     }, null, true);
 
     return div;
   };
 
   /**
    * Render the Type column of the detail table.
    *
    * @param {Entry} entry The Entry object to render.
    * @param {string} columnId The id of the column to be rendered.
    * @param {cr.ui.Table} table The table doing the rendering.
    */
   FileManager.prototype.renderType_ = function(entry, columnId, table) {
     var div = this.document_.createElement('div');
-    div.className = 'detail-type';
 
     this.cacheEntryFileType(entry, function(entry) {
       var info = entry.cachedFileType_;
       if (info.name) {
         if (info.subtype)
           div.textContent = strf(info.name, info.subtype);
         else
           div.textContent = str(info.name);
       } else
         div.textContent = '';
     }, true);
 
     return div;
   };
 
   /**
    * Render the Date column of the detail table.
    *
    * @param {Entry} entry The Entry object to render.
    * @param {string} columnId The id of the column to be rendered.
    * @param {cr.ui.Table} table The table doing the rendering.
    */
   FileManager.prototype.renderDate_ = function(entry, columnId, table) {
     var div = this.document_.createElement('div');
-    div.className = 'detail-date';
 
     div.textContent = '...';
 
     var self = this;
     cacheEntryDate(entry, function(entry) {
       if (isSystemDirEntry(self.currentDirEntry_) &&
           entry.cachedMtime_.getTime() == 0) {
         // Mount points for FAT volumes have this time associated with them.
         // We'd rather display nothing than this bogus date.
         div.textContent = '';
@@ skipping 2147 matching lines @@
           });
       }, onError);
 
       function onError(err) {
         console.log('Error while checking free space: ' + err);
         setTimeout(doCheck, 1000 * 60);
       }
     }
   }
 })();