Changeset 273164 in webkit

Timestamp:

Feb 19, 2021 1:35:05 PM (3 years ago)

Author:

Nikita Vasilyev

Message:

Web Inspector: CSS Grid Inspector: use a color palette for default grid overlay colors
​https://bugs.webkit.org/show_bug.cgi?id=222161

Reviewed by Devin Rousso.

Define a 5-color palette.

• UserInterface/Controllers/OverlayManager.js:

(WI.OverlayManager):
(WI.OverlayManager.prototype.showGridOverlay):
(WI.OverlayManager.prototype.colorForNode):
(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) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2021-02-19  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: CSS Grid Inspector: use a color palette for default grid overlay colors
+        https://bugs.webkit.org/show_bug.cgi?id=222161
+
+        Reviewed by Devin Rousso.
+
+        Define a 5-color palette.
+
+        * UserInterface/Controllers/OverlayManager.js:
+        (WI.OverlayManager):
+        (WI.OverlayManager.prototype.showGridOverlay):
+        (WI.OverlayManager.prototype.colorForNode):
+        (WI.OverlayManager.prototype._handleMainResourceDidChange):
+        * UserInterface/Views/CSSGridSection.js:
+        (WI.CSSGridSection.prototype.layout):
+
 2021-02-19  Razvan Caliman  <rcaliman@apple.com>
 

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

@@ -32 +32 @@
         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;
+
         WI.settings.gridOverlayShowExtendedGridLines.addEventListener(WI.Setting.Event.Changed, this._handleGridSettingChanged, this);
         WI.settings.gridOverlayShowLineNames.addEventListener(WI.Setting.Event.Changed, this._handleGridSettingChanged, this);
@@ -37 +41 @@
         WI.settings.gridOverlayShowTrackSizes.addEventListener(WI.Setting.Event.Changed, this._handleGridSettingChanged, this);
         WI.settings.gridOverlayShowAreaNames.addEventListener(WI.Setting.Event.Changed, this._handleGridSettingChanged, this);
+        WI.Frame.addEventListener(WI.Frame.Event.MainResourceDidChange, this._handleMainResourceDidChange, this);
     }
 
@@ -56 +61 @@
         console.assert(domNode.layoutContextType === WI.DOMNode.LayoutContextType.Grid, domNode.layoutContextType);
 
-        color ||= WI.Color.fromString("magenta"); // fallback color
-
+        color ||= this.colorForNode(domNode);
         let target = WI.assumingMainTarget();
         let commandArguments = {
@@ -72 +76 @@
         let overlay = {domNode, ...commandArguments};
         this._gridOverlayForNodeMap.set(domNode, overlay);
+        this._colorForNodeMap.set(domNode, color);
 
         domNode.addEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
@@ -109 +114 @@
     }
 
+    colorForNode(domNode)
+    {
+        let color = this._colorForNodeMap.get(domNode);
+        if (color)
+            return color;
+
+        const hslColors = [
+            [329, 91, 70],
+            [207, 96, 69],
+            [92, 90, 64],
+            [291, 73, 68],
+            [40, 97, 57],
+        ];
+
+        color = new WI.Color(WI.Color.Format.HSL, hslColors[this._nextDOMNodeColorIndex]);
+        this._colorForNodeMap.set(domNode, color);
+        this._nextDOMNodeColorIndex = (this._nextDOMNodeColorIndex + 1) % hslColors.length;
+
+        return color;
+    }
+
     // Private
 
@@ -130 +156 @@
         }
     }
+
+    _handleMainResourceDidChange(event)
+    {
+        // Consider the following scenario:
+        // 1. Click on the badge of an element with `display: grid`. The 1st overlay color is used.
+        // 2. Reload the webpage.
+        // 3. Click on the badge of the same element.
+        //
+        // We should see the same 1st default overlay color. If we don't reset _nextDOMNodeColorIndex,
+        // the 2nd default color would be used instead.
+        //
+        // `domNode.id` is different for the same DOM element after page reload.
+        this._nextDOMNodeColorIndex = 0;
+    }
 };
 

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

@@ -113 +113 @@
             });
 
-            let swatch = new WI.InlineSwatch(WI.InlineSwatch.Type.Color, WI.Color.fromString("magenta"));
+            let gridColor = WI.overlayManager.colorForNode(domNode);
+            let swatch = new WI.InlineSwatch(WI.InlineSwatch.Type.Color, gridColor);
             itemContainerElement.append(swatch.element);