Attachment 360616 Details for Bug 193940 – Patch

[patch] Patch

patch.txt (text/plain), 13.28 KB, created by Nikita Vasilyev on 2019-01-30 13:58:11 PST

(hide)

Description:

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

Actions: View | Formatted Diff | Diff

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