DevTools: move filter bar into the style toolbar

Source/devtools/front_end/elements/ComputedStyleWidget.js

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  * 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:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 13 matching lines @@
  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 /**
  * @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 };
 
     this._sharedModel = sharedModel;
     this._sharedModel.addEventListener(WebInspector.SharedSidebarModel.Events.ComputedStyleChanged, this.update, this);
 
     this._showInheritedComputedStylePropertiesSetting = WebInspector.settings.createSetting("showInheritedComputedStyleProperties", false);
+    this._showInheritedComputedStylePropertiesSetting.addChangeListener(this._showInheritedComputedStyleChanged.bind(this));
 
-    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)
 }
 
 WebInspector.ComputedStyleWidget._propertySymbol = Symbol("property");
 
 WebInspector.ComputedStyleWidget.prototype = {
     /**
      * @param {!Event} event
      */
     _onTraceProperty: function(event)
@@ skipping 108 matching lines @@
     _updateFilter: function(regex)
     {
         for (var i = 0; i < this._propertiesContainer.children.length; ++i) {
             var item = this._propertiesContainer.children[i];
             var property = item[WebInspector.ComputedStyleWidget._propertySymbol];
             var matched = !regex || regex.test(property.name) || regex.test(property.value);
             item.classList.toggle("hidden", !matched);
         }
     },
 
-    /**
-     * @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
 }