Bug 1707962 - [devtools] Fix highlighter overlays on target switch. r=ochameau.

We don't store an inspectorFront and a target anymore in HighlightersOverlay,
but retrieve them directly from the inspector instance, as this will provide up-to-date
references.
We also dont' listen for `will-navigate` on the target, but call
`HighlightersOverlay#onWillNavigate` from the inspectors's `_onBeforeNavigate`,
which already handle fission usage.
Finally, we switch to DOCUMENT_EVENT `will-navigate` instead of targetFront `will-navigate`
event in order to handle fission cases.

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

devtools/client/inspector/inspector.js

@@ -160,7 +160,7 @@ function Inspector(toolbox, commands) {
   );
   this._onTargetAvailable = this._onTargetAvailable.bind(this);
   this._onTargetDestroyed = this._onTargetDestroyed.bind(this);
-  this._onBeforeNavigate = this._onBeforeNavigate.bind(this);
+  this._onWillNavigate = this._onWillNavigate.bind(this);
   this._onMarkupFrameLoad = this._onMarkupFrameLoad.bind(this);
   this._updateSearchResultsLabel = this._updateSearchResultsLabel.bind(this);
 
@@ -213,6 +213,7 @@ Inspector.prototype = {
         this.toolbox.resourceCommand.TYPES.ROOT_NODE,
         // To observe CSS change before opening changes view.
         this.toolbox.resourceCommand.TYPES.CSS_CHANGE,
+        this.toolbox.resourceCommand.TYPES.DOCUMENT_EVENT,
       ],
       { onAvailable: this.onResourceAvailable }
     );
@@ -231,7 +232,6 @@ Inspector.prototype = {
       return;
     }
 
-    targetFront.on("will-navigate", this._onBeforeNavigate);
     await this.initInspectorFront(targetFront);
 
     await Promise.all([
@@ -245,7 +245,6 @@ Inspector.prototype = {
     if (!targetFront.isTopLevel) {
       return;
     }
-    targetFront.off("will-navigate", this._onBeforeNavigate);
 
     this._defaultNode = null;
     this.selection.setNodeFront(null);
@@ -407,9 +406,12 @@ Inspector.prototype = {
     return this;
   },
 
-  _onBeforeNavigate: function() {
+  _onWillNavigate: function() {
     this._defaultNode = null;
     this.selection.setNodeFront(null);
+    if (this._highlighters) {
+      this._highlighters.onWillNavigate();
+    }
     this._destroyMarkup();
     this._pendingSelectionUnique = null;
   },
@@ -1287,6 +1289,14 @@ Inspector.prototype = {
           this.onRootNodeAvailable(rootNodeFront);
         }
       }
+
+      if (
+        resource.resourceType ===
+          this.toolbox.resourceCommand.TYPES.DOCUMENT_EVENT &&
+        resource.name === "will-navigate"
+      ) {
+        this._onWillNavigate();
+      }
     }
   },
 
@@ -1638,7 +1648,6 @@ Inspector.prototype = {
     this.toolbox.nodePicker.off("picker-node-canceled", this.onPickerCanceled);
     this.toolbox.nodePicker.off("picker-node-hovered", this.onPickerHovered);
     this.toolbox.nodePicker.off("picker-node-picked", this.onPickerPicked);
-    this.currentTarget.off("will-navigate", this._onBeforeNavigate);
 
     for (const [, panel] of this._panels) {
       panel.destroy();
@@ -1681,7 +1690,11 @@ Inspector.prototype = {
     );
     const { resourceCommand } = this.toolbox;
     resourceCommand.unwatchResources(
-      [resourceCommand.TYPES.ROOT_NODE, resourceCommand.TYPES.CSS_CHANGE],
+      [
+        resourceCommand.TYPES.ROOT_NODE,
+        resourceCommand.TYPES.CSS_CHANGE,
+        resourceCommand.TYPES.DOCUMENT_EVENT,
+      ],
       { onAvailable: this.onResourceAvailable }
     );
 

devtools/client/inspector/shared/highlighters-overlay.js

@@ -118,9 +118,8 @@ class HighlightersOverlay {
    */
   constructor(inspector) {
     this.inspector = inspector;
-    this.inspectorFront = this.inspector.inspectorFront;
     this.store = this.inspector.store;
-    this.target = this.inspector.currentTarget;
+
     this.telemetry = this.inspector.telemetry;
     this.maxGridHighlighters = Services.prefs.getIntPref(
       "devtools.gridinspector.maxHighlighters"
@@ -219,7 +218,6 @@ class HighlightersOverlay {
       { onAvailable: this._onResourceAvailable }
     );
 
-    this.target.on("will-navigate", this.onWillNavigate);
     this.walkerEventListener = new WalkerEventListener(this.inspector, {
       "display-change": this.onDisplayChange,
     });
@@ -227,6 +225,12 @@ class HighlightersOverlay {
     EventEmitter.decorate(this);
   }
 
+  get inspectorFront() {
+    return this.inspector.inspectorFront;
+  }
+  get target() {
+    return this.inspector.currentTarget;
+  }
   // FIXME: Shim for HighlightersOverlay.parentGridHighlighters
   // Remove after updating tests to stop accessing this map directly. Bug 1683153
   get parentGridHighlighters() {
@@ -1367,8 +1371,7 @@ class HighlightersOverlay {
       return;
     }
 
-    const inspectorFront = await this.target.getFront("inspector");
-    const nodeFront = await inspectorFront.walker.findNodeFront(selectors);
+    const nodeFront = await this.inspectorFront.walker.findNodeFront(selectors);
 
     if (nodeFront) {
       await showFunction(nodeFront, options);
@@ -1893,7 +1896,6 @@ class HighlightersOverlay {
       { onAvailable: this._onResourceAvailable }
     );
 
-    this.target.off("will-navigate", this.onWillNavigate);
     this.walkerEventListener.destroy();
     this.walkerEventListener = null;
 
@@ -1903,10 +1905,8 @@ class HighlightersOverlay {
     this._lastHovered = null;
 
     this.inspector = null;
-    this.inspectorFront = null;
     this.state = null;
     this.store = null;
-    this.target = null;
     this.telemetry = null;
 
     this.geometryEditorHighlighterShown = null;