diff --git a/devtools/client/inspector/extensions/extension-sidebar.js b/devtools/client/inspector/extensions/extension-sidebar.js
index 31e72509cf08..3b289fd9185b 100644
--- a/devtools/client/inspector/extensions/extension-sidebar.js
+++ b/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(
diff --git a/devtools/client/inspector/extensions/test/browser_inspector_extension_sidebar.js b/devtools/client/inspector/extensions/test/browser_inspector_extension_sidebar.js
index a433915369ed..b6610b2784b4 100644
--- a/devtools/client/inspector/extensions/test/browser_inspector_extension_sidebar.js
+++ b/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();
 });