Changeset 185723 in webkit

Timestamp:

Jun 18, 2015, 3:24:37 PM (11 years ago)

Author:

commit-queue@webkit.org

Message:

Web Inspector: Add a filter for CSS properties in the Styles sidebar
​https://bugs.webkit.org/show_bug.cgi?id=145536

Patch by Devin Rousso <Devin Rousso> on 2015-06-18
Reviewed by Timothy Hatcher.

• UserInterface/Base/Utilities.js: Added function to Strings that returns an array of all matching indexes of a given string.

(.value):

• UserInterface/Views/CSSStyleDeclarationSection.js:

(WebInspector.CSSStyleDeclarationSection):
(WebInspector.CSSStyleDeclarationSection.prototype.refresh.appendSelector):
(WebInspector.CSSStyleDeclarationSection.prototype.findMatchingPropertiesAndSelectors): Loops through the property list and selectors of each section to find matches to the filtered text.

• UserInterface/Views/CSSStyleDeclarationTextEditor.js:

(WebInspector.CSSStyleDeclarationTextEditor.prototype.findMatchingProperties): Searches through the properties list to find and highlight all matching properties.
(WebInspector.CSSStyleDeclarationTextEditor.prototype.removeNonMatchingProperties): Removes all properties that do not match and highlights the specific matched text in matching properties.
(WebInspector.CSSStyleDeclarationTextEditor.prototype.resetFilteredProperties): Restores all properties to full visibility and removes any highlighting.
(WebInspector.CSSStyleDeclarationTextEditor.prototype._createTextMarkerForPropertyIfNeeded): Classes are added to selections of the text editor of that partiular selection contains text which matches the filter (see CSSStyleDetailsSidebarPanel.css for different classes).
(WebInspector.CSSStyleDeclarationTextEditor.prototype._iterateOverProperties): If a filter is active, find properties matching the filter instead of all properties.

• UserInterface/Views/CSSStyleDetailsSidebarPanel.css:

(.sidebar > .panel.details.css-style > .content.has-filter-bar + .filter-bar):
(.sidebar > .panel.details.css-style > .content:not(.has-filter-bar) + .filter-bar):

• UserInterface/Views/CSSStyleDetailsSidebarPanel.js:

(WebInspector.CSSStyleDetailsSidebarPanel): Added a filter bar to the CSS sidebar.
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._switchPanels): Switching panels preserves and applies filter bar text.
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._filterDidChange): Function called when the filter bar text changes that calls the current panel's filterDidChange function if it exists.

• UserInterface/Views/FilterBar.js: Added function and variable to check if the text in the filter bar had changed.
• UserInterface/Views/MetricsStyleDetailsPanel.js:

(WebInspector.MetricsStyleDetailsPanel.prototype.refresh): Now calls superclass refresh.
(WebInspector.MetricsStyleDetailsPanel): Added delegate variable to constructor.

• UserInterface/Views/RulesStyleDetailsPanel.css:

(.sidebar > .panel.details.css-style > .content.filter-in-progress .label):
(.sidebar > .panel.details.css-style > .content.filter-in-progress .label ~ .label):
(.sidebar > .panel.details.css-style > .content.filter-in-progress .label.filter-matching-label):
(.sidebar > .panel.details.css-style > .content.filter-in-progress .new-rule):
(.sidebar > .panel.details.css-style > .content.filter-in-progress .style-declaration-section:not(.filter-section-non-matching) ~ .label:not(.filter-section-non-matching)):
(.sidebar > .panel.details.css-style > .content:not(.filter-in-progress) > .rules > .new-rule + .style-declaration-section):
(.sidebar > .panel.details.css-style > .content > .rules:not(.filter-non-matching) > .no-filter-results):
(.sidebar > .panel.details.css-style > .content.filter-in-progress > .rules.filter-non-matching > .no-filter-results):
(.sidebar > .panel.details.css-style > .content.filter-in-progress > .rules.filter-non-matching > .no-filter-results > .no-filter-results-message):

