Moves kb-key images from kb-key to it's child.

BUG=340364

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

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

3 files changed, 22 insertions, 37 deletions

diff --git a/ui/keyboard/resources/elements/kb-key.html b/ui/keyboard/resources/elements/kb-key.html
index 3e9aa34..34598ed 100644
--- a/ui/keyboard/resources/elements/kb-key.html
+++ b/ui/keyboard/resources/elements/kb-key.html
@@ -5,7 +5,7 @@
   -->
 
 <polymer-element name="kb-key" extends="kb-key-base"
-    attributes="image imageSize keyCode keyName shiftModifier weight">
+    attributes="image keyCode keyName shiftModifier weight">
   <template>
     <style>
       :host {
@@ -14,12 +14,6 @@
          * "-webkit-box-flex: {{weight}}" once the regression is fixed
          * (https://github.com/Polymer/polymer/issues/270). */
         background-color: #3b3b3e;
-        /* TODO(rsadam): remove when {{}} regression is fixed */
-        background-image: none;
-        background-position: center center;
-        background-repeat: no-repeat;
-        /* TODO(rsadam): remove when {{}} regression is fixed */
-        background-size: 50%;
         border-radius: 2px;
         border-style: solid;
         border-width: 1px 0px;
@@ -29,6 +23,10 @@
       }
 
       ::part(key) {
+        background-image: none;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: contain;
         bottom: 0;
         height: 1.2em;
         left: 0;
@@ -40,6 +38,11 @@
         top: 0;
       }
 
+      :host[image]::part(key) {
+        height: 2em;
+        width: 1em;
+      }
+
       ::part(hint) {
         color: #313131;
         font-size: 70%;
@@ -113,18 +116,9 @@
        */
       imageChanged: function() {
         if (!this.image)
-          this.style.backgroundImage = "none";
+          this.$.key.style.backgroundImage = "none";
         else
-          this.style.backgroundImage = "url(images/" + this.image + ".svg)";
-      },
-
-      /**
-       * Called when the image attribute changes. This is used to set the
-       * background image of the key.
-       * TODO(rsadam): Remove when polymer {{}} syntax regression is fixed.
-       */
-      imageSizeChanged: function() {
-        this.style.backgroundSize = this.imageSize;
+          this.$.key.style.backgroundImage = "url(images/" + this.image + ".svg)";
       },
 
       /**
diff --git a/ui/keyboard/resources/layouts/system-qwerty.html b/ui/keyboard/resources/layouts/system-qwerty.html
index 39737ee..9f731ce 100644
--- a/ui/keyboard/resources/layouts/system-qwerty.html
+++ b/ui/keyboard/resources/layouts/system-qwerty.html
@@ -26,7 +26,7 @@
     </kb-row>
     <kb-row align="stretchright">
       <kb-key class="search dark" char="Search" image='search'
-          imageSize="35%" weight="210"> </kb-key>
+          weight="210"> </kb-key>
       <kb-key-sequence keys="ASDFGHJKL"></kb-key-sequence>
       <kb-key-sequence invert=true keys=";&apos;" hintTexts=':"'>
       </kb-key-sequence>
@@ -78,7 +78,7 @@
     </kb-row>
     <kb-row align="stretchright">
       <kb-key class="search dark" char="Search" image='search'
-          imageSize="35%" weight="210"></kb-key>
+          weight="210"></kb-key>
       <kb-key-sequence keys="asdfghjkl"></kb-key-sequence>
       <kb-key-sequence keys=";&apos;" hintTexts=':"'></kb-key-sequence>
       <kb-key class="dark" char="&#x000A;" align="right"
diff --git a/ui/keyboard/resources/main.css b/ui/keyboard/resources/main.css
index 3a04e9e..5c571f4 100644
--- a/ui/keyboard/resources/main.css
+++ b/ui/keyboard/resources/main.css
@@ -37,35 +37,26 @@ kb-keyboard:not(.caps-locked)[keyset=upper] kb-shift-key {
 .caps-locked kb-shift-key.dark,
 :not(kb-altkey-set) > .active {
   -webkit-box-shadow: inset 0px 1px #969696, inset 0px -1px #6f6f6f;
-  border-bottom-color: #5b5b5b;
-  border-top-color: #a4a4a4;
-}
-
-.caps-locked kb-shift-key.dark,
-:not(kb-altkey-set) > .active:not(.dark){
   background-image: -webkit-linear-gradient(#8b8b8b, #7d7d7d);
   background-size: cover;
-}
-
-.caps-locked kb-shift-key,
-.active.dark {
-  background-color: #8b8b8b;
+  border-bottom-color: #5b5b5b;
+  border-top-color: #a4a4a4;
 }
 
 /**
  * The microphone key is handled separately from other images since the image
  * displayed changes depending on whether it's pressed or not.
  */
-.microphone {
+.microphone [part=key] {
   background-image: url('images/microphone.svg');
-  background-position: 4%;
-  background-size: 25%;
+  background-position: 10%;
 }
 
-.audio .microphone {
+.audio .microphone [part=key] {
   background-image: url('images/microphone-green.svg');
 }
 
-.search {
-  background-position: 4%;
+kb-key.search [part=key]{
+  margin-left: 0px;
+  width: 2em;
 }