Update Chromium to branch 1650 (31.0.1650.63)

Change-Id: I57d8c832eaec1eb2364e0a8e7352a6dd354db99f
Reviewed-by: Jocelyn Turcotte <jocelyn.turcotte@digia.com>

22 files changed, 866 insertions, 181 deletions

diff --git a/chromium/ui/keyboard/resources/OWNERS b/chromium/ui/keyboard/resources/OWNERS
index eca3960110e..7a6ff670440 100644
--- a/chromium/ui/keyboard/resources/OWNERS
+++ b/chromium/ui/keyboard/resources/OWNERS
@@ -1,2 +1,3 @@
 bryeung@chromium.org
 bshe@chromium.org
+kevers@chromium.org
diff --git a/chromium/ui/keyboard/resources/api_adapter.js b/chromium/ui/keyboard/resources/api_adapter.js
index eb95e35cb8b..049c3666242 100644
--- a/chromium/ui/keyboard/resources/api_adapter.js
+++ b/chromium/ui/keyboard/resources/api_adapter.js
@@ -1,4 +1,4 @@
-// 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.
 
@@ -9,10 +9,23 @@ function logIfError() {
 }
 
 function insertText(text) {
-  chrome.experimental.input.virtualKeyboard.insertText(text, logIfError);
+  chrome.virtualKeyboardPrivate.insertText(text, logIfError);
 }
 
 function MoveCursor(swipe_direction, swipe_flags) {
-  chrome.experimental.input.virtualKeyboard.moveCursor(swipe_direction,
-                                                       swipe_flags);
+  chrome.virtualKeyboardPrivate.moveCursor(swipe_direction, swipe_flags);
 }
+
+function sendKeyEvent(event) {
+  chrome.virtualKeyboardPrivate.sendKeyEvent(event, logIfError);
+}
+
+function hideKeyboard() {
+  chrome.virtualKeyboardPrivate.hideKeyboard(logIfError);
+}
+
+chrome.virtualKeyboardPrivate.onTextInputBoxFocused.addListener(
+  function (inputContext) {
+    // TODO(bshe): Making keyboard aware of inputContext.
+  }
+);
diff --git a/chromium/ui/keyboard/resources/elements/kb-altkey-data.html b/chromium/ui/keyboard/resources/elements/kb-altkey-data.html
index 8f8b9a96420..67f793ad4b1 100644
--- a/chromium/ui/keyboard/resources/elements/kb-altkey-data.html
+++ b/chromium/ui/keyboard/resources/elements/kb-altkey-data.html
@@ -10,8 +10,21 @@
     var altKeys = {};
     var idMap = {};
 
