Add layout switcher for virtual keyboard.

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

Index: ui/keyboard/resources/elements/kb-keyboard.html
diff --git a/ui/keyboard/resources/elements/kb-keyboard.html b/ui/keyboard/resources/elements/kb-keyboard.html
index b04713872b18cdbe3ec2379227fd8b239b6db872..c311faaee9f04a043ef6c5c9f2ff3874cf7726f5 100644
--- a/ui/keyboard/resources/elements/kb-keyboard.html
+++ b/ui/keyboard/resources/elements/kb-keyboard.html
@@ -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"  on-key-out="keyOut"
+    on-enable-dbl="enableDbl"  on-key-out="keyOut" on-show-options="showOptions"
+    on-set-layout="setLayout"
     attributes="keyset layout inputType inputTypeToLayoutMap">
   <template>
     <style>
@@ -24,6 +25,7 @@
       -- keyboard layouts.
       -->
     <content select="#{{layout}}-{{keyset}}"></content>
+    <kb-keyboard-overlay id="overlay" hidden></kb-keyboard-overlay>
     <kb-key-codes id="keyCodeMetadata"></kb-key-codes>
   </template>
   <script>
@@ -215,7 +217,7 @@
       inputTypeToLayoutMap: {
         number: "numeric",
         text: "qwerty",
-        password: "system-qwerty"
+        password: "qwerty"
       },
 
       /**
@@ -571,6 +573,41 @@
       },
 
       /**
+       * Show menu for selecting a keyboard layout.
+       * @param {!Event} event The triggering event.
+       * @param {{left: number, top: number, width: number}} details Location of
+       *     the button that triggered the popup.
+       */
+      showOptions: function(event, details) {
+        var overlay = this.$.overlay;
+        if (!overlay) {
+          console.error('Missing overlay.');
+          return;
+        }
+        var menu = overlay.$.options;
+        if (!menu) {
+           console.error('Missing options menu.');
+        }
+
+        menu.hidden = false;
+        overlay.hidden = false;
+        var left = details.left + details.width - menu.clientWidth;
+        var top = details.top - menu.clientHeight;
+        menu.style.left = left + 'px';
+        menu.style.top = top + 'px';
+      },
+
+      /**
+       * Handler for the 'set-layout' event.
+       * @param {!Event} event The triggering event.
+       * @param {{layout: string}} details Details of the event, which contains
+       *     the name of the layout to activate.
+       */
+      setLayout: function(event, details) {
+        this.layout = details.layout;
+      },
+
+      /**
        * Handles a change in the keyboard layout. Auto-selects the default
        * keyset for the new layout.
        */