Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (236296 => 236297)
--- trunk/Source/WebInspectorUI/ChangeLog 2018-09-21 01:11:19 UTC (rev 236296)
+++ trunk/Source/WebInspectorUI/ChangeLog 2018-09-21 02:02:14 UTC (rev 236297)
@@ -1,3 +1,96 @@
+2018-09-20 Devin Rousso <[email protected]>
+
+ Web Inspector: Styles Redesign: rework Computed panel to use Spreadsheet classes
+ https://bugs.webkit.org/show_bug.cgi?id=183627
+
+ Reviewed by Joseph Pecoraro.
+
+ * UserInterface/Views/ComputedStyleDetailsPanel.js:
+ (WI.ComputedStyleDetailsPanel):
+ (WI.ComputedStyleDetailsPanel.prototype.refresh):
+ (WI.ComputedStyleDetailsPanel.prototype.applyFilter):
+ (WI.ComputedStyleDetailsPanel.prototype.spreadsheetCSSStyleDeclarationEditorShowProperty):
+ (WI.ComputedStyleDetailsPanel.prototype.initialLayout):
+ (WI.ComputedStyleDetailsPanel.prototype.filterDidChange):
+ (WI.ComputedStyleDetailsPanel.prototype._computedStyleShowAllCheckboxValueChanged):
+ (WI.ComputedStyleDetailsPanel.prototype._handlePropertiesSectionCollapsedStateChanged):
+ (WI.ComputedStyleDetailsPanel.prototype._handleVariablesSectionCollapsedStateChanged):
+ (WI.ComputedStyleDetailsPanel.prototype._handleEditorFilterApplied):
+ (WI.ComputedStyleDetailsPanel.prototype.cssStyleDeclarationTextEditorShowProperty.delegateShowProperty): Deleted.
+ (WI.ComputedStyleDetailsPanel.prototype.cssStyleDeclarationTextEditorShowProperty): Deleted.
+ Replace CSSStyleDeclarationTextEditor with SpreadsheetCSSStyleDeclarationEditor.
+
+ * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
+ (WI.SpreadsheetCSSStyleDeclarationEditor):
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.initialLayout):
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.layout):
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.set showsImplicitProperties):
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.set alwaysShowPropertyNames):
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.set propertyVisibilityMode):
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.set hideFilterNonMatchingProperties):
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.set sortPropertiesByName): Added.
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.get propertiesToRender):
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.highlightProperty):
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.applyFilter):
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetStylePropertyShowProperty):
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype._updateStyleLock):
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.get _propertiesToRender): Deleted.
+ Create setters for the "special" functionality required by the Computed panel and tie them
+ into the logic that determines what properties are rendered.
+
+ * UserInterface/Views/SpreadsheetStyleProperty.js:
+ (WI.SpreadsheetStyleProperty.prototype._update):
+ Create go-to arrow if the property has a shorthand version or a source code location.
+
+ * UserInterface/Views/GeneralStyleDetailsSidebarPanel.js:
+ (WI.GeneralStyleDetailsSidebarPanel.prototype.initialLayout):
+ Don't reapply the filter after refreshing, as the current panel will handle applying it.
+
+ * UserInterface/Views/ComputedStyleDetailsPanel.css:
+ (.details-section:matches(.computed-style-properties, .computed-style-box-model):not(.collapsed) > :matches(.header, .content)):
+ (.computed-style-properties .property .go-to-arrow):
+ (.computed-style-properties .property:hover .go-to-arrow):
+ (.computed-style-properties.details-section): Deleted.
+ (.details-section > .content > .group > .row .CodeMirror-code pre .go-to-arrow): Deleted.
+ (.details-section > .content > .group > .row .CodeMirror-code pre:hover .go-to-arrow): Deleted.
+ (.details-section.style-box-model:not(.collapsed) > :matches(.header, .content)): Deleted.
+ * UserInterface/Views/DetailsSection.css:
+ (.details-section.computed-style-properties:not(.collapsed) > .header): Deleted.
+ Consolidate Computed panel styles to it's respective CSS file.
+
+ * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
+ (.spreadsheet-style-declaration-editor):
+ (.spreadsheet-style-declaration-editor .property:matches(.implicit, .not-inherited) .content > *):
+ (.spreadsheet-style-declaration-editor .property.not-inherited .content > *): Deleted.
+ * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:
+ (.spreadsheet-css-declaration):
+ * UserInterface/Views/Variables.css:
+ (:root):
+ Move `css-declaration` padding variables so they can be used by SpreadsheetCSSStyleDeclarationEditor
+ without a parent SpreadsheetCSSStyleDeclarationSection.
+
+ * UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css:
+ (.style-spreadsheet .style-rule): Deleted.
+ (.style-spreadsheet .selector-line): Deleted.
+ (.style-spreadsheet .selector): Deleted.
+ (.style-spreadsheet :matches(.selector .matched, .selector:focus)): Deleted.
+ (.style-spreadsheet .name): Deleted.
+ (.style-spreadsheet .value): Deleted.
+ (.style-spreadsheet :matches(.selector, .name, .value)): Deleted.
+ (.style-spreadsheet :matches(.selector, .name, .value):focus): Deleted.
+ (.style-spreadsheet .selector-inline): Deleted.
+ (.style-spreadsheet .property): Deleted.
+ (.style-spreadsheet .property-disabled,): Deleted.
+ (.style-spreadsheet .property-disabled :matches(.name, .value)): Deleted.
+ (.style-spreadsheet .styles-source): Deleted.
+ (.style-spreadsheet :matches(a, .node-link)): Deleted.
+ (.style-spreadsheet :matches(a, .node-link):hover): Deleted.
+ (.style-spreadsheet .declarations): Deleted.
+ (.style-spreadsheet input[type="checkbox"]): Deleted.
+ (.style-spreadsheet input[type="checkbox"]:not(:checked)): Deleted.
+ (.style-spreadsheet .declarations:hover input[type="checkbox"]): Deleted.
+ Drive-by fix: remove styles that don't apply to anything.
+
2018-09-19 Nikita Vasilyev <[email protected]>
Web Inspector: move DarkMode.css rules into appropriate CSS files
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css (236296 => 236297)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css 2018-09-21 01:11:19 UTC (rev 236296)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css 2018-09-21 02:02:14 UTC (rev 236297)
@@ -23,11 +23,11 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
-.computed-style-properties.details-section {
+.details-section:matches(.computed-style-properties, .computed-style-box-model):not(.collapsed) > :matches(.header, .content) {
background-color: white;
}
-.details-section > .content > .group > .row .CodeMirror-code pre .go-to-arrow {
+.computed-style-properties .property .go-to-arrow {
display: none;
position: absolute;
width: 12px;
@@ -35,14 +35,10 @@
vertical-align: text-bottom;
}
-.details-section > .content > .group > .row .CodeMirror-code pre:hover .go-to-arrow {
+.computed-style-properties .property:hover .go-to-arrow {
display: initial;
}
-.details-section.style-box-model:not(.collapsed) > :matches(.header, .content) {
- background-color: white;
-}
-
@media (prefers-dark-interface) {
.computed-style-properties.details-section {
background-color: var(--background-color);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js (236296 => 236297)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js 2018-09-21 01:11:19 UTC (rev 236296)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js 2018-09-21 02:02:14 UTC (rev 236297)
@@ -31,48 +31,11 @@
this._computedStyleShowAllSetting = new WI.Setting("computed-style-show-all", false);
- this.cssStyleDeclarationTextEditorShouldAddPropertyGoToArrows = true;
+ this._filterText = null;
}
// Public
- cssStyleDeclarationTextEditorShowProperty(property, showSource)
- {
- function delegateShowProperty() {
- if (typeof this._delegate.computedStyleDetailsPanelShowProperty === "function")
- this._delegate.computedStyleDetailsPanelShowProperty(property);
- }
-
- if (!showSource) {
- delegateShowProperty.call(this);
- return;
- }
-
- let effectiveProperty = this._nodeStyles.effectivePropertyForName(property.name);
- if (!effectiveProperty || !effectiveProperty.styleSheetTextRange) {
- if (!effectiveProperty.relatedShorthandProperty) {
- delegateShowProperty.call(this);
- return;
- }
- effectiveProperty = effectiveProperty.relatedShorthandProperty;
- }
-
- let ownerRule = effectiveProperty.ownerStyle.ownerRule;
- if (!ownerRule) {
- delegateShowProperty.call(this);
- return;
- }
-
- let sourceCode = ownerRule.sourceCodeLocation.sourceCode;
- let {startLine, startColumn} = effectiveProperty.styleSheetTextRange;
-
- const options = {
- ignoreNetworkTab: true,
- ignoreSearchTab: true,
- };
- WI.showSourceCodeLocation(sourceCode.createSourceCodeLocation(startLine, startColumn), options);
- }
-
refresh(significantChange)
{
// We only need to do a rebuild on significant changes. Other changes are handled
@@ -83,19 +46,36 @@
}
this._propertiesTextEditor.style = this.nodeStyles.computedStyle;
+ this._propertiesSection.element.classList.toggle("hidden", !this._propertiesTextEditor.propertiesToRender.length);
+
this._variablesTextEditor.style = this.nodeStyles.computedStyle;
+ this._variablesSection.element.classList.toggle("hidden", !this._variablesTextEditor.propertiesToRender.length);
+
this._boxModelDiagramRow.nodeStyles = this.nodeStyles;
+ if (this._filterText)
+ this.applyFilter(this._filterText);
+
super.refresh();
+ }
- this._variablesSection.element.classList.toggle("hidden", !this._variablesTextEditor.shownProperties.length);
+ applyFilter(filterText)
+ {
+ this._filterText = filterText;
+
+ if (!this.didInitialLayout)
+ return;
+
+ this._propertiesTextEditor.applyFilter(filterText);
+ this._variablesTextEditor.applyFilter(filterText);
}
- filterDidChange(filterBar)
+ // SpreadsheetCSSStyleDeclarationEditor delegate
+
+ spreadsheetCSSStyleDeclarationEditorShowProperty(editor, property)
{
- let filterText = filterBar.filters.text;
- this._propertiesTextEditor.removeNonMatchingProperties(filterText);
- this._variablesTextEditor.removeNonMatchingProperties(filterText);
+ if (this._delegate.computedStyleDetailsPanelShowProperty)
+ this._delegate.computedStyleDetailsPanelShowProperty(property);
}
focusFirstSection()
@@ -142,24 +122,28 @@
this._computedStyleShowAllCheckbox.addEventListener("change", this._computedStyleShowAllCheckboxValueChanged.bind(this));
computedStyleShowAllLabel.appendChild(this._computedStyleShowAllCheckbox);
- this._propertiesTextEditor = new WI.CSSStyleDeclarationTextEditor(this);
- this._propertiesTextEditor.propertyVisibilityMode = WI.CSSStyleDeclarationTextEditor.PropertyVisibilityMode.HideVariables;
+ this._propertiesTextEditor = new WI.SpreadsheetCSSStyleDeclarationEditor(this);
+ this._propertiesTextEditor.propertyVisibilityMode = WI.SpreadsheetCSSStyleDeclarationEditor.PropertyVisibilityMode.HideVariables;
this._propertiesTextEditor.showsImplicitProperties = this._computedStyleShowAllSetting.value;
this._propertiesTextEditor.alwaysShowPropertyNames = ["display", "width", "height"];
- this._propertiesTextEditor.sortProperties = true;
+ this._propertiesTextEditor.hideFilterNonMatchingProperties = true;
+ this._propertiesTextEditor.sortPropertiesByName = true;
+ this._propertiesTextEditor.addEventListener(WI.SpreadsheetCSSStyleDeclarationEditor.Event.FilterApplied, this._handleEditorFilterApplied, this);
let propertiesRow = new WI.DetailsSectionRow;
let propertiesGroup = new WI.DetailsSectionGroup([propertiesRow]);
- let propertiesSection = new WI.DetailsSection("computed-style-properties", WI.UIString("Properties"), [propertiesGroup], computedStyleShowAllLabel);
- propertiesSection.addEventListener(WI.DetailsSection.Event.CollapsedStateChanged, this._handlePropertiesSectionCollapsedStateChanged, this);
+ this._propertiesSection = new WI.DetailsSection("computed-style-properties", WI.UIString("Properties"), [propertiesGroup], computedStyleShowAllLabel);
+ this._propertiesSection.addEventListener(WI.DetailsSection.Event.CollapsedStateChanged, this._handlePropertiesSectionCollapsedStateChanged, this);
this.addSubview(this._propertiesTextEditor);
propertiesRow.element.appendChild(this._propertiesTextEditor.element);
- this._variablesTextEditor = new WI.CSSStyleDeclarationTextEditor(this);
- this._variablesTextEditor.propertyVisibilityMode = WI.CSSStyleDeclarationTextEditor.PropertyVisibilityMode.HideNonVariables;
- this._variablesTextEditor.sortProperties = true;
+ this._variablesTextEditor = new WI.SpreadsheetCSSStyleDeclarationEditor(this);
+ this._variablesTextEditor.propertyVisibilityMode = WI.SpreadsheetCSSStyleDeclarationEditor.PropertyVisibilityMode.HideNonVariables;
+ this._variablesTextEditor.hideFilterNonMatchingProperties = true;
+ this._variablesTextEditor.sortPropertiesByName = true;
+ this._variablesTextEditor.addEventListener(WI.SpreadsheetCSSStyleDeclarationEditor.Event.FilterApplied, this._handleEditorFilterApplied, this);
let variablesRow = new WI.DetailsSectionRow;
let variablesGroup = new WI.DetailsSectionGroup([variablesRow]);
@@ -170,17 +154,24 @@
variablesRow.element.appendChild(this._variablesTextEditor.element);
- this.element.appendChild(propertiesSection.element);
+ this.element.appendChild(this._propertiesSection.element);
this.element.appendChild(this._variablesSection.element);
this._boxModelDiagramRow = new WI.BoxModelDetailsSectionRow;
let boxModelGroup = new WI.DetailsSectionGroup([this._boxModelDiagramRow]);
- let boxModelSection = new WI.DetailsSection("style-box-model", WI.UIString("Box Model"), [boxModelGroup]);
+ let boxModelSection = new WI.DetailsSection("computed-style-box-model", WI.UIString("Box Model"), [boxModelGroup]);
this.element.appendChild(boxModelSection.element);
}
+ filterDidChange(filterBar)
+ {
+ super.filterDidChange(filterBar);
+
+ this.applyFilter(filterBar.filters.text);
+ }
+
// Private
_computedStyleShowAllCheckboxValueChanged(event)
@@ -188,20 +179,31 @@
let checked = this._computedStyleShowAllCheckbox.checked;
this._computedStyleShowAllSetting.value = checked;
this._propertiesTextEditor.showsImplicitProperties = checked;
- this._propertiesTextEditor.updateLayout();
}
_handlePropertiesSectionCollapsedStateChanged(event)
{
if (event && event.data && !event.data.collapsed)
- this._propertiesTextEditor.refresh();
+ this._propertiesTextEditor.needsLayout();
}
_handleVariablesSectionCollapsedStateChanged(event)
{
if (event && event.data && !event.data.collapsed)
- this._variablesTextEditor.refresh();
+ this._variablesTextEditor.needsLayout();
}
+
+ _handleEditorFilterApplied(event)
+ {
+ let section = null;
+ if (event.target === this._propertiesTextEditor)
+ section = this._propertiesSection;
+ else if (event.target === this._variablesTextEditor)
+ section = this._variablesSection;
+
+ if (section)
+ section.element.classList.toggle("hidden", !event.data.matches);
+ }
};
WI.ComputedStyleDetailsPanel.StyleClassName = "computed";
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css (236296 => 236297)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css 2018-09-21 01:11:19 UTC (rev 236296)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css 2018-09-21 02:02:14 UTC (rev 236297)
@@ -107,10 +107,6 @@
border-bottom: 1px solid hsl(0, 0%, 87%);
}
-.details-section.computed-style-properties:not(.collapsed) > .header {
- background-color: hsl(0, 0%, 100%);
-}
-
.details-section > .header::before {
display: block;
width: 21px;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.js (236296 => 236297)
--- trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.js 2018-09-21 01:11:19 UTC (rev 236296)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.js 2018-09-21 02:02:14 UTC (rev 236297)
@@ -165,8 +165,6 @@
this.contentView.element.appendChild(this._forcedPseudoClassContainer);
}
- this._panel.addEventListener(WI.StyleDetailsPanel.Event.Refreshed, this._filterDidChange, this);
-
this._showPanel(this._panel);
let optionsContainer = this.element.createChild("div", "options-container");
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css (236296 => 236297)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css 2018-09-21 01:11:19 UTC (rev 236296)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css 2018-09-21 02:02:14 UTC (rev 236297)
@@ -26,6 +26,10 @@
.spreadsheet-style-declaration-editor {
position: relative;
clear: both;
+ font-family: Menlo, monospace;
+ font-size: 11px;
+ color: hsl(0, 0%, 70%);
+ -webkit-user-select: text;
}
.spreadsheet-style-declaration-editor .property {
@@ -116,7 +120,7 @@
-webkit-clip-path: polygon(0% 50%, 6px 0%, 100% 0%, 100% 100%, 6px 100%);
}
-.spreadsheet-style-declaration-editor .property.not-inherited .content > * {
+.spreadsheet-style-declaration-editor .property:matches(.implicit, .not-inherited) .content > * {
opacity: 0.5;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js (236296 => 236297)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js 2018-09-21 01:11:19 UTC (rev 236296)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js 2018-09-21 02:02:14 UTC (rev 236297)
@@ -35,9 +35,15 @@
this.style = style;
this._propertyViews = [];
+ this._focused = false;
this._inlineSwatchActive = false;
- this._focused = false;
+ this._showsImplicitProperties = false;
+ this._alwaysShowPropertyNames = new Set;
+ this._propertyVisibilityMode = WI.SpreadsheetCSSStyleDeclarationEditor.PropertyVisibilityMode.ShowAll;
+ this._hideFilterNonMatchingProperties = false;
+ this._sortPropertiesByName = false;
+
this._propertyPendingStartEditing = null;
this._pendingAddBlankPropertyIndexOffset = NaN;
this._filterText = null;
@@ -47,7 +53,7 @@
initialLayout()
{
- if (!this.style.editable)
+ if (!this._style || !this._style.editable)
return;
this.element.addEventListener("focus", () => { this.focused = true; }, true);
@@ -71,7 +77,7 @@
this.element.removeChildren();
- let properties = this._propertiesToRender;
+ let properties = this.propertiesToRender;
this.element.classList.toggle("no-properties", !properties.length);
// FIXME: Only re-layout properties that have been modified and preserve focus whenever possible.
@@ -154,6 +160,77 @@
this._updateStyleLock();
}
+ set showsImplicitProperties(value)
+ {
+ if (value === this._showsImplicitProperties)
+ return;
+
+ this._showsImplicitProperties = value;
+
+ this.needsLayout();
+ }
+
+ set alwaysShowPropertyNames(propertyNames)
+ {
+ this._alwaysShowPropertyNames = new Set(propertyNames);
+
+ this.needsLayout();
+ }
+
+ set propertyVisibilityMode(propertyVisibilityMode)
+ {
+ if (this._propertyVisibilityMode === propertyVisibilityMode)
+ return;
+
+ this._propertyVisibilityMode = propertyVisibilityMode;
+
+ this.needsLayout();
+ }
+
+ set hideFilterNonMatchingProperties(value)
+ {
+ if (value === this._hideFilterNonMatchingProperties)
+ return;
+
+ this._hideFilterNonMatchingProperties = value;
+
+ this.needsLayout();
+ }
+
+ set sortPropertiesByName(value)
+ {
+ if (value === this._sortPropertiesByName)
+ return;
+
+ this._sortPropertiesByName = value;
+ this.needsLayout();
+ }
+
+ get propertiesToRender()
+ {
+ let properties = [];
+ if (!this._style)
+ return properties;
+
+ if (this._style._styleSheetTextRange)
+ properties = this._style.allVisibleProperties;
+ else
+ properties = this._style.allProperties;
+
+ if (this._sortPropertiesByName)
+ properties.sort((a, b) => a.name.extendedLocaleCompare(b.name));
+
+ return properties.filter((property) => {
+ if (!property.variable && this._propertyVisibilityMode === WI.SpreadsheetCSSStyleDeclarationEditor.PropertyVisibilityMode.HideNonVariables)
+ return false;
+
+ if (property.variable && this._propertyVisibilityMode === WI.SpreadsheetCSSStyleDeclarationEditor.PropertyVisibilityMode.HideVariables)
+ return false;
+
+ return !property.implicit || this._showsImplicitProperties || this._alwaysShowPropertyNames.has(property.canonicalName);
+ });
+ }
+
startEditingFirstProperty()
{
let firstEditableProperty = this._editablePropertyAfter(-1);
@@ -201,7 +278,7 @@
return false;
};
- for (let cssProperty of this.style.properties) {
+ for (let cssProperty of this._style.properties) {
if (propertiesMatch(cssProperty)) {
let propertyView = cssProperty.__propertyView;
if (propertyView) {
@@ -230,6 +307,29 @@
this.needsLayout();
}
+ applyFilter(filterText)
+ {
+ this._filterText = filterText;
+
+ if (!this.didInitialLayout)
+ return;
+
+ let matches = false;
+ for (let propertyView of this._propertyViews) {
+ if (propertyView.applyFilter(this._filterText)) {
+ matches = true;
+
+ if (this._hideFilterNonMatchingProperties)
+ this.element.append(propertyView.element);
+ } else if (this._hideFilterNonMatchingProperties)
+ propertyView.element.remove();
+ }
+
+ this.dispatchEventToListeners(WI.SpreadsheetCSSStyleDeclarationEditor.Event.FilterApplied, {matches});
+ }
+
+ // SpreadsheetStyleProperty delegate
+
spreadsheetStylePropertyFocusMoved(propertyView, {direction, willRemoveProperty})
{
this._updatePropertiesStatus();
@@ -277,8 +377,6 @@
}
}
- // SpreadsheetStyleProperty delegate
-
spreadsheetStylePropertyAddBlankPropertySoon(propertyView, {index})
{
if (isNaN(index))
@@ -296,6 +394,12 @@
this._focused = false;
}
+ spreadsheetStylePropertyShowProperty(propertyView, property)
+ {
+ if (this._delegate.spreadsheetCSSStyleDeclarationEditorShowProperty)
+ this._delegate.spreadsheetCSSStyleDeclarationEditorShowProperty(this, property);
+ }
+
stylePropertyInlineSwatchActivated()
{
this.inlineSwatchActive = true;
@@ -306,32 +410,8 @@
this.inlineSwatchActive = false;
}
- applyFilter(filterText)
- {
- this._filterText = filterText;
-
- if (!this.didInitialLayout)
- return;
-
- let matches = false;
- for (let propertyView of this._propertyViews) {
- if (propertyView.applyFilter(this._filterText))
- matches = true;
- }
-
- this.dispatchEventToListeners(WI.SpreadsheetCSSStyleDeclarationEditor.Event.FilterApplied, {matches});
- }
-
// Private
- get _propertiesToRender()
- {
- if (this._style._styleSheetTextRange)
- return this._style.allVisibleProperties;
-
- return this._style.allProperties;
- }
-
_editablePropertyAfter(propertyIndex)
{
for (let index = propertyIndex + 1; index < this._propertyViews.length; index++) {
@@ -370,7 +450,10 @@
_updateStyleLock()
{
- this.style.locked = this._focused || this._inlineSwatchActive;
+ if (!this._style)
+ return;
+
+ this._style.locked = this._focused || this._inlineSwatchActive;
}
};
@@ -379,3 +462,9 @@
};
WI.SpreadsheetCSSStyleDeclarationEditor.StyleClassName = "spreadsheet-style-declaration-editor";
+
+WI.SpreadsheetCSSStyleDeclarationEditor.PropertyVisibilityMode = {
+ ShowAll: Symbol("variable-visibility-show-all"),
+ HideVariables: Symbol("variable-visibility-hide-variables"),
+ HideNonVariables: Symbol("variable-visibility-hide-non-variables"),
+};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css (236296 => 236297)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css 2018-09-21 01:11:19 UTC (rev 236296)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css 2018-09-21 02:02:14 UTC (rev 236297)
@@ -27,13 +27,11 @@
margin: 0;
padding: 0 0 var(--css-declaration-vertical-padding);
font-family: Menlo, monospace;
+ font-size: 11px;
color: hsl(0, 0%, 70%);
background: white;
border-bottom: 0.5px solid hsla(0, 0%, 0%, 0.2);
-webkit-user-select: text;
-
- --css-declaration-vertical-padding: 4px;
- --css-declaration-horizontal-padding: 6px;
}
.spreadsheet-css-declaration :matches(.header, .header-media) {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css (236296 => 236297)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css 2018-09-21 01:11:19 UTC (rev 236296)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css 2018-09-21 02:02:14 UTC (rev 236297)
@@ -23,85 +23,6 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
-.style-spreadsheet .style-rule {
- font-family: Menlo, monospace;
- -webkit-user-select: text;
- padding: 4px 6px;
- margin: 0;
-
- color: hsl(0, 0%, 70%);
- background: white;
- border-bottom: 0.5px solid hsla(0, 0%, 0%, 0.2);
-}
-
-.style-spreadsheet .selector-line {
- float: left;
-}
-
-.style-spreadsheet .selector {
- color: hsl(0, 0%, 50%);
- word-wrap: break-word;
-}
-
-.style-spreadsheet :matches(.selector .matched, .selector:focus) {
- color: black;
-}
-
-.style-spreadsheet .name {
- color: var(--syntax-highlight-boolean-color);
-}
-
-.style-spreadsheet .value {
- color: black;
-}
-
-.style-spreadsheet :matches(.selector, .name, .value) {
- -webkit-user-modify: read-write-plaintext-only;
-}
-
-.style-spreadsheet :matches(.selector, .name, .value):focus {
- outline: 1px solid white;
- box-shadow: 0 1px 2px 1px hsla(0, 0%, 0%, 0.6);
-}
-
-.style-spreadsheet .selector-inline {
- -webkit-user-modify: read-only;
- color: hsl(0, 0%, 50%);
- font: 12px sans-serif;
-}
-
-.style-spreadsheet .property {
- padding-left: 16px;
-}
-
-.style-spreadsheet .property-disabled,
-.style-spreadsheet .property-disabled * {
- color: hsl(119, 100%, 22%);
-}
-
-.style-spreadsheet .property-disabled :matches(.name, .value) {
- -webkit-user-modify: read-only;
-}
-
-.style-spreadsheet .styles-source {
- float: right;
- font: 11px sans-serif;
- max-width: 100%;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
-
- margin-top: -1px;
-}
-
-.style-spreadsheet :matches(a, .node-link) {
- color: hsl(0, 0%, 50%);
-}
-
-.style-spreadsheet :matches(a, .node-link):hover {
- color: hsl(0, 0%, 33%);
-}
-
.spreadsheet-style-panel .section-header {
margin: 0;
padding: 4px 6px;
@@ -119,29 +40,6 @@
color: black;
}
-.style-spreadsheet .declarations {
- clear: left;
- position: relative;
-}
-
-.style-spreadsheet input[type="checkbox"] {
- visibility: hidden;
-
- position: absolute;
- left: 0;
-
- height: 11px;
- margin: 0;
-}
-
-.style-spreadsheet input[type="checkbox"]:not(:checked) {
- visibility: visible;
-}
-
-.style-spreadsheet .declarations:hover input[type="checkbox"] {
- visibility: visible;
-}
-
@media (prefers-dark-interface) {
.spreadsheet-style-panel .section-header {
color: var(--text-color-secondary);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js (236296 => 236297)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2018-09-21 01:11:19 UTC (rev 236296)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2018-09-21 02:02:14 UTC (rev 236297)
@@ -147,9 +147,12 @@
applyFilter(filterText)
{
let matchesName = this._nameElement.textContent.includes(filterText);
+ this._nameElement.classList.toggle(WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName, !!matchesName);
+
let matchesValue = this._valueElement.textContent.includes(filterText);
+ this._valueElement.classList.toggle(WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName, !!matchesValue);
+
let matches = matchesName || matchesValue;
- this._contentElement.classList.toggle(WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName, matches);
this._contentElement.classList.toggle(WI.GeneralStyleDetailsSidebarPanel.NoFilterMatchInPropertyClassName, !matches);
return matches;
}
@@ -233,6 +236,33 @@
} else
this._contentElement.append(" */");
+ if (!this._property.implicit && this._property.ownerStyle.type === WI.CSSStyleDeclaration.Type.Computed) {
+ let effectiveProperty = this._property.ownerStyle.nodeStyles.effectivePropertyForName(this._property.name);
+ if (effectiveProperty && !effectiveProperty.styleSheetTextRange)
+ effectiveProperty = effectiveProperty.relatedShorthandProperty;
+
+ let ownerRule = effectiveProperty ? effectiveProperty.ownerStyle.ownerRule : null;
+
+ let arrowElement = this._contentElement.appendChild(WI.createGoToArrowButton());
+ arrowElement.addEventListener("click", (event) => {
+ if (!effectiveProperty || !ownerRule || !event.altKey) {
+ if (this._delegate.spreadsheetStylePropertyShowProperty)
+ this._delegate.spreadsheetStylePropertyShowProperty(this, this._property);
+ return;
+ }
+
+ let sourceCode = ownerRule.sourceCodeLocation.sourceCode;
+ let {startLine, startColumn} = effectiveProperty.styleSheetTextRange;
+ WI.showSourceCodeLocation(sourceCode.createSourceCodeLocation(startLine, startColumn), {
+ ignoreNetworkTab: true,
+ ignoreSearchTab: true,
+ });
+ });
+
+ if (effectiveProperty && ownerRule)
+ arrowElement.title = WI.UIString("Option-click to show source");
+ }
+
this.updateStatus();
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css (236296 => 236297)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2018-09-21 01:11:19 UTC (rev 236296)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2018-09-21 02:02:14 UTC (rev 236297)
@@ -123,6 +123,9 @@
--navigation-bar-height: 29px;
--slider-height: 11px;
+
+ --css-declaration-vertical-padding: 4px;
+ --css-declaration-horizontal-padding: 6px;
}
body.window-inactive {
