This patch brings the virtual keyboard up to the proposed v1 styling.

This also changes the layout of some keys to bring the keyboard closer to the v1 spec. BUG=248525,248226 Review URL: https://chromiumcodereview.appspot.com/16959020 git-svn-id: svn://svn.chromium.org/chrome/trunk/src@207834 0039d316-1c4b-4281-b951-d872f2087c98

This patch brings the virtual keyboard up to the proposed v1 styling.
This also changes the layout of some keys to bring the keyboard closer to the v1 spec. BUG=248525,248226 Review URL: https://chromiumcodereview.appspot.com/16959020 git-svn-id: svn://svn.chromium.org/chrome/trunk/src@207834 0039d316-1c4b-4281-b951-d872f2087c98
ad775376 · stevet@chromium.org · 95126eed · ad775376 · ad775376 · ad775376
Commit ad775376 authored Jun 21, 2013 by stevet@chromium.org
6 changed files
--- a/ui/keyboard/resources/constants.js
+++ b/ui/keyboard/resources/constants.js
@@ -12,7 +12,7 @@ var ASPECT_RATIO = 4.5;
 * Ratio of key height and font size.
 * @type {number}
 */
-var FONT_SIZE_RATIO = 3.5;
+var FONT_SIZE_RATIO = 3;

 /**
 * The number of rows in each keyset.

--- a/ui/keyboard/resources/elements/kb-key.html
+++ b/ui/keyboard/resources/elements/kb-key.html
@@ -26,7 +26,8 @@
        position: absolute;
        right: 0;
        top: 0;
-        text-align: center;
+        padding-left: 14px;
+        padding-right: 14px;
      }
    </style>
    <div id="key" class="key">

--- a/ui/keyboard/resources/elements/kb-row.html
+++ b/ui/keyboard/resources/elements/kb-row.html
-<!--
-  -- Copyright (c) 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.
-  -->
-
-<element name="kb-row">
-  <template>
-    <style>
-      @host {
-        * {
-           -webkit-box-flex: 1;
-           display: -webkit-box;
-           text-align: center;
-           margin-right: 5px;
-           margin-top: 5px;
-        }
-      }
-      content::-webkit-distributed(kb-key) {
-        -webkit-flex: 1 auto;
-      }
-    </style>
-    <content select="*"></content>
-  </template>
-  <script>
-    Polymer.register(this);
-  </script>
-</element>
+<!--
+  -- Copyright (c) 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.
+  -->
+
+<element name="kb-row">
+  <template>
+    <style>
+      @host {
+        * {
+           -webkit-box-flex: 1;
+           display: -webkit-box;
+           text-align: center;
+           margin-right: 5px;
+           margin-top: 7px;
+        }
+      }
+      content::-webkit-distributed(kb-key) {
+        -webkit-flex: 1 auto;
+      }
+    </style>
+    <content select="*"></content>
+  </template>
+  <script>
+    Polymer.register(this);
+  </script>
+</element>
--- a/ui/keyboard/resources/index.html
+++ b/ui/keyboard/resources/index.html
@@ -18,6 +18,7 @@
    <link rel="import" href="elements/kb-keyset.html">
    <link rel="import" href="elements/kb-keyboard.html">
    <link id="keysets" rel="import" href="keysets.html">
+    <!--TODO(stevet): Import 'Open Sans' font. -->
    <script src="main.js"></script>
  </head>
  <body>

--- a/ui/keyboard/resources/keysets.html
+++ b/ui/keyboard/resources/keysets.html
@@ -7,29 +7,29 @@
 <template>
  <kb-keyset id="upper" toKeyset="lower">
    <kb-row>
-      <kb-key class="tab dark" char="&#x0009;">tab</kb-key><kb-key>Q</kb-key>
+      <kb-key class="tab dark" char="&#x0009;" align="left">tab</kb-key><kb-key>Q</kb-key>
      <kb-key>W</kb-key><kb-key>E</kb-key><kb-key>R</kb-key><kb-key>T</kb-key>
      <kb-key>Y</kb-key><kb-key>U</kb-key><kb-key>I</kb-key><kb-key>O</kb-key>
      <kb-key>P</kb-key>
-      <kb-key class="backspace dark" char="&#x0008;" repeat>backspace</kb-key>
+      <kb-key class="backspace dark" char="&#x0008;" repeat align="right">backspace</kb-key>
    </kb-row>
    <kb-row>
-      <kb-key class="symbol dark" toKeyset="symbol" char="Invalid">#123</kb-key>
+      <kb-key class="symbol dark" toKeyset="symbol" char="Invalid" align="left">#123</kb-key>
      <kb-key>A</kb-key><kb-key>S</kb-key><kb-key>D</kb-key><kb-key>F</kb-key>
      <kb-key>G</kb-key><kb-key>H</kb-key><kb-key>J</kb-key><kb-key>K</kb-key>
-      <kb-key>L</kb-key><kb-key>\</kb-key>
-      <kb-key class='return dark' char="&#x000A;">enter</kb-key>
+      <kb-key>L</kb-key>
+      <kb-key class='return dark' char="&#x000A;" align="right">enter</kb-key>
    </kb-row>
    <kb-row>
-      <kb-key class="left-shift dark" toKeyset="lower" char="Invalid">shift</kb-key>
+      <kb-key class="left-shift dark" toKeyset="lower" char="Invalid" align="left">shift</kb-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>@</kb-key>
-      <kb-key>!</kb-key><kb-key>/</kb-key>
-      <kb-key class="right-shift dark" toKeyset="lower" char="Invalid">shift</kb-key>
+      <kb-key>B</kb-key><kb-key>N</kb-key><kb-key>M</kb-key><kb-key>,</kb-key>
+      <kb-key>.</kb-key>
+      <kb-key class="right-shift dark" toKeyset="lower" char="Invalid" align="right">shift</kb-key>
    </kb-row>
    <kb-row>
      <kb-key class="mic dark" char="Mic"></kb-key>
-      <kb-key class="dark">.com</kb-key>
+      <kb-key class="dotcom dark">.com</kb-key>
      <kb-key char=" " class="space dark" toKeyset="upper"></kb-key>
      <kb-key class="dark">@</kb-key>
      <kb-key class="hide dark"></kb-key>
@@ -38,29 +38,29 @@

  <kb-keyset id="lower">
    <kb-row>
-      <kb-key class="tab dark" char="&#x0009;">tab</kb-key><kb-key>q</kb-key>
+      <kb-key class="tab dark" char="&#x0009;" align="left">tab</kb-key><kb-key>q</kb-key>
      <kb-key>w</kb-key><kb-key>e</kb-key><kb-key>r</kb-key><kb-key>t</kb-key>
      <kb-key>y</kb-key><kb-key>u</kb-key><kb-key>i</kb-key><kb-key>o</kb-key>
      <kb-key>p</kb-key>
-      <kb-key class="backspace dark" char="&#x0008;" repeat>backspace</kb-key>
+      <kb-key class="backspace dark" char="&#x0008;" repeat align="right">backspace</kb-key>
    </kb-row>
    <kb-row>
-      <kb-key class="symbol dark" toKeyset="symbol" char="Invalid">#123</kb-key>
+      <kb-key class="symbol dark" toKeyset="symbol" char="Invalid" align="left">#123</kb-key>
      <kb-key>a</kb-key><kb-key>s</kb-key><kb-key>d</kb-key><kb-key>f</kb-key>
      <kb-key>g</kb-key><kb-key>h</kb-key><kb-key>j</kb-key><kb-key>k</kb-key>
-      <kb-key>l</kb-key><kb-key>;</kb-key>
-      <kb-key class='return dark' char="&#x000A;">enter</kb-key>
+      <kb-key>l</kb-key>
+      <kb-key class='return dark' char="&#x000A;" align="right">enter</kb-key>
    </kb-row>
    <kb-row>
-      <kb-key class="left-shift dark" toKeyset="upper" char="Invalid">shift</kb-key>
+      <kb-key class="left-shift dark" toKeyset="upper" char="Invalid" align="left">shift</kb-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>,</kb-key>
-      <kb-key>.</kb-key><kb-key>?</kb-key>
-      <kb-key class="right-shift dark" toKeyset="upper" char="Invalid">shift</kb-key>
+      <kb-key>.</kb-key>
+      <kb-key class="right-shift dark" toKeyset="upper" char="Invalid" align="right">shift</kb-key>
    </kb-row>
    <kb-row>
      <kb-key class="mic dark" char="Mic"></kb-key>
-      <kb-key class="dark">.com</kb-key>
+      <kb-key class="dotcom dark">.com</kb-key>
      <kb-key class="space dark" char=" "></kb-key>
      <kb-key class="dark">@</kb-key>
      <kb-key class="hide dark"></kb-key>
@@ -69,29 +69,29 @@

  <kb-keyset id="symbol">
    <kb-row>
-      <kb-key class="tab dark" char="&#x0009;">tab</kb-key><kb-key>1</kb-key>
+      <kb-key class="tab dark" char="&#x0009;" align="left">tab</kb-key><kb-key>1</kb-key>
      <kb-key>2</kb-key><kb-key>3</kb-key><kb-key>4</kb-key><kb-key>5</kb-key>
      <kb-key>6</kb-key><kb-key>7</kb-key><kb-key>8</kb-key><kb-key>9</kb-key>
      <kb-key>0</kb-key>
-      <kb-key class="backspace dark" char="&#x0008;" repeat>backspace</kb-key>
+      <kb-key class="backspace dark" char="&#x0008;" repeat align="right">backspace</kb-key>
    </kb-row>
    <kb-row>
-      <kb-key class="symbol dark" toKeyset="lower" char="Invalid">abc</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>)</kb-key>
-      <kb-key class='return dark' char="&#x000A;">enter</kb-key>
+      <kb-key class="symbol dark" toKeyset="lower" char="Invalid" align="left">abc</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='return dark' char="&#x000A;" align="right">enter</kb-key>
    </kb-row>
    <kb-row>
-      <kb-key class="left-more dark" toKeyset="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>_</kb-key><kb-key>,</kb-key>
-      <kb-key>.</kb-key><kb-key>?</kb-key>
-      <kb-key class="right-more dark" toKeyset="more" char="Invalid">more</kb-key>
+      <kb-key class="left-more dark" toKeyset="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="more" char="Invalid" align="right">more</kb-key>
    </kb-row>
    <kb-row>
      <kb-key class="mic dark" char="Mic"></kb-key>
-      <kb-key class="dark">.com</kb-key>
+      <kb-key class="dotcom dark">.com</kb-key>
      <kb-key class="space dark" char=" "></kb-key>
      <kb-key class="dark">@</kb-key>
      <kb-key class="hide dark"></kb-key>
@@ -100,29 +100,29 @@

  <kb-keyset id="more">
    <kb-row>
-      <kb-key class="tab dark" char="&#x0009;">tab</kb-key><kb-key>`</kb-key>
-      <kb-key>~</kb-key><kb-key>&#x003c;</kb-key><kb-key>&#x003E;</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 dark" char="&#x0008;" repeat>backspace</kb-key>
+    <kb-key class="tab dark" char="&#x0009;" align="left">tab</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>&#x003C;</kb-key><kb-key>&#x003E;</kb-key>
+      <kb-key class="backspace dark" char="&#x0008;" repeat align="right">backspace</kb-key>
    </kb-row>
    <kb-row>
-      <kb-key class="symbol dark" toKeyset="lower" char="Invalid">abc</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></kb-key>
-      <kb-key class='return dark' char="&#x000A;">enter</kb-key>
+      <kb-key class="symbol dark" toKeyset="lower" char="Invalid" align="left">abc</kb-key>
+      <kb-key>&#x00A3</kb-key><kb-key>&#x00A2</kb-key><kb-key>&#x20AC</kb-key><kb-key>&#x2122</kb-key>
+      <kb-key>&#x00A9</kb-key><kb-key>&#x00AE</kb-key><kb-key>\</kb-key><kb-key>[</kb-key>
+      <kb-key>]</kb-key>
+      <kb-key class='return dark' char="&#x000A;" align="right">enter</kb-key>
    </kb-row>
    <kb-row>
-      <kb-key class="left-more dark" toKeyset="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></kb-key><kb-key></kb-key>
-      <kb-key></kb-key><kb-key></kb-key>
-      <kb-key class="right-more dark" toKeyset="symbol" char="Invalid">#123</kb-key>
+      <kb-key class="left-more dark" toKeyset="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="symbol" char="Invalid" align="right">#123</kb-key>
    </kb-row>
    <kb-row>
      <kb-key class="mic dark" char="Mic"></kb-key>
-      <kb-key class="dark">.com</kb-key>
+      <kb-key class="dotcom dark">.com</kb-key>
      <kb-key class="space dark" char=" "></kb-key>
      <kb-key class="dark">@</kb-key>
      <kb-key class="hide dark"></kb-key>

--- a/ui/keyboard/resources/main.css
+++ b/ui/keyboard/resources/main.css
@@ -22,24 +22,25 @@ kb-keyboard {
 }

 kb-key {
-  background-color: #444444;
-  border-top: 1px solid #666666;
-  border-radius: 3px;
+  background-color: #3b3b3e;
+  border-top: 2px solid #4b4b4e;
+  border-radius: 2px;
  color: #ffffff;
-  font-family: sans-serif;
-  font-weight: 100;
-  margin-left: 5px;
+  font-family: 'Open Sans', sans-serif;
+  font-weight: 300;
+  margin-left: 7px;
 }

 kb-key.dark {
-  background-color: #333333;
+  background-color: #2a2a2c;
+  border-top: 2px solid #3a3a3c;
 }

 #upper .left-shift,
 #upper .right-shift,
 .active {
-  background-color: #acacac !important;
-  border-top: 1px solid rgba(125,125,125,0.5);
+  background-color: #848490 !important;
+  border-top: 2px solid #A9A9AF !important;
  /* Do not use box shadow until performance improves
   * http://code.google.com/p/chromium/issues/detail?id=99045
  box-shadow: 0px 0px 15px #fff;
@@ -56,8 +57,11 @@ kb-key.dark {
  -webkit-box-flex: 1.3 !important;
 }

-.symbol,
 .return {
+  -webkit-box-flex: 2.1 !important;
+}
+
+.symbol {
  -webkit-box-flex: 1.5 !important;
 }

@@ -67,12 +71,12 @@ kb-key.dark {

 .left-shift,
 .left-more {
-  -webkit-box-flex: 1.4 !important;
+  -webkit-box-flex: 1.8 !important;
 }

 .right-shift,
 .right-more {
-  -webkit-box-flex: 1.6 !important;
+  -webkit-box-flex: 1.8 !important;
 }

 .space {
@@ -84,15 +88,16 @@ kb-key.dark {
 }

 .backspace,
-.tab,
-.return,
-.left-shift,
-.right-shift,
+.dotcom,
 .left-more,
+.left-shift,
+.moddown.shift,
+.return,
 .right-more,
+.right-shift,
 .symbol,
-.moddown.shift {
-  font-size: 80%;
+.tab {
+  font-size: 70%;
 }

 .mic {