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 529 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.gearMenu_ = this.dialogDom_.querySelector('#gear-menu');
+    this.gearMenu_.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 1466 matching lines @@
    */
   FileManager.prototype.updateSearchBoxOnDirChange_ = function() {
     if (!this.searchBox_.disabled)
       this.searchBox_.value = '';
   };
 
   /**
    * Update the gear menu.
    * @private
    */
   FileManager.prototype.updateGearMenu_ = function() {

[mtomasz, 2013/04/08 09:59:39]

This seems to be correct, but I think we can make it much simpler. We have
already a functionality to hide commands, which is used in
file_manager_commands.js in canExecute: event.command.setHidden(...);

We have a method: canExecuteChange: function(opt_node) in
src/ui/webui/resources/js/cr/ui/command.js. Maybe we could call it when we
detect pressing or releasing the ctrl key, which would hide/show the commands?

What do you think?

[hirono, 2013/04/09 04:05:48]

I fixed the code so that the menu items are hidden by the command framework.

On 2013/04/08 09:59:39, mtomasz wrote:

-    this.syncButton.hidden = !this.isOnDrive();
-    this.hostedButton.hidden = !this.isOnDrive();
+    // Show or hide optional items.
+    var ctrlMenuHidden = !this.dialogDom_.hasAttribute('ctrl-pressing');
+    var menuItems = this.gearMenu_.menuItems;
+    var length = menuItems.length;
+    for (var i = 0; i < length; i++) {
+      var hidden = null;
+      var item = menuItems[i];
+      if (item.getAttribute('required_attr') == 'ctrl-pressing') {
+        if (hidden !== true) {
+          hidden = ctrlMenuHidden;
+        }
+      }
+      if (item.hasAttribute('required_drive')) {
+        if (hidden !== true) {
+          hidden = !this.isOnDrive();
+        }
+      }
+      if (hidden !== null) {
+        if (hidden) {
+          item.setAttribute('hidden', '');
+        } else {
+          item.removeAttribute('hidden');
+        }
+      }
+    }
 
     // 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 461 matching lines @@
    */
   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.updateGearMenu_();
         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 25 matching lines @@
    */
   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.updateGearMenu_();
         return;
     }
   };
 
   /**
    * KeyDown event handler for the div#list-container element.
    * @param {Event} event Key event.
    * @private
    */
   FileManager.prototype.onListKeyDown_ = function(event) {
@@ skipping 828 matching lines @@
       callback(this.preferences_);
       return;
     }
 
     chrome.fileBrowserPrivate.getPreferences(function(prefs) {
       this.preferences_ = prefs;
       callback(prefs);
     }.bind(this));
   };
 })();