Moving checkboxes to a separate column.

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 459 matching lines @@
 
   /**
    * Request file system and get root entries asynchronously. Invokes init_
    * when have finished.
    */
   FileManager.prototype.resolveRoots_ = function(callback) {
     var rootPaths = ['Downloads', 'removable', 'archive'];
 
     metrics.startInterval('RequestLocalFileSystem');
     var self = this;
+
+    // The list of active mount points to distinct them from other directories.
+    chrome.fileBrowserPrivate.getMountPoints(function(mountPoints) {
+        self.mountPoints_ = mountPoints;

[Vladislav Kaznacheev, 2011/11/17 13:43:46]

nit: identation?

[SeRya, 2011/11/17 14:04:12]

Done.

+        onDone();
+    });
+
+    function onDone() {
+      if (self.mountPoints_ && self.rootEntries_)
+        self.init_();
+    }
+
     chrome.fileBrowserPrivate.requestLocalFileSystem(function(filesystem) {
       self.filesystem_ = filesystem;
       util.installFileErrorToString();
 
       metrics.recordTime('RequestLocalFileSystem');
       console.log('Found filesystem: ' + filesystem.name, filesystem);
 
       var rootEntries = [];
 
       function onAllRootsFound() {
         self.rootEntries_ = rootEntries;
-        self.init_();
+        onDone();
       }
 
       function onPathError(path, err) {
         console.error('Error locating root path: ' + path + ': ' + err);
       }
 
       function onEntryFound(entry) {
         if (entry) {
           rootEntries.push(entry);
         } else {
@@ skipping 11 matching lines @@
         util.forEachDirEntry(filesystem.root, onEntryFound);
       }
     });
   };
 
   /**
    * Continue initializing the file manager after resolving roots.
    */
   FileManager.prototype.init_ = function() {
     metrics.startInterval('InitFileManager');
-    this.initFileList_();
-    this.initDialogs_();
 
     // TODO(rginda): 6/22/11: Remove this test when createDateTimeFormat is
     // available in all chrome trunk builds.
     if ('createDateTimeFormat' in this.locale_) {
       this.shortDateFormatter_ =
         this.locale_.createDateTimeFormat({'dateType': 'medium'});
     } else {
       this.shortDateFormatter_ = {
         format: function(d) {
           return (d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getFullYear();
@@ skipping 16 matching lines @@
       };
     }
 
     // Optional list of file types.
     this.fileTypes_ = this.params_.typeList;
 
     this.showCheckboxes_ =
         (this.dialogType_ == FileManager.DialogType.FULL_PAGE ||
          this.dialogType_ == FileManager.DialogType.SELECT_OPEN_MULTI_FILE);
 
+    this.initFileList_();
+    this.initDialogs_();
+
     // DirectoryEntry representing the current directory of the dialog.
     this.currentDirEntry_ = null;
 
     this.copyManager_ = new FileCopyManager();
     this.copyManager_.addEventListener('copy-progress',
                                        this.onCopyProgress_.bind(this));
 
     window.addEventListener('popstate', this.onPopState_.bind(this));
     window.addEventListener('unload', this.onUnload_.bind(this));
 
@@ skipping 10 matching lines @@
 
     chrome.fileBrowserPrivate.onFileChanged.addListener(
         this.onFileChanged_.bind(this));
 
     var self = this;
 
     // The list of callbacks to be invoked during the directory rescan after
     // all paste tasks are complete.
     this.pasteSuccessCallbacks_ = [];
 
-    // The list of active mount points to distinct them from other directories.
-    chrome.fileBrowserPrivate.getMountPoints(function(mountPoints) {
-        self.mountPoints_ = mountPoints;
-    });
-
     this.initCommands_();
 
     this.setupCurrentDirectory_();
 
     this.summarizeSelection_();
 
     this.dataModel_.sort('cachedMtime_', 'desc');
 
     this.refocus();
 
@@ skipping 35 matching lines @@
   /**
    * One-time initialization of various DOM nodes.
    */
   FileManager.prototype.initDom_ = function() {
     // Cache nodes we'll be manipulating.
     this.previewThumbnails_ =
         this.dialogDom_.querySelector('.preview-thumbnails');
     this.previewPanel_ = this.dialogDom_.querySelector('.preview-panel');
     this.previewFilename_ = this.dialogDom_.querySelector('.preview-filename');
     this.previewSummary_ = this.dialogDom_.querySelector('.preview-summary');
-    this.previewMetadata_ = this.dialogDom_.querySelector('.preview-metadata');
     this.filenameInput_ = this.dialogDom_.querySelector('.filename-input');
     this.taskButtons_ = this.dialogDom_.querySelector('.task-buttons');
     this.okButton_ = this.dialogDom_.querySelector('.ok');
     this.cancelButton_ = this.dialogDom_.querySelector('.cancel');
     this.newFolderButton_ = this.dialogDom_.querySelector('.new-folder');
     this.deleteButton_ = this.dialogDom_.querySelector('.delete-button');
 
     this.downloadsWarning_ =
         this.dialogDom_.querySelector('.downloads-warning');
     var html = util.htmlUnescape(str('DOWNLOADS_DIRECTORY_WARNING'));
@@ skipping 464 matching lines @@
     cr.ui.contextMenuHandler.addContextMenuProperty(this.grid_);
     this.grid_.contextMenu = this.fileContextMenu_;
     this.grid_.addEventListener('mousedown',
                                 this.onGridMouseDown_.bind(this));
   };
 
   /**
    * Initialize the file list table.
    */
   FileManager.prototype.initTable_ = function() {
-    var checkWidth = this.showCheckboxes_ ? 5 : 0;
-
     var columns = [
-        new cr.ui.table.TableColumn('cachedIconType_', '',
-                                    5.4 + checkWidth),
         new cr.ui.table.TableColumn('name', str('NAME_COLUMN_LABEL'),
-                                    64 - checkWidth),
+                                    64),
         new cr.ui.table.TableColumn('cachedSize_',
                                     str('SIZE_COLUMN_LABEL'), 15.5),
         new cr.ui.table.TableColumn('type',
                                     str('TYPE_COLUMN_LABEL'), 15.5),
         new cr.ui.table.TableColumn('cachedMtime_',
                                     str('DATE_COLUMN_LABEL'), 21)
     ];
 
-    columns[0].renderFunction = this.renderIconType_.bind(this);
-    columns[1].renderFunction = this.renderName_.bind(this);
-    columns[2].renderFunction = this.renderSize_.bind(this);
-    columns[3].renderFunction = this.renderType_.bind(this);
-    columns[4].renderFunction = this.renderDate_.bind(this);
+    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));
+      columns[0].renderFunction = this.renderCheckbox_.bind(this);
+    }
 
     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));
     this.table_.selectionModel.addEventListener(
@@ skipping 462 matching lines @@
    * 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';
 
-    if (this.showCheckboxes_)
-      div.appendChild(this.renderCheckbox_(entry));
-
     var icon = this.document_.createElement('div');
     icon.className = 'detail-icon';
     this.getIconType(entry);
     icon.setAttribute('iconType', entry.cachedIconType_);
     div.appendChild(icon);
 
     return div;
   };
 
   FileManager.prototype.getLabelForRootPath_ = function(path) {
@@ skipping 14 matching lines @@
    * 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');
+    label.appendChild(this.renderIconType_(entry, columnId, table));
     label.entry = entry;
     label.className = 'detail-name filename-label';
     if (this.currentDirEntry_.name == '') {
-      label.textContent = this.getLabelForRootPath_(entry.name);
+      label.appendChild(this.document_.createTextNode(
+          this.getLabelForRootPath_(entry.name)));
     } else {
-      label.textContent = entry.name;
+      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.
@@ skipping 179 matching lines @@
       } else {
         // There may be internal tasks for directories.
         this.onTasksFound_(selection, []);
       }
     }
 
     cacheNextFile();
   };
 
   FileManager.prototype.updatePreviewPanelVisibility_ = function() {
-    var wasHidden = this.previewPanel_.hasAttribute('hidden');
-    var hide = (this.selection.totalCount == 0);
+    var panel = this.previewPanel_;
+    var state = panel.getAttribute('visibility');
+    var mustBeVisible = (this.selection.totalCount > 0);
+    var self = this;
 
-    if (hide == wasHidden)
-      return;
+    switch (state) {
+      case 'visible':
+        if (!mustBeVisible)
+          startHiding();
+        break;
 
-    if (this.hidingTimeout_) {
-      // Hiding is not complete. display == block.
-      clearTimeout(this.hidingTimeout_);
-      this.hidingTimeout_ = 0;
-    } else if (wasHidden) {
-      // Hiding complete. display == none.
-      this.previewPanel_.style.display = '';
-      this.onResize_();
+      case 'hiding':
+        if (mustBeVisible)
+          stopHidingAndShow();
+        break;
+
+      case 'hidden':
+        if (mustBeVisible)
+          show();
     }
 
-    var self = this;
-    if (hide) {
-      this.previewPanel_.setAttribute('hidden', '');
-      this.hidingTimeout_ = setTimeout(function() {
+    function stopHidingAndShow() {
+      clearTimeout(self.hidingTimeout_);
+      self.hidingTimeout_ = 0;
+      setVisibility('visible');
+    }
+
+    function startHiding() {
+      setVisibility('hiding');
+      self.hidingTimeout_ = setTimeout(function() {
           self.hidingTimeout_ = 0;
-          self.previewPanel_.style.display = 'none';
+          setVisibility('hidden');
           self.onResize_();
         }, 250);
-    } else {
-      this.previewPanel_.removeAttribute('hidden');
+    }
+
+    function show() {
+      setVisibility('visible');
+      self.onResize_();
+    }
+
+    function setVisibility(visibility) {
+      panel.setAttribute('visibility', visibility);
     }
   };
 
 
   FileManager.prototype.createMetadataProvider_ = function() {
     // Subclass MetadataProvider to notify tests when the initialization
     // is complete.
 
     var fileManager = this;
 
@@ skipping 406 matching lines @@
 
       // Convert duration to milliseconds since time start
       var date = new Date(parseInt(obj.value));
 
       var fmt = this.locale_.createDateTimeFormat({skeleton:fmtSkeleton});
 
       return fmt.format(date);
     }
   };
 
-  FileManager.prototype.setPreviewMetadata = function(metadata) {
-    this.previewMetadata_.textContent = '';
-    if (!(metadata && metadata.ifd))
-      return;
-
-    var self = this;
-
-    function addProperty(id, v) {
-      var dom = self.document_.createElement('div');
-      dom.className = 'metadata-item';
-      var label = self.document_.createElement('div');
-      label.className = 'metadata-label';
-      label.textContent = str(id) || id;
-      dom.appendChild(label);
-      var value = self.document_.createElement('div');
-      value.className = 'metadata-value';
-      value.textContent = v;
-      dom.appendChild(value);
-
-      self.previewMetadata_.appendChild(dom);
-    }
-
-    // TODO(rginda): Split this function into metadata specific routines when
-    // we add new metadata types.
-    // TODO(rginda): Add const names for these numerics.
-    var exifDir = metadata.ifd.exif;
-    if (0xa002 in exifDir && 0xa003 in exifDir) {
-      addProperty('DIMENSIONS_LABEL',
-                  strf('DIMENSIONS_FORMAT', exifDir[0xa002].value,
-                       exifDir[0xa003].value));
-    }
-  };
-
   FileManager.prototype.getThumbnailURL = function(entry, callback) {
     if (!entry)
       return;
 
     var iconType = this.getIconType(entry);
 
     function returnStockIcon() {
       callback(iconType, previewArt[iconType] || previewArt['unknown']);
     }
 
@@ skipping 819 matching lines @@
   };
 
   /**
    * Determine whether or not a click should initiate a rename.
    *
    * Renames can happen on mouse click if the user clicks on a label twice,
    * at least a half second apart.
    */
   FileManager.prototype.allowRenameClick_ = function(event, row) {
     if (this.dialogType_ != FileManager.DialogType.FULL_PAGE ||
-        this.currentDirEntry_.name == '' ||
+        this.currentDirEntry_ == null || this.currentDirEntry_.name == '' ||
         isSystemDirEntry(this.currentDirEntry_)) {
       // Renaming only enabled for full-page mode, outside of the root
       // directory.
       return false;
     }
 
     // Didn't click on the label.
     if (!event.srcElement.classList.contains('filename-label'))
       return false;
 
@@ skipping 578 matching lines @@
           });
       }, onError);
 
       function onError(err) {
         console.log('Error while checking free space: ' + err);
         setTimeout(doCheck, 1000 * 60);
       }
     }
   }
 })();