diff --git a/devtools/client/debugger/panel.js b/devtools/client/debugger/panel.js index 00c45a7d8557..e9c2634baa0b 100644 --- a/devtools/client/debugger/panel.js +++ b/devtools/client/debugger/panel.js @@ -163,8 +163,7 @@ class DebuggerPanel { return; } - const forceUnHighlightInTest = true; - return this._unhighlight(forceUnHighlightInTest); + return this._unhighlight(); } getFrames() { diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-inline-preview.js b/devtools/client/debugger/test/mochitest/browser_dbg-inline-preview.js index 6a798fe0e66b..cb8f2767fb0c 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-inline-preview.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-inline-preview.js @@ -79,12 +79,11 @@ async function checkInspectorIcon(dbg) { // Ensure hovering over button highlights the node in content pane const view = node.ownerDocument.defaultView; - const inspectorFront = await toolbox.target.getFront("inspector"); - const onNodeHighlight = inspectorFront.highlighter.once("node-highlight"); + const onNodeHighlight = toolbox.getHighlighter().waitForHighlighterShown(); EventUtils.synthesizeMouseAtCenter(node, { type: "mousemove" }, view); - const nodeFront = await onNodeHighlight; + const { nodeFront } = await onNodeHighlight; is(nodeFront.displayName, "button", "The correct node was highlighted"); // Ensure panel changes when button is clicked diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-inspector-integration.js b/devtools/client/debugger/test/mochitest/browser_dbg-inspector-integration.js index df23eb8914b4..1b080e15bde8 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-inspector-integration.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-inspector-integration.js @@ -14,6 +14,7 @@ add_task(async function() { const dbg = await initDebugger("doc-script-switching.html"); const { toolbox } = dbg; const testActor = await getTestActor(toolbox); + const highlighter = toolbox.getHighlighter(); // Bug 1562165: the WhyPaused element is displayed for a few hundred ms when adding an // expression, which can break synthesizeMouseAtCenter. So here we wait for the @@ -30,8 +31,7 @@ add_task(async function() { info( "Check that hovering over DOM element highlights the node in content panel" ); - const inspectorFront = await toolbox.target.getFront("inspector"); - let onNodeHighlight = inspectorFront.highlighter.once("node-highlight"); + let onNodeHighlight = highlighter.waitForHighlighterShown(); info("Mouseover the open in inspector button"); const inspectorNode = await waitUntilPredicate(() => @@ -44,14 +44,12 @@ add_task(async function() { view ); - info("Wait for node-highlight"); - const nodeFront = await onNodeHighlight; + info("Wait for highligther to be shown"); + const { nodeFront } = await onNodeHighlight; is(nodeFront.displayName, "button", "The correct node was highlighted"); - isVisible = await testActor.isHighlighting(); - ok(isVisible, "Highlighter is displayed"); info("Check that moving the mouse away from the node hides the highlighter"); - let onNodeUnhighlight = inspectorFront.highlighter.once("node-unhighlight"); + let onNodeUnhighlight = highlighter.waitForHighlighterHidden(); const nonHighlightEl = inspectorNode.closest(".object-node"); EventUtils.synthesizeMouseAtCenter( nonHighlightEl, @@ -64,8 +62,8 @@ add_task(async function() { is(isVisible, false, "The highlighter is not displayed anymore"); info("Check we don't have zombie highlighters when briefly hovering a node"); - onNodeHighlight = inspectorFront.highlighter.once("node-highlight"); - onNodeUnhighlight = inspectorFront.highlighter.once("node-unhighlight"); + onNodeHighlight = highlighter.waitForHighlighterShown(); + onNodeUnhighlight = highlighter.waitForHighlighterHidden(); // Move hover the node and then, right after, move out. EventUtils.synthesizeMouseAtCenter( @@ -86,9 +84,7 @@ add_task(async function() { info("Ensure panel changes when button is clicked"); // Loading the inspector panel at first, to make it possible to listen for // new node selections - await toolbox.loadTool("inspector"); - const inspector = toolbox.getPanel("inspector"); - + const inspector = await toolbox.loadTool("inspector"); const onInspectorSelected = toolbox.once("inspector-selected"); const onInspectorUpdated = inspector.once("inspector-updated"); const onNewNode = toolbox.selection.once("new-node-front"); @@ -128,8 +124,7 @@ add_task(async function() { // Loading the inspector panel at first, to make it possible to listen for // new node selections - await toolbox.loadTool("inspector"); - const inspector = toolbox.getPanel("inspector"); + const inspector = await toolbox.loadTool("inspector"); const onInspectorSelected = toolbox.once("inspector-selected"); const onInspectorUpdated = inspector.once("inspector-updated"); diff --git a/devtools/client/inspector/test/shared-head.js b/devtools/client/inspector/test/shared-head.js index 8a7dfc499494..1077e34f0bc0 100644 --- a/devtools/client/inspector/test/shared-head.js +++ b/devtools/client/inspector/test/shared-head.js @@ -36,12 +36,6 @@ var openInspector = async function(hostType) { } const testActor = await getTestActor(toolbox); - // Override the highligher getter with a method to return the active box model - // highlighter. Adaptation for multi-process scenarios where there can be multiple - // highlighters, one per process. - testActor.highlighter = () => { - return inspector.highlighters.getActiveHighlighter("BoxModelHighlighter"); - }; return { toolbox, inspector, testActor }; }; diff --git a/devtools/client/shared/test/shared-head.js b/devtools/client/shared/test/shared-head.js index f76d1ac5fb2a..42f3f2cc4d0f 100644 --- a/devtools/client/shared/test/shared-head.js +++ b/devtools/client/shared/test/shared-head.js @@ -184,7 +184,18 @@ registerCleanupFunction(() => { // Spawn an instance of the test actor for the given toolbox async function getTestActor(toolbox) { - return toolbox.target.getFront("test"); + // Loading the Inspector panel in order to overwrite the TestActor getter for the + // highlighter instance with a method that points to the currently visible + // Box Model Highlighter managed by the Inspector panel. + const inspector = await toolbox.loadTool("inspector"); + const testActor = await toolbox.target.getFront("test"); + // Override the highligher getter with a method to return the active box model + // highlighter. Adaptation for multi-process scenarios where there can be multiple + // highlighters, one per process. + testActor.highlighter = () => { + return inspector.highlighters.getActiveHighlighter("BoxModelHighlighter"); + }; + return testActor; } // Sometimes, we need the test actor before opening or without a toolbox then just diff --git a/devtools/client/shared/test/test-actor.js b/devtools/client/shared/test/test-actor.js index c353a7fa75c9..79291efc51f9 100644 --- a/devtools/client/shared/test/test-actor.js +++ b/devtools/client/shared/test/test-actor.js @@ -845,13 +845,9 @@ class TestFront extends protocol.FrontClassWithSpec(testSpec) { constructor(client, targetFront, parentFront) { super(client, targetFront, parentFront); this.formAttributeName = "testActor"; - } - - async initialize() { - // TODO: Remove reference to highlighter from top-level target after - // updating all non-Inspector consumers for the highlighter. Bug 1623667 - const inspectorFront = await this.targetFront.getFront("inspector"); - this._highlighter = inspectorFront.highlighter; + // The currently active highlighter is obtained by calling a custom getter + // provided manually after requesting TestFront. See `getTestActor(toolbox)` + this._highlighter = null; } /** @@ -861,12 +857,7 @@ class TestFront extends protocol.FrontClassWithSpec(testSpec) { * @param {Function|Highlighter} _customHighlighterGetter */ set highlighter(_customHighlighterGetter) { - if (typeof _customHighlighterGetter === "function") { - this._customHighlighterGetter = _customHighlighterGetter; - } else { - this._customHighlighterGetter = null; - this._highlighter = _customHighlighterGetter; - } + this._highlighter = _customHighlighterGetter; } /** @@ -876,10 +867,9 @@ class TestFront extends protocol.FrontClassWithSpec(testSpec) { * @return {Highlighter|null} */ get highlighter() { - if (this._customHighlighterGetter) { - return this._customHighlighterGetter(); - } - return this._highlighter; + return typeof this._highlighter === "function" + ? this._highlighter() + : this._highlighter; } /**