summaryrefslogtreecommitdiffstats
path: root/browser/components/urlbar/content/quicksuggestOnboarding.js
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--browser/components/urlbar/content/quicksuggestOnboarding.js338
1 files changed, 338 insertions, 0 deletions
diff --git a/browser/components/urlbar/content/quicksuggestOnboarding.js b/browser/components/urlbar/content/quicksuggestOnboarding.js
new file mode 100644
index 0000000000..5b78bd4409
--- /dev/null
+++ b/browser/components/urlbar/content/quicksuggestOnboarding.js
@@ -0,0 +1,338 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { QuickSuggest } = ChromeUtils.importESModule(
+ "resource:///modules/QuickSuggest.sys.mjs"
+);
+const { ONBOARDING_CHOICE } = QuickSuggest;
+
+const VARIATION_MAP = {
+ a: {
+ l10nUpdates: {
+ onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1",
+ "introduction-title": "firefox-suggest-onboarding-introduction-title-1",
+ "main-title": "firefox-suggest-onboarding-main-title-1",
+ "main-description": "firefox-suggest-onboarding-main-description-1",
+ "main-accept-option-label":
+ "firefox-suggest-onboarding-main-accept-option-label",
+ "main-accept-option-description":
+ "firefox-suggest-onboarding-main-accept-option-description-1",
+ "main-reject-option-label":
+ "firefox-suggest-onboarding-main-reject-option-label",
+ "main-reject-option-description":
+ "firefox-suggest-onboarding-main-reject-option-description-1",
+ },
+ },
+ b: {
+ l10nUpdates: {
+ onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1",
+ "introduction-title": "firefox-suggest-onboarding-introduction-title-2",
+ "main-title": "firefox-suggest-onboarding-main-title-2",
+ "main-description": "firefox-suggest-onboarding-main-description-2",
+ "main-accept-option-label":
+ "firefox-suggest-onboarding-main-accept-option-label",
+ "main-accept-option-description":
+ "firefox-suggest-onboarding-main-accept-option-description-1",
+ "main-reject-option-label":
+ "firefox-suggest-onboarding-main-reject-option-label",
+ "main-reject-option-description":
+ "firefox-suggest-onboarding-main-reject-option-description-1",
+ },
+ },
+ c: {
+ logoType: "firefox",
+ l10nUpdates: {
+ onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1",
+ "introduction-title": "firefox-suggest-onboarding-introduction-title-3",
+ "main-title": "firefox-suggest-onboarding-main-title-3",
+ "main-description": "firefox-suggest-onboarding-main-description-3",
+ "main-accept-option-label":
+ "firefox-suggest-onboarding-main-accept-option-label",
+ "main-accept-option-description":
+ "firefox-suggest-onboarding-main-accept-option-description-1",
+ "main-reject-option-label":
+ "firefox-suggest-onboarding-main-reject-option-label",
+ "main-reject-option-description":
+ "firefox-suggest-onboarding-main-reject-option-description-1",
+ },
+ },
+ d: {
+ l10nUpdates: {
+ onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1",
+ "introduction-title": "firefox-suggest-onboarding-introduction-title-4",
+ "main-title": "firefox-suggest-onboarding-main-title-4",
+ "main-description": "firefox-suggest-onboarding-main-description-4",
+ "main-accept-option-label":
+ "firefox-suggest-onboarding-main-accept-option-label",
+ "main-accept-option-description":
+ "firefox-suggest-onboarding-main-accept-option-description-2",
+ "main-reject-option-label":
+ "firefox-suggest-onboarding-main-reject-option-label",
+ "main-reject-option-description":
+ "firefox-suggest-onboarding-main-reject-option-description-2",
+ },
+ },
+ e: {
+ logoType: "firefox",
+ l10nUpdates: {
+ onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1",
+ "introduction-title": "firefox-suggest-onboarding-introduction-title-5",
+ "main-title": "firefox-suggest-onboarding-main-title-5",
+ "main-description": "firefox-suggest-onboarding-main-description-5",
+ "main-accept-option-label":
+ "firefox-suggest-onboarding-main-accept-option-label",
+ "main-accept-option-description":
+ "firefox-suggest-onboarding-main-accept-option-description-2",
+ "main-reject-option-label":
+ "firefox-suggest-onboarding-main-reject-option-label",
+ "main-reject-option-description":
+ "firefox-suggest-onboarding-main-reject-option-description-2",
+ },
+ },
+ f: {
+ l10nUpdates: {
+ onboardingNext: "firefox-suggest-onboarding-introduction-next-button-2",
+ "introduction-title": "firefox-suggest-onboarding-introduction-title-6",
+ "main-title": "firefox-suggest-onboarding-main-title-6",
+ "main-description": "firefox-suggest-onboarding-main-description-6",
+ "main-accept-option-label":
+ "firefox-suggest-onboarding-main-accept-option-label",
+ "main-accept-option-description":
+ "firefox-suggest-onboarding-main-accept-option-description-2",
+ "main-reject-option-label":
+ "firefox-suggest-onboarding-main-reject-option-label",
+ "main-reject-option-description":
+ "firefox-suggest-onboarding-main-reject-option-description-2",
+ },
+ },
+ g: {
+ mainPrivacyFirst: true,
+ l10nUpdates: {
+ onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1",
+ "introduction-title": "firefox-suggest-onboarding-introduction-title-7",
+ "main-title": "firefox-suggest-onboarding-main-title-7",
+ "main-description": "firefox-suggest-onboarding-main-description-7",
+ "main-accept-option-label":
+ "firefox-suggest-onboarding-main-accept-option-label",
+ "main-accept-option-description":
+ "firefox-suggest-onboarding-main-accept-option-description-2",
+ "main-reject-option-label":
+ "firefox-suggest-onboarding-main-reject-option-label",
+ "main-reject-option-description":
+ "firefox-suggest-onboarding-main-reject-option-description-2",
+ },
+ },
+ h: {
+ logoType: "firefox",
+ l10nUpdates: {
+ onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1",
+ "introduction-title": "firefox-suggest-onboarding-introduction-title-2",
+ "main-title": "firefox-suggest-onboarding-main-title-8",
+ "main-description": "firefox-suggest-onboarding-main-description-8",
+ "main-accept-option-label":
+ "firefox-suggest-onboarding-main-accept-option-label",
+ "main-accept-option-description":
+ "firefox-suggest-onboarding-main-accept-option-description-1",
+ "main-reject-option-label":
+ "firefox-suggest-onboarding-main-reject-option-label",
+ "main-reject-option-description":
+ "firefox-suggest-onboarding-main-reject-option-description-1",
+ },
+ },
+ "100-a": {
+ introductionLayout: "layout-100",
+ mainPrivacyFirst: true,
+ logoType: "firefox",
+ l10nUpdates: {
+ onboardingNext: "firefox-suggest-onboarding-introduction-next-button-3",
+ "introduction-title": "firefox-suggest-onboarding-main-title-9",
+ "main-title": "firefox-suggest-onboarding-main-title-9",
+ "main-description": "firefox-suggest-onboarding-main-description-9",
+ "main-accept-option-label":
+ "firefox-suggest-onboarding-main-accept-option-label-2",
+ "main-accept-option-description":
+ "firefox-suggest-onboarding-main-accept-option-description-3",
+ "main-reject-option-label":
+ "firefox-suggest-onboarding-main-reject-option-label-2",
+ "main-reject-option-description":
+ "firefox-suggest-onboarding-main-reject-option-description-3",
+ },
+ },
+ "100-b": {
+ mainPrivacyFirst: true,
+ logoType: "firefox",
+ l10nUpdates: {
+ "main-title": "firefox-suggest-onboarding-main-title-9",
+ "main-description": "firefox-suggest-onboarding-main-description-9",
+ "main-accept-option-label":
+ "firefox-suggest-onboarding-main-accept-option-label-2",
+ "main-accept-option-description":
+ "firefox-suggest-onboarding-main-accept-option-description-3",
+ "main-reject-option-label":
+ "firefox-suggest-onboarding-main-reject-option-label-2",
+ "main-reject-option-description":
+ "firefox-suggest-onboarding-main-reject-option-description-3",
+ },
+ skipIntroduction: true,
+ },
+};
+
+// If the window height is smaller than this value when the dialog opens, then
+// the dialog will open in compact mode. The dialog will not change modes while
+// it's open even if the window height changes.
+const COMPACT_MODE_HEIGHT =
+ 650 + // section min-height (non-compact mode)
+ 2 * 32 + // 2 * --section-vertical-padding (non-compact mode)
+ 44; // approximate height of the browser window's tab bar
+
+// Used for test only. If links or buttons may be clicked or typed Key_Enter
+// while translating l10n, cannot capture the events since not register listeners
+// yet. To avoid the issue, add this flag to know the listeners are ready.
+let resolveOnboardingReady;
+window._quicksuggestOnboardingReady = new Promise(r => {
+ resolveOnboardingReady = r;
+});
+
+document.addEventListener("DOMContentLoaded", async () => {
+ await document.l10n.ready;
+
+ const variation =
+ VARIATION_MAP[window.arguments[0].variationType] || VARIATION_MAP.a;
+
+ document.l10n.pauseObserving();
+ try {
+ await applyVariation(variation);
+ } finally {
+ document.l10n.resumeObserving();
+ }
+
+ addSubmitListener(document.getElementById("onboardingClose"), () => {
+ window.arguments[0].choice = ONBOARDING_CHOICE.CLOSE_1;
+ window.close();
+ });
+ addSubmitListener(document.getElementById("onboardingNext"), () => {
+ gotoMain(variation);
+ });
+ addSubmitListener(document.getElementById("onboardingLearnMore"), () => {
+ window.arguments[0].choice = ONBOARDING_CHOICE.LEARN_MORE_2;
+ window.close();
+ });
+ addSubmitListener(
+ document.getElementById("onboardingLearnMoreOnIntroduction"),
+ () => {
+ window.arguments[0].choice = ONBOARDING_CHOICE.LEARN_MORE_1;
+ window.close();
+ }
+ );
+ addSubmitListener(document.getElementById("onboardingSkipLink"), () => {
+ window.arguments[0].choice = ONBOARDING_CHOICE.NOT_NOW_2;
+ window.close();
+ });
+
+ const onboardingSubmit = document.getElementById("onboardingSubmit");
+ const onboardingAccept = document.getElementById("onboardingAccept");
+ const onboardingReject = document.getElementById("onboardingReject");
+ function optionChangeListener() {
+ onboardingSubmit.removeAttribute("disabled");
+ onboardingAccept
+ .closest(".option")
+ .classList.toggle("selected", onboardingAccept.checked);
+ onboardingReject
+ .closest(".option")
+ .classList.toggle("selected", !onboardingAccept.checked);
+ }
+ onboardingAccept.addEventListener("change", optionChangeListener);
+ onboardingReject.addEventListener("change", optionChangeListener);
+
+ function submitListener() {
+ if (!onboardingAccept.checked && !onboardingReject.checked) {
+ return;
+ }
+
+ window.arguments[0].choice = onboardingAccept.checked
+ ? ONBOARDING_CHOICE.ACCEPT_2
+ : ONBOARDING_CHOICE.REJECT_2;
+ window.close();
+ }
+ addSubmitListener(onboardingSubmit, submitListener);
+ onboardingAccept.addEventListener("keydown", e => {
+ if (e.keyCode == e.DOM_VK_RETURN) {
+ submitListener();
+ }
+ });
+ onboardingReject.addEventListener("keydown", e => {
+ if (e.keyCode == e.DOM_VK_RETURN) {
+ submitListener();
+ }
+ });
+
+ if (window.outerHeight < COMPACT_MODE_HEIGHT) {
+ document.body.classList.add("compact");
+ }
+
+ resolveOnboardingReady();
+});
+
+function gotoMain(variation) {
+ window.arguments[0].visitedMain = true;
+
+ document.getElementById("introduction-section").classList.add("inactive");
+ document.getElementById("main-section").classList.add("active");
+
+ document.body.setAttribute("aria-labelledby", "main-title");
+ let ariaDescribedBy = "main-description";
+ if (variation.mainPrivacyFirst) {
+ ariaDescribedBy += " main-privacy-first";
+ }
+ document.body.setAttribute("aria-describedby", ariaDescribedBy);
+}
+
+async function applyVariation(variation) {
+ if (variation.logoType) {
+ for (const logo of document.querySelectorAll(".logo")) {
+ logo.classList.add(variation.logoType);
+ }
+ }
+
+ if (variation.mainPrivacyFirst) {
+ const label = document.querySelector("#main-section .privacy-first");
+ label.classList.add("active");
+ }
+
+ if (variation.l10nUpdates) {
+ const translatedElements = [];
+ for (const [id, newL10N] of Object.entries(variation.l10nUpdates)) {
+ const element = document.getElementById(id);
+ document.l10n.setAttributes(element, newL10N);
+ translatedElements.push(element);
+ }
+ await document.l10n.translateElements(translatedElements);
+ }
+
+ if (variation.skipIntroduction) {
+ document.body.classList.add("skip-introduction");
+ gotoMain(variation);
+ }
+
+ if (variation.introductionLayout) {
+ document
+ .getElementById("introduction-section")
+ .classList.add(variation.introductionLayout);
+ }
+}
+
+function addSubmitListener(element, listener) {
+ if (!element) {
+ console.warn("Element is null on addSubmitListener");
+ return;
+ }
+ element.addEventListener("click", listener);
+ element.addEventListener("keydown", e => {
+ if (e.keyCode == e.DOM_VK_RETURN) {
+ listener();
+ }
+ });
+}