DevTools: Added styling to checkboxes so that a focus state is displayed when...

DevTools: Added styling to checkboxes so that a focus state is displayed when tabbing through the checkboxes (for keyboard accessibility).

BUG=580199

Review-Url: https://codereview.chromium.org/2096183002
Cr-Commit-Position: refs/heads/master@{#405215}

third_party/WebKit/Source/devtools/front_end/elements/ClassesPaneWidget.js

@@ -100,6 +100,7 @@ WebInspector.ClassesPaneWidget.prototype = {
         for (var i = 0; i < keys.length; ++i) {
             var className = keys[i];
             var label = createCheckboxLabel(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);

third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js

@@ -1504,6 +1504,15 @@ WebInspector.appendStyle = function(node, cssFile)
             this.checkboxElement.style.borderColor = color;
         },
 
+        /**
+         * @param {boolean} focus
+         * @this {Element}
+         */
+        set visualizeFocus(focus)
+        {
+            this.checkboxElement.classList.toggle("dt-checkbox-visualize-focus", focus);
+        },
+
         __proto__: HTMLLabelElement.prototype
     });
 

third_party/WebKit/Source/devtools/front_end/ui/checkboxTextLabel.css

@@ -18,6 +18,10 @@ input {
     flex-shrink: 0;
 }
 
+input.dt-checkbox-visualize-focus:focus {
+    outline: auto 5px -webkit-focus-ring-color;
+}
+
 input.dt-checkbox-themed {
     -webkit-appearance: none;
     margin: 0 5px auto 2px;