Bug 1623667 - [devtools] Update Console to use Box Model Highlighter r=nchevobbe

Depends on D92226

Update Console tests to use the Toolbox shortcut to the highlighter. See D92222.
The Console itself [already uses that shortcut](https://searchfox.org/mozilla-central/rev/222e4f64b769413ac1a1991d2397b13a0acb5d9d/devtools/client/webconsole/webconsole.js#385-396).

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

devtools/client/webconsole/test/browser/browser_jsterm_eager_evaluation_element_highlight.js

@@ -22,47 +22,51 @@ add_task(async function() {
   const { autocompletePopup } = jsterm;
 
   const testActor = await getTestActor(toolbox);
-  const inspectorFront = await toolbox.target.getFront("inspector");
+  const highlighter = toolbox.getHighlighter();
+  let onHighlighterShown;
+  let onHighlighterHidden;
+  let data;
 
   ok(!autocompletePopup.isOpen, "popup is not open");
   const onPopupOpen = autocompletePopup.once("popup-opened");
-  let onNodeHighlight = inspectorFront.highlighter.once("node-highlight");
+  onHighlighterShown = highlighter.waitForHighlighterShown();
   EventUtils.sendString("x.");
   await onPopupOpen;
 
   await waitForEagerEvaluationResult(hud, `<h1 class="title">`);
-  await onNodeHighlight;
-  let nodeFront = await onNodeHighlight;
-  is(nodeFront.displayName, "h1", "The correct node was highlighted");
+  data = await onHighlighterShown;
+  is(data.nodeFront.displayName, "h1", "The correct node was highlighted");
   isVisible = await testActor.isHighlighting();
   is(isVisible, true, "Highlighter is displayed");
 
-  onNodeHighlight = inspectorFront.highlighter.once("node-highlight");
+  onHighlighterShown = highlighter.waitForHighlighterShown();
   EventUtils.synthesizeKey("KEY_ArrowDown");
   await waitForEagerEvaluationResult(hud, `<div id="mydiv">`);
-  await onNodeHighlight;
-  nodeFront = await onNodeHighlight;
-  is(nodeFront.displayName, "div", "The correct node was highlighted");
+  data = await onHighlighterShown;
+  is(data.nodeFront.displayName, "div", "The correct node was highlighted");
   isVisible = await testActor.isHighlighting();
   is(isVisible, true, "Highlighter is displayed");
 
-  let onNodeUnhighlight = inspectorFront.highlighter.once("node-unhighlight");
+  onHighlighterHidden = highlighter.waitForHighlighterHidden();
   EventUtils.synthesizeKey("KEY_ArrowDown");
   await waitForEagerEvaluationResult(hud, `<hr>`);
-  await onNodeUnhighlight;
+  await onHighlighterHidden;
   ok(true, "The highlighter isn't displayed on a non-connected element");
 
   info("Test that text nodes are highlighted");
-  onNodeHighlight = inspectorFront.highlighter.once("node-highlight");
+  onHighlighterShown = highlighter.waitForHighlighterShown();
   EventUtils.sendString("b.firstChild");
   await waitForEagerEvaluationResult(hud, `#text "mydivtext"`);
-  await onNodeHighlight;
-  nodeFront = await onNodeHighlight;
-  is(nodeFront.displayName, "#text", "The correct text node was highlighted");
+  data = await onHighlighterShown;
+  is(
+    data.nodeFront.displayName,
+    "#text",
+    "The correct text node was highlighted"
+  );
   isVisible = await testActor.isHighlighting();
   is(isVisible, true, "Highlighter is displayed");
 
-  onNodeUnhighlight = inspectorFront.highlighter.once("node-unhighlight");
+  onHighlighterHidden = highlighter.waitForHighlighterHidden();
   EventUtils.synthesizeKey("KEY_Enter");
   await waitFor(() => findMessage(hud, `#text "mydivtext"`, ".result"));
   await waitForNoEagerEvaluationResult(hud);

devtools/client/webconsole/test/browser/browser_webconsole_inspect_cross_domain_object.js

@@ -89,24 +89,19 @@ 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 highlighter = toolbox.getHighlighter();
 
   const elementNode = oi3.querySelector(".objectBox-node");
   ok(elementNode !== null, "Node was logged as expected");
   const view = node.ownerDocument.defaultView;
 
   info("Highlight the node by moving the cursor on it");
-  // the inspector should be initialized first and then the node should
-  // highlight after the hover effect.
-  const objectFront = hud.currentTarget.client.getFrontByID(
-    elementNode.getAttribute("data-link-actor-id")
-  );
-  const inspectorFront = await objectFront.targetFront.getFront("inspector");
-  const onNodeHighlight = inspectorFront.highlighter.once("node-highlight");
+  const onNodeHighlight = highlighter.waitForHighlighterShown();
 
   EventUtils.synthesizeMouseAtCenter(elementNode, { type: "mousemove" }, view);
 
-  await onNodeHighlight;
-  ok(true, "Highlighter is displayed");
+  const { highlighter: activeHighlighter } = await onNodeHighlight;
+  ok(activeHighlighter, "Highlighter is displayed");
   // Move the mouse out of the node to prevent failure when test is run multiple times.
   EventUtils.synthesizeMouseAtCenter(oi1, { type: "mousemove" }, view);
 

devtools/client/webconsole/test/browser/browser_webconsole_nodes_highlight.js

@@ -26,6 +26,9 @@ add_task(async function() {
   const toolbox = hud.toolbox;
 
   const testActor = await getTestActor(toolbox);
+  const highlighter = toolbox.getHighlighter();
+  let onHighlighterShown;
+  let onHighlighterHidden;
 
   await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
     content.wrappedJSObject.logNode("h1");
@@ -40,33 +43,29 @@ add_task(async function() {
   );
 
   info("Highlight the node by moving the cursor on it");
-
-  // the inspector should be initialized first and then the node should
-  // highlight after the hover effect.
-  const inspectorFront = await toolbox.target.getFront("inspector");
-  let onNodeHighlight = inspectorFront.highlighter.once("node-highlight");
+  onHighlighterShown = highlighter.waitForHighlighterShown();
 
   EventUtils.synthesizeMouseAtCenter(node, { type: "mousemove" }, view);
 
-  const nodeFront = await onNodeHighlight;
+  const { nodeFront } = await onHighlighterShown;
   is(nodeFront.displayName, "h1", "The correct node was highlighted");
   isVisible = await testActor.isHighlighting();
   ok(isVisible, "Highlighter is displayed");
 
   info("Unhighlight the node by moving away from the node");
-  let onNodeUnhighlight = inspectorFront.highlighter.once("node-unhighlight");
+  onHighlighterHidden = highlighter.waitForHighlighterHidden();
   EventUtils.synthesizeMouseAtCenter(
     nonHighlightEl,
     { type: "mousemove" },
     view
   );
 
-  await onNodeUnhighlight;
+  await onHighlighterHidden;
   ok(true, "node-unhighlight event was fired when moving away from the node");
 
   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");
+  onHighlighterShown = highlighter.waitForHighlighterShown();
+  onHighlighterHidden = highlighter.waitForHighlighterHidden();
   // Move hover the node and then right after move out.
   EventUtils.synthesizeMouseAtCenter(node, { type: "mousemove" }, view);
   EventUtils.synthesizeMouseAtCenter(
@@ -74,7 +73,7 @@ add_task(async function() {
     { type: "mousemove" },
     view
   );
-  await Promise.all([onNodeHighlight, onNodeUnhighlight]);
+  await Promise.all([onHighlighterShown, onHighlighterHidden]);
   ok(true, "The highlighter was removed");
 
   isVisible = await testActor.isHighlighting();