Workarounds for #89.

- Stop serial for hidden tabs to reduce chance of disconnect during
  serial which triggers bug.
- Best effort to stop serial before unload. No errors yet with this
  on MacOS Chrome but not tested elsewhere. Pretty nasty though!

#89

Author: microbit-matt-hillsdon

Diff for: src/device/device.ts

@@ -133,10 +133,50 @@ export class MicrobitWebUSBConnection extends EventEmitter {
    */
   private connection: DAPWrapper | undefined;
 
+  /**
+   * DAPLink gives us a promise that lasts as long as we're serial reading.
+   * When stopping serial we await it to be sure we're done.
+   */
+  private serialReadInProgress: Promise<void> | undefined;
+
   private serialListener = (data: string) => {
     this.emit(EVENT_SERIAL_DATA, data);
   };
 
+  private visibilityChangeListener = () => {
+    console.log("Visibility change " + document.visibilityState);
+    if (document.visibilityState === "visible") {
+      // We could reconnect here if we'd previously disconnected.
+    } else {
+      if (!this.unloading) {
+        this.disconnect();
+      }
+    }
+  };
+
+  private unloading = false;
+
+  private beforeUnloadListener = () => {
+    // Workaround https://github.com/microbit-foundation/python-editor-next/issues/89
+    this.unloading = true;
+    this.stopSerialInternal();
+    // The user might stay on the page if they have unsaved changes and there's
+    // another beforeunload listener. It's hard to tell that's what's happened!
+    window.addEventListener(
+      "focus",
+      () => {
+        const assumePageIsStayingOpenDelay = 1000;
+        setTimeout(() => {
+          if (this.status === ConnectionStatus.CONNECTED) {
+            this.unloading = false;
+            this.startSerialInternal();
+          }
+        }, assumePageIsStayingOpenDelay);
+      },
+      { once: true }
+    );
+  };
+
   private logging: Logging;
 
   constructor(
@@ -154,6 +194,15 @@ export class MicrobitWebUSBConnection extends EventEmitter {
     if (navigator.usb) {
       navigator.usb.addEventListener("disconnect", this.handleDisconnect);
     }
+    if (window) {
+      window.addEventListener("beforeunload", this.beforeUnloadListener);
+    }
+    if (window && window.document) {
+      window.document.addEventListener(
+        "visibilitychange",
+        this.visibilityChangeListener
+      );
+    }
   }
 
   /**
@@ -164,6 +213,15 @@ export class MicrobitWebUSBConnection extends EventEmitter {
     if (navigator.usb) {
       navigator.usb.removeEventListener("disconnect", this.handleDisconnect);
     }
+    if (window) {
+      window.removeEventListener("beforeunload", this.beforeUnloadListener);
+    }
+    if (window && window.document) {
+      window.document.removeEventListener(
+        "visibilitychange",
+        this.visibilityChangeListener
+      );
+    }
   }
 
   /**
@@ -192,13 +250,6 @@ export class MicrobitWebUSBConnection extends EventEmitter {
     );
   }
 
-  private async stopSerial() {
-    if (this.connection) {
-      this.connection.stopSerial(this.serialListener);
-    }
-    this.emit(EVENT_SERIAL_RESET, {});
-  }
-
   private async flashInternal(
     dataSource: FlashDataSource,
     options: {
@@ -210,7 +261,7 @@ export class MicrobitWebUSBConnection extends EventEmitter {
       await this.connectInternal(false);
     } else {
       this.log("Stopping serial before flash");
-      this.stopSerial();
+      await this.stopSerialInternal();
       this.log("Reconnecting before flash");
       await this.connection.reconnectAsync();
     }
@@ -233,26 +284,46 @@ export class MicrobitWebUSBConnection extends EventEmitter {
 
       this.log("Reinstating serial after flash");
       await this.connection.daplink.connect();
-
-      // This is async but won't return until we've finished serial.
-      // TODO: consider error handling here, via an event?
-      this.connection
-        .startSerial(this.serialListener)
-        .then(() => this.log("Finished listening for serial data"))
-        .catch((e) => this.emit(EVENT_SERIAL_ERROR, e));
+      this.startSerialInternal();
+      await this.connection.disconnectAsync();
     } finally {
       progress(undefined);
     }
   }
 
+  private async startSerialInternal() {
+    // This is async but won't return until we stop serial so we error handle with an event.
+    if (!this.connection) {
+      throw new Error("Must be connected now");
+    }
+    if (this.serialReadInProgress) {
+      await this.stopSerialInternal();
+    }
+    this.serialReadInProgress = this.connection
+      .startSerial(this.serialListener)
+      .then(() => this.log("Finished listening for serial data"))
+      .catch((e) => {
+        this.emit(EVENT_SERIAL_ERROR, e);
+      });
+  }
+
+  private async stopSerialInternal() {
+    if (this.connection && this.serialReadInProgress) {
+      this.connection.stopSerial(this.serialListener);
+      await this.serialReadInProgress;
+      this.serialReadInProgress = undefined;
+    }
+    this.emit(EVENT_SERIAL_RESET, {});
+  }
+
   /**
    * Disconnect from the device.
    */
   async disconnect(): Promise<void> {
     try {
       if (this.connection) {
-        this.stopSerial();
-        this.connection.disconnectAsync();
+        await this.stopSerialInternal();
+        await this.connection.disconnectAsync();
       }
     } catch (e) {
       this.log("Error during disconnection:\r\n" + e);
@@ -291,7 +362,7 @@ export class MicrobitWebUSBConnection extends EventEmitter {
   serialWrite(data: string): Promise<void> {
     return this.withEnrichedErrors(async () => {
       if (this.connection) {
-        this.connection.daplink.serialWrite(data);
+        return this.connection.daplink.serialWrite(data);
       }
     });
   }
@@ -311,7 +382,7 @@ export class MicrobitWebUSBConnection extends EventEmitter {
     }
     await this.connection.reconnectAsync();
     if (serial) {
-      this.connection.startSerial(this.serialListener);
+      this.startSerialInternal();
     }
     this.setStatus(ConnectionStatus.CONNECTED);
   }