DevTools: move filter bar into the style toolbar

Source/devtools/front_end/elements/StylesSidebarPane.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 22 matching lines @@
  * @param {function()} requestShowCallback
  */
 WebInspector.StylesSidebarPane = function(requestShowCallback)
 {
     WebInspector.ElementsSidebarPane.call(this, WebInspector.UIString("Styles"));
 
     this.element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), true);
     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;
     var toolbarPaneContainer = this.element.createChild("div", "styles-sidebar-toolbar-pane-container");
     this._toolbarPaneElement = toolbarPaneContainer.createChild("div", "styles-sidebar-toolbar-pane");
     this._sectionsContainer = this.element.createChild("div");
 
     this._stylesPopoverHelper = new WebInspector.StylesPopoverHelper();
 
     this._linkifier = new WebInspector.Linkifier(new WebInspector.Linkifier.DefaultCSSFormatter());
@@ skipping 199 matching lines @@
     _contextMenuEventFired: function(event)
     {
         // We start editing upon click -> default navigation to resources panel is not available
         // Hence we add a soft context menu for hrefs.
         var contextMenu = new WebInspector.ContextMenu(event);
         contextMenu.appendApplicableItems(/** @type {!Node} */ (event.target));
         contextMenu.show();
     },
 
     /**
-     * @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)
     {
         this._requestShowCallback();
         this._filterInput.setFilterValue(WebInspector.CSSMetadata.canonicalPropertyName(propertyName));
     },
 
     /**
      * @param {?RegExp} regex
@@ skipping 579 matching lines @@
                 delete this._pendingWidget;
             }
         }
     },
 
     __proto__: WebInspector.ElementsSidebarPane.prototype
 }
 
 /**
  * @param {string} placeholder
+ * @param {!Element} container
+ * @param {function(?RegExp)} filterCallback
  * @return {!Element}
- * @param {function(?RegExp)} filterCallback
  */
-WebInspector.StylesSidebarPane.createPropertyFilterElement = function(placeholder, filterCallback)
+WebInspector.StylesSidebarPane.createPropertyFilterElement = function(placeholder, container, filterCallback)
 {
     var input = createElement("input");
     input.type = "search";
     input.placeholder = placeholder;
 
     function searchHandler()
     {
         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);
 
     /**
      * @param {!Event} event
      */
     function keydownHandler(event)
     {
         var Esc = "U+001B";
         if (event.keyIdentifier !== Esc || !input.value)
@@ skipping 2366 matching lines @@
 
     /**
      * @override
      * @return {?WebInspector.ToolbarItem}
      */
     item: function()
     {
         return this._button;
     }
 }