DevTools: Added styling to focused checkboxes

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

 /*
  * Copyright (C) 2011 Google Inc.  All rights reserved.
  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2007 Matt Lilek (pewtermoose@gmail.com).
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
@@ skipping 1486 matching lines @@
         /**
          * @param {string} color
          * @this {Element}
          */
         set borderColor(color)
         {
             this.checkboxElement.classList.add("dt-checkbox-themed");
             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
     });
 
     registerCustomElement("label", "dt-icon-label", {
         /**
          * @this {Element}
          */
         createdCallback: function()
         {
             var root = WebInspector.createShadowRootWithCoreStyles(this, "ui/smallIcon.css");
@@ skipping 469 matching lines @@
  * @param {string} title
  * @return {!Element}
  */
 WebInspector.linkifyDocumentationURLAsNode = function(article, title)
 {
     return WebInspector.linkifyURLAsNode("https://developers.google.com/web/tools/chrome-devtools/" + article, title, undefined, true);
 }
 
 /** @type {!WebInspector.ThemeSupport} */
 WebInspector.themeSupport;