diff options
Diffstat (limited to 'browser/components/urlbar/content/quicksuggestOnboarding.js')
| -rw-r--r-- | browser/components/urlbar/content/quicksuggestOnboarding.js | 338 |
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(); + } + }); +} |