Changes shift key icon & highlight/caps UX.

BUG=364468

Review URL: https://codereview.chromium.org/264913003

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

ui/keyboard/keyboard_resources.grd

@@ -33,9 +33,8 @@
       <include name="IDR_KEYBOARD_IMAGES_RELOAD" file="resources/images/reload.svg" type="BINDATA" />
       <include name="IDR_KEYBOARD_IMAGES_RETURN" file="resources/images/return.png" type="BINDATA" />
       <include name="IDR_KEYBOARD_IMAGES_RIGHT" file="resources/images/right.svg" type="BINDATA" />
-      <include name="IDR_KEYBOARD_IMAGES_SEARCH" file="resources/images/search.svg" type="BINDATA" />
-      <include name="IDR_KEYBOARD_IMAGES_SHIFT" file="resources/images/shift.svg" type="BINDATA" />
-      <include name="IDR_KEYBOARD_IMAGES_SHIFT_FILLED" file="resources/images/shift-filled.svg" type="BINDATA" />
+      <include name="IDR_KEYBOARD_IMAGES_SEARCH" file="resources/images/search.png" type="BINDATA" />
+      <include name="IDR_KEYBOARD_IMAGES_SHIFT" file="resources/images/shift.png" type="BINDATA" />
       <include name="IDR_KEYBOARD_IMAGES_SHUTDOWN" file="resources/images/shutdown.svg" type="BINDATA" />
       <include name="IDR_KEYBOARD_IMAGES_TAB" file="resources/images/tab.png" type="BINDATA" />
       <include name="IDR_KEYBOARD_IMAGES_UP" file="resources/images/up.svg" type="BINDATA" />

ui/keyboard/keyboard_util.cc

@@ -298,9 +298,8 @@ const GritResourceMap* GetKeyboardExtensionResources(size_t* size) {
     {"keyboard/images/reload.svg", IDR_KEYBOARD_IMAGES_RELOAD},
     {"keyboard/images/return.png", IDR_KEYBOARD_IMAGES_RETURN},
     {"keyboard/images/right.svg", IDR_KEYBOARD_IMAGES_RIGHT},
-    {"keyboard/images/search.svg", IDR_KEYBOARD_IMAGES_SEARCH},
-    {"keyboard/images/shift.svg", IDR_KEYBOARD_IMAGES_SHIFT},
-    {"keyboard/images/shift-filled.svg", IDR_KEYBOARD_IMAGES_SHIFT_FILLED},
+    {"keyboard/images/search.png", IDR_KEYBOARD_IMAGES_SEARCH},
+    {"keyboard/images/shift.png", IDR_KEYBOARD_IMAGES_SHIFT},
     {"keyboard/images/shutdown.svg", IDR_KEYBOARD_IMAGES_SHUTDOWN},
     {"keyboard/images/tab.png", IDR_KEYBOARD_IMAGES_TAB},
     {"keyboard/images/up.svg", IDR_KEYBOARD_IMAGES_UP},

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

@@ -14,7 +14,7 @@
         border-style: solid;
         border-width: 0px 0px;
         color: #666666;
-        font-family: 'Droid Sans';
+        font-family: roboto-bold;
         font-weight: 100;
       }
 
@@ -53,8 +53,8 @@
         height: 30%;
       }
 
-      :host([image].search) .key {
-        height: 80%;
+      :host([image].tab) .key {
+        height: 40%;
       }
 
       :host .hint,
@@ -77,6 +77,10 @@
         font-size: 70%;
       }
 
+      :host(.dark.active) {
+        background-color: #cccccc;
+      }
+
       :host(.active) {
         background-color: #dddddd;
         background-size: cover;

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

@@ -5,8 +5,8 @@
   -->
 
 <polymer-element name="kb-shift-key" attributes="lowerCaseKeysetId
-    upperCaseKeysetId" class="shift dark" char="Shift" on-pointerout="{{out}}"
-    extends="kb-key">
+    upperCaseKeysetId" class="shift dark" char="Shift" image="shift.png"
+    on-pointerout="{{out}}" extends="kb-key">
   <template>
     <style>
       .shift-light-wrapper {

ui/keyboard/resources/layouts/system-qwerty.html

@@ -13,14 +13,14 @@
     </kb-key>
   </kb-row>
   <kb-row align="left">
-    <kb-key class="dark" char="&#x0009;" align="center"
+    <kb-key class="dark tab" char="&#x0009;" align="center"
         image="tab.png" weight="155"></kb-key>
     <kb-key-sequence keys="QWERTYUIOP"></kb-key-sequence>
     <kb-key-sequence invert=true keys="[]\"
         hintTexts="{}|"></kb-key-sequence>
   </kb-row>
   <kb-row>
-    <kb-key class="search dark" char="Search" image='search'
+    <kb-key class="search dark" char="Search" image='search.png'
         weight="210"> </kb-key>
     <kb-key-sequence keys="ASDFGHJKL"></kb-key-sequence>
     <kb-key-sequence invert=true keys=";&apos;" hintTexts=':"'>
@@ -67,13 +67,13 @@
         align="right"></kb-key>
   </kb-row>
   <kb-row align="left">
-    <kb-key class="dark" char="&#x0009;" align="center"
+    <kb-key class="dark tab" char="&#x0009;" align="center"
         image="tab.png" weight="155"></kb-key>
     <kb-key-sequence keys="qwertyuiop"></kb-key-sequence>
     <kb-key-sequence keys="[]\" hintTexts="{}|"></kb-key-sequence>
   </kb-row>
   <kb-row>
-    <kb-key class="search dark" char="Search" image='search'
+    <kb-key class="search dark" char="Search" image='search.png'
         weight="210"></kb-key>
     <kb-key-sequence keys="asdfghjkl"></kb-key-sequence>
     <kb-key-sequence keys=";&apos;" hintTexts=':"'></kb-key-sequence>

ui/keyboard/resources/main.css

@@ -14,22 +14,16 @@
  * shadow dom.
  */
 kb-keyboard.ctrl-active kb-modifier-key[char=Ctrl],
-kb-keyboard.alt-active kb-modifier-key[char=Alt] {
-  background-color: #bbbbbb;
-}
-
-kb-keyboard[keyset="upper"] kb-shift-key.dark /deep/ .key {
-  background-image: url('images/shift-filled.svg');
-}
-
-kb-keyboard[keyset="lower"] kb-shift-key /deep/ .key{
-  background-image: url('images/shift.svg');
+kb-keyboard.alt-active kb-modifier-key[char=Alt],
+kb-keyboard.caps-locked kb-shift-key.dark {
+  -webkit-box-shadow: inset 0 0 3px 2px #aaaaaa;
+  background-color: #cccccc;
 }
 
 /**
 * Controls whether the shift key should be highlighted or not.
 */
-kb-keyboard.caps-locked kb-shift-key.dark /deep/
+kb-keyboard[keyset="upper"] kb-shift-key.dark /deep/
     .shift-light {
     background-color: #4285f4;
 }