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