DevTools: Implement Styles search and Computed style filter

Source/devtools/front_end/ElementsPanel.js

Index: Source/devtools/front_end/ElementsPanel.js
diff --git a/Source/devtools/front_end/ElementsPanel.js b/Source/devtools/front_end/ElementsPanel.js
index 0d5dc4636e4de1a15589d74ddc1ef7aba7125651..570dcf725995864113bf80200231c77544cf0b83 100644
--- a/Source/devtools/front_end/ElementsPanel.js
+++ b/Source/devtools/front_end/ElementsPanel.js
@@ -95,6 +95,13 @@ WebInspector.ElementsPanel = function()
     this.sidebarPanes.platformFonts = new WebInspector.PlatformFontsSidebarPane();
     this.sidebarPanes.computedStyle = new WebInspector.ComputedStyleSidebarPane();
     this.sidebarPanes.styles = new WebInspector.StylesSidebarPane(this.sidebarPanes.computedStyle, this._setPseudoClassForNodeId.bind(this));
+    if (WebInspector.experimentsSettings.cssStyleSearch.isEnabled()) {
+        this._matchedStylesFilterBoxContainer = document.createElement("div");
+        this._matchedStylesFilterBoxContainer.className = "filter-box-container inspector-footer status-bar";
+        this._computedStylesFilterBoxContainer = document.createElement("div");
+        this._computedStylesFilterBoxContainer.className = "filter-box-container inspector-footer status-bar";
+        this.sidebarPanes.styles.setFilterBoxContainers(this._matchedStylesFilterBoxContainer, this._computedStylesFilterBoxContainer);
+    }
     this.sidebarPanes.metrics = new WebInspector.MetricsSidebarPane();
     this.sidebarPanes.properties = new WebInspector.PropertiesSidebarPane();
     this.sidebarPanes.domBreakpoints = WebInspector.domBreakpointsSidebarPane.createProxy(this);
@@ -441,7 +448,7 @@ WebInspector.ElementsPanel.prototype = {
         }
         return anchor;
     },
