From c54e5ee056c925f09fdea49deeb3b0b0a67fe2a4 Mon Sep 17 00:00:00 2001 From: Sebastian Streich Date: Tue, 17 Dec 2024 16:22:46 +0100 Subject: [PATCH] Add basic glean onboarding page --- src/background/onboarding.js | 3 ++- src/components/message-screen.js | 39 +++++++++++++++++++++++------ src/components/prefab-screens.js | 43 +++++++++++++++++++++++++------- src/ui/browserAction/popup.html | 1 + 4 files changed, 68 insertions(+), 18 deletions(-) diff --git a/src/background/onboarding.js b/src/background/onboarding.js index 8fa0a96..a509eb7 100644 --- 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 index 756a211..9fa57cd 100644 --- 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 {

${this.heading}

- + ${when( + paginationIndicators.length > 0, + () => html` + + `, + null + )} +
${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 index 8844c5c..5518da6 100644 --- 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`

${tr(`onboarding${i}_body`)}

`, - 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` +

${tr("telemetry_screen_descr")}

+
+

${tr("telemetry_toggle_text")}

+ { + telemetry.setTelemetryEnabled(!telemetry.telemetryEnabled.value); + e.target.enabled = !telemetry.telemetryEnabled.value; + }} + > +
+ `, + 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 index 0cebbae..c069dc1 100644 --- a/src/ui/browserAction/popup.html +++ b/src/ui/browserAction/popup.html @@ -38,6 +38,7 @@ +