DevTools: Implement Styles search and Computed style filter

Source/devtools/front_end/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 33 matching lines @@
     this.titleElement.appendChild(this._elementStateButton);
 
     var addButton = document.createElement("button");
     addButton.className = "pane-title-button add";
     addButton.id = "add-style-button-test-id";
     addButton.title = WebInspector.UIString("New Style Rule");
     addButton.addEventListener("click", this._createNewRule.bind(this), false);
     this.titleElement.appendChild(addButton);
 
     this._computedStylePane = computedStylePane;
-    computedStylePane._stylesSidebarPane = this;
+    computedStylePane.setHostingPane(this);
     this._setPseudoClassCallback = setPseudoClassCallback;
     this.element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), true);
     WebInspector.settings.colorFormat.addChangeListener(this._colorFormatSettingChanged.bind(this));
 
     this._createElementStatePane();
     this.bodyElement.appendChild(this._elementStatePane);
     this._sectionsContainer = document.createElement("div");
     this.bodyElement.appendChild(this._sectionsContainer);
 
     this._spectrumHelper = new WebInspector.SpectrumPopupHelper();
@@ skipping 108 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
+     * @param {!Element} computedStylesElement
+     */
+    setFilterBoxContainers: function(matchedStylesElement, computedStylesElement)
+    {
+        matchedStylesElement.appendChild(this._createCSSFilterControl());
+        this._computedStylePane.setFilterBoxContainer(computedStylesElement);
+    },
+
+    /**
+     * @return {!Element}
+     */
+    _createCSSFilterControl: function()
+    {
+        var filterInput = this._createPropertyFilterElement(false, searchHandler.bind(this));
+
+        /**
+         * @param {?RegExp} regex
+         * @this {WebInspector.StylesSidebarPane}
+         */
+        function searchHandler(regex)
+        {
+            this._filterRegex = regex;
+        }
+
+        filterInput.addEventListener("keydown", tabHandler.bind(this), false);
+
+        /**
+         * @param {?Event} event
+         * @this {WebInspector.StylesSidebarPane}
+         */
+        function tabHandler(event)

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

It seems like editingCommitted is already implementing this traversal. Lets
extract the code from there instead.

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

Correct. Reused the logic.

+        {
+            if (event.keyIdentifier !== "U+0009")
+                return;
+
+            event.consume(true);
+            var firstSection = this.sections[0][1];
+            if (!firstSection)
+                return;
+            if (event.shiftKey) {
+                var lastSection = firstSection.previousEditableSibling();
+                if (!lastSection)
+                    return;
+                lastSection.addNewBlankProperty().startEditing();
+            } else {
+                if (firstSection.rule)
+                    firstSection.startEditingSelector();
+                else
+                    firstSection._moveEditorFromSelector("forward");
+            }
+        }
+        return filterInput;
+    },
+
     get _forcedPseudoClasses()
     {
         return this.node ? (this.node.getUserProperty("pseudoState") || undefined) : undefined;
     },
 
     _updateForcedPseudoStateInputs: function()
     {
         if (!this.node)
             return;
 
@@ skipping 607 matching lines @@
             input.type = "checkbox";
             input.state = state;
             input.addEventListener("click", clickListener.bind(this), false);
             inputs.push(input);
             label.appendChild(input);
             label.appendChild(document.createTextNode(":" + state));
             td.appendChild(label);
             return td;
         }
 
-        var tr = document.createElement("tr");
+        var tr = table.createChild("tr");
         tr.appendChild(createCheckbox.call(this, "active"));
         tr.appendChild(createCheckbox.call(this, "hover"));
-        table.appendChild(tr);
 
-        tr = document.createElement("tr");
+        tr = table.createChild("tr");
         tr.appendChild(createCheckbox.call(this, "focus"));
         tr.appendChild(createCheckbox.call(this, "visited"));
