Adjust the WebUI keyboard css and layout to work better in narrow spaces.

NOTE that this must be patched on top of https://codereview.chromium.org/15176004/

TODOs: Add a list of adjustments here before review.

Review URL: https://chromiumcodereview.appspot.com/16336002

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@207982 0039d316-1c4b-4281-b951-d872f2087c98

4 files changed, 67 insertions, 44 deletions

diff --git a/ui/keyboard/resources/elements/kb-key.html b/ui/keyboard/resources/elements/kb-key.html
index 7226b69..8d24355 100644
--- a/ui/keyboard/resources/elements/kb-key.html
+++ b/ui/keyboard/resources/elements/kb-key.html
@@ -26,8 +26,8 @@
         position: absolute;
         right: 0;
         top: 0;
-        padding-left: 14px;
-        padding-right: 14px;
+        padding-left: 10px;
+        padding-right: 10px;
       }
     </style>
     <div id="key" class="key">
diff --git a/ui/keyboard/resources/webui/constants.js b/ui/keyboard/resources/webui/constants.js
index ea620c6..94ccfb2 100644
--- a/ui/keyboard/resources/webui/constants.js
+++ b/ui/keyboard/resources/webui/constants.js
@@ -13,7 +13,7 @@ var ASPECT_RATIO = 2.0;
  * Ratio of key height and font size.
  * @type {number}
  */