• UserInterface/Views/RulesStyleDetailsPanel.js:

(WebInspector.RulesStyleDetailsPanel): Added delegate variable to constructor.
(WebInspector.RulesStyleDetailsPanel.prototype.refresh): Now calls superclass refresh.
(WebInspector.RulesStyleDetailsPanel.prototype.filterDidChange): Function to search through the computed styles list and highlight all matched properties and selectors of the filter bar text, turning all non matching properties slightly opaque (unless a selector for that property is a match).
(WebInspector.StyleDetailsPanel): Added delegate variable to constructor.
(WebInspector.StyleDetailsPanel.prototype.refresh): Added event dispatch for panel refresh.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• Localizations/en.lproj/localizedStrings.js (modified) (3 diffs)
• UserInterface/Base/Utilities.js (modified) (1 diff)
• UserInterface/Views/CSSStyleDeclarationSection.js (modified) (4 diffs)
• UserInterface/Views/CSSStyleDeclarationTextEditor.js (modified) (5 diffs)
• UserInterface/Views/CSSStyleDetailsSidebarPanel.css (modified) (2 diffs)
• UserInterface/Views/CSSStyleDetailsSidebarPanel.js (modified) (4 diffs)
• UserInterface/Views/ComputedStyleDetailsPanel.js (modified) (2 diffs)
• UserInterface/Views/FilterBar.js (modified) (3 diffs)
• UserInterface/Views/MetricsStyleDetailsPanel.js (modified) (2 diffs)
• UserInterface/Views/RulesStyleDetailsPanel.css (modified) (2 diffs)
• UserInterface/Views/RulesStyleDetailsPanel.js (modified) (8 diffs)
• UserInterface/Views/StyleDetailsPanel.js (modified) (3 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2015-06-18  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Add a filter for CSS properties in the Styles sidebar
+        https://bugs.webkit.org/show_bug.cgi?id=145536
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Base/Utilities.js: Added function to Strings that returns an array of all matching indexes of a given string.
+        (.value):
+        * UserInterface/Views/CSSStyleDeclarationSection.js:
+        (WebInspector.CSSStyleDeclarationSection):
+        (WebInspector.CSSStyleDeclarationSection.prototype.refresh.appendSelector):
+        (WebInspector.CSSStyleDeclarationSection.prototype.findMatchingPropertiesAndSelectors): Loops through the property list and selectors of each section to find matches to the filtered text.
+        * UserInterface/Views/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.findMatchingProperties): Searches through the properties list to find and highlight all matching properties.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.removeNonMatchingProperties): Removes all properties that do not match and highlights the specific matched text in matching properties.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.resetFilteredProperties): Restores all properties to full visibility and removes any highlighting.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._createTextMarkerForPropertyIfNeeded): Classes are added to selections of the text editor of that partiular selection contains text which matches the filter (see CSSStyleDetailsSidebarPanel.css for different classes).
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._iterateOverProperties): If a filter is active, find properties matching the filter instead of all properties.
+        * UserInterface/Views/CSSStyleDetailsSidebarPanel.css:
+        (.sidebar > .panel.details.css-style > .content.has-filter-bar + .filter-bar):
+        (.sidebar > .panel.details.css-style > .content:not(.has-filter-bar) + .filter-bar):
+        * UserInterface/Views/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel): Added a filter bar to the CSS sidebar.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._switchPanels): Switching panels preserves and applies filter bar text.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._filterDidChange): Function called when the filter bar text changes that calls the current panel's filterDidChange function if it exists.
+        * UserInterface/Views/FilterBar.js: Added function and variable to check if the text in the filter bar had changed.
+        * UserInterface/Views/MetricsStyleDetailsPanel.js:
+        (WebInspector.MetricsStyleDetailsPanel.prototype.refresh): Now calls superclass refresh.
+        (WebInspector.MetricsStyleDetailsPanel): Added delegate variable to constructor.
+        * UserInterface/Views/RulesStyleDetailsPanel.css:
+        (.sidebar > .panel.details.css-style > .content.filter-in-progress .label):
+        (.sidebar > .panel.details.css-style > .content.filter-in-progress .label ~ .label):
+        (.sidebar > .panel.details.css-style > .content.filter-in-progress .label.filter-matching-label):
+        (.sidebar > .panel.details.css-style > .content.filter-in-progress .new-rule):
+        (.sidebar > .panel.details.css-style > .content.filter-in-progress .style-declaration-section:not(.filter-section-non-matching) ~ .label:not(.filter-section-non-matching)):
+        (.sidebar > .panel.details.css-style > .content:not(.filter-in-progress) > .rules > .new-rule + .style-declaration-section):
+        (.sidebar > .panel.details.css-style > .content > .rules:not(.filter-non-matching) > .no-filter-results):
+        (.sidebar > .panel.details.css-style > .content.filter-in-progress > .rules.filter-non-matching > .no-filter-results):
+        (.sidebar > .panel.details.css-style > .content.filter-in-progress > .rules.filter-non-matching > .no-filter-results > .no-filter-results-message):
+        * UserInterface/Views/RulesStyleDetailsPanel.js:
+        (WebInspector.RulesStyleDetailsPanel): Added delegate variable to constructor.
+        (WebInspector.RulesStyleDetailsPanel.prototype.refresh): Now calls superclass refresh.
+        (WebInspector.RulesStyleDetailsPanel.prototype.filterDidChange): Function to search through the computed styles list and highlight all matched properties and selectors of the filter bar text, turning all non matching properties slightly opaque (unless a selector for that property is a match).
+        (WebInspector.StyleDetailsPanel): Added delegate variable to constructor.
+        (WebInspector.StyleDetailsPanel.prototype.refresh): Added event dispatch for panel refresh.
+
 2015-06-18  Devin Rousso  <drousso@apple.com>
 

trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

@@ -128 +128 @@
 localizedStrings["Copy Path to Property"] = "Copy Path to Property";
 localizedStrings["Copy Row"] = "Copy Row";
-localizedStrings["Copy gs["New TaCopy = "New Tab";
-localizedStrCopy as HTML"] = "Copy as HTML";
+localizedStrings["Copy Rule"] = "Copy Rule";
+localizedStrings["Copy as HTML"] = "Copy as HTML";
 localizedStrings["Could not fetch properties. Object may no longer exist."] = "Could not fetch properties. Object may no longer exist.";
 localizedStrings["Create a new tab"] = "Create a new tab";
@@ -226 +226 @@
 localizedStrings["Filter Search Results"] = "Filter Search Results";
 localizedStrings["Filter Storage List"] = "Filter Storage List";
+localizedStrings["Filter Styles"] = "Filter Styles";
 localizedStrings["Flows"] = "Flows";
 localizedStrings["Focused"] = "Focused";
@@ -338 +339 @@
 localizedStrings["No Request Headers"] = "No Request Headers";
 localizedStrings["No Response Headers"] = "No Response Headers";
+localizedStrings["No Results Found"] = "No Results Found";
 localizedStrings["No Search Results"] = "No Search Results";
 localizedStrings["No exact ARIA role match."] = "No exact ARIA role match.";

trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js

@@ -749 +749 @@
 });
 
+Object.defineProperty(String.prototype, "getMatchingIndexes",
+{
+    value: function(needle)
+    {
+        var indexesOfNeedle = [];
+        var index = this.indexOf(needle);
+
+        while (index >= 0) {
+            indexesOfNeedle.push(index);
+            index = this.indexOf(needle, index + 1);
+        }
+
+        return indexesOfNeedle;
+    }
+});
+
 Object.defineProperty(Number, "constrain",
 {

trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js

@@ -33 +33 @@
     console.assert(style);
     this._style = style || null;
+    this._selectorElements = [];
 
     this._element = document.createElement("div");
@@ -165 +166 @@
         this._selectorElement.removeChildren();
         this._originElement.removeChildren();
+        this._selectorElements = [];
 
         this._originElement.appendChild(document.createTextNode(" \u2014 "));
@@ -197 +199 @@
 
             this._selectorElement.appendChild(selectorElement);
+            this._selectorElements.push(selectorElement);
         }
 
@@ -275 +278 @@
     },
 
