<!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>[205518] 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/205518">205518</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2016-09-06 16:06:54 -0700 (Tue, 06 Sep 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Allow hiding of CSS variables in Computed styles panel
https://bugs.webkit.org/show_bug.cgi?id=161405
Patch by Devin Rousso <dcrousso+webkit@gmail.com> on 2016-09-06
Reviewed by Brian Burg.
* Localizations/en.lproj/localizedStrings.js:
* UserInterface/Models/CSSProperty.js:
(WebInspector.CSSProperty.prototype.update):
(WebInspector.CSSProperty.prototype.get variable):
Sets a member variable if the CSS property begins with "--", indicating that it is a variable.
(WebInspector.CSSProperty.prototype.get name):
(WebInspector.CSSProperty.prototype.get value):
(WebInspector.CSSProperty.prototype.get priority):
(WebInspector.CSSProperty.prototype.get overridden):
(WebInspector.CSSProperty.prototype.get anonymous):
(WebInspector.CSSProperty.prototype.get inherited):
(WebInspector.CSSProperty.prototype.get valid):
(WebInspector.CSSProperty.prototype.get styleSheetTextRange):
(WebInspector.CSSProperty.prototype.get relatedShorthandProperty):
(WebInspector.CSSProperty.prototype.get relatedLonghandProperties):
Changed styling to be one line getters.
* UserInterface/Views/CSSStyleDeclarationTextEditor.js:
(WebInspector.CSSStyleDeclarationTextEditor.PropertyVisibilityMode):
Dictionary for the three possible states of CSS property visibility:
- ShowAll
- HideVariables
- HideNonVariables
(WebInspector.CSSStyleDeclarationTextEditor):
(WebInspector.CSSStyleDeclarationTextEditor.prototype.get shownProperties):
Added member variable that holds the list of properties resulting from the filter inside
WebInspector.CSSStyleDeclarationTextEditor.prototype._iterateOverProperties.
(WebInspector.CSSStyleDeclarationTextEditor.prototype.get propertyVisibilityMode):
(WebInspector.CSSStyleDeclarationTextEditor.prototype.set propertyVisibilityMode):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._iterateOverProperties):
Added member variable controlling the visibility of CSS properties.
(WebInspector.CSSStyleDeclarationTextEditor.prototype.get delegate):
(WebInspector.CSSStyleDeclarationTextEditor.prototype.get style):
(WebInspector.CSSStyleDeclarationTextEditor.prototype.get showsImplicitProperties):
(WebInspector.CSSStyleDeclarationTextEditor.prototype.get sortProperties):
Changed styling to be one line getters.
* UserInterface/Views/ComputedStyleDetailsPanel.js:
(WebInspector.ComputedStyleDetailsPanel.prototype.refresh):
(WebInspector.ComputedStyleDetailsPanel.prototype.filterDidChange):
(WebInspector.ComputedStyleDetailsPanel.prototype.initialLayout):
(WebInspector.ComputedStyleDetailsPanel.prototype._handleVariablesSectionCollapsedStateChanged):
Added an additional text editor that displays the list of CSS Variables visible to the
selected node. Also ties this new editor into the refresh/collapse/filter event handlers.
(WebInspector.ComputedStyleDetailsPanel.prototype._handlePropertiesSectionCollapsedStateChanged):
Renamed from WebInspector.ComputedStyleDetailsPanel.prototype._handleCollapsedStateChanged.
(WebInspector.ComputedStyleDetailsPanel.prototype.get regionFlow):
(WebInspector.ComputedStyleDetailsPanel.prototype.get contentFlow):
(WebInspector.ComputedStyleDetailsPanel.prototype.get containerRegions):
Changed styling to be one line getters.</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="#trunkSourceWebInspectorUIUserInterfaceModelsCSSPropertyjs">trunk/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationTextEditorjs">trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsComputedStyleDetailsPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (205517 => 205518)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2016-09-06 23:03:27 UTC (rev 205517)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-09-06 23:06:54 UTC (rev 205518)
</span><span class="lines">@@ -1,5 +1,70 @@
</span><span class="cx"> 2016-09-06 Devin Rousso <dcrousso+webkit@gmail.com>
</span><span class="cx">
</span><ins>+ Web Inspector: Allow hiding of CSS variables in Computed styles panel
+ https://bugs.webkit.org/show_bug.cgi?id=161405
+
+ Reviewed by Brian Burg.
+
+ * Localizations/en.lproj/localizedStrings.js:
+
+ * UserInterface/Models/CSSProperty.js:
+ (WebInspector.CSSProperty.prototype.update):
+ (WebInspector.CSSProperty.prototype.get variable):
+ Sets a member variable if the CSS property begins with "--", indicating that it is a variable.
+
+ (WebInspector.CSSProperty.prototype.get name):
+ (WebInspector.CSSProperty.prototype.get value):
+ (WebInspector.CSSProperty.prototype.get priority):
+ (WebInspector.CSSProperty.prototype.get overridden):
+ (WebInspector.CSSProperty.prototype.get anonymous):
+ (WebInspector.CSSProperty.prototype.get inherited):
+ (WebInspector.CSSProperty.prototype.get valid):
+ (WebInspector.CSSProperty.prototype.get styleSheetTextRange):
+ (WebInspector.CSSProperty.prototype.get relatedShorthandProperty):
+ (WebInspector.CSSProperty.prototype.get relatedLonghandProperties):
+ Changed styling to be one line getters.
+
+ * UserInterface/Views/CSSStyleDeclarationTextEditor.js:
+ (WebInspector.CSSStyleDeclarationTextEditor.PropertyVisibilityMode):
+ Dictionary for the three possible states of CSS property visibility:
+ - ShowAll
+ - HideVariables
+ - HideNonVariables
+
+ (WebInspector.CSSStyleDeclarationTextEditor):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype.get shownProperties):
+ Added member variable that holds the list of properties resulting from the filter inside
+ WebInspector.CSSStyleDeclarationTextEditor.prototype._iterateOverProperties.
+
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype.get propertyVisibilityMode):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype.set propertyVisibilityMode):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._iterateOverProperties):
+ Added member variable controlling the visibility of CSS properties.
+
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype.get delegate):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype.get style):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype.get showsImplicitProperties):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype.get sortProperties):
+ Changed styling to be one line getters.
+
+ * UserInterface/Views/ComputedStyleDetailsPanel.js:
+ (WebInspector.ComputedStyleDetailsPanel.prototype.refresh):
+ (WebInspector.ComputedStyleDetailsPanel.prototype.filterDidChange):
+ (WebInspector.ComputedStyleDetailsPanel.prototype.initialLayout):
+ (WebInspector.ComputedStyleDetailsPanel.prototype._handleVariablesSectionCollapsedStateChanged):
+ Added an additional text editor that displays the list of CSS Variables visible to the
+ selected node. Also ties this new editor into the refresh/collapse/filter event handlers.
+
+ (WebInspector.ComputedStyleDetailsPanel.prototype._handlePropertiesSectionCollapsedStateChanged):
+ Renamed from WebInspector.ComputedStyleDetailsPanel.prototype._handleCollapsedStateChanged.
+
+ (WebInspector.ComputedStyleDetailsPanel.prototype.get regionFlow):
+ (WebInspector.ComputedStyleDetailsPanel.prototype.get contentFlow):
+ (WebInspector.ComputedStyleDetailsPanel.prototype.get containerRegions):
+ Changed styling to be one line getters.
+
+2016-09-06 Devin Rousso <dcrousso+webkit@gmail.com>
+
</ins><span class="cx"> Web Inspector: CodeMirror in resource content view should not show 'CR' characters
</span><span class="cx"> https://bugs.webkit.org/show_bug.cgi?id=160465
</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 (205517 => 205518)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2016-09-06 23:03:27 UTC (rev 205517)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2016-09-06 23:06:54 UTC (rev 205518)
</span><span class="lines">@@ -778,6 +778,7 @@
</span><span class="cx"> localizedStrings["Using Keyword Value"] = "Using Keyword Value";
</span><span class="cx"> localizedStrings["Using the previous selector “%s”."] = "Using the previous selector “%s”.";
</span><span class="cx"> localizedStrings["Value"] = "Value";
</span><ins>+localizedStrings["Variables"] = "Variables";
</ins><span class="cx"> localizedStrings["Variants"] = "Variants";
</span><span class="cx"> localizedStrings["Version"] = "Version";
</span><span class="cx"> localizedStrings["Vertical"] = "Vertical";
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceModelsCSSPropertyjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js (205517 => 205518)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js 2016-09-06 23:03:27 UTC (rev 205517)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js 2016-09-06 23:06:54 UTC (rev 205518)
</span><span class="lines">@@ -103,6 +103,7 @@
</span><span class="cx"> this._anonymous = anonymous;
</span><span class="cx"> this._inherited = WebInspector.CSSProperty.isInheritedPropertyName(name);
</span><span class="cx"> this._valid = valid;
</span><ins>+ this._variable = name.startsWith("--");
</ins><span class="cx"> this._styleSheetTextRange = styleSheetTextRange || null;
</span><span class="cx">
</span><span class="cx"> this._relatedShorthandProperty = null;
</span><span class="lines">@@ -132,10 +133,7 @@
</span><span class="cx"> return this._text || this.synthesizedText;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- get name()
- {
- return this._name;
- }
</del><ins>+ get name() { return this._name; }
</ins><span class="cx">
</span><span class="cx"> get canonicalName()
</span><span class="cx"> {
</span><span class="lines">@@ -147,10 +145,7 @@
</span><span class="cx"> return this._canonicalName;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- get value()
- {
- return this._value;
- }
</del><ins>+ get value() { return this._value; }
</ins><span class="cx">
</span><span class="cx"> get important()
</span><span class="cx"> {
</span><span class="lines">@@ -157,10 +152,7 @@
</span><span class="cx"> return this.priority === "important";
</span><span class="cx"> }
</span><span class="cx">
</span><del>- get priority()
- {
- return this._priority;
- }
</del><ins>+ get priority() { return this._priority; }
</ins><span class="cx">
</span><span class="cx"> get enabled()
</span><span class="cx"> {
</span><span class="lines">@@ -167,11 +159,7 @@
</span><span class="cx"> return this._enabled && this._ownerStyle && (!isNaN(this._index) || this._ownerStyle.type === WebInspector.CSSStyleDeclaration.Type.Computed);
</span><span class="cx"> }
</span><span class="cx">
</span><del>- get overridden()
- {
- return this._overridden;
- }
-
</del><ins>+ get overridden() { return this._overridden; }
</ins><span class="cx"> set overridden(overridden)
</span><span class="cx"> {
</span><span class="cx"> overridden = overridden || false;
</span><span class="lines">@@ -202,26 +190,12 @@
</span><span class="cx"> get implicit() { return this._implicit; }
</span><span class="cx"> set implicit(implicit) { this._implicit = implicit; }
</span><span class="cx">
</span><del>- get anonymous()
- {
- return this._anonymous;
- }
</del><ins>+ get anonymous() { return this._anonymous; }
+ get inherited() { return this._inherited; }
+ get valid() { return this._valid; }
+ get variable() { return this._variable; }
+ get styleSheetTextRange() { return this._styleSheetTextRange; }
</ins><span class="cx">
</span><del>- get inherited()
- {
- return this._inherited;
- }
-
- get valid()
- {
- return this._valid;
- }
-
- get styleSheetTextRange()
- {
- return this._styleSheetTextRange;
- }
-
</del><span class="cx"> get styleDeclarationTextRange()
</span><span class="cx"> {
</span><span class="cx"> if ("_styleDeclarationTextRange" in this)
</span><span class="lines">@@ -250,20 +224,13 @@
</span><span class="cx"> return this._styleDeclarationTextRange;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- get relatedShorthandProperty()
- {
- return this._relatedShorthandProperty;
- }
-
</del><ins>+ get relatedShorthandProperty() { return this._relatedShorthandProperty; }
</ins><span class="cx"> set relatedShorthandProperty(property)
</span><span class="cx"> {
</span><span class="cx"> this._relatedShorthandProperty = property || null;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- get relatedLonghandProperties()
- {
- return this._relatedLonghandProperties;
- }
</del><ins>+ get relatedLonghandProperties() { return this._relatedLonghandProperties;}
</ins><span class="cx">
</span><span class="cx"> addRelatedLonghandProperty(property)
</span><span class="cx"> {
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationTextEditorjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js (205517 => 205518)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js 2016-09-06 23:03:27 UTC (rev 205517)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js 2016-09-06 23:06:54 UTC (rev 205518)
</span><span class="lines">@@ -37,6 +37,7 @@
</span><span class="cx">
</span><span class="cx"> this._mouseDownCursorPosition = null;
</span><span class="cx">
</span><ins>+ this._propertyVisibilityMode = WebInspector.CSSStyleDeclarationTextEditor.PropertyVisibilityMode.Shown;
</ins><span class="cx"> this._showsImplicitProperties = true;
</span><span class="cx"> this._alwaysShowPropertyNames = {};
</span><span class="cx"> this._filterResultPropertyNames = null;
</span><span class="lines">@@ -86,25 +87,18 @@
</span><span class="cx"> this._codeMirror.on("focus", this._editorFocused.bind(this));
</span><span class="cx">
</span><span class="cx"> this.style = style;
</span><ins>+ this._shownProperties = [];
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="cx">
</span><del>- get delegate()
- {
- return this._delegate;
- }
-
</del><ins>+ get delegate() { return this._delegate; }
</ins><span class="cx"> set delegate(delegate)
</span><span class="cx"> {
</span><span class="cx"> this._delegate = delegate || null;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- get style()
- {
- return this._style;
- }
-
</del><ins>+ get style() { return this._style; }
</ins><span class="cx"> set style(style)
</span><span class="cx"> {
</span><span class="cx"> if (this._style === style)
</span><span class="lines">@@ -129,13 +123,14 @@
</span><span class="cx"> this._resetContent();
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ get shownProperties() { return this._shownProperties; }
+
</ins><span class="cx"> get focused()
</span><span class="cx"> {
</span><span class="cx"> return this._codeMirror.getWrapperElement().classList.contains("CodeMirror-focused");
</span><span class="cx"> }
</span><span class="cx">
</span><del>- get alwaysShowPropertyNames()
- {
</del><ins>+ get alwaysShowPropertyNames() {
</ins><span class="cx"> return Object.keys(this._alwaysShowPropertyNames);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -146,11 +141,18 @@
</span><span class="cx"> this._resetContent();
</span><span class="cx"> }
</span><span class="cx">
</span><del>- get showsImplicitProperties()
</del><ins>+ get propertyVisibilityMode() { return this._propertyVisibilityMode; }
+ set propertyVisibilityMode(propertyVisibilityMode)
</ins><span class="cx"> {
</span><del>- return this._showsImplicitProperties;
</del><ins>+ if (this._propertyVisibilityMode === propertyVisibilityMode)
+ return;
+
+ this._propertyVisibilityMode = propertyVisibilityMode;
+
+ this._resetContent();
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+ get showsImplicitProperties() { return this._showsImplicitProperties; }
</ins><span class="cx"> set showsImplicitProperties(showsImplicitProperties)
</span><span class="cx"> {
</span><span class="cx"> if (this._showsImplicitProperties === showsImplicitProperties)
</span><span class="lines">@@ -161,11 +163,7 @@
</span><span class="cx"> this._resetContent();
</span><span class="cx"> }
</span><span class="cx">
</span><del>- get sortProperties()
- {
- return this._sortProperties;
- }
-
</del><ins>+ get sortProperties() { return this._sortProperties; }
</ins><span class="cx"> set sortProperties(sortProperties)
</span><span class="cx"> {
</span><span class="cx"> if (this._sortProperties === sortProperties)
</span><span class="lines">@@ -1188,25 +1186,51 @@
</span><span class="cx">
</span><span class="cx"> _iterateOverProperties(onlyVisibleProperties, callback)
</span><span class="cx"> {
</span><del>- var properties = onlyVisibleProperties ? this._style.visibleProperties : this._style.properties;
</del><ins>+ let properties = onlyVisibleProperties ? this._style.visibleProperties : this._style.properties;
</ins><span class="cx">
</span><ins>+ let filterFunction = (property) => property; // Identity function.
</ins><span class="cx"> if (this._filterResultPropertyNames) {
</span><del>- properties = properties.filter(function(property) {
- return (!property.implicit || this._showsImplicitProperties) && property.name in this._filterResultPropertyNames;
- }, this);
</del><ins>+ filterFunction = (property) => {
+ if (!property.variable && this._propertyVisibilityMode === WebInspector.CSSStyleDeclarationTextEditor.PropertyVisibilityMode.HideNonVariables)
+ return false;
</ins><span class="cx">
</span><del>- if (this._sortProperties)
- properties.sort(function(a, b) { return a.name.localeCompare(b.name); });
</del><ins>+ if (property.variable && this._propertyVisibilityMode === WebInspector.CSSStyleDeclarationTextEditor.PropertyVisibilityMode.HideVariables)
+ return false;
+
+ if (property.implicit && !this._showsImplicitProperties)
+ return false;
+
+ if (!(property.name in this._filterResultPropertyNames))
+ return false;
+
+ return true;
+ };
</ins><span class="cx"> } else if (!onlyVisibleProperties) {
</span><span class="cx"> // Filter based on options only when all properties are used.
</span><del>- properties = properties.filter(function(property) {
</del><ins>+ filterFunction = (property) => {
+ switch (this._propertyVisibilityMode) {
+ case WebInspector.CSSStyleDeclarationTextEditor.PropertyVisibilityMode.HideNonVariables:
+ if (!property.variable)
+ return false;
+
+ break;
+ case WebInspector.CSSStyleDeclarationTextEditor.PropertyVisibilityMode.HideVariables:
+ if (property.variable)
+ return false;
+
+ break;
+ }
+
</ins><span class="cx"> return !property.implicit || this._showsImplicitProperties || property.canonicalName in this._alwaysShowPropertyNames;
</span><del>- }, this);
-
- if (this._sortProperties)
- properties.sort(function(a, b) { return a.name.localeCompare(b.name); });
</del><ins>+ };
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+ properties = properties.filter(filterFunction);
+ if (this._sortProperties)
+ properties.sort((a, b) => a.name.localeCompare(b.name));
+
+ this._shownProperties = properties;
+
</ins><span class="cx"> for (var i = 0; i < properties.length; ++i) {
</span><span class="cx"> if (callback.call(this, properties[i], i === properties.length - 1))
</span><span class="cx"> break;
</span><span class="lines">@@ -1669,6 +1693,12 @@
</span><span class="cx"> Blurred: "css-style-declaration-text-editor-blurred"
</span><span class="cx"> };
</span><span class="cx">
</span><ins>+WebInspector.CSSStyleDeclarationTextEditor.PropertyVisibilityMode = {
+ ShowAll: Symbol("variable-visibility-show-all"),
+ HideVariables: Symbol("variable-visibility-hide-variables"),
+ HideNonVariables: Symbol("variable-visibility-hide-non-variables"),
+};
+
</ins><span class="cx"> WebInspector.CSSStyleDeclarationTextEditor.PrefixWhitespace = "\n";
</span><span class="cx"> WebInspector.CSSStyleDeclarationTextEditor.SuffixWhitespace = "\n";
</span><span class="cx"> WebInspector.CSSStyleDeclarationTextEditor.StyleClassName = "css-style-text-editor";
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsComputedStyleDetailsPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js (205517 => 205518)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js 2016-09-06 23:03:27 UTC (rev 205517)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js 2016-09-06 23:06:54 UTC (rev 205518)
</span><span class="lines">@@ -36,11 +36,7 @@
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="cx">
</span><del>- get regionFlow()
- {
- return this._regionFlow;
- }
-
</del><ins>+ get regionFlow() { return this._regionFlow;}
</ins><span class="cx"> set regionFlow(regionFlow)
</span><span class="cx"> {
</span><span class="cx"> this._regionFlow = regionFlow;
</span><span class="lines">@@ -49,11 +45,7 @@
</span><span class="cx"> this._updateFlowNamesSectionVisibility();
</span><span class="cx"> }
</span><span class="cx">
</span><del>- get contentFlow()
- {
- return this._contentFlow;
- }
-
</del><ins>+ get contentFlow() { return this._contentFlow;}
</ins><span class="cx"> set contentFlow(contentFlow)
</span><span class="cx"> {
</span><span class="cx"> this._contentFlow = contentFlow;
</span><span class="lines">@@ -62,11 +54,7 @@
</span><span class="cx"> this._updateFlowNamesSectionVisibility();
</span><span class="cx"> }
</span><span class="cx">
</span><del>- get containerRegions()
- {
- return this._containerRegions;
- }
-
</del><ins>+ get containerRegions() { return this._containerRegions;}
</ins><span class="cx"> set containerRegions(regions)
</span><span class="cx"> {
</span><span class="cx"> this._containerRegions = regions;
</span><span class="lines">@@ -128,15 +116,20 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this._propertiesTextEditor.style = this.nodeStyles.computedStyle;
</span><ins>+ this._variablesTextEditor.style = this.nodeStyles.computedStyle;
</ins><span class="cx"> this._refreshFlowDetails(this.nodeStyles.node);
</span><span class="cx"> this._boxModelDiagramRow.nodeStyles = this.nodeStyles;
</span><span class="cx">
</span><span class="cx"> super.refresh();
</span><ins>+
+ this._variablesSection.element.classList.toggle("hidden", !this._variablesTextEditor.shownProperties.length);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> filterDidChange(filterBar)
</span><span class="cx"> {
</span><del>- this._propertiesTextEditor.removeNonMatchingProperties(filterBar.filters.text);
</del><ins>+ let filterText = filterBar.filters.text;
+ this._propertiesTextEditor.removeNonMatchingProperties(filterText);
+ this._variablesTextEditor.removeNonMatchingProperties(filterText);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Protected
</span><span class="lines">@@ -153,6 +146,7 @@
</span><span class="cx"> computedStyleShowAllLabel.appendChild(this._computedStyleShowAllCheckbox);
</span><span class="cx">
</span><span class="cx"> this._propertiesTextEditor = new WebInspector.CSSStyleDeclarationTextEditor(this);
</span><ins>+ this._propertiesTextEditor.propertyVisibilityMode = WebInspector.CSSStyleDeclarationTextEditor.PropertyVisibilityMode.HideVariables;
</ins><span class="cx"> this._propertiesTextEditor.showsImplicitProperties = this._computedStyleShowAllSetting.value;
</span><span class="cx"> this._propertiesTextEditor.alwaysShowPropertyNames = ["display", "width", "height"];
</span><span class="cx"> this._propertiesTextEditor.sortProperties = true;
</span><span class="lines">@@ -160,12 +154,25 @@
</span><span class="cx"> let propertiesRow = new WebInspector.DetailsSectionRow;
</span><span class="cx"> let propertiesGroup = new WebInspector.DetailsSectionGroup([propertiesRow]);
</span><span class="cx"> let propertiesSection = new WebInspector.DetailsSection("computed-style-properties", WebInspector.UIString("Properties"), [propertiesGroup], computedStyleShowAllLabel);
</span><del>- propertiesSection.addEventListener(WebInspector.DetailsSection.Event.CollapsedStateChanged, this._handleCollapsedStateChanged, this);
</del><ins>+ propertiesSection.addEventListener(WebInspector.DetailsSection.Event.CollapsedStateChanged, this._handlePropertiesSectionCollapsedStateChanged, this);
</ins><span class="cx">
</span><span class="cx"> this.addSubview(this._propertiesTextEditor);
</span><span class="cx">
</span><span class="cx"> propertiesRow.element.appendChild(this._propertiesTextEditor.element);
</span><span class="cx">
</span><ins>+ this._variablesTextEditor = new WebInspector.CSSStyleDeclarationTextEditor(this);
+ this._variablesTextEditor.propertyVisibilityMode = WebInspector.CSSStyleDeclarationTextEditor.PropertyVisibilityMode.HideNonVariables;
+ this._variablesTextEditor.sortProperties = true;
+
+ let variablesRow = new WebInspector.DetailsSectionRow;
+ let variablesGroup = new WebInspector.DetailsSectionGroup([variablesRow]);
+ this._variablesSection = new WebInspector.DetailsSection("computed-style-properties", WebInspector.UIString("Variables"), [variablesGroup]);
+ this._variablesSection.addEventListener(WebInspector.DetailsSection.Event.CollapsedStateChanged, this._handleVariablesSectionCollapsedStateChanged, this);
+
+ this.addSubview(this._variablesTextEditor);
+
+ variablesRow.element.appendChild(this._variablesTextEditor.element);
+
</ins><span class="cx"> // Region flow name is used to display the "flow-from" property of the Region Containers.
</span><span class="cx"> this._regionFlowFragment = document.createElement("span");
</span><span class="cx"> this._regionFlowFragment.appendChild(document.createElement("img")).className = "icon";
</span><span class="lines">@@ -199,6 +206,7 @@
</span><span class="cx"> this._containerRegionsFlowSection = new WebInspector.DetailsSection("container-regions", WebInspector.UIString("Container Regions"), [containerRegionsGroup]);
</span><span class="cx">
</span><span class="cx"> this.element.appendChild(propertiesSection.element);
</span><ins>+ this.element.appendChild(this._variablesSection.element);
</ins><span class="cx"> this.element.appendChild(this._flowNamesSection.element);
</span><span class="cx"> this.element.appendChild(this._containerRegionsFlowSection.element);
</span><span class="cx">
</span><span class="lines">@@ -221,12 +229,18 @@
</span><span class="cx"> this._propertiesTextEditor.showsImplicitProperties = checked;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- _handleCollapsedStateChanged(event)
</del><ins>+ _handlePropertiesSectionCollapsedStateChanged(event)
</ins><span class="cx"> {
</span><span class="cx"> if (event && event.data && !event.data.collapsed)
</span><span class="cx"> this._propertiesTextEditor.refresh();
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ _handleVariablesSectionCollapsedStateChanged(event)
+ {
+ if (event && event.data && !event.data.collapsed)
+ this._variablesTextEditor.refresh();
+ }
+
</ins><span class="cx"> _updateFlowNamesSectionVisibility()
</span><span class="cx"> {
</span><span class="cx"> this._flowNamesSection.element.classList.toggle("hidden", !this._contentFlow && !this._regionFlow);
</span></span></pre>
</div>
</div>
</body>
</html>