Bug 1468754 Part 2: Make client-side Inspector, on open, ensure the existence of the ChangesActor. r=pbro

Depends on D4399

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

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

devtools/client/inspector/inspector.js

@@ -65,7 +65,7 @@ const THREE_PANE_ENABLED_PREF = "devtools.inspector.three-pane-enabled";
 const THREE_PANE_ENABLED_SCALAR = "devtools.inspector.three_pane_enabled";
 const THREE_PANE_CHROME_ENABLED_PREF = "devtools.inspector.chrome.three-pane-enabled";
 const TELEMETRY_EYEDROPPER_OPENED = "devtools.toolbar.eyedropper.opened";
-const TRACK_CHANGES_ENABLED = "devtools.inspector.changes.enabled";
+const TRACK_CHANGES_PREF = "devtools.inspector.changes.enabled";
 
 /**
  * Represents an open instance of the Inspector for a tab.
@@ -122,7 +122,7 @@ function Inspector(toolbox) {
 
   this.reflowTracker = new ReflowTracker(this._target);
   this.styleChangeTracker = new InspectorStyleChangeTracker(this);
-  if (Services.prefs.getBoolPref(TRACK_CHANGES_ENABLED)) {
+  if (Services.prefs.getBoolPref(TRACK_CHANGES_PREF)) {
     this.changesManager = new ChangesManager(this);
   }
 
@@ -272,6 +272,14 @@ Inspector.prototype = {
       this.selection.setNodeFront(this._defaultNode, { reason: "inspector-open" });
     }
 
+    if (Services.prefs.getBoolPref(TRACK_CHANGES_PREF)) {
+      // Get the Changes front, then call a method on it, which will instantiate
+      // the ChangesActor. We want the ChangesActor to be guaranteed available before
+      // the user makes any changes.
+      this.changesFront = this.toolbox.target.getFront("changes");
+      await this.changesFront.allChanges();
+    }
+
     // Setup the splitter before the sidebar is displayed so, we don't miss any events.
     this.setupSplitter();
 
@@ -956,7 +964,7 @@ Inspector.prototype = {
       },
       defaultTab == fontId);
 
-    if (Services.prefs.getBoolPref(TRACK_CHANGES_ENABLED)) {
+    if (Services.prefs.getBoolPref(TRACK_CHANGES_PREF)) {
       // Inject a lazy loaded react tab by exposing a fake React object
       // with a lazy defined Tab thanks to `panel` being a function
       const changesId = "changesview";