From c2f33b793953ad806e729cf3b6709de70e74b6ea Mon Sep 17 00:00:00 2001
From: Micah Tigley <mtigley@mozilla.com>
Date: Thu, 7 May 2020 17:22:14 +0000
Subject: [PATCH] Bug 1617237 - Part 1: Ensure that ToolboxController updates
 its children when target navigates r=jdescottes,daisuke

The DebugTargetInfo component doesn't receive new target information when navigation occurs. This is because the ToolboxController doesn't seem to be aware of these changes. To trigger an update, we can force new props to be passed to DebugTargetInfo by setting the target's debug info on its local state.

Differential Revision: https://phabricator.services.mozilla.com/D70280
---
 .../framework/components/ToolboxController.js |  5 +++
 devtools/client/framework/toolbox.js          | 36 +++++++++++++------
 2 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/devtools/client/framework/components/ToolboxController.js b/devtools/client/framework/components/ToolboxController.js
index 24a5668d1a0d..762dd3e01aad 100644
--- a/devtools/client/framework/components/ToolboxController.js
+++ b/devtools/client/framework/components/ToolboxController.js
@@ -59,6 +59,7 @@ class ToolboxController extends Component {
     this.setPanelDefinitions = this.setPanelDefinitions.bind(this);
     this.updateButtonIds = this.updateButtonIds.bind(this);
     this.updateFocusedButton = this.updateFocusedButton.bind(this);
+    this.setDebugTargetData = this.setDebugTargetData.bind(this);
   }
 
   shouldComponentUpdate() {
@@ -193,6 +194,10 @@ class ToolboxController extends Component {
     );
   }
 
+  setDebugTargetData(data) {
+    this.setState({ debugTargetData: data });
+  }
+
   render() {
     return ToolboxToolbar(Object.assign({}, this.props, this.state));
   }
diff --git a/devtools/client/framework/toolbox.js b/devtools/client/framework/toolbox.js
index a8a25b4e9e1c..0837b7ae6bc2 100644
--- a/devtools/client/framework/toolbox.js
+++ b/devtools/client/framework/toolbox.js
@@ -355,6 +355,7 @@ function Toolbox(
   this._onResumedState = this._onResumedState.bind(this);
   this._onTargetAvailable = this._onTargetAvailable.bind(this);
   this._onTargetDestroyed = this._onTargetDestroyed.bind(this);
+  this._onNavigate = this._onNavigate.bind(this);
 
   this.isPaintFlashing = false;
 
@@ -719,7 +720,7 @@ Toolbox.prototype = {
       // Attach to a new top-level target.
       // For now, register these event listeners only on the top level target
       targetFront.on("will-navigate", this._onWillNavigate);
-      targetFront.on("navigate", this._refreshHostTitle);
+      targetFront.on("navigate", this._onNavigate);
       targetFront.on("frame-update", this._updateFrames);
       targetFront.on("inspect-object", this._onInspectObject);
 
@@ -819,13 +820,6 @@ Toolbox.prototype = {
         this._URL = this.win.location.href;
       }
 
-      if (this.hostType === Toolbox.HostType.PAGE) {
-        // Displays DebugTargetInfo which shows the basic information of debug target,
-        // if `about:devtools-toolbox` URL opens directly.
-        // DebugTargetInfo requires this._debugTargetData to be populated
-        this._debugTargetData = this._getDebugTargetData();
-      }
-
       const domReady = new Promise(resolve => {
         DOMHelpers.onceDOMReady(
           this.win,
@@ -887,6 +881,9 @@ Toolbox.prototype = {
         L10N.getStr("toolbox.label")
       );
 
+      // Set debug target data on the ToolboxController component.
+      this._setDebugTargetData();
+
       this.webconsolePanel = this.doc.querySelector(
         "#toolbox-panel-webconsole"
       );
@@ -993,7 +990,7 @@ Toolbox.prototype = {
   detachTarget() {
     this.target.off("inspect-object", this._onInspectObject);
     this.target.off("will-navigate", this._onWillNavigate);
-    this.target.off("navigate", this._refreshHostTitle);
+    this.target.off("navigate", this._onNavigate);
     this.target.off("frame-update", this._updateFrames);
 
     // Detach the thread
@@ -1826,7 +1823,6 @@ Toolbox.prototype = {
       closeToolbox: this.closeToolbox,
       focusButton: this._onToolbarFocus,
       toolbox: this,
-      debugTargetData: this._debugTargetData,
       onTabsOrderUpdated: this._onTabsOrderUpdated,
     });
 
@@ -4205,4 +4201,24 @@ Toolbox.prototype = {
 
     return id;
   },
+
+  /**
+   * Fired when the user navigates to another page.
+   */
+  _onNavigate: function() {
+    this._refreshHostTitle();
+    this._setDebugTargetData();
+  },
+
+  /**
+   * Sets basic information on the DebugTargetInfo component
+   */
+  _setDebugTargetData() {
+    if (this.hostType === Toolbox.HostType.PAGE) {
+      // Displays DebugTargetInfo which shows the basic information of debug target,
+      // if `about:devtools-toolbox` URL opens directly.
+      // DebugTargetInfo requires this._debugTargetData to be populated
+      this.component.setDebugTargetData(this._getDebugTargetData());
+    }
+  },
 };