<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[185723] trunk/Source/WebInspectorUI</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/185723">185723</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2015-06-18 15:24:37 -0700 (Thu, 18 Jun 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>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 <drousso@apple.com> 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.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs">trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceBaseUtilitiesjs">trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationSectionjs">trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationTextEditorjs">trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDetailsSidebarPanelcss">trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsComputedStyleDetailsPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsFilterBarjs">trunk/Source/WebInspectorUI/UserInterface/Views/FilterBar.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsMetricsStyleDetailsPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/MetricsStyleDetailsPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsRulesStyleDetailsPanelcss">trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsRulesStyleDetailsPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsStyleDetailsPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/StyleDetailsPanel.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (185722 => 185723)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2015-06-18 22:07:15 UTC (rev 185722)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-06-18 22:24:37 UTC (rev 185723)
</span><span class="lines">@@ -1,5 +1,52 @@
</span><span class="cx"> 2015-06-18 Devin Rousso <drousso@apple.com>
</span><span class="cx">
</span><ins>+ 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>
+
</ins><span class="cx"> Web Inspector: Ability to Copy entire CSS Rule from Styles Sidebar
</span><span class="cx"> https://bugs.webkit.org/show_bug.cgi?id=138812
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (185722 => 185723)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2015-06-18 22:07:15 UTC (rev 185722)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2015-06-18 22:24:37 UTC (rev 185723)
</span><span class="lines">@@ -127,8 +127,8 @@
</span><span class="cx"> localizedStrings["Cookies"] = "Cookies";
</span><span class="cx"> localizedStrings["Copy Path to Property"] = "Copy Path to Property";
</span><span class="cx"> localizedStrings["Copy Row"] = "Copy Row";
</span><del>-localizedStrings["Copy gs["New TaCopy = "New Tab";
-localizedStrCopy as HTML"] = "Copy as HTML";
</del><ins>+localizedStrings["Copy Rule"] = "Copy Rule";
+localizedStrings["Copy as HTML"] = "Copy as HTML";
</ins><span class="cx"> localizedStrings["Could not fetch properties. Object may no longer exist."] = "Could not fetch properties. Object may no longer exist.";
</span><span class="cx"> localizedStrings["Create a new tab"] = "Create a new tab";
</span><span class="cx"> localizedStrings["Data"] = "Data";
</span><span class="lines">@@ -225,6 +225,7 @@
</span><span class="cx"> localizedStrings["Filter Resource List"] = "Filter Resource List";
</span><span class="cx"> localizedStrings["Filter Search Results"] = "Filter Search Results";
</span><span class="cx"> localizedStrings["Filter Storage List"] = "Filter Storage List";
</span><ins>+localizedStrings["Filter Styles"] = "Filter Styles";
</ins><span class="cx"> localizedStrings["Flows"] = "Flows";
</span><span class="cx"> localizedStrings["Focused"] = "Focused";
</span><span class="cx"> localizedStrings["Font"] = "Font";
</span><span class="lines">@@ -337,6 +338,7 @@
</span><span class="cx"> localizedStrings["No Query Parameters"] = "No Query Parameters";
</span><span class="cx"> localizedStrings["No Request Headers"] = "No Request Headers";
</span><span class="cx"> localizedStrings["No Response Headers"] = "No Response Headers";
</span><ins>+localizedStrings["No Results Found"] = "No Results Found";
</ins><span class="cx"> localizedStrings["No Search Results"] = "No Search Results";
</span><span class="cx"> localizedStrings["No exact ARIA role match."] = "No exact ARIA role match.";
</span><span class="cx"> localizedStrings["No message"] = "No message";
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceBaseUtilitiesjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js (185722 => 185723)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js 2015-06-18 22:07:15 UTC (rev 185722)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js 2015-06-18 22:24:37 UTC (rev 185723)
</span><span class="lines">@@ -748,6 +748,22 @@
</span><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><ins>+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;
+ }
+});
+
</ins><span class="cx"> Object.defineProperty(Number, "constrain",
</span><span class="cx"> {
</span><span class="cx"> value: function(num, min, max)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationSectionjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js (185722 => 185723)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js 2015-06-18 22:07:15 UTC (rev 185722)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js 2015-06-18 22:24:37 UTC (rev 185723)
</span><span class="lines">@@ -32,6 +32,7 @@
</span><span class="cx">
</span><span class="cx"> console.assert(style);
</span><span class="cx"> this._style = style || null;
</span><ins>+ this._selectorElements = [];
</ins><span class="cx">
</span><span class="cx"> this._element = document.createElement("div");
</span><span class="cx"> this._element.className = "style-declaration-section";
</span><span class="lines">@@ -164,6 +165,7 @@
</span><span class="cx"> {
</span><span class="cx"> this._selectorElement.removeChildren();
</span><span class="cx"> this._originElement.removeChildren();
</span><ins>+ this._selectorElements = [];
</ins><span class="cx">
</span><span class="cx"> this._originElement.appendChild(document.createTextNode(" \u2014 "));
</span><span class="cx">
</span><span class="lines">@@ -196,6 +198,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this._selectorElement.appendChild(selectorElement);
</span><ins>+ this._selectorElements.push(selectorElement);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function appendSelectorTextKnownToMatch(selectorText)
</span><span class="lines">@@ -274,6 +277,36 @@
</span><span class="cx"> return false;
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ 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;
+ },
+
</ins><span class="cx"> updateLayout: function()
</span><span class="cx"> {
</span><span class="cx"> this._propertiesTextEditor.updateLayout();
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationTextEditorjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js (185722 => 185723)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js 2015-06-18 22:07:15 UTC (rev 185722)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js 2015-06-18 22:24:37 UTC (rev 185723)
</span><span class="lines">@@ -36,6 +36,7 @@
</span><span class="cx">
</span><span class="cx"> this._showsImplicitProperties = true;
</span><span class="cx"> this._alwaysShowPropertyNames = {};
</span><ins>+ this._filterResultPropertyNames = null;
</ins><span class="cx"> this._sortProperties = false;
</span><span class="cx">
</span><span class="cx"> this._prefixWhitespace = "";
</span><span class="lines">@@ -229,6 +230,78 @@
</span><span class="cx"> this._codeMirror.setCursor({line: 0, ch: 0});
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ 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;
+ }
+
</ins><span class="cx"> // Protected
</span><span class="cx">
</span><span class="cx"> didDismissPopover(popover)
</span><span class="lines">@@ -527,6 +600,9 @@
</span><span class="cx"> if (!property.enabled)
</span><span class="cx"> classNames.push("disabled");
</span><span class="cx">
</span><ins>+ if (property.__filterResultClassName && !property.__filterResultNeedlePosition)
+ classNames.push(property.__filterResultClassName);
+
</ins><span class="cx"> var classNamesString = classNames.join(" ");
</span><span class="cx">
</span><span class="cx"> // If there is already a text marker and it's in the same document, then try to avoid recreating it.
</span><span class="lines">@@ -558,6 +634,15 @@
</span><span class="cx">
</span><span class="cx"> this._codeMirror.markText(start, end, {className: "invalid"});
</span><span class="cx"> }
</span><ins>+
+ 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});
+ }
+ }
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _clearTextMarkers(nonatomic, all)
</span><span class="lines">@@ -597,7 +682,14 @@
</span><span class="cx"> {
</span><span class="cx"> var properties = onlyVisibleProperties ? this._style.visibleProperties : this._style.properties;
</span><span class="cx">
</span><del>- if (!onlyVisibleProperties) {
</del><ins>+ 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) {
</ins><span class="cx"> // Filter based on options only when all properties are used.
</span><span class="cx"> properties = properties.filter(function(property) {
</span><span class="cx"> return !property.implicit || this._showsImplicitProperties || property.canonicalName in this._alwaysShowPropertyNames;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDetailsSidebarPanelcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css (185722 => 185723)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css 2015-06-18 22:07:15 UTC (rev 185722)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css 2015-06-18 22:24:37 UTC (rev 185723)
</span><span class="lines">@@ -42,6 +42,10 @@
</span><span class="cx"> overflow-x: hidden;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.sidebar > .panel.details.css-style > .content.has-filter-bar {
+ bottom: 28px;
+}
+
</ins><span class="cx"> .sidebar > .panel.details.css-style > .content > .pseudo-classes {
</span><span class="cx"> padding: 10px;
</span><span class="cx"> border-bottom: 1px solid rgb(179, 179, 179);
</span><span class="lines">@@ -68,3 +72,49 @@
</span><span class="cx"> display: inline-block;
</span><span class="cx"> white-space: nowrap;
</span><span class="cx"> }
</span><ins>+
+.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;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js (185722 => 185723)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js 2015-06-18 22:07:15 UTC (rev 185722)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js 2015-06-18 22:24:37 UTC (rev 185723)
</span><span class="lines">@@ -71,9 +71,12 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this._computedStyleDetailsPanel = new WebInspector.ComputedStyleDetailsPanel(this);
</span><del>- this._rulesStyleDetailsPanel = new WebInspector.RulesStyleDetailsPanel;
- this._metricsStyleDetailsPanel = new WebInspector.MetricsStyleDetailsPanel;
</del><ins>+ this._rulesStyleDetailsPanel = new WebInspector.RulesStyleDetailsPanel(this);
+ this._metricsStyleDetailsPanel = new WebInspector.MetricsStyleDetailsPanel(this);
</ins><span class="cx">
</span><ins>+ this._computedStyleDetailsPanel.addEventListener(WebInspector.StyleDetailsPanel.Event.Refreshed, this._filterDidChange, this);
+ this._rulesStyleDetailsPanel.addEventListener(WebInspector.StyleDetailsPanel.Event.Refreshed, this._filterDidChange, this);
+
</ins><span class="cx"> this._panels = [this._computedStyleDetailsPanel, this._rulesStyleDetailsPanel, this._metricsStyleDetailsPanel];
</span><span class="cx">
</span><span class="cx"> this._navigationBar.addNavigationItem(this._computedStyleDetailsPanel.navigationItem);
</span><span class="lines">@@ -84,6 +87,11 @@
</span><span class="cx">
</span><span class="cx"> // This will cause the selected panel to be set in _navigationItemSelected.
</span><span class="cx"> this._navigationBar.selectedNavigationItem = this._lastSelectedSectionSetting.value;
</span><ins>+
+ 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);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="lines">@@ -211,6 +219,11 @@
</span><span class="cx"> else
</span><span class="cx"> this.contentElement.scrollTop = this._initialScrollOffset;
</span><span class="cx">
</span><ins>+ 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());
+
</ins><span class="cx"> this._selectedPanel.shown();
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -237,6 +250,19 @@
</span><span class="cx"> checkboxElement.checked = enabledPseudoClasses.includes(pseudoClass);
</span><span class="cx"> }
</span><span class="cx"> }
</span><ins>+
+ _filterDidChange()
+ {
+ this.contentElement.classList.toggle(WebInspector.CSSStyleDetailsSidebarPanel.FilterInProgressClassName, this._filterBar.hasActiveFilters());
+
+ this._selectedPanel.filterDidChange(this._filterBar);
+ }
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> WebInspector.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset = 38; // Default height of the forced pseudo classes container. Updated in widthDidChange.
</span><ins>+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";
+
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsComputedStyleDetailsPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js (185722 => 185723)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js 2015-06-18 22:07:15 UTC (rev 185722)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js 2015-06-18 22:24:37 UTC (rev 185723)
</span><span class="lines">@@ -27,10 +27,8 @@
</span><span class="cx"> {
</span><span class="cx"> constructor(delegate)
</span><span class="cx"> {
</span><del>- super(WebInspector.ComputedStyleDetailsPanel.StyleClassName, "computed", WebInspector.UIString("Computed"));
</del><ins>+ super(delegate, WebInspector.ComputedStyleDetailsPanel.StyleClassName, "computed", WebInspector.UIString("Computed"));
</ins><span class="cx">
</span><del>- this._delegate = delegate || null;
-
</del><span class="cx"> this._computedStyleShowAllSetting = new WebInspector.Setting("computed-style-show-all", false);
</span><span class="cx">
</span><span class="cx"> var computedStyleShowAllLabel = document.createElement("label");
</span><span class="lines">@@ -153,8 +151,15 @@
</span><span class="cx"> {
</span><span class="cx"> this._propertiesTextEditor.style = this.nodeStyles.computedStyle;
</span><span class="cx"> this._refreshFlowDetails(this.nodeStyles.node);
</span><ins>+
+ super.refresh();
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+ filterDidChange(filterBar)
+ {
+ this._propertiesTextEditor.removeNonMatchingProperties(filterBar.filters.text);
+ }
+
</ins><span class="cx"> // Protected
</span><span class="cx">
</span><span class="cx"> shown()
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsFilterBarjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/FilterBar.js (185722 => 185723)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/FilterBar.js 2015-06-18 22:07:15 UTC (rev 185722)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/FilterBar.js 2015-06-18 22:24:37 UTC (rev 185723)
</span><span class="lines">@@ -43,6 +43,8 @@
</span><span class="cx"> this._inputField.incremental = true;
</span><span class="cx"> this._inputField.addEventListener("search", this._handleFilterChanged.bind(this), false);
</span><span class="cx"> this._element.appendChild(this._inputField);
</span><ins>+
+ this._lastFilterValue = this.filters;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="lines">@@ -99,6 +101,21 @@
</span><span class="cx"> return !!this._inputField.value || !!this._filterFunctionsMap.size;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ 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;
+ }
+
</ins><span class="cx"> // Private
</span><span class="cx">
</span><span class="cx"> _handleFilterBarButtonClicked(event)
</span><span class="lines">@@ -119,7 +136,10 @@
</span><span class="cx">
</span><span class="cx"> _handleFilterChanged()
</span><span class="cx"> {
</span><del>- this.dispatchEventToListeners(WebInspector.FilterBar.Event.FilterDidChange);
</del><ins>+ if (this.hasFilterChanged()) {
+ this._lastFilterValue = this.filters;
+ this.dispatchEventToListeners(WebInspector.FilterBar.Event.FilterDidChange);
+ }
</ins><span class="cx"> }
</span><span class="cx"> };
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsMetricsStyleDetailsPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/MetricsStyleDetailsPanel.js (185722 => 185723)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/MetricsStyleDetailsPanel.js 2015-06-18 22:07:15 UTC (rev 185722)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/MetricsStyleDetailsPanel.js 2015-06-18 22:24:37 UTC (rev 185723)
</span><span class="lines">@@ -25,9 +25,9 @@
</span><span class="cx">
</span><span class="cx"> WebInspector.MetricsStyleDetailsPanel = class MetricsStyleDetailsPanel extends WebInspector.StyleDetailsPanel
</span><span class="cx"> {
</span><del>- constructor()
</del><ins>+ constructor(delegate)
</ins><span class="cx"> {
</span><del>- super("metrics", "metrics", WebInspector.UIString("Metrics"));
</del><ins>+ super(delegate, "metrics", "metrics", WebInspector.UIString("Metrics"));
</ins><span class="cx">
</span><span class="cx"> this._boxModelDiagramRow = new WebInspector.BoxModelDetailsSectionRow;
</span><span class="cx">
</span><span class="lines">@@ -42,5 +42,7 @@
</span><span class="cx"> refresh()
</span><span class="cx"> {
</span><span class="cx"> this._boxModelDiagramRow.nodeStyles = this.nodeStyles;
</span><ins>+
+ super.refresh();
</ins><span class="cx"> }
</span><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsRulesStyleDetailsPanelcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.css (185722 => 185723)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.css 2015-06-18 22:07:15 UTC (rev 185722)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.css 2015-06-18 22:24:37 UTC (rev 185723)
</span><span class="lines">@@ -52,10 +52,36 @@
</span><span class="cx"> opacity: 0.5;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.sidebar > .panel.details.css-style .rules .new-rule + .style-declaration-section {
</del><ins>+.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 {
</ins><span class="cx"> border-top: 1px solid rgb(179, 179, 179);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.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);
+}
+
</ins><span class="cx"> .sidebar > .panel.details.css-style .rules .new-rule img {
</span><span class="cx"> content: url(../Images/Plus.svg);
</span><span class="cx">
</span><span class="lines">@@ -74,3 +100,28 @@
</span><span class="cx"> .sidebar > .panel.details.css-style .rules .new-rule:active {
</span><span class="cx"> opacity: 0.7;
</span><span class="cx"> }
</span><ins>+
+.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;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsRulesStyleDetailsPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js (185722 => 185723)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js 2015-06-18 22:07:15 UTC (rev 185722)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js 2015-06-18 22:24:37 UTC (rev 185723)
</span><span class="lines">@@ -25,13 +25,22 @@
</span><span class="cx">
</span><span class="cx"> WebInspector.RulesStyleDetailsPanel = class RulesStyleDetailsPanel extends WebInspector.StyleDetailsPanel
</span><span class="cx"> {
</span><del>- constructor()
</del><ins>+ constructor(delegate)
</ins><span class="cx"> {
</span><del>- super("rules", "rules", WebInspector.UIString("Rules"));
</del><ins>+ super(delegate, "rules", "rules", WebInspector.UIString("Rules"));
</ins><span class="cx">
</span><span class="cx"> this._sections = [];
</span><span class="cx"> this._previousFocusedSection = null;
</span><ins>+ this._ruleMediaAndInherticanceList = [];
</ins><span class="cx"> this._propertyToSelectAndHighlight = null;
</span><ins>+
+ 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);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="lines">@@ -40,8 +49,10 @@
</span><span class="cx"> {
</span><span class="cx"> // We only need to do a rebuild on significant changes. Other changes are handled
</span><span class="cx"> // by the sections and text editors themselves.
</span><del>- if (!significantChange)
</del><ins>+ if (!significantChange) {
+ super.refresh();
</ins><span class="cx"> return;
</span><ins>+ }
</ins><span class="cx">
</span><span class="cx"> var newSections = [];
</span><span class="cx"> var newDOMFragment = document.createDocumentFragment();
</span><span class="lines">@@ -170,11 +181,14 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> var addedNewRuleButton = false;
</span><ins>+ this._ruleMediaAndInherticanceList = [];
</ins><span class="cx">
</span><span class="cx"> var orderedStyles = uniqueOrderedStyles(this.nodeStyles.orderedStyles);
</span><span class="cx"> for (var i = 0; i < orderedStyles.length; ++i) {
</span><span class="cx"> var style = orderedStyles[i];
</span><span class="cx">
</span><ins>+ var hasMediaOrInherited = [];
+
</ins><span class="cx"> if (style.type === WebInspector.CSSStyleDeclaration.Type.Rule && !addedNewRuleButton)
</span><span class="cx"> addNewRuleButton.call(this);
</span><span class="cx">
</span><span class="lines">@@ -189,6 +203,8 @@
</span><span class="cx"> inheritedLabel.appendChild(prefixElement);
</span><span class="cx"> inheritedLabel.appendChild(WebInspector.linkifyNodeReference(style.node));
</span><span class="cx"> newDOMFragment.appendChild(inheritedLabel);
</span><ins>+
+ hasMediaOrInherited.push(inheritedLabel);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Only include the media list if it is different from the previous media list shown.
</span><span class="lines">@@ -218,9 +234,16 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> newDOMFragment.appendChild(mediaLabel);
</span><ins>+
+ hasMediaOrInherited.push(mediaLabel);
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ if (!hasMediaOrInherited.length && previousSection && !previousSection.lastInGroup)
+ hasMediaOrInherited = this._ruleMediaAndInherticanceList.lastValue;
+
+ this._ruleMediaAndInherticanceList.push(hasMediaOrInherited);
+
</ins><span class="cx"> appendStyleSection.call(this, style);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -232,11 +255,14 @@
</span><span class="cx">
</span><span class="cx"> this.element.removeChildren();
</span><span class="cx"> this.element.appendChild(newDOMFragment);
</span><ins>+ this.element.appendChild(this._emptyFilterResultsElement);
</ins><span class="cx">
</span><span class="cx"> this._sections = newSections;
</span><span class="cx">
</span><span class="cx"> for (var i = 0; i < this._sections.length; ++i)
</span><span class="cx"> this._sections[i].updateLayout();
</span><ins>+
+ super.refresh();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> scrollToSectionAndHighlightProperty(property)
</span><span class="lines">@@ -262,6 +288,35 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ 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);
+ }
+
</ins><span class="cx"> // Protected
</span><span class="cx">
</span><span class="cx"> shown()
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsStyleDetailsPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/StyleDetailsPanel.js (185722 => 185723)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/StyleDetailsPanel.js 2015-06-18 22:07:15 UTC (rev 185722)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/StyleDetailsPanel.js 2015-06-18 22:24:37 UTC (rev 185723)
</span><span class="lines">@@ -25,10 +25,12 @@
</span><span class="cx">
</span><span class="cx"> WebInspector.StyleDetailsPanel = class StyleDetailsPanel extends WebInspector.Object
</span><span class="cx"> {
</span><del>- constructor(className, identifier, label)
</del><ins>+ constructor(delegate, className, identifier, label)
</ins><span class="cx"> {
</span><span class="cx"> super();
</span><span class="cx">
</span><ins>+ this._delegate = delegate || null;
+
</ins><span class="cx"> this._element = document.createElement("div");
</span><span class="cx"> this._element.className = className;
</span><span class="cx">
</span><span class="lines">@@ -109,6 +111,7 @@
</span><span class="cx"> refresh(significantChange)
</span><span class="cx"> {
</span><span class="cx"> // Implemented by subclasses.
</span><ins>+ this.dispatchEventToListeners(WebInspector.StyleDetailsPanel.Event.Refreshed);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Protected
</span><span class="lines">@@ -160,3 +163,7 @@
</span><span class="cx"> this._refreshNodeStyles();
</span><span class="cx"> }
</span><span class="cx"> };
</span><ins>+
+WebInspector.StyleDetailsPanel.Event = {
+ Refreshed: "style-details-panel-refreshed"
+};
</ins><span class="cx">\ No newline at end of file
</span></span></pre>
</div>
</div>
</body>
</html>