Add state connecting (#76)

Adds semi-placeholder connecting UI.
mozilla-extensions · Oct 3, 2024 · d7382f9 · d7382f9
1 parent 93a4b55
commit d7382f9
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 13 deletions.
diff --git a/src/background/extensionController/states.js b/src/background/extensionController/states.js
@@ -18,6 +18,8 @@ export class FirefoxVPNState {
    */
   enabled = false;
 
+  connecting = false;
+
   /**
    * True when the Firefox VPN has been deactivated
    * but the client VPN is connected.
@@ -88,6 +90,7 @@ export class StateFirefoxVPNIdle extends FirefoxVPNState {
 export class StateFirefoxVPNConnecting extends FirefoxVPNState {
   state = "Connecting";
   enabled = false;
+  connecting = true;
   bypassTunnel = false;
   useExitRelays = false;
 }
diff --git a/src/components/vpncard.js b/src/components/vpncard.js
@@ -27,6 +27,7 @@ export class VPNCard extends LitElement {
     countryFlag: { type: String },
     stability: { type: String },
     hasContext: { type: Boolean },
+    connecting: { type: Boolean },
   };
 
   constructor() {
@@ -37,6 +38,7 @@ export class VPNCard extends LitElement {
     this.countryFlag = "";
     this.connectedSince = 0;
     this.stability = VPNState.Stable;
+    this.connecting = false;
   }
   #intervalHandle = null;
 
@@ -61,6 +63,7 @@ export class VPNCard extends LitElement {
     const boxClasses = {
       box: true,
       on: this.enabled,
+      connecting: this.connecting,
       unstable: this.enabled && this.stability === VPNState.Unstable,
       noSignal: this.enabled && this.stability === VPNState.NoSignal,
       stable:
@@ -86,22 +89,29 @@ export class VPNCard extends LitElement {
         formatSingle(secs)
       );
     }
-    //console.log(`Connected Since ${this.connectedSince}`)
+
     const time = Date.now() - this.connectedSince;
-    //console.log(`Elapsed Time: ${time}`)
 
     const timeString =
       this.enabled && this.stability === VPNState.Stable
         ? html`<p class="timer">${formatTime(time)}</p>`
         : html``;
-    const vpnHeader = this.enabled ? tr("vpnIsOn") : tr("vpnIsOff");
 
+    const vpnHeader = () => {
+      if (this.enabled) {
+        return tr("vpnIsOn");
+      }
+      if (this.connecting) {
+        return "Connecting...";
+      }
+      return tr("vpnIsOff");
+    };
     return html`
       <div class="${classMap(boxClasses)}">
         <main>
-          ${VPNCard.shield(this.enabled)}
+          ${VPNCard.shield(this.enabled, this.connecting)}
           <div class="infobox">
-            <h1>${vpnHeader}</h1>
+            <h1>${vpnHeader()}</h1>
             ${VPNCard.subline(
               this.enabled,
               this.stability,
@@ -111,7 +121,9 @@ export class VPNCard extends LitElement {
           </div>
           <button class="pill" @click=${this.#toggle}></button>
         </main>
-        ${this.enabled ? VPNCard.footer(this.cityName, this.countryFlag) : null}
+        ${this.enabled || this.connecting
+          ? VPNCard.footer(this.cityName, this.countryFlag)
+          : null}
       </div>
     `;
   }
@@ -151,8 +163,8 @@ export class VPNCard extends LitElement {
     }
   }
 
-  static shield(enabled) {
-    if (!enabled) {
+  static shield(enabled, connecting) {
+    if (!enabled && !connecting) {
       return html`
         <svg>
           <use xlink:href="../../assets/img/globe-shield-off.svg#globe"></use>
@@ -183,7 +195,8 @@ export class VPNCard extends LitElement {
       flex-direction: column;
       box-shadow: var(--box-shadow-off);
     }
-    .box.on {
+    .box.on,
+    .box.connecting {
       background: var(--main-card-background);
       box-shadow: var(--box-shadow-on);
     }
@@ -216,8 +229,10 @@ export class VPNCard extends LitElement {
 
     .box * {
       color: var(--text-color-primary);
+      transition: all 0.3s ease;
     }
-    .box.on * {
+    .box.on *,
+    .box.connecting * {
       color: var(--main-card-text-color);
     }
     .box.unstable {
@@ -228,7 +243,8 @@ export class VPNCard extends LitElement {
       --shield-color: var(--color-fatal-error);
       --error-fill: var(--color-fatal-error);
     }
-    .box.stable {
+    .box.stable,
+    .box.connecting {
       --shield-color: var(--color-enabled);
     }
 
@@ -295,14 +311,17 @@ export class VPNCard extends LitElement {
     .pill:active {
       background-color: var(--color-disabled-active);
     }
-    .on .pill {
+    .on .pill,
+    .connecting .pill {
       background-color: var(--color-enabled);
     }
 
+    .connecting .pill:hover,
     .on .pill:hover {
       background-color: var(--color-enabled-hover);
     }
 
+    .connecting .pill:active,
     .on .pill:active {
       background-color: var(--color-enabled-active);
     }
@@ -319,10 +338,20 @@ export class VPNCard extends LitElement {
       left: 3px;
       transition: all 0.25s;
     }
+
+    .connecting .pill::before,
     .on .pill::before {
       top: 3px;
       left: 24px;
     }
+
+    .box.connecting svg,
+    .box.connecting .timer,
+    .connecting .pill,
+    .connecting footer {
+      opacity: 0.5;
+      transition: opacity 0.3s ease;
+    }
   `;
 }
 customElements.define("vpn-card", VPNCard);

diff --git a/src/ui/browserAction/popupPage.js b/src/ui/browserAction/popupPage.js
@@ -177,6 +177,7 @@ export class BrowserActionPopup extends LitElement {
               .connectedSince=${this.vpnState?.connectedSince}
               .stability=${this.vpnState?.connectionStability}
               .hasContext=${this._siteContext}
+              .connecting=${this.extState?.connecting}
             ></vpn-card>
             ${this.locationSettings()}
           </main>
@@ -244,7 +245,7 @@ export class BrowserActionPopup extends LitElement {
       ctx?.cityCode,
       this.servers
     );
-    console.log(serverListSelectedCity);
+
     const serverListElement = BrowserActionPopup.createServerList(
       serverListSelectedCity,
       this.servers,