forked from mirrors/gecko-dev
ca10d20678
This does the following:
* Get rid of `QUICK_SUGGEST_SOURCE` since it's only used in a couple of
places. Its simpler to use the string literals directly.
* Set `source: "merino"` on Merino suggesions in the Merino client instead of
doing it in UrlbarProviderQuickSuggest, similar to how the remote settings
client sets `source: "remote-settings"`
* Export `ONBOARDING_CHOICE` and `ONBOARDING_URI` on the QuickSuggest object for
consistency with other consts
* Remove unnecessary consts from QuickSuggestTestUtils that are already defined
on QuickSuggest
Please see bug 1798595 for details.
Depends on D160986
Differential Revision: https://phabricator.services.mozilla.com/D160987
338 lines
13 KiB
JavaScript
338 lines
13 KiB
JavaScript
/* 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();
|
|
}
|
|
});
|
|
}
|