Bug 1598566 - Use the TargetList API in the DOM panel to refresh on new targets r=ochameau

First simple attempt at fixing this. The target getter in the DOM panel already
refers to the current toolbox top-level target. There doesn't seem to be a need
to change this as this is the only target the DOM panel cares about.
So, I'm only adding a listener for new top-level targets and refreshing the
panel when that happens, just like we do on navigation.
Am I missing something?

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

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

devtools/client/dom/panel.js

@@ -22,6 +22,7 @@ function DomPanel(iframeWindow, toolbox) {
   this._toolbox = toolbox;
 
   this.onTabNavigated = this.onTabNavigated.bind(this);
+  this.onTargetAvailable = this.onTargetAvailable.bind(this);
   this.onContentMessage = this.onContentMessage.bind(this);
   this.onPanelVisibilityChange = this.onPanelVisibilityChange.bind(this);
 
@@ -44,7 +45,6 @@ DomPanel.prototype = {
     });
 
     this.initialize();
-    this.refresh();
 
     await onGetProperties;
 
@@ -63,9 +63,13 @@ DomPanel.prototype = {
       true
     );
 
-    this.target.on("navigate", this.onTabNavigated);
     this._toolbox.on("select", this.onPanelVisibilityChange);
 
+    this._toolbox.targetList.watchTargets(
+      [this._toolbox.targetList.TYPES.FRAME],
+      this.onTargetAvailable
+    );
+
     // Export provider object with useful API for DOM panel.
     const provider = {
       getToolbox: this.getToolbox.bind(this),
@@ -81,8 +85,6 @@ DomPanel.prototype = {
     };
 
     exportIntoContentScope(this.panelWin, provider, "DomProvider");
-
-    this.shouldRefresh = true;
   },
 
   destroy() {
@@ -91,7 +93,7 @@ DomPanel.prototype = {
     }
     this._destroyed = true;
 
-    this.target.off("navigate", this.onTabNavigated);
+    this.currentTarget.off("navigate", this.onTabNavigated);
     this._toolbox.off("select", this.onPanelVisibilityChange);
 
     this.emit("destroyed");
@@ -119,15 +121,29 @@ DomPanel.prototype = {
   },
 
   /**
-   * Make sure the panel is refreshed when the page is reloaded.
-   * The panel is refreshed immediately if it's currently selected
-   * or lazily  when the user actually selects it.
+   * Make sure the panel is refreshed when navigation occurs.
+   * The panel is refreshed immediately if it's currently selected or lazily when the user
+   * actually selects it.
    */
   onTabNavigated: function() {
     this.shouldRefresh = true;
     this.refresh();
   },
 
+  onTargetAvailable: function({ isTopLevel, isTargetSwitching }) {
+    // Only care about top-level targets.
+    if (!isTopLevel) {
+      return;
+    }
+
+    this.shouldRefresh = true;
+    this.refresh();
+
+    // Whenever a new target is available, listen to navigate events on it so we can
+    // refresh the panel when we navigate within the same process.
+    this.currentTarget.on("navigate", this.onTabNavigated);
+  },
+
   /**
    * Make sure the panel is refreshed (if needed) when it's selected.
    */
@@ -151,7 +167,7 @@ DomPanel.prototype = {
     }
 
     // Bail out if target doesn't exist (toolbox maybe closed already).
-    if (!this.target) {
+    if (!this.currentTarget) {
       return null;
     }
 
@@ -182,7 +198,7 @@ DomPanel.prototype = {
   getRootGrip: async function() {
     // Attach Console. It might involve RDP communication, so wait
     // asynchronously for the result
-    const consoleFront = await this.target.getFront("console");
+    const consoleFront = await this.currentTarget.getFront("console");
     const { result } = await consoleFront.evaluateJSAsync("window");
     return result;
   },
@@ -214,7 +230,7 @@ DomPanel.prototype = {
     return this._toolbox;
   },
 
-  get target() {
+  get currentTarget() {
     return this._toolbox.target;
   },
 };

devtools/client/dom/test/browser.ini

@@ -12,6 +12,7 @@ support-files =
 
 [browser_dom_array.js]
 [browser_dom_basic.js]
-[browser_dom_refresh.js]
+[browser_dom_fission_target_switching.js]
 [browser_dom_nodes_highlight.js]
 [browser_dom_nodes_select.js]
+[browser_dom_refresh.js]

devtools/client/dom/test/browser_dom_fission_target_switching.js

@@ -0,0 +1,51 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test top-level target switching in the DOM panel.
+
+const PARENT_PROCESS_URI = "about:robots";
+const CONTENT_PROCESS_URI = URL_ROOT + "page_basic.html";
+
+add_task(async function() {
+  await pushPref("devtools.target-switching.enabled", true);
+
+  // We use about:robots as the starting page because it will run in the parent process.
+  // Navigating from that page to a regular content page will always trigger a target
+  // switch, with or without fission.
+
+  info("Open a page that runs in the parent process");
+  const { panel } = await addTestTab(PARENT_PROCESS_URI);
+
+  let _aProperty = getRowByLabel(panel, "_a");
+  let buttonProperty = getRowByLabel(panel, "button");
+
+  ok(!_aProperty, "There is no _a property on the about:robots page");
+  ok(buttonProperty, "There is, however, a button property on this page");
+
+  info("Navigate to a page that runs in the content process");
+
+  const toolbox = panel.getToolbox();
+
+  // Wait for the DOM panel to refresh.
+  const onPropertiesFetched = waitForDispatch(panel, "FETCH_PROPERTIES");
+  // Also wait for the toolbox to switch to the new target, to avoid hanging requests when
+  // the test ends.
+  const onTargetSwitched = toolbox.once("switched-target");
+
+  await toolbox.target.navigateTo({ url: CONTENT_PROCESS_URI });
+
+  await Promise.all([onPropertiesFetched, onTargetSwitched]);
+
+  _aProperty = getRowByLabel(panel, "_a");
+  buttonProperty = getRowByLabel(panel, "button");
+
+  ok(
+    _aProperty,
+    "This time, the _a property exists on this content process page"
+  );
+  ok(
+    !buttonProperty,
+    "There is, however, no more button property on this page"
+  );
+});

devtools/client/dom/test/browser_dom_nodes_highlight.js

@@ -12,7 +12,7 @@ add_task(async function() {
   info("Test DOM panel node highlight started");
 
   const { panel } = await addTestTab(TEST_PAGE_URL);
-  const toolbox = gDevTools.getToolbox(panel.target);
+  const toolbox = gDevTools.getToolbox(panel.currentTarget);
 
   info("Highlight the node by moving the cursor on it");
   let node = getRowByIndex(panel, 2).querySelector(".objectBox-node");

devtools/client/dom/test/browser_dom_nodes_select.js

@@ -12,7 +12,7 @@ add_task(async function() {
   info("Test DOM panel node highlight started");
 
   const { panel } = await addTestTab(TEST_PAGE_URL);
-  const toolbox = gDevTools.getToolbox(panel.target);
+  const toolbox = gDevTools.getToolbox(panel.currentTarget);
   const node = getRowByIndex(panel, 2);
 
   // Loading the inspector panel at first, to make it possible to listen for

devtools/client/dom/test/head.js

@@ -189,7 +189,7 @@ function expandRow(panel, labelText) {
 }
 
 async function evaluateJSAsync(panel, expression) {
-  const consoleFront = await panel.target.getFront("console");
+  const consoleFront = await panel.currentTarget.getFront("console");
   return consoleFront.evaluateJSAsync(expression);
 }