ChromeOS OOBE: update HID detection screen icons to SVG.

TBR=alemate@chromium.org

(cherry picked from commit 6c33b71)

Bug: 747138
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I77e1b33f74f91e5918d9a74f9a79cd8b0de79fc6
Reviewed-on: https://chromium-review.googlesource.com/580675
Reviewed-by: Achuith Bhandarkar <achuith@chromium.org>
Commit-Queue: Alexander Alekseev <alemate@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#488794}
Reviewed-on: https://chromium-review.googlesource.com/585676
Reviewed-by: Alexander Alekseev <alemate@chromium.org>
Cr-Commit-Position: refs/branch-heads/3163@{#51}
Cr-Branched-From: ff259ba-refs/heads/master@{#488528}

Author: Alexander Alekseev

chrome/browser/resources/chromeos/login/oobe_hid_detection.css

@@ -8,15 +8,16 @@
 
 #keyboard-icon,
 #mouse-icon {
-  height: 40px;
-  width: 40px;
+  --iron-icon-height: 32px;
+  --iron-icon-width: 32px;
+  padding-right: 8px;
 }
 
 #keyboard-tick,
 #mouse-tick {
   -webkit-margin-start: -28px;
   position: relative;
-  top: 4px; /* icon is 40x40, tick is 32x32, 4 = (40-32)/2 */
+  top: 4px;
 }
 
 #hid-keyboard-pincode {

chrome/browser/resources/chromeos/login/oobe_hid_detection.html

@@ -11,6 +11,42 @@
   </svg>
 </iron-iconset-svg>
 
+<iron-iconset-svg name="oobe-hid-detection-20" size="20">
+  <svg>
+    <defs>
+      <g id="mouse" fill="none" fill-rule="evenodd">
+        <path d="M0 0h20v20H0"></path>
+        <path d="M10.833.892V7.5h5.834c0-3.4-2.546-6.2-5.834-6.608zM3.333 12.5c0 3.683 2.984 6.667 6.667 6.667s6.667-2.984 6.667-6.667V9.167H3.333V12.5zM9.167.892C5.88 1.3 3.333 4.1 3.333 7.5h5.834V.892z" fill="#5A5A5A">
+        </path>
+      </g>
+      <g id="keyboard" fill="none" fill-rule="evenodd">
+        <path d="M16.667 4.167H3.333c-.92 0-1.658.745-1.658 1.666l-.008 8.334c0 .92.746 1.666 1.666 1.666h13.334c.92 0 1.666-.745 1.666-1.666V5.833c0-.92-.745-1.666-1.666-1.666zm-7.5 2.5h1.666v1.666H9.167V6.667zm0 2.5h1.666v1.666H9.167V9.167zm-2.5-2.5h1.666v1.666H6.667V6.667zm0 2.5h1.666v1.666H6.667V9.167zm-.834 1.666H4.167V9.167h1.666v1.666zm0-2.5H4.167V6.667h1.666v1.666zm7.5 5.834H6.667V12.5h6.666v1.667zm0-3.334h-1.666V9.167h1.666v1.666zm0-2.5h-1.666V6.667h1.666v1.666zm2.5 2.5h-1.666V9.167h1.666v1.666zm0-2.5h-1.666V6.667h1.666v1.666z" fill="#5A5A5A">
+        </path>
+        <path d="M0 0h20v20H0V0zm0 0h20v20H0V0z" fill="#D8D8D8">
+        </path>
+      </g>
+    </defs>
+  </svg>
+</iron-iconset-svg>
+
+<iron-iconset-svg name="oobe-hid-detection-40" size="40">
+  <svg>
+    <defs>
+      <g id="mouse" fill="none" fill-rule="evenodd">
+        <path d="M0 0h40v40H0"></path>
+        <path d="M21 1.783V15h11.667c0-6.8-5.092-12.4-11.667-13.217zm-1 35.55c7.183 0 13-5.966 13-13.333v-7H7v7c0 7.367 5.818 13.333 13 13.333zM19 1.78C12.237 2.597 7 8.198 7 15h12V1.78z" fill="#5A5A5A">
+        </path>
+      </g>
+      <g id="keyboard" fill="none" fill-rule="evenodd">
+        <path d="M33.333 8.333H6.667c-1.842 0-3.317 1.492-3.317 3.334l-.017 16.666c0 1.842 1.492 3.334 3.334 3.334h26.666c1.842 0 3.334-1.492 3.334-3.334V11.667c0-1.842-1.492-3.334-3.334-3.334zm-15 5h3.334v3.334h-3.334v-3.334zm0 5h3.334v3.334h-3.334v-3.334zm-5-5h3.334v3.334h-3.334v-3.334zm0 5h3.334v3.334h-3.334v-3.334zm-1.666 3.334H8.333v-3.334h3.334v3.334zm0-5H8.333v-3.334h3.334v3.334zm15 11.666H13.333V25h13.334v3.333zm0-6.666h-3.334v-3.334h3.334v3.334zm0-5h-3.334v-3.334h3.334v3.334zm5 5h-3.334v-3.334h3.334v3.334zm0-5h-3.334v-3.334h3.334v3.334z" fill="#5A5A5A">
+        </path>
+        <path d="M0 0h40v40H0V0zm0 0h40v40H0V0z" fill="#D8D8D8">
+        </path>
+      </g>
+    </defs>
+  </svg>
+</iron-iconset-svg>
+
 <dom-module id="oobe-hid-detection-md">
   <template>
     <link rel="stylesheet" href="oobe_hid_detection.css">
@@ -26,9 +62,11 @@ <h1 class="title" i18n-content="hidDetectionInvitation"></h1>
       </div>
       <div class="footer flex layout vertical">
         <div class="layout vertical justified hid-selection-entry">
-          <div class="layout horizontal center">
-            <img id="mouse-icon" alt=""
-                src="chrome://theme/IDR_BLUETOOTH_MOUSE">
+          <div class="flex layout horizontal center">
+            <hd-iron-icon id="mouse-icon" alt=""
+                icon1x="oobe-hid-detection-20:mouse"
+                icon2x="oobe-hid-detection-40:mouse">
+            </hd-iron-icon>
             <img id="mouse-tick" alt=""
                 hidden="[[!tickIsVisible_(mouseState_)]]"
                 src="chrome://theme/IDR_BLUETOOTH_PAIRING_TICK">
@@ -51,9 +89,11 @@ <h1 class="title" i18n-content="hidDetectionInvitation"></h1>
           </div>
         </div>
         <div class="layout vertical hid-selection-entry">
-          <div class="layout horizontal center">
-            <img id="keyboard-icon" alt=""
-                src="chrome://theme/IDR_BLUETOOTH_KEYBOARD">
+          <div class="flex layout horizontal center">
+            <hd-iron-icon id="keyboard-icon" alt=""
+                icon1x="oobe-hid-detection-20:keyboard"
+                icon2x="oobe-hid-detection-40:keyboard">
+            </hd-iron-icon>
             <img id="keyboard-tick" alt=""
                 hidden="[[!tickIsVisible_(keyboardState_)]]"
                 src="chrome://theme/IDR_BLUETOOTH_PAIRING_TICK">