-    function createId(char) {
-      return 'id' + char.charCodeAt(0);
+    /**
+     * Creates a unique identifier based on the key provided.
+     * This identifier is of the form 'idHASH' where HASH is
+     * the concatenation of the keycodes of every character in the string.
+     * @param {string} key Key for which we want an identifier.
+     * @return {string} The unique id for key.
+     */
+    function createId(key) {
+      var hash = key.split('').map(
+        // Returns the key code for the character.
+        function(character) {
+          return character.charCodeAt(0);
+        }
+      ).join('');
+      return 'id' + hash;
     }
 
     Polymer('kb-altkey-data', {
@@ -21,7 +34,7 @@
        * @param {string} char The base character.
        * @param {boolean=} opt_force If true, force the creation of a list
        *    even if empty. Used when constructing a set of alternates for keys
-       *    with superscripts.
+       *    with hintTexts.
        * @return {?Object.{id: string, list: string}}
        */
       getAltkeys: function(char, opt_force) {
diff --git a/chromium/ui/keyboard/resources/elements/kb-key-base.html b/chromium/ui/keyboard/resources/elements/kb-key-base.html
index 497da30f6c4..89a174809d3 100644
--- a/chromium/ui/keyboard/resources/elements/kb-key-base.html
+++ b/chromium/ui/keyboard/resources/elements/kb-key-base.html
@@ -6,7 +6,7 @@
 
 <polymer-element name="kb-key-base"
     on-pointerdown="down" on-pointerup="up" on-pointerout="out"
-    attributes="accents char invert repeat superscript toKeyset toLayout">
+    attributes="accents char invert repeat hintText toKeyset toLayout">
   <script>
     /**
      * The long-press delay in milliseconds before long-press handler is
@@ -109,43 +109,58 @@
         }
       },
       down: function(event) {
-        var detail = {
-            char: this.char || this.textContent,
-            toLayout: this.toLayout,
-            repeat: this.repeat
-        };
+        var detail = this.populateDetails();
         if (this.keysetRules && this.keysetRules.down != undefined) {
           detail.toKeyset = this.keysetRules.down[TO_KEYSET - OFFSET];
           detail.nextKeyset = this.keysetRules.down[NEXT_KEYSET - OFFSET];
         }
         this.fire('key-down', detail);
-        this.longPressTimer = this.asyncMethod(function() {
-          var detail = {
-            char: this.char || this.textContent,
-            superscript: this.superscript
-          };
-          if (this.keysetRules && this.keysetRules.long != undefined) {
-            detail.toKeyset = this.keysetRules.long[TO_KEYSET - OFFSET];
-            detail.nextKeyset = this.keysetRules.long[NEXT_KEYSET - OFFSET];
-          }
-          this.fire('key-longpress', detail);
-        }, null, LONGPRESS_DELAY_MSEC);
+        this.longPressTimer = this.generateLongPressTimer();
       },
       out: function(event) {
         clearTimeout(this.longPressTimer);
       },
       up: function(event) {
         clearTimeout(this.longPressTimer);
-        var detail = {
-            char: this.char || this.textContent,
-            toLayout: this.toLayout
-        };
+        var detail = this.populateDetails();
         if (this.keysetRules && this.keysetRules.up != undefined) {
           detail.toKeyset = this.keysetRules.up[TO_KEYSET - OFFSET];
           detail.nextKeyset = this.keysetRules.up[NEXT_KEYSET - OFFSET];
         }
         this.fire('key-up', detail);
-      }
+      },
+
+      /**
+       * Character value associated with the key. Typically, the value is a
+       * single charcater, but may be multi-character in cases like a ".com"
+       * button.
+       * @type {string}
+       */
+      get charValue() {
+        return this.char || this.textContent;
+      },
+
+      populateDetails: function() {
+         return {
+            char: this.charValue,
+            toLayout: this.toLayout,
+            repeat: this.repeat
+         };
+      },
+
+      generateLongPressTimer: function() {
+        return this.asyncMethod(function() {
+          var detail = {
+            char: this.charValue,
+            hintText: this.hintText
+          };
+          if (this.keysetRules && this.keysetRules.long != undefined) {
+            detail.toKeyset = this.keysetRules.long[TO_KEYSET - OFFSET];
+            detail.nextKeyset = this.keysetRules.long[NEXT_KEYSET - OFFSET];
+          }
+          this.fire('key-longpress', detail);
+        }, null, LONGPRESS_DELAY_MSEC);
+      },
     });
   </script>
 </polymer-element>
diff --git a/chromium/ui/keyboard/resources/elements/kb-key-codes.html b/chromium/ui/keyboard/resources/elements/kb-key-codes.html
new file mode 100644
index 00000000000..b8353ecd938
--- /dev/null
+++ b/chromium/ui/keyboard/resources/elements/kb-key-codes.html
@@ -0,0 +1,180 @@
+<!--
+  -- 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.
+  -->
+
+<polymer-element name="kb-key-codes">
+<script>
+  (function() {
+    // Each virtual key event is assigned a unique ID.
+    var nextRequestID = 0;
+
+    // Keycodes have been deprecated in the KeyEvent specification, but are
+    // nonetheless required to support legacy web content.  The Keycodes in the
+    // following table are based on subset of US-EN 101-key keyboard. These
+    // codes are used in the absence of explicit keycodes for kb-key and
+    // kb-keysequence elements. Keyboard layout authors may explicitly set the
+    // keyCode attribute for kb-key or kb-keysequence elements to refer to
+    // indices in this table in order to emulate a physical keyboard with an
+    // alternate layout.  Not all keys on a virtual keyboard are required to
+    // have keyCodes.
+    var keyCodes = {
+      '\b': {keyCode: 0x08, shiftModifier: false},
+      '\t': {keyCode: 0x09, shiftModifier: false},
+      '\n': {keyCode: 0x0D, shiftModifier: false},
+      ' ': {keyCode: 0x20, shiftModifier: false},
+      '0': {keyCode: 0x30, shiftModifier: false},
+      ')': {keyCode: 0x30, shiftModifier: true},
+      '1': {keyCode: 0x31, shiftModifier: false},
+      '!': {keyCode: 0x31, shiftModifier: true},
+      '2': {keyCode: 0x32, shiftModifier: false},
+      '@': {keyCode: 0x32, shiftModifier: true},
+      '3': {keyCode: 0x33, shiftModifier: false},
+      '#': {keyCode: 0x33, shiftModifier: true},
+      '4': {keyCode: 0x34, shiftModifier: false},
+      '$': {keyCode: 0x34, shiftModifier: true},
+      '5': {keyCode: 0x35, shiftModifier: false},
+      '%': {keyCode: 0x35, shiftModifier: true},
+      '6': {keyCode: 0x36, shiftModifier: false},
+      '^': {keyCode: 0x36, shiftModifier: true},
+      '7': {keyCode: 0x37, shiftModifier: false},
+      '&': {keyCode: 0x37, shiftModifier: true},
+      '8': {keyCode: 0x38, shiftModifier: false},
+      '*': {keyCode: 0x38, shiftModifier: true},
+      '9': {keyCode: 0x39, shiftModifier: false},
+      '(': {keyCode: 0x39, shiftModifier: true},
+      'a': {keyCode: 0x41, shiftModifier: false},
+      'A': {keyCode: 0x41, shiftModifier: true},
+      'b': {keyCode: 0x42, shiftModifier: false},
+      'B': {keyCode: 0x42, shiftModifier: true},
+      'c': {keyCode: 0x43, shiftModifier: false},
+      'C': {keyCode: 0x43, shiftModifier: true},
+      'd': {keyCode: 0x44, shiftModifier: false},
+      'D': {keyCode: 0x44, shiftModifier: true},
+      'e': {keyCode: 0x45, shiftModifier: false},
+      'E': {keyCode: 0x45, shiftModifier: true},
+      'f': {keyCode: 0x46, shiftModifier: false},
+      'F': {keyCode: 0x46, shiftModifier: true},
+      'g': {keyCode: 0x47, shiftModifier: false},
+      'G': {keyCode: 0x47, shiftModifier: true},
+      'h': {keyCode: 0x48, shiftModifier: false},
+      'H': {keyCode: 0x48, shiftModifier: true},
+      'i': {keyCode: 0x49, shiftModifier: false},
+      'I': {keyCode: 0x49, shiftModifier: true},
+      'j': {keyCode: 0x4A, shiftModifier: false},
+      'J': {keyCode: 0x4A, shiftModifier: true},
+      'k': {keyCode: 0x4B, shiftModifier: false},
+      'K': {keyCode: 0x4B, shiftModifier: true},
+      'l': {keyCode: 0x4C, shiftModifier: false},
+      'L': {keyCode: 0x4C, shiftModifier: true},
+      'm': {keyCode: 0x4D, shiftModifier: false},
+      'M': {keyCode: 0x4D, shiftModifier: true},
+      'n': {keyCode: 0x4E, shiftModifier: false},
+      'N': {keyCode: 0x4E, shiftModifier: true},
+      'o': {keyCode: 0x4F, shiftModifier: false},
+      'O': {keyCode: 0x4F, shiftModifier: true},
+      'p': {keyCode: 0x50, shiftModifier: false},
+      'P': {keyCode: 0x50, shiftModifier: true},
+      'q': {keyCode: 0x51, shiftModifier: false},
+      'Q': {keyCode: 0x51, shiftModifier: true},
+      'r': {keyCode: 0x52, shiftModifier: false},
+      'R': {keyCode: 0x52, shiftModifier: true},
+      's': {keyCode: 0x53, shiftModifier: false},
+      'S': {keyCode: 0x53, shiftModifier: true},
+      't': {keyCode: 0x54, shiftModifier: false},
+      'T': {keyCode: 0x54, shiftModifier: true},
+      'u': {keyCode: 0x55, shiftModifier: false},
+      'U': {keyCode: 0x55, shiftModifier: true},
+      'v': {keyCode: 0x56, shiftModifier: false},
+      'V': {keyCode: 0x56, shiftModifier: true},
+      'w': {keyCode: 0x57, shiftModifier: false},
+      'W': {keyCode: 0x57, shiftModifier: true},
+      'x': {keyCode: 0x58, shiftModifier: false},
+      'X': {keyCode: 0x58, shiftModifier: true},
+      'y': {keyCode: 0x59, shiftModifier: false},
+      'Y': {keyCode: 0x59, shiftModifier: true},
+      'z': {keyCode: 0x5A, shiftModifier: false},
+      'Z': {keyCode: 0x5A, shiftModifier: true},
+      ';': {keyCode: 0xBA, shiftModifier: false},
+      ':': {keyCode: 0xBA, shiftModifier: true},
+      '=': {keyCode: 0xBB, shiftModifier: false},
+      '+': {keyCode: 0xBB, shiftModifier: true},
+      ',': {keyCode: 0xBC, shiftModifier: false},
+      '<': {keyCode: 0xBC, shiftModifier: true},
+      '-': {keyCode: 0xBD, shiftModifier: false},
+      '_': {keyCode: 0xBD, shiftModifier: true},
+      '.': {keyCode: 0xBE, shiftModifier: false}, 
+      '>': {keyCode: 0xBE, shiftModifier: true}, 
+      '/': {keyCode: 0xBF, shiftModifier: false},
+      '?': {keyCode: 0xBF, shiftModifier: true}, 
+      '`': {keyCode: 0xC0, shiftModifier: false},
+      '~': {keyCode: 0xC0, shiftModifier: true},
+      '[': {keyCode: 0xDB, shiftModifier: false},
+      '{': {keyCode: 0xDB, shiftModifier: true},
+      '\\': {keyCode: 0xDC, shiftModifier: false},
+      '|': {keyCode: 0xDC, shiftModifier: true}, 
+      ']': {keyCode: 0xDD, shiftModifier: false},
+      '}': {keyCode: 0xDD, shiftModifier: true},
+      '\'': {keyCode: 0xDE, shiftModifier: false},
+      '"': {keyCode: 0xDE, shiftModifier: true},
+    };
+
+    Polymer('kb-key-codes', {
+      /**
+       * Retrieves the keyCode and status of the shift modifier.
+       * @param {string} id ID of an entry in the code table.
+       * @return {keyCode: numeric, shiftModifier: boolean}
+       */
+      GetKeyCodeAndModifiers: function(id) {
+        var entry = keyCodes[id];
+        if (entry) {
+          return {
+            keyCode: entry.keyCode,
+            shiftModifier: entry.shiftModifier
+          };
+        }
+        return {
+          keyCode: 0,
+          shiftModifier: false
+        };
+      },
+
+     /**
+      * Creates a virtual key event for use with the keyboard extension API.
+      * See http://www.w3.org/TR/DOM-Level-3-Events/#events-KeyboardEvent.
+      * @param {Object} detail Attribute of the key being pressed or released.
+      * @param {string} type The type of key event, which may be keydown
+      *     or keyup.
+      * @return {?KeyboardEvent} A KeyboardEvent object, or undefined on
+      *     failure.
+      */
+     createVirtualKeyEvent: function(detail, type) {
+       var char = detail.char;
+       if (!char || char.length != 1) {
+         console.error('Invalid key. Expected single character.');
+         return;
+       }
+       var keyCode = detail.keyCode;
+       var shiftModifier = detail.shiftModifier;
+       if (keyCode == undefined) {
+         var state = this.GetKeyCodeAndModifiers(char);
+         if (state) {
+           keyCode = state.keyCode;
+           shiftModifier = state.shiftModifier;
+         } else {
+           keyCode = 0;
+           shiftModifier = false;
+         }
+       }
+       return {
+         type: type,
+         charValue: char.charCodeAt(0),
+         keyCode: keyCode,
+         shiftKey: shiftModifier
+       };
+     },
+    });
+  })();
+</script>
+</polymer-element>
diff --git a/chromium/ui/keyboard/resources/elements/kb-key-sequence.html b/chromium/ui/keyboard/resources/elements/kb-key-sequence.html
index dee295bec3b..ad01003b2a1 100644
--- a/chromium/ui/keyboard/resources/elements/kb-key-sequence.html
+++ b/chromium/ui/keyboard/resources/elements/kb-key-sequence.html
@@ -4,7 +4,7 @@
   -- found in the LICENSE file.
   -->
 
-<polymer-element name="kb-key-sequence" attributes="keys superscripts">
+<polymer-element name="kb-key-sequence" attributes="keys hintTexts keyCodes">
   <template>
     <style>
       @host {
@@ -13,6 +13,7 @@
         }
       }
     </style>
+    <kb-key-codes id="keyCodeMetadata"></kb-key-codes>
   </template>
   <script>
     Polymer('kb-key-sequence', {
@@ -23,9 +24,14 @@
         var result;
         if (this.keys) {
           var newKeys = this.keys;
-          var newSuperScripts = this.superscripts;
-          if (newSuperScripts && newKeys.length != newSuperScripts.length) {
-            console.error('keys and superscripts do not match');
+          var newHintTexts = this.hintTexts;
+          if (newHintTexts && newKeys.length != newHintTexts.length) {
+            console.error('keys and hintTexts do not match');
+            return;
+          }
+          var keyCodes = this.keyCodes || newKeys;
+          if (keyCodes && newKeys.length != keyCodes.length) {
+             console.error('keys and keyCodes do not match');
             return;
           }
           var replacement = document.createDocumentFragment();
@@ -33,8 +39,14 @@
             var key = document.createElement('kb-key');
             key.innerText = newKeys[i];
             key.accents = newKeys[i];
-            if (newSuperScripts)
-              key.superscript = newSuperScripts[i];
+            if (newHintTexts)
+              key.hintText = newHintTexts[i];
+            var state = this.$.keyCodeMetadata.GetKeyCodeAndModifiers(
+                keyCodes[i]);
+            if (state) {
+              key.keyCode = state.keyCode;
+              key.shiftModifier = state.shiftModifier;
+            }
             replacement.appendChild(key);
           }
           result = replacement;
diff --git a/chromium/ui/keyboard/resources/elements/kb-key.html b/chromium/ui/keyboard/resources/elements/kb-key.html
index fc366bbee92..d9bf0776750 100644
--- a/chromium/ui/keyboard/resources/elements/kb-key.html
+++ b/chromium/ui/keyboard/resources/elements/kb-key.html
@@ -4,7 +4,8 @@
   -- found in the LICENSE file.
   -->
 
-<polymer-element name="kb-key" extends="kb-key-base" attributes="weight">
+<polymer-element name="kb-key" extends="kb-key-base"
+    attributes="keyCode shiftModifier weight">
   <template>
     <style>
       @host {
@@ -16,45 +17,67 @@
     <div id="key" pseudo="x-key" inverted?={{invert}}>
       <content></content>
     </div>
-    <div pseudo="x-superscript" inverted?={{invert}}>{{superscript}}</div>
+    <div pseudo="x-hinttext" inverted?={{invert}}>{{hintText}}</div>
   </template>
   <script>
     Polymer('kb-key', {
-      weight: 1
+      /**
+       * Key codes have been deprecated in DOM3 key events, but are required
+       * for legacy web content. The key codes depend on the position of the
+       * key on the keyboard and is independent of which modifier keys (shift,
+       *  alt, ...) are active.
+       * @type {number|undefined}
+       */
+      keyCode: undefined,
+      /**
+       * Whether the shift key is pressed when producing the key value.
+       * @type {boolean}
+       */
+      shiftModifier: false,
+      /**
+       * Weighting to use for layout in order to properly size the key.
+       * Keys with a high weighting are wider than normal keys.
+       * @type {number}
+       */
+      weight: 1,
+
+      /**
+       * Returns a subset of the key attributes.
+       * @return {Object} Mapping of attributes for the key element.
+       */
+      populateDetails: function() {
+        var details = this.super();
+        details.keyCode = this.keyCode;
+        details.shiftModifier = this.shiftModifier;
+        return details;
+      },
     });
   </script>
 </polymer-element>
 
 <!-- Special keys -->
 
-<polymer-element name="kb-shift-key" class="shift dark" char="Shift"
+<!--
+  -- TODO(kevers): Rip this out if and when we are done implementing the proper
+  -- layout switcher.
+  -->
+<polymer-element name="kb-layout-selector" class="layout-selector dark" char="Invalid"
     extends="kb-key">
   <script>
-    Polymer('kb-shift-key', {
-      down: function(event) {
-        this.super();
-        var detail = {};
-        if (this.keysetRules && this.keysetRules.dbl != undefined) {
-          detail.char = this.char || this.textContent;
-          detail.toKeyset = this.keysetRules.dbl[TO_KEYSET - OFFSET];
-          detail.nextKeyset = this.keysetRules.dbl[NEXT_KEYSET - OFFSET];
-        }
-        this.fire('enable-dbl', detail);
-        this.fire('enable-sel');
-      }
+    Polymer('kb-layout-selector', {
+      toLayout: 'qwerty'
     });
   </script>
 </polymer-element>
 
-<!--
-  -- TODO(kevers): Display popup menu for selecting layout on keypress. Display
-  -- code for keyboard layout in place of image.
-  -->
-<polymer-element name="kb-layout-selector" class="layout-selector dark" char="Invalid"
+<polymer-element name="kb-hide-keyboard-key" class="hide-keyboard dark" char="Invalid"
     extends="kb-key">
   <script>
-    Polymer('kb-layout-selector', {
-      toLayout: 'qwerty'
+    Polymer('kb-hide-keyboard-key', {
+      down: function(event) {},
+      up: function(event) {
+        hideKeyboard();
+      }
     });
   </script>
 </polymer-element>
diff --git a/chromium/ui/keyboard/resources/elements/kb-keyboard.html b/chromium/ui/keyboard/resources/elements/kb-keyboard.html
index f4efb314084..ea09e372f78 100644
--- a/chromium/ui/keyboard/resources/elements/kb-keyboard.html
+++ b/chromium/ui/keyboard/resources/elements/kb-keyboard.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.
   -->
@@ -7,7 +7,8 @@
 <polymer-element name="kb-keyboard" on-key-over="keyOver" on-key-up="keyUp"
     on-key-down="keyDown" on-key-longpress="keyLongpress" on-pointerup="up"
     on-pointerdown="down" on-enable-sel="enableSel"
-    on-enable-dbl="enableDbl" attributes="keyset layout rows">
+    on-enable-dbl="enableDbl"
+    attributes="keyset layout rows inputType inputTypeToLayoutMap">
   <template>
     <style>
       @host {
@@ -23,6 +24,7 @@
       -- keyboard layouts.
       -->
     <content select="#{{layout}}-{{keyset}}"></content>
+    <kb-key-codes id="keyCodeMetadata"></kb-key-codes>
   </template>
   <script>
     /**
@@ -50,6 +52,20 @@
     var DBL_INTERVAL_MSEC = 300;
 
     /**
+     * The index of the name of the keyset when searching for all keysets.
+     * @const
+     * @type {number}
+     */
+    var REGEX_KEYSET_INDEX = 1;
+
+    /**
+     * The integer number of matches when searching for keysets.
+     * @const
+     * @type {number}
+     */
+    var REGEX_MATCH_COUNT = 2;
+
+    /**
      * The boolean to decide if keyboard should transit to upper case keyset
      * when spacebar is pressed. If a closing punctuation is followed by a
      * spacebar, keyboard should automatically transit to upper case.
@@ -112,7 +128,6 @@
 
     /**
      * The boolean to decide if it is swipe in process or finished.
-     * @const
      * @type {boolean}
      */
     var swipeInProgress = false;
@@ -179,6 +194,18 @@
       dblDetail_: null,
       dblTimer_: null,
       swipeHandler: null,
+      shift: null,
+      inputType: null,
+
+      /**
+       * The default input type to keyboard layout map. The key must be one of
+       * the input box type values.
+       * @type {object}
+       */
+      inputTypeToLayoutMap: {
+        number: "numeric",
+        text: "qwerty"
+      },
 
       ready: function() {
         this.voiceInput_ = new VoiceInput(this);
@@ -186,6 +213,20 @@
       },
 
       /**
+       * Called when the type of focused input box changes. If a keyboard layout
+       * is defined for the current input type, that layout will be loaded.
+       * Otherwise, the keyboard layout for 'text' type will be loaded.
+       */
+      inputTypeChanged: function() {
+        // TODO(bshe): Toggle visibility of some keys in a keyboard layout
+        // according to the input type.
+        var layout = this.inputTypeToLayoutMap[this.inputType];
+        if (!layout)
+          layout = this.inputTypeToLayoutMap.text;
+        this.layout = layout;
+      },
+
+      /**
        * When double click/tap event is enabled, the second key-down and key-up
        * events on the same key should be skipped. Return true when the event
        * with |detail| should be skipped.
@@ -262,6 +303,24 @@
         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:
+            // Non-control key pressed, notify control keys.
+            // Control keys are shift, control and alt.
+            if(this.shift)
+              this.shift.onNonControlKeyDown();
+            break;
+        }
+
+        // A transition key was pressed, immediately move to new keyset.
         var toKeyset = detail.toKeyset;
         if (toKeyset) {
           this.keyset = toKeyset;
@@ -271,12 +330,13 @@
         }
 
         if (detail.repeat) {
-          insertText(detail.char);
+          this.keyTyped(detail);
           repeatKey.key = this.lastPressedKey;
+          var self = this;
           repeatKey.timer = setTimeout(function() {
             repeatKey.timer = undefined;
             repeatKey.interval = setInterval(function() {
-               insertText(detail.char);
+               self.keyTyped(detail);
             }, REPEAT_INTERVAL_MSEC);
           }, Math.max(0, REPEAT_DELAY_MSEC - REPEAT_INTERVAL_MSEC));
         }
@@ -294,6 +354,7 @@
           this.dblDetail_.clickCount = 0;
           var self = this;
           this.dblTimer_ = setTimeout(function() {
+            self.dblDetail_.callback = null;
             self.dblDetail_ = null;
           }, DBL_INTERVAL_MSEC);
         }
@@ -330,10 +391,15 @@
         if (this.dblDetail_) {
           this.dblDetail_.clickCount++;
           if (this.dblDetail_.clickCount == 2) {
+            this.dblDetail_.callback();
             this.keyset = this.dblDetail_.toKeyset;
-            var keysetId = '#' + this.layout + '-' + this.keyset
-            this.querySelector(keysetId).nextKeyset = this.dblTimer_.nextKeyset;
+            var keysetId = '#' + this.layout + '-' + this.keyset;
+            var keyset = this.querySelector(keysetId);
+            keyset.nextKeyset = this.dblTimer_.nextKeyset;
             clearTimeout(this.dblTimer_);
+            
+            this.classList.add('caps-locked');
+
             this.dblDetail_ = null;
           }
         }
@@ -347,7 +413,6 @@
           swipeInProgress = false;
           swipeStatus.resetAll();
         }
-        // Remove the pointermove event hander here.
         this.removeEventListener('pointermove', this.swipeHandler, false);
       },
 
@@ -362,31 +427,48 @@
         if (swipeInProgress)
           return;
         this.lastPressedKey.classList.remove('active');
-        if (this.lastPressedKey != event.target)
+        if (this.lastPressedKey.char != event.target.char)
           return;
         if (repeatKey.key == event.target) {
           repeatKey.cancel();
           return;
         }
-        var toKeyset = detail.toKeyset;
-        // Keyset transition key.
-        if (toKeyset) {
-          this.keyset = toKeyset;
+        var toKeysetId = detail.toKeyset;
+        // 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 =
               detail.nextKeyset;
         }
-        var toLayout = detail.toLayout;
+        var toLayoutId = detail.toLayout;
         // Layout transition key.
-        if (toLayout)
-          this.layout = toLayout;
+        if (toLayoutId)
+          this.layout = toLayoutId;
         var char = detail.char;
         if (enterUpperOnSpace) {
           enterUpperOnSpace = false;
-          if (char == ' ')
-            this.keyset = 'upper';
+          if (char == ' ') {
+            // If shift key defined in layout.
+            if(this.shift) {
+              var shiftDetail = this.shift.onSpaceAfterPunctuation();
+              var toKeyset = shiftDetail.toKeyset;
+              // Check if transition defined.
+              if(toKeyset) {
+                this.keyset = toKeyset;
+                this.querySelector('#' + this.layout + '-' +
+                    this.keyset).nextKeyset = shiftDetail.nextKeyset;
+              }
+            } else {
+              console.error('Capitalization on space after punctuation \
+                            enabled, but cannot find target keyset.');
+            }
+          }
         }
         switch(char) {
           case 'Invalid':
+            swipeStatus.swipeFlags = 0;
+            return;
           case 'Shift':
             swipeStatus.swipeFlags = 0;
             return;
@@ -401,7 +483,10 @@
           default:
             break;
         }
-        insertText(char);
+        if (char.length == 1)
+          this.keyTyped(detail);
+        else
+          insertText(char);
       },
 
       /*
@@ -411,12 +496,17 @@
        * @param {Object} detail The detail of pressed key.
        */
       keyLongpress: function(event, detail) {
+        // If the gesture is long press, remove the pointermove listener.
+        this.removeEventListener('pointermove', this.swipeHandler, false);
         var toKeyset = detail.toKeyset;
         // Keyset transtion key.
         if (toKeyset) {
           this.keyset = toKeyset;
           this.querySelector('#' + this.layout + '-' + this.keyset).nextKeyset =
               detail.nextKeyset;
+
+          // Locks the keyset before removing active to prevent flicker.
+          this.classList.add('caps-locked');
           // Makes last pressed key inactive if transit to a new keyset on long
           // press.
           this.lastPressedKey.classList.remove('active');
@@ -424,7 +514,7 @@
       },
 
       /**
-       * Handles a change in the keyboard layout.  Auto-selects the default
+       * Handles a change in the keyboard layout. Auto-selects the default
        * keyset for the new layout.
        */
       layoutChanged: function() {
@@ -435,14 +525,46 @@
             keyboard.appendChild(flattenKeysets(keysets.content));
             this.selectDefaultKeyset();
           } else {
-            console.error('Unable to find layout ' + this.layout);
-         }
+            // Add link for the keysets if missing from the document. Force
+            // a layout change after resolving the import of the link.
+            var query = 'link[id=' + this.layout + ']';
+            if (!document.querySelector(query)) {
+              // Layout has not beeen loaded yet.
+              var link = document.createElement('link');
+              link.id = this.layout;
+              link.setAttribute('rel', 'import');
+              link.setAttribute('href', 'layouts/' + this.layout + '.html');
+              document.head.appendChild(link);
+
+              // Load content for the new link element.
+              var self = this;
+              HTMLImports.importer.load(document, function() {
+                HTMLImports.parser.parseLink(link);
+                self.layoutChanged();
+              });
+            }
+          }
         }
+        this.classList.remove('caps-locked');
+        this.shift = this.querySelector('kb-shift-key');
+        if(this.shift)
+          this.shift.reset();
+      },
+
+      /**
+       * Generates fabricated key events to simulate typing on a
+       * physical keyboard.
+       * @param {Object} detail Attributes of the key being typed.
+       */
+      keyTyped: function(detail) {
+        var builder = this.$.keyCodeMetadata;
+        sendKeyEvent(builder.createVirtualKeyEvent(detail, "keydown"));
+        sendKeyEvent(builder.createVirtualKeyEvent(detail, "keyup"));
       },
 
       /**
        * Selects the default keyset for a layout.
-       * @return {boolean} True if successful.  This method can fail if the
+       * @return {boolean} True if successful. This method can fail if the
        *     keysets corresponding to the layout have not been injected.
        */
       selectDefaultKeyset: function() {
@@ -452,10 +574,10 @@
         var keysetsLoaded = false;
         for (var i = 0; i < keysets.length; i++) {
           var matches = keysets[i].id.match(regex);
-          if (matches && matches.length == 2) {
+          if (matches && matches.length == REGEX_MATCH_COUNT) {
              keysetsLoaded = true;
              if (keysets[i].isDefault) {
-               this.keyset = matches[1];
+               this.keyset = matches[REGEX_KEYSET_INDEX];
                return true;
              }
           }
@@ -467,4 +589,3 @@
     });
   </script>
 </polymer-element>
-
diff --git a/chromium/ui/keyboard/resources/elements/kb-keyset.html b/chromium/ui/keyboard/resources/elements/kb-keyset.html
index 365649d9830..92dd8b7f687 100644
--- a/chromium/ui/keyboard/resources/elements/kb-keyset.html
+++ b/chromium/ui/keyboard/resources/elements/kb-keyset.html
@@ -4,8 +4,9 @@
   -- found in the LICENSE file.
   -->
 
-<polymer-element name="kb-keyset" attributes="nextKeyset isDefault"
-    on-key-up="keyUp" on-key-longpress="keyLongpress">
+<polymer-element name="kb-keyset" attributes="nextKeyset isDefault
+    capsLocksTo capsLockable" on-key-up="keyUp"
+    on-key-longpress="keyLongpress">
   <template>
     <style>
       @host {
@@ -40,7 +41,7 @@
 
         var altkeyMetadata = this.$.altkeyMetadata;
         var altkeys = altkeyMetadata.getAltkeys(detail.char,
-                                                !!detail.superscript);
+                                                !!detail.hintText);
         if (!altkeys)
           return;
 
@@ -55,7 +56,7 @@
           activeAltKeySet = altkeyMetadata.createAltkeySet(detail.char,
                                                            maxLeftOffset,
                                                            maxRightOffset,
-                                                           detail.superscript);
+                                                           detail.hintText);
           altkeyContainer.appendChild(activeAltKeySet);
         }
 
diff --git a/chromium/ui/keyboard/resources/elements/kb-row.html b/chromium/ui/keyboard/resources/elements/kb-row.html
index 0a00058a060..0398587daa2 100644
--- a/chromium/ui/keyboard/resources/elements/kb-row.html
+++ b/chromium/ui/keyboard/resources/elements/kb-row.html
@@ -12,8 +12,11 @@
            -webkit-box-flex: 1;
            display: -webkit-box;
            text-align: center;
-           margin-right: 5px;
-           margin-top: 7px;
+           margin-right: 0.25em;
+           margin-top: 0.25em;
+        }
+        *:last-of-type {
+           margin-bottom: 0.25em;
         }
       }
       content::-webkit-distributed(kb-key) {
diff --git a/chromium/ui/keyboard/resources/elements/kb-shift-key.html b/chromium/ui/keyboard/resources/elements/kb-shift-key.html
new file mode 100644
index 00000000000..686a59c5125
--- /dev/null
+++ b/chromium/ui/keyboard/resources/elements/kb-shift-key.html
@@ -0,0 +1,186 @@
+<!--
+  -- 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.
+  -->
+
+<polymer-element name="kb-shift-key"
+    attributes="lowerCaseKeysetId upperCaseKeysetId"
+    class="shift dark" char="Shift" extends="kb-key">
+  <script>
+    (function () {
+
+      /**
+       * The possible states of the shift key.
+       * Unlocked is the default state. Locked for capslocked, pressed is a
+       * key-down and tapped for a key-down followed by an immediate key-up.
+       * @const
+       * @type {Enum}
+       */
+      var KEY_STATES = {
+        PRESSED: "pressed", // Key-down on shift key.
+        LOCKED: "locked", // Key is capslocked.
+        UNLOCKED: "unlocked", // Default state.
+        TAPPED: "tapped" // Key-down followed by key-up.
+      };
+
+      /**
+       * 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;
+
+      /**
+       * The current state of the shift key.
+       * @type {Enum}
+       */
+      var state = KEY_STATES.UNLOCKED;
+
+      Polymer('kb-shift-key', {
+        /**
+         * Defines how capslock effects keyset transition. We always transition
+         * from the lowerCaseKeysetId to the upperCaseKeysetId if capslock is on.
+         * @type {string}
+         */
+        lowerCaseKeysetId: 'lower',
+        upperCaseKeysetId: 'upper',
+
+        up: function(event) {
+          if (state == KEY_STATES.PRESSED) {
+            state = KEY_STATES.TAPPED;
+            // TODO(rsadam@): Add chording logic here.
+          }
+          this.super();
+        },
+
+        down: function(event) {
+          // First transition state so that populateDetails generates
+          // correct data.
+          switch (state) {
+            case KEY_STATES.UNLOCKED:
+              state = KEY_STATES.PRESSED;
+              break;
+            case KEY_STATES.TAPPED:
+            case KEY_STATES.LOCKED:
+              state = KEY_STATES.UNLOCKED;
+              break;
+            case KEY_STATES.PRESSED:
+              // We pressed another shift key at the same time,
+              // so ignore second press.
+              break;
+            default:
+              console.error("Undefined shift key state: " + state);
+              break;
+          }
+          // Trigger parent behaviour.
+          this.super();
+          this.fire('enable-sel');
+          // Populate double click transition details.
+          var detail = {};
+          detail.char = this.char || this.textContent;
+          detail.toKeyset = this.upperCaseKeysetId;
+          detail.nextKeyset = undefined;
+          detail.callback = this.onDoubleClick;
+          this.fire('enable-dbl', detail);
+        },
+
+        generateLongPressTimer: function() {
+          return this.asyncMethod(function() {
+            var detail = this.populateDetails();
+            if (state == KEY_STATES.LOCKED) {
+              // We don't care about the longpress if we are already
+              // capitalized.
+              return;
+            } else {
+              state = KEY_STATES.LOCKED;
+              detail.toKeyset = this.upperCaseKeysetId;
+              detail.nextKeyset = undefined;
+            }
+            this.fire('key-longpress', detail);
+          }, null, LONGPRESS_DELAY_MSEC);
+        },
+
+        /**
+         * Callback function for when a double click is triggered.
+         */
+        onDoubleClick: function() {
+          state = KEY_STATES.LOCKED;
+        },
+
+        /**
+         * Notifies shift key that a non-control key was pressed down.
+         * A control key is defined as one of shift, control or alt.
+         */
+        onNonControlKeyDown: function() {
+           // TODO(rsadam@): add logic for chording here.
+           switch (state) {
+             case (KEY_STATES.TAPPED):
+               state = KEY_STATES.UNLOCKED;
+               break;
+             case (KEY_STATES.PRESSED):
+               // Enter chording mode. First disable longpress timer.
+               clearTimeout(this.shiftLongPressTimer);
+               break;
+             default:
+               break;
+           }
+         },
+
+        /**
+         * Callback function for when a space is pressed after punctuation.
+         * @return {Object} The keyset transitions the keyboard should make.
+         */
+        onSpaceAfterPunctuation: function() {
+           var detail = {};
+           detail.toKeyset = this.upperCaseKeysetId;
+           detail.nextKeyset = this.lowerCaseKeysetId;
+           state = KEY_STATES.TAPPED;
+           return detail;
+        },
+
+        populateDetails: function() {
+          var detail = this.super();
+          switch(state) {
+            case(KEY_STATES.LOCKED):
+              detail.toKeyset = this.upperCaseKeysetId;
+              break;
+            case(KEY_STATES.UNLOCKED):
+              detail.toKeyset = this.lowerCaseKeysetId;
+              break;
+            case(KEY_STATES.PRESSED):
+              detail.toKeyset = this.upperCaseKeysetId;
+              break;
+            case(KEY_STATES.TAPPED):
+              detail.toKeyset = this.upperCaseKeysetId;
+              detail.nextKeyset = this.lowerCaseKeysetId;
+              break;
+          }
+          return detail;
+        },
+
+        /**
+         *  Resets the shift key state.
+         */
+        reset: function() {
+          state = KEY_STATES.UNLOCKED;
+        },
+
+        /**
+         * Overrides longPressTimer for the shift key.
+         */
+        get longPressTimer() {
+          return shiftLongPressTimer;
+        },
+
+        set longPressTimer(timer) {
+          shiftLongPressTimer = timer;
+        },
+
+        get state() {
+          return state;
+        }
+      });
+    })();
+  </script>
+</polymer-element>
\ No newline at end of file
diff --git a/chromium/ui/keyboard/resources/index.html b/chromium/ui/keyboard/resources/index.html
index ac2982b4bc0..c18e8e89285 100644
--- a/chromium/ui/keyboard/resources/index.html
+++ b/chromium/ui/keyboard/resources/index.html
@@ -23,20 +23,22 @@
     <link rel="import" href="elements/kb-altkey.html">
     <link rel="import" href="elements/kb-altkey-data.html">
     <link rel="import" href="elements/kb-altkey-set.html">
-
+    <link rel="import" href="elements/kb-key-codes.html">
     <link rel="import" href="elements/kb-key-base.html">
     <link rel="import" href="elements/kb-key.html">
     <link rel="import" href="elements/kb-keyboard.html">
     <link rel="import" href="elements/kb-keyset.html">
     <link rel="import" href="elements/kb-row.html">
-    <!-- TODO(kevers|biao): Switch to dynamic loading strategy once supported
-    in Polymer (http://www.crbug.com/260278).-->
-    <link id="dvorak" rel="import" href="layouts/dvorak.html">
-    <link id="qwerty" rel="import" href="layouts/qwerty.html">
-    <!--TODO(stevet): Import 'Open Sans' font. -->
+    <link rel="import" href="elements/kb-shift-key.html">
+    <link rel="import" href="elements/kb-key-sequence.html">
+    <link rel="import" href="elements/kb-key-import.html">
+    <!-- New layouts are dynamically loaded on demand. The link elements are
+      -- inserted here.
+      -->
   </head>
   <body>
-    <kb-keyboard id="keyboard" touch-action="none" layout="qwerty">
+    <!-- TODO(bshe): initial input type should not be hard coded to text. -->
+    <kb-keyboard id="keyboard" touch-action="none" inputType="text">
     </kb-keyboard>
   </body>
 </html>
diff --git a/chromium/ui/keyboard/resources/layouts/dvorak.html b/chromium/ui/keyboard/resources/layouts/dvorak.html
index 2f90470a8d1..1bd2300aefd 100644
--- a/chromium/ui/keyboard/resources/layouts/dvorak.html
+++ b/chromium/ui/keyboard/resources/layouts/dvorak.html
@@ -4,15 +4,13 @@
   -- found in the LICENSE file.
   -->
 
-<link rel="import" href="../elements/kb-key-sequence.html">
-<link rel="import" href="../elements/kb-key-import.html">
 <link id="spacebar-row" rel="import" href="spacebar-row.html">
 
 <template>
   <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>
+      <kb-key-sequence keys="&quot;,.PYFGCRL" hintTexts="1234567890"></kb-key-sequence>
       <kb-key class="backspace dark" char="&#x0008;" repeat align="right">backspace</kb-key>
     </kb-row>
     <kb-row>
@@ -21,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 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 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>
@@ -38,7 +36,7 @@
   <kb-keyset id="dvorak-lower" isDefault=true>
     <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>
+      <kb-key-sequence keys="&quot;,.pyfgcrl" hintTexts="1234567890"></kb-key-sequence>
       <kb-key class="backspace dark" char="&#x0008;" repeat align="right">backspace</kb-key>
     </kb-row>
     <kb-row>
@@ -47,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 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 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>
@@ -73,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>
@@ -103,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>
diff --git a/chromium/ui/keyboard/resources/layouts/numeric.html b/chromium/ui/keyboard/resources/layouts/numeric.html
new file mode 100644
index 00000000000..6375f734a5f
--- /dev/null
+++ b/chromium/ui/keyboard/resources/layouts/numeric.html
@@ -0,0 +1,28 @@
+<!--
+  -- 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.
+  -->
+
+<template>
+  <kb-keyset id="numeric-symbol" isDefault=true>
+    <kb-row>
+      <kb-key>1</kb-key><kb-key>2</kb-key><kb-key>3</kb-key>
+      <kb-key class="dark">-</kb-key>
+    </kb-row>
+    <kb-row>
+      <kb-key>4</kb-key><kb-key>5</kb-key><kb-key>6</kb-key>
+      <kb-key class="dark">,</kb-key>
+    </kb-row>
+    <kb-row>
+      <kb-key>7</kb-key><kb-key>8</kb-key><kb-key>9</kb-key>
+      <kb-key char="&#x0008;" repeat class="dark">backspace</kb-key>
+    </kb-row>
+    <kb-row>
+      <kb-key char=" " class="dark">space</kb-key>
+      <kb-key>0</kb-key>
+      <kb-key class="dark">.</kb-key>
+      <kb-key char="&#x0009;" class="dark">next</kb-key>
+    </kb-row>
+  </kb-keyset>
+</template>
diff --git a/chromium/ui/keyboard/resources/layouts/qwerty.html b/chromium/ui/keyboard/resources/layouts/qwerty.html
index 0f19ebf80f3..361eaf0e726 100644
--- a/chromium/ui/keyboard/resources/layouts/qwerty.html
+++ b/chromium/ui/keyboard/resources/layouts/qwerty.html
@@ -4,15 +4,13 @@
   -- found in the LICENSE file.
   -->
 
-<link rel="import" href="../elements/kb-key-sequence.html">
-<link rel="import" href="../elements/kb-key-import.html">
 <link id="spacebar-row" rel="import" href="spacebar-row.html">
 
 <template>
   <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>
+      <kb-key-sequence keys="QWERTYUIOP" hintTexts="1234567890"></kb-key-sequence>
       <kb-key class="backspace dark" char="&#x0008;" repeat align="right">backspace</kb-key>
     </kb-row>
     <kb-row>
@@ -21,17 +19,17 @@
       <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 weight="1.8" align="left">shift</kb-shift-key>
       <kb-key-sequence keys="ZXCVBNM"></kb-key-sequence>
-      <kb-key invert superscript="!" char="!">,</kb-key>
-      <kb-key invert superscript="?" char="?">.</kb-key>
-      <kb-shift-key toKeyset="up:lower" weight="1.8" align="right">shift</kb-shift-key>
+      <kb-key invert hintText="!" char="!">,</kb-key>
+      <kb-key invert hintText="?" char="?">.</kb-key>
+      <kb-shift-key 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-layout-selector toLayout="dvorak"></kb-layout-selector>
+      <kb-key class="symbol dark" toKeyset="down:symbol" char="Invalid" align="right">#123</kb-key>
+      <kb-hide-keyboard-key></kb-hide-keyboard-key>
     </kb-row>
     <kb-altkey-container hidden>
     </kb-altkey-container>
@@ -40,7 +38,7 @@
   <kb-keyset id="qwerty-lower" isDefault=true>
     <kb-row>
       <kb-key class="tab dark" char="&#x0009;" align="left">tab</kb-key>
-      <kb-key-sequence keys="qwertyuiop" superscripts="1234567890"></kb-key-sequence>
+      <kb-key-sequence keys="qwertyuiop" hintTexts="1234567890"></kb-key-sequence>
       <kb-key class="backspace dark" char="&#x0008;" repeat align="right">backspace</kb-key>
     </kb-row>
     <kb-row>
@@ -49,16 +47,16 @@
       <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 weight="1.8" align="left">shift</kb-shift-key>
       <kb-key-sequence keys="zxcvbnm"></kb-key-sequence>
-      <kb-key superscript="!">,</kb-key><kb-key superscript="?">.</kb-key>
-      <kb-shift-key toKeyset="up:upper:lower; long:upper; dbl:upper" weight="1.8" align="right">shift</kb-shift-key>
+      <kb-key hintText="!">,</kb-key><kb-key hintText="?">.</kb-key>
+      <kb-shift-key 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-layout-selector toLayout="dvorak"></kb-layout-selector>
+      <kb-key class="symbol dark" toKeyset="down:symbol" char="Invalid" align="right">#123</kb-key>
+      <kb-hide-keyboard-key></kb-hide-keyboard-key>
     </kb-row>
     <kb-altkey-container hidden>
     </kb-altkey-container>
@@ -82,17 +80,17 @@
       <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-layout-selector toLayout="dvorak"></kb-layout-selector>
+      <kb-key class="symbol dark" toKeyset="down:lower" char="Invalid" align="right">abc</kb-key>
+      <kb-hide-keyboard-key></kb-hide-keyboard-key>
     </kb-row>
     <kb-altkey-container hidden>
     </kb-altkey-container>
@@ -114,17 +112,17 @@
       <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-layout-selector toLayout="dvorak"></kb-layout-selector>
+      <kb-key class="symbol dark" toKeyset="down:lower" char="Invalid" align="right">abc</kb-key>
+      <kb-hide-keyboard-key></kb-hide-keyboard-key>
     </kb-row>
   </kb-keyset>
 </template>
diff --git a/chromium/ui/keyboard/resources/layouts/symbol-altkeys.js b/chromium/ui/keyboard/resources/layouts/symbol-altkeys.js
index 24dfed8757a..a123dbf2a5d 100644
--- a/chromium/ui/keyboard/resources/layouts/symbol-altkeys.js
+++ b/chromium/ui/keyboard/resources/layouts/symbol-altkeys.js
@@ -3,21 +3,21 @@
 // found in the LICENSE file.
 
 var symbolAltKeys = {
-  '1': ['\u00B9', // Superscript 1
+  '1': ['\u00B9', // HintText 1
         '\u00BD', // Vulgar fraction 1/2
         '\u2153', // Vulgar fraction 1/3
         '\u00BC', // Vulgar fraction 1/4
         '\u215B'], // Vulgar fraction 1/8
-  '2': ['\u00B2', // Superscript 2
+  '2': ['\u00B2', // HintText 2
         '\u2154'], // Vulgar fraction 2/3
-  '3': ['\u00B3', // Superscript 3
+  '3': ['\u00B3', // HintText 3
         '\u00BE', // Vulgar fraction 3/4
         '\u215C'], // Vulgar fraction 3/8
-  '4': ['\u2074'], // Superscript 4
+  '4': ['\u2074'], // HintText 4
   '5': ['\u215D'], // Vulgar fraction 5/8
   '7': ['\u215E'], // Vulgar fraction 7/8
   '0': ['\u00D8', // Empty set
-        '\u207F'], // Superscript small n
+        '\u207F'], // HintText small n
   '$': ['\u20AC', // Euro sign
         '\u00A5', // Yen sign
         '\u00A3', // Pound sign
@@ -36,7 +36,8 @@ var symbolAltKeys = {
   '!': ['\u00A1'], // Inverted exclamation mark
   '?': ['\u00BF'], // Inverted question mark
   '(': ['<', '{', '['],
-  ')': ['>', '}', ']']
+  ')': ['>', '}', ']'],
+  '.com' : ['.net','.org','.gov']
 };
 
 document.addEventListener('WebComponentsReady', function() {
diff --git a/chromium/ui/keyboard/resources/layouts/webui_qwerty.html b/chromium/ui/keyboard/resources/layouts/webui_qwerty.html
index 9abd2e67c86..0c5353f810f 100644
--- a/chromium/ui/keyboard/resources/layouts/webui_qwerty.html
+++ b/chromium/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" 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" 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>
diff --git a/chromium/ui/keyboard/resources/main.css b/chromium/ui/keyboard/resources/main.css
index 149384f8e67..b0948afd95c 100644
--- a/chromium/ui/keyboard/resources/main.css
+++ b/chromium/ui/keyboard/resources/main.css
@@ -22,6 +22,7 @@ kb-keyboard {
 }
 
 kb-shift-key,
+kb-hide-keyboard-key,
 kb-layout-selector,
 kb-key {
   background-color: #3b3b3e;
@@ -32,9 +33,9 @@ kb-key {
   border-radius: 2px;
   color: #ffffff;
   display: -webkit-box;
-  font-family: 'Open Sans', sans-serif;
+  font-family: 'Open Sans', 'Noto Sans UI', sans-serif;
   font-weight: 300;
-  margin-left: 7px;
+  margin-left: 0.25em;
   position: relative;
 }
 
@@ -45,14 +46,14 @@ kb-key::x-key {
   height: 1.2em;
   left: 0;
   margin: auto;
-  padding-left: 10px;
-  padding-right: 10px;
+  padding-left: 0.7em;
+  padding-right: 0.7em;
   position: absolute;
   right: 0;
   top: 0;
 }
 
-kb-key::x-superscript {
+kb-key::x-hinttext {
   color: #7c7c7c;
   font-size: 70%;
   position: absolute;
@@ -64,13 +65,19 @@ kb-key::x-key[inverted] {
   color: #7c7c7c;
 }
 
-kb-key::x-superscript[inverted] {
+kb-key::x-hinttext[inverted] {
   color: #ffffff;
 }
 
-kb-shift-key.dark,
-kb-layout-selector.dark,
-kb-key.dark {
+/**
+* Controls whether the shift key should be highlighted or not.
+* Only highlights if we are in the upper keyset, but not capslocked.
+*/
+kb-keyboard:not(.caps-locked)[keyset=upper] kb-shift-key {
+  color: lightblue;
+}
+
+*.dark {
   background-color: #2a2a2c;
   border-top: 2px solid #3a3a3c;
 }
@@ -87,6 +94,7 @@ kb-altkey::x-key {
   text-align: center;
 }
 
+.caps-locked kb-shift-key,
 .active {
   background-color: #848490 !important;
   border-top: 2px solid #A9A9AF !important;
@@ -137,25 +145,29 @@ kb-altkey::x-key {
   -webkit-box-flex: 0.6 !important;
 }
 
-.backspace,
-.dotcom,
-.left-more,
-.shift,
-.return,
-.right-more,
-.symbol,
-.tab {
+kb-shift-key.shift,
+kb-key:-webkit-any(.backspace,
+                   .dotcom,
+                   .left-more,
+                   .return,
+                   .symbol,
+                   .tab) {
   font-size: 70%;
+  /* Adjust margin for consistent spacing with the smaller font size. */
+  margin-left: 0.35em;
 }
 
 .microphone {
   background-image: url('images/microphone.svg');
+  background-position: 4%;
+  background-size: 25%;
 }
 
 .audio .microphone {
   background-image: url('images/microphone-green.svg');
 }
 
+.hide-keyboard,
 .layout-selector {
   background-image: url('images/keyboard.svg');
 }
diff --git a/chromium/ui/keyboard/resources/manifest.json b/chromium/ui/keyboard/resources/manifest.json
index 93d4a8fab52..5cd326c28a1 100644
--- a/chromium/ui/keyboard/resources/manifest.json
+++ b/chromium/ui/keyboard/resources/manifest.json
@@ -10,7 +10,7 @@
   },
   "permissions": [
     "audioCapture",
-    "experimental"
+    "virtualKeyboardPrivate"
   ],
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
 }
diff --git a/chromium/ui/keyboard/resources/webui/api_adapter.js b/chromium/ui/keyboard/resources/webui/api_adapter.js
index 1d24ba68bc2..17d84b9d7c3 100644
--- a/chromium/ui/keyboard/resources/webui/api_adapter.js
+++ b/chromium/ui/keyboard/resources/webui/api_adapter.js
@@ -5,3 +5,78 @@
 function insertText(text) {
   chrome.send('insertText', [ text ]);
 }
+
+function sendKeyEvent(event) {
+  chrome.send('sendKeyEvent', [ event ]);
+}
+
+function hideKeyboard() {
+  chrome.send('hideKeyboard');
+}
+
+(function(exports) {
+  /**
+   * An array to save callbacks of each request.
+   * @type {Array.<function(Object)>}
+   */
+  var requestIdCallbackMap = [];
+
+  /**
+   * An incremental integer that represents a unique requestId.
+   * @type {number}
+   */
+  var requestId = 0;
+
+  /**
+   * Called when a text input box gets focus.
+   * @param {object} inputContext Describes an input context. It only contains
+   *     the type of text input box at present and only "password", "number" and
+   *     "text" are supported.
+   */
+  function OnTextInputBoxFocused(inputContext) {
+    keyboard.inputType = inputContext.type;
+  }
+
+  /**
+   * Gets the context of the focused input field. The context is returned as a
+   * paramter in the |callback|.
+   * @param {function(Object)} callback The callback function after the webui
+   *     function finished.
+   * @return {number} The ID of the new request.
+   */
+  function GetInputContext(callback) {
+    var id = requestId;
+    requestIdCallbackMap[id] = callback;
+    chrome.send('getInputContext', [ id ]);
+    requestId++;
+    return id;
+  }
+
+  /**
+   * Cancel the callback specified by requestId.
+   * @param {number} requestId The requestId of the callback that about to
+   *     cancel.
+   */
+  function CancelRequest(requestId) {
+    requestIdCallbackMap[requestId] = undefined;
+  }
+
+  /**
+   * Webui function callback. Any call to chrome.send('getInputContext', [id])
+   * should trigger this function being called with the parameter
+   * inputContext.requestId == id.
+   * @param {Object} inputContext The context of focused input field. Note we
+   *     only have type(input box type) and requestId fields now.
+   */
+  function GetInputContextCallback(inputContext) {
+    var requestId = inputContext.requestId;
+    if (!requestIdCallbackMap[requestId])
+      return;
+    requestIdCallbackMap[requestId](inputContext);
+  }
+
+  exports.OnTextInputBoxFocused = OnTextInputBoxFocused;
+  exports.getInputContext = GetInputContext;
+  exports.cancelRequest = CancelRequest;
+  exports.GetInputContextCallback = GetInputContextCallback;
+})(this);
diff --git a/chromium/ui/keyboard/resources/webui/main.css b/chromium/ui/keyboard/resources/webui/main.css
index 5217143c811..092abd26362 100644
--- a/chromium/ui/keyboard/resources/webui/main.css
+++ b/chromium/ui/keyboard/resources/webui/main.css
@@ -31,7 +31,7 @@ kb-key {
   display: -webkit-box;
   font-family: 'Open Sans', sans-serif;
   font-weight: 600;
-  margin-left: 3px;
+  margin-left: 0.2em;
   position: relative;
 }
 
@@ -41,14 +41,14 @@ kb-key::x-key {
   height: 1.2em;
   left: 0;
   margin: auto;
-  padding-left: 10px;
-  padding-right: 10px;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
   position: absolute;
   right: 0;
   top: 0;
 }
 
-kb-key::x-superscript {
+kb-key::x-hinttext {
   color: #7c7c7c;
   font-size: 70%;
   position: absolute;
@@ -60,7 +60,7 @@ kb-key::x-key[inverted] {
   color: #7c7c7c;
 }
 
-kb-key::x-superscript[inverted] {
+kb-key::x-hinttext[inverted] {
   color: #ffffff;
 }
 
diff --git a/chromium/ui/keyboard/resources/webui_index.html b/chromium/ui/keyboard/resources/webui_index.html
index 48b1637571f..47ae8ed169b 100644
--- a/chromium/ui/keyboard/resources/webui_index.html
+++ b/chromium/ui/keyboard/resources/webui_index.html
@@ -25,11 +25,14 @@
     <link rel="import" href="elements/kb-altkey-container.html">
     <link rel="import" href="elements/kb-altkey-data.html">
     <link rel="import" href="elements/kb-altkey-set.html">
+    <link rel="import" href="elements/kb-key-codes.html">
     <link rel="import" href="elements/kb-key-base.html">
     <link rel="import" href="elements/kb-key.html">
     <link rel="import" href="elements/kb-keyboard.html">
     <link rel="import" href="elements/kb-keyset.html">
     <link rel="import" href="elements/kb-row.html">
+    <link rel="import" href="elements/kb-shift-key.html">
+    <link id="numeric" rel="import" href="layouts/numeric.html">
     <link id="qwerty" rel="import" href="layouts/qwerty.html">
     <!--TODO(stevet): Import 'Open Sans' font. -->
     <script src="main.js"></script>