+    findMatchingPropertiesAndSelectors: function(needle)
+    {
+        this._element.classList.remove(WebInspector.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName, WebInspector.CSSStyleDetailsSidebarPanel.FilterMatchingSectionHasLabelClassName);
+
+        var hasMatchingSelector = false;
+
+        for (var selectorElement of this._selectorElements) {
+            selectorElement.classList.remove(WebInspector.CSSStyleDetailsSidebarPanel.FilterMatchSectionClassName);
+
+            if (needle && selectorElement.textContent.includes(needle)) {
+                selectorElement.classList.add(WebInspector.CSSStyleDetailsSidebarPanel.FilterMatchSectionClassName);
+                hasMatchingSelector = true;
+            }
+        }
+
+        if (!needle) {
+            this._propertiesTextEditor.resetFilteredProperties();
+            return false;
+        }
+
+        var hasMatchingProperty = this._propertiesTextEditor.findMatchingProperties(needle);
+
+        if (!hasMatchingProperty && !hasMatchingSelector) {
+            this._element.classList.add(WebInspector.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName);
+            return false;
+        }
+
+        return true;
+    },
+
     updateLayout: function()
     {

trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js

@@ -37 +37 @@
         this._showsImplicitProperties = true;
         this._alwaysShowPropertyNames = {};
+        this._filterResultPropertyNames = null;
         this._sortProperties = false;
 
@@ -230 +231 @@
     }
 
+    findMatchingProperties(needle)
+    {
+        if (!needle) {
+            this.resetFilteredProperties();
+            return false;
+        }
+
+        var propertiesList = this._style.visibleProperties.length ? this._style.visibleProperties : this._style.properties;
+        var matchingProperties = [];
+
+        for (var property of propertiesList)
+            matchingProperties.push(property.text.includes(needle));
+
+        if (!matchingProperties.includes(true)) {
+            this.resetFilteredProperties();
+            return false;
+        }
+
+        for (var i = 0; i < matchingProperties.length; ++i) {
+            var property = propertiesList[i];
+
+            if (matchingProperties[i])
+                property.__filterResultClassName = WebInspector.CSSStyleDetailsSidebarPanel.FilterMatchSectionClassName;
+            else
+                property.__filterResultClassName = WebInspector.CSSStyleDetailsSidebarPanel.NoFilterMatchInPropertyClassName;
+
+            this._updateTextMarkerForPropertyIfNeeded(property);
+        }
+
+        return true;
+    }
+
+    resetFilteredProperties()
+    {
+        var propertiesList = this._style.visibleProperties.length ? this._style.visibleProperties : this._style.properties;
+
+        for (var property of propertiesList) {
+            if (property.__filterResultClassName) {
+                property.__filterResultClassName = null;
+                this._updateTextMarkerForPropertyIfNeeded(property)
+            }
+        }
+    }
+
+    removeNonMatchingProperties(needle)
+    {
+        this._filterResultPropertyNames = null;
+
+        if (!needle) {
+            this._resetContent();
+            return false;
+        }
+
+        var matchingPropertyNames = [];
+
+        for (var property of this._style.properties) {
+            var indexesOfNeedle = property.text.getMatchingIndexes(needle);
+
+            if (indexesOfNeedle.length) {
+                matchingPropertyNames.push(property.name);
+                property.__filterResultClassName = WebInspector.CSSStyleDetailsSidebarPanel.FilterMatchSectionClassName;
+                property.__filterResultNeedlePosition = {start: indexesOfNeedle, length: needle.length};
+            }
+        }
+
+        this._filterResultPropertyNames = matchingPropertyNames.length ? matchingPropertyNames.keySet() : {};
+
+        this._resetContent();
+
+        return matchingPropertyNames.length > 0;
+    }
+
     // Protected
 
