1546683 - Use fluent to localize trailhead first run

Status: VERIFIED FIXED

(Firefox :: New Tab Page, enhancement, P1)

Description

[Kate Hudson :k88hudson]

This is a possibility would simplify our localization flow

We could just use ASRouter to provide content like how onboarding does it

Comment 1

[Ed Lee :Mardak]

Right now we just use our usual in-content string with <FormattedMessage/>. seems like there could be at least 2 main approaches:

1. use fluent with react, so we need to get the fluent strings into the page
   1a) if we want prerendering bug 1485004, then we would still need our strings-import process to have strings in activity-stream repository for build time
   1b) without prerendering, we can be like about:preferences and do something like <link rel="localization" href="browser/newtab/welcome.ftl"/>
2. use fluent strings as part of OnboardingMessageProvider relying on firefox’s Localization.formatMessage to then pass the localized string into content. This basically treats the about:welcome modal as a special full-page onboarding "card" not too different from the 3 smaller onboarding cards.

I would think the l10n preferred long-term choice is option 1b (??), but I'm not familiar with how complicated it might be to switch to that. flod?

Comment 2

[Kate Hudson :k88hudson]

Just a note that option #2 is probably fastest and has the benefit of giving us more flexibility in that it gives us a fallback solution of hardcoding strings if we need to.

Comment 3

[Francesco Lodolo [:flod]]

Redirecting to Axel because it's more on his (technical) plate.

Comment 4

[Axel Hecht [:Pike]]

I have to admit that I know next to nothing about React, including using Fluent in React.

Reading https://searchfox.org/mozilla-central/source/browser/components/newtab/content-src/asrouter/templates/StartupOverlay/StartupOverlay.jsx, it doesn't look all that pre-rendered at all? Yes, you're using localized data serialized to js, but I'd hope that you just won't notice using FluentReact with parsing Fluent files proper. In our Talos tests, the parser hasn't been a major offender.

Stas or other folks on #fluent on slack can guide you there.

Comment 5

[Staś Małolepszy :stas]

Rather than use Localization.formatMessage and imperatively inject its return value into the DOM or call it from React components, I'd recommend using the fluent-react bindings package. It's a thin layer on top of something similar to Firefox's Localization, and it provides much more React-y API.

fluent-react is agnostic about where it gets the localization files from, which makes it easy to make it work with Gecko's L10nRegistry. See https://github.com/projectfluent/fluent.js/wiki/React-Bindings for docs and https://searchfox.org/mozilla-central/source/devtools/client/aboutdebugging-new/src/modules/l10n.js for an example.

I don't know if you can use L10NRegistry during pre-rendering, but you're probably getting the localization files somehow already, and it should be possible to use the same method to build a generateBundles generator for fluent-react's LocalizationProvider.

I'll be happy to help with this if you'd like to give fluent-react a try.

Comment 6

[Ed Lee :Mardak]

Activity Stream does already use fluent-react but for a very specific use case of handling "remote" html strings converted to fluent for use with snippets and return-to-AMO, e.g., https://github.com/mozilla/activity-stream/blob/a0c1c2aead29d9a3ee0c5039abc22769efe7e884/content-src/asrouter/asrouter-content.jsx#L238

The existing Onboarding messages use fluent with Localization.formatMessages and about:welcome firstrun "page" uses .properties -> json -> react-intl/FormattedMessage.

To minimize changes and process steps, we'll add strings to onboarding.ftl so that they get localized and uplifted through the normal process but still rely on Localization.formatMessages from the main process to pass localized strings into the content process as none of the content pages access .ftl.

Comment 7

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/activity-stream/pull/4940

Comment 8

[Ed Lee :Mardak]

Current approach in the PR is to use fluent-dom by dynamically injecting <link rel=localization> including both "browser/newtab/onboarding.ftl" and "trailhead.ftl" which we inject into [localization] en-US.jar for now so that we can develop against WIP fluent strings before we commit finalized ones to regular onboarding.ftl.

Comment 9

[Ed Lee :Mardak]

https://hg.mozilla.org/mozilla-central/rev/34dd0113415f

This is an internal code change allowing usage of onboarding.ftl

Comment 10

[Ed Lee :Mardak]

Marking verified as per bug 1550098 Comment 13 for bugs that were status-firefox68=verified