FXVPN-200: Fix missing connection health info (#80)

mozilla-extensions · Nov 25, 2024 · 113fc40 · 113fc40
1 parent 2715649
commit 113fc40
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 14 deletions.
diff --git a/src/background/main.js b/src/background/main.js
@@ -35,7 +35,11 @@ class Main {
     this.proxyHandler,
     this.vpnController
   );
-  toolbarIconHandler = new ToolbarIconHandler(this, this.extController);
+  toolbarIconHandler = new ToolbarIconHandler(
+    this,
+    this.extController,
+    this.vpnController
+  );
   tabReloader = new TabReloader(this, this.extController, this.proxyHandler);
 
   async init() {

diff --git a/src/background/toolbarIconHandler.js b/src/background/toolbarIconHandler.js
@@ -19,36 +19,57 @@ export class ToolbarIconHandler extends Component {
    * @param {*} receiver
    * @param {ExtensionController} extController
    */
-  constructor(receiver, extController) {
+  constructor(receiver, extController, vpnController) {
     super(receiver);
     this.extController = extController;
+    this.vpnController = vpnController;
   }
 
   /** @type {FirefoxVPNState | undefined} */
   extState;
 
+  vpnState;
+
   async init() {
     this.extController.state.subscribe((s) => {
       this.extState = s;
       this.maybeUpdateBrowserActionIcon();
     });
 
+    this.vpnController.state.subscribe((s) => {
+      this.vpnState = s;
+      this.maybeUpdateBrowserActionIcon();
+    });
+
     // Listen for darkmode/lightmode changes and update the browserAction icon
     window
       .matchMedia("(prefers-color-scheme: dark)")
       .addEventListener("change", (e) => {
         this.maybeUpdateBrowserActionIcon();
       });
 
+    // Catch changes between private and non-private browsing windows
     browser.windows.onFocusChanged.addListener(
       this.maybeUpdateBrowserActionIcon.bind(this)
     );
 
+    // Catch changes between private and non-private browsing modes
+    // when a new window is opened.
     browser.windows.onCreated.addListener(
       this.maybeUpdateBrowserActionIcon.bind(this)
     );
   }
 
+  setIcon(scheme, status, id) {
+    browser.browserAction.setIcon({
+      path: {
+        16: `./../assets/logos/browserAction/logo-${scheme}-${status}.svg`,
+        32: `./../assets/logos/browserAction/logo-${scheme}-${status}.svg`,
+      },
+      windowId: id,
+    });
+  }
+
   async maybeUpdateBrowserActionIcon() {
     const windowInfo = await browser.windows.getCurrent();
     if (!windowInfo) {
@@ -61,16 +82,18 @@ export class ToolbarIconHandler extends Component {
 
     const scheme = darkMode || windowInfo.incognito ? "light" : "dark";
 
-    const status = ["Connecting", "Enabled"].includes(this.extState.state)
+    let status = ["Connecting", "Enabled"].includes(this.extState.state)
       ? "enabled"
       : "disabled";
 
-    browser.browserAction.setIcon({
-      path: {
-        16: `./../assets/logos/browserAction/logo-${scheme}-${status}.svg`,
-        32: `./../assets/logos/browserAction/logo-${scheme}-${status}.svg`,
-      },
-      windowId: windowInfo.id,
-    });
+    const stability = this.vpnState?.connectionHealth;
+
+    if (!stability || stability == "Stable") {
+      return this.setIcon(scheme, status, windowInfo.id);
+    }
+
+    status = stability === "Unstable" ? "unstable" : "disabled";
+
+    return this.setIcon(scheme, status, windowInfo.id);
   }
 }
diff --git a/src/background/vpncontroller/states.js b/src/background/vpncontroller/states.js
@@ -34,10 +34,10 @@ export class VPNState {
   // True if it is authenticated
   authenticated = false;
   // Can be "Stable", "Unstable", "NoSignal"
-  connectionStability = "Stable";
+  connectionHealth = "Stable";
+
   // True if the client version is post v2.23 but not latest
   needsUpdate = false;
-
   /**
    * A socks:// url to connect to
    * to bypass the vpn.

diff --git a/src/background/vpncontroller/vpncontroller.js b/src/background/vpncontroller/vpncontroller.js
@@ -353,7 +353,8 @@ export function fromVPNStatusResponse(
     return new StateVPNOnPartial(
       exitServerCity,
       exitServerCountry,
-      status.localProxy?.url
+      status.localProxy?.url,
+      status.connectionHealth
     );
   }
   if (

diff --git a/src/ui/browserAction/popupPage.js b/src/ui/browserAction/popupPage.js
@@ -177,7 +177,7 @@ export class BrowserActionPopup extends LitElement {
               .cityName=${this.vpnState?.exitServerCity?.name}
               .countryFlag=${this.vpnState?.exitServerCountry?.code}
               .connectedSince=${this.extState?.connectedSince}
-              .stability=${this.vpnState?.connectionStability}
+              .stability=${this.vpnState?.connectionHealth}
               .hasContext=${this._siteContext}
               .connecting=${this.extState?.connecting}
             ></vpn-card>