foo.diff

diff --git a/src/devtools/client/inspector/actions/index.ts b/src/devtools/client/inspector/actions/index.ts
index 679c55eb..a9737804 100644
--- a/src/devtools/client/inspector/actions/index.ts
+++ b/src/devtools/client/inspector/actions/index.ts
@@ -1,4 +1,10 @@
 import { Action } from "redux";
+import { selectors } from "ui/reducers";
+
+function setupInspector(store) {
+  ThreadFront.on("paused", () => store.dispatch(onPaused()));
+  ThreadFront.on("resumed", onResumed);
+}
 
 export type Set3PaneModeAction = Action<"set_inspector_3_pane_mode"> & {
   is3PaneModeEnabled: boolean;
@@ -13,3 +19,47 @@ export function set3PaneMode(is3PaneModeEnabled: boolean): Set3PaneModeAction {
 export function setActiveTab(activeTab: string): SetActiveTabAction {
   return { type: "set_active_inspector_tab", activeTab };
 }
+
+export function selectInspector() {
+  return ({}) => {
+    dispatch(fetchNewRoot());
+  };
+}
+
+export function onPaused() {
+  if (selectors.getSecondaryPane() == "inspector") {
+    dispatch(fetchNewRoot());
+  }
+}
+
+function fetchNewRoot() {
+  return ({ getState }) => {
+    // if (selectors.getSecondaryPane() != "inspector") {
+    //   return;
+    // }
+
+    if (selectors.hasRoot(getState()) || !highlighters) {
+      return;
+    }
+
+    await Promise.all([highlighters.restoreFlexboxState(), highlighters.restoreGridState()]);
+
+    dispatchEvent({ type: "new_root" });
+  };
+  // Don't reload the inspector when not selected.
+  // if (this.toolbox && this.toolbox.currentTool != "inspector" && !force) {
+  //   this._hasNewRoot = true;
+  //   return;
+  // }
+  // this._hasNewRoot = false;
+
+  // Restore the highlighter states prior to emitting "new-root".
+  if (this._highlighters) {
+    await Promise.all([
+      this.highlighters.restoreFlexboxState(),
+      this.highlighters.restoreGridState(),
+    ]);
+  }
+
+  this.emit("new-root");
+}
diff --git a/src/devtools/client/inspector/inspector.ts b/src/devtools/client/inspector/inspector.ts
index a6aebb2d..fa849391 100644
--- a/src/devtools/client/inspector/inspector.ts
+++ b/src/devtools/client/inspector/inspector.ts
@@ -150,70 +150,70 @@ export class Inspector {
     return CSSProperties;
   }
 
-  _deferredOpen = async () => {
-    this.toolbox.on("select", this.handleToolSelected);
-    ThreadFront.on("paused", this.handleThreadPaused);
-    ThreadFront.on("resumed", this.handleThreadResumed);
+  // _deferredOpen = async () => {
+  //   this.toolbox.on("select", this.handleToolSelected);
+  //   ThreadFront.on("paused", this.handleThreadPaused);
+  //   ThreadFront.on("resumed", this.handleThreadResumed);
 
-    this.emit("ready");
-  };
+  //   this.emit("ready");
+  // };
 
   /**
    * Check if the inspector should use the landscape mode.
    *
    * @return {Boolean} true if the inspector should be in landscape mode.
    */
-  useLandscapeMode() {
-    return true;
-  }
-
-  /**
-   * Reset the inspector on new root mutation. This is called every time the
-   * thread's position changes. This isn't super efficient, but we do things
-   * this way because at each point the thread is paused we will be operating
-   * on a different set of node fronts, which is essentially a new DOM tree
-   * from the inspector's perspective. Clearing out the markup, selection,
-   * and other state gives us a clean break from the previous pause point and
-   * makes it easier to keep state consistent.
-   */
-  onNewRoot = async (force?: boolean) => {
-    // Don't reload the inspector when not selected.
-    if (this.toolbox && this.toolbox.currentTool != "inspector" && !force) {
-      this._hasNewRoot = true;
-      return;
-    }
-    this._hasNewRoot = false;
-
-    // Restore the highlighter states prior to emitting "new-root".
-    if (this._highlighters) {
-      await Promise.all([
-        this.highlighters.restoreFlexboxState(),
-        this.highlighters.restoreGridState(),
-      ]);
-    }
-
-    this.emit("new-root");
-  };
-
-  handleToolSelected = (id: string) => {
-    if (id == "inspector" && this._hasNewRoot) {
-      this.onNewRoot(/* force */ true);
-    }
-  };
+  // useLandscapeMode() {
+  //   return true;
+  // }
+
+  // /**
+  //  * Reset the inspector on new root mutation. This is called every time the
+  //  * thread's position changes. This isn't super efficient, but we do things
+  //  * this way because at each point the thread is paused we will be operating
+  //  * on a different set of node fronts, which is essentially a new DOM tree
+  //  * from the inspector's perspective. Clearing out the markup, selection,
+  //  * and other state gives us a clean break from the previous pause point and
+  //  * makes it easier to keep state consistent.
+  //  */
+  // onNewRoot = async (force?: boolean) => {
+  //   // Don't reload the inspector when not selected.
+  //   if (this.toolbox && this.toolbox.currentTool != "inspector" && !force) {
+  //     this._hasNewRoot = true;
+  //     return;
+  //   }
+  //   this._hasNewRoot = false;
+
+  //   // Restore the highlighter states prior to emitting "new-root".
+  //   if (this._highlighters) {
+  //     await Promise.all([
+  //       this.highlighters.restoreFlexboxState(),
+  //       this.highlighters.restoreGridState(),
+  //     ]);
+  //   }
+
+  //   this.emit("new-root");
+  // };
+
+  // handleToolSelected = (id: string) => {
+  //   if (id == "inspector" && this._hasNewRoot) {
+  //     this.onNewRoot(/* force */ true);
+  //   }
+  // };
 
   /**
    * When replaying, reset the inspector whenever the target pauses.
    */
-  handleThreadPaused = () => {
-    this.onNewRoot();
-  };
+  // handleThreadPaused = () => {
+  //   this.onNewRoot();
+  // };
 
-  /**
-   * When replaying, reset the inspector whenever the target resumes.
-   */
-  handleThreadResumed = () => {
-    this.onNewRoot();
-  };
+  // /**
+  //  * When replaying, reset the inspector whenever the target resumes.
+  //  */
+  // handleThreadResumed = () => {
+  //   this.onNewRoot();
+  // };
 
   get selectionCssSelector() {
     return null;
@@ -222,27 +222,27 @@ export class Inspector {
   /**
    * Destroy the inspector.
    */
-  destroy() {
-    if (this._destroyed) {
-      return;
-    }
-    this._destroyed = true;
-
-    this.toolbox.off("select", this.handleToolSelected);
-    ThreadFront.off("paused", this.handleThreadPaused);
-    ThreadFront.off("resumed", this.handleThreadResumed);
-
-    if (this._highlighters) {
-      this._highlighters.destroy();
-      this._highlighters = null;
-    }
-
-    this._toolbox = null;
-    this.panelDoc = null;
-    (this.panelWin as any).inspector = null;
-    this.panelWin = null;
-    this.store = null;
-  }
+  // destroy() {
+  //   if (this._destroyed) {
+  //     return;
+  //   }
+  //   this._destroyed = true;
+
+  //   this.toolbox.off("select", this.handleToolSelected);
+  //   ThreadFront.off("paused", this.handleThreadPaused);
+  //   ThreadFront.off("resumed", this.handleThreadResumed);
+
+  //   if (this._highlighters) {
+  //     this._highlighters.destroy();
+  //     this._highlighters = null;
+  //   }
+
+  //   this._toolbox = null;
+  //   this.panelDoc = null;
+  //   (this.panelWin as any).inspector = null;
+  //   this.panelWin = null;
+  //   this.store = null;
+  // }
 
   /**
    * Toggle a pseudo class.