browser/components/urlbar/content/quicksuggestOnboarding.js

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 "use strict";
   6
   7 const { QuickSuggest } = ChromeUtils.importESModule(
   8   "resource:///modules/QuickSuggest.sys.mjs"
   9 );
  10 const { ONBOARDING_CHOICE } = QuickSuggest;
  11
  12 const VARIATION_MAP = {
  13   a: {
  14     l10nUpdates: {
  15       onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1",
  16       "introduction-title": "firefox-suggest-onboarding-introduction-title-1",
  17       "main-title": "firefox-suggest-onboarding-main-title-1",
  18       "main-description": "firefox-suggest-onboarding-main-description-1",
  19       "main-accept-option-label":
  20         "firefox-suggest-onboarding-main-accept-option-label",
  21       "main-accept-option-description":
  22         "firefox-suggest-onboarding-main-accept-option-description-1",
  23       "main-reject-option-label":
  24         "firefox-suggest-onboarding-main-reject-option-label",
  25       "main-reject-option-description":
  26         "firefox-suggest-onboarding-main-reject-option-description-1",
  27     },
  28   },
  29   b: {
  30     l10nUpdates: {
  31       onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1",
  32       "introduction-title": "firefox-suggest-onboarding-introduction-title-2",
  33       "main-title": "firefox-suggest-onboarding-main-title-2",
  34       "main-description": "firefox-suggest-onboarding-main-description-2",
  35       "main-accept-option-label":
  36         "firefox-suggest-onboarding-main-accept-option-label",
  37       "main-accept-option-description":
  38         "firefox-suggest-onboarding-main-accept-option-description-1",
  39       "main-reject-option-label":
  40         "firefox-suggest-onboarding-main-reject-option-label",
  41       "main-reject-option-description":
  42         "firefox-suggest-onboarding-main-reject-option-description-1",
  43     },
  44   },
  45   c: {
  46     logoType: "firefox",
  47     l10nUpdates: {
  48       onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1",
  49       "introduction-title": "firefox-suggest-onboarding-introduction-title-3",
  50       "main-title": "firefox-suggest-onboarding-main-title-3",
  51       "main-description": "firefox-suggest-onboarding-main-description-3",
  52       "main-accept-option-label":
  53         "firefox-suggest-onboarding-main-accept-option-label",
  54       "main-accept-option-description":
  55         "firefox-suggest-onboarding-main-accept-option-description-1",
  56       "main-reject-option-label":
  57         "firefox-suggest-onboarding-main-reject-option-label",
  58       "main-reject-option-description":
  59         "firefox-suggest-onboarding-main-reject-option-description-1",
  60     },
  61   },
  62   d: {
  63     l10nUpdates: {
  64       onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1",
  65       "introduction-title": "firefox-suggest-onboarding-introduction-title-4",
  66       "main-title": "firefox-suggest-onboarding-main-title-4",
  67       "main-description": "firefox-suggest-onboarding-main-description-4",
  68       "main-accept-option-label":
  69         "firefox-suggest-onboarding-main-accept-option-label",
  70       "main-accept-option-description":
  71         "firefox-suggest-onboarding-main-accept-option-description-2",
  72       "main-reject-option-label":
  73         "firefox-suggest-onboarding-main-reject-option-label",
  74       "main-reject-option-description":
  75         "firefox-suggest-onboarding-main-reject-option-description-2",
  76     },
  77   },
  78   e: {
  79     logoType: "firefox",
  80     l10nUpdates: {
  81       onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1",
  82       "introduction-title": "firefox-suggest-onboarding-introduction-title-5",
  83       "main-title": "firefox-suggest-onboarding-main-title-5",
  84       "main-description": "firefox-suggest-onboarding-main-description-5",
  85       "main-accept-option-label":
  86         "firefox-suggest-onboarding-main-accept-option-label",
  87       "main-accept-option-description":
  88         "firefox-suggest-onboarding-main-accept-option-description-2",
  89       "main-reject-option-label":
  90         "firefox-suggest-onboarding-main-reject-option-label",
  91       "main-reject-option-description":
  92         "firefox-suggest-onboarding-main-reject-option-description-2",
  93     },
  94   },
  95   f: {
  96     l10nUpdates: {
  97       onboardingNext: "firefox-suggest-onboarding-introduction-next-button-2",
  98       "introduction-title": "firefox-suggest-onboarding-introduction-title-6",
  99       "main-title": "firefox-suggest-onboarding-main-title-6",
 100       "main-description": "firefox-suggest-onboarding-main-description-6",
 101       "main-accept-option-label":
 102         "firefox-suggest-onboarding-main-accept-option-label",
 103       "main-accept-option-description":
 104         "firefox-suggest-onboarding-main-accept-option-description-2",
 105       "main-reject-option-label":
 106         "firefox-suggest-onboarding-main-reject-option-label",
 107       "main-reject-option-description":
 108         "firefox-suggest-onboarding-main-reject-option-description-2",
 109     },
 110   },
 111   g: {
 112     mainPrivacyFirst: true,
 113     l10nUpdates: {
 114       onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1",
 115       "introduction-title": "firefox-suggest-onboarding-introduction-title-7",
 116       "main-title": "firefox-suggest-onboarding-main-title-7",
 117       "main-description": "firefox-suggest-onboarding-main-description-7",
 118       "main-accept-option-label":
 119         "firefox-suggest-onboarding-main-accept-option-label",
 120       "main-accept-option-description":
 121         "firefox-suggest-onboarding-main-accept-option-description-2",
 122       "main-reject-option-label":
 123         "firefox-suggest-onboarding-main-reject-option-label",
 124       "main-reject-option-description":
 125         "firefox-suggest-onboarding-main-reject-option-description-2",
 126     },
 127   },
 128   h: {
 129     logoType: "firefox",
 130     l10nUpdates: {
 131       onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1",
 132       "introduction-title": "firefox-suggest-onboarding-introduction-title-2",
 133       "main-title": "firefox-suggest-onboarding-main-title-8",
 134       "main-description": "firefox-suggest-onboarding-main-description-8",
 135       "main-accept-option-label":
 136         "firefox-suggest-onboarding-main-accept-option-label",
 137       "main-accept-option-description":
 138         "firefox-suggest-onboarding-main-accept-option-description-1",
 139       "main-reject-option-label":
 140         "firefox-suggest-onboarding-main-reject-option-label",
 141       "main-reject-option-description":
 142         "firefox-suggest-onboarding-main-reject-option-description-1",
 143     },
 144   },
 145   "100-a": {
 146     introductionLayout: "layout-100",
 147     mainPrivacyFirst: true,
 148     logoType: "firefox",
 149     l10nUpdates: {
 150       onboardingNext: "firefox-suggest-onboarding-introduction-next-button-3",
 151       "introduction-title": "firefox-suggest-onboarding-main-title-9",
 152       "main-title": "firefox-suggest-onboarding-main-title-9",
 153       "main-description": "firefox-suggest-onboarding-main-description-9",
 154       "main-accept-option-label":
 155         "firefox-suggest-onboarding-main-accept-option-label-2",
 156       "main-accept-option-description":
 157         "firefox-suggest-onboarding-main-accept-option-description-3",
 158       "main-reject-option-label":
 159         "firefox-suggest-onboarding-main-reject-option-label-2",
 160       "main-reject-option-description":
 161         "firefox-suggest-onboarding-main-reject-option-description-3",
 162     },
 163   },
 164   "100-b": {
 165     mainPrivacyFirst: true,
 166     logoType: "firefox",
 167     l10nUpdates: {
 168       "main-title": "firefox-suggest-onboarding-main-title-9",
 169       "main-description": "firefox-suggest-onboarding-main-description-9",
 170       "main-accept-option-label":
 171         "firefox-suggest-onboarding-main-accept-option-label-2",
 172       "main-accept-option-description":
 173         "firefox-suggest-onboarding-main-accept-option-description-3",
 174       "main-reject-option-label":
 175         "firefox-suggest-onboarding-main-reject-option-label-2",
 176       "main-reject-option-description":
 177         "firefox-suggest-onboarding-main-reject-option-description-3",
 178     },
 179     skipIntroduction: true,
 180   },
 181 };
 182
 183 // If the window height is smaller than this value when the dialog opens, then
 184 // the dialog will open in compact mode. The dialog will not change modes while
 185 // it's open even if the window height changes.
 186 const COMPACT_MODE_HEIGHT =
 187   650 + // section min-height (non-compact mode)
 188   2 * 32 + // 2 * --section-vertical-padding (non-compact mode)
 189   44; // approximate height of the browser window's tab bar
 190
 191 // Used for test only. If links or buttons may be clicked or typed Key_Enter
 192 // while translating l10n, cannot capture the events since not register listeners
 193 // yet. To avoid the issue, add this flag to know the listeners are ready.
 194 let resolveOnboardingReady;
 195 window._quicksuggestOnboardingReady = new Promise(r => {
 196   resolveOnboardingReady = r;
 197 });
 198
 199 document.addEventListener("DOMContentLoaded", async () => {
 200   await document.l10n.ready;
 201
 202   const variation =
 203     VARIATION_MAP[window.arguments[0].variationType] || VARIATION_MAP.a;
 204
 205   document.l10n.pauseObserving();
 206   try {
 207     await applyVariation(variation);
 208   } finally {
 209     document.l10n.resumeObserving();
 210   }
 211
 212   addSubmitListener(document.getElementById("onboardingClose"), () => {
 213     window.arguments[0].choice = ONBOARDING_CHOICE.CLOSE_1;
 214     window.close();
 215   });
 216   addSubmitListener(document.getElementById("onboardingNext"), () => {
 217     gotoMain(variation);
 218   });
 219   addSubmitListener(document.getElementById("onboardingLearnMore"), () => {
 220     window.arguments[0].choice = ONBOARDING_CHOICE.LEARN_MORE_2;
 221     window.close();
 222   });
 223   addSubmitListener(
 224     document.getElementById("onboardingLearnMoreOnIntroduction"),
 225     () => {
 226       window.arguments[0].choice = ONBOARDING_CHOICE.LEARN_MORE_1;
 227       window.close();
 228     }
 229   );
 230   addSubmitListener(document.getElementById("onboardingSkipLink"), () => {
 231     window.arguments[0].choice = ONBOARDING_CHOICE.NOT_NOW_2;
 232     window.close();
 233   });
 234
 235   const onboardingSubmit = document.getElementById("onboardingSubmit");
 236   const onboardingAccept = document.getElementById("onboardingAccept");
 237   const onboardingReject = document.getElementById("onboardingReject");
 238   function optionChangeListener() {
 239     onboardingSubmit.removeAttribute("disabled");
 240     onboardingAccept
 241       .closest(".option")
 242       .classList.toggle("selected", onboardingAccept.checked);
 243     onboardingReject
 244       .closest(".option")
 245       .classList.toggle("selected", !onboardingAccept.checked);
 246   }
 247   onboardingAccept.addEventListener("change", optionChangeListener);
 248   onboardingReject.addEventListener("change", optionChangeListener);
 249
 250   function submitListener() {
 251     if (!onboardingAccept.checked && !onboardingReject.checked) {
 252       return;
 253     }
 254
 255     window.arguments[0].choice = onboardingAccept.checked
 256       ? ONBOARDING_CHOICE.ACCEPT_2
 257       : ONBOARDING_CHOICE.REJECT_2;
 258     window.close();
 259   }
 260   addSubmitListener(onboardingSubmit, submitListener);
 261   onboardingAccept.addEventListener("keydown", e => {
 262     if (e.keyCode == e.DOM_VK_RETURN) {
 263       submitListener();
 264     }
 265   });
 266   onboardingReject.addEventListener("keydown", e => {
 267     if (e.keyCode == e.DOM_VK_RETURN) {
 268       submitListener();
 269     }
 270   });
 271
 272   if (window.outerHeight < COMPACT_MODE_HEIGHT) {
 273     document.body.classList.add("compact");
 274   }
 275
 276   resolveOnboardingReady();
 277 });
 278
 279 function gotoMain(variation) {
 280   window.arguments[0].visitedMain = true;
 281
 282   document.getElementById("introduction-section").classList.add("inactive");
 283   document.getElementById("main-section").classList.add("active");
 284
 285   document.body.setAttribute("aria-labelledby", "main-title");
 286   let ariaDescribedBy = "main-description";
 287   if (variation.mainPrivacyFirst) {
 288     ariaDescribedBy += " main-privacy-first";
 289   }
 290   document.body.setAttribute("aria-describedby", ariaDescribedBy);
 291 }
 292
 293 async function applyVariation(variation) {
 294   if (variation.logoType) {
 295     for (const logo of document.querySelectorAll(".logo")) {
 296       logo.classList.add(variation.logoType);
 297     }
 298   }
 299
 300   if (variation.mainPrivacyFirst) {
 301     const label = document.querySelector("#main-section .privacy-first");
 302     label.classList.add("active");
 303   }
 304
 305   if (variation.l10nUpdates) {
 306     const translatedElements = [];
 307     for (const [id, newL10N] of Object.entries(variation.l10nUpdates)) {
 308       const element = document.getElementById(id);
 309       document.l10n.setAttributes(element, newL10N);
 310       translatedElements.push(element);
 311     }
 312     await document.l10n.translateElements(translatedElements);
 313   }
 314
 315   if (variation.skipIntroduction) {
 316     document.body.classList.add("skip-introduction");
 317     gotoMain(variation);
 318   }
 319
 320   if (variation.introductionLayout) {
 321     document
 322       .getElementById("introduction-section")
 323       .classList.add(variation.introductionLayout);
 324   }
 325 }
 326
 327 function addSubmitListener(element, listener) {
 328   if (!element) {
 329     console.warn("Element is null on addSubmitListener");
 330     return;
 331   }
 332   element.addEventListener("click", listener);
 333   element.addEventListener("keydown", e => {
 334     if (e.keyCode == e.DOM_VK_RETURN) {
 335       listener();
 336     }
 337   });
 338 }