-        table.appendChild(tr);
 
         this._elementStatePane.appendChild(table);
     },
 
     /**
+     * @return {?RegExp}
+     */
+    filterRegex: function()
+    {
+        return this._filterRegex;
+    },
+
+    /**
+     * @param {boolean} isComputedStyleFilter
+     * @return {!Element}
+     * @param {function(?RegExp)} filterCallback
+     */
+    _createPropertyFilterElement: function(isComputedStyleFilter, filterCallback)
+    {
+        var input = document.createElement("input");
+        input.type = "text";
+        input.placeholder = isComputedStyleFilter ? WebInspector.UIString("Filter") : WebInspector.UIString("Find in Styles");
+        input.className = "filter-box toolbar-search-control search-replace";

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

You are using styles that can change independently from your code, please don't.

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

I'm sharing styles with other search controls, so that they always look the same
- is that forbidden? :)

+        var boundSearchHandler = searchHandler.bind(this);
+
+        /**
+         * @this {WebInspector.StylesSidebarPane}
+         */
+        function searchHandler()
+        {
+            var regex = input.value ? new RegExp(input.value.escapeForRegExp(), "i") : null;
+            filterCallback(regex);
+            this._updateFilter(isComputedStyleFilter);
+        }
+        input.addEventListener("input", boundSearchHandler, false);
+
+        /**
+         * @param {?Event} event
+         */
+        function keydownHandler(event)
+        {
+            if (event.keyIdentifier !== "U+001B" || !input.value)

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

What is 1B?

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

It's "Esc". I'll create a separate var for this.

+                return;
+            event.consume(true);
+            input.value = "";
+            boundSearchHandler();
+        }
+        input.addEventListener("keydown", keydownHandler, false);
+
+        return input;
+    },
+
+    /**
+     * @param {boolean} isComputedStyleFilter
+     */
+    _updateFilter: function(isComputedStyleFilter)
+    {
+        for (var pseudoId in this.sections) {
+            var sections = this.sections[pseudoId];
+            for (var i = 0; i < sections.length; ++i) {
+                var section = sections[i];
+                if (isComputedStyleFilter !== !!section.computedStyle)
+                    continue;
+                section.updateFilter();
+            }
+        }
+    },
+
+    /**
      * @param {!WebInspector.Event} event
      */
     _showUserAgentStylesSettingChanged: function(event)
     {
         var showStyles = /** @type {boolean} */ (event.data);
         this.element.enableStyleClass("show-user-styles", showStyles);
     },
 
     willHide: function()
     {
@@ skipping 40 matching lines @@
 /**
  * @constructor
  * @extends {WebInspector.SidebarPane}
  */
 WebInspector.ComputedStyleSidebarPane = function()
 {
     WebInspector.SidebarPane.call(this, WebInspector.UIString("Computed Style"));
 }
 
 WebInspector.ComputedStyleSidebarPane.prototype = {
+    /**
+     * @param {!WebInspector.StylesSidebarPane} pane
+     */
+    setHostingPane: function(pane)
+    {
+        this._stylesSidebarPane = pane;
+    },
+
+    setFilterBoxContainer: function(element)
+    {
+        element.appendChild(this._stylesSidebarPane._createPropertyFilterElement(true, filterCallback.bind(this)));

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

This is a strange API. Why does computed style pane need to bother with the
filter component?

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

The key point here is that the filters are uniformly created in
_createPropertyFilterElement(). They are also bound to the StylesSidebarPane
through the "input" event handler.

+
+        /**
+         * @param {?RegExp} regex
+         * @this {WebInspector.ComputedStyleSidebarPane}
+         */
+        function filterCallback(regex)
+        {
+            this._filterRegex = regex;
+        }
+    },
+
     wasShown: function()
     {
         WebInspector.SidebarPane.prototype.wasShown.call(this);
         if (!this._hasFreshContent)
             this.prepareContent();
     },
 
     /**
      * @param {function()=} callback
      */
     prepareContent: function(callback)
     {
         /**
          * @this {WebInspector.ComputedStyleSidebarPane}
          */
         function wrappedCallback() {
             this._hasFreshContent = true;
             if (callback)
                 callback();
             delete this._hasFreshContent;
         }
         this._stylesSidebarPane._refreshUpdate(null, true, wrappedCallback.bind(this));
     },
 
+    /**
+     * @return {?RegExp}
+     */
+    filterRegex: function()
+    {
+        return this._filterRegex;
+    },
+
     __proto__: WebInspector.SidebarPane.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.PropertiesSection}
  * @param {!WebInspector.StylesSidebarPane} parentPane
  * @param {!Object} styleRule
  * @param {boolean} editable
  * @param {boolean} isInherited
@@ skipping 297 matching lines @@
             if (shorthandPropertyAvailable)
                 continue;  // Shorthand for the property found.
 
             var inherited = this.isPropertyInherited(property.name);
             var overloaded = property.inactive || this.isPropertyOverloaded(property.name, isShorthand);
             var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this.styleRule, style, property, isShorthand, inherited, overloaded);
             this.propertiesTreeOutline.appendChild(item);
         }
     },
 
