Bug 1568150 - Destroy the inspector front after the panels. r=gl

All fronts are destroyed when we call TargetMixin.destroy.
All but the inspector. This changeset move the inspector front destruction
from being done in parallel to panels destruction to do it after.
This highlight races in tests that are not waiting correctly for the full
loading of the grid sidebar.

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

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

devtools/client/debugger/test/mochitest/browser_dbg-worker-scopes.js

@@ -94,5 +94,10 @@ add_task(async function() {
   await toggleNode(dbg, "0");
   ok(findNodeValue(dbg, "foo"), "foo");
   await toggleNode(dbg, "var_weakset");
+
+  // Close the scopes in order to unmount the reps in order to force spawning
+  // the various `release` RDP requests which, otherwise, would happen in
+  // middle of the toolbox destruction. Then, wait for them to finish.
+  await toggleScopes(dbg);
   await waitForRequestsToSettle(dbg);
 });

devtools/client/framework/toolbox.js

@@ -3541,9 +3541,6 @@ Toolbox.prototype = {
     this.browserRequire = null;
     this._toolNames = null;
 
-    // Destroying the walker and inspector fronts
-    outstanding.push(this.destroyInspector());
-
     // Reset preferences set by the toolbox
     outstanding.push(this.resetPreference());
 
@@ -3587,7 +3584,10 @@ Toolbox.prototype = {
       resolve(
         settleAll(outstanding)
           .catch(console.error)
-          .then(() => {
+          .then(async () => {
+            // Destroying the walker and inspector fronts
+            await this.destroyInspector();
+
             if (this._netMonitorAPI) {
               this._netMonitorAPI.destroy();
               this._netMonitorAPI = null;

devtools/client/inspector/grids/grid-inspector.js

@@ -292,6 +292,7 @@ class GridInspector {
    * Updates the grid panel by dispatching the new grid data. This is called when the
    * layout view becomes visible or the view needs to be updated with new grid data.
    */
+  // eslint-disable-next-line complexity
   async updateGridPanel() {
     // Stop refreshing if the inspector or store is already destroyed.
     if (!this.inspector || !this.store) {
@@ -308,6 +309,11 @@ class GridInspector {
       return;
     }
 
+    // Stop if the panel has been destroyed during the call to getGrids
+    if (!this.inspector) {
+      return;
+    }
+
     if (!gridFronts.length) {
       try {
         this.store.dispatch(updateGrids([]));
@@ -355,6 +361,10 @@ class GridInspector {
           // closing.
           return;
         }
+        // Stop if the panel has been destroyed during the call getNodeFromActor
+        if (!this.inspector) {
+          return;
+        }
       }
 
       const colorForHost = customColors[hostname]
@@ -513,6 +523,10 @@ class GridInspector {
       // closing.
       return;
     }
+    // Stop if the panel has been destroyed during the call to getGrids
+    if (!this.inspector) {
+      return;
+    }
 
     // In some cases, the nodes for current grids may have been removed from the DOM in
     // which case we need to update.

devtools/client/inspector/inspector.js

@@ -328,6 +328,7 @@ Inspector.prototype = {
   },
 
   _deferredOpen: async function() {
+    const onMarkupLoaded = this.once("markuploaded");
     this._initMarkup();
     this.isReady = false;
 
@@ -349,9 +350,9 @@ Inspector.prototype = {
       "visible";
 
     // Setup the sidebar panels.
-    this.setupSidebar();
+    await this.setupSidebar();
 
-    await this.once("markuploaded");
+    await onMarkupLoaded;
     this.isReady = true;
 
     // All the components are initialized. Take care of the remaining initialization
@@ -404,7 +405,7 @@ Inspector.prototype = {
     // the ChangesActor. We want the ChangesActor to be guaranteed available before
     // the user makes any changes.
     this.changesFront = await this.toolbox.target.getFront("changes");
-    this.changesFront.start();
+    await this.changesFront.start();
     return this.changesFront;
   },