Add layout switcher for virtual keyboard.

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

 <!--
   -- 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-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>
       @host {
         * {
           position: relative;
         }
       }
     </style>
     <!-- The ID for a keyset follows the naming convention of combining the
       -- layout name with a base keyset name. This convention is used to
       -- allow multiple layouts to be loaded (enablign fast switching) while
       -- allowing the shift and spacebar keys to be common across multiple
       -- 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>
     /**
      * The repeat delay in milliseconds before a key starts repeating. Use the
      * same rate as Chromebook.
      * (See chrome/browser/chromeos/language_preferences.cc)
      * @const
      * @type {number}
      */
@@ skipping 171 matching lines @@
       voiceInput_: 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",
-        password: "system-qwerty"
+        password: "qwerty"
       },
 
       /**
        * Changes the current keyset.
        * @param {Object} detail The detail of the event that called this
        *     function.
        */
       changeKeyset: function(detail) {
         if (detail.relegateToShift && this.shift) {
           this.keyset = this.shift.textKeyset;
@@ skipping 335 matching lines @@
           // 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.
           if (this.lastPressedKey)
             this.lastPressedKey.classList.remove('active');
         }
       },
 
       /**
+       * 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.
        */
       layoutChanged: function() {
         if (!this.selectDefaultKeyset()) {
           this.isReady = false;
           this.fire('stateChange', {state: 'loadingKeyset'});
 
           // Keyset selection fails if the keysets have not been loaded yet.
           var keysets = document.querySelector('#' + this.layout);
@@ skipping 147 matching lines @@
              }
           }
         }
         if (keysetsLoaded)
           console.error('No default keyset found for ' + this.layout);
         return false;
       }
     });
   </script>
 </polymer-element>