DevTools: render category filters in a way that they don't clash.

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 1316 matching lines @@
     }
 
     registerCustomElement("label", "dt-checkbox", {
         /**
          * @this {Element}
          */
         createdCallback: function()
         {
             var root = WebInspector.createShadowRootWithCoreStyles(this);
             root.appendChild(WebInspector.Widget.createStyleElement("ui/checkboxTextLabel.css"));
-            this.checkboxElement = this.createChild("input", "dt-checkbox-button");
-            this.checkboxElement.type = "checkbox";
-            root.createChild("content").select = ".dt-checkbox-button";
+            var checkboxElement = createElementWithClass("input", "dt-checkbox-button");
+            checkboxElement.type = "checkbox";
+            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");
         },
 
+        /**
+         * @param {string} color
+         * @this {Element}
+         */
+        set backgroundColor(color)
+        {
+            this.checkboxElement.classList.add("dt-checkbox-colored");
+            this.checkboxElement.style.backgroundColor = color;
+        },
+
+        /**
+         * @param {string} color
+         * @this {Element}
+         */
+        set borderColor(color)
+        {
+            this.checkboxElement.classList.add("dt-checkbox-colored");
+            this.checkboxElement.style.borderColor = color;
+        },
+
         __proto__: HTMLLabelElement.prototype
     });
 
     registerCustomElement("label", "dt-icon-label", {
         /**
          * @this {Element}
          */
         createdCallback: function()
         {
             var root = WebInspector.createShadowRootWithCoreStyles(this);
@@ skipping 84 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;
     }
 }