DevTools: unify theming for checkbox components.

Source/devtools/front_end/ui/UIUtils.js

Index: Source/devtools/front_end/ui/UIUtils.js
diff --git a/Source/devtools/front_end/ui/UIUtils.js b/Source/devtools/front_end/ui/UIUtils.js
index 22baf783e68e340fb0954e44a65888d02de54f23..dd9fec754fcf3190633175a220792a9d92e3595c 100644
--- a/Source/devtools/front_end/ui/UIUtils.js
+++ b/Source/devtools/front_end/ui/UIUtils.js
@@ -1332,11 +1332,11 @@ function createCheckboxLabel(title, checked)
          */
         createdCallback: function()
         {
-            var root = WebInspector.createShadowRootWithCoreStyles(this);
-            root.appendChild(WebInspector.Widget.createStyleElement("ui/checkboxTextLabel.css"));
+            this._root = WebInspector.createShadowRootWithCoreStyles(this);
+            this._root.appendChild(WebInspector.Widget.createStyleElement("ui/checkboxTextLabel.css"));
             var checkboxElement = createElementWithClass("input", "dt-checkbox-button");
             checkboxElement.type = "checkbox";
-            root.appendChild(checkboxElement);
+            this._root.appendChild(checkboxElement);
             this.checkboxElement = checkboxElement;
 
             this.addEventListener("click", toggleCheckbox.bind(this));
@@ -1351,7 +1351,7 @@ function createCheckboxLabel(title, checked)
                     checkboxElement.click();
             }
 
-            root.createChild("content");
+            this._root.createChild("content");
         },
 
         /**
@@ -1360,7 +1360,7 @@ function createCheckboxLabel(title, checked)
          */
         set backgroundColor(color)
         {
-            this.checkboxElement.classList.add("dt-checkbox-colored");
+            this.checkboxElement.classList.add("dt-checkbox-themed");
             this.checkboxElement.style.backgroundColor = color;
         },
 
@@ -1368,9 +1368,21 @@ function createCheckboxLabel(title, checked)
          * @param {string} color
          * @this {Element}
          */
+        set checkColor(color)
+        {
+            this.checkboxElement.classList.add("dt-checkbox-themed");
+            var stylesheet = createElement("style");
+            stylesheet.textContent = "input.dt-checkbox-themed:checked:after { background-color: " + color + "}";
+            this._root.appendChild(stylesheet);

[dgozman, 2015/06/09 15:42:59]

Should we remove previous one, if any?

+        },
+
+        /**
+         * @param {string} color
+         * @this {Element}
+         */
         set borderColor(color)
         {
-            this.checkboxElement.classList.add("dt-checkbox-colored");
+            this.checkboxElement.classList.add("dt-checkbox-themed");
             this.checkboxElement.style.borderColor = color;
         },