Improvement: Allow disconnect from 'Connecting', with limits. (#147)

This PR: 
- Disables the toggle when the extension is connecting. 
   **Why:** 
- Button mashing on the toggle when the extension is 'connecting'
(meaning the VPN client is transitioning from StateOn to StateOnPartial)
results in wonky/unexpected behavior.
- The toggle already appears disabled when connecting. You wouldn't
expect clicking on it to do anything.
- Adds a 15 second timeout, after which the extension toggle is
re-enabled (actually and visibly)
**Why:** 
- If the toggle remains disabled, and the client never successfully
transitions to 'StateOnPartial', the extension is stuck in the
connecting state.

src/background/extensionController/extensionController.js

@@ -27,6 +27,7 @@ export class ExtensionController extends Component {
   static properties = {
     state: PropertyType.Bindable,
     toggleConnectivity: PropertyType.Function,
+    allowDisconnect: PropertyType.Bindable,
   };
 
   /**
@@ -51,6 +52,14 @@ export class ExtensionController extends Component {
   async init() {}
 
   toggleConnectivity() {
+    if (
+      this.#mState.value.state === "Connecting" &&
+      this.clientState.state === "Disabled"
+    ) {
+      this.#mState.set(new StateFirefoxVPNDisabled(true));
+      this.vpnController.postToApp("deactivate");
+      return;
+    }
     if (this.#mState.value.enabled) {
       // We are turning off the extension
 
@@ -73,6 +82,12 @@ export class ExtensionController extends Component {
     }
 
     this.#mState.set(new StateFirefoxVPNConnecting());
+
+    this.#mAllowDisconnect.value = false;
+    setTimeout(() => {
+      this.#mAllowDisconnect.value = true;
+    }, 10000);
+
     // Send activation to client and wait for response
     this.vpnController.postToApp("activate");
   }
@@ -81,6 +96,10 @@ export class ExtensionController extends Component {
     return this.#mState.readOnly;
   }
 
+  get allowDisconnect() {
+    return this.#mAllowDisconnect.readOnly;
+  }
+
   /**
    *
    * @param {VPNState} newClientState
@@ -137,5 +156,6 @@ export class ExtensionController extends Component {
   }
 
   #mState = property(new FirefoxVPNState());
+  #mAllowDisconnect = property(false);
   mKeepAliveConnection = false;
 }

src/components/prefab-screens.js

@@ -17,11 +17,11 @@ const sumoLink =
   "https://support.mozilla.org/products/firefox-private-network-vpn";
 
 const closeAfter = (f) => {
-    if(f){
-      f();
-    }
-    window.close();
-}
+  if (f) {
+    f();
+  }
+  window.close();
+};
 
 const defineMessageScreen = (
   tag,
@@ -31,7 +31,7 @@ const defineMessageScreen = (
   primaryAction,
   onPrimaryAction,
   secondaryAction = tr("getHelp"),
-  onSecondaryAction = () => closeAfter (()=>open(sumoLink)),
+  onSecondaryAction = () => closeAfter(() => open(sumoLink)),
   totalPages = 0,
   currentPage = 0
 ) => {
@@ -73,7 +73,8 @@ defineMessageScreen(
   tr("bodySubscribeNow"),
   tr("btnSubscribeNow"),
   () => {
-    () => closeAfter (()=>open("https://www.mozilla.org/products/vpn#pricing"));
+    () =>
+      closeAfter(() => open("https://www.mozilla.org/products/vpn#pricing"));
   }
 );
 
@@ -84,7 +85,8 @@ defineMessageScreen(
   tr("bodyNeedsUpdate2"),
   tr("btnDownloadNow"),
   () => {
-    () => closeAfter (()=>open("https://www.mozilla.org/products/vpn/download/"));
+    () =>
+      closeAfter(() => open("https://www.mozilla.org/products/vpn/download/"));
   }
 );
 
@@ -105,7 +107,8 @@ defineMessageScreen(
   `,
   tr("btnDownloadNow"),
   () => {
-    () => closeAfter (()=>open("https://www.mozilla.org/products/vpn/download/"));
+    () =>
+      closeAfter(() => open("https://www.mozilla.org/products/vpn/download/"));
   }
 );
 

src/components/vpncard.js

@@ -32,6 +32,7 @@ export class VPNCard extends LitElement {
     stability: { type: String },
     hasContext: { type: Boolean },
     connecting: { type: Boolean },
+    allowDisconnect: { type: Boolean },
   };
 
   constructor() {
@@ -43,6 +44,7 @@ export class VPNCard extends LitElement {
     this.connectedSince = 0;
     this.stability = VPNState.Stable;
     this.connecting = false;
+    this.allowDisconnect = false;
   }
   #intervalHandle = null;
   #shieldElement = createRef();
@@ -81,6 +83,7 @@ export class VPNCard extends LitElement {
       box: true,
       on: this.enabled,
       connecting: this.connecting,
+      allowDisconnect: this.allowDisconnect,
       unstable: this.enabled && this.stability === VPNState.Unstable,
       noSignal: this.enabled && this.stability === VPNState.NoSignal,
       stable:
@@ -240,6 +243,15 @@ export class VPNCard extends LitElement {
       background: var(--main-card-background);
       box-shadow: var(--box-shadow-on);
     }
+
+    .box.connecting .pill {
+      pointer-events: none;
+    }
+
+    .box.connecting.allowDisconnect .pill {
+      pointer-events: all;
+      opacity: 1;
+    }
     main,
     footer {
       display: flex;

src/ui/browserAction/popupPage.js

@@ -65,6 +65,7 @@ export class BrowserActionPopup extends LitElement {
     _siteContext: { type: Object },
     hasSiteContext: { type: Boolean },
     _siteContexts: { type: Array },
+    allowDisconnect: { type: Boolean },
     alerts: { type: Array },
   };
 
@@ -90,6 +91,9 @@ export class BrowserActionPopup extends LitElement {
       this.updatePage();
     });
     this.updatePage();
+    extController.allowDisconnect.subscribe((s) => {
+      this.allowDisconnect = s;
+    });
   }
   updatePage() {
     Utils.getCurrentTab().then(async (tab) => {
@@ -215,6 +219,7 @@ export class BrowserActionPopup extends LitElement {
               .stability=${this.vpnState?.connectionHealth}
               .hasContext=${this._siteContext}
               .connecting=${this.extState?.connecting}
+              .allowDisconnect=${this.allowDisconnect}
             ></vpn-card>
             ${this.locationSettings()}
           </main>