Bug 1749425: Add X close button on introduction page for all UI variations. r=adw, a=RyanVM
authorDaisuke Akatsuka <daisuke@birchill.co.jp>
Tue, 11 Jan 2022 02:34:59 +0000
changeset 673724 0c8b5204cf6ea282947a969005392b6a589947a7
parent 673723 1ea14dc6c23b288739178adbda165ac12210e85d
child 673725 6100aeb4a298128fcacb9116f6a1e6549f58533a
push id16222
push userryanvm@gmail.com
push dateTue, 11 Jan 2022 17:45:58 +0000
treeherdermozilla-beta@0c8b5204cf6e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersadw, RyanVM
bugs1749425
milestone97.0
Bug 1749425: Add X close button on introduction page for all UI variations. r=adw, a=RyanVM Differential Revision: https://phabricator.services.mozilla.com/D135573
browser/components/urlbar/content/quicksuggestOnboarding.css
browser/components/urlbar/content/quicksuggestOnboarding.js
browser/components/urlbar/tests/quicksuggest/browser/browser_quicksuggest_onboardingDialog.js
--- a/browser/components/urlbar/content/quicksuggestOnboarding.css
+++ b/browser/components/urlbar/content/quicksuggestOnboarding.css
@@ -128,20 +128,16 @@ a {
   inset-inline-end: 0;
   margin: 16px;
   padding: 0;
   line-height: 0;
   min-width: 20px;
   min-height: 20px;
 }
 
-#onboardingClose:not(.active) {
-  display: none;
-}
-
 #onboardingClose img {
   -moz-context-properties: fill;
   fill: currentColor;
 }
 
 #main-section {
   display: flex;
 }
--- a/browser/components/urlbar/content/quicksuggestOnboarding.js
+++ b/browser/components/urlbar/content/quicksuggestOnboarding.js
@@ -17,17 +17,16 @@ const VARIATION_MAP = {
       "main-description": "firefox-suggest-onboarding-main-description-1",
       "main-accept-option-description":
         "firefox-suggest-onboarding-main-accept-option-description-1",
       "main-reject-option-description":
         "firefox-suggest-onboarding-main-reject-option-description-1",
     },
   },
   b: {
-    introductionCloseButton: true,
     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-description":
         "firefox-suggest-onboarding-main-accept-option-description-1",
       "main-reject-option-description":
@@ -43,44 +42,41 @@ const VARIATION_MAP = {
       "main-description": "firefox-suggest-onboarding-main-description-3",
       "main-accept-option-description":
         "firefox-suggest-onboarding-main-accept-option-description-1",
       "main-reject-option-description":
         "firefox-suggest-onboarding-main-reject-option-description-1",
     },
   },
   d: {
-    introductionCloseButton: true,
     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-description":
         "firefox-suggest-onboarding-main-accept-option-description-2",
       "main-reject-option-description":
         "firefox-suggest-onboarding-main-reject-option-description-2",
     },
   },
   e: {
     logoType: "firefox",
-    introductionCloseButton: true,
     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-description":
         "firefox-suggest-onboarding-main-accept-option-description-2",
       "main-reject-option-description":
         "firefox-suggest-onboarding-main-reject-option-description-2",
     },
   },
   f: {
-    introductionCloseButton: true,
     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-description":
         "firefox-suggest-onboarding-main-accept-option-description-2",
       "main-reject-option-description":
@@ -139,16 +135,20 @@ document.addEventListener("DOMContentLoa
     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"), () => {
     document.getElementById("introduction-section").classList.add("inactive");
     document.getElementById("main-section").classList.add("active");
     window.arguments[0].visitedMain = true;
   });
   addSubmitListener(document.getElementById("onboardingLearnMore"), () => {
     window.arguments[0].choice = ONBOARDING_CHOICE.LEARN_MORE_2;
     window.close();
@@ -198,25 +198,16 @@ document.addEventListener("DOMContentLoa
   if (window.outerHeight < COMPACT_MODE_HEIGHT) {
     document.body.classList.add("compact");
   }
 
   resolveOnboardingReady();
 });
 
 async function applyVariation(variation) {
-  if (variation.introductionCloseButton) {
-    const onboardingClose = document.getElementById("onboardingClose");
-    onboardingClose.classList.add("active");
-    addSubmitListener(onboardingClose, () => {
-      window.arguments[0].choice = ONBOARDING_CHOICE.CLOSE_1;
-      window.close();
-    });
-  }
-
   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");
--- a/browser/components/urlbar/tests/quicksuggest/browser/browser_quicksuggest_onboardingDialog.js
+++ b/browser/components/urlbar/tests/quicksuggest/browser/browser_quicksuggest_onboardingDialog.js
@@ -164,16 +164,52 @@ add_task(async function reject() {
         category: QuickSuggestTestUtils.TELEMETRY_EVENT_CATEGORY,
         method: "opt_in_dialog",
         object: "reject_2",
       },
     ],
   });
 });
 
