Polish: Get Time from the VPN client (#32)

> [!NOTE]
> Depends on
https://github.com/mozilla-mobile/mozilla-vpn-client/pull/9776/files

Pulls the connection timestamp from the VPN state, allowing them to
sync.



![image](https://github.com/user-attachments/assets/9d138d03-3fa3-44ab-a996-f8656eea0f56)

src/background/vpncontroller/states.js

@@ -42,6 +42,10 @@ export class VPNState {
 
   /** @type {ServerCountry | undefined } */
   exitServerCountry = new ServerCountry();
+  /**
+   * Timestamp since the VPN connection was established
+   */
+  connectedSince = 0;
   /**
    * Constructs state of another state, moving
    * non essential data.
@@ -130,16 +134,20 @@ export class StateVPNEnabled extends VPNState {
    * @param {VPNState} other -
    * @param {string|boolean} aloophole - False if loophole is not supported,
    */
-  constructor(other, aloophole) {
+  constructor(other, aloophole, connectedSince) {
     super(other);
     if (other) {
       this.loophole = other.loophole;
       this.exitServerCity = other.exitServerCity;
       this.exitServerCountry = other.exitServerCountry;
+      this.connectedSince = other.connectedSince;
     }
     if (aloophole) {
       this.loophole = aloophole;
     }
+    if (connectedSince) {
+      this.connectedSince = connectedSince;
+    }
   }
 
   state = "Enabled";

src/background/vpncontroller/vpncontroller.js

@@ -145,6 +145,12 @@ export class VPNController extends Component {
       case "status":
         const status = response.status;
         const controllerState = status.vpn;
+        const connectedSince = (() => {
+          if (!status.connectedSince) {
+            return 0;
+          }
+          return parseInt(status.connectedSince);
+        })();
         const exit_city_name = status.location["exit_city_name"];
         const exit_country_code = status.location["exit_country_code"];
         const exitServerCountry = this.#mState.value.servers.find(
@@ -163,7 +169,8 @@ export class VPNController extends Component {
         if (controllerState === "StateOn") {
           this.#mState.value = new StateVPNEnabled(
             next_state,
-            status.localProxy?.url
+            status.localProxy?.url,
+            connectedSince
           );
           return;
         }

src/components/vpncard.js

@@ -27,10 +27,9 @@ export class VPNCard extends LitElement {
   constructor() {
     super();
     this.enabled = false;
-    this.connectedSince = Date.now();
-
     this.cityName = "";
     this.countryFlag = "";
+    this.connectedSince = 0;
   }
   #intervalHandle = null;
 
@@ -78,9 +77,11 @@ export class VPNCard extends LitElement {
         formatSingle(secs)
       );
     }
-    const timeString = this.enabled
-      ? html`<p>${formatTime(Date.now() - this.connectedSince)}</p>`
-      : html``;
+    //console.log(`Connected Since ${this.connectedSince}`)
+    const time = Date.now() - this.connectedSince;
+    //console.log(`Elapsed Time: ${time}`)
+
+    const timeString = this.enabled ? html`<p>${formatTime(time)}</p>` : html``;
 
     const subLine = this.enabled
       ? "Secure and private"
@@ -222,31 +223,5 @@ export class VPNCard extends LitElement {
       border-radius: 6px;
     }
   `;
-
-  /**
-   * Returns the Properties this element should have based on a VPN State
-   * @param {VPNState} vpnState
-   * @returns {VPNCard.properties}
-   */
-  static propertiesFrom(vpnState) {
-    return {
-      enabled: vpnState.connected,
-      cityName: vpnState.exitServerCity?.name,
-      countryFlag: vpnState.exitServerCountry?.code,
-      connectedSince: Date.now(), // TODO: We actually dont send this from the client
-    };
-  }
-  /**
-   * Returns the Properties this element should have based on a VPN State
-   * @param {VPNState} vpnState
-   * @returns {void}
-   */
-  apply(vpnState) {
-    const bag = VPNCard.propertiesFrom(vpnState);
-    this.enabled = bag.enabled;
-    this.cityName = bag.cityName;
-    this.countryFlag = bag.countryFlag;
-    this.connectedSince = bag.connectedSince;
-  }
 }
 customElements.define("vpn-card", VPNCard);

src/ui/browserAction/popupPage.js

@@ -114,6 +114,7 @@ export class BrowserActionPopup extends LitElement {
               .enabled=${this.vpnState?.connected}
               .cityName=${this.vpnState?.exitServerCity?.name}
               .countryFlag=${this.vpnState?.exitServerCountry?.code}
+              .connectedSince=${this.vpnState?.connectedSince}
             ></vpn-card>
             ${this.locationSettings()}
           </main>