diff --git a/src/background/main.js b/src/background/main.js index 38e8df92..f25c99d2 100644 --- 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 index e57b697e..745685fd 100644 --- a/src/background/toolbarIconHandler.js +++ b/src/background/toolbarIconHandler.js @@ -19,20 +19,28 @@ 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)") @@ -40,15 +48,28 @@ export class ToolbarIconHandler extends Component { 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 index c1b3c78c..b9b9fe0a 100644 --- 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 index dea643ed..97565d52 100644 --- 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 index a8ddd0b0..ea6eaf34 100644 --- 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} >