prevent simulator from running in background when switching view (microsoft#11547)

Author: riknoll

localtypings/pxteditor.d.ts

@@ -831,6 +831,7 @@ declare namespace pxt.editor {
         feedback?: FeedbackState;
         themePickerOpen?: boolean;
         errorListNote?: string;
+        timeMachine?: boolean;
     }
 
     export interface EditorState {

webapp/src/app.tsx

@@ -1170,7 +1170,17 @@ export class ProjectView
             restartSimulator: () => this.restartSimulator(),
             singleSimulator: () => this.singleSimulator(),
             onStateChanged: (state) => {
-                const simStateChanged = () => this.allEditors.forEach((editor) => editor.simStateChanged());
+                const simStateChanged = () => {
+                    // If the simulator was pending a run when the user switched to
+                    // a different view, stop the simulator to avoid running in the background
+                    if (
+                        state === pxsim.SimulatorState.Running &&
+                        this.isSimulatorInaccessible()
+                    ) {
+                        this.stopSimulator();
+                    }
+                    this.allEditors.forEach((editor) => editor.simStateChanged())
+                };
                 switch (state) {
                     case pxsim.SimulatorState.Paused:
                     case pxsim.SimulatorState.Unloaded:
@@ -4174,6 +4184,14 @@ export class ProjectView
         })();
     }
 
+    protected isSimulatorInaccessible() {
+        return this.state.home ||
+            this.state.extensionsVisible ||
+            this.profileDialog?.state?.visible ||
+            this.scriptSearch?.state.visible ||
+            this.state.timeMachine
+    }
+
     openNewTab(hd: pxt.workspace.Header, dependent: boolean) {
         if (!hd
             || pxt.BrowserUtils.isElectron()
@@ -4710,11 +4728,15 @@ export class ProjectView
             this.stopSimulator();
         }
 
+        this.setState({ timeMachine: true });
+
         await dialogs.showTurnBackTimeDialogAsync(this.state.header, () => {
             this.reloadHeaderAsync();
             simWasRunning = false;
         });
 
+        this.setState({ timeMachine: false });
+
         if (simWasRunning) {
             this.startSimulator();
         }