Bug 1587701 - Use toolbox's getNodeFrontFromNodeGrip in highlight method. r=pbro.

This allow us to retrieve the appropriate nodeFront from a grip,
and thus the right highlighterFront to highlight a given element.
We also need to cache the highlighter front used for the current
highlight, as we need to use the same front for unhighlighting,
and this saves us a few server round-trip to get the right front.

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

--HG--
extra : moz-landing-system : lando

devtools/client/framework/toolbox.js

@@ -3425,16 +3425,24 @@ Toolbox.prototype = {
    */
   getHighlighter(fromGrip = false) {
     let pendingHighlight;
+    let currentHighlighterFront;
+
     return {
-      highlight: async (nodeFront, options) => {
+      highlight: async (object, options) => {
         pendingHighlight = (async () => {
+          let nodeFront = object;
+
           if (fromGrip) {
-            // TODO: Bug1574506 - Use the contextual WalkerFront for gripToNodeFront.
-            const walkerFront = (await this.target.getFront("inspector"))
-              .walker;
-            nodeFront = await walkerFront.gripToNodeFront(nodeFront);
+            const inspectorFront = await this.target.getFront("inspector");
+            nodeFront = await inspectorFront.getNodeFrontFromNodeGrip(object);
           }
 
+          if (!nodeFront) {
+            return null;
+          }
+
+          // We cache the highlighter front so we can unhighlight easily.
+          currentHighlighterFront = nodeFront.highlighterFront;
           return nodeFront.highlighterFront.highlight(nodeFront, options);
         })();
         return pendingHighlight;
@@ -3445,10 +3453,13 @@ Toolbox.prototype = {
           pendingHighlight = null;
         }
 
-        const inspectorFront = this.target.getCachedFront("inspector");
-        return inspectorFront
-          ? inspectorFront.highlighter.unhighlight(forceHide)
-          : null;
+        if (!currentHighlighterFront) {
+          return null;
+        }
+
+        const unHighlight = currentHighlighterFront.unhighlight(forceHide);
+        currentHighlighterFront = null;
+        return unHighlight;
       },
     };
   },