Add layout switcher for virtual keyboard.

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

Index: ui/keyboard/resources/elements/kb-options-menu.html
diff --git a/ui/keyboard/resources/elements/kb-options-menu.html b/ui/keyboard/resources/elements/kb-options-menu.html
new file mode 100644
index 0000000000000000000000000000000000000000..a0d2980e847b14fbbca487e2ee058e87dfc45cb7
--- /dev/null
+++ b/ui/keyboard/resources/elements/kb-options-menu.html
@@ -0,0 +1,111 @@
+<!--
+  -- 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-options-menu-item" attributes="layout label active"
+    on-pointerup="up" on-pointerover="over" on-pointerout="out">
+  <template>
+    <style>
+      @host {
+        * {
+          -webkit-padding-end: 5px;
+          -webkit-padding-start: 5px;
+          color: #fff;
+          display: -webkit-box;
+          font-family: 'Open Sans', 'Noto Sans UI', sans-serif;
+          font-weight: 300;
+          height: 28px;
+        }
+        *.active {
+          background-color: #848490;
+        }
+    </style>
+    <span>{{label}}<span>

[bshe, 2013/10/28 15:20:20]

</span> ?

[kevers, 2013/10/28 15:40:16]

Done.

+  </template>
+  <script>
+    Polymer('kb-options-menu-item', {
+      /**
+       * Layout to select on a key press.
+       */
+      layout: null,
+
+      up: function(event) {
+        if (this.layout == 'none') 
+          hideKeyboard();
+        else

[bshe, 2013/10/28 15:20:20]

would it possible to dispatch an event instead of directly use keyboard.layout
here? It would be nice that inner element do not depend on parent element. We
probably want to use event to talk to parent element.

[kevers, 2013/10/28 15:40:16]

Done.

+          keyboard.layout = this.layout;
+        this.hidden = true;
+      },
+
+      over: function(event) {
+        this.classList.add('active');
+      },
+
+      out: function(event) {
+        this.classList.remove('active');
+      },
+    });
+  </script>
+</polymer>
+
+<polymer-element name="kb-options-menu">
+  <template>
+    <style>
+      @host {
+        * {
+          -webkit-box-orient: vertical;
+          background-color: #3b3b3e;
+          border-radius: 2px;
+          display: -webkit-box;
+          left: 0;
+          position: absolute;
+          top: 0;
+          z-index: 1;
+        }
+      }
+    </style>
+    <!-- TODO(kevers): This is a temporary placeholder to enable testing
+      -- of layout switching.  Deprecate once a decision is reached on
+      -- a more permanent solution for layout selection. -->
+    <kb-options-menu-item layout="system-qwerty" label="System QWERTY">
+    </kb-options-menu-item>
+    <kb-options-menu-item layout="qwerty" label="QWERTY">
+    </kb-options-menu-item>
+    <kb-options-menu-item layout="dvorak" label="Dvorak">
+    </kb-options-menu-item>
+    <kb-options-menu-item layout="none" label="Hide keyboard">
+    </kb-options-menu-item>
+  </template>
+  <script>
+    Polymer('kb-options-menu', {});
+   </script>
+</polymer>
+
+<polymer-element name="kb-keyboard-overlay" attributes="keyset"
+    on-pointerup="up">
+  <template>
+    <style>
+      @host {
+        * {
+          background-color: rgba(0, 0, 0, 0.6);
+          bottom: 0;
+          left: 0;
+          position: absolute;
+          right: 0;
+          top: 0;
+        }
+      }
+    </style>
+    <!-- Insert popups here. -->
+    <kb-options-menu id="options" hidden></kb-options-menu>
+  </template>
+  <script>
+    Polymer('kb-keyboard-overlay', {
+      up: function() {
+        this.hidden = true;
+      }
+    });
+  </script>
+</polymer-element>