Diff
Modified: trunk/LayoutTests/ChangeLog (290434 => 290435)
--- trunk/LayoutTests/ChangeLog 2022-02-24 16:09:42 UTC (rev 290434)
+++ trunk/LayoutTests/ChangeLog 2022-02-24 16:42:55 UTC (rev 290435)
@@ -1,3 +1,14 @@
+2022-02-24 Devin Rousso <drou...@apple.com>
+
+ Web Inspector: merge WI.OverlayManager into WI.DOMNode
+ https://bugs.webkit.org/show_bug.cgi?id=236533
+
+ Reviewed by Patrick Angle.
+
+ * inspector/dom/showFlexOverlay.html:
+ * inspector/dom/showGridOverlay.html:
+ Replace direct `DOMAgent` calls with equivalent `WI.DOMNode` methods.
+
2022-02-24 Frédéric Wang <fw...@igalia.com>
RELEASE_ASSERT(!renderer()); in WebCore::Node::~Node() + 479 (Node.cpp:366)
Modified: trunk/LayoutTests/inspector/dom/showFlexOverlay.html (290434 => 290435)
--- trunk/LayoutTests/inspector/dom/showFlexOverlay.html 2022-02-24 16:09:42 UTC (rev 290434)
+++ trunk/LayoutTests/inspector/dom/showFlexOverlay.html 2022-02-24 16:42:55 UTC (rev 290435)
@@ -46,17 +46,17 @@
let container = await getFlexContainerNode();
InspectorTest.log("Requesting to show flex overlay for first .flex-container");
- await DOMAgent.showFlexOverlay(container.id, WI.Color.fromString("magenta").toProtocol());
+ await container.showLayoutOverlay({color: WI.Color.fromString("magenta")});
await checkFlexOverlayCount(1);
// No error should occur if showing flex overlay for a node that already has one.
InspectorTest.log("Requesting to show a different flex overlay for first .flex-container");
- await DOMAgent.showFlexOverlay(container.id, WI.Color.fromString("green").toProtocol());
+ await container.showLayoutOverlay({color: WI.Color.fromString("green")});
await checkFlexOverlayCount(1);
// No error should occur when hiding the flex overlay.
InspectorTest.log("Requesting to hide flex overlay");
- await DOMAgent.hideFlexOverlay(container.id);
+ await container.hideLayoutOverlay();
await checkFlexOverlayCount(0);
}
});
@@ -69,21 +69,21 @@
let [first, second] = await getAllFlexContainerNodes();
InspectorTest.log("Requesting to show first flex overlay");
- await DOMAgent.showFlexOverlay(first.id, WI.Color.fromString("magenta").toProtocol());
+ await first.showLayoutOverlay({color: WI.Color.fromString("magenta")});
await checkFlexOverlayCount(1);
InspectorTest.log("Requesting to show second flex overlay");
- await DOMAgent.showFlexOverlay(second.id, WI.Color.fromString("green").toProtocol());
+ await second.showLayoutOverlay({color: WI.Color.fromString("green")});
await checkFlexOverlayCount(2);
// No error should occur when hiding the first flex overlay.
InspectorTest.log("Requesting to hide first flex overlay");
- await DOMAgent.hideFlexOverlay(first.id);
+ await first.hideLayoutOverlay();
await checkFlexOverlayCount(1);
// No error should occur when hiding the second flex overlay.
InspectorTest.log("Requesting to hide second flex overlay");
- await DOMAgent.hideFlexOverlay(second.id);
+ await second.hideLayoutOverlay();
await checkFlexOverlayCount(0);
}
});
@@ -96,11 +96,11 @@
let [first, second] = await getAllFlexContainerNodes();
InspectorTest.log("Requesting to show first flex overlay");
- await DOMAgent.showFlexOverlay(first.id, WI.Color.fromString("magenta").toProtocol());
+ await first.showLayoutOverlay({color: WI.Color.fromString("magenta")});
await checkFlexOverlayCount(1);
InspectorTest.log("Requesting to show second flex overlay");
- await DOMAgent.showFlexOverlay(second.id, WI.Color.fromString("green").toProtocol());
+ await second.showLayoutOverlay({color: WI.Color.fromString("green")});
await checkFlexOverlayCount(2);
// No error should occur when hiding all flex overlays.
Modified: trunk/LayoutTests/inspector/dom/showGridOverlay.html (290434 => 290435)
--- trunk/LayoutTests/inspector/dom/showGridOverlay.html 2022-02-24 16:09:42 UTC (rev 290434)
+++ trunk/LayoutTests/inspector/dom/showGridOverlay.html 2022-02-24 16:42:55 UTC (rev 290435)
@@ -46,17 +46,17 @@
let container = await getGridContainerNode();
InspectorTest.log("Requesting to show grid overlay for first .grid-container");
- await DOMAgent.showGridOverlay(container.id, WI.Color.fromString("magenta").toProtocol());
+ await container.showLayoutOverlay({color: WI.Color.fromString("magenta")});
await checkGridOverlayCount(1);
// No error should occur if showing grid overlay for a node that already has one.
InspectorTest.log("Requesting to show a different grid overlay for first .grid-container");
- await DOMAgent.showGridOverlay(container.id, WI.Color.fromString("green").toProtocol());
+ await container.showLayoutOverlay({color: WI.Color.fromString("green")});
await checkGridOverlayCount(1);
// No error should occur when hiding the grid overlay.
InspectorTest.log("Requesting to hide grid overlay");
- await DOMAgent.hideGridOverlay(container.id);
+ await container.hideLayoutOverlay();
await checkGridOverlayCount(0);
}
});
@@ -69,21 +69,21 @@
let [first, second] = await getAllGridContainerNodes();
InspectorTest.log("Requesting to show first grid overlay");
- await DOMAgent.showGridOverlay(first.id, WI.Color.fromString("magenta").toProtocol());
+ await first.showLayoutOverlay({color: WI.Color.fromString("magenta")});
await checkGridOverlayCount(1);
InspectorTest.log("Requesting to show second grid overlay");
- await DOMAgent.showGridOverlay(second.id, WI.Color.fromString("green").toProtocol());
+ await second.showLayoutOverlay({color: WI.Color.fromString("green")});
await checkGridOverlayCount(2);
// No error should occur when hiding the grid overlay.
InspectorTest.log("Requesting to hide first grid overlay");
- await DOMAgent.hideGridOverlay(first.id);
+ await first.hideLayoutOverlay();
await checkGridOverlayCount(1);
// No error should occur when hiding the grid overlay.
InspectorTest.log("Requesting to hide second grid overlay");
- await DOMAgent.hideGridOverlay(second.id);
+ await second.hideLayoutOverlay();
await checkGridOverlayCount(0);
}
});
@@ -96,11 +96,11 @@
let [first, second] = await getAllGridContainerNodes();
InspectorTest.log("Requesting to show grid overlay");
- await DOMAgent.showGridOverlay(first.id, WI.Color.fromString("magenta").toProtocol());
+ await first.showLayoutOverlay({color: WI.Color.fromString("magenta")});
await checkGridOverlayCount(1);
InspectorTest.log("Requesting to show a different grid overlay");
- await DOMAgent.showGridOverlay(second.id, WI.Color.fromString("green").toProtocol());
+ await second.showLayoutOverlay({color: WI.Color.fromString("green")});
await checkGridOverlayCount(2);
// No error should occur when hiding the grid overlay.
Modified: trunk/Source/WebInspectorUI/ChangeLog (290434 => 290435)
--- trunk/Source/WebInspectorUI/ChangeLog 2022-02-24 16:09:42 UTC (rev 290434)
+++ trunk/Source/WebInspectorUI/ChangeLog 2022-02-24 16:42:55 UTC (rev 290435)
@@ -1,3 +1,67 @@
+2022-02-24 Devin Rousso <drou...@apple.com>
+
+ Web Inspector: merge WI.OverlayManager into WI.DOMNode
+ https://bugs.webkit.org/show_bug.cgi?id=236533
+
+ Reviewed by Patrick Angle.
+
+ There's really nothing substantial about `WI.OverlayManager` that requires it to exist. All
+ of the methods, members, etc. can be moved to `WI.DOMNode`, resulting in clearer calling
+ code (since callers currently have to provide a `WI.DOMNode` to `WI.OverlayManager` methods)
+ and fewer collections (e.g. it's no longer necessary to have a "list of nodes showing a grid
+ overlay").
+
+ * UserInterface/Controllers/OverlayManager.js: Removed.
+ * UserInterface/Main.html:
+ * UserInterface/Base/Main.js:
+ (WI.loaded):
+
+ * UserInterface/Models/DOMNode.js:
+ (WI.DOMNode):
+ (WI.DOMNode.resetDefaultLayoutOverlayConfiguration): Added.
+ (WI.DOMNode.prototype.get layoutOverlayShowing): moved from `WI.OverlayManager.protytpe.hasVisibleOverlay`.
+ (WI.DOMNode.prototype.set layoutContextType):
+ (WI.DOMNode.prototype.showLayoutOverlay): moved from `WI.OverlayManager.protytpe.showOverlay`.
+ (WI.DOMNode.prototype.hideLayoutOverlay): moved from `WI.OverlayManager.protytpe.hideOverlay`.
+ (WI.DOMNode.prototype.get layoutOverlayColor): moved from `WI.OverlayManager.protytpe.getColorForNode`.
+ (WI.DOMNode.prototype.set layoutOverlayColor): moved from `WI.OverlayManager.protytpe.setColorForNode`.
+
+ * UserInterface/Controllers/DOMManager.js:
+ (WI.DOMManager.prototype._mainResourceDidChange):
+ Reset the index of the next default color to use for the next grid/flex DOM node.
+
+ * UserInterface/Views/DOMTreeElement.js:
+ (WI.DOMTreeElement.prototype.onattach):
+ (WI.DOMTreeElement.prototype.ondetach):
+ (WI.DOMTreeElement.prototype._layoutBadgeClicked):
+ (WI.DOMTreeElement.prototype._updateLayoutBadgeStatus):
+ (WI.DOMTreeElement.prototype._handleLayoutContextTypeChanged):
+ * UserInterface/Views/NodeOverlayListSection.js:
+ (WI.NodeOverlayListSection.prototype.attached):
+ (WI.NodeOverlayListSection.prototype.detached):
+ (WI.NodeOverlayListSection.prototype.layout):
+ (WI.NodeOverlayListSection.prototype._handleOverlayStateChanged):
+ (WI.NodeOverlayListSection.prototype._handleToggleAllCheckboxChanged):
+ (WI.NodeOverlayListSection.prototype._updateToggleAllCheckbox):
+ * UserInterface/Controllers/GridOverlayConfigurationDiagnosticEventRecorder.js:
+ (WI.GridOverlayConfigurationDiagnosticEventRecorder):
+ (WI.GridOverlayConfigurationDiagnosticEventRecorder.prototype.setup):
+ (WI.GridOverlayConfigurationDiagnosticEventRecorder.prototype.teardown):
+ (WI.GridOverlayConfigurationDiagnosticEventRecorder.prototype._handleGridOverlayShown):
+ (WI.GridOverlayConfigurationDiagnosticEventRecorder.prototype._handleGridOverlayHidden):
+ (WI.GridOverlayConfigurationDiagnosticEventRecorder.prototype._sampleCurrentOverlayConfiguration):
+ * UserInterface/Controllers/GridOverlayDiagnosticEventRecorder.js:
+ (WI.GridOverlayDiagnosticEventRecorder):
+ (WI.GridOverlayDiagnosticEventRecorder.prototype.setup):
+ (WI.GridOverlayDiagnosticEventRecorder.prototype.teardown):
+ (WI.GridOverlayDiagnosticEventRecorder.prototype._handleGridOverlayShown):
+ Adopt the above changes:
+ - Replace `WI.OverlayManager.Event.*` with `WI.DOMNode.Event.*` (and `event.data.domNode`
+ with `event.target`).
+ - Replace `WI.overlayManager.*(domNode[, ...])` with `domNode.*([...])`.
+ - Directly query `WI.settings.gridOverlay*.value` instead of getting them from the `data`
+ in `WI.DOMNode.Event.LayoutOverlayShown` (formerly `WI.OverlayManager.Event.OverlayShown`).
+
2022-02-18 Robert Jenner <jen...@apple.com>
Unreviewed, reverting r290149.
Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Main.js (290434 => 290435)
--- trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2022-02-24 16:09:42 UTC (rev 290434)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2022-02-24 16:42:55 UTC (rev 290435)
@@ -127,7 +127,6 @@
WI.domDebuggerManager = new WI.DOMDebuggerManager,
WI.canvasManager = new WI.CanvasManager,
WI.animationManager = new WI.AnimationManager,
- WI.overlayManager = new WI.OverlayManager,
];
// Register for events.
Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/DOMManager.js (290434 => 290435)
--- trunk/Source/WebInspectorUI/UserInterface/Controllers/DOMManager.js 2022-02-24 16:09:42 UTC (rev 290434)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/DOMManager.js 2022-02-24 16:42:55 UTC (rev 290435)
@@ -859,6 +859,8 @@
this._restoreSelectedNodeIsAllowed = true;
this.ensureDocument();
+
+ WI.DOMNode.resetDefaultLayoutOverlayConfiguration();
}
};
Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/GridOverlayConfigurationDiagnosticEventRecorder.js (290434 => 290435)
--- trunk/Source/WebInspectorUI/UserInterface/Controllers/GridOverlayConfigurationDiagnosticEventRecorder.js 2022-02-24 16:09:42 UTC (rev 290434)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/GridOverlayConfigurationDiagnosticEventRecorder.js 2022-02-24 16:42:55 UTC (rev 290435)
@@ -32,7 +32,7 @@
this._inspectorHasFocus = true;
this._lastUserInteractionTimestamp = undefined;
this._eventSamplingTimerIdentifier = undefined;
- this._overlayOptions = {};
+ this._nodesShowingGridLayoutOverlay = new Set;
}
// Static
@@ -51,8 +51,8 @@
window.addEventListener("blur", this, options);
window.addEventListener("keydown", this, options);
window.addEventListener("mousedown", this, options);
- WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayShown, this._handleGridOverlayShown, this);
- WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayHidden, this._handleGridOverlayHidden, this);
+ WI.DOMNode.addEventListener(WI.DOMNode.Event.LayoutOverlayShown, this._handleGridOverlayShown, this);
+ WI.DOMNode.addEventListener(WI.DOMNode.Event.LayoutOverlayHidden, this._handleGridOverlayHidden, this);
}
teardown()
@@ -64,8 +64,8 @@
window.removeEventListener("blur", this, options);
window.removeEventListener("keydown", this, options);
window.removeEventListener("mousedown", this, options);
- WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayShown, this._handleGridOverlayShown, this);
- WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayHidden, this._handleGridOverlayHidden, this);
+ WI.DOMNode.removeEventListener(WI.DOMNode.Event.LayoutOverlayShown, this._handleGridOverlayShown, this);
+ WI.DOMNode.removeEventListener(WI.DOMNode.Event.LayoutOverlayHidden, this._handleGridOverlayHidden, this);
this._stopEventSamplingTimerIfNeeded();
}
@@ -72,26 +72,23 @@
_handleGridOverlayShown(event)
{
- if (event.data.domNode.layoutContextType !== WI.DOMNode.LayoutContextType.Grid)
+ if (event.target.layoutContextType !== WI.DOMNode.LayoutContextType.Grid)
return;
- this._overlayOptions.showTrackSizes = event.data.showTrackSizes;
- this._overlayOptions.showLineNumbers = event.data.showLineNumbers;
- this._overlayOptions.showLineNames = event.data.showLineNames;
- this._overlayOptions.showAreaNames = event.data.showAreaNames;
- this._overlayOptions.showExtendedGridLines = event.data.showExtendedGridLines;
+ this._nodesShowingGridLayoutOverlay.add(event.target);
if (!this._eventSamplingTimerIdentifier)
this._startEventSamplingTimer();
}
- _handleGridOverlayHidden()
+ _handleGridOverlayHidden(event)
{
- if (WI.overlayManager.hasVisibleGridOverlays())
+ this._nodesShowingGridLayoutOverlay.delete(event.target);
+
+ if (this._nodesShowingGridLayoutOverlay.size)
return;
this._stopEventSamplingTimerIfNeeded();
- this._overlayOptions = {};
}
// Public
@@ -150,7 +147,11 @@
return;
let interval = WI.GridOverlayConfigurationDiagnosticEventRecorder.eventSamplingInterval / 1000;
- let {showTrackSizes, showLineNumbers, showLineNames, showAreaNames, showExtendedGridLines} = this._overlayOptions;
+ let showLineNames = WI.settings.gridOverlayShowLineNames.value;
+ let showLineNumbers = WI.settings.gridOverlayShowLineNumbers.value;
+ let showExtendedGridLines = WI.settings.gridOverlayShowExtendedGridLines.value;
+ let showTrackSizes = WI.settings.gridOverlayShowTrackSizes.value;
+ let showAreaNames = WI.settings.gridOverlayShowAreaNames.value;
// Encode the configuration of overlay options as a sum of increasing powers of 10 for each overlay option that is enabled (zero if disabled), convert to string and pad with zero if necessary.
// For example, "01100" = showTrackSizes: false, showLineNumbers: true, showLineNames: true, showAreaNames: false, showExtendedGridLines: false;
Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/GridOverlayDiagnosticEventRecorder.js (290434 => 290435)
--- trunk/Source/WebInspectorUI/UserInterface/Controllers/GridOverlayDiagnosticEventRecorder.js 2022-02-24 16:09:42 UTC (rev 290434)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/GridOverlayDiagnosticEventRecorder.js 2022-02-24 16:42:55 UTC (rev 290435)
@@ -28,8 +28,6 @@
constructor(controller)
{
super("GridOverlay", controller);
-
- this._initiators = Object.values(WI.GridOverlayDiagnosticEventRecorder.Initiator);
}
// Protected
@@ -36,12 +34,12 @@
setup()
{
- WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayShown, this._handleGridOverlayShown, this);
+ WI.DOMNode.addEventListener(WI.DOMNode.Event.LayoutOverlayShown, this._handleGridOverlayShown, this);
}
teardown()
{
- WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayShown, this._handleGridOverlayShown, this);
+ WI.DOMNode.removeEventListener(WI.DOMNode.Event.LayoutOverlayShown, this._handleGridOverlayShown, this);
}
// Private
@@ -48,19 +46,21 @@
_handleGridOverlayShown(event)
{
- if (event.data.domNode.layoutContextType !== WI.DOMNode.LayoutContextType.Grid)
+ if (event.target.layoutContextType !== WI.DOMNode.LayoutContextType.Grid)
return;
- let initiator = event.data.initiator;
- if (!initiator || !this._initiators.includes(initiator))
+ let {initiator} = event.data;
+ if (!initiator)
return;
- let showTrackSizes = event.data.showTrackSizes ? 1 : 0;
- let showLineNumbers = event.data.showLineNumbers ? 1 : 0;
- let showLineNames = event.data.showLineNames ? 1 : 0;
- let showAreaNames = event.data.showAreaNames ? 1 : 0;
- let showExtendedGridLines = event.data.showExtendedGridLines ? 1 : 0;
+ console.assert(Object.values(WI.GridOverlayDiagnosticEventRecorder.Initiator).includes(initiator), initiator);
+ let showTrackSizes = WI.settings.gridOverlayShowTrackSizes.value ? 1 : 0;
+ let showLineNumbers = WI.settings.gridOverlayShowLineNumbers.value ? 1 : 0;
+ let showLineNames = WI.settings.gridOverlayShowLineNames.value ? 1 : 0;
+ let showAreaNames = WI.settings.gridOverlayShowAreaNames.value ? 1 : 0;
+ let showExtendedGridLines = WI.settings.gridOverlayShowExtendedGridLines.value ? 1 : 0;
+
this.logDiagnosticEvent(this.name, {initiator, showTrackSizes, showLineNumbers, showLineNames, showAreaNames, showExtendedGridLines});
}
};
Deleted: trunk/Source/WebInspectorUI/UserInterface/Controllers/OverlayManager.js (290434 => 290435)
--- trunk/Source/WebInspectorUI/UserInterface/Controllers/OverlayManager.js 2022-02-24 16:09:42 UTC (rev 290434)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/OverlayManager.js 2022-02-24 16:42:55 UTC (rev 290435)
@@ -1,234 +0,0 @@
-/*
- * Copyright (C) 2021 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- * notice, this list of conditions and the following disclaimer in the
- * documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WI.OverlayManager = class OverlayManager extends WI.Object
-{
- constructor()
- {
- super();
-
- this._overlayForNodeMap = new Map;
- this._nextDefaultGridColorIndex = 0;
- this._nextDefaultFlexColorIndex = 0;
- this._colorForNodeMap = new WeakMap;
- this._colorSettingForNodeMap = new WeakMap;
-
- 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
-
- showOverlay(domNode, {color, initiator} = {})
- {
- console.assert(!domNode.destroyed, domNode);
- if (domNode.destroyed)
- return;
-
- console.assert(domNode instanceof WI.DOMNode, domNode);
- console.assert(!color || color instanceof WI.Color, color);
- console.assert(Object.values(WI.DOMNode.LayoutContextType).includes(domNode.layoutContextType), domNode);
-
- color ||= this.getColorForNode(domNode);
- let target = WI.assumingMainTarget();
- let commandArguments = {nodeId: domNode.id};
-
- switch (domNode.layoutContextType) {
- case WI.DOMNode.LayoutContextType.Grid:
- commandArguments.gridColor = color.toProtocol();
- commandArguments.showLineNames = WI.settings.gridOverlayShowLineNames.value;
- commandArguments.showLineNumbers = WI.settings.gridOverlayShowLineNumbers.value;
- commandArguments.showExtendedGridLines = WI.settings.gridOverlayShowExtendedGridLines.value;
- commandArguments.showTrackSizes = WI.settings.gridOverlayShowTrackSizes.value;
- commandArguments.showAreaNames = WI.settings.gridOverlayShowAreaNames.value;
- target.DOMAgent.showGridOverlay.invoke(commandArguments);
- break;
-
- case WI.DOMNode.LayoutContextType.Flex:
- commandArguments.flexColor = color.toProtocol();
- target.DOMAgent.showFlexOverlay.invoke(commandArguments);
- break;
- }
-
- let overlay = {domNode, ...commandArguments, initiator};
-
- // The method to show the overlay will be called repeatedly while updating the grid overlay color. Avoid adding duplicate event listeners
- if (!this._overlayForNodeMap.has(domNode))
- domNode.addEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
-
- this._overlayForNodeMap.set(domNode, overlay);
-
- this.dispatchEventToListeners(WI.OverlayManager.Event.OverlayShown, overlay);
- }
-
- hideOverlay(domNode)
- {
- console.assert(domNode instanceof WI.DOMNode, domNode);
- console.assert(!domNode.destroyed, domNode);
- console.assert(Object.values(WI.DOMNode.LayoutContextType).includes(domNode.layoutContextType), domNode);
- if (domNode.destroyed)
- return;
-
- let overlay = this._overlayForNodeMap.take(domNode);
- if (!overlay)
- return;
-
- let target = WI.assumingMainTarget();
-
- switch (domNode.layoutContextType) {
- case WI.DOMNode.LayoutContextType.Grid:
- target.DOMAgent.hideGridOverlay(domNode.id);
- break;
-
- case WI.DOMNode.LayoutContextType.Flex:
- target.DOMAgent.hideFlexOverlay(domNode.id);
- break;
- }
-
- domNode.removeEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
- this.dispatchEventToListeners(WI.OverlayManager.Event.OverlayHidden, overlay);
- }
-
- hasVisibleGridOverlays()
- {
- for (let domNode of this._overlayForNodeMap.keys()) {
- if (domNode.layoutContextType === WI.DOMNode.LayoutContextType.Grid)
- return true;
- }
- return false;
- }
-
- hasVisibleOverlay(domNode)
- {
- return this._overlayForNodeMap.has(domNode);
- }
-
- toggleOverlay(domNode, options)
- {
- if (this.hasVisibleOverlay(domNode))
- this.hideOverlay(domNode);
- else
- this.showOverlay(domNode, options);
- }
-
- getColorForNode(domNode)
- {
- let color = this._colorForNodeMap.get(domNode);
- if (color)
- return color;
-
- let colorSetting = this._colorSettingForNodeMap.get(domNode);
- if (!colorSetting) {
- let nextColorIndex;
- switch (domNode.layoutContextType) {
- case WI.DOMNode.LayoutContextType.Grid:
- nextColorIndex = this._nextDefaultGridColorIndex;
- this._nextDefaultGridColorIndex = (nextColorIndex + 1) % WI.OverlayManager._defaultHSLColors.length;
- break;
-
- case WI.DOMNode.LayoutContextType.Flex:
- nextColorIndex = this._nextDefaultFlexColorIndex;
- this._nextDefaultFlexColorIndex = (nextColorIndex + 1) % WI.OverlayManager._defaultHSLColors.length;
- break;
- }
- let defaultColor = WI.OverlayManager._defaultHSLColors[nextColorIndex];
-
- let url = "" || WI.networkManager.mainFrame.url;
- colorSetting = new WI.Setting(`overlay-color-${url.hash}-${domNode.path().hash}`, defaultColor);
- this._colorSettingForNodeMap.set(domNode, colorSetting);
- }
-
- color = new WI.Color(WI.Color.Format.HSL, colorSetting.value);
- this._colorForNodeMap.set(domNode, color);
-
- return color;
- }
-
- setColorForNode(domNode, color)
- {
- console.assert(domNode instanceof WI.DOMNode, domNode);
- console.assert(color instanceof WI.Color, color);
-
- let colorSetting = this._colorSettingForNodeMap.get(domNode);
- console.assert(colorSetting, "There should already be a setting created form a previous call to getColorForNode()");
- colorSetting.value = color.hsl;
-
- this._colorForNodeMap.set(domNode, color);
- }
-
- // Private
-
- _handleLayoutContextTypeChanged(event)
- {
- let domNode = event.target;
-
- domNode.removeEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
-
- // When the context type changes, the overlay is automatically hidden on the backend (even if it changes from Grid to Flex, or vice-versa).
- // Here, we only update the map and notify listeners.
- let overlay = this._overlayForNodeMap.take(domNode);
- this.dispatchEventToListeners(WI.OverlayManager.Event.OverlayHidden, overlay);
- }
-
- _handleGridSettingChanged(event)
- {
- for (let [domNode, overlay] of this._overlayForNodeMap) {
- if (domNode.layoutContextType === WI.DOMNode.LayoutContextType.Grid)
- this.showOverlay(domNode, {color: overlay.color, initiator: overlay.initiator});
- }
- }
-
- _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 _nextDefaultGridColorIndex,
- // the 2nd default color would be used instead.
- //
- // `domNode.id` is different for the same DOM element after page reload.
- this._nextDefaultGridColorIndex = 0;
- this._nextDefaultFlexColorIndex = 0;
- }
-};
-
-WI.OverlayManager._defaultHSLColors = [
- [329, 91, 70],
- [207, 96, 69],
- [92, 90, 64],
- [291, 73, 68],
- [40, 97, 57],
-];
-
-WI.OverlayManager.Event = {
- OverlayShown: "overlay-manager-overlay-shown",
- OverlayHidden: "overlay-manager-overlay-hidden",
-};
Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (290434 => 290435)
--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2022-02-24 16:09:42 UTC (rev 290434)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2022-02-24 16:42:55 UTC (rev 290435)
@@ -934,7 +934,6 @@
<script src=""
<script src=""
<script src=""
- <script src=""
<script src=""
<script src=""
<script src=""
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/DOMNode.js (290434 => 290435)
--- trunk/Source/WebInspectorUI/UserInterface/Models/DOMNode.js 2022-02-24 16:09:42 UTC (rev 290434)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/DOMNode.js 2022-02-24 16:42:55 UTC (rev 290435)
@@ -53,6 +53,8 @@
this._computedRole = null;
this._contentSecurityPolicyHash = payload.contentSecurityPolicyHash;
this._layoutContextType = null;
+ this._layoutOverlayShowing = false;
+ this._layoutOverlayColorSetting = null;
if (this._nodeType === Node.DOCUMENT_NODE)
this.ownerDocument = this;
@@ -161,6 +163,13 @@
// Static
+ static resetDefaultLayoutOverlayConfiguration()
+ {
+ let configuration = WI.DOMNode._defaultLayoutOverlayConfiguration;
+ configuration.nextFlexColorIndex = 0;
+ configuration.nextGridColorIndex = 0;
+ }
+
static getFullscreenDOMEvents(domEvents)
{
return domEvents.reduce((accumulator, current) => {
@@ -199,6 +208,7 @@
get children() { return this._children; }
get domEvents() { return this._domEvents; }
get powerEfficientPlaybackRanges() { return this._powerEfficientPlaybackRanges; }
+ get layoutOverlayShowing() { return this._layoutOverlayShowing; }
get attached()
{
@@ -257,8 +267,26 @@
if (layoutContextType === this._layoutContextType)
return;
+ let oldLayoutContextType = this._layoutContextType;
this._layoutContextType = layoutContextType;
+
this.dispatchEventToListeners(WI.DOMNode.Event.LayoutContextTypeChanged);
+
+ if (!this._layoutOverlayShowing)
+ return;
+
+ // The overlay is automatically hidden on the backend when the context type changes.
+ this.dispatchEventToListeners(WI.DOMNode.Event.LayoutOverlayHidden);
+
+ switch (oldLayoutContextType) {
+ case WI.DOMNode.LayoutContextType.Grid:
+ WI.settings.gridOverlayShowExtendedGridLines.removeEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
+ WI.settings.gridOverlayShowLineNames.removeEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
+ WI.settings.gridOverlayShowLineNumbers.removeEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
+ WI.settings.gridOverlayShowTrackSizes.removeEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
+ WI.settings.gridOverlayShowAreaNames.removeEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
+ break;
+ }
}
markDestroyed()
@@ -574,6 +602,105 @@
target.DOMAgent.highlightNode(WI.DOMManager.buildHighlightConfig(mode), this.id);
}
+ showLayoutOverlay({color, initiator} = {})
+ {
+ console.assert(!this._destroyed, this);
+ if (this._destroyed)
+ return Promise.reject("ERROR: node is destroyed");
+
+ console.assert(Object.values(WI.DOMNode.LayoutContextType).includes(this._layoutContextType), this);
+
+ console.assert(!color || color instanceof WI.Color, color);
+ color ||= this.layoutOverlayColor;
+
+ let target = WI.assumingMainTarget();
+ let agentCommandFunction = null;
+ let agentCommandArguments = {nodeId: this.id};
+
+ switch (this._layoutContextType) {
+ case WI.DOMNode.LayoutContextType.Grid:
+ agentCommandArguments.gridColor = color.toProtocol();
+ agentCommandArguments.showLineNames = WI.settings.gridOverlayShowLineNames.value;
+ agentCommandArguments.showLineNumbers = WI.settings.gridOverlayShowLineNumbers.value;
+ agentCommandArguments.showExtendedGridLines = WI.settings.gridOverlayShowExtendedGridLines.value;
+ agentCommandArguments.showTrackSizes = WI.settings.gridOverlayShowTrackSizes.value;
+ agentCommandArguments.showAreaNames = WI.settings.gridOverlayShowAreaNames.value;
+ agentCommandFunction = target.DOMAgent.showGridOverlay;
+
+ if (!this._layoutOverlayShowing) {
+ WI.settings.gridOverlayShowExtendedGridLines.addEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
+ WI.settings.gridOverlayShowLineNames.addEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
+ WI.settings.gridOverlayShowLineNumbers.addEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
+ WI.settings.gridOverlayShowTrackSizes.addEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
+ WI.settings.gridOverlayShowAreaNames.addEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
+ }
+ break;
+
+ case WI.DOMNode.LayoutContextType.Flex:
+ agentCommandArguments.flexColor = color.toProtocol();
+ agentCommandFunction = target.DOMAgent.showFlexOverlay;
+ break;
+ }
+
+ this._layoutOverlayShowing = true;
+
+ this.dispatchEventToListeners(WI.DOMNode.Event.LayoutOverlayShown, {initiator});
+
+ console.assert(agentCommandFunction);
+ return agentCommandFunction.invoke(agentCommandArguments);
+ }
+
+ hideLayoutOverlay()
+ {
+ console.assert(!this._destroyed, this);
+ if (this._destroyed)
+ return Promise.reject("ERROR: node is destroyed");
+
+ console.assert(Object.values(WI.DOMNode.LayoutContextType).includes(this._layoutContextType), this);
+
+ let target = WI.assumingMainTarget();
+ let agentCommandFunction;
+ let agentCommandArguments = {nodeId: this.id};
+
+ switch (this._layoutContextType) {
+ case WI.DOMNode.LayoutContextType.Grid:
+ WI.settings.gridOverlayShowExtendedGridLines.removeEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
+ WI.settings.gridOverlayShowLineNames.removeEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
+ WI.settings.gridOverlayShowLineNumbers.removeEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
+ WI.settings.gridOverlayShowTrackSizes.removeEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
+ WI.settings.gridOverlayShowAreaNames.removeEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
+
+ agentCommandFunction = target.DOMAgent.hideGridOverlay;
+ break;
+
+ case WI.DOMNode.LayoutContextType.Flex:
+ agentCommandFunction = target.DOMAgent.hideFlexOverlay;
+ break;
+ }
+
+ console.assert(this._layoutOverlayShowing, this);
+ this._layoutOverlayShowing = false;
+
+ this.dispatchEventToListeners(WI.DOMNode.Event.LayoutOverlayHidden);
+
+ console.assert(agentCommandFunction);
+ return agentCommandFunction.invoke(agentCommandArguments);
+ }
+
+ get layoutOverlayColor()
+ {
+ this._createLayoutOverlayColorSettingIfNeeded();
+ return new WI.Color(WI.Color.Format.HSL, this._layoutOverlayColorSetting.value);
+ }
+
+ set layoutOverlayColor(color)
+ {
+ console.assert(color instanceof WI.Color, color);
+
+ this._createLayoutOverlayColorSettingIfNeeded();
+ this._layoutOverlayColorSetting.value = color.hsl;
+ }
+
scrollIntoView()
{
WI.RemoteObject.resolveNode(this).then((object) => {
@@ -1106,8 +1233,51 @@
return `${selector}.${(shouldEscape ? CSS.escape(className) : className)}`;
}, "");
}
+
+ _createLayoutOverlayColorSettingIfNeeded()
+ {
+ if (this._layoutOverlayColorSetting)
+ return;
+
+ let defaultConfiguration = WI.DOMNode._defaultLayoutOverlayConfiguration;
+
+ let url = "" || WI.networkManager.mainFrame.url;
+
+ let nextColorIndex;
+ switch (this._layoutContextType) {
+ case WI.DOMNode.LayoutContextType.Grid:
+ nextColorIndex = defaultConfiguration.nextGridColorIndex;
+ defaultConfiguration.nextGridColorIndex = (nextColorIndex + 1) % defaultConfiguration.colors.length;
+ break;
+
+ case WI.DOMNode.LayoutContextType.Flex:
+ nextColorIndex = defaultConfiguration.nextFlexColorIndex;
+ defaultConfiguration.nextFlexColorIndex = (nextColorIndex + 1) % defaultConfiguration.colors.length;
+ break;
+ }
+
+ this._layoutOverlayColorSetting = new WI.Setting(`overlay-color-${url.hash}-${this.path().hash}`, defaultConfiguration.colors[nextColorIndex]);
+ }
+
+ _handleGridLayoutOverlaySettingChanged(event)
+ {
+ if (this._layoutOverlayShowing)
+ this.showLayoutOverlay();
+ }
};
+WI.DOMNode._defaultLayoutOverlayConfiguration = {
+ colors: [
+ [329, 91, 70],
+ [207, 96, 69],
+ [92, 90, 64],
+ [291, 73, 68],
+ [40, 97, 57],
+ ],
+ nextFlexColorIndex: 0,
+ nextGridColorIndex: 0,
+};
+
WI.DOMNode.Event = {
EnabledPseudoClassesChanged: "dom-node-enabled-pseudo-classes-did-change",
AttributeModified: "dom-node-attribute-modified",
@@ -1116,6 +1286,8 @@
DidFireEvent: "dom-node-did-fire-event",
PowerEfficientPlaybackStateChanged: "dom-node-power-efficient-playback-state-changed",
LayoutContextTypeChanged: "dom-node-layout-context-type-changed",
+ LayoutOverlayShown: "dom-node-layout-overlay-shown",
+ LayoutOverlayHidden: "dom-node-layout-overlay-hidden",
};
WI.DOMNode.PseudoElementType = {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js (290434 => 290435)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js 2022-02-24 16:09:42 UTC (rev 290434)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js 2022-02-24 16:42:55 UTC (rev 290435)
@@ -445,8 +445,8 @@
}
if (this.representedObject.layoutContextType) {
- WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayShown, this._updateLayoutBadgeStatus, this);
- WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayHidden, this._updateLayoutBadgeStatus, this);
+ this.representedObject.addEventListener(WI.DOMNode.Event.LayoutOverlayShown, this._updateLayoutBadgeStatus, this);
+ this.representedObject.addEventListener(WI.DOMNode.Event.LayoutOverlayHidden, this._updateLayoutBadgeStatus, this);
}
this.representedObject.addEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
@@ -456,8 +456,8 @@
ondetach()
{
if (this.representedObject.layoutContextType === WI.DOMNode.LayoutContextType.Grid) {
- WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayShown, this._updateLayoutBadgeStatus, this);
- WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayHidden, this._updateLayoutBadgeStatus, this);
+ this.representedObject.removeEventListener(WI.DOMNode.Event.LayoutOverlayShown, this._updateLayoutBadgeStatus, this);
+ this.representedObject.removeEventListener(WI.DOMNode.Event.LayoutOverlayHidden, this._updateLayoutBadgeStatus, this);
}
this.representedObject.removeEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
}
@@ -2054,9 +2054,13 @@
// Don't expand or collapse a tree element when clicking on the grid badge.
event.stop();
- WI.overlayManager.toggleOverlay(this.representedObject, {
- initiator: this.representedObject.layoutContextType === WI.DOMNode.LayoutContextType.Grid ? WI.GridOverlayDiagnosticEventRecorder.Initiator.Badge : null,
- });
+ if (this.representedObject.layoutOverlayShowing)
+ this.representedObject.hideLayoutOverlay();
+ else {
+ this.representedObject.showLayoutOverlay({
+ initiator: this.representedObject.layoutContextType === WI.DOMNode.LayoutContextType.Grid ? WI.GridOverlayDiagnosticEventRecorder.Initiator.Badge : null,
+ });
+ }
}
_layoutBadgeDoubleClicked(event)
@@ -2069,11 +2073,11 @@
if (!this._layoutBadgeElement)
return;
- let hasVisibleOverlay = WI.overlayManager.hasVisibleOverlay(this.representedObject);
+ let hasVisibleOverlay = this.representedObject.layoutOverlayShowing;
this._layoutBadgeElement.classList.toggle("activated", hasVisibleOverlay);
if (hasVisibleOverlay) {
- let color = WI.overlayManager.getColorForNode(this.representedObject);
+ let color = this.representedObject.layoutOverlayColor;
let hue = color.hsl[0];
this._layoutBadgeElement.style.borderColor = color.toString();
this._layoutBadgeElement.style.backgroundColor = `hsl(${hue}, 90%, 95%)`;
@@ -2085,12 +2089,12 @@
_handleLayoutContextTypeChanged(event)
{
let domNode = event.target;
- if (domNode.layoutContextType) {
- WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayShown, this._updateLayoutBadgeStatus, this);
- WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayHidden, this._updateLayoutBadgeStatus, this);
- } else {
- WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayShown, this._updateLayoutBadgeStatus, this);
- WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayHidden, this._updateLayoutBadgeStatus, this);
+ if (domNode.layoutContextType && !this._layoutBadgeElement) {
+ this.representedObject.addEventListener(WI.DOMNode.Event.LayoutOverlayShown, this._updateLayoutBadgeStatus, this);
+ this.representedObject.addEventListener(WI.DOMNode.Event.LayoutOverlayHidden, this._updateLayoutBadgeStatus, this);
+ } else if (!domNode.layoutContextType && this._layoutBadgeElement) {
+ this.representedObject.removeEventListener(WI.DOMNode.Event.LayoutOverlayShown, this._updateLayoutBadgeStatus, this);
+ this.representedObject.removeEventListener(WI.DOMNode.Event.LayoutOverlayHidden, this._updateLayoutBadgeStatus, this);
}
this._updateLayoutBadge();
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NodeOverlayListSection.js (290434 => 290435)
--- trunk/Source/WebInspectorUI/UserInterface/Views/NodeOverlayListSection.js 2022-02-24 16:09:42 UTC (rev 290434)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NodeOverlayListSection.js 2022-02-24 16:42:55 UTC (rev 290435)
@@ -56,14 +56,14 @@
{
super.attached();
- WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayShown, this._handleOverlayStateChanged, this);
- WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayHidden, this._handleOverlayStateChanged, this);
+ WI.DOMNode.addEventListener(WI.DOMNode.Event.LayoutOverlayShown, this._handleOverlayStateChanged, this);
+ WI.DOMNode.addEventListener(WI.DOMNode.Event.LayoutOverlayHidden, this._handleOverlayStateChanged, this);
}
detached()
{
- WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayShown, this._handleOverlayStateChanged, this);
- WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayHidden, this._handleOverlayStateChanged, this);
+ WI.DOMNode.removeEventListener(WI.DOMNode.Event.LayoutOverlayShown, this._handleOverlayStateChanged, this);
+ WI.DOMNode.removeEventListener(WI.DOMNode.Event.LayoutOverlayHidden, this._handleOverlayStateChanged, this);
super.detached();
}
@@ -107,7 +107,7 @@
let checkboxElement = labelElement.appendChild(document.createElement("input"));
labelElement.insertBefore(checkboxElement, nodeDisplayName);
checkboxElement.type = "checkbox";
- checkboxElement.checked = WI.overlayManager.hasVisibleOverlay(domNode);
+ checkboxElement.checked = domNode.layoutOverlayShowing;
this._checkboxElementByNodeMap.set(domNode, checkboxElement);
@@ -117,27 +117,22 @@
checkboxElement.addEventListener("change", (event) => {
if (checkboxElement.checked)
- WI.overlayManager.showOverlay(domNode, {color: swatch?.value, initiator});
+ domNode.showLayoutOverlay({color: swatch?.value, initiator});
else
- WI.overlayManager.hideOverlay(domNode);
+ domNode.hideLayoutOverlay();
});
- let color = WI.overlayManager.getColorForNode(domNode);
- let swatch = new WI.InlineSwatch(WI.InlineSwatch.Type.Color, color);
+ let swatch = new WI.InlineSwatch(WI.InlineSwatch.Type.Color, domNode.layoutOverlayColor);
swatch.shiftClickColorEnabled = false;
itemContainerElement.append(swatch.element);
swatch.addEventListener(WI.InlineSwatch.Event.ValueChanged, (event) => {
if (checkboxElement?.checked)
- WI.overlayManager.showOverlay(domNode, {color: event.data.value});
+ domNode.showLayoutOverlay({color: event.data.value});
}, swatch);
swatch.addEventListener(WI.InlineSwatch.Event.Deactivated, (event) => {
- if (event.target.value === color)
- return;
-
- color = event.target.value;
- WI.overlayManager.setColorForNode(domNode, color);
+ domNode.layoutOverlayColor = event.target.value;
}, swatch);
let buttonElement = itemContainerElement.appendChild(WI.createGoToArrowButton());
@@ -152,11 +147,11 @@
_handleOverlayStateChanged(event)
{
- let checkboxElement = this._checkboxElementByNodeMap.get(event.data.domNode);
+ let checkboxElement = this._checkboxElementByNodeMap.get(event.target);
if (!checkboxElement)
return;
- checkboxElement.checked = event.type === WI.OverlayManager.Event.OverlayShown;
+ checkboxElement.checked = event.target.layoutOverlayShowing;
this._updateToggleAllCheckbox();
}
@@ -167,9 +162,9 @@
for (let domNode of this._nodeSet) {
if (isChecked)
- WI.overlayManager.showOverlay(domNode);
+ domNode.showLayoutOverlay();
else
- WI.overlayManager.hideOverlay(domNode);
+ domNode.hideLayoutOverlay();
}
this._suppressUpdateToggleAllCheckbox = false;
@@ -183,8 +178,7 @@
let hasVisible = false;
let hasHidden = false;
for (let domNode of this._nodeSet) {
- let isVisible = WI.overlayManager.hasVisibleOverlay(domNode);
- if (isVisible)
+ if (domNode.layoutOverlayShowing)
hasVisible = true;
else
hasHidden = true;
