DevTools: move filter bar into the style toolbar

Source/devtools/front_end/elements/ElementsPanel.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
  * 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
@@ skipping 66 matching lines @@
     this._breadcrumbs.show(crumbsContainer);
     this._breadcrumbs.addEventListener(WebInspector.ElementsBreadcrumbs.Events.NodeSelected, this._crumbNodeSelected, this);
 
     this.sidebarPanes = {};
     /** @type !Array<!WebInspector.ElementsSidebarViewWrapperPane> */
     this._elementsSidebarViewWrappers = [];
     var sharedSidebarModel = new WebInspector.SharedSidebarModel();
     this.sidebarPanes.platformFonts = WebInspector.PlatformFontsWidget.createSidebarWrapper(sharedSidebarModel);
     this.sidebarPanes.styles = new WebInspector.StylesSidebarPane(this._showStylesSidebar.bind(this));
 
-    this._computedStylesFilterBoxContainer = createElement("div");
-    this._computedStylesFilterBoxContainer.className = "sidebar-pane-filter-box";
-    this.sidebarPanes.computedStyle = WebInspector.ComputedStyleWidget.createSidebarWrapper(this.sidebarPanes.styles, sharedSidebarModel, this._computedStylesFilterBoxContainer);
+    this.sidebarPanes.computedStyle = WebInspector.ComputedStyleWidget.createSidebarWrapper(this.sidebarPanes.styles, sharedSidebarModel);
 
     this.sidebarPanes.styles.addEventListener(WebInspector.StylesSidebarPane.Events.SelectorEditingStarted, this._onEditingSelectorStarted.bind(this));
     this.sidebarPanes.styles.addEventListener(WebInspector.StylesSidebarPane.Events.SelectorEditingEnded, this._onEditingSelectorEnded.bind(this));
 
-    this._matchedStylesFilterBoxContainer = createElement("div");
-    this._matchedStylesFilterBoxContainer.className = "sidebar-pane-filter-box";
-    this.sidebarPanes.styles.setFilterBoxContainer(this._matchedStylesFilterBoxContainer);
-
-
     this.sidebarPanes.metrics = new WebInspector.MetricsSidebarPane();
     this.sidebarPanes.properties = WebInspector.PropertiesWidget.createSidebarWrapper();
     this.sidebarPanes.domBreakpoints = WebInspector.domBreakpointsSidebarPane.createProxy(this);
     this.sidebarPanes.eventListeners = WebInspector.EventListenersWidget.createSidebarWrapper();
 
     WebInspector.dockController.addEventListener(WebInspector.DockController.Events.DockSideChanged, this._dockSideChanged.bind(this));
     WebInspector.moduleSetting("splitVerticallyWhenDockedToRight").addChangeListener(this._dockSideChanged.bind(this));
     this._dockSideChanged();
     this._loadSidebarViews();
 
@@ skipping 781 matching lines @@
         }
 
         this._splitWidget.setVertical(!vertically);
 
         var computedPane = new WebInspector.SidebarPane(WebInspector.UIString("Computed"));
         computedPane.element.classList.add("composite");
         computedPane.element.classList.add("fill");
 
         computedPane.element.classList.add("metrics-and-computed");
 
