Commit 96460bcf authored by Ed Lee's avatar Ed Lee
Browse files

Bug 1784901 - Show Language Mismatch Screen with negotiated language on left... 

Bug 1784901 - Show Language Mismatch Screen with negotiated language on left secondary section and switch button r=pdahiya

As part of installing the lang pack, add the negotiated language as string args and convert to raw if it wants to use the lang pack.

Differential Revision: https://phabricator.services.mozilla.com/D155021
parent af84a423

browser/components/newtab/aboutwelcome/AboutWelcomeChild.jsm

+43 −4
Original line number Diff line number Diff line
@@ -323,10 +323,49 @@ class AboutWelcomeChild extends JSWindowActorChild { 
    this.contentWindow.location.href = "about:home";

  }



  AWEnsureLangPackInstalled(langPack) {

    return this.sendQueryAndCloneForContent(

  AWEnsureLangPackInstalled(negotiated, screenContent) {

    const content = Cu.cloneInto(screenContent, {});

    return this.wrapPromise(

      this.sendQuery(

        "AWPage:ENSURE_LANG_PACK_INSTALLED",

      langPack

        negotiated.langPack

      ).then(() => {

        const formatting = [];

        const l10n = new Localization(

          ["branding/brand.ftl", "browser/newtab/onboarding.ftl"],

          false,

          undefined,

          // Use the system-ish then app then default locale.

          [...negotiated.requestSystemLocales, "en-US"]

        );



        // Add the negotiated language name as args.

        function addMessageArgsAndUseLangPack(obj) {

          for (const value of Object.values(obj)) {

            if (value?.string_id) {

              value.args = {

                ...value.args,

                negotiatedLanguage: negotiated.langPackDisplayName,

              };



              // Expose fluent strings wanting lang pack as raw.

              if (value.useLangPack) {

                formatting.push(

                  l10n.formatValue(value.string_id, value.args).then(raw => {

                    delete value.string_id;

                    value.raw = raw;

                  })

                );

              }

            }

          }

        }

        addMessageArgsAndUseLangPack(content.languageSwitcher);

        addMessageArgsAndUseLangPack(content);

        return Promise.all(formatting).then(() =>

          Cu.cloneInto(content, this.contentWindow)

        );

      })

    );

  }

browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js

+9 −20
Original line number Diff line number Diff line
@@ -552,6 +552,8 @@ const Localized = ({ 
  const textNodes = props.children; // Pick desired fluent or raw/plain text to render.



  if (text.string_id) {

    // Set the key so React knows not to reuse when switching to plain text.

    props.key = text.string_id;

    props["data-l10n-id"] = text.string_id;

    if (text.args) props["data-l10n-args"] = JSON.stringify(text.args);

  } else if (text.raw) {
@@ -1187,7 +1189,9 @@ function useLanguageSwitcher(appAndSystemLocaleInfo, screens, screenIndex, setSc 
    }



    setLangPackInstallPhase("installing");

    window.AWEnsureLangPackInstalled(negotiatedLanguage.langPack).then(() => {

    window.AWEnsureLangPackInstalled(negotiatedLanguage, screen === null || screen === void 0 ? void 0 : screen.content).then(content => {

      // Update screen content with strings that might have changed.

      screen.content = content;

      setLangPackInstallPhase("installed");

    }, error => {

      console.error(error);
@@ -1243,22 +1247,7 @@ function LanguageSwitcher(props) { 
        });

      });

    }

  }, [isAwaitingLangpack, langPackInstallPhase]); // The message args are the localized language names.



  const withMessageArgs = obj => {

    const langPackDisplayName = negotiatedLanguage === null || negotiatedLanguage === void 0 ? void 0 : negotiatedLanguage.langPackDisplayName;



    if (langPackDisplayName) {

      return { ...obj,

        args: { ...obj.args,

          negotiatedLanguage: langPackDisplayName

        }

      };

    }



    return obj;

  };



  }, [isAwaitingLangpack, langPackInstallPhase]);

  let showWaitingScreen = false;

  let showPreloadingScreen = false;

  let showReadyScreen = false;
@@ -1274,7 +1263,7 @@ function LanguageSwitcher(props) { 




  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {

    className: "language-switcher-container"

    className: "action-buttons language-switcher-container"

  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {

    style: {

      display: showPreloadingScreen ? "block" : "none"
@@ -1313,7 +1302,7 @@ function LanguageSwitcher(props) { 
    src: "chrome://browser/skin/tabbrowser/tab-connecting.png",

    alt: ""

  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {

    text: withMessageArgs(content.languageSwitcher.downloading)

    text: content.languageSwitcher.downloading

  })), /*#__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, {
@@ -1341,7 +1330,7 @@ function LanguageSwitcher(props) { 
      setIsAwaitingLangpack(true);

    }

  }, content.languageSwitcher.switch ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {

    text: withMessageArgs(content.languageSwitcher.switch)

    text: content.languageSwitcher.switch

  }) : // 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",

browser/components/newtab/aboutwelcome/content/aboutwelcome.css

+2 −5
Original line number Diff line number Diff line
@@ -388,9 +388,6 @@ body[lwt-newtab-brighttext] { 
.onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner {

  min-height: 330px;

}

.onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner .language-switcher-container {

  text-align: initial;

}

.onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner .language-switcher-container .secondary {

  margin-inline-start: 0;

  margin: 5px 0;
@@ -479,7 +476,7 @@ body[lwt-newtab-brighttext] { 
}

.onboardingContainer .screen[pos=split] .section-secondary h1 {

  font-weight: 700;

  font-size: clamp(52px, 4vw, 104px);

  font-size: 47px;

  line-height: 110%;

  max-width: 340px;

  text-align: initial;
@@ -541,7 +538,7 @@ body[lwt-newtab-brighttext] { 
    height: 150px;

  }

  .onboardingContainer .screen[pos=split] .section-secondary h1 {

    font-size: clamp(35px, 4vw, 104px);

    font-size: 35px;

    text-align: center;

    white-space: normal;

  }

browser/components/newtab/aboutwelcome/lib/AboutWelcomeDefaults.jsm

+2 −0
Original line number Diff line number Diff line
@@ -336,6 +336,7 @@ const MR_ABOUT_WELCOME_DEFAULT = { 
        },

        hero_text: {

          string_id: "mr2022-onboarding-live-language-text",

          useLangPack: true,

        },

        languageSwitcher: {

          downloading: {
@@ -351,6 +352,7 @@ const MR_ABOUT_WELCOME_DEFAULT = { 
          },

          switch: {

            string_id: "mr2022-onboarding-live-language-switch-to",

            useLangPack: true,

          },

          continue: {

            string_id: "mr2022-onboarding-live-language-continue-in",

browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss

+2 −4
Original line number Diff line number Diff line
@@ -288,8 +288,6 @@ body { 
            min-height: 330px;



            .language-switcher-container {

              text-align: initial;



              .secondary {

                margin-inline-start: 0;

                margin: 5px 0;
@@ -400,7 +398,7 @@ body { 


        h1 {

          font-weight: 700;

          font-size: clamp(52px, 4vw, 104px);

          font-size: 47px;

          line-height: 110%;

          max-width: 340px;

          text-align: initial;
@@ -474,7 +472,7 @@ body { 
          height: 150px;



          h1 {

            font-size: clamp(35px, 4vw, 104px);

            font-size: 35px;

            text-align: center;

            white-space: normal;

          }