Merge 242183 "cros: Support up/down key in webui for keyboard flow."

> cros: Support up/down key in webui for keyboard flow.
>
> - Update keyboard_utils to handle up/down keys;
> - Update network drop down to not show popup on up/down keys;
> - Add up/down key released accelerator for moving focus for Gaia iframe;
>
> BUG=329067
>
> Review URL: https://codereview.chromium.org/101283005

TBR=xiyuan@chromium.org

Review URL: https://codereview.chromium.org/115523006

git-svn-id: svn://svn.chromium.org/chrome/branches/1750/src@243169 0039d316-1c4b-4281-b951-d872f2087c98

4 files changed, 49 insertions, 17 deletions

diff --git a/chrome/browser/chromeos/login/webui_login_view.cc b/chrome/browser/chromeos/login/webui_login_view.cc
index b70ab9c..49a93a9 100644
--- a/chrome/browser/chromeos/login/webui_login_view.cc
+++ b/chrome/browser/chromeos/login/webui_login_view.cc
@@ -55,8 +55,8 @@ const char kAccelNameEnrollment[] = "enrollment";
 const char kAccelNameKioskEnable[] = "kiosk_enable";
 const char kAccelNameVersion[] = "version";
 const char kAccelNameReset[] = "reset";
-const char kAccelNameLeft[] = "left";
-const char kAccelNameRight[] = "right";
+const char kAccelFocusPrev[] = "focus_prev";
+const char kAccelFocusNext[] = "focus_next";
 const char kAccelNameDeviceRequisition[] = "device_requisition";
 const char kAccelNameDeviceRequisitionRemora[] = "device_requisition_remora";
 const char kAccelNameAppLaunchBailout[] = "app_launch_bailout";
@@ -118,10 +118,17 @@ WebUILoginView::WebUILoginView()
       kAccelNameReset;
 
   accel_map_[ui::Accelerator(ui::VKEY_LEFT, ui::EF_NONE)] =
-      kAccelNameLeft;
-
+      kAccelFocusPrev;
   accel_map_[ui::Accelerator(ui::VKEY_RIGHT, ui::EF_NONE)] =
-      kAccelNameRight;
+      kAccelFocusNext;
+
+  // Use KEY_RELEASED because Gaia consumes KEY_PRESSED for up/down key.
+  ui::Accelerator key_up(ui::VKEY_UP, ui::EF_NONE);
+  key_up.set_type(ui::ET_KEY_RELEASED);
+  ui::Accelerator key_down(ui::VKEY_DOWN, ui::EF_NONE);
+  key_down.set_type(ui::ET_KEY_RELEASED);
+  accel_map_[key_up] = kAccelFocusPrev;
+  accel_map_[key_down] = kAccelFocusNext;
 
   accel_map_[ui::Accelerator(
       ui::VKEY_D, ui::EF_CONTROL_DOWN | ui::EF_ALT_DOWN | ui::EF_SHIFT_DOWN)] =
diff --git a/chrome/browser/resources/chromeos/keyboard/keyboard_utils.js b/chrome/browser/resources/chromeos/keyboard/keyboard_utils.js
index 27c862a8..931b5aa 100644
--- a/chrome/browser/resources/chromeos/keyboard/keyboard_utils.js
+++ b/chrome/browser/resources/chromeos/keyboard/keyboard_utils.js
@@ -8,7 +8,7 @@
 var keyboard = {};
 
 /**
- * Swallows left and right keypress and keyup events.
+ * Swallows keypress and keyup events of arrow keys.
  * @param {KeyboardEvent} event Raised event.
  * @private
  */
