Moving checkboxes to a separate column.

In the File Manager list view icons are moved to the name column. Checkbox column made unsortable.

+bugfixes.

BUG=chromium-os:20156
TEST=None


Review URL: http://codereview.chromium.org/8585027

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@110501 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/file_manager/css/file_manager.css

@@ -286,12 +286,17 @@ div.img-container > img {
   -webkit-transform: translate(0, 0);
 }
 
-.preview-panel[hidden] {
+.preview-panel[visibility=hiding] {
   -webkit-transition: all 220ms ease;
   -webkit-transform: translate(0, 5px);
    opacity: 0;
 }
 
+.preview-panel[visibility=hidden] {
+  display: none;
+  opacity: 0;
+}
+
 .preview-thumbnails {
   display: -webkit-box;
   -webkit-box-orient: horizontal;
@@ -398,7 +403,6 @@ li.thumbnail-item[selected] .file-checkbox {
 
 .detail-icon-container {
   -webkit-box-orient: horizontal;
-  -webkit-box-flex: 1;
   -webkit-box-pack: end;
   display: -webkit-box;
 }
@@ -499,13 +503,6 @@ li.thumbnail-item[selected] .file-checkbox {
   -webkit-box-shadow: 5px 5px 0 #aaa;
 }
 
-.preview-metadata {
-  -webkit-box-orient: vertical;
-  -webkit-box-flex: 1;
-  display: -webkit-box;
-  color: #666;
-}
-
 .metadata-item {
   -webkit-box-orient: horizontal;
   -webkit-box-flex: 1;
@@ -579,25 +576,6 @@ li.thumbnail-item[selected] .file-checkbox {
   display: -webkit-box;
 }
 
-.preview-metadata {
-    text-align:center;
-}
-
-.preview-metadata-table tbody tr th {
-    text-align: right;
-    color: #666;
-    font-size: 12px;
-    font-weight: normal;
-    padding-left:10px;
-}
-
-.preview-metadata-table tbody tr td {
-    text-align: left;
-    color:#000;
-    font-size: 12px;
-    font-weight: normal;
-}
-
 /* Overlay pane covering the entire file manager window (e.g. image editor)*/
 .overlay-pane {
   position: absolute;

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

@@ -477,6 +477,18 @@ FileManager.prototype = {
 
     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;
+      onDone();
+    });
+
+    function onDone() {
+      if (self.mountPoints_ && self.rootEntries_)
+        self.init_();
+    }
+
     chrome.fileBrowserPrivate.requestLocalFileSystem(function(filesystem) {
       self.filesystem_ = filesystem;
       util.installFileErrorToString();
@@ -488,7 +500,7 @@ FileManager.prototype = {
 
       function onAllRootsFound() {
         self.rootEntries_ = rootEntries;
-        self.init_();
+        onDone();
       }
 
       function onPathError(path, err) {
@@ -520,8 +532,6 @@ FileManager.prototype = {
    */
   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.
@@ -558,6 +568,9 @@ FileManager.prototype = {
         (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;
 
@@ -588,11 +601,6 @@ FileManager.prototype = {
     // 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_();
@@ -648,7 +656,6 @@ FileManager.prototype = {
     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');
@@ -1133,13 +1140,9 @@ FileManager.prototype = {
    * 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',
@@ -1148,11 +1151,15 @@ FileManager.prototype = {
                                     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_);
@@ -1635,9 +1642,6 @@ FileManager.prototype = {
     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);
@@ -1672,12 +1676,14 @@ FileManager.prototype = {
    */
   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;
@@ -1877,32 +1883,49 @@ FileManager.prototype = {
   };
 
   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);
     }
   };
 
@@ -2329,39 +2352,6 @@ FileManager.prototype = {
     }
   };
 
-  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;
@@ -3201,7 +3191,7 @@ FileManager.prototype = {
    */
   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.

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

@@ -13,7 +13,8 @@ function MetadataProvider(opt_workerPath) {
 
   if (!opt_workerPath) {
     var path = document.location.pathname;
-    opt_workerPath = path.substring(0, path.lastIndexOf('/') + 1) +
+    opt_workerPath = document.location.origin +
+        path.substring(0, path.lastIndexOf('/') + 1) +
         'js/metadata_dispatcher.js';
   }
 

chrome/browser/resources/file_manager/main.html

@@ -6,9 +6,6 @@
   -->
 <html>
   <head>
-    <!-- metrics.js initiates load performance tracking
-         so we want to parse it as early as possible -->
-    <script src="js/metrics.js"></script>
     <if expr="0">
     <!-- <if ... /if> is removed while flattening HTML. -->
     <script>
@@ -22,11 +19,11 @@
       // 2. Build and run the Chromium OS.
       //
       // 3. Make source files available via the HTTP protocol:
-      //    twistd web --path chrome/browser/resources/file_manager --port 1080
+      //    twistd web --path chrome/browser/resources/ --port 1080
       //
       // 4. Open the File Manager. Execute the following JS code in its context
       //    using DevTools:
-      //    localStorage['base'] = 'http://youmachine:1080/'
+      //    localStorage['base'] = 'http://youmachine:1080/file_manager/'
       //
       // This will make the File Manager use fresh JS and CSS files from the
       // development machine. HTML files and JS files for WebWorkers would still
@@ -39,6 +36,9 @@
       }
     </script>
     </if>
+    <!-- metrics.js initiates load performance tracking
+         so we want to parse it as early as possible -->
+    <script src="js/metrics.js"></script>
     <script>
       (function() {
         // Switch to 'test harness' mode when loading from a file or http url.
@@ -153,7 +153,7 @@
           <div></div>
         </div>
       </div>
-      <div class=preview-panel hidden>
+      <div class=preview-panel visibility=hidden>
         <div><div class=preview-thumbnails></div></div>
         <div><div class=preview-summary></div></div>
         <div class=task-buttons></div>

chrome/browser/resources/shared/js/cr/ui/array_data_model.js

@@ -72,6 +72,10 @@ cr.define('cr.ui', function() {
       this.compareFunctions_[field] = compareFunction;
     },
 
+    isSortable: function(field) {
+      return this.compareFunctions_ && field in this.compareFunctions_;
+    },
+
     /**
      * Returns current sort status.
      * @return {!Object} Current sort status.

chrome/browser/resources/shared/js/cr/ui/table/table_header.js

@@ -80,7 +80,9 @@ cr.define('cr.ui.table', function() {
         var cell = this.ownerDocument.createElement('div');
         cell.style.width = cm.getWidth(i) + '%';
         cell.className = 'table-header-cell';
-        cell.addEventListener('click', this.createSortFunction_(i).bind(this));
+        if (dm.isSortable(cm.getId(i)))
+          cell.addEventListener('click',
+                                this.createSortFunction_(i).bind(this));
 
         cell.appendChild(this.createHeaderLabel_(i));
         this.headerInner_.appendChild(cell);