- Revision
- 240741
- Author
- [email protected]
- Date
- 2019-01-30 16:51:48 -0800 (Wed, 30 Jan 2019)
Log Message
Web Inspector: Changes: group CSS rules by resource
https://bugs.webkit.org/show_bug.cgi?id=193940
<rdar://problem/47617785>
Reviewed by Matt Baker.
Create resource sections with source links in their headers.
Also:
- Use read-only WI.SpreadsheetStyleProperty to display inline swatches for colors;
- Make the red and green background span the entire width of the panel.
* Localizations/en.lproj/localizedStrings.js:
* UserInterface/Views/ChangesDetailsSidebarPanel.css:
(.sidebar > .panel.changes-panel):
(.sidebar > .panel.changes-panel .css-rule):
(.sidebar > .panel.selected.changes-panel.empty):
(.changes-panel .resource-section):
(.changes-panel .resource-section > .header):
(.changes-panel .resource-section > .header > a:hover):
(.sidebar > .panel.changes-panel .selector-line,):
(.changes-panel .css-property-line > .property):
(.changes-panel .css-property-line.unchanged):
(.changes-panel .css-property-line.added):
(.changes-panel .css-property-line.removed):
(.changes-panel .css-property-line.removed::before):
(.changes-panel .css-property-line.added::before):
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/ChangesDetailsSidebarPanel.js:
(WI.ChangesDetailsSidebarPanel.prototype.layout):
(WI.ChangesDetailsSidebarPanel.prototype._createRuleElement):
(WI.ChangesDetailsSidebarPanel.prototype._createLocationLink):
* UserInterface/Views/SpreadsheetStyleProperty.js:
(WI.SpreadsheetStyleProperty.prototype._createInlineSwatch):
Allow passing `null` as a delegate.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (240740 => 240741)
--- trunk/Source/WebInspectorUI/ChangeLog 2019-01-31 00:49:26 UTC (rev 240740)
+++ trunk/Source/WebInspectorUI/ChangeLog 2019-01-31 00:51:48 UTC (rev 240741)
@@ -1,3 +1,43 @@
+2019-01-30 Nikita Vasilyev <[email protected]>
+
+ Web Inspector: Changes: group CSS rules by resource
+ https://bugs.webkit.org/show_bug.cgi?id=193940
+ <rdar://problem/47617785>
+
+ Reviewed by Matt Baker.
+
+ Create resource sections with source links in their headers.
+
+ Also:
+ - Use read-only WI.SpreadsheetStyleProperty to display inline swatches for colors;
+ - Make the red and green background span the entire width of the panel.
+
+ * Localizations/en.lproj/localizedStrings.js:
+ * UserInterface/Views/ChangesDetailsSidebarPanel.css:
+ (.sidebar > .panel.changes-panel):
+ (.sidebar > .panel.changes-panel .css-rule):
+ (.sidebar > .panel.selected.changes-panel.empty):
+ (.changes-panel .resource-section):
+ (.changes-panel .resource-section > .header):
+ (.changes-panel .resource-section > .header > a:hover):
+ (.sidebar > .panel.changes-panel .selector-line,):
+ (.changes-panel .css-property-line > .property):
+ (.changes-panel .css-property-line.unchanged):
+ (.changes-panel .css-property-line.added):
+ (.changes-panel .css-property-line.removed):
+ (.changes-panel .css-property-line.removed::before):
+ (.changes-panel .css-property-line.added::before):
+ (@media (prefers-color-scheme: dark)):
+
+ * UserInterface/Views/ChangesDetailsSidebarPanel.js:
+ (WI.ChangesDetailsSidebarPanel.prototype.layout):
+ (WI.ChangesDetailsSidebarPanel.prototype._createRuleElement):
+ (WI.ChangesDetailsSidebarPanel.prototype._createLocationLink):
+
+ * UserInterface/Views/SpreadsheetStyleProperty.js:
+ (WI.SpreadsheetStyleProperty.prototype._createInlineSwatch):
+ Allow passing `null` as a delegate.
+
2019-01-30 Devin Rousso <[email protected]>
Web Inspector: change style of device settings override popover content
Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (240740 => 240741)
--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2019-01-31 00:49:26 UTC (rev 240740)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2019-01-31 00:51:48 UTC (rev 240741)
@@ -171,7 +171,6 @@
localizedStrings["CSS"] = "CSS";
localizedStrings["CSS Canvas"] = "CSS Canvas";
localizedStrings["CSS canvas \u201C%s\u201D"] = "CSS canvas \u201C%s\u201D";
-localizedStrings["CSS hasn't been modified."] = "CSS hasn't been modified.";
localizedStrings["Cached"] = "Cached";
localizedStrings["Call Frames Truncated"] = "Call Frames Truncated";
localizedStrings["Call Stack"] = "Call Stack";
@@ -620,6 +619,7 @@
localizedStrings["No Attributes"] = "No Attributes";
localizedStrings["No Audits"] = "No Audits";
localizedStrings["No Box Model Information"] = "No Box Model Information";
+localizedStrings["No CSS Changes"] = "No CSS Changes";
localizedStrings["No Canvas Contexts"] = "No Canvas Contexts";
localizedStrings["No Canvas Selected"] = "No Canvas Selected";
localizedStrings["No Chart Available"] = "No Chart Available";
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.css (240740 => 240741)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.css 2019-01-31 00:49:26 UTC (rev 240740)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.css 2019-01-31 00:51:48 UTC (rev 240741)
@@ -24,52 +24,88 @@
*/
.sidebar > .panel.changes-panel {
- padding: 8px 10px;
white-space: pre-wrap;
overflow-y: auto;
}
-.sidebar > .panel.changes-panel:not(.empty) {
+.sidebar > .panel.changes-panel .css-rule {
+ padding-top: var(--css-declaration-vertical-padding);
font: 11px Menlo, monospace;
+ background-color: var(--background-color-code);
-webkit-user-select: text;
}
-.sidebar > .panel.changes-panel.empty {
- text-align: center;
+.sidebar > .panel.selected.changes-panel.empty {
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
-.changes-panel ins {
+.changes-panel .resource-section {
+ border-bottom: 0.5px solid var(--text-color-quaternary);
+}
+
+.changes-panel .resource-section > .header {
+ position: -webkit-sticky;
+ top: 0;
+ z-index: var(--z-index-header);
+ padding: 4px 8px;
+ background-color: var(--panel-background-color);
+ border-bottom: 0.5px solid var(--text-color-quaternary);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.changes-panel .resource-section > .header > a:hover {
+ color: var(--text-color);
+}
+
+.sidebar > .panel.changes-panel .selector-line,
+.sidebar > .panel.changes-panel .close-brace {
+ padding-left: var(--css-declaration-horizontal-padding);
+}
+
+.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, 65%, 85%);
- text-decoration: none;
+ background-color: hsl(70, 90%, 86%);
}
-.changes-panel del {
+.changes-panel .css-property-line.removed {
color: hsl(0, 100%, 35%);
- background-color: hsl(5, 78%, 91%);
- text-decoration: none;
+ background-color: hsl(5, 100%, 94%);
}
-.changes-panel del.css-property::before {
- content: "- ";
+.changes-panel .css-property-line.removed::before {
+ content: "-";
position: absolute;
+ left: var(--css-declaration-horizontal-padding);
pointer-events: none;
}
-.changes-panel ins.css-property::before {
- content: "+ ";
+.changes-panel .css-property-line.added::before {
+ content: "+";
position: absolute;
+ left: var(--css-declaration-horizontal-padding);
pointer-events: none;
}
@media (prefers-color-scheme: dark) {
- .changes-panel ins {
+ .changes-panel .css-property-line.added {
color: hsl(70, 64%, 70%);
background-color: hsl(89, 40%, 19%);
}
- .changes-panel del {
+ .changes-panel .css-property-line.removed {
color: hsl(0, 84%, 75%);
- background-color: hsl(5, 40%, 25%);
+ background-color: hsl(5, 40%, 28%);
}
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.js (240740 => 240741)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.js 2019-01-31 00:49:26 UTC (rev 240740)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.js 2019-01-31 00:51:48 UTC (rev 240741)
@@ -76,46 +76,91 @@
this.element.classList.toggle("empty", !cssRules.length);
if (!cssRules.length) {
- this.element.textContent = WI.UIString("CSS hasn't been modified.");
+ this.element.textContent = WI.UIString("No CSS Changes");
return;
}
- let indent = WI.indentString();
-
- let appendPropertyElement = (tagName, text) => {
- let propertyElement = document.createElement(tagName);
- propertyElement.className = "css-property";
- propertyElement.append(indent, text);
- this.element.append(propertyElement, "\n");
- };
-
+ let rulesForStylesheet = new Map();
for (let cssRule of cssRules) {
- let selectorElement = document.createElement("span");
- selectorElement.append(cssRule.selectorText, " {\n");
- this.element.append(selectorElement);
+ let cssRules = rulesForStylesheet.get(cssRule.ownerStyleSheet);
+ if (!cssRules) {
+ cssRules = [];
+ rulesForStylesheet.set(cssRule.ownerStyleSheet, cssRules);
+ }
+ cssRules.push(cssRule);
+ }
- let initialCSSProperties = cssRule.initialState.style.visibleProperties;
- let cssProperties = cssRule.style.visibleProperties;
+ for (let [styleSheet, cssRules] of rulesForStylesheet) {
+ let resourceSection = this.element.appendChild(document.createElement("section"));
+ resourceSection.classList.add("resource-section");
- Array.diffArrays(initialCSSProperties, cssProperties, (cssProperty, action) => {
- if (action ="" 0) {
- if (cssProperty.modified) {
- appendPropertyElement("del", cssProperty.initialState.formattedText);
- appendPropertyElement("ins", cssProperty.formattedText);
- } else
- appendPropertyElement("span", cssProperty.formattedText);
- } else if (action ="" 1)
- appendPropertyElement("ins", cssProperty.formattedText);
- else if (action ="" -1)
- appendPropertyElement("del", cssProperty.formattedText);
- });
+ let resourceHeader = resourceSection.appendChild(document.createElement("div"));
+ resourceHeader.classList.add("header");
+ resourceHeader.append(this._createLocationLink(styleSheet));
- this.element.append("}\n\n");
+ for (let cssRule of cssRules)
+ resourceSection.append(this._createRuleElement(cssRule));
}
}
// Private
+ _createRuleElement(cssRule)
+ {
+ 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 appendProperty = (cssProperty, className) => {
+ let propertyLineElement = ruleElement.appendChild(document.createElement("div"));
+ propertyLineElement.classList.add("css-property-line", className);
+ let stylePropertyView = new WI.SpreadsheetStyleProperty(null, cssProperty, {readOnly: true});
+ propertyLineElement.append(WI.indentString(), stylePropertyView.element, "\n");
+ };
+
+ let initialCSSProperties = cssRule.initialState.style.visibleProperties;
+ let cssProperties = cssRule.style.visibleProperties;
+
+ Array.diffArrays(initialCSSProperties, cssProperties, (cssProperty, action) => {
+ if (action ="" 0) {
+ if (cssProperty.modified) {
+ appendProperty(cssProperty.initialState, "removed");
+ appendProperty(cssProperty, "added");
+ } else
+ appendProperty(cssProperty, "unchanged");
+ } else if (action ="" 1)
+ appendProperty(cssProperty, "added");
+ else if (action ="" -1)
+ appendProperty(cssProperty, "removed");
+ });
+
+ let closeBraceElement = document.createElement("span");
+ closeBraceElement.className = "close-brace";
+ closeBraceElement.textContent = "}";
+
+ ruleElement.append(closeBraceElement, "\n");
+ return ruleElement;
+ }
+
+ _createLocationLink(styleSheet)
+ {
+ const options = {
+ nameStyle: WI.SourceCodeLocation.NameStyle.Short,
+ columnStyle: WI.SourceCodeLocation.ColumnStyle.Hidden,
+ dontFloat: true,
+ ignoreNetworkTab: true,
+ ignoreSearchTab: true,
+ };
+
+ const lineNumber = 0;
+ const columnNumber = 0;
+ let sourceCodeLocation = styleSheet.createSourceCodeLocation(lineNumber, columnNumber);
+ return WI.createSourceCodeLocationLink(sourceCodeLocation, options);
+ }
+
_mainResourceDidChange(event)
{
if (!event.target.isMainFrame())
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js (240740 => 240741)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2019-01-31 00:49:26 UTC (rev 240740)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2019-01-31 00:51:48 UTC (rev 240741)
@@ -488,7 +488,7 @@
this._handleValueChange();
}, this);
- if (typeof this._delegate.stylePropertyInlineSwatchActivated === "function") {
+ if (this._delegate && typeof this._delegate.stylePropertyInlineSwatchActivated === "function") {
swatch.addEventListener(WI.InlineSwatch.Event.Activated, () => {
this._swatchActive = true;
this._delegate.stylePropertyInlineSwatchActivated();
@@ -495,7 +495,7 @@
});
}
- if (typeof this._delegate.stylePropertyInlineSwatchDeactivated === "function") {
+ if (this._delegate && typeof this._delegate.stylePropertyInlineSwatchDeactivated === "function") {
swatch.addEventListener(WI.InlineSwatch.Event.Deactivated, () => {
this._swatchActive = false;
this._delegate.stylePropertyInlineSwatchDeactivated();
