Change keyboard menu to toggle.

BUG=340779

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

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@250270 0039d316-1c4b-4281-b951-d872f2087c98

4 files changed, 135 insertions, 135 deletions

diff --git a/chrome/test/data/chromeos/virtual_keyboard/control_keys_test.js b/chrome/test/data/chromeos/virtual_keyboard/control_keys_test.js
index fb0d31a..9c2b21b 100644
--- a/chrome/test/data/chromeos/virtual_keyboard/control_keys_test.js
+++ b/chrome/test/data/chromeos/virtual_keyboard/control_keys_test.js
@@ -307,22 +307,3 @@ function testModifierKeysAsync(testDoneCallback) {
   onKeyboardReady('testModifierKeysAsync', setupWork, testDoneCallback,
       [onSystemQwertyLower, onReset]);
 }
-
-/**
- * Tests that pressing the hide keyboard key calls the appropriate hide keyboard
- * API. The test is run asynchronously since the keyboard loads keysets
- * dynamically.
- */
-function testHideKeyboard(testDoneCallback) {
-  var runTest = function() {
-    var hideKey = $('keyboard').querySelector('kb-hide-keyboard-key');
-    assertTrue(!!hideKey, 'Unable to find key');
-
-    chrome.virtualKeyboardPrivate.hideKeyboard.addExpectation();
-    chrome.virtualKeyboardPrivate.lockKeyboard.addExpectation(false);
-
-    hideKey.down();
-    hideKey.up();
-  };
-  onKeyboardReady('testHideKeyboard', runTest, testDoneCallback);
-}
diff --git a/chrome/test/data/chromeos/virtual_keyboard/hide_keyboard_key_test.js b/chrome/test/data/chromeos/virtual_keyboard/hide_keyboard_key_test.js
index 859c6f36..136fb6d 100644
--- a/chrome/test/data/chromeos/virtual_keyboard/hide_keyboard_key_test.js
+++ b/chrome/test/data/chromeos/virtual_keyboard/hide_keyboard_key_test.js
@@ -31,57 +31,54 @@ HideKeyboardKeyTester.prototype = {
   },
 
   /**
-   * Mocks pressing on hide keyboard key.
+   * Mocks tap/click on hide keyboard key. It should pop up the overlay menu.
    * @param {string} keysetId Initial keyset.
    */
