WebKit Bugzilla
Attachment 360411 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), 9.93 KB, created by
Nikita Vasilyev
on 2019-01-28 18:17:19 PST
(
hide
)
Description:
Patch
Filename:
MIME Type:
Creator:
Nikita Vasilyev
Created:
2019-01-28 18:17:19 PST
Size:
9.93 KB
patch
obsolete
>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog >index 3cb28d4a97d..c65f6fad97f 100644 >--- a/Source/WebInspectorUI/ChangeLog >+++ b/Source/WebInspectorUI/ChangeLog >@@ -1,3 +1,37 @@ >+2019-01-28 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. >+ >+ * UserInterface/Views/ChangesDetailsSidebarPanel.css: >+ (.sidebar > .panel.changes-panel): >+ (.sidebar > .panel.changes-panel .css-rule): >+ (.sidebar > .panel.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 .unchanged.property): >+ (.changes-panel .added.property): >+ (.changes-panel .removed.property): >+ (.changes-panel .removed.property::before): >+ (.changes-panel .added.property::before): >+ (@media (prefers-color-scheme: dark)): >+ >+ * UserInterface/Views/ChangesDetailsSidebarPanel.js: >+ (WI.ChangesDetailsSidebarPanel.prototype.layout): >+ (WI.ChangesDetailsSidebarPanel.prototype._renderRule): >+ (WI.ChangesDetailsSidebarPanel.prototype._createLocationLink): >+ > 2019-01-28 Commit Queue <commit-queue@webkit.org> > > Unreviewed, rolling out r240351. >diff --git a/Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.css >index 8dabd97c782..0a3a8134a6a 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.css >+++ b/Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.css >@@ -24,52 +24,83 @@ > */ > > .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 { > font: 11px Menlo, monospace; >+ padding-top: var(--css-declaration-vertical-padding); >+ background-color: var(--background-color-code); > -webkit-user-select: text; > } > > .sidebar > .panel.changes-panel.empty { >+ padding-top: var(--css-declaration-vertical-padding); > text-align: 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; >+ padding: 4px 8px; >+ border-bottom: 0.5px solid var(--text-color-quaternary); >+ white-space: nowrap; >+ text-overflow: ellipsis; >+ background-color: var(--panel-background-color); >+ overflow: hidden; >+ z-index: var(--z-index-header); >+} >+ >+.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 .unchanged.property { >+ opacity: 0.5; >+} >+ >+.changes-panel .added.property { > 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 .removed.property { > 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 .removed.property::before { >+ content: "-"; > position: absolute; >+ left: var(--css-declaration-horizontal-padding); > pointer-events: none; > } > >-.changes-panel ins.css-property::before { >- content: "+ "; >+.changes-panel .added.property::before { >+ content: "+"; > position: absolute; >+ left: var(--css-declaration-horizontal-padding); > pointer-events: none; > } > > @media (prefers-color-scheme: dark) { >- .changes-panel ins { >+ .changes-panel .added.property { > color: hsl(70, 64%, 70%); > background-color: hsl(89, 40%, 19%); > } > >- .changes-panel del { >+ .changes-panel .removed.property { > 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..a48e38e99c9 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.js >+++ b/Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.js >@@ -80,42 +80,93 @@ WI.ChangesDetailsSidebarPanel = class ChangesDetailsSidebarPanel extends WI.Deta > 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 stylesheets = new Map(); > 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 rulesList = stylesheets.get(cssRule.ownerStyleSheet); >+ if (!rulesList) { >+ rulesList = []; >+ stylesheets.set(cssRule.ownerStyleSheet, rulesList); >+ } >+ rulesList.push(cssRule); > } >+ >+ stylesheets.forEach((cssRules, styleSheet) => { >+ let resourceSection = document.createElement("section"); >+ resourceSection.classList.add("resource-section"); >+ >+ let resourceHeader = document.createElement("div"); >+ resourceHeader.classList.add("header"); >+ resourceHeader.append(this._createLocationLink(styleSheet)); >+ >+ resourceSection.append(resourceHeader); >+ >+ for (let cssRule of cssRules) { >+ let ruleElement = this._renderRule(cssRule); >+ resourceSection.append(ruleElement); >+ } >+ >+ this.element.append(resourceSection); >+ }); > } > > // Private > >+ _renderRule(cssRule) >+ { >+ let ruleElement = document.createElement("div"); >+ ruleElement.classList.add("css-rule"); >+ >+ let selectorElement = document.createElement("span"); >+ selectorElement.classList.add("selector-line"); >+ selectorElement.append(cssRule.selectorText, " {\n"); >+ ruleElement.append(selectorElement); >+ >+ let appendProperty = (cssProperty, className) => { >+ let stylePropertyView = new WI.SpreadsheetStyleProperty(this, cssProperty, {readOnly: true}); >+ stylePropertyView.element.classList.add(className); >+ stylePropertyView.element.insertAdjacentText("afterbegin", WI.indentString()); >+ stylePropertyView.element.insertAdjacentText("beforeend", "\n"); >+ ruleElement.append(stylePropertyView.element); >+ }; >+ >+ 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\n"); >+ return ruleElement; >+ } >+ >+ _createLocationLink(styleSheet) >+ { >+ let options = { >+ nameStyle: WI.SourceCodeLocation.NameStyle.Short, >+ columnStyle: WI.SourceCodeLocation.ColumnStyle.Hidden, >+ dontFloat: true, >+ ignoreNetworkTab: true, >+ ignoreSearchTab: true, >+ }; >+ >+ let sourceCodeLocation = styleSheet.createSourceCodeLocation(0, 0); >+ return WI.createSourceCodeLocationLink(sourceCodeLocation, options); >+ } >+ > _mainResourceDidChange(event) > { > if (!event.target.isMainFrame())
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