DevTools: move filter bar into the style toolbar

Source/devtools/front_end/elements/StylesSidebarPane.js

Index: Source/devtools/front_end/elements/StylesSidebarPane.js
diff --git a/Source/devtools/front_end/elements/StylesSidebarPane.js b/Source/devtools/front_end/elements/StylesSidebarPane.js
index dcfc44a66357356358747b7576e28ff8fb26e50e..0bff3d3ac340af881bbafab7d8890bd8a3797f4d 100644
--- a/Source/devtools/front_end/elements/StylesSidebarPane.js
+++ b/Source/devtools/front_end/elements/StylesSidebarPane.js
@@ -40,7 +40,14 @@ WebInspector.StylesSidebarPane = function(requestShowCallback)
     WebInspector.moduleSetting("colorFormat").addChangeListener(this.update.bind(this));
     WebInspector.moduleSetting("textEditorIndent").addChangeListener(this.update.bind(this));
 
-    var toolbar = new WebInspector.ExtensibleToolbar("styles-sidebarpane-toolbar", this.element);
+    var hbox = new WebInspector.HBox();

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

div.hbox

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

Done.

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

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

Same class for toolbar and hbox. Intended?

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

This is not a classname - this is extension point's "location".

     toolbar.element.classList.add("styles-pane-toolbar");
 
     this._requestShowCallback = requestShowCallback;
@@ -260,15 +267,6 @@ WebInspector.StylesSidebarPane.prototype = {
     },
 
     /**
-     * @param {!Element} matchedStylesElement
-     */
-    setFilterBoxContainer: function(matchedStylesElement)
-    {
-        this._filterInput = WebInspector.StylesSidebarPane.createPropertyFilterElement(WebInspector.UIString("Find in Styles"), this._onFilterChanged.bind(this));
-        matchedStylesElement.appendChild(this._filterInput);
-    },
-
-    /**
      * @param {string} propertyName
      */
     tracePropertyName: function(propertyName)
@@ -868,10 +866,11 @@ WebInspector.StylesSidebarPane.prototype = {
 
 /**
  * @param {string} placeholder
- * @return {!Element}
+ * @param {!Element} container
  * @param {function(?RegExp)} filterCallback
+ * @return {!Element}
  */
-WebInspector.StylesSidebarPane.createPropertyFilterElement = function(placeholder, filterCallback)
+WebInspector.StylesSidebarPane.createPropertyFilterElement = function(placeholder, container, filterCallback)
 {
     var input = createElement("input");
     input.type = "search";
@@ -881,7 +880,7 @@ WebInspector.StylesSidebarPane.createPropertyFilterElement = function(placeholde
     {
         var regex = input.value ? new RegExp(input.value.escapeForRegExp(), "i") : null;
         filterCallback(regex);
-        input.parentNode.classList.toggle("styles-filter-engaged", !!input.value);
+        container.classList.toggle("styles-filter-engaged", !!input.value);
     }
     input.addEventListener("input", searchHandler, false);