-  keyPress: function(keysetId) {
+  tapHideKeyboard: function(keysetId) {
     var self = this;
+    var mockEvent = {pointerId: 1};
+    mockEvent.stopPropagation = function() {};
     var fn = function() {
-      Debug('Mock keypress on hide keyboard key.');
-
-      // Verify that popup is initially hidden.
-      var popup = self.overlay;
-      assertTrue(!!popup && popup.hidden,
-                 'Keyboard overlay should be hidden initially.');
+      Debug('Mock tap on hide keyboard key.');
 
       var hideKey =
           $('keyboard').activeKeyset.querySelector('kb-hide-keyboard-key');
       assertTrue(!!hideKey, 'Unable to find hide keyboard key.');
-      hideKey.down({pointerId: 1});
+
+      hideKey.down(mockEvent);
+      hideKey.up(mockEvent);
     };
     this.addWaitCondition(fn, keysetId);
     this.addSubtask(fn);
+    this.verifyOverlayVisibilityChange(true);
   },
 
   /**
-   * Mocks tap/click on hide keyboard key. It should hide and unlock keyboard.
+   * Mocks tap/click on the overlay menu. It should hide the overlay menu.
    * @param {string} keysetId Initial keyset.
    */
-  keyTap: function(keysetId) {
+  tapOverlay: function(keysetId) {
+    var mockEvent = {pointerId: 1};
+    mockEvent.stopPropagation = function() {};
     var self = this;
     var fn = function() {
-      Debug('Mock keypress on hide keyboard key.');
-
-      var hideKey =
-          $('keyboard').activeKeyset.querySelector('kb-hide-keyboard-key');
-      assertTrue(!!hideKey, 'Unable to find hide keyboard key.');
-
-      chrome.virtualKeyboardPrivate.hideKeyboard.addExpectation();
-      // Hide keyboard should unlock keyboard too.
-      chrome.virtualKeyboardPrivate.lockKeyboard.addExpectation(false);
-
-      hideKey.down({pointerId: 1});
-      hideKey.up({pointerId: 1});
+      Debug('Mock tap on overlay.');
+      var overlay = self.overlay;
+      overlay.up(mockEvent);
     };
     this.addWaitCondition(fn, keysetId);
     this.addSubtask(fn);
+    this.verifyOverlayVisibilityChange(false);
   },
 
   /**
    * Mocks selection of lock/unlock button from the options menu.
+   * @param {string} keysetId Initial keyset.
    * @param {boolean} expect Whether or not the keyboard should be locked.
    */
-  selectLockUnlockButton: function(expect) {
+  selectLockUnlockButton: function(keysetId, expect) {
+    var mockEvent = {pointerId: 1};
+    mockEvent.stopPropagation = function() {};
     var self = this;
     var fn = function() {
       Debug('mock keyup on lock/unlock button.');
@@ -92,53 +89,97 @@ HideKeyboardKeyTester.prototype = {
       var lockUnlockButton = optionsMenu.shadowRoot.querySelector(
           'kb-options-menu-toggle-lock-item');
       assertTrue(!!lockUnlockButton, 'Unable to find lock/unlock button.');
-
-      // should hide keyboard
+      // Should toggle lock.
       chrome.virtualKeyboardPrivate.lockKeyboard.addExpectation(expect);
-      lockUnlockButton.up();
-      self.overlay.up();
+      lockUnlockButton.up(mockEvent);
+      self.overlay.up(mockEvent);
     };
-    fn.waitCondition = {
-      state: 'overlayVisibility',
-      value: true
+    this.addWaitCondition(fn, keysetId);
+    this.addSubtask(fn);
+    this.verifyOverlayVisibilityChange(false);
+  },
+
+  /**
+   * Mocks selection of hide from the options menu.
+   * @param {string} keysetId Initial keyset.
+   */
+  selectHide: function(keysetId) {
+    var mockEvent = {pointerId: 1};
+    mockEvent.stopPropagation = function() {};
+    var self = this;
+    var fn = function() {
+      Debug('mock keyup on hide button.');
+      var optionsMenu = self.overlay.shadowRoot.querySelector(
+          'kb-options-menu');
+      assertTrue(!!optionsMenu, 'Unable to find options menu.');
+      var button = optionsMenu.shadowRoot.querySelector(
+          'kb-options-menu-item[layout=none]');
+      assertTrue(!!button, 'Unable to find hide button.');
+      // Expect hideKeyboard to be called.
+      chrome.virtualKeyboardPrivate.hideKeyboard.addExpectation();
+      // hideKeyboard in api_adapter also unlocks the keyboard.
+      chrome.virtualKeyboardPrivate.lockKeyboard.addExpectation(false);
+      button.up(mockEvent);
+      self.overlay.up(mockEvent);
     };
+    this.addWaitCondition(fn, keysetId);
     this.addSubtask(fn);
+    this.verifyOverlayVisibilityChange(false);
   },
 
   /**
-   * Waits for the overlay to close.
+   * Waits for the overlay to change visibility.
+   * @param {string} keysetId Initial keyset.
    */
-  verifyClosedOverlay: function() {
+  verifyOverlayVisibilityChange: function(visibility) {
     var fn = function() {
-      Debug('Validated that overlay has closed.');
+      if (visibility)
+        Debug('Validated that overlay is now visible.');
+      else
+        Debug('Validated that overlay is now hidden.');
     };
     fn.waitCondition = {
       state: 'overlayVisibility',
-      value: false
+      value: visibility
     };
     this.addSubtask(fn);
   }
 };
 
-function testLockUnlockKeyboard(testDoneCallback) {
+/**
+ * Tests that the overlay menu appears when the hide keyboard button is clicked
+ * and disappears when the overlay is then clicked.
+ * @param {Function} testDoneCallback The callback function on completion.
+ */
+function testOverlayMenu(testDoneCallback) {
   var tester = new HideKeyboardKeyTester(Layout.DEFAULT);
+  tester.tapHideKeyboard(Keyset.LOWER);
+  tester.tapOverlay(Keyset.LOWER);
+  tester.scheduleTest('testOverlayMenu', testDoneCallback);
+}
 
-  /**
-   * Mocks type on hide keyboard key and select lock/unlock button.
-   * @param {boolean} expect Whether or not the keyboard should be locked.
-   */
-  var checkTypeLockUnlockKey = function(expect) {
-    tester.keyPress(Keyset.LOWER);
-    tester.wait(1000, Keyset.LOWER);
-    tester.selectLockUnlockButton(expect);
-    tester.verifyClosedOverlay();
-  };
+/**
+ * Tests that clicking hide in the overlay menu hides the keyboard.
+ * @param {Function} testDoneCallback The callback function on completion.
+ */
+function testHideKeyboard(testDoneCallback) {
+  var tester = new HideKeyboardKeyTester(Layout.DEFAULT);
+  tester.tapHideKeyboard(Keyset.LOWER);
+  tester.selectHide(Keyset.LOWER);
+  tester.scheduleTest('testHideKeyboard', testDoneCallback);
+}
 
-  checkTypeLockUnlockKey(true);  // Expect to lock keyboard.
-  checkTypeLockUnlockKey(false);  // Expect to unlock keyboard.
+/**
+ * Tests that the lock keyboard in the overlay menu toggles.
+ * @param {Function} testDoneCallback The callback function on completion.
+ */
+function testLockKeyboard(testDoneCallback) {
+  var tester = new HideKeyboardKeyTester(Layout.DEFAULT);
+  tester.tapHideKeyboard(Keyset.LOWER);
+  tester.selectLockUnlockButton(Keyset.LOWER, true);
 
-  checkTypeLockUnlockKey(true);  // Expect to lock keyboard.
-  tester.keyTap(Keyset.LOWER);
+  tester.tapHideKeyboard(Keyset.LOWER);
+  tester.selectLockUnlockButton(Keyset.LOWER, false);
 
-  tester.scheduleTest('testLockUnlockKeyboard', testDoneCallback);
+  tester.scheduleTest('testLockKeyboard', testDoneCallback);
 }
diff --git a/ui/keyboard/resources/elements/kb-key.html b/ui/keyboard/resources/elements/kb-key.html
index bd7da2a..7b36278 100644
--- a/ui/keyboard/resources/elements/kb-key.html
+++ b/ui/keyboard/resources/elements/kb-key.html
@@ -162,35 +162,14 @@
     align="right" char="Invalid" extends="kb-key">
   <script>
     Polymer('kb-hide-keyboard-key', {
-      /**
-       * Timer for a long press event which triggers the display of a keyboard
-       * options menu.
-       * @type {?Function}
-       */
-      longPressTimer: undefined,
-
-      down: function(event) {
-         this.longPressTimer = this.async(function() {
-           if (this.longPressTimer) {
-             clearTimeout(this.longPressTimer);
-             this.longPressTimer = undefined;
-             var details = {
-               left: this.offsetLeft,
-               top: this.offsetTop,
-               width: this.clientWidth,
-             };
-             this.fire('show-options', details);
-           }
-         }, null, LONGPRESS_DELAY_MSEC);
-      },
-
       up: function(event) {
-        if (this.longPressTimer) {
-          clearTimeout(this.longPressTimer);
-          hideKeyboard();
-          this.longPressTimer = undefined;
-        }
-      }
+        var details = {
+          left: this.offsetLeft,
+          top: this.offsetTop,
+          width: this.clientWidth,
+        };
+        this.fire('show-options', details);
+      },
     });
   </script>
 </polymer-element>
diff --git a/ui/keyboard/resources/elements/kb-options-menu.html b/ui/keyboard/resources/elements/kb-options-menu.html
index c67691e..9d54d78 100644
--- a/ui/keyboard/resources/elements/kb-options-menu.html
+++ b/ui/keyboard/resources/elements/kb-options-menu.html
@@ -4,13 +4,16 @@
   -- found in the LICENSE file.
   -->
 
-<polymer-element name="kb-options-menu-item" attributes="layout label active"
-    on-pointerup="up" on-pointerover="over" on-pointerout="out">
+<polymer-element name="kb-options-menu-item" attributes="label active"
+    on-pointerdown="down" on-pointerover="over" on-pointerout="out"
+    on-pointerup="up">bord
   <template>
     <style>
       :host {
-        -webkit-padding-end: 5px;
-        -webkit-padding-start: 5px;
+        -webkit-padding-after: 5px;
+        -webkit-padding-before: 5px;
+        -webkit-padding-end: 40px;
+        -webkit-padding-start: 40px;
         color: #fff;
         display: -webkit-box;
         font-family: 'Open Sans', 'Noto Sans UI', sans-serif;
@@ -27,17 +30,8 @@
   </template>
   <script>
     Polymer('kb-options-menu-item', {
-      /**
-       * Layout to select on a key press.
-       */
-      layout: null,
-
-      up: function(event) {
-        if (this.layout == 'none')
-          hideKeyboard();
-        else
-          this.fire('set-layout', {layout: this.layout});
-        this.hidden = true;
+      down: function(event) {
+        event.stopPropagation();
       },
 
       over: function(event) {
@@ -47,6 +41,11 @@
       out: function(event) {
         this.classList.remove('active');
       },
+
+      up: function(event) {
+        this.hidden = true;
+        hideKeyboard();
+      },
     });
   </script>
 </polymer-element>
@@ -94,39 +93,32 @@
         white-space:nowrap;
         z-index: 1;
       }
-
-      :host(kb-keyboard[layout=system-qwerty])
-          kb-options-menu-item:not([layout=none]) {
-        display:none;
+      .arm-dismiss :host {
+        opacity: 0;
       }
     </style>
-    <!-- TODO(kevers): This is a temporary placeholder to enable testing
-      -- of layout switching.  Deprecate once a decision is reached on
-      -- a more permanent solution for layout selection. -->
     <kb-options-menu-toggle-lock-item></kb-options-menu-toggle-lock-item>
-    <kb-options-menu-item layout="system-qwerty" label="System QWERTY">
-    </kb-options-menu-item>
-    <kb-options-menu-item layout="qwerty" label="QWERTY">
-    </kb-options-menu-item>
-    <kb-options-menu-item layout="dvorak" label="Dvorak">
-    </kb-options-menu-item>
     <kb-options-menu-item layout="none" label="Hide">
     </kb-options-menu-item>
   </template>
 </polymer-element>
 
 <polymer-element name="kb-keyboard-overlay" attributes="keyset"
-    on-pointerup="up">
+    on-pointerdown="down" on-pointerup="up">
   <template>
     <style>
       :host {
-          background-color: rgba(0, 0, 0, 0.6);
-          bottom: 0;
-          left: 0;
-          position: absolute;
-          right: 0;
-          top: 0;
-          z-index: 1;
+        background-color: rgba(0, 0, 0, 0.6);
+        bottom: 0;
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 1;
+      }
+
+      :host.arm-dismiss {
+        background-color: rgba(0,0,0,0);
       }
     </style>
     <!-- Insert popups here. -->
@@ -134,8 +126,15 @@
   </template>
   <script>
     Polymer('kb-keyboard-overlay', {
-      up: function() {
+      up: function(event) {
         this.hidden = true;
+        this.classList.remove('arm-dismiss');
+        event.stopPropagation();
+      },
+
+      down: function(event) {
+        this.classList.add('arm-dismiss');
+        event.stopPropagation();
       },
 
       hiddenChanged: function() {