+    updateFilter: function()
+    {
+        var children = this.propertiesTreeOutline.children;
+        for (var i = 0; i < children.length; ++i)
+            children[i].updateFilter();
+
+        if (this.styleRule.rule)
+            this._markSelectorHighlights();
+    },
+
     _markSelectorMatches: function()
     {
         var rule = this.styleRule.rule;
         if (!rule)
             return;
 
         var matchingSelectors = rule.matchingSelectors;
         // .selector is rendered as non-affecting selector by default.
         if (this.noAffect || matchingSelectors)
             this._selectorElement.className = "selector";
@@ skipping 15 matching lines @@
             selectorElement.className = "simple-selector" + matchingSelectorClass;
             if (rule.id)
                 selectorElement._selectorIndex = i;
             selectorElement.textContent = selectors[i].value;
 
             fragment.appendChild(selectorElement);
         }
 
         this._selectorElement.removeChildren();
         this._selectorElement.appendChild(fragment);
+        this._markSelectorHighlights();
+    },
+
+    _markSelectorHighlights: function()
+    {
+        var selectors = this._selectorElement.getElementsByClassName("simple-selector");
+        var regex = this.pane.filterRegex();
+        for (var i = 0; i < selectors.length; ++i) {
+            var selectorMatchesFilter = regex && regex.test(selectors[i].textContent);
+            selectors[i].enableStyleClass("filter-match", selectorMatchesFilter);
+        }
     },
 
     _checkWillCancelEditing: function()
     {
         var willCauseCancelEditing = this._willCauseCancelEditing;
         delete this._willCauseCancelEditing;
         return willCauseCancelEditing;
     },
 
     _handleSelectorContainerClick: function(event)
