Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/OverlayManager.js (273911 => 273912)
--- trunk/Source/WebInspectorUI/UserInterface/Controllers/OverlayManager.js 2021-03-04 19:52:49 UTC (rev 273911)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/OverlayManager.js 2021-03-04 20:12:09 UTC (rev 273912)
@@ -30,11 +30,10 @@
super();
this._gridOverlayForNodeMap = new Map;
+ this._nextDefaultGridColorIndex = 0;
+ this._gridColorForNodeMap = new WeakMap;
+ this._gridColorSettingForNodeMap = new WeakMap;
- // 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);
@@ -60,7 +59,7 @@
console.assert(!color || color instanceof WI.Color, color);
console.assert(domNode.layoutContextType === WI.DOMNode.LayoutContextType.Grid, domNode.layoutContextType);
- color ||= this.colorForNode(domNode);
+ color ||= this.getGridColorForNode(domNode);
let target = WI.assumingMainTarget();
let commandArguments = {
nodeId: domNode.id,
@@ -74,10 +73,13 @@
target.DOMAgent.showGridOverlay.invoke(commandArguments);
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);
}
@@ -113,13 +115,13 @@
this.showGridOverlay(domNode);
}
- colorForNode(domNode)
+ getGridColorForNode(domNode)
{
- let color = this._colorForNodeMap.get(domNode);
+ let color = this._gridColorForNodeMap.get(domNode);
if (color)
return color;
- const hslColors = [
+ const defaultGridHSLColors = [
[329, 91, 70],
[207, 96, 69],
[92, 90, 64],
@@ -127,13 +129,34 @@
[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;
+ let colorSetting = this._gridColorSettingForNodeMap.get(domNode);
+ if (!colorSetting) {
+ let defaultColor = defaultGridHSLColors[this._nextDefaultGridColorIndex];
+ this._nextDefaultGridColorIndex = (this._nextDefaultGridColorIndex + 1) % defaultGridHSLColors.length;
+ let url = "" || 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);
+ }
+
// Private
_handleLayoutContextTypeChanged(event)
@@ -163,11 +186,11 @@
// 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,
+ // 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;
}
};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js (273911 => 273912)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js 2021-03-04 19:52:49 UTC (rev 273911)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js 2021-03-04 20:12:09 UTC (rev 273912)
@@ -112,7 +112,7 @@
WI.overlayManager.hideGridOverlay(domNode);
});
- 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,6 +120,14 @@
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);
}
}
