DevTools: Implement Styles search and Computed style filter

Source/devtools/front_end/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 77 matching lines @@
     var crumbsContainer = stackElement.createChild("div");
     crumbsContainer.id = "elements-crumbs";
     this.crumbsElement = crumbsContainer.createChild("div", "crumbs");
     this.crumbsElement.addEventListener("mousemove", this._mouseMovedInCrumbs.bind(this), false);
     this.crumbsElement.addEventListener("mouseout", this._mouseMovedOutOfCrumbs.bind(this), false);
 
     this.sidebarPanes = {};
     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);
     this.sidebarPanes.eventListeners = new WebInspector.EventListenersSidebarPane();
 
     this.sidebarPanes.styles.addEventListener(WebInspector.SidebarPane.EventTypes.wasShown, this.updateStyles.bind(this, false));
     this.sidebarPanes.metrics.addEventListener(WebInspector.SidebarPane.EventTypes.wasShown, this.updateMetrics.bind(this));
     this.sidebarPanes.platformFonts.addEventListener(WebInspector.SidebarPane.EventTypes.wasShown, this.updatePlatformFonts.bind(this));
     this.sidebarPanes.properties.addEventListener(WebInspector.SidebarPane.EventTypes.wasShown, this.updateProperties.bind(this));
     this.sidebarPanes.eventListeners.addEventListener(WebInspector.SidebarPane.EventTypes.wasShown, this.updateEventListeners.bind(this));
@@ skipping 326 matching lines @@
                 return null;
 
             var resource = WebInspector.resourceTreeModel.resourceForURL(anchor.href);
             if (!resource || resource.type !== WebInspector.resourceTypes.Image)
                 return null;
 
             anchor.removeAttribute("title");
         }
         return anchor;
     },
-    
+
     _loadDimensionsForNode: function(treeElement, callback)
     {
         // We get here for CSS properties, too, so bail out early for non-DOM treeElements.
         if (treeElement.treeOutline !== this.treeOutline) {
             callback();
             return;
         }
-        
+
         var node = /** @type {!WebInspector.DOMNode} */ (treeElement.representedObject);
 
         if (!node.nodeName() || node.nodeName().toLowerCase() !== "img") {
             callback();
             return;
         }
 
         WebInspector.RemoteObject.resolveNode(node, "", resolvedNode);
 
         function resolvedNode(object)
@@ skipping 736 matching lines @@
             this._splitView.uninstallResizer(this.sidebarPaneView.headerElement());
         }
 
         this._splitView.setVertical(!vertically);
 
         var computedPane = new WebInspector.SidebarPane(WebInspector.UIString("Computed"));
         computedPane.element.classList.add("composite");
         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);
         }
 
         /**
          * @param {!WebInspector.Event} event
          * @this {WebInspector.ElementsPanel}
          */
         function tabSelected(event)
         {
             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());
             stylesPane.element.classList.add("composite");
             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);
         this._extensionSidebarPanesContainer = this.sidebarPaneView;
 
         for (var i = 0; i < this._extensionSidebarPanes.length; ++i)
             this._extensionSidebarPanesContainer.addPane(this._extensionSidebarPanes[i]);
 
         this.sidebarPaneView.show(this._splitView.sidebarElement());
         this.sidebarPanes.styles.expand();
@@ skipping 71 matching lines @@
 WebInspector.ElementsPanel.DOMNodeRevealer.prototype = {
     /**
      * @param {!Object} node
      */
     reveal: function(node)
     {
         if (node instanceof WebInspector.DOMNode)
             /** @type {!WebInspector.ElementsPanel} */ (WebInspector.showPanel("elements")).revealAndSelectNode(node.id);
     }
 }