[tor-commits] [tor-browser] 24/311: Bug 1749425: Add X close button on introduction page for all UI variations. r=adw, a=RyanVM, dsmith
gitolite role
git at cupani.torproject.org
Tue Apr 26 15:27:04 UTC 2022
This is an automated email from the git hooks/post-receive script.
pierov pushed a commit to branch geckoview-99.0.1-11.0-1
in repository tor-browser.
commit e0b72b794fc7c01b448c751ba6c605295309f27b
Author: Daisuke Akatsuka <daisuke at birchill.co.jp>
AuthorDate: Tue Jan 11 02:34:59 2022 +0000
Bug 1749425: Add X close button on introduction page for all UI variations. r=adw, a=RyanVM,dsmith
Differential Revision: https://phabricator.services.mozilla.com/D135573
---
.../urlbar/content/quicksuggestOnboarding.css | 4 -
.../urlbar/content/quicksuggestOnboarding.js | 17 +--
.../browser_quicksuggest_onboardingDialog.js | 159 +++++++++++++--------
3 files changed, 100 insertions(+), 80 deletions(-)
diff --git a/browser/components/urlbar/content/quicksuggestOnboarding.css b/browser/components/urlbar/content/quicksuggestOnboarding.css
index 5eb923f64f5d5..0fbd0963b53f2 100644
--- a/browser/components/urlbar/content/quicksuggestOnboarding.css
+++ b/browser/components/urlbar/content/quicksuggestOnboarding.css
@@ -133,10 +133,6 @@ a {
min-height: 20px;
}
-#onboardingClose:not(.active) {
- display: none;
-}
-
#onboardingClose img {
-moz-context-properties: fill;
fill: currentColor;
diff --git a/browser/components/urlbar/content/quicksuggestOnboarding.js b/browser/components/urlbar/content/quicksuggestOnboarding.js
index 09bc1ef985fa9..53829192e1f4f 100644
--- a/browser/components/urlbar/content/quicksuggestOnboarding.js
+++ b/browser/components/urlbar/content/quicksuggestOnboarding.js
@@ -22,7 +22,6 @@ const VARIATION_MAP = {
},
},
b: {
- introductionCloseButton: true,
l10nUpdates: {
onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1",
"introduction-title": "firefox-suggest-onboarding-introduction-title-2",
@@ -48,7 +47,6 @@ const VARIATION_MAP = {
},
},
d: {
- introductionCloseButton: true,
l10nUpdates: {
onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1",
"introduction-title": "firefox-suggest-onboarding-introduction-title-4",
@@ -62,7 +60,6 @@ const VARIATION_MAP = {
},
e: {
logoType: "firefox",
- introductionCloseButton: true,
l10nUpdates: {
onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1",
"introduction-title": "firefox-suggest-onboarding-introduction-title-5",
@@ -75,7 +72,6 @@ const VARIATION_MAP = {
},
},
f: {
- introductionCloseButton: true,
l10nUpdates: {
onboardingNext: "firefox-suggest-onboarding-introduction-next-button-2",
"introduction-title": "firefox-suggest-onboarding-introduction-title-6",
@@ -144,6 +140,10 @@ document.addEventListener("DOMContentLoaded", async () => {
}
}
+ 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");
@@ -203,15 +203,6 @@ document.addEventListener("DOMContentLoaded", async () => {
});
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);
diff --git a/browser/components/urlbar/tests/quicksuggest/browser/browser_quicksuggest_onboardingDialog.js b/browser/components/urlbar/tests/quicksuggest/browser/browser_quicksuggest_onboardingDialog.js
index 0598a192b4f1d..3b9049b96f375 100644
--- a/browser/components/urlbar/tests/quicksuggest/browser/browser_quicksuggest_onboardingDialog.js
+++ b/browser/components/urlbar/tests/quicksuggest/browser/browser_quicksuggest_onboardingDialog.js
@@ -169,6 +169,42 @@ add_task(async function reject() {
});
});
+// 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({
@@ -445,6 +481,33 @@ add_task(async function dismissed_other_on_introduction() {
});
});
+// 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) {
@@ -552,6 +615,37 @@ add_task(async function focus_order_with_reject_option() {
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
@@ -805,50 +899,6 @@ add_task(async function nimbus_skip_onboarding_dialog() {
});
});
-// 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({
@@ -870,9 +920,6 @@ add_task(async function variation_A() {
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",
@@ -910,9 +957,6 @@ add_task(async function variation_C() {
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",
@@ -932,7 +976,6 @@ add_task(async function variation_E() {
variation: "E",
expectedUI: {
firefoxLogo: true,
- introductionCloseButton: true,
},
expectedL10N: {
onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1",
@@ -951,9 +994,6 @@ add_task(async function variation_E() {
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",
@@ -1106,6 +1146,7 @@ async function doFocusTest({
telemetryEvents,
callback,
expectedUserBranchPrefs,
+ introductionPane,
}) {
if (!gCanTabMoveFocus && tabKeyRepeat) {
Assert.ok(true, "Tab key can't move focus, skipping test");
@@ -1118,7 +1159,7 @@ async function doFocusTest({
telemetryEvents,
callback: async () => {
const { win, maybeShowPromise } = await showOnboardingDialog({
- skipIntroduction: true,
+ skipIntroduction: !introductionPane,
});
let doc = win.document;
@@ -1225,14 +1266,6 @@ async function doVariationTest({
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);
--
To stop receiving notification emails like this one, please contact
the administrator of this repository.
More information about the tor-commits
mailing list