This CL did the following two things:

1. It extends the old toKeyset attribute of kb-key-base. The new syntax  should look like this:
<kb-key toKeyset="up:upper:lower; long:upper;"></kb-key>
And it means on key up, keyboard should transit to upper case, and when any key pressed, then transit back to lower case. On long press, keyboard should transit to upper case and stays to upper case(caps lock).

toKeyset := (up|down|long):id:[id]
id := one of the keyset ids defined in keyboard layout

Note: double click on key is not yet supported. It will be in a follow up CL.

2. replace the toKeyset attribute with nextKeyset attribute.
If nextKeyset is not null, the current keyset should transit to nextKeyset after pressed any key (unless the key specified a different keyset).

BUG=252751

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

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

8 files changed, 207 insertions, 78 deletions

diff --git a/ui/keyboard/resources/elements/kb-key-base.html b/ui/keyboard/resources/elements/kb-key-base.html
index 770b856..f9a3ee8 100644
--- a/ui/keyboard/resources/elements/kb-key-base.html
+++ b/ui/keyboard/resources/elements/kb-key-base.html
@@ -4,39 +4,132 @@
   -- found in the LICENSE file.
   -->
 
-<element name="kb-key-base" on-pointerdown="down" on-pointerup="up" on-pointerout="out"
+<element name="kb-key-base"
+    on-pointerdown="down" on-pointerup="up" on-pointerout="out"
     attributes="accents char invert repeat superscript toKeyset toLayout">
-  <template>
-  </template>
   <script>
     /**
      * The long-press delay in milliseconds before long-press handler is
      * invoked.
+     * @const
      * @type {number}
      */
     var LONGPRESS_DELAY_MSEC = 500;
 
