Bug 1508655 - BoxModel highlighter split domGrip methods to make them more closely related to the walker; r=ochameau
authoryulia <ystartsev@mozilla.com>
Fri, 23 Nov 2018 10:49:29 +0000
changeset 504238 f67b6fdd714f01fab6ae4d3984a6c298b52c0f71
parent 504237 bd2ec1be4ead26c0e0a7620d7f963b7934e37319
child 504239 5f6b602fb590ccbaab9a33474d72a0aacdbd5529
push id10290
push userffxbld-merge
push dateMon, 03 Dec 2018 16:23:23 +0000
treeherdermozilla-beta@700bed2445e6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersochameau
bugs1508655
milestone65.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1508655 - BoxModel highlighter split domGrip methods to make them more closely related to the walker; r=ochameau Differential Revision: https://phabricator.services.mozilla.com/D12319
devtools/client/framework/toolbox-highlighter-utils.js
devtools/client/inspector/extensions/extension-sidebar.js
devtools/client/inspector/inspector.js
devtools/client/shared/widgets/VariablesView.jsm
devtools/client/webconsole/webconsole-output-wrapper.js
devtools/shared/fronts/inspector.js
--- a/devtools/client/framework/toolbox-highlighter-utils.js
+++ b/devtools/client/framework/toolbox-highlighter-utils.js
@@ -181,56 +181,29 @@ exports.getHighlighterUtils = function(t
   /**
    * Show the box model highlighter on a node in the content page.
    * The node needs to be a NodeFront, as defined by the inspector actor
    * @see devtools/server/actors/inspector/inspector.js
    * @param {NodeFront} nodeFront The node to highlight
    * @param {Object} options
    * @return A promise that resolves when the node has been highlighted
    */
-  const highlightNodeFront = exported.highlightNodeFront = requireInspector(
+  exported.highlightNodeFront = requireInspector(
   async function(nodeFront, options = {}) {
     if (!nodeFront) {
       return;
     }
 
     isNodeFrontHighlighted = true;
     await toolbox.highlighter.showBoxModel(nodeFront, options);
 
     toolbox.emit("node-highlight", nodeFront);
   });
 
   /**
-   * This is a convenience method in case you don't have a nodeFront but a
-   * valueGrip. This is often the case with VariablesView properties.
-   * This method will simply translate the grip into a nodeFront and call
-   * highlightNodeFront, so it has the same signature.
-   * @see highlightNodeFront
-   */
-  exported.highlightDomValueGrip =
-    requireInspector(async function(valueGrip, options = {}) {
-      const nodeFront = await gripToNodeFront(valueGrip);
-      if (nodeFront) {
-        await highlightNodeFront(nodeFront, options);
-      } else {
-        throw new Error("The ValueGrip passed could not be translated to a NodeFront");
-      }
-    });
-
-  /**
-   * Translate a debugger value grip into a node front usable by the inspector
-   * @param {ValueGrip}
-   * @return a promise that resolves to the node front when done
-   */
-  const gripToNodeFront = exported.gripToNodeFront = requireInspector(
-  async function(grip) {
-    return toolbox.walker.getNodeActorFromObjectActor(grip.actor);
-  });
-
-  /**
    * Hide the highlighter.
    * @param {Boolean} forceHide Only really matters in test mode (when
    * flags.testing is true). In test mode, hovering over several nodes
    * in the markup view doesn't hide/show the highlighter to ease testing. The
    * highlighter stays visible at all times, except when the mouse leaves the
    * markup view, which is when this param is passed to true
    * @return a promise that resolves when the highlighter is hidden
    */
--- a/devtools/client/inspector/extensions/extension-sidebar.js
+++ b/devtools/client/inspector/extensions/extension-sidebar.js
@@ -67,42 +67,38 @@ class ExtensionSidebar {
             return new ObjectClient(this.inspector.toolbox.target.client, object);
           },
           releaseActor: (actor) => {
             if (!actor) {
               return;
             }
             this.inspector.toolbox.target.client.release(actor);
           },
-          highlightDomElement: (grip, options = {}) => {
+          highlightDomElement: async (grip, options = {}) => {
             const { highlighterUtils } = this.inspector.toolbox;
 
             if (!highlighterUtils) {
               return null;
             }
 
-            return highlighterUtils.highlightDomValueGrip(grip, options);
+            const nodeFront = await this.inspector.walker.gripToNodeFront(grip);
+            return highlighterUtils.highlightNodeFront(nodeFront, options);
           },
           unHighlightDomElement: (forceHide = false) => {
             const { highlighterUtils } = this.inspector.toolbox;
 
             if (!highlighterUtils) {
               return null;
             }
 
             return highlighterUtils.unhighlight(forceHide);
           },
           openNodeInInspector: async (grip) => {
-            const { highlighterUtils } = this.inspector.toolbox;
-
-            if (!highlighterUtils) {
-              return null;
-            }
-
-            const front = await highlighterUtils.gripToNodeFront(grip);
+            const { walker } = this.inspector;
+            const front = await walker.gripToNodeFront(grip);
             const onInspectorUpdated = this.inspector.once("inspector-updated");
             const onNodeFrontSet = this.inspector.toolbox.selection.setNodeFront(front, {
               reason: "inspector-extension-sidebar",
             });
 
             return Promise.all([onNodeFrontSet, onInspectorUpdated]);
           },
         },
--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -2494,17 +2494,17 @@ Inspector.prototype = {
    */
   isDeletable(nodeFront) {
     return !(nodeFront.isDocumentElement ||
            nodeFront.nodeType == nodeConstants.DOCUMENT_TYPE_NODE ||
            nodeFront.isAnonymous);
   },
 
   async inspectNodeActor(nodeActor, inspectFromAnnotation) {
-    const nodeFront = await this.walker.getNodeActorFromObjectActor(nodeActor);
+    const nodeFront = await this.walker.gripToNodeFront({ nodeActor });
     if (!nodeFront) {
       console.error("The object cannot be linked to the inspector, the " +
                     "corresponding nodeFront could not be found.");
       return false;
     }
 
     const isAttached = await this.walker.isInDOMTree(nodeFront);
     if (!isAttached) {
--- a/devtools/client/shared/widgets/VariablesView.jsm
+++ b/devtools/client/shared/widgets/VariablesView.jsm
@@ -2756,17 +2756,17 @@ Variable.prototype = extend(Scope.protot
 
     event && event.stopPropagation();
 
     return (async function() {
       await this.toolbox.initInspector();
 
       let nodeFront = this._nodeFront;
       if (!nodeFront) {
-        nodeFront = await this.toolbox.walker.getNodeActorFromObjectActor(this._valueGrip.actor);
+        nodeFront = await this.toolbox.walker.gripToNodeFront(this._valueGrip);
       }
 
       if (nodeFront) {
         await this.toolbox.selectTool("inspector");
 
         const inspectorReady = defer();
         this.toolbox.getPanel("inspector").once("inspector-updated", inspectorReady.resolve);
         await this.toolbox.selection.setNodeFront(nodeFront, { reason: "variables-view" });
@@ -2774,28 +2774,22 @@ Variable.prototype = extend(Scope.protot
       }
     }.bind(this))();
   },
 
   /**
    * In case this variable is a DOMNode and part of a variablesview that has been
    * linked to the toolbox's inspector, then highlight the corresponding node
    */
-  highlightDomNode: function() {
+  highlightDomNode: async function() {
     if (this.toolbox) {
-      if (this._nodeFront) {
-        // If the nodeFront has been retrieved before, no need to ask the server
-        // again for it
-        this.toolbox.highlighterUtils.highlightNodeFront(this._nodeFront);
-        return;
+      if (!this._nodeFront) {
+        this.nodeFront = await this.toolbox.walker.gripToNodeFront(this._valueGrip);
       }
-
-      this.toolbox.highlighterUtils.highlightDomValueGrip(this._valueGrip).then(front => {
-        this._nodeFront = front;
-      });
+      await this.toolbox.highlighterUtils.highlightNodeFront(this._nodeFront);
     }
   },
 
   /**
    * Unhighlight a previously highlit node
    * @see highlightDomNode
    */
   unhighlightDomNode: function() {
--- a/devtools/client/webconsole/webconsole-output-wrapper.js
+++ b/devtools/client/webconsole/webconsole-output-wrapper.js
@@ -204,29 +204,31 @@ WebConsoleOutputWrapper.prototype = {
             );
           }),
           openNetworkPanel: (requestId) => {
             return this.toolbox.selectTool("netmonitor").then((panel) => {
               return panel.panelWin.Netmonitor.inspectRequest(requestId);
             });
           },
           sourceMapService: this.toolbox ? this.toolbox.sourceMapURLService : null,
-          highlightDomElement: (grip, options = {}) => {
-            return this.toolbox.highlighterUtils
-              ? this.toolbox.highlighterUtils.highlightDomValueGrip(grip, options)
-              : null;
+          highlightDomElement: async (grip, options = {}) => {
+            if (!this.toolbox.highlighter) {
+              return null;
+            }
+            const nodeFront = await this.toolbox.walker.gripToNodeFront(grip);
+            return this.toolbox.highlighterUtils.highlightNodeFront(nodeFront, options);
           },
           unHighlightDomElement: (forceHide = false) => {
             return this.toolbox.highlighterUtils
               ? this.toolbox.highlighterUtils.unhighlight(forceHide)
               : null;
           },
           openNodeInInspector: async (grip) => {
             const onSelectInspector = this.toolbox.selectTool("inspector", "inspect_dom");
-            const onGripNodeToFront = this.toolbox.highlighterUtils.gripToNodeFront(grip);
+            const onGripNodeToFront = this.toolbox.walker.gripToNodeFront(grip);
             const [
               front,
               inspector,
             ] = await Promise.all([onGripNodeToFront, onSelectInspector]);
 
             const onInspectorUpdated = inspector.once("inspector-updated");
             const onNodeFrontSet = this.toolbox.selection
               .setNodeFront(front, { reason: "console" });
--- a/devtools/shared/fronts/inspector.js
+++ b/devtools/shared/fronts/inspector.js
@@ -167,23 +167,24 @@ const WalkerFront = FrontClassWithSpec(w
   querySelector: custom(function(queryNode, selector) {
     return this._querySelector(queryNode, selector).then(response => {
       return response.node;
     });
   }, {
     impl: "_querySelector",
   }),
 
-  getNodeActorFromObjectActor: custom(function(objectActorID) {
-    return this._getNodeActorFromObjectActor(objectActorID).then(response => {
-      return response ? response.node : null;
-    });
-  }, {
-    impl: "_getNodeActorFromObjectActor",
-  }),
+  gripToNodeFront: async function(grip) {
+    const response = await this.getNodeActorFromObjectActor(grip.actor);
+    const nodeFront = response ? response.node : null;
+    if (!nodeFront) {
+      throw new Error("The ValueGrip passed could not be translated to a NodeFront");
+    }
+    return nodeFront;
+  },
 
   getNodeActorFromWindowID: custom(function(windowID) {
     return this._getNodeActorFromWindowID(windowID).then(response => {
       return response ? response.node : null;
     });
   }, {
     impl: "_getNodeActorFromWindowID",
   }),