-var FONT_SIZE_RATIO = 3.5;
+var FONT_SIZE_RATIO = 2;
 
 /**
  * The number of rows in each keyset.
diff --git a/ui/keyboard/resources/webui/keysets.html b/ui/keyboard/resources/webui/keysets.html
index 67a9eac..bc86231 100644
--- a/ui/keyboard/resources/webui/keysets.html
+++ b/ui/keyboard/resources/webui/keysets.html
@@ -6,113 +6,114 @@
 
 <template>
   <kb-keyset id="upper" toKeyset="lower">
-    <kb-row>
+    <kb-row class="top">
       <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-row>
     <kb-row>
-      <kb-key class="tab dark" char="&#x0009;">tab</kb-key>
+      <div class="half-key-spacer"></div>
       <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>
+      <div class="half-key-spacer"></div>
     </kb-row>
     <kb-row>
-      <kb-key class="left-shift dark" toKeyset="lower" char="Invalid">shift</kb-key>
+      <kb-key class="left-shift padded-left-special dark" toKeyset="lower" char="Invalid">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 class="backspace dark" char="&#x0008;" repeat>backspace</kb-key>
+      <kb-key class="backspace padded-right-special dark" char="&#x0008;" repeat>delete</kb-key>
     </kb-row>
     <kb-row>
+      <kb-key class="symbol dark" toKeyset="symbol" char="Invalid">?123</kb-key>
       <kb-key class="mic dark" char="Mic"></kb-key>
-      <kb-key class="symbol dark" toKeyset="symbol" char="Invalid">#123</kb-key>
-      <kb-key class="dark">.com</kb-key>
+      <kb-key class="dark">,</kb-key>
       <kb-key class="space dark" char=" "></kb-key>
-      <kb-key class="dark">@</kb-key>
-      <kb-key class='return dark' char="&#x000A;">enter</kb-key>
+      <kb-key class="dark">.</kb-key>
+      <kb-key class="return dark" char="&#000A;">enter</kb-key>
     </kb-row>
   </kb-keyset>
 
   <kb-keyset id="lower">
-    <kb-row>
+    <kb-row class="top">
       <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-row>
     <kb-row>
-      <kb-key class="tab dark" char="&#x0009;">tab</kb-key>
+      <div class="half-key-spacer"></div>
       <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>
+      <div class="half-key-spacer"></div>
     </kb-row>
     <kb-row>
-      <kb-key class="left-shift dark" toKeyset="upper" char="Invalid">shift</kb-key>
+      <kb-key class="left-shift padded-left-special dark" toKeyset="upper" char="Invalid">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 class="backspace dark" char="&#x0008;" repeat>backspace</kb-key>
+      <kb-key class="backspace padded-right-special dark" char="&#x0008;" repeat>delete</kb-key>
     </kb-row>
     <kb-row>
+      <kb-key class="symbol dark" toKeyset="symbol" char="Invalid">?123</kb-key>
       <kb-key class="mic dark" char="Mic"></kb-key>
-      <kb-key class="symbol dark" toKeyset="symbol" char="Invalid">#123</kb-key>
-      <kb-key class="dark">.com</kb-key>
+      <kb-key class="dark">,</kb-key>
       <kb-key class="space dark" char=" "></kb-key>
-      <kb-key class="dark">@</kb-key>
+      <kb-key class="dark">.</kb-key>
       <kb-key class='return dark' char="&#x000A;">enter</kb-key>
     </kb-row>
   </kb-keyset>
 
   <kb-keyset id="symbol">
-    <kb-row>
+    <kb-row class="top">
       <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-row>
     <kb-row>
-      <kb-key class="tab dark" char="&#x0009;">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>(</kb-key>
+      <kb-key>(</kb-key><kb-key>)</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 class="backspace dark" char="&#x0008;" repeat>backspace</kb-key>
+    <kb-key class="left-more padded-left-special 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 class="backspace padded-right-special dark" char="&#x0008;" repeat>delete</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="mic dark" char="Mic"></kb-key>
       <kb-key class="symbol dark" toKeyset="lower" char="Invalid">abc</kb-key>
-      <kb-key class="dark">.com</kb-key>
+      <kb-key class="mic dark" char="Mic"></kb-key>
+      <kb-key class="dark">,</kb-key>
       <kb-key class="space dark" char=" "></kb-key>
-      <kb-key class="dark">@</kb-key>
+      <kb-key class="dark">.</kb-key>
       <kb-key class='return dark' char="&#x000A;">enter</kb-key>
     </kb-row>
   </kb-keyset>
 
   <kb-keyset id="more">
-    <kb-row>
+    <kb-row class="top">
       <kb-key>_</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-row>
     <kb-row>
-      <kb-key class="tab dark" char="&#x0009;">tab</kb-key>
-      <kb-key>|</kb-key><kb-key>+</kb-key><kb-key>=</kb-key><kb-key>€</kb-key>
+      <kb-key class="tab padded-left-special dark" char="&#x0009;">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></kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="left-more dark" toKeyset="symbol" char="Invalid">#123</kb-key>
+      <kb-key class="left-more padded-left-special 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 class="backspace dark" char="&#x0008;" repeat>backspace</kb-key>
+      <kb-key></kb-key><kb-key></kb-key>
+      <kb-key class="backspace padded-right-special dark" char="&#x0008;" repeat>delete</kb-key>
     </kb-row>
     <kb-row>
-      <kb-key class="mic dark" char="Mic"></kb-key>
       <kb-key class="symbol dark" toKeyset="lower" char="Invalid">abc</kb-key>
-      <kb-key class="dark">.com</kb-key>
+      <kb-key class="mic dark" char="Mic"></kb-key>
+      <kb-key class="dark">,</kb-key>
       <kb-key class="space dark" char=" "></kb-key>
-      <kb-key class="dark">@</kb-key>
+      <kb-key class="dark">.</kb-key>
       <kb-key class='return dark' char="&#x000A;">enter</kb-key>
     </kb-row>
   </kb-keyset>
diff --git a/ui/keyboard/resources/webui/main.css b/ui/keyboard/resources/webui/main.css
index 66244b1..ea10c72 100644
--- a/ui/keyboard/resources/webui/main.css
+++ b/ui/keyboard/resources/webui/main.css
@@ -21,27 +21,43 @@ kb-keyboard {
 
 kb-key {
   background-color: #444444;
-  border-top: 1px solid #666666;
-  border-radius: 3px;
+  border-top: 2px solid #555555;
+  border-radius: 1px;
   color: #ffffff;
   font-family: sans-serif;
-  font-weight: 100;
+  font-weight: 600;
   margin-left: 3px;
 }
 
 kb-key.dark {
   background-color: #333333;
+  border-top: 2px solid #444444;
+}
+
+/* Left and right-side special keys with a character letter next to them need
+ * additional padding.
+ * */
+kb-key.padded-left-special {
+  margin-right: 2px;
+}
+
+kb-key.padded-right-special {
+  margin-left: 5px;
+}
+
+kb-row.top {
+  margin-top: 5px !important;
 }
 
 #upper .left-shift,
 #upper .right-shift,
 .active {
   background-color: #acacac !important;
-  border-top: 1px solid rgba(125,125,125,0.5);
+  border-top: 2px solid rgba(125,125,125,0.5) !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;
-  */
+   * box-shadow: 0px 0px 15px #fff;
+   * */
 }
 
 .at,
@@ -90,7 +106,8 @@ kb-key.dark {
 .right-more,
 .symbol,
 .moddown.shift {
-  font-size: 80%;
+  font-size: 55%;
+  font-weight: 200;
 }
 
 .mic {
@@ -100,3 +117,8 @@ kb-key.dark {
 .audio .mic {
   background-image: url('images/mic-green.svg');
 }
+
+.half-key-spacer {
+  -webkit-box-flex: 0.5;
+  margin-left: 4px;
+}