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

Source/devtools/front_end/ui/FilterBar.js

Index: Source/devtools/front_end/ui/FilterBar.js
diff --git a/Source/devtools/front_end/ui/FilterBar.js b/Source/devtools/front_end/ui/FilterBar.js
index 9e11e610ee32ea2df1277c347c618cde01b13abd..0e50db1fcf6d88f25ea15fd224b7f86ab3be892e 100644
--- a/Source/devtools/front_end/ui/FilterBar.js
+++ b/Source/devtools/front_end/ui/FilterBar.js
@@ -35,7 +35,7 @@
 WebInspector.FilterBar = function()
 {
     this._filtersShown = false;
-    this._element = createElementWithClass("div", "filter-bar hbox");
+    this._element = createElementWithClass("div", "filter-bar");
 
     this._filterButton = new WebInspector.ToolbarButton(WebInspector.UIString("Filter"), "filter-toolbar-item", 3);
     this._filterButton.element.addEventListener("click", this._handleFilterButtonClick.bind(this), false);
@@ -472,7 +472,7 @@ WebInspector.NamedBitSetFilterUI = function(items, setting)
     this._filtersElement.createChild("div", "filter-bitset-filter-divider");
 
     for (var i = 0; i < items.length; ++i)
-        this._addBit(items[i].name, items[i].label);
+        this._addBit(items[i].name, items[i].label, items[i].title);
 
     if (setting) {
         this._setting = setting;
@@ -483,7 +483,7 @@ WebInspector.NamedBitSetFilterUI = function(items, setting)
     }
 }
 
-/** @typedef {{name: string, label: string}} */
+/** @typedef {{name: string, label: string, title: (string|undefined)}} */
 WebInspector.NamedBitSetFilterUI.Item;
 
 WebInspector.NamedBitSetFilterUI.ALL_TYPES = "all";
@@ -541,12 +541,15 @@ WebInspector.NamedBitSetFilterUI.prototype = {
     /**
      * @param {string} name
      * @param {string} label
+     * @param {string=} title
      */
-    _addBit: function(name, label)
+    _addBit: function(name, label, title)
     {
         var typeFilterElement = this._filtersElement.createChild("li", name);
         typeFilterElement.typeName = name;
         typeFilterElement.createTextChild(label);
+        if (title)
+            typeFilterElement.title = title;
         typeFilterElement.addEventListener("click", this._onTypeFilterClicked.bind(this), false);
         this._typeFilterElements[name] = typeFilterElement;
     },
@@ -679,19 +682,16 @@ WebInspector.ComboBoxFilterUI.prototype = {
  */
 WebInspector.CheckboxFilterUI = function(className, title, activeWhenChecked, setting)
 {
-    this._filterElement = createElement("div");
-    this._filterElement.classList.add("filter-checkbox-filter", "filter-checkbox-filter-" + className);
+    this._filterElement = createElementWithClass("div", "filter-checkbox-filter");
     this._activeWhenChecked = !!activeWhenChecked;
-    this._createCheckbox(title);
-
-    if (setting) {
-        this._setting = setting;
-        setting.addChangeListener(this._settingChanged.bind(this));
-        this._settingChanged();
-    } else {
-        this._checked = !this._activeWhenChecked;
-        this._update();
-    }
+    this._label = createCheckboxLabel(title);
+    this._filterElement.appendChild(this._label);
+    this._checkboxElement = this._label.checkboxElement;
+    if (setting)
+        WebInspector.SettingsUI.bindCheckbox(this._checkboxElement, setting);
+    else
+        this._checkboxElement.checked = true;
+    this._checkboxElement.addEventListener("change", this._fireUpdated.bind(this), false);
 }
 
 WebInspector.CheckboxFilterUI.prototype = {
@@ -701,16 +701,7 @@ WebInspector.CheckboxFilterUI.prototype = {
      */
     isActive: function()
     {
-        return this._activeWhenChecked === this._checked;
-    },
-
-    /**
-     * @override
-     * @return {!Element}
-     */
-    element: function()
-    {
-        return this._filterElement;
+        return this._activeWhenChecked === this._checkboxElement.checked;
     },
 
     /**
@@ -718,56 +709,31 @@ WebInspector.CheckboxFilterUI.prototype = {
      */
     checked: function()
     {
-        return this._checked;
+        return this._checkboxElement.checked;
     },
 
     /**
-     * @param {boolean} state
+     * @override
+     * @return {!Element}
      */
-    setState: function(state)
+    element: function()
     {
-        this._checked = state;
-        if (this._setting)
-            this._setting.set(state);
-        else
-            this._update();
+        return this._filterElement;
     },
 
-    _update: function()
+    _fireUpdated: function()
     {
-        this._checkElement.classList.toggle("checkbox-filter-checkbox-checked", this._checked);
         this.dispatchEventToListeners(WebInspector.FilterUI.Events.FilterChanged, null);
     },
 
-    _settingChanged: function()
-    {
-        this._checked = this._setting.get();
-        this._update();
-    },
-
-    /**
-     * @param {!Event} event
-     */
-    _onClick: function(event)
-    {
-        this._checked = !this._checked;
-        if (this._setting)
-            this._setting.set(this._checked);
-        else
-            this._update();
-    },
-
     /**
-     * @param {string} title
+     * @param {string} backgroundColor
+     * @param {string} borderColor
      */
-    _createCheckbox: function(title)
+    setColor: function(backgroundColor, borderColor)
     {
-        var label = this._filterElement.createChild("label");
-        var checkBorder = label.createChild("div", "checkbox-filter-checkbox");
-        this._checkElement = checkBorder.createChild("div", "checkbox-filter-checkbox-check");
-        this._filterElement.addEventListener("click", this._onClick.bind(this), false);
-        var typeElement = label.createChild("span", "type");
-        typeElement.textContent = title;
+        this._label.backgroundColor = backgroundColor;
+        this._label.borderColor = borderColor;
     },
 
     __proto__: WebInspector.Object.prototype