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}
diff --git a/ash/webui/common/resources/BUILD.gn b/ash/webui/common/resources/BUILD.gn
index 38baf505..1038d83 100644
--- a/ash/webui/common/resources/BUILD.gn
+++ b/ash/webui/common/resources/BUILD.gn
@@ -14,6 +14,7 @@
polymer_element_files = [
"keyboard_diagram.js",
+ "keyboard_icons.js",
"keyboard_key.js",
"navigation_icons.js",
"navigation_selector.js",
@@ -41,6 +42,7 @@
":fake_method_resolver",
":fake_observables",
":keyboard_diagram",
+ ":keyboard_icons",
":keyboard_key",
":navigation_selector",
":navigation_view_panel",
@@ -58,12 +60,20 @@
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",
]
}
diff --git a/ash/webui/common/resources/keyboard_diagram.html b/ash/webui/common/resources/keyboard_diagram.html
index 283130a..bccccfbb 100644
--- a/ash/webui/common/resources/keyboard_diagram.html
+++ b/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">
diff --git a/ash/webui/common/resources/keyboard_icons.html b/ash/webui/common/resources/keyboard_icons.html
new file mode 100644
index 0000000..4822f31
--- /dev/null
+++ b/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>
diff --git a/ash/webui/common/resources/keyboard_icons.js b/ash/webui/common/resources/keyboard_icons.js
new file mode 100644
index 0000000..2b491650
--- /dev/null
+++ b/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);
diff --git a/ash/webui/common/resources/keyboard_key.html b/ash/webui/common/resources/keyboard_key.html
index c236d92..8fbad97 100644
--- a/ash/webui/common/resources/keyboard_key.html
+++ b/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>
diff --git a/ash/webui/common/resources/keyboard_key.js b/ash/webui/common/resources/keyboard_key.js
index a945b52a..0b273003 100644
--- a/ash/webui/common/resources/keyboard_key.js
+++ b/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 @@
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,
};
}
}