+// When the "X" close button is clicked, the user should remain opted out.
+add_task(async function close() {
+  await doDialogTest({
+    callback: async () => {
+      info("Calling showOnboardingDialog");
+      const { win, maybeShowPromise } = await showOnboardingDialog();
+
+      info("Check the visibility of the close button");
+      const closeButton = win.document.getElementById("onboardingClose");
+      Assert.ok(BrowserTestUtils.is_visible(closeButton));
+
+      info("Click on the close button");
+      closeButton.click();
+
+      info("Waiting for maybeShowOnboardingDialog to finish");
+      await maybeShowPromise;
+    },
+    onboardingDialogChoice: "close_1",
+    expectedUserBranchPrefs: {
+      "quicksuggest.dataCollection.enabled": false,
+    },
+    telemetryEvents: [
+      {
+        category: QuickSuggestTestUtils.TELEMETRY_EVENT_CATEGORY,
+        method: "data_collect_toggled",
+        object: "disabled",
+      },
+      {
+        category: QuickSuggestTestUtils.TELEMETRY_EVENT_CATEGORY,
+        method: "opt_in_dialog",
+        object: "close_1",
+      },
+    ],
+  });
+});
+
 // When the Not Now link is clicked, the user should remain opted out.
 add_task(async function skip() {
   await doDialogTest({
     callback: async () => {
       let tabCount = gBrowser.tabs.length;
 
       info("Calling showOnboardingDialog");
       const { win, maybeShowPromise } = await showOnboardingDialog({
@@ -440,16 +476,43 @@ add_task(async function dismissed_other_
         category: QuickSuggestTestUtils.TELEMETRY_EVENT_CATEGORY,
         method: "opt_in_dialog",
         object: "dismiss_1",
       },
     ],
   });
 });
 
+// Tests tabbing through the dialog on introduction section.
+add_task(async function focus_order_on_introduction() {
+  if (!gCanTabMoveFocus) {
+    Assert.ok(true, "Tab key can't move focus, skipping test");
+    return;
+  }
+
+  setDialogPrereqPrefs();
+
+  info("Calling showOnboardingDialog");
+  const { win, maybeShowPromise } = await showOnboardingDialog();
+
+  info("Check the first focus");
+  Assert.equal(win.document.activeElement.id, "onboardingNext");
+
+  const order = ["onboardingClose", "onboardingNext", "onboardingClose"];
+  for (const next of order) {
+    EventUtils.synthesizeKey("KEY_Tab");
+    Assert.equal(win.document.activeElement.id, next);
+  }
+
+  EventUtils.synthesizeKey("KEY_Escape");
+
+  info("Waiting for maybeShowOnboardingDialog to finish");
+  await maybeShowPromise;
+});
+
 // Tests tabbing through the dialog on main section.
 add_task(async function focus_order_on_main() {
   if (!gCanTabMoveFocus) {
     Assert.ok(true, "Tab key can't move focus, skipping test");
     return;
   }
 
   setDialogPrereqPrefs();
@@ -547,16 +610,47 @@ add_task(async function focus_order_with
   }
 
   EventUtils.synthesizeKey("KEY_Escape");
 
   info("Waiting for maybeShowOnboardingDialog to finish");
   await maybeShowPromise;
 });
 
+// Tests tabbing through the dialog and pressing enter on introduction pane.
+// Tab key count: 1
+// Expected focused element: close button
+add_task(async function focus_close() {
+  await doFocusTest({
+    introductionPane: true,
+    tabKeyRepeat: 1,
+    expectedFocusID: "onboardingClose",
+    callback: async () => {
+      info("Enter to submit");
+      EventUtils.synthesizeKey("KEY_Enter");
+    },
+    onboardingDialogChoice: "close_1",
+    expectedUserBranchPrefs: {
+      "quicksuggest.dataCollection.enabled": false,
+    },
+    telemetryEvents: [
+      {
+        category: QuickSuggestTestUtils.TELEMETRY_EVENT_CATEGORY,
+        method: "data_collect_toggled",
+        object: "disabled",
+      },
+      {
+        category: QuickSuggestTestUtils.TELEMETRY_EVENT_CATEGORY,
+        method: "opt_in_dialog",
+        object: "close_1",
+      },
+    ],
+  });
+});
+
 // Tests tabbing through the dialog and pressing enter.
 // Tab key count: 1
 // Expected focused element: accept option
 add_task(async function focus_accept() {
   await doFocusTest({
     tabKeyRepeat: 1,
     expectedFocusID: "onboardingAccept",
     callback: async () => {
@@ -800,60 +894,16 @@ add_task(async function nimbus_skip_onbo
           false
         ),
         "The showed onboarding dialog pref should not be set"
       );
     },
   });
 });
 
-// Test the close button on the introduction pane appeared by Nimbus setting.
-// Then when the close button is clicked, the user should remain opted out.
-add_task(async function close_button_on_introduction_pane() {
-  await QuickSuggestTestUtils.withExperiment({
-    valueOverrides: {
-      quickSuggestOnboardingDialogVariation: "B",
-    },
-    callback: async () => {
-      await doDialogTest({
-        callback: async () => {
-          info("Calling showOnboardingDialog");
-          const { win, maybeShowPromise } = await showOnboardingDialog();
-
-          info("Check the visibility of the close button");
-          const closeButton = win.document.getElementById("onboardingClose");
-          Assert.ok(BrowserTestUtils.is_visible(closeButton));
-
-          info("Click on the close button");
-          closeButton.click();
-
-          info("Waiting for maybeShowOnboardingDialog to finish");
-          await maybeShowPromise;
-        },
-        onboardingDialogChoice: "close_1",
-        expectedUserBranchPrefs: {
-          "quicksuggest.dataCollection.enabled": false,
-        },
-        telemetryEvents: [
-          {
-            category: QuickSuggestTestUtils.TELEMETRY_EVENT_CATEGORY,
-            method: "data_collect_toggled",
-            object: "disabled",
-          },
-          {
-            category: QuickSuggestTestUtils.TELEMETRY_EVENT_CATEGORY,
-            method: "opt_in_dialog",
-            object: "close_1",
-          },
-        ],
-      });
-    },
-  });
-});
-
 // Test the UI variation A.
 add_task(async function variation_A() {
   await doVariationTest({
     variation: "A",
     expectedL10N: {
       onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1",
       "introduction-title": "firefox-suggest-onboarding-introduction-title-1",
       "main-title": "firefox-suggest-onboarding-main-title-1",
@@ -865,19 +915,16 @@ add_task(async function variation_A() {
     },
   });
 });
 
 // Test the UI variation B.
 add_task(async function variation_B() {
   await doVariationTest({
     variation: "B",
-    expectedUI: {
-      introductionCloseButton: true,
-    },
     expectedL10N: {
       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-description":
         "firefox-suggest-onboarding-main-accept-option-description-1",
       "main-reject-option-description":
@@ -905,19 +952,16 @@ add_task(async function variation_C() {
     },
   });
 });
 
 // Test the UI variation D.
 add_task(async function variation_D() {
   await doVariationTest({
     variation: "D",
-    expectedUI: {
-      introductionCloseButton: true,
-    },
     expectedL10N: {
       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-description":
         "firefox-suggest-onboarding-main-accept-option-description-2",
       "main-reject-option-description":
@@ -927,17 +971,16 @@ add_task(async function variation_D() {
 });
 
 // Test the UI variation E.
 add_task(async function variation_E() {
   await doVariationTest({
     variation: "E",
     expectedUI: {
       firefoxLogo: true,
-      introductionCloseButton: true,
     },
     expectedL10N: {
       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-description":
         "firefox-suggest-onboarding-main-accept-option-description-2",
@@ -946,19 +989,16 @@ add_task(async function variation_E() {
     },
   });
 });
 
 // Test the UI variation F.
 add_task(async function variation_F() {
   await doVariationTest({
     variation: "F",
-    expectedUI: {
-      introductionCloseButton: true,
-    },
     expectedL10N: {
       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-description":
         "firefox-suggest-onboarding-main-accept-option-description-2",
       "main-reject-option-description":
@@ -1101,29 +1141,30 @@ async function doDialogTest({
 
 async function doFocusTest({
   tabKeyRepeat,
   expectedFocusID,
   onboardingDialogChoice,
   telemetryEvents,
   callback,
   expectedUserBranchPrefs,
+  introductionPane,
 }) {
   if (!gCanTabMoveFocus && tabKeyRepeat) {
     Assert.ok(true, "Tab key can't move focus, skipping test");
     return;
   }
 
   await doDialogTest({
     onboardingDialogChoice,
     expectedUserBranchPrefs,
     telemetryEvents,
     callback: async () => {
       const { win, maybeShowPromise } = await showOnboardingDialog({
-        skipIntroduction: true,
+        skipIntroduction: !introductionPane,
       });
 
       let doc = win.document;
 
       Assert.equal(
         doc.activeElement.id,
         "onboardingNext",
         "onboardingNext is focused initially"
@@ -1220,24 +1261,16 @@ async function doVariationTest({
         );
         const expectedIntroductionLogoImage = mediaQuery.matches
           ? animationImage
           : logoImage;
         Assert.equal(introductionLogoImage, expectedIntroductionLogoImage);
         Assert.equal(mainLogoImage, logoImage);
       }
 
-      info("Check the close button on introduction pane");
-      const onboardingClose = win.document.getElementById("onboardingClose");
-      if (expectedUI.introductionCloseButton) {
-        Assert.ok(BrowserTestUtils.is_visible(onboardingClose));
-      } else {
-        Assert.ok(BrowserTestUtils.is_hidden(onboardingClose));
-      }
-
       info("Check the l10n attribute");
       for (const [id, l10n] of Object.entries(expectedL10N)) {
         const element = win.document.getElementById(id);
         Assert.equal(element.getAttribute("data-l10n-id"), l10n);
       }
 
       // Trigger the transition by pressing Enter on the Next button.
       EventUtils.synthesizeKey("KEY_Enter");