Modified: trunk/Source/WebInspectorUI/ChangeLog (273163 => 273164)
--- trunk/Source/WebInspectorUI/ChangeLog 2021-02-19 21:28:52 UTC (rev 273163)
+++ trunk/Source/WebInspectorUI/ChangeLog 2021-02-19 21:35:05 UTC (rev 273164)
@@ -1,3 +1,20 @@
+2021-02-19 Nikita Vasilyev <nvasil...@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 <rcali...@apple.com>
Web Inspector: Truncate long node display names in Grid Overlay list
Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/OverlayManager.js (273163 => 273164)
--- trunk/Source/WebInspectorUI/UserInterface/Controllers/OverlayManager.js 2021-02-19 21:28:52 UTC (rev 273163)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/OverlayManager.js 2021-02-19 21:35:05 UTC (rev 273164)
@@ -31,11 +31,16 @@
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);
WI.settings.gridOverlayShowLineNumbers.addEventListener(WI.Setting.Event.Changed, this._handleGridSettingChanged, this);
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);
}
// Public
@@ -55,8 +60,7 @@
console.assert(!color || color instanceof WI.Color, color);
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 = {
nodeId: domNode.id,
@@ -71,6 +75,7 @@
let overlay = {domNode, ...commandArguments};
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);
@@ -108,6 +113,27 @@
this.showGridOverlay(domNode);
}
+ 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
_handleLayoutContextTypeChanged(event)
@@ -129,6 +155,20 @@
this.showGridOverlay(domNode, {color: overlay.color});
}
}
+
+ _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;
+ }
};
WI.OverlayManager.Event = {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js (273163 => 273164)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js 2021-02-19 21:28:52 UTC (rev 273163)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js 2021-02-19 21:35:05 UTC (rev 273164)
@@ -112,7 +112,8 @@
WI.overlayManager.hideGridOverlay(domNode);
});
- 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);
swatch.addEventListener(WI.InlineSwatch.Event.ValueChanged, (event) => {
