DevTools: Added styling to focused checkboxes

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

Index: third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js b/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
index 48a123be6190e5f985b221067fab74b695a08a58..aafcbdd356662b75ac255de489c466fb4a5abc8d 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
@@ -1504,6 +1504,18 @@ WebInspector.appendStyle = function(node, cssFile)
             this.checkboxElement.style.borderColor = color;
         },
 
+        /**
+         * @param {boolean} focus
+         * @this {Element}
+         */
+        set focusVisible(focus)

[lushnikov, 2016/07/08 23:01:22]

1. let's make this a function (we tend to avoid setters/getters when possible)
2. let's name this function and classes as
setVisualizeFocus/dt-checkbox-visualize-focus

[flandy, 2016/07/11 18:46:43]

1. Using a function causes an issue with the Closure Compiler since we are using
custom HTML elements. Let's keep it as a setter like the surrounding code.

2. Done

+        {
+            if (focus)
+                this.checkboxElement.classList.add("dt-checkbox-focus-visible");

[lushnikov, 2016/07/08 23:01:22]

this "if" could be written in a one line:

this.checkboxElement.classList.toggle("dt-checkbox-focus-visible", focus);

[flandy, 2016/07/11 18:46:43]

Done

+            else
+                this.checkboxElement.classList.remove("dt-checkbox-focus-visible");
+        },
+
         __proto__: HTMLLabelElement.prototype
     });