-        var matchedStylePanesWrapper = createElement("div");
-        matchedStylePanesWrapper.className = "style-panes-wrapper";
-        var computedStylePanesWrapper = createElement("div");
-        computedStylePanesWrapper.className = "style-panes-wrapper";
+        var matchedStylePanesWrapper = new WebInspector.VBox();
+        matchedStylePanesWrapper.element.classList.add("style-panes-wrapper");
+        var computedStylePanesWrapper = new WebInspector.VBox();
+        computedStylePanesWrapper.element.classList.add("style-panes-wrapper");
 
         /**
          * @param {boolean} inComputedStyle
          * @this {WebInspector.ElementsPanel}
          */
         function showMetrics(inComputedStyle)
         {
             if (inComputedStyle)
-                this.sidebarPanes.metrics.show(computedStylePanesWrapper, this.sidebarPanes.computedStyle.element);
+                this.sidebarPanes.metrics.show(computedStylePanesWrapper.element, this.sidebarPanes.computedStyle.element);
             else
-                this.sidebarPanes.metrics.show(matchedStylePanesWrapper);
+                this.sidebarPanes.metrics.show(matchedStylePanesWrapper.element);
         }
 
         /**
          * @param {!WebInspector.Event} event
          * @this {WebInspector.ElementsPanel}
          */
         function tabSelected(event)
         {
             var tabId = /** @type {string} */ (event.data.tabId);
             if (tabId === computedPane.title())
@@ skipping 12 matching lines @@
         if (vertically) {
             this._splitWidget.installResizer(this.sidebarPaneView.headerElement());
 
             var compositePane = new WebInspector.SidebarPane(this.sidebarPanes.styles.title());
             compositePane.element.classList.add("composite");
             compositePane.element.classList.add("fill");
 
             var splitWidget = new WebInspector.SplitWidget(true, true, "stylesPaneSplitViewState", 215);
             splitWidget.show(compositePane.element);
 
-            var vbox1 = new WebInspector.VBox();
-            vbox1.element.appendChild(matchedStylePanesWrapper);
-            vbox1.element.appendChild(this._matchedStylesFilterBoxContainer);
-            splitWidget.setMainWidget(vbox1);
+            splitWidget.setMainWidget(matchedStylePanesWrapper);
+            splitWidget.setSidebarWidget(computedStylePanesWrapper);
 
-            var vbox2 = new WebInspector.VBox();
-            vbox2.element.appendChild(computedStylePanesWrapper);
-            vbox2.element.appendChild(this._computedStylesFilterBoxContainer);
-            splitWidget.setSidebarWidget(vbox2);
-
-            computedPane.show(computedStylePanesWrapper);
+            computedPane.show(computedStylePanesWrapper.element);
             this.sidebarPaneView.addPane(compositePane);
         } else {
             var stylesPane = new WebInspector.SidebarPane(this.sidebarPanes.styles.title());
-            stylesPane.element.classList.add("composite");
-            stylesPane.element.classList.add("fill");
-            stylesPane.element.classList.add("metrics-and-styles");
+            stylesPane.element.classList.add("composite", "fill", "metrics-and-styles");
 
-            stylesPane.element.appendChild(matchedStylePanesWrapper);
-            computedPane.element.appendChild(computedStylePanesWrapper);
+            matchedStylePanesWrapper.show(stylesPane.element);
+            computedStylePanesWrapper.show(computedPane.element);
 
             this.sidebarPaneView.addEventListener(WebInspector.TabbedPane.EventTypes.TabSelected, tabSelected, this);
 
-            stylesPane.element.appendChild(this._matchedStylesFilterBoxContainer);
-            computedPane.element.appendChild(this._computedStylesFilterBoxContainer);
-
             this.sidebarPaneView.addPane(stylesPane);
             this.sidebarPaneView.addPane(computedPane);
         }
 
-        this.sidebarPanes.styles.show(matchedStylePanesWrapper);
-        this.sidebarPanes.computedStyle.show(computedStylePanesWrapper);
+        this.sidebarPanes.styles.show(matchedStylePanesWrapper.element);
+        this.sidebarPanes.computedStyle.show(computedStylePanesWrapper.element);
         showMetrics.call(this, vertically);
-        this.sidebarPanes.platformFonts.show(computedStylePanesWrapper);
+        this.sidebarPanes.platformFonts.show(computedStylePanesWrapper.element);
 
         this.sidebarPaneView.addPane(this.sidebarPanes.eventListeners);
         this.sidebarPaneView.addPane(this.sidebarPanes.domBreakpoints);
         this.sidebarPaneView.addPane(this.sidebarPanes.properties);
 
         for (var sidebarViewWrapper of this._elementsSidebarViewWrappers)
             this.sidebarPaneView.addPane(sidebarViewWrapper);
 
         this._extensionSidebarPanesContainer = this.sidebarPaneView;
 
@@ skipping 147 matching lines @@
 WebInspector.ElementsPanelFactory.prototype = {
     /**
      * @override
      * @return {!WebInspector.Panel}
      */
     createPanel: function()
     {
         return WebInspector.ElementsPanel.instance();
     }
 }