@@ -528 +601 @@
             classNames.push("disabled");
 
+        if (property.__filterResultClassName && !property.__filterResultNeedlePosition)
+            classNames.push(property.__filterResultClassName);
+
         var classNamesString = classNames.join(" ");
 
@@ -559 +635 @@
             this._codeMirror.markText(start, end, {className: "invalid"});
         }
+
+        if (property.__filterResultClassName && property.__filterResultNeedlePosition) {
+            for (var needlePosition of property.__filterResultNeedlePosition.start) {
+                var start = {line: from.line, ch: needlePosition};
+                var end = {line: to.line, ch: start.ch + property.__filterResultNeedlePosition.length};
+
+                this._codeMirror.markText(start, end, {className: property.__filterResultClassName});
+            }
+        }
     }
 
@@ -598 +683 @@
         var properties = onlyVisibleProperties ? this._style.visibleProperties : this._style.properties;
 
-        if (!onlyVisibleProperties) {
+        if (this._filterResultPropertyNames) {
+            properties = properties.filter(function(property) {
+                return (!property.implicit || this._showsImplicitProperties) && property.name in this._filterResultPropertyNames;
+            }, this);
+
+            if (this._sortProperties)
+                properties.sort(function(a, b) { return a.name.localeCompare(b.name); });
+        } else if (!onlyVisibleProperties) {
             // Filter based on options only when all properties are used.
             properties = properties.filter(function(property) {

trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css

@@ -43 +43 @@
 }
 
+.sidebar > .panel.details.css-style > .content.has-filter-bar {
+    bottom: 28px;
+}
+
 .sidebar > .panel.details.css-style > .content > .pseudo-classes {
     padding: 10px;
@@ -69 +73 @@
     white-space: nowrap;
 }
+
+.sidebar > .panel.details.css-style > .content.has-filter-bar + .filter-bar {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    background-color: white;
+    border-top: 1px solid rgb(179, 179, 179);
+}
+
+.sidebar > .panel.details.css-style > .content:not(.has-filter-bar) + .filter-bar {
+    display: none;
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress .filter-matching {
+    display: inline;
+    background-color: rgba(235, 215, 38, 0.5);
+    border-bottom: 1px solid rgb(237, 202, 71);
+    opacity: 1;
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress .style-declaration-section {
+    margin-bottom: 0;
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress .style-declaration-section.last-in-group.filter-section-non-matching + .style-declaration-section.filter-section-has-label {
+    margin-top: 0;
+    border-top: none;
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress .style-declaration-section:not(.filter-section-has-label) {
+    margin-top: 0;
+    border-top: none;
+    border-bottom: 1px solid rgb(179, 179, 179);
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress .style-declaration-section > .header > .selector > .filter-matching {
+    color: black;
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress .filter-section-non-matching {
+    display: none;
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress .filter-property-non-matching {
+    opacity: 0.5;
+}

trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js

@@ -72 +72 @@
 
         this._computedStyleDetailsPanel = new WebInspector.ComputedStyleDetailsPanel(this);
-        this._rulesStyleDetailsPanel = new WebInspector.RulesStyleDetailsPanel;
-        this._metricsStyleDetailsPanel = new WebInspector.MetricsStyleDetailsPanel;
+        this._rulesStyleDetailsPanel = new WebInspector.RulesStyleDetailsPanel(this);
+        this._metricsStyleDetailsPanel = new WebInspector.MetricsStyleDetailsPanel(this);
+
+        this._computedStyleDetailsPanel.addEventListener(WebInspector.StyleDetailsPanel.Event.Refreshed, this._filterDidChange, this);
+        this._rulesStyleDetailsPanel.addEventListener(WebInspector.StyleDetailsPanel.Event.Refreshed, this._filterDidChange, this);
 
         this._panels = [this._computedStyleDetailsPanel, this._rulesStyleDetailsPanel, this._metricsStyleDetailsPanel];
@@ -85 +88 @@
         // This will cause the selected panel to be set in _navigationItemSelected.
         this._navigationBar.selectedNavigationItem = this._lastSelectedSectionSetting.value;
+
+        this._filterBar = new WebInspector.FilterBar;
+        this._filterBar.placeholder = WebInspector.UIString("Filter Styles");
+        this._filterBar.addEventListener(WebInspector.FilterBar.Event.FilterDidChange, this._filterDidChange, this);
+        this.element.appendChild(this._filterBar.element);
     }
 
@@ -212 +220 @@
                 this.contentElement.scrollTop = this._initialScrollOffset;
 
+            var hasFilter = typeof this._selectedPanel.filterDidChange === "function";
+            this.contentElement.classList.toggle("has-filter-bar", hasFilter);
+            if (this._filterBar)
+                this.contentElement.classList.toggle(WebInspector.CSSStyleDetailsSidebarPanel.FilterInProgressClassName, hasFilter && this._filterBar.hasActiveFilters());
+
             this._selectedPanel.shown();
         }
@@ -238 +251 @@
         }
     }
+
+    _filterDidChange()
+    {
+        this.contentElement.classList.toggle(WebInspector.CSSStyleDetailsSidebarPanel.FilterInProgressClassName, this._filterBar.hasActiveFilters());
+
+        this._selectedPanel.filterDidChange(this._filterBar);
+    }
 };
 
 WebInspector.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset = 38; // Default height of the forced pseudo classes container. Updated in widthDidChange.
+WebInspector.CSSStyleDetailsSidebarPanel.FilterInProgressClassName = "filter-in-progress";
+WebInspector.CSSStyleDetailsSidebarPanel.FilterMatchingSectionHasLabelClassName = "filter-section-has-label";
+WebInspector.CSSStyleDetailsSidebarPanel.FilterMatchSectionClassName = "filter-matching";
+WebInspector.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName = "filter-section-non-matching";
+WebInspector.CSSStyleDetailsSidebarPanel.NoFilterMatchInPropertyClassName = "filter-property-non-matching";
+

trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js

@@ -28 +28 @@
     constructor(delegate)
     {
-        super(WebInspector.ComputedStyleDetailsPanel.StyleClassName, "computed", WebInspector.UIString("Computed"));
-
-        this._delegate = delegate || null;
+        super(delegate, WebInspector.ComputedStyleDetailsPanel.StyleClassName, "computed", WebInspector.UIString("Computed"));
 
         this._computedStyleShowAllSetting = new WebInspector.Setting("computed-style-show-all", false);
@@ -154 +152 @@
         this._propertiesTextEditor.style = this.nodeStyles.computedStyle;
         this._refreshFlowDetails(this.nodeStyles.node);
+
+        super.refresh();
+    }
+
+    filterDidChange(filterBar)
+    {
+        this._propertiesTextEditor.removeNonMatchingProperties(filterBar.filters.text);
     }
 

trunk/Source/WebInspectorUI/UserInterface/Views/FilterBar.js

@@ -44 +44 @@
         this._inputField.addEventListener("search", this._handleFilterChanged.bind(this), false);
         this._element.appendChild(this._inputField);
+
+        this._lastFilterValue = this.filters;
     }
 
@@ -100 +102 @@
     }
 
+    hasFilterChanged()
+    {
+        var currentFunctions = this.filters.functions;
+
+        if (this._lastFilterValue.text !== this._inputField.value || this._lastFilterValue.functions.length !== currentFunctions.length)
+            return true;
+
+        for (var i = 0; i < currentFunctions.length; ++i) {
+            if (this._lastFilterValue.functions[i] !== currentFunctions[i])
+                return true;
+        }
+
+        return false;
+    }
+
     // Private
 
@@ -120 +137 @@
     _handleFilterChanged()
     {
-        this.dispatchEventToListeners(WebInspector.FilterBar.Event.FilterDidChange);
+        if (this.hasFilterChanged()) {
+            this._lastFilterValue = this.filters;
+            this.dispatchEventToListeners(WebInspector.FilterBar.Event.FilterDidChange);
+        }
     }
 };

trunk/Source/WebInspectorUI/UserInterface/Views/MetricsStyleDetailsPanel.js

@@ -26 +26 @@
 WebInspector.MetricsStyleDetailsPanel = class MetricsStyleDetailsPanel extends WebInspector.StyleDetailsPanel
 {
-    constructor()
+    constructor(delegate)
     {
-        super("metrics", "metrics", WebInspector.UIString("Metrics"));
+        super(delegate, "metrics", "metrics", WebInspector.UIString("Metrics"));
 
         this._boxModelDiagramRow = new WebInspector.BoxModelDetailsSectionRow;
@@ -43 +43 @@
     {
         this._boxModelDiagramRow.nodeStyles = this.nodeStyles;
+
+        super.refresh();
     }
 };

trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.css

@@ -53 +53 @@
 }
 
-.sidebar > .panel.details.css-style .rules .new-rule + .style-declaration-section {
+.sidebar > .panel.details.css-style > .content.filter-in-progress .label {
+    padding-top: 15px;
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress .label ~ .label {
+    padding-top: 0;
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress .label.filter-matching-label {
+    padding-bottom: 5px;
+    border-bottom: 1px solid rgb(179, 179, 179);
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress .new-rule {
+    display: none;
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress .style-declaration-section:not(.filter-section-non-matching) ~ .label:not(.filter-section-non-matching) {
+    padding-top: 15px;
+}
+
+.sidebar > .panel.details.css-style > .content:not(.filter-in-progress) > .rules > .new-rule + .style-declaration-section {
+    border-top: 1px solid rgb(179, 179, 179);
+}
+
+.sidebar > .panel.details.css-style > .content:not(.filter-in-progress) > .rules > .new-rule + .label {
+    padding-top: 10px;
     border-top: 1px solid rgb(179, 179, 179);
 }
@@ -75 +101 @@
     opacity: 0.7;
 }
+
+.sidebar > .panel.details.css-style > .content > .rules:not(.filter-non-matching) > .no-filter-results {
+    display: none;
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress > .rules.filter-non-matching > .no-filter-results {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress > .rules.filter-non-matching > .no-filter-results > .no-filter-results-message {
+    font-size: 13px;
+    color: white;
+    background-color: rgba(0, 0, 0, 0.15);
+    text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0;
+    box-shadow: inset rgba(0, 0, 0, 0.2) 0 1px 0, rgba(255, 255, 255, 0.4) 0 1px 0;
+    border-radius: 6px;
+    padding: 5px 15px 6px;
+}

trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js

@@ -26 +26 @@
 WebInspector.RulesStyleDetailsPanel = class RulesStyleDetailsPanel extends WebInspector.StyleDetailsPanel
 {
-    constructor()
-    {
-        super("rules", "rules", WebInspector.UIString("Rules"));
+    constructor(delegate)
+    {
+        super(delegate, "rules", "rules", WebInspector.UIString("Rules"));
 
         this._sections = [];
         this._previousFocusedSection = null;
+        this._ruleMediaAndInherticanceList = [];
         this._propertyToSelectAndHighlight = null;
+
+        this._emptyFilterResultsElement = document.createElement("div");
+        this._emptyFilterResultsElement.classList.add("no-filter-results");
+
+        this._emptyFilterResultsMessage = document.createElement("div");
+        this._emptyFilterResultsMessage.classList.add("no-filter-results-message");
+        this._emptyFilterResultsMessage.textContent = WebInspector.UIString("No Results Found");
+        this._emptyFilterResultsElement.appendChild(this._emptyFilterResultsMessage);
     }
 
@@ -41 +50 @@
         // We only need to do a rebuild on significant changes. Other changes are handled
         // by the sections and text editors themselves.
-        if (!significantChange)
+        if (!significantChange) {
+            super.refresh();
             return;
+        }
 
         var newSections = [];
@@ -171 +182 @@
 
         var addedNewRuleButton = false;
+        this._ruleMediaAndInherticanceList = [];
 
         var orderedStyles = uniqueOrderedStyles(this.nodeStyles.orderedStyles);
         for (var i = 0; i < orderedStyles.length; ++i) {
             var style = orderedStyles[i];
+
+            var hasMediaOrInherited = [];
 
             if (style.type === WebInspector.CSSStyleDeclaration.Type.Rule && !addedNewRuleButton)
@@ -190 +204 @@
                 inheritedLabel.appendChild(WebInspector.linkifyNodeReference(style.node));
                 newDOMFragment.appendChild(inheritedLabel);
+
+                hasMediaOrInherited.push(inheritedLabel);
             }
 
@@ -219 +235 @@
 
                     newDOMFragment.appendChild(mediaLabel);
+
+                    hasMediaOrInherited.push(mediaLabel);
                 }
             }
+
+            if (!hasMediaOrInherited.length && previousSection && !previousSection.lastInGroup)
+                hasMediaOrInherited = this._ruleMediaAndInherticanceList.lastValue;
+
+            this._ruleMediaAndInherticanceList.push(hasMediaOrInherited);
 
             appendStyleSection.call(this, style);
@@ -233 +256 @@
         this.element.removeChildren();
         this.element.appendChild(newDOMFragment);
+        this.element.appendChild(this._emptyFilterResultsElement);
 
         this._sections = newSections;
@@ -238 +262 @@
         for (var i = 0; i < this._sections.length; ++i)
             this._sections[i].updateLayout();
+
+        super.refresh();
     }
 
@@ -261 +287 @@
                 section.clearSelection();
         }
+    }
+
+    filterDidChange(filterBar)
+    {
+        for (var labels of this._ruleMediaAndInherticanceList) {
+            for (var i = 0; i < labels.length; ++i) {
+                labels[i].classList.toggle(WebInspector.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName, filterBar.hasActiveFilters());
+
+                if (i === labels.length - 1)
+                    labels[i].classList.toggle("filter-matching-label", filterBar.hasActiveFilters());
+            }
+        }
+
+        var matchFound = !filterBar.hasActiveFilters();
+        for (var i = 0; i < this._sections.length; ++i) {
+            var section = this._sections[i];
+
+            if (section.findMatchingPropertiesAndSelectors(filterBar.filters.text) && filterBar.hasActiveFilters()) {
+                if (this._ruleMediaAndInherticanceList[i].length) {
+                    for (var label of this._ruleMediaAndInherticanceList[i])
+                        label.classList.remove(WebInspector.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName);
+                } else
+                    section.element.classList.add(WebInspector.CSSStyleDetailsSidebarPanel.FilterMatchingSectionHasLabelClassName);
+                
+                matchFound = true;
+            }
+        }
+
+        this.element.classList.toggle("filter-non-matching", !matchFound);
     }
 

trunk/Source/WebInspectorUI/UserInterface/Views/StyleDetailsPanel.js

@@ -26 +26 @@
 WebInspector.StyleDetailsPanel = class StyleDetailsPanel extends WebInspector.Object
 {
-    constructor(className, identifier, label)
+    constructor(delegate, className, identifier, label)
     {
         super();
+
+        this._delegate = delegate || null;
 
         this._element = document.createElement("div");
@@ -110 +112 @@
     {
         // Implemented by subclasses.
+        this.dispatchEventToListeners(WebInspector.StyleDetailsPanel.Event.Refreshed);
     }
 
@@ -161 +164 @@
     }
 };
+
+WebInspector.StyleDetailsPanel.Event = {
+    Refreshed: "style-details-panel-refreshed"
+};