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

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, {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
-    text: withMessageArgs(content.languageSwitcher.switch)
-  }, /*#__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", {
+  }, // This is the localized name from the Intl.DisplayNames API.
-    className: "secondary-cta"
+  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", {
-  }, /*#__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", {
     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))));
 }
 
 /***/ }),

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);

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: {

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);

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;
+    const langPackDisplayName = negotiatedLanguage?.langPackDisplayName;
-    if (displayName) {
+    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 */}
       <div style={{ display: showPreloadingScreen ? "block" : "none" }}>
         <button
           className="primary"
@@ -214,6 +220,7 @@ export function LanguageSwitcher(props) {
           </Localized>
         </div>
       </div>
+      {/* Waiting to download the language screen. */}
       <div style={{ display: showWaitingScreen ? "block" : "none" }}>
         <button
           className="primary"
@@ -245,31 +252,38 @@ export function LanguageSwitcher(props) {
           </Localized>
         </div>
       </div>
+      {/* The typical ready screen. */}
       <div style={{ display: showReadyScreen ? "block" : "none" }}>
         <div>
-          <Localized text={withMessageArgs(content.languageSwitcher.switch)}>
+          <button
-            <button
+            className="primary"
-              className="primary"
+            value="primary_button"
-              value="primary_button"
+            onClick={() => {
-              onClick={() => {
+              AboutWelcomeUtils.sendActionTelemetry(
-                AboutWelcomeUtils.sendActionTelemetry(
+                messageId,
-                  messageId,
+                "download_langpack"
-                  "download_langpack"
+              );
-                );
+              setIsAwaitingLangpack(true);
-                setIsAwaitingLangpack(true);
+            }}
-              }}
+          >
-            />
+            {
-          </Localized>
+              // This is the localized name from the Intl.DisplayNames API.
+              negotiatedLanguage?.langPackDisplayName
+            }
+          </button>
         </div>
-        <div className="secondary-cta">
+        <div>
-          <Localized text={content.languageSwitcher.not_now}>
+          <button
-            <button
+            type="button"
-              type="button"
+            className="secondary"
-              className="secondary text-link"
+            value="decline"
-              value="decline"
+            onClick={handleAction}
-              onClick={handleAction}
+          >
-            />
+            {
-          </Localized>
+              // This is the localized name from the Intl.DisplayNames API.
+              negotiatedLanguage?.appDisplayName
+            }
+          </button>
         </div>
       </div>
     </>

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"]`,
+      `button.primary[value="primary_button"]`,
-      `[data-l10n-id="onboarding-live-language-not-now-button-label"]`,
+      `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"]`,
+      `button.primary[value="primary_button"]`,
-      `[data-l10n-id="onboarding-live-language-not-now-button-label"]`,
+      `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"]`,
+      `button.primary[value="primary_button"]`,
-      `[data-l10n-id="onboarding-live-language-not-now-button-label"]`,
+      `button.secondary[value="decline"]`,
     ],
     // Unexpected selectors:
     [

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-header = Choose your language
-onboarding-live-language-subtitle = { -brand-short-name } is using { $appLanguage } while your system is using { $systemLanguage }.
 
-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