From cd068459e80f8defc2355a9befbe148c26e2ee26 Mon Sep 17 00:00:00 2001
From: einbinder <einbinder@chromium.org>
Date: Thu, 30 Mar 2017 20:17:03 -0700
Subject: [PATCH] DevTools: Focus indicators in Toolbars

This patch adds a light gray background to buttons and comboboxes. It adds a default focus ring to checkboxes. These only appear when an item is focused via keyboard.

http://i.imgur.com/E6j7851.gif

BUG=706699

Review-Url: https://codereview.chromium.org/2741863002
Cr-Commit-Position: refs/heads/master@{#461007}
---
 front_end/elements/ClassesPaneWidget.js |  1 -
 front_end/ui/UIUtils.js                 | 16 ++++++++--------
 front_end/ui/checkboxTextLabel.css      |  2 +-
 front_end/ui/toolbar.css                | 19 +++++++++++++++++++
 4 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/front_end/elements/ClassesPaneWidget.js b/front_end/elements/ClassesPaneWidget.js
index 94c3ded837..e7c7164e6e 100644
--- a/front_end/elements/ClassesPaneWidget.js
+++ b/front_end/elements/ClassesPaneWidget.js
@@ -101,7 +101,6 @@ Elements.ClassesPaneWidget = class extends UI.Widget {
     for (var i = 0; i < keys.length; ++i) {
       var className = keys[i];
       var label = UI.CheckboxLabel.create(className, classes.get(className));
-      label.visualizeFocus = true;
       label.classList.add('monospace');
       label.checkboxElement.addEventListener('click', this._onClick.bind(this, className), false);
       this._classesContainer.appendChild(label);
diff --git a/front_end/ui/UIUtils.js b/front_end/ui/UIUtils.js
index 92a8459056..48b5d1dbf9 100644
--- a/front_end/ui/UIUtils.js
+++ b/front_end/ui/UIUtils.js
@@ -785,6 +785,10 @@ UI._focusChanged = function(event) {
   var document = event.target && event.target.ownerDocument;
   var element = document ? document.deepActiveElement() : null;
   UI.Widget.focusWidgetForNode(element);
+  if (!UI._keyboardFocus)
+    return;
+  element.setAttribute('data-keyboard-focus', 'true');
+  element.addEventListener('blur', () => element.removeAttribute('data-keyboard-focus'), {once: true, capture: true});
 };
 
 /**
@@ -1183,6 +1187,10 @@ UI.initializeUIUtils = function(document, themeSetting) {
   document.defaultView.addEventListener('focus', UI._windowFocused.bind(UI, document), false);
   document.defaultView.addEventListener('blur', UI._windowBlurred.bind(UI, document), false);
   document.addEventListener('focus', UI._focusChanged.bind(UI), true);
+  document.addEventListener('keydown', event => {
+    UI._keyboardFocus = true;
+    document.defaultView.requestAnimationFrame(() => UI._keyboardFocus = false);
+  }, true);
 
   if (!UI.themeSupport)
     UI.themeSupport = new UI.ThemeSupport(themeSetting);
@@ -1371,14 +1379,6 @@ UI.CheckboxLabel = class extends HTMLLabelElement {
     this.checkboxElement.classList.add('dt-checkbox-themed');
     this.checkboxElement.style.borderColor = color;
   }
-
-  /**
-   * @param {boolean} focus
-   * @this {Element}
-   */
-  set visualizeFocus(focus) {
-    this.checkboxElement.classList.toggle('dt-checkbox-visualize-focus', focus);
-  }
 };
 
 (function() {
diff --git a/front_end/ui/checkboxTextLabel.css b/front_end/ui/checkboxTextLabel.css
index fe58a0a314..d8e47ab888 100644
--- a/front_end/ui/checkboxTextLabel.css
+++ b/front_end/ui/checkboxTextLabel.css
@@ -18,7 +18,7 @@ input {
     flex-shrink: 0;
 }
 
-input.dt-checkbox-visualize-focus:focus {
+input:focus {
     outline: auto 5px -webkit-focus-ring-color;
 }
 
diff --git a/front_end/ui/toolbar.css b/front_end/ui/toolbar.css
index d1f9dda0ed..4664e20394 100644
--- a/front_end/ui/toolbar.css
+++ b/front_end/ui/toolbar.css
@@ -204,6 +204,14 @@ select.toolbar-item {
     padding: 0 13px 0 5px;
     margin-right: -10px;
     position: relative;
+    height: 22px;
+    margin-top: 2px;
+    margin-bottom: 2px;
+}
+
+select.toolbar-item[data-keyboard-focus="true"]:focus {
+    background: rgba(0, 0, 0, 0.08);
+    border-radius: 2px;
 }
 
 /* Input */
@@ -269,6 +277,17 @@ select.toolbar-item {
     background-color: rgb(163, 163, 163);
 }
 
+.toolbar-button[data-keyboard-focus="true"]:focus::after {
+    position: absolute;
+    top: 2px;
+    bottom: 2px;
+    left: 2px;
+    right: 2px;
+    background-color: rgba(0, 0, 0, 0.08);
+    border-radius: 2px;
+    content: "";
+}
+
 .toolbar-shadow.floating {
     flex-direction: column;
     height: auto;