@@ skipping 229 matching lines @@
  * @constructor
  * @extends {WebInspector.PropertiesSection}
  * @param {!WebInspector.StylesSidebarPane} stylesPane
  * @param {!Object} styleRule
  * @param {!Object.<string, boolean>} usedProperties
  */
 WebInspector.ComputedStylePropertiesSection = function(stylesPane, styleRule, usedProperties)
 {
     WebInspector.PropertiesSection.call(this, "");
 
-    var showInheritedCheckbox = new WebInspector.Checkbox(WebInspector.UIString("Show inherited properties"), "sidebar-pane-subtitle");
-    this.headerElement.appendChild(showInheritedCheckbox.element);
+    var subtitle = this.headerElement.createChild("div", "sidebar-pane-subtitle vbox");
+    var showInheritedCheckbox = new WebInspector.Checkbox(WebInspector.UIString("Show inherited properties"), "hbox");
+    subtitle.appendChild(showInheritedCheckbox.element);
+
     this._hasFreshContent = false;
 
     /**
      * @this {WebInspector.ComputedStylePropertiesSection}
      */
     function showInheritedToggleFunction()
     {
         var showInherited = showInheritedCheckbox.checked;
         WebInspector.settings.showInheritedComputedStyleProperties.set(showInherited);
         if (showInherited)
@@ skipping 36 matching lines @@
         this._expandedPropertyNames = {};
         for (var name in this._propertyTreeElements) {
             if (this._propertyTreeElements[name].expanded)
                 this._expandedPropertyNames[name] = true;
         }
         this._propertyTreeElements = {};
         this.propertiesTreeOutline.removeChildren();
         this.populated = false;
     },
 
+    updateFilter: function()
+    {
+        var children = this.propertiesTreeOutline.children;
+        for (var i = 0; i < children.length; ++i)
+            children[i].updateFilter();
+    },
+
     onpopulate: function()
     {
         function sorter(a, b)
         {
             return a.name.compareTo(b.name);
         }
 
         var style = this.styleRule.style;
         if (!style)
             return;
@@ skipping 183 matching lines @@
     },
 
     /**
      * @return {?WebInspector.StylesSidebarPane}
      */
     editablePane: function()
     {
         return null;  // Overridden by ancestors.
     },
 
+    /**
+     * @return {!WebInspector.StylesSidebarPane|!WebInspector.ComputedStyleSidebarPane}
+     */
+    parentPane: function()
+    {
+        throw "Not implemented";
+    },
+
     get inherited()
     {
         return this._inherited;
     },
 
     /**
      * @return {boolean}
      */
     hasIgnorableError: function()
     {
@@ skipping 169 matching lines @@
         if (!this.parsedOk) {
             // Avoid having longhands under an invalid shorthand.
             this.hasChildren = false;
             this.listItemElement.classList.add("not-parsed-ok");
 
             // Add a separate exclamation mark IMG element with a tooltip.
             this.listItemElement.insertBefore(WebInspector.StylesSidebarPane.createExclamationMark(this.property), this.listItemElement.firstChild);
         }
         if (this.property.inactive)
             this.listItemElement.classList.add("inactive");
+        this.updateFilter();
+    },
+
+    updateFilter: function()
+    {
+        var regEx = this.parentPane().filterRegex();
+        this.listItemElement.enableStyleClass("filter-match", !!regEx && (regEx.test(this.property.name) || regEx.test(this.property.value)));
     },
 
     /**
      * @param {!Element} nameElement
      * @param {!Element} valueElement
      * @param {string} text
      */
     _processColor: function(nameElement, valueElement, text)
     {
         var color = WebInspector.Color.parse(text);
@@ skipping 211 matching lines @@
     },
 
     /**
      * @return {?WebInspector.StylesSidebarPane}
      */
     editablePane: function()
     {
         return null;
     },
 
+    /**
+     * @return {!WebInspector.ComputedStyleSidebarPane}
+     */
+    parentPane: function()
+    {
+        return this._stylesPane._computedStylePane;
+    },
+
+    updateFilter: function()
+    {
+        var regEx = this.parentPane().filterRegex();
+        this.listItemElement.enableStyleClass("hidden", !!regEx && (!regEx.test(this.property.name) && !regEx.test(this.property.value)));
+    },
+
     __proto__: WebInspector.StylePropertyTreeElementBase.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.StylePropertyTreeElementBase}
  * @param {!WebInspector.StylesSidebarPane} stylesPane
  * @param {!Object} styleRule
  * @param {!WebInspector.CSSStyleDeclaration} style
  * @param {!WebInspector.CSSProperty} property
@@ skipping 19 matching lines @@
 
     /**
      * @return {?WebInspector.StylesSidebarPane}
      */
     editablePane: function()
     {
         return this._parentPane;
     },
 
     /**
+     * @return {!WebInspector.StylesSidebarPane}
+     */
+    parentPane: function()
+    {
+        return this._parentPane;
+    },
+
+    /**
      * @return {?WebInspector.StylePropertiesSection}
      */
     section: function()
     {
         return this.treeOutline && this.treeOutline.section;
     },
 
     /**
      * @param {function()=} userCallback
      */
@@ skipping 780 matching lines @@
             return;
         }
 
         var results = this._cssCompletions.startsWith(prefix);
         var selectedIndex = this._cssCompletions.mostUsedOf(results);
         completionsReadyCallback(results, selectedIndex);
     },
 
     __proto__: WebInspector.TextPrompt.prototype
 }