+    /**
+     * The maximum number of elements in one keyset rule.
+     * @const
+     * @type {number}
+     */
+    var MAXIMUM_NUM_OF_RULE_ELEMENTS = 3;
+
+    /**
+     * The minumum number of elements in one keyset rule.
+     * @const
+     * @type {number}
+     */
+    var MINIMUM_NUM_OF_RULE_ELEMENTS = 2;
+
+    /**
+     * The index of event type element in the splitted keyset rule.
+     * @const
+     * @type {number}
+     */
+    var EVENT_TYPE = 0;
+
+    /**
+     * The index of toKeyset element in the splitted keyset rule.
+     * @const
+     * @type {number}
+     */
+    var TO_KEYSET = 1;
+
+    /**
+     * The index of nextKeyset element in the splitted keyset rule.
+     * @const
+     * @type {number}
+     */
+    var NEXT_KEYSET = 2;
+
+    /**
+     * The index offset of toKeyset and nextKeyset elements in splitted keyset
+     * rule array and the array in keysetRules.
+     * @const
+     * @type {number}
+     */
+    var OFFSET = 1;
+
+    /**
+     * The minumum number of elements in one keyset rule.
+     * @const {number}
+     */
+    var MINIMUM_NUM_OF_RULE_ELEMENTS = 2;
+
     Polymer.register(this, {
       repeat: false,
       invert: false,
       longPressTimer: null,
+
+      /**
+       * The keyset transition rules. It defines which keyset to transit to on
+       * which key events. It consists at most four rules (down, up, long, dbl).
+       * If no rule is defined for a key event, the event wont trigger a keyset
+       * change.
+       * @type {Object.<string, Array.<string>}
+       */
+      keysetRules: null,
+
+      ready: function() {
+        if (this.toKeyset) {
+          // Parsing keyset rules from toKeyset attribute string.
+          // An rule can be defined as: (down|up|long|dbl):keysetid[:keysetid]
+          // and each rule are separated by a semicolon. The first element
+          // defines the event this rule applies to. The second element defines
+          // what keyset to transit to after event received. The third optional
+          // element defines what keyset to transit to after a key is pressed in
+          // the new keyset. It is useful when you want to transit to a not
+          // locked keyset. For example, after transit to a upper case keyset,
+          // it may make sense to transit back to lower case after user typed
+          // any key at the upper case keyset.
+          var rules =
+              this.toKeyset.replace(/(\r\n|\n|\r| )/g, '').split(';');
+          this.keysetRules = {};
+          var self = this;
+          rules.forEach(function(element) {
+            if (element == '')
+              return;
+            var keyValues = element.split(':', MAXIMUM_NUM_OF_RULE_ELEMENTS);
+            if (keyValues.length < MINIMUM_NUM_OF_RULE_ELEMENTS) {
+              console.error('Invalid keyset rules: ' + element);
+              return;
+            }
+            self.keysetRules[keyValues[EVENT_TYPE]] = [keyValues[TO_KEYSET],
+                (keyValues[NEXT_KEYSET] ? keyValues[NEXT_KEYSET] : null)];
+          });
+        }
+      },
       down: function(event) {
         var detail = {
             char: this.char || this.textContent,
-            toKeyset: this.toKeyset,
             toLayout: this.toLayout,
             repeat: this.repeat
         };
-        this.send('key-down', detail);
-        if (this.accents) {
-          this.longPressTimer = this.asyncMethod(function() {
-            var detail = {
-              char: this.char || this.textContent,
-              accents: this.accents
-            };
-            this.send('key-longpress', detail);
-          }, null, LONGPRESS_DELAY_MSEC);
+        if (this.keysetRules && this.keysetRules.down != undefined) {
+          detail.toKeyset = this.keysetRules.down[TO_KEYSET - OFFSET];
+          detail.nextKeyset = this.keysetRules.down[NEXT_KEYSET - OFFSET];
         }
+        this.send('key-down', detail);
+        this.longPressTimer = this.asyncMethod(function() {
+          var detail = {
+            char: this.char || this.textContent,
+            accents: this.accents
+          };
+          if (this.keysetRules && this.keysetRules.long != undefined) {
+            detail.toKeyset = this.keysetRules.long[TO_KEYSET - OFFSET];
+            detail.nextKeyset = this.keysetRules.long[NEXT_KEYSET - OFFSET];
+          }
+          this.send('key-longpress', detail);
+        }, null, LONGPRESS_DELAY_MSEC);
       },
       out: function(event) {
         clearTimeout(this.longPressTimer);
@@ -45,9 +138,12 @@
         clearTimeout(this.longPressTimer);
         var detail = {
             char: this.char || this.textContent,
-            toKeyset: this.toKeyset,
             toLayout: this.toLayout
         };
+        if (this.keysetRules && this.keysetRules.up != undefined) {
+          detail.toKeyset = this.keysetRules.up[TO_KEYSET - OFFSET];
+          detail.nextKeyset = this.keysetRules.up[NEXT_KEYSET - OFFSET];
+        }
         this.send('key-up', detail);
       }
     });
diff --git a/ui/keyboard/resources/elements/kb-key.html b/ui/keyboard/resources/elements/kb-key.html
index b602bd0..ad7a012 100644
--- a/ui/keyboard/resources/elements/kb-key.html
+++ b/ui/keyboard/resources/elements/kb-key.html
@@ -1,5 +1,5 @@
 <!--
-  -- Copyright (c) 2013 The Chromium Authors. All rights reserved.
+  -- Copyright 2013 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.
   -->
@@ -39,8 +39,8 @@
 <element name="kb-layout-selector" class="layout-selector dark" char="Invalid"
     extends="kb-key">
   <script>
-   Polymer.register(this, {
-     toLayout: 'qwerty'
-   });
+    Polymer.register(this, {
+      toLayout: 'qwerty'
+    });
   </script>
 </element>
diff --git a/ui/keyboard/resources/elements/kb-keyboard.html b/ui/keyboard/resources/elements/kb-keyboard.html
index b51b371..e22edc5 100644
--- a/ui/keyboard/resources/elements/kb-keyboard.html
+++ b/ui/keyboard/resources/elements/kb-keyboard.html
@@ -5,7 +5,8 @@
   -->
 
 <element name="kb-keyboard" on-key-over="keyOver" on-key-up="keyUp"
-    on-key-down="keyDown" attributes="keyset layout rows">
+    on-key-down="keyDown" on-key-longpress="keyLongpress"
+    attributes="keyset layout rows">
   <template>
     <style>
       @host {
@@ -89,17 +90,25 @@
       },
 
       /**
-       * Handles key-down event that is sent by kb-key.
-       * @param {CustomEvent} event The key-down event dispatched by kb-key.
+       * Handles key-down event that is sent by kb-key-base.
+       * @param {CustomEvent} event The key-down event dispatched by
+       *     kb-key-base.
        * @param {Object} detail The detail of pressed kb-key.
        */
       keyDown: function(event, detail) {
-        var toKeyset = detail.toKeyset;
         if (this.lastPressedKey)
           this.lastPressedKey.classList.remove('active');
         this.lastPressedKey = event.target;
         this.lastPressedKey.classList.add('active');
         repeatKey.cancel();
+        var toKeyset = detail.toKeyset;
+        if (toKeyset) {
+          this.keyset = toKeyset;
+          this.querySelector('#' + this.layout + '-' + this.keyset).nextKeyset =
+              detail.nextKeyset;
+          return;
+        }
+
         if (detail.repeat) {
           insertText(detail.char);
           repeatKey.key = this.lastPressedKey;
@@ -113,8 +122,8 @@
       },
 
       /**
-       * Handles key-up event that is sent by kb-key.
-       * @param {CustomEvent} event The key-up event dispatched by kb-key.
+       * Handles key-up event that is sent by kb-key-base.
+       * @param {CustomEvent} event The key-up event dispatched by kb-key-base.
        * @param {Object} detail The detail of pressed kb-key.
        */
       keyUp: function(event, detail) {
@@ -127,8 +136,11 @@
         }
         var toKeyset = detail.toKeyset;
         // Keyset transition key.
-        if (toKeyset)
+        if (toKeyset) {
           this.keyset = toKeyset;
+          this.querySelector('#' + this.layout + '-' + this.keyset).nextKeyset =
+              detail.nextKeyset;
+        }
         var toLayout = detail.toLayout;
         // Layout transition key.
         if (toLayout)
@@ -156,6 +168,23 @@
         insertText(char);
       },
 
+      /*
+       * Handles key-longpress event that is sent by kb-key-base.
+       * @param {CustomEvent} event The key-longpress event dispatched by
+       *     kb-key-base.
+       * @param {Object} detail The detail of pressed key.
+       */
+      keyLongpress: function(event, detail) {
+        this.lastPressedKey.classList.remove('active');
+        var toKeyset = detail.toKeyset;
+        // Keyset transtion key.
+        if (toKeyset) {
+          this.keyset = toKeyset;
+          this.querySelector('#' + this.layout + '-' + this.keyset).nextKeyset =
+              detail.nextKeyset;
+        }
+      },
+
       /**
        * Handles a change in the keyboard layout.  Auto-selects the default
        * keyset for the new layout.
diff --git a/ui/keyboard/resources/elements/kb-keyset.html b/ui/keyboard/resources/elements/kb-keyset.html
index d67e0b1..8b79397 100644
--- a/ui/keyboard/resources/elements/kb-keyset.html
+++ b/ui/keyboard/resources/elements/kb-keyset.html
@@ -4,8 +4,8 @@
   -- found in the LICENSE file.
   -->
 
-<element name="kb-keyset" attributes="toKeyset isDefault" on-key-up="keyUp"
-    on-key-longpress="keyLongpress">
+<element name="kb-keyset" attributes="nextKeyset isDefault"
+    on-key-up="keyUp" on-key-longpress="keyLongpress">
   <template>
     <style>
       @host {
@@ -23,6 +23,12 @@
   <script>
     Polymer.register(this, {
       isDefault: false,
+      nextKeyset: null,
+      // TODO(bshe): support select keyset on down, long and dbl events.
+      keyUp: function(event, detail) {
+        if (!detail.toKeyset)
+          detail.toKeyset = this.nextKeyset;
+      },
       keyLongpress: function(event, detail) {
         if (detail.accents) {
           var accentContainer = this.$.accentContainer.getDistributedNodes()[0];
@@ -41,10 +47,6 @@
               'px';
           accentContainer.hidden = false;
         }
-      },
-      keyUp: function(event, detail) {
-        if (!detail.toKeyset)
-          detail.toKeyset = this.toKeyset;
       }
     });
   </script>
diff --git a/ui/keyboard/resources/layouts/dvorak.html b/ui/keyboard/resources/layouts/dvorak.html
index a62f009..9aaab8a 100644
--- a/ui/keyboard/resources/layouts/dvorak.html
+++ b/ui/keyboard/resources/layouts/dvorak.html
@@ -9,7 +9,7 @@
 <link id="spacebar-row" rel="import" href="spacebar-row.html">
 
 <template>
-  <kb-keyset id="dvorak-upper" toKeyset="lower">
+  <kb-keyset id="dvorak-upper">
     <kb-row>
       <kb-key class="tab dark" char="&#x0009;" align="left">tab</kb-key>
       <kb-key-sequence keys="&quot;,.PYFGCRL" superscripts="1234567890"></kb-key-sequence>
@@ -21,14 +21,14 @@
       <kb-key class='return dark' char="&#x000A;" align="right">enter</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="left-shift dark" toKeyset="lower" char="Invalid" align="left">shift</kb-key>
+      <kb-key class="left-shift dark" toKeyset="up:lower" char="Invalid" align="left">shift</kb-key>
       <kb-key-sequence keys=";QJKXBMWVZ"></kb-key-sequence>
-      <kb-key class="right-shift dark" toKeyset="lower" char="Invalid" align="right">shift</kb-key>
+      <kb-key class="right-shift dark" toKeyset="up:lower" char="Invalid" align="right">shift</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="symbol dark" toKeyset="symbol" char="Invalid" align="left">#123</kb-key>
+      <kb-key class="symbol dark" toKeyset="up:symbol" char="Invalid" align="left">#123</kb-key>
       <kb-key-import importId="spacebar-row"></kb-key-import>
-      <kb-key class="symbol dark" toKeyset="symbol" char="Invalid" align="right">#123</kb-key>
+      <kb-key class="symbol dark" toKeyset="up:symbol" char="Invalid" align="right">#123</kb-key>
       <kb-layout-selector></kb-layout-selector>
     </kb-row>
     <kb-accent-container hidden>
@@ -47,14 +47,14 @@
       <kb-key class='return dark' char="&#x000A;" align="right">enter</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="left-shift dark" toKeyset="upper" char="Invalid" align="left">shift</kb-key>
+      <kb-key class="left-shift dark" toKeyset="up:upper:lower;long:upper" char="Invalid" align="left">shift</kb-key>
       <kb-key-sequence keys=";qjkxbmwvz"></kb-key-sequence>
-      <kb-key class="right-shift dark" toKeyset="upper" char="Invalid" align="right">shift</kb-key>
+      <kb-key class="right-shift dark" toKeyset="up:upper:lower;long:upper" char="Invalid" align="right">shift</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="symbol dark" toKeyset="symbol" char="Invalid" align="left">#123</kb-key>
+      <kb-key class="symbol dark" toKeyset="up:symbol" char="Invalid" align="left">#123</kb-key>
       <kb-key-import importId="spacebar-row"></kb-key-import>
-      <kb-key class="symbol dark" toKeyset="symbol" char="Invalid" align="right">#123</kb-key>
+      <kb-key class="symbol dark" toKeyset="up:symbol" char="Invalid" align="right">#123</kb-key>
       <kb-layout-selector></kb-layout-selector>
     </kb-row>
     <kb-accent-container hidden>
@@ -73,14 +73,14 @@
       <kb-key class='return dark' char="&#x000A;" align="right">enter</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="left-more dark" toKeyset="more" char="Invalid" align="left">more</kb-key>
+      <kb-key class="left-more dark" toKeyset="up:more" char="Invalid" align="left">more</kb-key>
       <kb-key-sequence keys="!&quot;':;/?"></kb-key-sequence>
-      <kb-key class="right-more dark" toKeyset="more" char="Invalid" align="right">more</kb-key>
+      <kb-key class="right-more dark" toKeyset="up:more" char="Invalid" align="right">more</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="symbol dark" toKeyset="lower" char="Invalid" align="left">abc</kb-key>
+      <kb-key class="symbol dark" toKeyset="up:lower" char="Invalid" align="left">abc</kb-key>
       <kb-key-import importId="spacebar-row"></kb-key-import>
-      <kb-key class="symbol dark" toKeyset="lower" char="Invalid" align="right">abc</kb-key>
+      <kb-key class="symbol dark" toKeyset="up:lower" char="Invalid" align="right">abc</kb-key>
       <kb-layout-selector></kb-layout-selector>
     </kb-row>
     <kb-accent-container hidden>
@@ -103,16 +103,16 @@
       <kb-key class='return dark' char="&#x000A;" align="right">enter</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="left-more dark" toKeyset="symbol" char="Invalid" align="left">#123</kb-key>
+      <kb-key class="left-more dark" toKeyset="up: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="symbol" char="Invalid" align="right">#123</kb-key>
+      <kb-key class="right-more dark" toKeyset="up:symbol" char="Invalid" align="right">#123</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="symbol dark" toKeyset="lower" char="Invalid" align="left">abc</kb-key>
+      <kb-key class="symbol dark" toKeyset="up:lower" char="Invalid" align="left">abc</kb-key>
       <kb-key-import importId="spacebar-row"></kb-key-import>
-      <kb-key class="symbol dark" toKeyset="lower" char="Invalid" align="right">abc</kb-key>
+      <kb-key class="symbol dark" toKeyset="up:lower" char="Invalid" align="right">abc</kb-key>
       <kb-layout-selector></kb-layout-selector>
     </kb-row>
   </kb-keyset>
diff --git a/ui/keyboard/resources/layouts/qwerty.html b/ui/keyboard/resources/layouts/qwerty.html
index b7e83b8..d761841 100644
--- a/ui/keyboard/resources/layouts/qwerty.html
+++ b/ui/keyboard/resources/layouts/qwerty.html
@@ -9,7 +9,7 @@
 <link id="spacebar-row" rel="import" href="spacebar-row.html">
 
 <template>
-  <kb-keyset id="qwerty-upper" toKeyset="lower">
+  <kb-keyset id="qwerty-upper">
     <kb-row>
       <kb-key class="tab dark" char="&#x0009;" align="left">tab</kb-key>
       <kb-key-sequence keys="QWERTYUIOP" superscripts="1234567890"></kb-key-sequence>
@@ -21,16 +21,16 @@
       <kb-key class='return dark' char="&#x000A;" align="right">enter</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="left-shift dark" toKeyset="lower" char="Invalid" align="left">shift</kb-key>
+      <kb-key class="left-shift dark" toKeyset="up:lower" char="Invalid" align="left">shift</kb-key>
       <kb-key-sequence keys="ZXCVBNM"></kb-key-sequence>
       <kb-key invert superscript="!" char="!">,</kb-key>
       <kb-key invert superscript="?" char="?">.</kb-key>
-      <kb-key class="right-shift dark" toKeyset="lower" char="Invalid" align="right">shift</kb-key>
+      <kb-key class="right-shift dark" toKeyset="up:lower" char="Invalid" align="right">shift</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="symbol dark" toKeyset="symbol" char="Invalid" align="left">#123</kb-key>
+      <kb-key class="symbol dark" toKeyset="up:symbol" char="Invalid" align="left">#123</kb-key>
       <kb-key-import importId="spacebar-row"></kb-key-import>
-      <kb-key class="symbol dark" toKeyset="symbol" char="Invalid" align="right">#123</kb-key>
+      <kb-key class="symbol dark" toKeyset="up:symbol" char="Invalid" align="right">#123</kb-key>
       <kb-layout-selector toLayout="dvorak"></kb-layout-selector>
     </kb-row>
     <kb-accent-container hidden>
@@ -134,15 +134,17 @@
       <kb-key class='return dark' char="&#x000A;" align="right">enter</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="left-shift dark" toKeyset="upper" char="Invalid" align="left">shift</kb-key>
+      <kb-key class="left-shift dark" toKeyset="up:upper:lower; long:upper"
+          char="Invalid" align="left">shift</kb-key>
       <kb-key-sequence keys="zxcvbnm"></kb-key-sequence>
       <kb-key superscript="!" accents="comma">,</kb-key><kb-key superscript="?" accents="period">.</kb-key>
-      <kb-key class="right-shift dark" toKeyset="upper" char="Invalid" align="right">shift</kb-key>
+      <kb-key class="right-shift dark" toKeyset="up:upper:lower; long:upper"
+          char="Invalid" align="right">shift</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="symbol dark" toKeyset="symbol" char="Invalid" align="left">#123</kb-key>
+      <kb-key class="symbol dark" toKeyset="up:symbol" char="Invalid" align="left">#123</kb-key>
       <kb-key-import importId="spacebar-row"></kb-key-import>
-      <kb-key class="symbol dark" toKeyset="symbol" char="Invalid" align="right">#123</kb-key>
+      <kb-key class="symbol dark" toKeyset="up:symbol" char="Invalid" align="right">#123</kb-key>
       <kb-layout-selector toLayout="dvorak"></kb-layout-selector>
     </kb-row>
     <kb-accent-container hidden>
@@ -260,16 +262,16 @@
       <kb-key class='return dark' char="&#x000A;" align="right">enter</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="left-more dark" toKeyset="more" char="Invalid" align="left">more</kb-key>
+      <kb-key class="left-more dark" toKeyset="up:more" char="Invalid" align="left">more</kb-key>
       <kb-key>:</kb-key><kb-key>;</kb-key><kb-key accents="dash">-</kb-key><kb-key>'</kb-key>
       <kb-key accents="doublequote">"</kb-key><kb-key accents="excla">!</kb-key>
       <kb-key accents="quest">?</kb-key><kb-key>,</kb-key><kb-key>.</kb-key>
-      <kb-key class="right-more dark" toKeyset="more" char="Invalid" align="right">more</kb-key>
+      <kb-key class="right-more dark" toKeyset="up:more" char="Invalid" align="right">more</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="symbol dark" toKeyset="lower" char="Invalid" align="left">abc</kb-key>
+      <kb-key class="symbol dark" toKeyset="up:lower" char="Invalid" align="left">abc</kb-key>
       <kb-key-import importId="spacebar-row"></kb-key-import>
-      <kb-key class="symbol dark" toKeyset="lower" char="Invalid" align="right">abc</kb-key>
+      <kb-key class="symbol dark" toKeyset="up:lower" char="Invalid" align="right">abc</kb-key>
       <kb-layout-selector toLayout="dvorak"></kb-layout-selector>
     </kb-row>
     <kb-accent-container hidden>
@@ -380,16 +382,16 @@
       <kb-key class='return dark' char="&#x000A;" align="right">enter</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="left-more dark" toKeyset="symbol" char="Invalid" align="left">#123</kb-key>
+      <kb-key class="left-more dark" toKeyset="up: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="symbol" char="Invalid" align="right">#123</kb-key>
+      <kb-key class="right-more dark" toKeyset="up:symbol" char="Invalid" align="right">#123</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="symbol dark" toKeyset="lower" char="Invalid" align="left">abc</kb-key>
+      <kb-key class="symbol dark" toKeyset="up:lower" char="Invalid" align="left">abc</kb-key>
       <kb-key-import importId="spacebar-row"></kb-key-import>
-      <kb-key class="symbol dark" toKeyset="lower" char="Invalid" align="right">abc</kb-key>
+      <kb-key class="symbol dark" toKeyset="up:lower" char="Invalid" align="right">abc</kb-key>
       <kb-layout-selector toLayout="dvorak"></kb-layout-selector>
     </kb-row>
   </kb-keyset>
diff --git a/ui/keyboard/resources/layouts/spacebar-row.html b/ui/keyboard/resources/layouts/spacebar-row.html
index 166462b..db8bcca 100644
--- a/ui/keyboard/resources/layouts/spacebar-row.html
+++ b/ui/keyboard/resources/layouts/spacebar-row.html
@@ -6,5 +6,5 @@
 
 <template>
   <kb-key class="dotcom dark" align="left">.com</kb-key>
-  <kb-key char=" " class="space dark" toKeyset="upper" weight="6.0"></kb-key>
+  <kb-key char=" " class="space dark" weight="6.0"></kb-key>
 </template>
diff --git a/ui/keyboard/resources/layouts/webui_qwerty.html b/ui/keyboard/resources/layouts/webui_qwerty.html
index 0050d57..d06ad61 100644
--- a/ui/keyboard/resources/layouts/webui_qwerty.html
+++ b/ui/keyboard/resources/layouts/webui_qwerty.html
@@ -5,7 +5,7 @@
   -->
 
 <template>
-  <kb-keyset id="upper" toKeyset="lower">
+  <kb-keyset id="qwerty-upper">
       <kb-row class="top">
         <kb-key>Q</kb-key><kb-key>W</kb-key><kb-key accents="E">E</kb-key><kb-key>R</kb-key>
         <kb-key>T</kb-key><kb-key>Y</kb-key><kb-key accents="U">U</kb-key>
@@ -19,13 +19,13 @@
         <div class="half-key-spacer"></div>
       </kb-row>
       <kb-row>
-        <kb-key class="left-shift padded-left-special dark" toKeyset="lower" char="Invalid">shift</kb-key>
+        <kb-key class="left-shift padded-left-special dark" toKeyset="up:lower" char="Invalid">shift</kb-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="symbol" char="Invalid">?123</kb-key>
+        <kb-key class="symbol dark" toKeyset="up:symbol" char="Invalid">?123</kb-key>
         <kb-key class="mic dark" char="Mic"></kb-key>
         <kb-key class="dark">,</kb-key>
         <kb-key class="space dark" char=" "></kb-key>
@@ -85,7 +85,7 @@
       </kb-accent-container>
     </kb-keyset>
 
-    <kb-keyset id="lower">
+    <kb-keyset id="qwerty-lower">
       <kb-row class="top">
         <kb-key>q</kb-key><kb-key>w</kb-key><kb-key accents="e">e</kb-key><kb-key>r</kb-key>
         <kb-key>t</kb-key><kb-key>y</kb-key><kb-key accents="u">u</kb-key>
@@ -99,13 +99,13 @@
       <div class="half-key-spacer"></div>
     </kb-row>
     <kb-row>
-      <kb-key class="left-shift padded-left-special dark" toKeyset="upper" char="Invalid">shift</kb-key>
+      <kb-key class="left-shift padded-left-special dark" toKeyset="up:upper:lower; long:upper" char="Invalid">shift</kb-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="symbol" char="Invalid">?123</kb-key>
+      <kb-key class="symbol dark" toKeyset="up:symbol" char="Invalid">?123</kb-key>
       <kb-key class="mic dark" char="Mic"></kb-key>
       <kb-key class="dark">,</kb-key>
       <kb-key class="space dark" char=" "></kb-key>
@@ -165,7 +165,7 @@
     </kb-accent-container>
   </kb-keyset>
 
-  <kb-keyset id="symbol">
+  <kb-keyset id="qwerty-symbol">
     <kb-row class="top">
       <kb-key>1</kb-key><kb-key>2</kb-key><kb-key>3</kb-key><kb-key>4</kb-key>
       <kb-key>5</kb-key><kb-key>6</kb-key><kb-key>7</kb-key><kb-key>8</kb-key>
@@ -176,13 +176,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="more" char="Invalid">more</kb-key>
+      <kb-key class="left-more padded-left-special dark" toKeyset="up: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="lower" char="Invalid">abc</kb-key>
+      <kb-key class="symbol dark" toKeyset="up:lower" char="Invalid">abc</kb-key>
       <kb-key class="mic dark" char="Mic"></kb-key>
       <kb-key class="dark">,</kb-key>
       <kb-key class="space dark" char=" "></kb-key>
@@ -191,7 +191,7 @@
     </kb-row>
   </kb-keyset>
 
-  <kb-keyset id="more">
+  <kb-keyset id="qwerty-more">
     <kb-row class="top">
       <kb-key>&#x20AC;</kb-key><kb-key>&#x00A3;</kb-key><kb-key>&#x00A2;</kb-key>
       <kb-key>&#x2022;</kb-key><kb-key>&#x00B6;</kb-key><kb-key>|</kb-key>
@@ -203,13 +203,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="symbol" char="Invalid">?123</kb-key>
+      <kb-key class="left-more padded-left-special dark" toKeyset="up: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="lower" char="Invalid">abc</kb-key>
+      <kb-key class="symbol dark" toKeyset="up:lower" char="Invalid">abc</kb-key>
       <kb-key class="mic dark" char="Mic"></kb-key>
       <kb-key class="dark">,</kb-key>
       <kb-key class="space dark" char=" "></kb-key>