Changeset 273912 in webkit

Timestamp:

Mar 4, 2021 12:12:09 PM (17 months ago)

Author:

commit-queue@webkit.org

Message:

Web Inspector: Persist CSS Grid overlay colors
​https://bugs.webkit.org/show_bug.cgi?id=222319
<rdar://problem/74647242>

Patch by Razvan Caliman <Razvan Caliman> on 2021-03-04
Reviewed by Devin Rousso.

Save and restore CSS Grid overlay colors edited by a user.

• UserInterface/Controllers/OverlayManager.js:

(WI.OverlayManager):
(WI.OverlayManager.prototype.showGridOverlay):
(WI.OverlayManager.prototype.getGridColorForNode):
(WI.OverlayManager.prototype.setGridColorForNode):
(WI.OverlayManager.prototype._handleMainResourceDidChange):

• UserInterface/Views/CSSGridSection.js:

(WI.CSSGridSection.prototype.layout):

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Controllers/OverlayManager.js (modified) (6 diffs)
• UserInterface/Views/CSSGridSection.js (modified) (2 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2021-03-04  Razvan Caliman  <rcaliman@apple.com>
+
+        Web Inspector: Persist CSS Grid overlay colors
+        https://bugs.webkit.org/show_bug.cgi?id=222319
+        <rdar://problem/74647242>
+
+        Reviewed by Devin Rousso.
+
+        Save and restore CSS Grid overlay colors edited by a user.
+
+        * UserInterface/Controllers/OverlayManager.js:
+        (WI.OverlayManager):
+        (WI.OverlayManager.prototype.showGridOverlay):
+        (WI.OverlayManager.prototype.getGridColorForNode):
+        (WI.OverlayManager.prototype.setGridColorForNode):
+        (WI.OverlayManager.prototype._handleMainResourceDidChange):
+        * UserInterface/Views/CSSGridSection.js:
+        (WI.CSSGridSection.prototype.layout):
+
 2021-03-04  Razvan Caliman  <rcaliman@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Controllers/OverlayManager.js

@@ -31 +31 @@
 
         this._gridOverlayForNodeMap = new Map;
-
-        // Can't reuse `this._gridOverlayForNodeMap` because nodes are removed from it when overlay isn't visible.
-        this._colorForNodeMap = new WeakMap;
-        this._nextDOMNodeColorIndex = 0;
+        this._nextDefaultGridColorIndex = 0;
+        this._gridColorForNodeMap = new WeakMap;
+        this._gridColorSettingForNodeMap = new WeakMap;
 
         WI.settings.gridOverlayShowExtendedGridLines.addEventListener(WI.Setting.Event.Changed, this._handleGridSettingChanged, this);
@@ -61 +60 @@
         console.assert(domNode.layoutContextType === WI.DOMNode.LayoutContextType.Grid, domNode.layoutContextType);
 
-        color ||= this.colorForNode(domNode);
+        color ||= this.getGridColorForNode(domNode);
         let target = WI.assumingMainTarget();
         let commandArguments = {
@@ -75 +74 @@
 
         let overlay = {domNode, ...commandArguments};
+
+        // The method to show the overlay will be called repeatedly while updating the grid overlay color. Avoid adding duplicate event listeners
+        if (!this._gridOverlayForNodeMap.has(domNode))
+            domNode.addEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
+
         this._gridOverlayForNodeMap.set(domNode, overlay);
-        this._colorForNodeMap.set(domNode, color);
-
-        domNode.addEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
+
         this.dispatchEventToListeners(WI.OverlayManager.Event.GridOverlayShown, overlay);
     }
@@ -114 +116 @@
     }
 
-    colorForNode(domNode)
-    {
-        let color = this._colorForNodeMap.get(domNode);
+    getGridColorForNode(domNode)
+    {
+        let color = this._gridColorForNodeMap.get(domNode);
         if (color)
             return color;
 
-        const hslColors = [
+        const defaultGridHSLColors = [
             [329, 91, 70],
             [207, 96, 69],
@@ -128 +130 @@
         ];
 
-        color = new WI.Color(WI.Color.Format.HSL, hslColors[this._nextDOMNodeColorIndex]);
-        this._colorForNodeMap.set(domNode, color);
-        this._nextDOMNodeColorIndex = (this._nextDOMNodeColorIndex + 1) % hslColors.length;
+        let colorSetting = this._gridColorSettingForNodeMap.get(domNode);
+        if (!colorSetting) {
+            let defaultColor = defaultGridHSLColors[this._nextDefaultGridColorIndex];
+            this._nextDefaultGridColorIndex = (this._nextDefaultGridColorIndex + 1) % defaultGridHSLColors.length;
+
+            let url = domNode.ownerDocument.documentURL || WI.networkManager.mainFrame.url;
+            colorSetting = new WI.Setting(`grid-overlay-color-${url.hash}-${domNode.path().hash}`, defaultColor);
+            this._gridColorSettingForNodeMap.set(domNode, colorSetting);
+        }
+
+        color = new WI.Color(WI.Color.Format.HSL, colorSetting.value);
+        this._gridColorForNodeMap.set(domNode, color);
 
         return color;
+    }
+
+    setGridColorForNode(domNode, color)
+    {
+        console.assert(domNode instanceof WI.DOMNode, domNode);
+        console.assert(color instanceof WI.Color, color);
+
+        let colorSetting = this._gridColorSettingForNodeMap.get(domNode);
+        console.assert(colorSetting, "There should already be a setting created form a previous call to getGridColorForNode()");
+        colorSetting.value = color.hsl;
+
+        this._gridColorForNodeMap.set(domNode, color);
     }
 
@@ -164 +187 @@
         // 3. Click on the badge of the same element.
         //
-        // We should see the same 1st default overlay color. If we don't reset _nextDOMNodeColorIndex,
+        // We should see the same 1st default overlay color. If we don't reset _nextDefaultGridColorIndex,
         // the 2nd default color would be used instead.
         //
         // `domNode.id` is different for the same DOM element after page reload.
-        this._nextDOMNodeColorIndex = 0;
+        this._nextDefaultGridColorIndex = 0;
     }
 };

trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js

@@ -113 +113 @@
             });
 
-            let gridColor = WI.overlayManager.colorForNode(domNode);
+            let gridColor = WI.overlayManager.getGridColorForNode(domNode);
             let swatch = new WI.InlineSwatch(WI.InlineSwatch.Type.Color, gridColor);
             itemContainerElement.append(swatch.element);
@@ -120 +120 @@
                 if (checkboxElement.checked)
                     WI.overlayManager.showGridOverlay(domNode, {color: event.data.value});
+            }, swatch);
+
+            swatch.addEventListener(WI.InlineSwatch.Event.Deactivated, (event) => {
+                if (event.target.value === gridColor)
+                    return;
+
+                gridColor = event.target.value;
+                WI.overlayManager.setGridColorForNode(domNode, gridColor);
             }, swatch);
         }