From 45500af2cece15076297054db9f220b92a1a7db4 Mon Sep 17 00:00:00 2001 From: Greg Tatum Date: Fri, 1 Apr 2022 21:39:16 +0000 Subject: [PATCH] Bug 1762297 - Change buttons on about:welcome language prompt; r=Mardak,platform-i18n-reviewers,nordzilla,fluent-reviewers Differential Revision: https://phabricator.services.mozilla.com/D142516 --- .../content/aboutwelcome.bundle.js | 33 ++++----- .../aboutwelcome/content/aboutwelcome.css | 15 +++- .../aboutwelcome/lib/AboutWelcomeDefaults.jsm | 7 -- .../aboutwelcome/aboutwelcome.scss | 13 +++- .../components/LanguageSwitcher.jsx | 70 +++++++++++-------- ...boutwelcome_multistage_languageSwitcher.js | 16 ++--- .../en-US/browser/newtab/onboarding.ftl | 8 +-- 7 files changed, 93 insertions(+), 69 deletions(-) diff --git a/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js b/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js index 1a1a90e0ea26..c0be893e2872 100644 --- a/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js +++ b/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js @@ -1162,17 +1162,22 @@ function useLanguageSwitcher(appAndSystemLocaleInfo, screens, screenIndex, setSc if (langPack) { // Convert the BCP 47 identifiers into the proper display names. // e.g. "fr-CA" -> "Canadian French". - const displayNames = new Intl.DisplayNames(appAndSystemLocaleInfo.appLocaleRaw, { + const appDN = new Intl.DisplayNames(appAndSystemLocaleInfo.appLocaleRaw, { + type: "language" + }); + const langPackDN = new Intl.DisplayNames(langPack.target_locale, { type: "language" }); setNegotiatedLanguage({ - displayName: displayNames.of(langPack.target_locale), + langPackDisplayName: langPackDN.of(langPack.target_locale), + appDisplayName: appDN.of(appAndSystemLocaleInfo.appLocaleRaw), langPack, requestSystemLocales: [langPack.target_locale, appAndSystemLocaleInfo.appLocaleRaw] }); } else { setNegotiatedLanguage({ - displayName: null, + langPackDisplayName: null, + appDisplayName: null, langPack: null, requestSystemLocales: null }); @@ -1255,12 +1260,12 @@ function LanguageSwitcher(props) { }, [isAwaitingLangpack, langPackInstallPhase]); // The message args are the localized language names. const withMessageArgs = obj => { - const displayName = negotiatedLanguage === null || negotiatedLanguage === void 0 ? void 0 : negotiatedLanguage.displayName; + const langPackDisplayName = negotiatedLanguage === null || negotiatedLanguage === void 0 ? void 0 : negotiatedLanguage.langPackDisplayName; - if (displayName) { + if (langPackDisplayName) { return { ...obj, args: { ...obj.args, - negotiatedLanguage: displayName + negotiatedLanguage: langPackDisplayName } }; } @@ -1340,25 +1345,21 @@ function LanguageSwitcher(props) { style: { display: showReadyScreen ? "block" : "none" } - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, { - text: withMessageArgs(content.languageSwitcher.switch) - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { + }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { className: "primary", value: "primary_button", onClick: () => { _lib_aboutwelcome_utils__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.sendActionTelemetry(messageId, "download_langpack"); setIsAwaitingLangpack(true); } - }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { - className: "secondary-cta" - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, { - text: content.languageSwitcher.not_now - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { + }, // This is the localized name from the Intl.DisplayNames API. + negotiatedLanguage === null || negotiatedLanguage === void 0 ? void 0 : negotiatedLanguage.langPackDisplayName)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { type: "button", - className: "secondary text-link", + className: "secondary", value: "decline", onClick: handleAction - }))))); + }, // This is the localized name from the Intl.DisplayNames API. + negotiatedLanguage === null || negotiatedLanguage === void 0 ? void 0 : negotiatedLanguage.appDisplayName)))); } /***/ }), diff --git a/browser/components/newtab/aboutwelcome/content/aboutwelcome.css b/browser/components/newtab/aboutwelcome/content/aboutwelcome.css index 657b1c20c396..f2ecd1af8531 100644 --- a/browser/components/newtab/aboutwelcome/content/aboutwelcome.css +++ b/browser/components/newtab/aboutwelcome/content/aboutwelcome.css @@ -792,15 +792,21 @@ body[lwt-newtab-brighttext] { .onboardingContainer .steps .indicator.current:last-of-type:first-of-type { opacity: 0; } -.onboardingContainer .primary { +.onboardingContainer .primary, +.onboardingContainer .secondary { font-size: 13px; line-height: 16px; padding: 11px 15px; transition: var(--transition); } -.onboardingContainer .primary.rtamo { +.onboardingContainer .primary.rtamo, +.onboardingContainer .secondary.rtamo { margin-top: 24px; } +.onboardingContainer .secondary { + background-color: var(--in-content-button-background); + color: var(--in-content-button-text-color); +} .onboardingContainer .noodle { display: block; background-repeat: no-repeat; @@ -965,6 +971,7 @@ body[lwt-newtab-brighttext] { transition-delay: 0.9s; } .onboardingContainer .dialog-initial .primary, +.onboardingContainer .dialog-initial .secondary, .onboardingContainer .dialog-initial .secondary-cta, .onboardingContainer .dialog-initial .steps { transition-delay: 1s; @@ -974,6 +981,7 @@ body[lwt-newtab-brighttext] { transition-delay: 0.2s; } .onboardingContainer .screen:not(.dialog-initial):not([pos=corner]) .primary, +.onboardingContainer .screen:not(.dialog-initial):not([pos=corner]) .secondary, .onboardingContainer .screen:not(.dialog-initial):not([pos=corner]) .secondary-cta { transition-delay: 0.4s; } @@ -1016,6 +1024,7 @@ body[lwt-newtab-brighttext] { .onboardingContainer.transition-in [pos=corner] .brand-logo, .onboardingContainer.transition-in [pos=corner] .welcome-text, .onboardingContainer.transition-in [pos=corner] .primary, +.onboardingContainer.transition-in [pos=corner] .secondary, .onboardingContainer.transition-in [pos=corner] .secondary-cta:not(.top), .onboardingContainer.transition-in [pos=corner] .message-text { opacity: 0; @@ -1040,6 +1049,7 @@ body[lwt-newtab-brighttext] { .onboardingContainer.transition-in .screen:not([pos=corner]) .colorway-variations, .onboardingContainer.transition-in .screen:not([pos=corner]) .tiles-theme-section, .onboardingContainer.transition-in .screen:not([pos=corner]) .primary, +.onboardingContainer.transition-in .screen:not([pos=corner]) .secondary, .onboardingContainer.transition-in .screen:not([pos=corner]) .secondary-cta:not(.top) { opacity: 0; translate: 0 calc(-1 * var(--translate)); @@ -1082,6 +1092,7 @@ body[lwt-newtab-brighttext] { transition-delay: 0.2s; } .onboardingContainer.transition-out .screen:not(.dialog-last):not([pos=corner]) .primary, +.onboardingContainer.transition-out .screen:not(.dialog-last):not([pos=corner]) .secondary, .onboardingContainer.transition-out .screen:not(.dialog-last):not([pos=corner]) .secondary-cta:not(.top) { opacity: 0; translate: 0 var(--translate); diff --git a/browser/components/newtab/aboutwelcome/lib/AboutWelcomeDefaults.jsm b/browser/components/newtab/aboutwelcome/lib/AboutWelcomeDefaults.jsm index f53863cd197e..a415b7521866 100644 --- a/browser/components/newtab/aboutwelcome/lib/AboutWelcomeDefaults.jsm +++ b/browser/components/newtab/aboutwelcome/lib/AboutWelcomeDefaults.jsm @@ -78,21 +78,14 @@ const DEFAULT_WELCOME_CONTENT = { content: { logo: {}, title: { string_id: "onboarding-live-language-header" }, - subtitle: { string_id: "onboarding-live-language-subtitle" }, has_noodles: true, languageSwitcher: { - switch: { - string_id: "onboarding-live-language-switch-button-label", - }, downloading: { string_id: "onboarding-live-language-button-label-downloading", }, cancel: { string_id: "onboarding-live-language-secondary-cancel-download", }, - not_now: { - string_id: "onboarding-live-language-not-now-button-label", - }, waiting: { string_id: "onboarding-live-language-waiting-button" }, skip: { string_id: "onboarding-live-language-skip-button-label" }, action: { diff --git a/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss b/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss index e2c01baea7ea..b172e58073ad 100644 --- a/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss +++ b/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss @@ -969,7 +969,8 @@ body { } } - .primary { + .primary, + .secondary { font-size: 13px; line-height: 16px; padding: 11px 15px; @@ -980,6 +981,11 @@ body { } } + .secondary { + background-color: var(--in-content-button-background); + color: var(--in-content-button-text-color); + } + // Styles specific to background noodles, with screen-by-screen positions .noodle { display: block; @@ -1184,6 +1190,7 @@ body { } .primary, + .secondary, .secondary-cta, .steps { transition-delay: 1s; @@ -1198,6 +1205,7 @@ body { } .primary, + .secondary, .secondary-cta { transition-delay: 0.4s; } @@ -1253,6 +1261,7 @@ body { .brand-logo, .welcome-text, .primary, + .secondary, .secondary-cta:not(.top), .message-text { opacity: 0; @@ -1288,6 +1297,7 @@ body { .colorway-variations, .tiles-theme-section, .primary, + .secondary, .secondary-cta:not(.top) { opacity: 0; translate: 0 calc(-1 * var(--translate)); @@ -1346,6 +1356,7 @@ body { } .primary, + .secondary, .secondary-cta:not(.top) { opacity: 0; translate: 0 var(--translate); diff --git a/browser/components/newtab/content-src/aboutwelcome/components/LanguageSwitcher.jsx b/browser/components/newtab/content-src/aboutwelcome/components/LanguageSwitcher.jsx index 1dc7f868d906..98b7e13fac23 100644 --- a/browser/components/newtab/content-src/aboutwelcome/components/LanguageSwitcher.jsx +++ b/browser/components/newtab/content-src/aboutwelcome/components/LanguageSwitcher.jsx @@ -42,13 +42,17 @@ export function useLanguageSwitcher( if (langPack) { // Convert the BCP 47 identifiers into the proper display names. // e.g. "fr-CA" -> "Canadian French". - const displayNames = new Intl.DisplayNames( + const appDN = new Intl.DisplayNames( appAndSystemLocaleInfo.appLocaleRaw, { type: "language" } ); + const langPackDN = new Intl.DisplayNames(langPack.target_locale, { + type: "language", + }); setNegotiatedLanguage({ - displayName: displayNames.of(langPack.target_locale), + langPackDisplayName: langPackDN.of(langPack.target_locale), + appDisplayName: appDN.of(appAndSystemLocaleInfo.appLocaleRaw), langPack, requestSystemLocales: [ langPack.target_locale, @@ -57,7 +61,8 @@ export function useLanguageSwitcher( }); } else { setNegotiatedLanguage({ - displayName: null, + langPackDisplayName: null, + appDisplayName: null, langPack: null, requestSystemLocales: null, }); @@ -160,13 +165,13 @@ export function LanguageSwitcher(props) { // The message args are the localized language names. const withMessageArgs = obj => { - const displayName = negotiatedLanguage?.displayName; - if (displayName) { + const langPackDisplayName = negotiatedLanguage?.langPackDisplayName; + if (langPackDisplayName) { return { ...obj, args: { ...obj.args, - negotiatedLanguage: displayName, + negotiatedLanguage: langPackDisplayName, }, }; } @@ -189,6 +194,7 @@ export function LanguageSwitcher(props) { // the localized text elements rendering as blank, then filling in the text. return ( <> + {/* Pre-loading screen */}
+ {/* Waiting to download the language screen. */}
+ {/* The typical ready screen. */}
- -
-
- -
diff --git a/browser/components/newtab/test/browser/browser_aboutwelcome_multistage_languageSwitcher.js b/browser/components/newtab/test/browser/browser_aboutwelcome_multistage_languageSwitcher.js index f77b17d2f58d..d747d4a64e0f 100644 --- a/browser/components/newtab/test/browser/browser_aboutwelcome_multistage_languageSwitcher.js +++ b/browser/components/newtab/test/browser/browser_aboutwelcome_multistage_languageSwitcher.js @@ -104,9 +104,9 @@ async function testScreenContent( unexpectedSelectors: unexpected, }) => { function selectorIsVisible(selector) { - const el = content.document.querySelector(selector); + const els = content.document.querySelectorAll(selector); // The offsetParent will be null if element is hidden through "display: none;" - return el && el.offsetParent !== null; + return [...els].some(el => el.offsetParent !== null); } for (let selector of expected) { @@ -204,8 +204,8 @@ add_task(async function test_aboutwelcome_languageSwitcher_accept() { // Expected selectors: [ ...liveLanguageSwitchSelectors, - `[data-l10n-id="onboarding-live-language-switch-button-label"]`, - `[data-l10n-id="onboarding-live-language-not-now-button-label"]`, + `button.primary[value="primary_button"]`, + `button.secondary[value="decline"]`, ], // Unexpected selectors: [ @@ -317,8 +317,8 @@ add_task(async function test_aboutwelcome_languageSwitcher_accept() { // Expected selectors: [ ...liveLanguageSwitchSelectors, - `[data-l10n-id="onboarding-live-language-switch-button-label"]`, - `[data-l10n-id="onboarding-live-language-not-now-button-label"]`, + `button.primary[value="primary_button"]`, + `button.secondary[value="decline"]`, ], // Unexpected selectors: [ @@ -419,8 +419,8 @@ add_task(async function test_aboutwelcome_languageSwitcher_decline() { // Expected selectors: [ ...liveLanguageSwitchSelectors, - `[data-l10n-id="onboarding-live-language-switch-button-label"]`, - `[data-l10n-id="onboarding-live-language-not-now-button-label"]`, + `button.primary[value="primary_button"]`, + `button.secondary[value="decline"]`, ], // Unexpected selectors: [ diff --git a/browser/locales/en-US/browser/newtab/onboarding.ftl b/browser/locales/en-US/browser/newtab/onboarding.ftl index 74623aa01a24..3e77e5d0895a 100644 --- a/browser/locales/en-US/browser/newtab/onboarding.ftl +++ b/browser/locales/en-US/browser/newtab/onboarding.ftl @@ -228,20 +228,14 @@ mr2-onboarding-start-browsing-button-label = Start browsing ## The following language names are generated by the browser's Intl.DisplayNames API. ## ## Variables: -## $appLanguage (String) - The name of Firefox's language, e.g. "American English" -## $systemLanguage (String) - The name of the OS's language, e.g. "European Spanish" ## $negotiatedLanguage (String) - The name of the langpack's language, e.g. "European Spanish" -onboarding-live-language-header = Choose Your Language -onboarding-live-language-subtitle = { -brand-short-name } is using { $appLanguage } while your system is using { $systemLanguage }. +onboarding-live-language-header = Choose your language -onboarding-live-language-switch-button-label = Switch to { $negotiatedLanguage } onboarding-live-language-button-label-downloading = Downloading the language pack for { $negotiatedLanguage }… -onboarding-live-language-waiting-subtitle = It looks like your system and { -brand-short-name } are using different languages. onboarding-live-language-waiting-button = Getting available languages… onboarding-live-language-installing = Installing the language pack for { $negotiatedLanguage }… onboarding-live-language-secondary-cancel-download = Cancel -onboarding-live-language-not-now-button-label = Not now onboarding-live-language-skip-button-label = Skip ## Firefox 100 Thank You screens