DevTools: unify theming for checkbox components.

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 1314 matching lines @@
         this.radioElement.checked = true;
         this.radioElement.dispatchEvent(new Event("change"));
     }
 
     registerCustomElement("label", "dt-checkbox", {
         /**
          * @this {Element}
          */
         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));
 
             /**
              * @param {!Event} event
              * @this {Node}
              */
             function toggleCheckbox(event)
             {
                 if (event.target !== checkboxElement && event.target !== this)
                     checkboxElement.click();
             }
 
-            root.createChild("content");
+            this._root.createChild("content");
         },
 
         /**
          * @param {string} color
          * @this {Element}
          */
         set backgroundColor(color)
         {
-            this.checkboxElement.classList.add("dt-checkbox-colored");
+            this.checkboxElement.classList.add("dt-checkbox-themed");
             this.checkboxElement.style.backgroundColor = color;
         },
 
         /**
          * @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;
         },
 
         __proto__: HTMLLabelElement.prototype
     });
 
     registerCustomElement("label", "dt-icon-label", {
         /**
          * @this {Element}
          */
@@ skipping 87 matching lines @@
         // Due to the nature of regex, |items| array has matched elements on its even indexes.
         var items = text.replace(regex, "\0$1\0").split("\0");
         for (var i = 0; i < items.length; ++i) {
             var processedNode = i % 2 ? processor(items[i]) : this._runProcessor(processorIndex + 1, items[i]);
             container.appendChild(processedNode);
         }
 
         return container;
     }
 }