Show drive-related settings on gear menu only when Ctrl key is pressed.

chrome/browser/resources/file_manager/foreground/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.
 
 'use strict';
 
 /**
  * FileManager constructor.
  *
  * FileManager objects encapsulate the functionality of the file selector
@@ skipping 15 matching lines @@
   /**
    * True while a user is pressing <Tab>.
    * This is used for identifying the trigger causing the filelist to
    * be focused.
    * @type {boolean}
    * @private
    */
   this.pressingTab_ = false;
 
   /**
+   * True while a user is pressing <Ctrl>.
+   *
+   * TODO(fukino): This key is used only for controlling gear menu, so it
+   * shoudl be moved to GearMenu class. crbug.com/366032.
+   *
+   * @type {boolean}
+   * @private
+   */
+  this.pressingCtrl_ = false;
+
+  /**
+   * True if shown gear menu is in secret mode.
+   *
+   * TODO(fukino): The state of gear menu should be moved to GearMenu class.
+   * crbug.com/366032.
+   *
+   * @type {boolean}
+   * @private
+   */
+  this.isOnSecretGearMenu_ = false;

[yoshiki, 2014/04/24 05:10:47]

nit: How about using "isSecretGearMenuShown"?

[fukino, 2014/04/24 10:28:53]

Done. Yes, it looks more readable. Thanks!

+
+  /**
    * SelectionHandler.
    * @type {SelectionHandler}
    * @private
    */
   this.selectionHandler_ = null;
 
   /**
    * VolumeInfo of the current volume.
    * @type {VolumeInfo}
    * @private
@@ skipping 385 matching lines @@
         this.dialogDom_.querySelector('#directory-tree-context-menu');
     cr.ui.Menu.decorate(this.directoryTreeContextMenu_);
     this.directoryTree_.contextMenuForSubitems = this.directoryTreeContextMenu_;
 
     this.textContextMenu_ =
         this.dialogDom_.querySelector('#text-context-menu');
     cr.ui.Menu.decorate(this.textContextMenu_);
 
     this.gearButton_ = this.dialogDom_.querySelector('#gear-button');
     this.gearButton_.addEventListener('menushow',
-        this.refreshRemainingSpace_.bind(this,
-                                         false /* Without loading caption. */));
+        this.onShowGearMenu_.bind(this));
     chrome.fileBrowserPrivate.onDesktopChanged.addListener(function() {
       this.updateVisitDesktopMenus_();
       this.ui_.updateProfileBadge();
     }.bind(this));
     chrome.fileBrowserPrivate.onProfileAdded.addListener(
         this.updateVisitDesktopMenus_.bind(this));
     this.updateVisitDesktopMenus_();
 
     this.dialogDom_.querySelector('#gear-menu').menuItemSelector =
         'menuitem, hr';
@@ skipping 41 matching lines @@
     if (appWindow.isMaximized())
       appWindow.restore();
     else
       appWindow.maximize();
   };
 
   FileManager.prototype.onClose = function() {
     window.close();
   };
 
