Fixed gear menu navigation using keyboard.

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.
 
 'use strict';
 
 /**
  * This variable is checked in SelectFileDialogExtensionBrowserTest.
  * @type {number}
  */
@@ skipping 45 matching lines @@
   // Optional list of file types.
   this.fileTypes_ = this.params_.typeList || [];
   metrics.recordEnum('Create', this.dialogType,
       [DialogType.SELECT_FOLDER,
        DialogType.SELECT_SAVEAS_FILE,
        DialogType.SELECT_OPEN_FILE,
        DialogType.SELECT_OPEN_MULTI_FILE,
        DialogType.FULL_PAGE]);
 
   this.selectionHandler_ = null;
+  this.ctrlKeyPressed_ = false;
 
   this.metadataCache_ = MetadataCache.createFull();
   this.volumeManager_ = VolumeManager.getInstance();
   this.initFileSystem_();
   this.initDom_();
   this.initDialogType_();
 }
 
 /**
  * Maximum delay in milliseconds for updating thumbnails in the bottom panel
@@ skipping 464 matching lines @@
     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. */));
     cr.ui.decorate(this.gearButton_, cr.ui.MenuButton);
 
+    this.dialogDom_.querySelector('#gear-menu').menuItemSelector =
+      'menuitem, hr';
+
     this.syncButton.checkable = true;
     this.hostedButton.checkable = true;
   };
 
   /**
    * One-time initialization of commands.
    * @private
    */
   FileManager.prototype.initCommands_ = function() {
     var commandButtons = this.dialogDom_.querySelectorAll('button[command]');
@@ skipping 1051 matching lines @@
   /**
    * @return {boolean} True if the current directory content is from Google
    *     Drive.
    */
   FileManager.prototype.isOnDrive = function() {
     return this.directoryModel_.getCurrentRootType() === RootType.DRIVE ||
            this.directoryModel_.getCurrentRootType() === RootType.DRIVE_OFFLINE;
   };
 
   /**
+   * @return {boolean} True if the ctrl key is pressed now.
+   */
+  FileManager.prototype.isCtrlKeyPressed = function() {
+    return this.ctrlKeyPressed_;
+  };
+
+  /**
    * @return {boolean} True if the "Available offline" column should be shown in
    *     the table layout.
    */
   FileManager.prototype.shouldShowOfflineColumn = function() {
     return this.directoryModel_.getCurrentRootType() === RootType.DRIVE;
   };
 
   /**
    * Overrides default handling for clicks on hyperlinks.
    * Opens them in a separate tab and if it's an open/save dialog
@@ skipping 391 matching lines @@
 
   /**
    * Updates search box value when directory gets changed.
    * @private
    */
   FileManager.prototype.updateSearchBoxOnDirChange_ = function() {
     if (!this.searchBox_.disabled)
       this.searchBox_.value = '';
   };
 
   /**

[mtomasz, 2013/04/09 05:44:58]

This seems to be unused.

[hirono, 2013/04/09 06:01:04]

'updateGearMenu_' is used to update remaining space data and to hide menu items
that are not assigned commands. (e.g. 'syncButton', 'hostedButton')

On 2013/04/09 05:44:58, mtomasz wrote:

[mtomasz, 2013/04/09 06:11:39]

You're right!

    * Update the gear menu.
    * @private
    */
   FileManager.prototype.updateGearMenu_ = function() {
     this.syncButton.hidden = !this.isOnDrive();
     this.hostedButton.hidden = !this.isOnDrive();
+    this.document_.getElementById('drive-separator').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.
@@ skipping 460 matching lines @@
    * @private
    */
   FileManager.prototype.onKeyDown_ = function(event) {
     if (event.srcElement === this.renameInput_) {
       // Ignore keydown handler in the rename input box.
       return;
     }
 
     switch (util.getKeyModifiers(event) + event.keyCode) {
       case 'Ctrl-17':  // Ctrl => Show hidden setting
-        this.dialogDom_.setAttribute('ctrl-pressing', 'true');
+        this.setCtrlKeyPressed_(true);
         return;
 
       case 'Ctrl-190':  // Ctrl-. => Toggle filter files.
         this.fileFilter_.setFilterHidden(
             !this.fileFilter_.isFilterHiddenOn());
         event.preventDefault();
         return;
 
       case '27':  // Escape => Cancel dialog.
         if (this.copyManager_ &&
@@ skipping 24 matching lines @@
    * @private
    */
   FileManager.prototype.onKeyUp_ = function(event) {
     if (event.srcElement === this.renameInput_) {
       // Ignore keydown handler in the rename input box.
       return;
     }
 
     switch (util.getKeyModifiers(event) + event.keyCode) {
       case '17':  // Ctrl => Hide hidden setting
-        this.dialogDom_.removeAttribute('ctrl-pressing');
+        this.setCtrlKeyPressed_(false);
         return;
     }
   };
 
   /**
    * KeyDown event handler for the div#list-container element.
    * @param {Event} event Key event.
    * @private
    */
   FileManager.prototype.onListKeyDown_ = function(event) {
@@ skipping 827 matching lines @@
     if (!opt_update && this.preferences_ !== undefined) {
       callback(this.preferences_);
       return;
     }
 
     chrome.fileBrowserPrivate.getPreferences(function(prefs) {
       this.preferences_ = prefs;
       callback(prefs);
     }.bind(this));
   };
+
+  /**
+   * Set the flag expressing whether the ctrl key is pressed or not.
+   * @param {boolean} flag New value of the flag
+   * @private
+   */
+  FileManager.prototype.setCtrlKeyPressed_ = function(flag) {
+    this.ctrlKeyPressed_ = flag;

[mtomasz, 2013/04/09 05:44:58]

Can we use querySelector instead for consistency?

[hirono, 2013/04/09 06:01:04]

I think getElementById is a little faster than querySelector.
Is this reasonable excuse to use getElementById?
(or is consistency more important here?)

On 2013/04/09 05:44:58, mtomasz wrote:

[mtomasz, 2013/04/09 06:11:39]

It is faster (http://jsperf.com/queryselector-vs-getdocumentbyid), but it is
still microseconds so doesn't matter here. I would go for consistency.

[hirono, 2013/04/09 06:43:13]

Done.

+    this.document_.getElementById('drive-clear-local-cache').canExecuteChange();
+    this.document_.getElementById('drive-reload').canExecuteChange();
+  };
 })();