-    
+
     _loadDimensionsForNode: function(treeElement, callback)
     {
         // We get here for CSS properties, too, so bail out early for non-DOM treeElements.
@@ -449,7 +456,7 @@ WebInspector.ElementsPanel.prototype = {
             callback();
             return;
         }
-        
+
         var node = /** @type {!WebInspector.DOMNode} */ (treeElement.representedObject);
 
         if (!node.nodeName() || node.nodeName().toLowerCase() !== "img") {
@@ -1206,21 +1213,22 @@ WebInspector.ElementsPanel.prototype = {
         computedPane.element.classList.add("fill");
         var expandComputed = computedPane.expand.bind(computedPane);
 
-        computedPane.bodyElement.appendChild(this.sidebarPanes.computedStyle.titleElement);
         computedPane.bodyElement.classList.add("metrics-and-computed");
-        this.sidebarPanes.computedStyle.show(computedPane.bodyElement);
         this.sidebarPanes.computedStyle.setExpandCallback(expandComputed);
 
-        this.sidebarPanes.platformFonts.show(computedPane.bodyElement);
+        var matchedStylePanesWrapper = document.createElement("div");
+        matchedStylePanesWrapper.className = "style-panes-wrapper";
+        var computedStylePanesWrapper = document.createElement("div");
+        computedStylePanesWrapper.className = "style-panes-wrapper";
 
         /**
-         * @param {!WebInspector.SidebarPane} pane
+         * @param {!Element} parentElement
          * @param {!Element=} beforeElement
          * @this {WebInspector.ElementsPanel}
          */
-        function showMetrics(pane, beforeElement)
+        function showMetrics(parentElement, beforeElement)
         {
-            this.sidebarPanes.metrics.show(pane.bodyElement, beforeElement);
+            this.sidebarPanes.metrics.show(parentElement, beforeElement);
         }
 
         /**
@@ -1231,33 +1239,38 @@ WebInspector.ElementsPanel.prototype = {
         {
             var tabId = /** @type {string} */ (event.data.tabId);
             if (tabId === computedPane.title())
-                showMetrics.call(this, computedPane, this.sidebarPanes.computedStyle.element);
-            if (tabId === stylesPane.title())
-                showMetrics.call(this, stylesPane);
+                showMetrics.call(this, computedStylePanesWrapper, this.sidebarPanes.computedStyle.element);
+            else if (tabId === stylesPane.title())
+                showMetrics.call(this, matchedStylePanesWrapper);
         }
 
         this.sidebarPaneView = new WebInspector.SidebarTabbedPane();
 
         if (vertically) {
             this._splitView.installResizer(this.sidebarPaneView.headerElement());
-            this.sidebarPanes.metrics.show(computedPane.bodyElement, this.sidebarPanes.computedStyle.element);
-            this.sidebarPanes.metrics.setExpandCallback(expandComputed);
-
+            var splitView = new WebInspector.SplitView(true, true, "StylesPaneSplitRatio", 0.5);
             var compositePane = new WebInspector.SidebarPane(this.sidebarPanes.styles.title());
             compositePane.element.classList.add("composite");
             compositePane.element.classList.add("fill");
             var expandComposite = compositePane.expand.bind(compositePane);
-
-            var splitView = new WebInspector.SplitView(true, true, "StylesPaneSplitRatio", 0.5);
             splitView.show(compositePane.bodyElement);
 
-            this.sidebarPanes.styles.show(splitView.mainElement());
-            splitView.mainElement().appendChild(this.sidebarPanes.styles.titleElement);
+            splitView.mainElement().appendChild(matchedStylePanesWrapper);

[pfeldman, 2014/03/13 05:33:53]

Could you work on minimizing the diff - it seems like you are touching more code
than you are changing.

[apavlov, 2014/03/13 16:28:15]

The issue is that I'm adding wrappers for contents of both panes. Since the
Metrics pane is displayed in different ways, depending on the layout, this
contributes to the number of changed lines, too :(

I have reverted unrelated line moves.

+            splitView.sidebarElement().appendChild(computedStylePanesWrapper);
+
+            this.sidebarPanes.metrics.setExpandCallback(expandComputed);
+
+            matchedStylePanesWrapper.appendChild(this.sidebarPanes.styles.titleElement);
             this.sidebarPanes.styles.setExpandCallback(expandComposite);
 
             computedPane.show(splitView.sidebarElement());
             computedPane.setExpandCallback(expandComposite);
 
+            if (WebInspector.experimentsSettings.cssStyleSearch.isEnabled()) {
+                splitView.mainElement().appendChild(this._matchedStylesFilterBoxContainer);
+                splitView.sidebarElement().appendChild(this._computedStylesFilterBoxContainer);
+            }
+
             this.sidebarPaneView.addPane(compositePane);
         } else {
             var stylesPane = new WebInspector.SidebarPane(this.sidebarPanes.styles.title());
@@ -1265,18 +1278,32 @@ WebInspector.ElementsPanel.prototype = {
             stylesPane.element.classList.add("fill");
             var expandStyles = stylesPane.expand.bind(stylesPane);
             stylesPane.bodyElement.classList.add("metrics-and-styles");
-            this.sidebarPanes.styles.show(stylesPane.bodyElement);
+
+            stylesPane.bodyElement.appendChild(matchedStylePanesWrapper);
+            computedPane.bodyElement.appendChild(computedStylePanesWrapper);
+
             this.sidebarPanes.styles.setExpandCallback(expandStyles);
             this.sidebarPanes.metrics.setExpandCallback(expandStyles);
-            stylesPane.bodyElement.appendChild(this.sidebarPanes.styles.titleElement);
+            this.sidebarPanes.styles.element.appendChild(this.sidebarPanes.styles.titleElement);
 
             this.sidebarPaneView.addEventListener(WebInspector.TabbedPane.EventTypes.TabSelected, tabSelected, this);
 
-            showMetrics.call(this, stylesPane);
+            if (WebInspector.experimentsSettings.cssStyleSearch.isEnabled()) {
+                stylesPane.bodyElement.appendChild(this._matchedStylesFilterBoxContainer);
+                computedPane.bodyElement.appendChild(this._computedStylesFilterBoxContainer);
+            }
             this.sidebarPaneView.addPane(stylesPane);
             this.sidebarPaneView.addPane(computedPane);
         }
 
+        this.sidebarPanes.styles.show(matchedStylePanesWrapper);
+        this.sidebarPanes.computedStyle.show(computedStylePanesWrapper);
+        if (vertically)
+            this.sidebarPanes.metrics.show(computedStylePanesWrapper, this.sidebarPanes.computedStyle.element);
+        else
+            this.sidebarPanes.metrics.show(matchedStylePanesWrapper);
+        this.sidebarPanes.platformFonts.show(computedStylePanesWrapper);
+
         this.sidebarPaneView.addPane(this.sidebarPanes.eventListeners);
         this.sidebarPaneView.addPane(this.sidebarPanes.domBreakpoints);
         this.sidebarPaneView.addPane(this.sidebarPanes.properties);