Diagnostics: add icons to arrow keys on keyboard diagram

This makes them match the ones on the actual keys, and lays the
groundwork for adding other icons (to the top row and the search key)
once I've sourced them.

Screenshot: http://shortn/_rlkNEqvC9L

Change-Id: I5363b16ed247340760ff898539a388a41e59ceca
Bug: 1207678
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3271673
Reviewed-by: Jimmy Gong <jimmyxgong@chromium.org>
Commit-Queue: Harry Cutts <hcutts@chromium.org>
Cr-Commit-Position: refs/heads/main@{#940400}

ash/webui/common/resources/BUILD.gn

@@ -14,6 +14,7 @@ preprocessed_gen_manifest = "preprocessed_gen_manifest.json"
 
 polymer_element_files = [
   "keyboard_diagram.js",
+  "keyboard_icons.js",
   "keyboard_key.js",
   "navigation_icons.js",
   "navigation_selector.js",
@@ -41,6 +42,7 @@ js_type_check("closure_compile_module") {
     ":fake_method_resolver",
     ":fake_observables",
     ":keyboard_diagram",
+    ":keyboard_icons",
     ":keyboard_key",
     ":navigation_selector",
     ":navigation_view_panel",
@@ -57,13 +59,21 @@ js_library("fake_method_resolver") {
 }
 
 js_library("keyboard_diagram") {
+  deps = [
+    ":keyboard_key",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+}
+
+js_library("keyboard_icons") {
   deps = [
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
   ]
 }
 
 js_library("keyboard_key") {
   deps = [
+    ":keyboard_icons",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
   ]
 }

ash/webui/common/resources/keyboard_diagram.html

@@ -323,18 +323,17 @@
     <keyboard-key id="rightAltKey" main-glyph="alt"></keyboard-key>
     <keyboard-key id="rightCtrlKey" main-glyph="ctrl"></keyboard-key>
 
-    <!-- TODO(crbug.com/1207678): Use proper icons for the arrow keys. -->
     <div id="arrowKeyCluster">
       <template is="dom-if" if="[[isEqual_(physicalLayout, 'dell-enterprise')]]">
         <keyboard-key id="dellPageUpKey" main-glyph="pg up"></keyboard-key>
       </template>
-      <keyboard-key id="upArrow" main-glyph="↑"></keyboard-key>
+      <keyboard-key id="upArrow" icon="keyboard:arrow-up"></keyboard-key>
       <template is="dom-if" if="[[isEqual_(physicalLayout, 'dell-enterprise')]]">
         <keyboard-key id="dellPageDownKey" main-glyph="pg dn"></keyboard-key>
       </template>
-      <keyboard-key main-glyph="←"></keyboard-key>
-      <keyboard-key main-glyph="↓"></keyboard-key>
-      <keyboard-key main-glyph="→"></keyboard-key>
+      <keyboard-key icon="keyboard:arrow-left"></keyboard-key>
+      <keyboard-key icon="keyboard:arrow-down"></keyboard-key>
+      <keyboard-key icon="keyboard:arrow-right"></keyboard-key>
     </div>
   </div>
   <div id="numberPad">

ash/webui/common/resources/keyboard_icons.html

@@ -0,0 +1,10 @@
+<iron-iconset-svg name="keyboard" size="24">
+  <svg>
+    <defs>
+      <g id="arrow-down"><path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"></g>
+      <g id="arrow-left"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"></g>
+      <g id="arrow-right"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></g>
+      <g id="arrow-up"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></g>
+    </defs>
+  </svg>
+</iron-iconset-svg>

ash/webui/common/resources/keyboard_icons.js

@@ -0,0 +1,10 @@
+// Copyright 2021 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.
+
+import 'chrome://resources/polymer/v3_0/iron-iconset-svg/iron-iconset-svg.js';
+
+import {html} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+const template = html`{__html_template__}`;
+document.head.appendChild(template.content);

ash/webui/common/resources/keyboard_key.html

@@ -36,6 +36,12 @@
     transition: all 150ms ease-in-out;
   }
 
+  iron-icon {
+    --iron-icon-fill-color: var(--foreground-color-unpressed);
+    --iron-icon-height: 100%;
+    --iron-icon-width: 100%;
+  }
+
   #text {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -57,6 +63,10 @@
     top: var(--travel);
   }
 
+  :host(:hover) iron-icon {
+    --iron-icon-fill-color: var(--foreground-color-pressed);
+  }
+
   #background {
     background-color: var(--border-color);
     border-radius: var(--border-radius);
@@ -79,5 +89,10 @@
 </style>
 <div id="background"></div>
 <div id="foreground">
-  <span id="text">[[mainGlyph]]</span>
+  <template is="dom-if" if="[[icon]]">
+    <iron-icon icon="[[icon]]"></iron-icon>
+  </template>
+  <template is="dom-if" if="[[mainGlyph]]">
+    <span id="text">[[mainGlyph]]</span>
+  </template>
 </div>

ash/webui/common/resources/keyboard_key.js

@@ -2,6 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
+import './keyboard_icons.js';
+
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 /**
@@ -22,11 +25,17 @@ export class KeyboardKeyElement extends PolymerElement {
   static get properties() {
     return {
       /**
-       * The glyph to show in the center of the key (if topGlyph is unset) or in
-       * the bottom half (otherwise).
-       * @type {string}
+       * The text to show on the key, if any.
+       * @type {?string}
        */
       mainGlyph: String,
+
+      /**
+       * The name of the icon to use, if any. The name should be of the form:
+       * `iconset_name:icon_name`.
+       * @type {?string}
+       */
+      icon: String,
     };
   }
 }