Bug 1623667 - [devtools] Update extension panels to use Box Model Highlighter r=jdescottes

Depends on D92223

The Inspector sidebar extensions and corresponding tests have access to the Inspector client in order to access methods to invoke highlighters so there is no need for the Toolbox shortcut introduced in D92222.

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

devtools/client/inspector/extensions/extension-sidebar.js

@@ -82,13 +82,16 @@ class ExtensionSidebar {
               const nodeFront = await this.inspector.inspectorFront.getNodeFrontFromNodeGrip(
                 grip
               );
-              return nodeFront.highlighterFront.highlight(nodeFront, options);
-            },
-            unHighlightDomElement: async grip => {
-              const nodeFront = await this.inspector.inspectorFront.getNodeFrontFromNodeGrip(
-                grip
+              return this.inspector.highlighters.showHighlighterTypeForNode(
+                this.inspector.highlighters.TYPES.BOXMODEL,
+                nodeFront,
+                options
+              );
+            },
+            unHighlightDomElement: async () => {
+              return this.inspector.highlighters.hideHighlighterType(
+                this.inspector.highlighters.TYPES.BOXMODEL
               );
-              return nodeFront.highlighterFront.unhighlight();
             },
             openNodeInInspector: async grip => {
               const nodeFront = await this.inspector.inspectorFront.getNodeFrontFromNodeGrip(

devtools/client/inspector/extensions/test/browser_inspector_extension_sidebar.js

@@ -270,6 +270,11 @@ add_task(async function testSidebarDOMNodeHighlighting() {
   const sidebar = inspector.getPanel(SIDEBAR_ID);
   const sidebarPanelContent = inspector.sidebar.getTabPanel(SIDEBAR_ID);
 
+  const {
+    waitForHighlighterTypeShown,
+    waitForHighlighterTypeHidden,
+  } = getHighlighterTestHelpers(inspector);
+
   const expression = "({ body: document.body })";
 
   const consoleFront = await toolbox.target.getFront("console");
@@ -304,21 +309,25 @@ add_task(async function testSidebarDOMNodeHighlighting() {
   // Test highlight DOMNode on mouseover.
   info("Highlight the node by moving the cursor on it");
 
-  const onNodeHighlight = inspector.highlighter.once("node-highlight");
+  const onNodeHighlight = waitForHighlighterTypeShown(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
 
   moveMouseOnObjectInspectorDOMNode(sidebarPanelContent);
 
-  const nodeFront = await onNodeHighlight;
+  const { nodeFront } = await onNodeHighlight;
   is(nodeFront.displayName, "body", "The correct node was highlighted");
 
   // Test unhighlight DOMNode on mousemove.
   info("Unhighlight the node by moving away from the node");
-  const onNodeUnhighlight = inspector.highlighter.once("node-unhighlight");
+  const onNodeUnhighlight = waitForHighlighterTypeHidden(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
 
   moveMouseOnPanelCenter(sidebarPanelContent);
 
   await onNodeUnhighlight;
-  info("node-unhighlight event was fired when moving away from the node");
+  info("The node is no longer highlighted");
 
   inspectedWindowFront.destroy();
 });