FXVPN-12: - record telemetry in UI

src/background/telemetry.js

@@ -17,6 +17,7 @@ import { VPNController } from "./vpncontroller/vpncontroller.js";
 export class Telemetry {
   // Things to expose to the UI
   static properties = {
+    telemetryEnabled: PropertyType.Bindable,
     setTelemetryEnabled: PropertyType.Function,
     record: PropertyType.Function,
   };
@@ -70,10 +71,10 @@ export class Telemetry {
     });
   }
   startSession() {
-    this.#controller.postToApp("start_session");
+    this.#controller.postToApp("session_start");
   }
   stopSession() {
-    this.#controller.postToApp("stop_session");
+    this.#controller.postToApp("session_stop");
   }
 
   #controller;

src/ui/browserAction/backend.js

@@ -29,4 +29,16 @@ export const extController = await getExposedObject("ExtensionController");
 export const proxyHandler = await getExposedObject("ProxyHandler");
 export const butterBarService = await getExposedObject("ButterBarService");
 
+/**
+ * Manually define the types for convinence, please update if making changes :)
+ *
+ * @typedef {Object} ipcTelemetry
+ * @property {IBindable<bool>} telemetryEnabled - Is telemetry enabled?
+ * @property {(bool)=>Promise<>} setTelemetryEnabled - request to set telemetry
+ * @property {(string,any)=>Promise<>} record - record telemetry
+ *
+ */
+/** @type {ipcTelemetry} */
+export const telemetry = await getExposedObject("Telemetry");
+
 export const ready = Promise.all([vpnController, proxyHandler]);

src/ui/browserAction/popupConditional.js

@@ -5,7 +5,7 @@
 import { ConditionalView } from "../../components/conditional-view.js";
 import { propertySum } from "../../shared/property.js";
 import { Utils } from "../../shared/utils.js";
-import { vpnController } from "./backend.js";
+import { vpnController, telemetry } from "./backend.js";
 
 export class PopUpConditionalView extends ConditionalView {
   constructor() {
@@ -24,6 +24,11 @@ export class PopUpConditionalView extends ConditionalView {
           features,
           supportedPlatform
         );
+        if (this.slotName == !"default") {
+          requestIdleCallback(() => {
+            telemetry.record("error_screen", { error: this.slotName });
+          });
+        }
       },
       vpnController.state,
       vpnController.featureList

src/ui/browserAction/popupPage.js

@@ -17,6 +17,7 @@ import {
   proxyHandler,
   extController,
   butterBarService,
+  telemetry,
 } from "./backend.js";
 
 import { Utils } from "../../shared/utils.js";
@@ -129,6 +130,9 @@ export class BrowserActionPopup extends LitElement {
     requestIdleCallback(() => {
       vpnController.postToApp("featurelist");
     });
+    requestIdleCallback(() => {
+      telemetry.record("main_screen");
+    });
   }
 
   get currentSiteContext() {
@@ -153,6 +157,12 @@ export class BrowserActionPopup extends LitElement {
 
   render() {
     const handleVPNToggle = () => {
+      if (!this.enabled) {
+        telemetry.record("used_feature_disable_firefox_protection");
+        telemetry.record("fx_protection_disabled");
+      } else {
+        telemetry.record("fx_protection_enabled");
+      }
       extController.toggleConnectivity();
     };
 

src/ui/pageAction/pageAction.js

@@ -4,7 +4,11 @@
 
 import { html, css, LitElement } from "../../vendor/lit-all.min.js";
 
-import { vpnController, proxyHandler } from "../browserAction/backend.js";
+import {
+  vpnController,
+  proxyHandler,
+  telemetry,
+} from "../browserAction/backend.js";
 
 import { Utils } from "../../shared/utils.js";
 import { tr } from "../../shared/i18n.js";
@@ -70,6 +74,9 @@ export class PageActionPopup extends LitElement {
     };
 
     const removeContext = () => {
+      this._siteContext.excluded
+        ? telemetry.record("used_feature_page_action_revoke_exclude")
+        : telemetry.record("used_feature_page_action_revoke_geopref");
       proxyHandler.removeContextForOrigin(this._siteContext.origin);
     };
 

src/ui/settingsPage/settingsPage.js

@@ -34,6 +34,9 @@ export class SettingsPage extends LitElement {
     this.proxyHandler.then((p) => {
       p.siteContexts.subscribe((context) => (this.contexts = context));
     });
+    getExposedObject("Telemetry").then((t) =>
+      t.record("used_feature_settings_page")
+    );
   }
 
   connectedCallback() {

tests/jest/background/telemetry.test.mjs

@@ -152,7 +152,7 @@ describe("Telemetry", () => {
         proxyHandler
       );
       extensionController.state.set(new StateFirefoxVPNEnabled(true, 0));
-      expect(mocksendMessage).toBeCalledWith("start_session");
+      expect(mocksendMessage).toBeCalledWith("session_start");
     });
     it("Will *NOT* start a session when switching from partial to full", () => {
       const target = new Telemetry(
@@ -161,7 +161,7 @@ describe("Telemetry", () => {
         proxyHandler
       );
       extensionController.state.set(new StateFirefoxVPNEnabled(true, 0));
-      expect(mocksendMessage).toBeCalledWith("start_session");
+      expect(mocksendMessage).toBeCalledWith("session_start");
       mocksendMessage.mockReset();
       extensionController.state.set(new StateFirefoxVPNEnabled(false, 0));
       expect(mocksendMessage).not.toBeCalled();
@@ -173,10 +173,10 @@ describe("Telemetry", () => {
         proxyHandler
       );
       extensionController.state.set(new StateFirefoxVPNEnabled(true, 0));
-      expect(mocksendMessage).toBeCalledWith("start_session");
+      expect(mocksendMessage).toBeCalledWith("session_start");
       mocksendMessage.mockReset();
       extensionController.state.set(new StateFirefoxVPNDisabled(false));
-      expect(mocksendMessage).toBeCalledWith("stop_session");
+      expect(mocksendMessage).toBeCalledWith("session_stop");
     });
     it("Will ignore idle/connecting", () => {
       const target = new Telemetry(