@@ -16,14 +16,17 @@ keyboard.onKeyIgnore_ = function(event) {
   if (event.ctrlKey || event.shiftKey || event.altKey || event.metaKey)
     return;
 
-  if (event.keyIdentifier == 'Left' || event.keyIdentifier == 'Right') {
+  if (event.keyIdentifier == 'Left' ||
+      event.keyIdentifier == 'Right' ||
+      event.keyIdentifier == 'Up' ||
+      event.keyIdentifier == 'Down') {
     event.stopPropagation();
     event.preventDefault();
   }
 };
 
 /**
- * Converts right/left into tab/shift-tab key events.
+ * Converts arrow keys into tab/shift-tab key events.
  * @param {KeyboardEvent} event Raised event.
  * @private
  */
@@ -31,11 +34,15 @@ keyboard.onKeyDown_ = function(event) {
    if (event.ctrlKey || event.shiftKey || event.altKey || event.metaKey)
      return;
 
-   if (event.keyIdentifier == 'Left') {
+   var needsUpDownKeys = event.target.classList.contains('needs-up-down-keys');
+
+   if (event.keyIdentifier == 'Left' ||
+       (!needsUpDownKeys && event.keyIdentifier == 'Up')) {
      keyboard.raiseKeyFocusPrevious(document.activeElement);
      event.stopPropagation();
      event.preventDefault();
-   } else if (event.keyIdentifier == 'Right') {
+   } else if (event.keyIdentifier == 'Right' ||
+              (!needsUpDownKeys && event.keyIdentifier == 'Down')) {
      keyboard.raiseKeyFocusNext(document.activeElement);
      event.stopPropagation();
      event.preventDefault();
diff --git a/chrome/browser/resources/chromeos/login/display_manager.js b/chrome/browser/resources/chromeos/login/display_manager.js
index e7af9cc..a2a00ff 100644
--- a/chrome/browser/resources/chromeos/login/display_manager.js
+++ b/chrome/browser/resources/chromeos/login/display_manager.js
@@ -30,8 +30,8 @@
 /** @const */ var ACCELERATOR_KIOSK_ENABLE = 'kiosk_enable';
 /** @const */ var ACCELERATOR_VERSION = 'version';
 /** @const */ var ACCELERATOR_RESET = 'reset';
-/** @const */ var ACCELERATOR_LEFT = 'left';
-/** @const */ var ACCELERATOR_RIGHT = 'right';
+/** @const */ var ACCELERATOR_FOCUS_PREV = 'focus_prev';
+/** @const */ var ACCELERATOR_FOCUS_NEXT = 'focus_next';
 /** @const */ var ACCELERATOR_DEVICE_REQUISITION = 'device_requisition';
 /** @const */ var ACCELERATOR_DEVICE_REQUISITION_REMORA =
     'device_requisition_remora';
@@ -180,8 +180,10 @@ cr.define('cr.ui.login', function() {
      */
     set forceKeyboardFlow(value) {
       this.forceKeyboardFlow_ = value;
-      if (value)
+      if (value) {
         keyboard.initializeKeyboardFlow();
+        cr.ui.Dropdown.enableKeyboardFlow();
+      }
     },
 
     /**
@@ -249,9 +251,9 @@ cr.define('cr.ui.login', function() {
         return;
 
       // Handle special accelerators for keyboard enhanced navigation flow.
-      if (name == ACCELERATOR_LEFT)
+      if (name == ACCELERATOR_FOCUS_PREV)
         keyboard.raiseKeyFocusPrevious(document.activeElement);
-      else if (name == ACCELERATOR_RIGHT)
+      else if (name == ACCELERATOR_FOCUS_NEXT)
         keyboard.raiseKeyFocusNext(document.activeElement);
     },
 
diff --git a/chrome/browser/resources/chromeos/login/network_dropdown.js b/chrome/browser/resources/chromeos/login/network_dropdown.js
index 084ca72..3a5a3f5 100644
--- a/chrome/browser/resources/chromeos/login/network_dropdown.js
+++ b/chrome/browser/resources/chromeos/login/network_dropdown.js
@@ -8,6 +8,12 @@
 
 cr.define('cr.ui', function() {
   /**
+   * Whether keyboard flow is in use. When setting to true, up/down arrow key
+   * will be used to move focus instead of opening the drop down.
+   */
+  var useKeyboardFlow = false;
+
+  /**
    * Creates a new container for the drop down menu items.
    * @constructor
    * @extends {HTMLDivElement}
@@ -125,6 +131,9 @@ cr.define('cr.ui', function() {
       } else {
         this.title_.removeAttribute('aria-activedescendant');
       }
+
+      // Flag for keyboard flow util to forward the up/down keys.
+      this.title_.classList.toggle('needs-up-down-keys', show);
     },
 
     /**
@@ -290,8 +299,8 @@ cr.define('cr.ui', function() {
         if (this.inFocus && !this.controller.isShown &&
             (e.keyCode == DropDown.KEYCODE_ENTER ||
              e.keyCode == DropDown.KEYCODE_SPACE ||
-             e.keyCode == DropDown.KEYCODE_UP ||
-             e.keyCode == DropDown.KEYCODE_DOWN)) {
+             (!useKeyboardFlow && (e.keyCode == DropDown.KEYCODE_UP ||
+                                   e.keyCode == DropDown.KEYCODE_DOWN)))) {
           this.opening = true;
           this.controller.isShown = true;
           e.stopPropagation();
@@ -416,6 +425,13 @@ cr.define('cr.ui', function() {
     chrome.send('networkDropdownRefresh');
   };
 
+  /**
+   * Sets the keyboard flow flag.
+   */
+  DropDown.enableKeyboardFlow = function() {
+    useKeyboardFlow = true;
+  };
+
   return {
     DropDown: DropDown
   };