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

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));
   }

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());
+    }
+  },
 };