Attachment 360411 Details for Bug 193940 – Patch

[patch] Patch

patch.txt (text/plain), 9.93 KB, created by Nikita Vasilyev on 2019-01-28 18:17:19 PST

(hide)

Description:

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())

Actions: View | Formatted Diff | Diff

Attachments on bug 193940: 360403 | 360411 | 360412 | 360533 | 360616