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 23d82272997244b2b83049684e1334045c7642ab..4f88ea3480c15a2cdea9308007376eb57f037b47 100644
--- a/ui/keyboard/resources/elements/kb-keyboard.html
+++ b/ui/keyboard/resources/elements/kb-keyboard.html
@@ -7,7 +7,7 @@
 <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"
     attributes="keyset layout rows inputType inputTypeToLayoutMap">
   <template>
     <style>
@@ -24,6 +24,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 +216,7 @@
       inputTypeToLayoutMap: {
         number: "numeric",
         text: "qwerty",
-        password: "system-qwerty"
+        password: "qwerty"
       },
 
       /**
@@ -573,6 +574,31 @@
       },
 
       /**
+       * 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';
+      },
+
+      /**
        * Handles a change in the keyboard layout. Auto-selects the default
        * keyset for the new layout.
        */