DevTools: move filter bar into the style toolbar

Source/devtools/front_end/elements/ComputedStyleWidget.js

Index: Source/devtools/front_end/elements/ComputedStyleWidget.js
diff --git a/Source/devtools/front_end/elements/ComputedStyleWidget.js b/Source/devtools/front_end/elements/ComputedStyleWidget.js
index 063bdb20b067df29302c7492ed683caaa696cc41..f054363dd0b3fbaefbd9d9e6e97ede7230ebf3f4 100644
--- a/Source/devtools/front_end/elements/ComputedStyleWidget.js
+++ b/Source/devtools/front_end/elements/ComputedStyleWidget.js
@@ -31,12 +31,13 @@
  * @constructor
  * @param {!WebInspector.StylesSidebarPane} stylesSidebarPane
  * @param {!WebInspector.SharedSidebarModel} sharedModel
- * @param {!Element} filterContainer
  * @extends {WebInspector.ThrottledWidget}
  */
-WebInspector.ComputedStyleWidget = function(stylesSidebarPane, sharedModel, filterContainer)
+WebInspector.ComputedStyleWidget = function(stylesSidebarPane, sharedModel)
 {
     WebInspector.ThrottledWidget.call(this);
+    this.element.classList.add("computed-style-sidebar-pane");
+
     this.registerRequiredCSS("elements/computedStyleSidebarPane.css");
     this._alwaysShowComputedProperties = { "display": true, "height": true, "width": true };
 
@@ -44,30 +45,46 @@ WebInspector.ComputedStyleWidget = function(stylesSidebarPane, sharedModel, filt
     this._sharedModel.addEventListener(WebInspector.SharedSidebarModel.Events.ComputedStyleChanged, this.update, this);
 
     this._showInheritedComputedStylePropertiesSetting = WebInspector.settings.createSetting("showInheritedComputedStyleProperties", false);
-
-    var inheritedCheckBox = WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Show inherited properties"), this._showInheritedComputedStylePropertiesSetting, true);
-    inheritedCheckBox.classList.add("checkbox-with-label");
-    this.element.appendChild(inheritedCheckBox);
-    this.element.classList.add("computed-style-sidebar-pane");
     this._showInheritedComputedStylePropertiesSetting.addChangeListener(this._showInheritedComputedStyleChanged.bind(this));
 
+    var hbox = new WebInspector.HBox();

[dgozman, 2015/06/11 08:39:31]

Just create a div with "hbox" class.

[pfeldman, 2015/06/11 09:56:02]

Done.

+    hbox.element.classList.add("styles-sidebarpane-toolbar");

[dgozman, 2015/06/11 08:39:31]

nit: sidebar-pane (with a dash) for consistency

[pfeldman, 2015/06/11 09:56:02]

Done.

+    hbox.show(this.element);
+    var filterContainerElement = hbox.element.createChild("div", "styles-sidebar-pane-filter-box");
+    var filterInput = WebInspector.StylesSidebarPane.createPropertyFilterElement(WebInspector.UIString("Filter"), hbox.element, filterCallback.bind(this));
+    filterContainerElement.appendChild(filterInput);
+
+    var toolbar = new WebInspector.Toolbar(hbox.element);
+    toolbar.element.classList.add("styles-pane-toolbar");

[dgozman, 2015/06/11 08:39:31]

nit: pane -> sidebar-pane

[pfeldman, 2015/06/11 09:56:02]

Not changing it - it has been there for tests.

+    toolbar.appendToolbarItem(new WebInspector.ToolbarCheckbox(WebInspector.UIString("Show inherited"),
+                                                               WebInspector.UIString("Show inherited properties"),
+                                                               this._showInheritedComputedStylePropertiesSetting));
+
     this._propertiesContainer = this.element.createChild("div", "monospace");
     this._propertiesContainer.classList.add("computed-properties");
     this._onTracePropertyBound = this._onTraceProperty.bind(this);
 
     this._stylesSidebarPane = stylesSidebarPane;
-    this._installFilter(filterContainer);
+
+    /**
+     * @param {?RegExp} regex
+     * @this {WebInspector.ComputedStyleWidget}
+     */
+    function filterCallback(regex)
+    {
+        this._filterRegex = regex;
+        this._updateFilter(regex);
+    }
 }
 
 /**
  * @param {!WebInspector.StylesSidebarPane} stylesSidebarPane
  * @param {!WebInspector.SharedSidebarModel} sharedModel
- * @param {!Element} filterContainer
  * @return {!WebInspector.ElementsSidebarViewWrapperPane}
  */
-WebInspector.ComputedStyleWidget.createSidebarWrapper = function(stylesSidebarPane, sharedModel, filterContainer)
+WebInspector.ComputedStyleWidget.createSidebarWrapper = function(stylesSidebarPane, sharedModel)
 {
-    var widget = new WebInspector.ComputedStyleWidget(stylesSidebarPane, sharedModel, filterContainer);
+    var widget = new WebInspector.ComputedStyleWidget(stylesSidebarPane, sharedModel);
     return new WebInspector.ElementsSidebarViewWrapperPane(WebInspector.UIString("Computed Style"), widget)
 }
 
@@ -196,23 +213,5 @@ WebInspector.ComputedStyleWidget.prototype = {
         }
     },
 
-    /**
-     * @param {!Element} container
-     */
-    _installFilter: function(container)
-    {
-        container.appendChild(WebInspector.StylesSidebarPane.createPropertyFilterElement(WebInspector.UIString("Filter"), filterCallback.bind(this)));
-
-        /**
-         * @param {?RegExp} regex
-         * @this {WebInspector.ComputedStyleWidget}
-         */
-        function filterCallback(regex)
-        {
-            this._filterRegex = regex;
-            this._updateFilter(regex);
-        }
-    },
-
     __proto__: WebInspector.ThrottledWidget.prototype
 }