Add basic glean onboarding page

mozilla-extensions · Dec 17, 2024 · c54e5ee · c54e5ee
1 parent be6470f
commit c54e5ee
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 18 deletions.
diff --git a/src/background/onboarding.js b/src/background/onboarding.js
@@ -12,7 +12,7 @@ import { fromStorage, putIntoStorage } from "./vpncontroller/vpncontroller.js";
 
 const ONBOARDING_KEY = "mozillaVpnOnboarding";
 const FIRST_PAGE = 1;
-export const NUMBER_OF_ONBOARDING_PAGES = 3;
+export const NUMBER_OF_ONBOARDING_PAGES = 4;
 const FIRST_UNUSED_PAGE = NUMBER_OF_ONBOARDING_PAGES + 1;
 
 /**
@@ -36,6 +36,7 @@ export class OnboardingController extends Component {
   }
 
   async init() {
+    return; // DEBUG
     this.#mCurrentOnboardingPage.value = await fromStorage(
       browser.storage.local,
       ONBOARDING_KEY,

diff --git a/src/components/message-screen.js b/src/components/message-screen.js
@@ -33,6 +33,7 @@ export class MessageScreen extends LitElement {
     identifier: { type: String },
     totalPages: { type: Number },
     currentPage: { type: Number },
+    bodyContent: { type: Object },
   };
   constructor() {
     super();
@@ -64,14 +65,23 @@ export class MessageScreen extends LitElement {
           <h1>${this.heading}</h1>
           <slot></slot>
         </div>
-        <div class="pagination">
-          ${repeat(
-            paginationIndicators,
-            (item) => item.id,
-            (item) =>
-              html` <span class="holder"><span class="${item}"></span></span>`
-          )}
-        </div>
+        ${when(
+          paginationIndicators.length > 0,
+          () => html`
+            <div class="pagination">
+              ${repeat(
+                paginationIndicators,
+                (item) => item.id,
+                (item) =>
+                  html` <span class="holder"
+                    ><span class="${item}"></span
+                  ></span>`
+              )}
+            </div>
+          `,
+          null
+        )}
+
         <div class="lower">
           ${when(
             this.primaryAction,
@@ -155,6 +165,19 @@ export class MessageScreen extends LitElement {
       inline-size: 111px;
     }
 
+    @media (prefers-color-scheme: dark) {
+      img.onboarding-screen-4 {
+        filter: invert();
+      }
+    }
+    ::slotted(.row) {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      justify-content: space-between;
+      align-items: center;
+    }
+
     .pagination {
       box-sizing: border-box;
       position: relative;

diff --git a/src/components/prefab-screens.js b/src/components/prefab-screens.js
@@ -5,7 +5,10 @@
 import { html, render } from "../vendor/lit-all.min.js";
 import { MessageScreen } from "./message-screen.js";
 import { tr } from "../shared/i18n.js";
-import { onboardingController } from "../ui/browserAction/backend.js";
+import {
+  onboardingController,
+  telemetry,
+} from "../ui/browserAction/backend.js";
 import { NUMBER_OF_ONBOARDING_PAGES } from "../background/onboarding.js";
 
 const open = (url) => {
@@ -125,28 +128,50 @@ defineMessageScreen({
 });
 
 // Need to start loop at 1 because of how the strings were added to l10n repo.
-for (let i = 1; i <= NUMBER_OF_ONBOARDING_PAGES; i++) {
-  const isFinalScreen = i === NUMBER_OF_ONBOARDING_PAGES;
+// We need to stop the looop at NUMBER_OF_ONBOARDING_PAGES-1 -> as we want the Telemetry page to
+// be last and it has special logic.
+for (let i = 1; i <= NUMBER_OF_ONBOARDING_PAGES - 1; i++) {
   defineMessageScreen({
     tag: `onboarding-screen-${i}`,
     img: `onboarding-${i}.svg`,
     heading: tr(`onboarding${i}_title`),
     bodyText: html` <p>${tr(`onboarding${i}_body`)}</p> `,
-    primaryAction: isFinalScreen ? tr("done") : tr("next"),
+    primaryAction: tr("next"),
     onPrimaryAction: () => {
-      isFinalScreen
-        ? onboardingController.finishOnboarding()
-        : onboardingController.nextOnboardingPage();
+      onboardingController.nextOnboardingPage();
     },
-    secondaryAction: isFinalScreen ? tr(" ") : tr("skip"), // For final screen need a space - when using something like `null` there is a large vertical gap
+    secondaryAction: tr("skip"),
     onSecondaryAction: () => {
-      isFinalScreen ? null : onboardingController.finishOnboarding();
+      onboardingController.finishOnboarding();
     },
     totalPages: NUMBER_OF_ONBOARDING_PAGES,
     currentPage: i,
   });
 }
 
+defineMessageScreen({
+  tag: `onboarding-screen-${NUMBER_OF_ONBOARDING_PAGES}`,
+  img: `../logos/logo-dark.svg`,
+  heading: tr(`telemetry_screen_header`),
+  bodyText: html`
+    <p>${tr("telemetry_screen_descr")}</p>
+    <div class="row">
+      <p>${tr("telemetry_toggle_text")}</p>
+      <mz-pill
+        .enabled=${telemetry.telemetryEnabled.value}
+        @click=${(e) => {
+          telemetry.setTelemetryEnabled(!telemetry.telemetryEnabled.value);
+          e.target.enabled = !telemetry.telemetryEnabled.value;
+        }}
+      ></mz-pill>
+    </div>
+  `,
+  onPrimaryAction: () => {
+    onboardingController.finishOnboarding();
+  },
+  primaryAction: tr("done"),
+});
+
 defineMessageScreen({
   tag: "unsupported-os-message-screen",
   img: "message-os.svg",

diff --git a/src/ui/browserAction/popup.html b/src/ui/browserAction/popup.html
@@ -38,6 +38,7 @@
       <onboarding-screen-1 slot="onboarding-1"></onboarding-screen-1>
       <onboarding-screen-2 slot="onboarding-2"></onboarding-screen-2>
       <onboarding-screen-3 slot="onboarding-3"></onboarding-screen-3>
+      <onboarding-screen-4 slot="onboarding-4"></onboarding-screen-4>
       <!-- TODO: Split Tunnel Message, Update Message -->
       <popup-browseraction slot="default"> </popup-browseraction>
     </popup-condview>