Layout transitions now triggered on key-down instead of key-up.

BUG=292727

Review URL: https://chromiumcodereview.appspot.com/23621045

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

ui/keyboard/resources/elements/kb-key.html

@@ -60,6 +60,15 @@
 <polymer-element name="kb-shift-key" attributes="unlockedCase lockedCase"
     class="shift dark" char="Shift" extends="kb-key">
   <script>
+
+    (function () {
+      /**
+       * Uses a closure to define one long press timer among all shift keys
+       * regardless of the layout they are in.
+       * @type {function}
+       */
+      var shiftLongPressTimer = undefined;
+
       Polymer('kb-shift-key', {
          /**
           * Defines how capslock effects keyset transition. We always transition
@@ -68,6 +77,7 @@
           */
         unlockedCase: 'lower',
         lockedCase: 'upper',
+        control: true,
 
         down: function(event) {
           this.super();
@@ -80,7 +90,20 @@
           this.fire('enable-dbl', detail);
           this.fire('enable-sel');
         },
+
+        /**
+         * Overrides longPressTimer for the shift key.
+         */
+        get longPressTimer() {
+          return shiftLongPressTimer;
+        },
+
+        set longPressTimer(timer) {
+          shiftLongPressTimer = timer;
+        },
       });
+    })();
+
   </script>
 </polymer-element>
 

ui/keyboard/resources/elements/kb-keyboard.html

@@ -289,6 +289,20 @@
         this.lastPressedKey = event.target;
         this.lastPressedKey.classList.add('active');
         repeatKey.cancel();
+
+        var char = detail.char;
+        switch(char) {
+          case 'Shift':
+            // Removes caps-lock if caps-locked.
+            if(this.classList.contains('caps-locked')) {
+              this.classList.remove('caps-locked');
+            }
+            break;
+          default:
+            break;
+        }
+
+        // A transition key was pressed, immediately move to new keyset.
         var toKeyset = detail.toKeyset;
         if (toKeyset) {
           this.keyset = toKeyset;
@@ -400,7 +414,8 @@
           return;
         }
         var toKeysetId = detail.toKeyset;
