Web Inspector: Changes: group CSS rules by resource
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 31 Jan 2019 00:51:48 +0000 (00:51 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 31 Jan 2019 00:51:48 +0000 (00:51 +0000)
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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@240741 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.js
Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js

index 7081f5b..b7204a2 100644 (file)
@@ -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 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  <drousso@apple.com>
 
         Web Inspector: change style of device settings override popover content
index f3c8baf..e7084f2 100644 (file)
@@ -171,7 +171,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";
@@ -620,6 +619,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";
index 8dabd97..582d20d 100644 (file)
  */
 
 .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%);
     }
 }
index 3f8ba41..3fb6938 100644 (file)
@@ -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())
index 4411e99..b727b04 100644 (file)
@@ -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();