Add gear menu to /downloads and /external_storage.

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

 // Copyright (c) 2012 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.
 
 // This variable is checked in SelectFileDialogExtensionBrowserTest.
 var JSErrorCount = 0;
 
 /**
  * Count uncaught exceptions.
  */
@@ skipping 526 matching lines @@
     cr.ui.Menu.decorate(this.rootsContextMenu_);
 
     this.downloadsRootContextMenu_ =
         this.dialogDom_.querySelector('#downloads-root-context-menu');
     cr.ui.Menu.decorate(this.downloadsRootContextMenu_);
 
     this.textContextMenu_ =
         this.dialogDom_.querySelector('#text-context-menu');
     cr.ui.Menu.decorate(this.textContextMenu_);
 
-    this.driveSettingsMenu_ = this.dialogDom_.querySelector('#drive-settings');
-    cr.ui.decorate(this.driveSettingsMenu_, cr.ui.MenuButton);
-
-    this.driveSettingsMenu_.addEventListener('menushow',
-        this.onDriveMenuShow_.bind(this));
+    this.gearButton_ = this.dialogDom_.querySelector('#gear-button');
+    this.gearButton_.addEventListener('menushow',
+        this.refreshRemainingSpace_.bind(this,
+                                         false /* Without loading caption. */));
+    cr.ui.decorate(this.gearButton_, cr.ui.MenuButton);
 
     this.syncButton.checkable = true;
     this.hostedButton.checkable = true;
   };
 
   /**
    * One-time initialization of commands.
    */
   FileManager.prototype.initCommands_ = function() {
     var commandButtons = this.dialogDom_.querySelectorAll('button[command]');
@@ skipping 23 matching lines @@
 
     CommandUtil.registerCommand(this.rootsList_, 'import-photos',
         Commands.importCommand, this.rootsList_);
 
     CommandUtil.registerCommand(doc, 'delete',
         Commands.deleteFileCommand, this);
 
     CommandUtil.registerCommand(doc, 'rename',
         Commands.renameFileCommand, this);
 
+    CommandUtil.registerCommand(doc, 'volume-help',
+        Commands.volumeHelpCommand, this);
+
     CommandUtil.registerCommand(doc, 'drive-buy-more-space',
         Commands.driveBuySpaceCommand, this);
 
-    CommandUtil.registerCommand(doc, 'drive-help',
-        Commands.driveHelpCommand, this);
-
     CommandUtil.registerCommand(doc, 'drive-clear-local-cache',
         Commands.driveClearCacheCommand, this);
 
     CommandUtil.registerCommand(doc, 'drive-reload',
         Commands.driveReloadCommand, this);
 
     CommandUtil.registerCommand(doc, 'drive-go-to-drive',
         Commands.driveGoToDriveCommand, this);
 
     CommandUtil.registerCommand(doc, 'files-app-help',
@@ skipping 161 matching lines @@
 
     this.dialogDom_.querySelector('#search-box').addEventListener(
         'input', this.onSearchBoxUpdate_.bind(this));
 
     this.defaultActionMenuItem_ =
         this.dialogDom_.querySelector('#default-action');
 
     this.openWithCommand_ =
         this.dialogDom_.querySelector('#open-with');
 
+    this.driveBuyMoreStorageCommand_ =
+        this.dialogDom_.querySelector('#drive-buy-more-space');
+
     this.defaultActionMenuItem_.addEventListener('activate',
         this.dispatchSelectionAction_.bind(this));
 
     this.fileTypeSelector_ = this.dialogDom_.querySelector('#file-type');
     this.initFileTypeFilter_();
 
     this.updateWindowState_();
     // Populate the static localized strings.
     i18nTemplate.process(this.document_, loadTimeData);
   };
@@ skipping 671 matching lines @@
       if (this.downloadsRootContextMenuListener_) {
         cr.ui.contextMenuHandler.removeEventListener(
             'show', this.downloadsRootContextMenuListener_);
       }
       this.downloadsRootContextMenuListener_ = function(ev) {
         // Check available space on opening the context menu for Downloads.
         if (ev.element != li || ev.menu != downloadsRootContextMenu)
           return;
 
         downloadsSpaceInnerBar.setAttribute('pending', '');
+        spaceInfoLabel.textContent = strf('SPACE_AVAILABLE', sizeStr);
+
         chrome.fileBrowserPrivate.getSizeStats(
             util.makeFilesystemUrl(path),
             function(sizeStats) {
               updateSpaceInfo(sizeStats, downloadsSpaceInnerBar,
                               downloadsSpaceInfoLabel, downloadsSpaceOuterBar);
             });
       };
 
       cr.ui.contextMenuHandler.addEventListener(
         'show', this.downloadsRootContextMenuListener_);
@@ skipping 489 matching lines @@
   /**
    * Updates search box value when directory gets changed.
    */
   FileManager.prototype.updateSearchBoxOnDirChange_ = function() {
     var searchBox = this.dialogDom_.querySelector('#search-box');
     if (!searchBox.disabled)
       searchBox.value = '';
   },
 
   /**
+   * Update the gear menu.
+   */
+  FileManager.prototype.updateGearMenu_ = function() {
+    this.syncButton.hidden = !this.isOnDrive();
+    this.hostedButton.hidden = !this.isOnDrive();
+
+    // If volume has changed, then fetch remaining space data.
+    if (this.previousRootUrl_ != this.directoryModel_.getCurrentRootUrl())
+      this.refreshRemainingSpace_(true);  // Show loading caption.
+
+    this.previousRootUrl_ = this.directoryModel_.getCurrentRootUrl();
+  },
+
+  /**
+   * Refreshes space info of the current volume.
+   * @param {boolean} showLoadingCaption Whether show loading caption or not.
+   */
+   FileManager.prototype.refreshRemainingSpace_ = function(showLoadingCaption) {
+    var volumeSpaceInfoLabel =
+        this.dialogDom_.querySelector('#volume-space-info-label');
+    var volumeSpaceInnerBar =
+        this.dialogDom_.querySelector('#volume-space-info-bar');
+    var volumeSpaceOuterBar =
+        this.dialogDom_.querySelector('#volume-space-info-bar').parentNode;
+
+    volumeSpaceInnerBar.setAttribute('pending', '');
+
+    if (showLoadingCaption) {
+      volumeSpaceInfoLabel.innerText = str('WAITING_FOR_SPACE_INFO');
+      volumeSpaceInnerBar.style.width = '100%';
+    }
+
+    var currentRootUrl = this.directoryModel_.getCurrentRootUrl();
+    chrome.fileBrowserPrivate.getSizeStats(
+        this.directoryModel_.getCurrentRootUrl(), function(result) {
+          if (this.directoryModel_.getCurrentRootUrl() != currentRootUrl)
+            return;
+          updateSpaceInfo(result,
+                          volumeSpaceInnerBar,
+                          volumeSpaceInfoLabel,
+                          volumeSpaceOuterBar);
+        }.bind(this));
+  }
+
+  /**
    * Update the UI when the current directory changes.
    *
    * @param {cr.Event} event The directory-changed event.
    */
   FileManager.prototype.onDirectoryChanged_ = function(event) {
     this.selectionHandler_.onFileSelectionChanged();
     this.updateSearchBoxOnDirChange_();
     if (this.dialogType == DialogType.FULL_PAGE)
       this.table_.showOfflineColumn(this.isOnDrive());
 
     util.updateAppState(event.initial, this.getCurrentDirectory());
 
     if (this.closeOnUnmount_ && !event.initial &&
           PathUtil.getRootPath(event.previousDirEntry.fullPath) !=
           PathUtil.getRootPath(event.newDirEntry.fullPath)) {
       this.closeOnUnmount_ = false;
     }
 
     this.updateUnformattedDriveStatus_();
-
     this.updateTitle_();
+    this.updateGearMenu_();
   };
 
   FileManager.prototype.updateUnformattedDriveStatus_ = function() {
     var volumeInfo = this.volumeManager_.getVolumeInfo_(
         this.directoryModel_.getCurrentRootPath());
 
     if (volumeInfo.error) {
-      this.dialogContainer_.setAttribute('unformatted', '');
+      this.dialogDom_.setAttribute('unformatted', '');
 
       var errorNode = this.dialogDom_.querySelector('#format-panel > .error');
       if (volumeInfo.error == VolumeManager.Error.UNSUPPORTED_FILESYSTEM) {
         errorNode.textContent = str('UNSUPPORTED_FILESYSTEM_WARNING');
       } else {
         errorNode.textContent = str('UNKNOWN_FILESYSTEM_WARNING');
       }
 
       // Update 'canExecute' for format command so the format button's disabled
       // property is properly set.
       var formatCommand = this.dialogDom_.querySelector('command#format');
       formatCommand.canExecuteChange(errorNode);
     } else {
-      this.dialogContainer_.removeAttribute('unformatted');
+      this.dialogDom_.removeAttribute('unformatted');
     }
   };
 
   FileManager.prototype.findListItemForEvent_ = function(event) {
     return this.findListItemForNode_(event.touchedElement || event.srcElement);
   };
 
   FileManager.prototype.findListItemForNode_ = function(node) {
     var item = this.currentList_.getListItemAncestor(node);
     // TODO(serya): list should check that.
@@ skipping 825 matching lines @@
       handleSplitterDragEnd: function(e) {
         Splitter.prototype.handleSplitterDragEnd.apply(this, arguments);
         this.ownerDocument.documentElement.classList.remove('col-resize');
       }
     };
 
     customSplitter.decorate(splitterElement);
   };
 
   /**
-   * Listener invoked on drive menu show event, to update drive free/total
-   * space info in opened menu.
-   * @private
-   */
-  FileManager.prototype.onDriveMenuShow_ = function() {
-    var driveSpaceInfoLabel =
-        this.dialogDom_.querySelector('#drive-space-info-label');
-
-    var driveSpaceInnerBar =
-        this.dialogDom_.querySelector('#drive-space-info-bar');
-    var driveSpaceOuterBar =
-            this.dialogDom_.querySelector('#drive-space-info-bar').parentNode;
-
-    driveSpaceInnerBar.setAttribute('pending', '');
-    chrome.fileBrowserPrivate.getSizeStats(
-        this.directoryModel_.getCurrentRootUrl(), function(result) {
-          updateSpaceInfo(result, driveSpaceInnerBar, driveSpaceInfoLabel,
-                          driveSpaceOuterBar);
-        });
-  };
-
-  /**
    * Updates default action menu item to match passed taskItem (icon,
    * label and action).
    *
    * @param {Object} defaultItem - taskItem to match.
    * @param {boolean} isMultiple - if multiple tasks available.
    */
   FileManager.prototype.updateContextMenuActionItems = function(defaultItem,
                                                                 isMultiple) {
     if (defaultItem) {
       if (defaultItem.iconType) {
@@ skipping 52 matching lines @@
     return this.directoryModel_.getFileList();
   };
 
   /**
    * @return {cr.ui.List} Current list object.
    */
   FileManager.prototype.getCurrentList = function() {
     return this.currentList_;
   };
 })();