- Revision
- 243038
- Author
- [email protected]
- Date
- 2019-03-16 01:31:16 -0700 (Sat, 16 Mar 2019)
Log Message
Web Inspector: Changes: style attribute changes aren't being tracked
https://bugs.webkit.org/show_bug.cgi?id=193859
<rdar://problem/47568977>
Reviewed by Devin Rousso.
* UserInterface/Controllers/CSSManager.js:
(WI.CSSManager):
(WI.CSSManager.prototype.get modifiedStyles):
(WI.CSSManager.prototype.addModifiedStyle):
(WI.CSSManager.prototype._mainResourceDidChange):
(WI.CSSManager.prototype.get modifiedCSSRules): Deleted.
(WI.CSSManager.prototype.addModifiedCSSRule): Deleted.
(WI.CSSManager.prototype.removeModifiedCSSRule): Deleted.
* UserInterface/Models/CSSRule.js:
(WI.CSSRule.prototype.get stringId): Deleted.
(WI.CSSRule.prototype.markModified): Deleted.
* UserInterface/Models/CSSStyleDeclaration.js:
(WI.CSSStyleDeclaration.prototype.get stringId):
(WI.CSSStyleDeclaration.prototype.markModified):
Inline styles weren't tracked because they didn't have owner rules.
Track style declarations instead of CSS rules.
* UserInterface/Views/ChangesDetailsSidebarPanel.css:
(.sidebar > .panel.changes-panel .css-rule):
(.sidebar > .panel.changes-panel .css-rule + .css-rule):
(.changes-panel .selector.style-attribute):
(.changes-panel .selector:not(.style-attribute)):
(.changes-panel .css-property-line > .property):
(.changes-panel .css-property-line.unchanged): Deleted.
Drive-by: use text-color-secondary for unchanged properties instead of altering opacity.
* UserInterface/Views/ChangesDetailsSidebarPanel.js:
(WI.ChangesDetailsSidebarPanel.prototype.layout):
(WI.ChangesDetailsSidebarPanel.prototype._createRuleElement):
For an inline style declaration, instead of showing a CSS source file location show an appropriate selector for its DOM node.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (243037 => 243038)
--- trunk/Source/WebInspectorUI/ChangeLog 2019-03-16 07:50:24 UTC (rev 243037)
+++ trunk/Source/WebInspectorUI/ChangeLog 2019-03-16 08:31:16 UTC (rev 243038)
@@ -1,3 +1,42 @@
+2019-03-16 Nikita Vasilyev <[email protected]>
+
+ Web Inspector: Changes: style attribute changes aren't being tracked
+ https://bugs.webkit.org/show_bug.cgi?id=193859
+ <rdar://problem/47568977>
+
+ Reviewed by Devin Rousso.
+
+ * UserInterface/Controllers/CSSManager.js:
+ (WI.CSSManager):
+ (WI.CSSManager.prototype.get modifiedStyles):
+ (WI.CSSManager.prototype.addModifiedStyle):
+ (WI.CSSManager.prototype._mainResourceDidChange):
+ (WI.CSSManager.prototype.get modifiedCSSRules): Deleted.
+ (WI.CSSManager.prototype.addModifiedCSSRule): Deleted.
+ (WI.CSSManager.prototype.removeModifiedCSSRule): Deleted.
+ * UserInterface/Models/CSSRule.js:
+ (WI.CSSRule.prototype.get stringId): Deleted.
+ (WI.CSSRule.prototype.markModified): Deleted.
+ * UserInterface/Models/CSSStyleDeclaration.js:
+ (WI.CSSStyleDeclaration.prototype.get stringId):
+ (WI.CSSStyleDeclaration.prototype.markModified):
+ Inline styles weren't tracked because they didn't have owner rules.
+ Track style declarations instead of CSS rules.
+
+ * UserInterface/Views/ChangesDetailsSidebarPanel.css:
+ (.sidebar > .panel.changes-panel .css-rule):
+ (.sidebar > .panel.changes-panel .css-rule + .css-rule):
+ (.changes-panel .selector.style-attribute):
+ (.changes-panel .selector:not(.style-attribute)):
+ (.changes-panel .css-property-line > .property):
+ (.changes-panel .css-property-line.unchanged): Deleted.
+ Drive-by: use text-color-secondary for unchanged properties instead of altering opacity.
+
+ * UserInterface/Views/ChangesDetailsSidebarPanel.js:
+ (WI.ChangesDetailsSidebarPanel.prototype.layout):
+ (WI.ChangesDetailsSidebarPanel.prototype._createRuleElement):
+ For an inline style declaration, instead of showing a CSS source file location show an appropriate selector for its DOM node.
+
2019-03-15 Joseph Pecoraro <[email protected]>
Web Inspector: HAR Extension for Resource Priority
Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/CSSManager.js (243037 => 243038)
--- trunk/Source/WebInspectorUI/UserInterface/Controllers/CSSManager.js 2019-03-16 07:50:24 UTC (rev 243037)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/CSSManager.js 2019-03-16 08:31:16 UTC (rev 243038)
@@ -45,7 +45,7 @@
this._styleSheetIdentifierMap = new Map;
this._styleSheetFrameURLMap = new Map;
this._nodeStylesMap = {};
- this._modifiedCSSRules = new Map;
+ this._modifiedStyles = new Map;
this._defaultAppearance = null;
this._forcedAppearance = null;
@@ -421,21 +421,16 @@
this.dispatchEventToListeners(WI.CSSManager.Event.DefaultAppearanceDidChange, {appearance});
}
- get modifiedCSSRules()
+ get modifiedStyles()
{
- return Array.from(this._modifiedCSSRules.values());
+ return Array.from(this._modifiedStyles.values());
}
- addModifiedCSSRule(cssRule)
+ addModifiedStyle(style)
{
- this._modifiedCSSRules.set(cssRule.stringId, cssRule);
+ this._modifiedStyles.set(style.stringId, style);
}
- removeModifiedCSSRule(cssRule)
- {
- this._modifiedCSSRules.delete(cssRule.stringId);
- }
-
// Protected
mediaQueryResultChanged()
@@ -533,7 +528,7 @@
this._fetchedInitialStyleSheets = InspectorBackend.domains.CSS.hasEvent("styleSheetAdded");
this._styleSheetIdentifierMap.clear();
this._styleSheetFrameURLMap.clear();
- this._modifiedCSSRules.clear();
+ this._modifiedStyles.clear();
this._nodeStylesMap = {};
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/CSSRule.js (243037 => 243038)
--- trunk/Source/WebInspectorUI/UserInterface/Models/CSSRule.js 2019-03-16 07:50:24 UTC (rev 243037)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/CSSRule.js 2019-03-16 08:31:16 UTC (rev 243038)
@@ -45,12 +45,6 @@
get id() { return this._id; }
get initialState() { return this._initialState; }
- get stringId()
- {
- if (this._id)
- return this._id.styleSheetId + "/" + this._id.ordinal;
- }
-
get ownerStyleSheet()
{
return this._ownerStyleSheet;
@@ -152,27 +146,6 @@
return Object.shallowEqual(this._id, rule.id);
}
- markModified()
- {
- if (this._initialState)
- return;
-
- let initialStyle = this._style.initialState || this._style;
- this._initialState = new WI.CSSRule(
- this._nodeStyles,
- this._ownerStyleSheet,
- this._id,
- this._type,
- this._sourceCodeLocation,
- this._selectorText,
- this._selectors,
- this._matchedSelectorIndices,
- initialStyle,
- this._mediaList);
-
- WI.cssManager.addModifiedCSSRule(this);
- }
-
// Protected
get nodeStyles()
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js (243037 => 243038)
--- trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js 2019-03-16 07:50:24 UTC (rev 243037)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js 2019-03-16 08:31:16 UTC (rev 243038)
@@ -62,6 +62,14 @@
return this._id;
}
+ get stringId()
+ {
+ if (this._id)
+ return this._id.styleSheetId + "/" + this._id.ordinal;
+ else
+ return "";
+ }
+
get ownerStyleSheet()
{
return this._ownerStyleSheet;
@@ -374,8 +382,7 @@
this._initialState.properties = properties.map((property) => { return property.initialState || property });
- if (this._ownerRule)
- this._ownerRule.markModified();
+ WI.cssManager.addModifiedStyle(this);
}
shiftPropertiesAfter(cssProperty, lineDelta, columnDelta, propertyWasRemoved)
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.css (243037 => 243038)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.css 2019-03-16 07:50:24 UTC (rev 243037)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.css 2019-03-16 08:31:16 UTC (rev 243038)
@@ -29,12 +29,17 @@
}
.sidebar > .panel.changes-panel .css-rule {
- padding-top: var(--css-declaration-vertical-padding);
+ padding: var(--css-declaration-vertical-padding) 0;
font: 11px Menlo, monospace;
+ color: var(--text-color-secondary);
background-color: var(--background-color-code);
-webkit-user-select: text;
}
+.sidebar > .panel.changes-panel .css-rule + .css-rule {
+ border-top: 0.5px solid var(--text-color-quaternary);
+}
+
.sidebar > .panel.selected.changes-panel.empty {
display: flex;
justify-content: center;
@@ -66,14 +71,18 @@
padding-left: var(--css-declaration-horizontal-padding);
}
+.changes-panel .selector.style-attribute {
+ font: 12px sans-serif;
+}
+
+.changes-panel .selector:not(.style-attribute) {
+ color: var(--text-color);
+}
+
.changes-panel .css-property-line > .property {
display: inline;
}
-.changes-panel .css-property-line.unchanged {
- opacity: 0.5;
-}
-
.changes-panel .css-property-line.added {
color: hsl(90, 61%, 25%);
background-color: hsl(70, 90%, 86%);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.js (243037 => 243038)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.js 2019-03-16 07:50:24 UTC (rev 243037)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.js 2019-03-16 08:31:16 UTC (rev 243038)
@@ -81,56 +81,74 @@
this.element.removeChildren();
- let cssRules = WI.cssManager.modifiedCSSRules;
+ let modifiedStyles = WI.cssManager.modifiedStyles;
if (WI.settings.cssChangesPerNode.value) {
if (this.domNode) {
- let styles = WI.cssManager.stylesForNode(this.domNode);
- cssRules = cssRules.filter((cssRule) => styles.matchedRules.some((matchedRule) => cssRule.isEqualTo(matchedRule)));
+ let stylesForNode = WI.cssManager.stylesForNode(this.domNode);
+ modifiedStyles = modifiedStyles.filter((style) => {
+ if (style.node === this.domNode)
+ return true;
+
+ if (style.ownerRule)
+ return stylesForNode.matchedRules.some((matchedRule) => style.ownerRule.isEqualTo(matchedRule))
+
+ return false;
+ });
} else
- cssRules = [];
+ modifiedStyles = [];
}
- this.element.classList.toggle("empty", !cssRules.length);
- if (!cssRules.length) {
+ this.element.classList.toggle("empty", !modifiedStyles.length);
+ if (!modifiedStyles.length) {
this.element.textContent = WI.UIString("No CSS Changes");
return;
}
- let rulesForStylesheet = new Map();
- for (let cssRule of cssRules) {
- let cssRules = rulesForStylesheet.get(cssRule.ownerStyleSheet);
- if (!cssRules) {
- cssRules = [];
- rulesForStylesheet.set(cssRule.ownerStyleSheet, cssRules);
+ let declarationsForStyleSheet = new Map();
+ for (let style of modifiedStyles) {
+ let styleDeclarations = declarationsForStyleSheet.get(style.ownerStyleSheet);
+ if (!styleDeclarations) {
+ styleDeclarations = [];
+ declarationsForStyleSheet.set(style.ownerStyleSheet, styleDeclarations);
}
- cssRules.push(cssRule);
+ styleDeclarations.push(style);
}
- for (let [styleSheet, cssRules] of rulesForStylesheet) {
+ for (let [styleSheet, styles] of declarationsForStyleSheet) {
let resourceSection = this.element.appendChild(document.createElement("section"));
resourceSection.classList.add("resource-section");
let resourceHeader = resourceSection.appendChild(document.createElement("div"));
resourceHeader.classList.add("header");
- resourceHeader.append(this._createLocationLink(styleSheet));
+ resourceHeader.append(styleSheet.isInlineStyleAttributeStyleSheet() ? styles[0].selectorText : this._createLocationLink(styleSheet));
- for (let cssRule of cssRules)
- resourceSection.append(this._createRuleElement(cssRule));
+ for (let style of styles)
+ resourceSection.append(this._createRuleElement(style));
}
}
// Private
- _createRuleElement(cssRule)
+ _createRuleElement(style)
{
let ruleElement = document.createElement("div");
ruleElement.classList.add("css-rule");
- let selectorElement = ruleElement.appendChild(document.createElement("span"));
- selectorElement.classList.add("selector-line");
- selectorElement.append(cssRule.selectorText, " {\n");
+ let selectorLineElement = ruleElement.appendChild(document.createElement("div"));
+ selectorLineElement.className = "selector-line";
+ let selectorElement = selectorLineElement.appendChild(document.createElement("span"));
+ selectorElement.className = "selector";
+
+ if (style.type === WI.CSSStyleDeclaration.Type.Inline) {
+ selectorElement.textContent = WI.UIString("Style Attribute");
+ selectorElement.classList.add("style-attribute");
+ } else
+ selectorElement.textContent = style.ownerRule.selectorText;
+
+ selectorLineElement.append(" {\n");
+
let appendProperty = (cssProperty, className) => {
let propertyLineElement = ruleElement.appendChild(document.createElement("div"));
propertyLineElement.classList.add("css-property-line", className);
@@ -138,8 +156,8 @@
propertyLineElement.append(WI.indentString(), stylePropertyView.element, "\n");
};
- let initialCSSProperties = cssRule.initialState.style.visibleProperties;
- let cssProperties = cssRule.style.visibleProperties;
+ let initialCSSProperties = style.initialState.visibleProperties;
+ let cssProperties = style.visibleProperties;
Array.diffArrays(initialCSSProperties, cssProperties, (cssProperty, action) => {
if (action ="" 0) {