+  FileManager.prototype.onShowGearMenu_ = function() {
+    this.refreshRemainingSpace_(false);  /* Without loading caption. */
+
+    // If the menu is opened while CTRL key pressed, secret menu itemscan be
+    // shown.
+    this.isOnSecretGearMenu_ = this.pressingCtrl_;
+
+    // Update view of drive-related settings.
+    this.commandHandler.updateAvailability();
+    this.document_.getElementById('drive-separator').hidden =
+        !this.shouldShowDriveSettings();
+  };
+
   /**
    * One-time initialization of commands.
    * @private
    */
   FileManager.prototype.initCommands_ = function() {
     this.commandHandler = new CommandHandler(this);
 
     // TODO(hirono): Move the following block to the UI part.
     var commandButtons = this.dialogDom_.querySelectorAll('button[command]');
     for (var j = 0; j < commandButtons.length; j++)
@@ skipping 289 matching lines @@
     this.onCancelBound_ = this.onCancel_.bind(this);
     this.cancelButton_.addEventListener('click', this.onCancelBound_);
 
     this.decorateSplitter(
         this.dialogDom_.querySelector('#navigation-list-splitter'));
     this.decorateSplitter(
         this.dialogDom_.querySelector('#middlebar-splitter'));
 
     this.dialogContainer_ = this.dialogDom_.querySelector('.dialog-container');
 
-    this.syncButton = this.dialogDom_.querySelector('#drive-sync-settings');
-    this.syncButton.addEventListener('click', this.onDrivePrefClick_.bind(
-        this, 'cellularDisabled', false /* not inverted */));
-
-    this.hostedButton = this.dialogDom_.querySelector('#drive-hosted-settings');
-    this.hostedButton.addEventListener('click', this.onDrivePrefClick_.bind(
-        this, 'hostedFilesDisabled', true /* inverted */));
+    this.syncButton = this.dialogDom_.querySelector(
+        '#gear-menu-drive-sync-settings');
+    this.hostedButton = this.dialogDom_.querySelector(
+        '#gear-menu-drive-hosted-settings');
 
     this.detailViewButton_ =
         this.dialogDom_.querySelector('#detail-view');
     this.detailViewButton_.addEventListener('activate',
         this.onDetailViewButtonClick_.bind(this));
 
     this.thumbnailViewButton_ =
         this.dialogDom_.querySelector('#thumbnail-view');
     this.thumbnailViewButton_.addEventListener('activate',
         this.onThumbnailViewButtonClick_.bind(this));
@@ skipping 866 matching lines @@
    */
   FileManager.prototype.isOnDrive = function() {
     var rootType = this.directoryModel_.getCurrentRootType();
     return rootType === RootType.DRIVE ||
            rootType === RootType.DRIVE_SHARED_WITH_ME ||
            rootType === RootType.DRIVE_RECENT ||
            rootType === RootType.DRIVE_OFFLINE;
   };
 
   /**
+   * Check if the drive-related setting items should be shown on currently
+   * displayed gear menu.
+   * @return {boolean} True if those setting items should be shown.
+   */
+  FileManager.prototype.shouldShowDriveSettings = function() {
+    return this.isOnDrive() && this.isOnSecretGearMenu_;
+  };
+
+  /**
    * Overrides default handling for clicks on hyperlinks.
    * In a packaged apps links with targer='_blank' open in a new tab by
    * default, other links do not open at all.
    *
    * @param {Event} event Click event.
    * @private
    */
   FileManager.prototype.onExternalLinkClick_ = function(event) {
     if (event.target.tagName != 'A' || !event.target.href)
       return;
@@ skipping 463 matching lines @@
       return;
 
     this.document_.title = this.currentVolumeInfo_.label;
   };
 
   /**
    * Update the gear menu.
    * @private
    */
   FileManager.prototype.updateGearMenu_ = function() {
-    var hideItemsForDrive = !this.isOnDrive();
-    this.syncButton.hidden = hideItemsForDrive;
-    this.hostedButton.hidden = hideItemsForDrive;
-    this.document_.getElementById('drive-separator').hidden =
-        hideItemsForDrive;
     this.refreshRemainingSpace_(true);  // Show loading caption.
   };
 
   /**
    * Update menus that move the window to the other profile's desktop.
    * TODO(hirono): Add the GearMenu class and make it a member of the class.
    * TODO(hirono): Handle the case where a profile is added while the menu is
    *     opened.
    * @private
    */
@@ skipping 649 matching lines @@
   };
 
   /**
    * KeyDown event handler for the document.
    * @param {Event} event Key event.
    * @private
    */
   FileManager.prototype.onKeyDown_ = function(event) {
     if (event.keyCode === 9)  // Tab
       this.pressingTab_ = true;
+    if (event.keyCode === 17)  // Ctrl
+      this.pressingCtrl_ = true;
 
     if (event.srcElement === this.renameInput_) {
       // Ignore keydown handler in the rename input box.
       return;
     }
 
     switch (util.getKeyModifiers(event) + event.keyCode) {
       case 'Ctrl-190':  // Ctrl-. => Toggle filter files.
         this.fileFilter_.setFilterHidden(
             !this.fileFilter_.isFilterHiddenOn());
@@ skipping 11 matching lines @@
   };
 
   /**
    * KeyUp event handler for the document.
    * @param {Event} event Key event.
    * @private
    */
   FileManager.prototype.onKeyUp_ = function(event) {
     if (event.keyCode === 9)  // Tab
       this.pressingTab_ = false;
+    if (event.keyCode == 17)  // Ctrl
+      this.pressingCtrl_ = false;
   };
 
   /**
    * KeyDown event handler for the div#list-container element.
    * @param {Event} event Key event.
    * @private
    */
   FileManager.prototype.onListKeyDown_ = function(event) {
     if (event.srcElement.tagName == 'INPUT') {
       // Ignore keydown handler in the rename input box.
@@ skipping 458 matching lines @@
           if (!valid) {
             self.alert.show(str('ERROR_LONG_NAME'),
                             function() { onDone(false); });
           } else {
             onDone(true);
           }
         });
   };
 
   /**
-   * Handler invoked on preference setting in drive context menu.
-   *
-   * @param {string} pref  The preference to alter.
-   * @param {boolean} inverted Invert the value if true.
-   * @param {Event}  event The click event.
-   * @private
+   * Toggle whether mobile data is used for sync.
    */
-  FileManager.prototype.onDrivePrefClick_ = function(pref, inverted, event) {
-    var newValue = !event.target.hasAttribute('checked');
-    if (newValue)
-      event.target.setAttribute('checked', 'checked');
-    else
-      event.target.removeAttribute('checked');
-
-    var changeInfo = {};
-    changeInfo[pref] = inverted ? !newValue : newValue;
+  FileManager.prototype.toggleDriveSyncSettings = function() {
+    // If checked, the sync is disabled.
+    var nowCellularDisabled = this.syncButton.hasAttribute('checked');
+    var changeInfo = {cellularDisabled: !nowCellularDisabled};
     chrome.fileBrowserPrivate.setPreferences(changeInfo);
   };
 
+  /**
+   * Toggle whether Google Docs files are shown.
+   */
+  FileManager.prototype.toggleDriveHostedSettings = function() {
+    // If checked, showing drive hosted files is enabled.
+    var nowHostedFilesEnabled = this.hostedButton.hasAttribute('checked');
+    var nowHostedFilesDisabled = !nowHostedFilesEnabled;
+    var changeInfo = {hostedFilesDisabled: !nowHostedFilesDisabled};
+    chrome.fileBrowserPrivate.setPreferences(changeInfo);
+  };
+
   /**
    * Invoked when the search box is changed.
    *
    * @param {Event} event The changed event.
    * @private
    */
   FileManager.prototype.onSearchBoxUpdate_ = function(event) {
     var searchString = this.searchBox_.value;
 
     if (this.isOnDrive()) {
@@ skipping 302 matching lines @@
       callback(this.preferences_);
       return;
     }
 
     chrome.fileBrowserPrivate.getPreferences(function(prefs) {
       this.preferences_ = prefs;
       callback(prefs);
     }.bind(this));
   };
 })();