-        // Keyset transition key.
+        // Keyset transition key. This is needed to transition from upper
+        // to lower case when we are not in caps mode.
         if (toKeysetId) {
           this.keyset = toKeysetId;
           this.querySelector('#' + this.layout + '-' + this.keyset).nextKeyset =
@@ -422,9 +437,6 @@
             return;
           case 'Shift':
             swipeStatus.swipeFlags = 0;
-            // We have reverted to lower case.
-            if(this.classList.contains('caps-locked'))
-              this.classList.remove('caps-locked');
             return;
           case 'Microphone':
             this.voiceInput_.onDown();

ui/keyboard/resources/layouts/dvorak.html

@@ -19,14 +19,14 @@
       <kb-key class='return dark' char="&#x000A;" align="right">enter</kb-key>
     </kb-row>
     <kb-row>
-      <kb-shift-key toKeyset="up:lower" weight="1.8" align="left">shift</kb-shift-key>
+      <kb-shift-key toKeyset="down:lower" weight="1.8" align="left">shift</kb-shift-key>
       <kb-key-sequence keys=";QJKXBMWVZ"></kb-key-sequence>
-      <kb-shift-key toKeyset="up:lower" weight="1.8" align="right">shift</kb-shift-key>
+      <kb-shift-key toKeyset="down:lower" weight="1.8" align="right">shift</kb-shift-key>
     </kb-row>
     <kb-row>
-      <kb-key class="symbol dark" toKeyset="up:symbol" char="Invalid" align="left">#123</kb-key>
+      <kb-key class="symbol dark" toKeyset="down:symbol" char="Invalid" align="left">#123</kb-key>
       <kb-key-import importId="spacebar-row"></kb-key-import>
-      <kb-key class="symbol dark" toKeyset="up:symbol" char="Invalid" align="right">#123</kb-key>
+      <kb-key class="symbol dark" toKeyset="down:symbol" char="Invalid" align="right">#123</kb-key>
       <kb-layout-selector></kb-layout-selector>
     </kb-row>
     <kb-altkey-container hidden>
@@ -45,14 +45,14 @@
       <kb-key class='return dark' char="&#x000A;" align="right">enter</kb-key>
     </kb-row>
     <kb-row>
-      <kb-shift-key toKeyset="up:upper:lower; long:upper; dbl:upper" weight="1.8" align="left">shift</kb-shift-key>
+      <kb-shift-key toKeyset="down:upper:lower; long:upper; dbl:upper" weight="1.8" align="left">shift</kb-shift-key>
       <kb-key-sequence keys=";qjkxbmwvz"></kb-key-sequence>
-      <kb-shift-key toKeyset="up:upper:lower; long:upper; dbl:upper" weight="1.8" align="right">shift</kb-shift-key>
+      <kb-shift-key toKeyset="down:upper:lower; long:upper; dbl:upper" weight="1.8" align="right">shift</kb-shift-key>
     </kb-row>
     <kb-row>
-      <kb-key class="symbol dark" toKeyset="up:symbol" char="Invalid" align="left">#123</kb-key>
+      <kb-key class="symbol dark" toKeyset="down:symbol" char="Invalid" align="left">#123</kb-key>
       <kb-key-import importId="spacebar-row"></kb-key-import>
-      <kb-key class="symbol dark" toKeyset="up:symbol" char="Invalid" align="right">#123</kb-key>
+      <kb-key class="symbol dark" toKeyset="down:symbol" char="Invalid" align="right">#123</kb-key>
       <kb-layout-selector></kb-layout-selector>
     </kb-row>
     <kb-altkey-container hidden>
@@ -71,14 +71,14 @@
       <kb-key class='return dark' char="&#x000A;" align="right">enter</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="left-more dark" toKeyset="up:more" char="Invalid" align="left">more</kb-key>
+      <kb-key class="left-more dark" toKeyset="down:more" char="Invalid" align="left">more</kb-key>
       <kb-key-sequence keys="!&quot;':;/?"></kb-key-sequence>
-      <kb-key class="right-more dark" toKeyset="up:more" char="Invalid" align="right">more</kb-key>
+      <kb-key class="right-more dark" toKeyset="down:more" char="Invalid" align="right">more</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="symbol dark" toKeyset="up:lower" char="Invalid" align="left">abc</kb-key>
+      <kb-key class="symbol dark" toKeyset="down:lower" char="Invalid" align="left">abc</kb-key>
       <kb-key-import importId="spacebar-row"></kb-key-import>
-      <kb-key class="symbol dark" toKeyset="up:lower" char="Invalid" align="right">abc</kb-key>
+      <kb-key class="symbol dark" toKeyset="down:lower" char="Invalid" align="right">abc</kb-key>
       <kb-layout-selector></kb-layout-selector>
     </kb-row>
     <kb-altkey-container hidden>
@@ -101,16 +101,16 @@
       <kb-key class='return dark' char="&#x000A;" align="right">enter</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="left-more dark" toKeyset="up:symbol" char="Invalid" align="left">#123</kb-key>
+      <kb-key class="left-more dark" toKeyset="down:symbol" char="Invalid" align="left">#123</kb-key>
       <kb-key>&#x00D7</kb-key><kb-key>&#x00F7</kb-key><kb-key>_</kb-key><kb-key>&#x00A7</kb-key>
       <kb-key>&#x00B6</kb-key><kb-key>&#x00A1</kb-key><kb-key>&#x00BF</kb-key><kb-key>&#x2022</kb-key>
       <kb-key>&#x0394</kb-key>
-      <kb-key class="right-more dark" toKeyset="up:symbol" char="Invalid" align="right">#123</kb-key>
+      <kb-key class="right-more dark" toKeyset="down:symbol" char="Invalid" align="right">#123</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="symbol dark" toKeyset="up:lower" char="Invalid" align="left">abc</kb-key>
+      <kb-key class="symbol dark" toKeyset="down:lower" char="Invalid" align="left">abc</kb-key>
       <kb-key-import importId="spacebar-row"></kb-key-import>
-      <kb-key class="symbol dark" toKeyset="up:lower" char="Invalid" align="right">abc</kb-key>
+      <kb-key class="symbol dark" toKeyset="down:lower" char="Invalid" align="right">abc</kb-key>
       <kb-layout-selector></kb-layout-selector>
     </kb-row>
   </kb-keyset>

ui/keyboard/resources/layouts/qwerty.html

@@ -19,16 +19,16 @@
       <kb-key class='return dark' char="&#x000A;" align="right">enter</kb-key>
     </kb-row>
     <kb-row>
-      <kb-shift-key toKeyset="up:lower" weight="1.8" align="left">shift</kb-shift-key>
+      <kb-shift-key toKeyset="down:lower" weight="1.8" align="left">shift</kb-shift-key>
       <kb-key-sequence keys="ZXCVBNM"></kb-key-sequence>
       <kb-key invert hintText="!" char="!">,</kb-key>
       <kb-key invert hintText="?" char="?">.</kb-key>
-      <kb-shift-key toKeyset="up:lower" weight="1.8" align="right">shift</kb-shift-key>
+      <kb-shift-key toKeyset="down:lower" weight="1.8" align="right">shift</kb-shift-key>
     </kb-row>
     <kb-row>
-      <kb-key class="symbol dark" toKeyset="up:symbol" char="Invalid" align="left">#123</kb-key>
+      <kb-key class="symbol dark" toKeyset="down:symbol" char="Invalid" align="left">#123</kb-key>
       <kb-key-import importId="spacebar-row"></kb-key-import>
-      <kb-key class="symbol dark" toKeyset="up:symbol" char="Invalid" align="right">#123</kb-key>
+      <kb-key class="symbol dark" toKeyset="down:symbol" char="Invalid" align="right">#123</kb-key>
       <kb-layout-selector toLayout="dvorak"></kb-layout-selector>
     </kb-row>
     <kb-altkey-container hidden>
@@ -47,15 +47,15 @@
       <kb-key class='return dark' char="&#x000A;" align="right">enter</kb-key>
     </kb-row>
     <kb-row>
-      <kb-shift-key toKeyset="up:upper:lower; long:upper; dbl:upper" weight="1.8" align="left">shift</kb-shift-key>
+      <kb-shift-key toKeyset="down:upper:lower; long:upper; dbl:upper" weight="1.8" align="left">shift</kb-shift-key>
       <kb-key-sequence keys="zxcvbnm"></kb-key-sequence>
       <kb-key hintText="!">,</kb-key><kb-key hintText="?">.</kb-key>
-      <kb-shift-key toKeyset="up:upper:lower; long:upper; dbl:upper" weight="1.8" align="right">shift</kb-shift-key>
+      <kb-shift-key toKeyset="down:upper:lower; long:upper; dbl:upper" weight="1.8" align="right">shift</kb-shift-key>
     </kb-row>
     <kb-row>
-      <kb-key class="symbol dark" toKeyset="up:symbol" char="Invalid" align="left">#123</kb-key>
+      <kb-key class="symbol dark" toKeyset="down:symbol" char="Invalid" align="left">#123</kb-key>
       <kb-key-import importId="spacebar-row"></kb-key-import>
-      <kb-key class="symbol dark" toKeyset="up:symbol" char="Invalid" align="right">#123</kb-key>
+      <kb-key class="symbol dark" toKeyset="down:symbol" char="Invalid" align="right">#123</kb-key>
       <kb-layout-selector toLayout="dvorak"></kb-layout-selector>
     </kb-row>
     <kb-altkey-container hidden>
@@ -80,16 +80,16 @@
       <kb-key class='return dark' char="&#x000A;" align="right">enter</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="left-more dark" toKeyset="up:more" char="Invalid" align="left">more</kb-key>
+      <kb-key class="left-more dark" toKeyset="down:more" char="Invalid" align="left">more</kb-key>
       <kb-key>:</kb-key><kb-key>;</kb-key><kb-key>-</kb-key><kb-key>'</kb-key>
       <kb-key>"</kb-key><kb-key>!</kb-key>
       <kb-key>?</kb-key><kb-key>,</kb-key><kb-key>.</kb-key>
-      <kb-key class="right-more dark" toKeyset="up:more" char="Invalid" align="right">more</kb-key>
+      <kb-key class="right-more dark" toKeyset="down:more" char="Invalid" align="right">more</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="symbol dark" toKeyset="up:lower" char="Invalid" align="left">abc</kb-key>
+      <kb-key class="symbol dark" toKeyset="down:lower" char="Invalid" align="left">abc</kb-key>
       <kb-key-import importId="spacebar-row"></kb-key-import>
-      <kb-key class="symbol dark" toKeyset="up:lower" char="Invalid" align="right">abc</kb-key>
+      <kb-key class="symbol dark" toKeyset="down:lower" char="Invalid" align="right">abc</kb-key>
       <kb-layout-selector toLayout="dvorak"></kb-layout-selector>
     </kb-row>
     <kb-altkey-container hidden>
@@ -112,16 +112,16 @@
       <kb-key class='return dark' char="&#x000A;" align="right">enter</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="left-more dark" toKeyset="up:symbol" char="Invalid" align="left">#123</kb-key>
+      <kb-key class="left-more dark" toKeyset="down:symbol" char="Invalid" align="left">#123</kb-key>
       <kb-key>&#x00D7;</kb-key><kb-key>&#x00F7;</kb-key><kb-key>_</kb-key><kb-key>&#x00A7;</kb-key>
       <kb-key>&#x00B6;</kb-key><kb-key>&#x00A1;</kb-key><kb-key>&#x00BF;</kb-key><kb-key>&#x2022;</kb-key>
       <kb-key>&#x0394;</kb-key>
-      <kb-key class="right-more dark" toKeyset="up:symbol" char="Invalid" align="right">#123</kb-key>
+      <kb-key class="right-more dark" toKeyset="down:symbol" char="Invalid" align="right">#123</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="symbol dark" toKeyset="up:lower" char="Invalid" align="left">abc</kb-key>
+      <kb-key class="symbol dark" toKeyset="down:lower" char="Invalid" align="left">abc</kb-key>
       <kb-key-import importId="spacebar-row"></kb-key-import>
-      <kb-key class="symbol dark" toKeyset="up:lower" char="Invalid" align="right">abc</kb-key>
+      <kb-key class="symbol dark" toKeyset="down:lower" char="Invalid" align="right">abc</kb-key>
       <kb-layout-selector toLayout="dvorak"></kb-layout-selector>
     </kb-row>
   </kb-keyset>

ui/keyboard/resources/layouts/webui_qwerty.html

@@ -19,13 +19,13 @@
       <div class="half-key-spacer"></div>
     </kb-row>
     <kb-row>
-      <kb-shift-key class="padded-left-special" toKeyset="up:lower" weight="1.4">shift</kb-shift-key>
+      <kb-shift-key class="padded-left-special" toKeyset="down:lower" weight="1.4">shift</kb-shift-key>
       <kb-key>Z</kb-key><kb-key>X</kb-key><kb-key>C</kb-key><kb-key>V</kb-key>
       <kb-key>B</kb-key><kb-key>N</kb-key><kb-key>M</kb-key>
       <kb-key class="backspace padded-right-special dark" char="&#x0008;" repeat>delete</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="symbol dark" toKeyset="up:symbol" char="Invalid">?123</kb-key>
+      <kb-key class="symbol dark" toKeyset="down:symbol" char="Invalid">?123</kb-key>
       <kb-key class="microphone dark" char="Microphone"></kb-key>
       <kb-key class="dark">,</kb-key>
       <kb-key class="space dark" char=" "></kb-key>
@@ -50,13 +50,13 @@
       <div class="half-key-spacer"></div>
     </kb-row>
     <kb-row>
-      <kb-shift-key class="padded-left-special" toKeyset="up:upper:lower; long:upper; dbl:upper" weight="1.4">shift</kb-shift-key>
+      <kb-shift-key class="padded-left-special" toKeyset="down:upper:lower; long:upper; dbl:upper" weight="1.4">shift</kb-shift-key>
       <kb-key>z</kb-key><kb-key>x</kb-key><kb-key>c</kb-key><kb-key>v</kb-key>
       <kb-key>b</kb-key><kb-key>n</kb-key><kb-key>m</kb-key>
       <kb-key class="backspace padded-right-special dark" char="&#x0008;" repeat>delete</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="symbol dark" toKeyset="up:symbol" char="Invalid">?123</kb-key>
+      <kb-key class="symbol dark" toKeyset="down:symbol" char="Invalid">?123</kb-key>
       <kb-key class="microphone dark" char="Microphone"></kb-key>
       <kb-key class="dark">,</kb-key>
       <kb-key class="space dark" char=" "></kb-key>
@@ -78,13 +78,13 @@
       <kb-key>/</kb-key><kb-key>(</kb-key><kb-key>)</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="left-more padded-left-special dark" toKeyset="up:more" char="Invalid">more</kb-key>
+      <kb-key class="left-more padded-left-special dark" toKeyset="down:more" char="Invalid">more</kb-key>
       <kb-key>"</kb-key><kb-key>'</kb-key><kb-key>-</kb-key>
       <kb-key>+</kb-key><kb-key>!</kb-key><kb-key>?</kb-key>
       <kb-key class="backspace padded-right-special dark" char="&#x0008;" repeat>delete</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="symbol dark" toKeyset="up:lower" char="Invalid">abc</kb-key>
+      <kb-key class="symbol dark" toKeyset="down:lower" char="Invalid">abc</kb-key>
       <kb-key class="microphone dark" char="Microphone"></kb-key>
       <kb-key class="dark">,</kb-key>
       <kb-key class="space dark" char=" "></kb-key>
@@ -105,13 +105,13 @@
       <kb-key>\</kb-key><kb-key>&#x003C;</kb-key><kb-key>&#x003E;</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="left-more padded-left-special dark" toKeyset="up:symbol" char="Invalid">?123</kb-key>
+      <kb-key class="left-more padded-left-special dark" toKeyset="down:symbol" char="Invalid">?123</kb-key>
       <kb-key>`</kb-key><kb-key>~</kb-key><kb-key>_</kb-key><kb-key>=</kb-key>
       <kb-key>[</kb-key><kb-key>]</kb-key>
       <kb-key class="backspace padded-right-special dark" char="&#x0008;" repeat>delete</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="symbol dark" toKeyset="up:lower" char="Invalid">abc</kb-key>
+      <kb-key class="symbol dark" toKeyset="down:lower" char="Invalid">abc</kb-key>
       <kb-key class="microphone dark" char="Microphone"></kb-key>
       <kb-key class="dark">,</kb-key>
       <kb-key class="space dark" char=" "></kb-key>