Bug 1623667 - [devtools] Update Debugger to use Box Model Highlighter r=ochameau

Depends on D92224

Update Debugger tests to use the Toolbox shortcut to highlighters introduced in D92222.

Differential Revision: https://phabricator.services.mozilla.com/D92225

devtools/client/debugger/panel.js

@@ -163,8 +163,7 @@ class DebuggerPanel {
       return;
     }
 
-    const forceUnHighlightInTest = true;
+    return this._unhighlight();
-    return this._unhighlight(forceUnHighlightInTest);
   }
 
   getFrames() {

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 = toolbox.getHighlighter().waitForHighlighterShown();
-  const onNodeHighlight = inspectorFront.highlighter.once("node-highlight");
 
   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

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 = highlighter.waitForHighlighterShown();
-  let onNodeHighlight = inspectorFront.highlighter.once("node-highlight");
 
   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");
+  info("Wait for highligther to be shown");
-  const nodeFront = await onNodeHighlight;
+  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");
+  onNodeHighlight = highlighter.waitForHighlighterShown();
-  onNodeUnhighlight = inspectorFront.highlighter.once("node-unhighlight");
+  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 = await toolbox.loadTool("inspector");
-  const inspector = toolbox.getPanel("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 = await toolbox.loadTool("inspector");
-  const inspector = toolbox.getPanel("inspector");
 
   const onInspectorSelected = toolbox.once("inspector-selected");
   const onInspectorUpdated = inspector.once("inspector-updated");

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 };
 };

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

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";
-  }
+    // The currently active highlighter is obtained by calling a custom getter
-
+    // provided manually after requesting TestFront. See `getTestActor(toolbox)`
-  async initialize() {
+    this._highlighter = null;
-    // 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;
   }
 
   /**
@@ -861,13 +857,8 @@ 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;
   }
-  }
 
   /**
    * The currently active highlighter instance.
@@ -876,10 +867,9 @@ class TestFront extends protocol.FrontClassWithSpec(testSpec) {
    * @return {Highlighter|null}
    */
   get highlighter() {
-    if (this._customHighlighterGetter) {
+    return typeof this._highlighter === "function"
-      return this._customHighlighterGetter();
+      ? this._highlighter()
-    }
+      : this._highlighter;
-    return this._highlighter;
   }
 
   /**