WebKit Bugzilla
Attachment 360616 Details for
Bug 193940
: Web Inspector: Changes: group CSS rules by resource
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
[patch]
Patch
patch.txt (text/plain), 13.28 KB, created by
Nikita Vasilyev
on 2019-01-30 13:58:11 PST
(
hide
)
Description:
Patch
Filename:
MIME Type:
Creator:
Nikita Vasilyev
Created:
2019-01-30 13:58:11 PST
Size:
13.28 KB
patch
obsolete
>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog >index 3cb28d4a97d..6dc026e4be0 100644 >--- a/Source/WebInspectorUI/ChangeLog >+++ b/Source/WebInspectorUI/ChangeLog >@@ -1,3 +1,43 @@ >+2019-01-30 Nikita Vasilyev <nvasilyev@apple.com> >+ >+ Web Inspector: Changes: group CSS rules by resource >+ https://bugs.webkit.org/show_bug.cgi?id=193940 >+ <rdar://problem/47617785> >+ >+ Reviewed by NOBODY (OOPS!). >+ >+ 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-28 Commit Queue <commit-queue@webkit.org> > > Unreviewed, rolling out r240351. >diff --git a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js >index ebe29d52f9c..8880951d0f3 100644 >--- a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js >+++ b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js >@@ -169,7 +169,6 @@ localizedStrings["CSP Hash"] = "CSP Hash"; > 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"; >@@ -617,6 +616,7 @@ localizedStrings["No Application Cache information available"] = "No Application > 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"; >diff --git a/Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.css >index 8dabd97c782..582d20de742 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.css >+++ b/Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.css >@@ -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%); > } > } >diff --git a/Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.js >index 3f8ba419e83..3fb6938bc36 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.js >+++ b/Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.js >@@ -76,46 +76,91 @@ WI.ChangesDetailsSidebarPanel = class ChangesDetailsSidebarPanel extends WI.Deta > > 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 rulesForStylesheet = new Map(); >+ for (let cssRule of cssRules) { >+ let cssRules = rulesForStylesheet.get(cssRule.ownerStyleSheet); >+ if (!cssRules) { >+ cssRules = []; >+ rulesForStylesheet.set(cssRule.ownerStyleSheet, cssRules); >+ } >+ cssRules.push(cssRule); >+ } > >- let appendPropertyElement = (tagName, text) => { >- let propertyElement = document.createElement(tagName); >- propertyElement.className = "css-property"; >- propertyElement.append(indent, text); >- this.element.append(propertyElement, "\n"); >- }; >+ for (let [styleSheet, cssRules] of rulesForStylesheet) { >+ let resourceSection = this.element.appendChild(document.createElement("section")); >+ resourceSection.classList.add("resource-section"); > >- for (let cssRule of cssRules) { >- let selectorElement = document.createElement("span"); >- selectorElement.append(cssRule.selectorText, " {\n"); >- this.element.append(selectorElement); >- >- let initialCSSProperties = cssRule.initialState.style.visibleProperties; >- let cssProperties = cssRule.style.visibleProperties; >- >- 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); >- }); >- >- this.element.append("}\n\n"); >+ let resourceHeader = resourceSection.appendChild(document.createElement("div")); >+ resourceHeader.classList.add("header"); >+ resourceHeader.append(this._createLocationLink(styleSheet)); >+ >+ 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()) >diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js >index 4411e99a931..b727b04b590 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js >+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js >@@ -488,14 +488,14 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object > 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(); > }); > } > >- 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();
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Formatted Diff
|
Diff
Attachments on
bug 193940
:
360403
|
360411
|
360412
|
360533
| 360616