Fenix: FNX-511 ⁃ Add ability to change Firefox Preview (browser UI) language

[bbinto]

Why/User Benefit/User Problem

As a user, I want to experience the app in a language other than the system / phone language

Deps

• [x] AC API for switching languages

Acceptance Criteria (how do I know when I’m done?)

• [ ] I have the ability to change browser UI language separate from the system language
• [ ] Browser language will follow the system language by default

Mocks: https://miro.com/app/board/o9J_kwN9u-I=/
SVG asset for Language icon: https://dzwonsemrish7.cloudfront.net/items/1j0I1L1E282t24241N0l/language.svg

NOT in this issue

• #6502 Allow webpage content language selection
• expanding the locales we currently support #5496

This is just scoped to making the picker inside of Fenix, NOT inside AC

[cpeterso]

Issue #940 confirmed that Fenix's app UI language changes correctly when the user changes the Android system language.

AFAICT, Chrome's Language settings only configure the user's preferred language for web content (i.e. the Accept-Language HTTP header sent to web servers), not Chrome's app UI language.

GV bug https://bugzilla.mozilla.org/show_bug.cgi?id=1543823 is about letting the browser customize Gecko's Accept-Language HTTP header and/or making Gecko use the Android system language.

UX question to consider:

1. Assume Android system language is en-US.
2. User changes Fenix's language setting to en-CA.
3. User then changes the Android system language to en-GB.
4. Should Fenix's language setting preserve its non-default setting (en-CA) or switch to new system language (en-GB)?

[yoasif]

1. Assume Android system language is en-US.
2. User changes Fenix's language setting to en-CA.
3. User then changes the Android system language to en-GB.
4. Should Fenix's language setting preserve its non-default setting (en-CA) or switch to new system language (en-GB)?

It feels to me like Fenix should be en-GB and and websites should be en-CA unless Fenix implements separate website and browser UI preferences for language.

Also, FWIW, Chrome also allows users to set up several languages based on priority, while Fennec only allows users to select a single one (likely because the preference applies to both UI and websites).

[sblatz]

@vesta0 are we able to get a UX/product decision on this:

(From @cpeterso):

This issue is about "browser language", but does that just affect the app UI's language? Or should it also change the user's web content language preference (i.e. Gecko's Accept-Language HTTP header sent to servers)?
There's also a product question of whether the device's language should affect the app UI language and/or the Accept-Language HTTP header

[cpeterso]

There's also a product question of whether the device's language should affect the app UI language and/or the Accept-Language HTTP header.

GeckoView's default Accept-Language HTTP header is: language _set_ by app (not necessarily the same as the app's UI language!) > OS language > "en-us,en".

[vesta0]

@sblatz I believe this is not blocked on anything. Does this need to be implemented in A-C or Fenix?

[sblatz]

@pocmo would this be useful for others or should we implement on the Fenix side?

[pocmo]

Since we want that for every app we ship (e.g. Fennec, Focus and Firefox Lite have it, Fenix wants it) and since there's quite some complexity I think that should live in AC. Delphine filed that a while ago and I'll add the [Fenix] label to it: https://github.com/mozilla-mobile/android-components/issues/1557

[lime124]

removing the ux label - this is on our radar already as it's part of Q3 plans.

[sblatz]

AC meta: https://github.com/mozilla-mobile/android-components/issues/1557#issuecomment-506413721

[sblatz]

This is dependent on AC in the sense that we are going to use https://github.com/mozilla-mobile/android-components/issues/3584, but we are not dependent on their UI element :)

[ekager]

Removing the AC label because the above linked ticket has been closed

[vesta0]

@lime124 can we reference Focus designs for this feature and iterate on improvements afterwards?

[brampitoyo]

Progress report:

See the board here: https://miro.com/app/board/o9J_kwN9u-I=/

I’ve started the work on this project today. Although not all the screens in this feature have been mocked up, the user flow is fairly complete.

In this user flow and mockups, users have the maximum flexibility to:

1. Choose one “Menus and dialogs” language
2. Order “Web content” language(s)

Both may be set independently from the Android System language. As you’ll see on the board below, this feature isn’t as simple as designing a single menu.

I haven’t had the time to tackle this specific corner case: “What happens to the language(s) set under this menu, when the Android system language changes? Does it propagate? If so, what are the logic/rules?”

[brampitoyo]

Progress report:

See the board here: https://miro.com/app/board/o9J_kwN9u-I=/

I’ve spent today designing policies around how OS vs. Firefox vs. web content languages interact.

I know that we want a separate language options for menus/dialogs and web content. This will solve some of our problems.

I also set out to solve the problem @cpeterso wrote in https://github.com/mozilla-mobile/fenix/issues/220#issuecomment-484572922:

1. Assume Android system language is en-US.
2. User changes Fenix's language setting to en-CA.
3. User then changes the Android system language to en-GB.
4. Should Fenix's language setting preserve its non-default setting (en-CA) or switch to new system language (en-GB)?

As a solution, I recommend:

1. Under “Menus and dialogs language”, have an option called “Follow device language”. This option should be default policy, unless changed manually by the users
2. Under “Web content language”, also have an option called “Follow device language”. This option should be on top of the list, unless changed manually by the users.

My reasoning are as follows:

1. If users change the system language, they probably expect the browser and web content language to also follow. So we set the default policy to “Follow device language”.
2. A portion of users will want to override this “follow” behaviour. To do that, they can go to Firefox Language Settings.
3. There are 2 separate items within Firefox Language Settings: “Menus and dialogs language” and “Web content language”. This separation helps users realise that changing one item doesn’t necessarily change the other item.

Thanks to “Follow device language”, our default policy will work for the large majority of users, most of the time.

My concern is this: while it’s possible to set “Menus and dialogs” to “Follow device language”, there is no way for us to say “For all web content, follow device language”.

Either way, this project is now ready for walkthrough, so I will schedule a time to sit down with @vesta0 and Engineering.

[sblatz]

@cpeterso do we have hooks in GV to change language for webpage content?

[brampitoyo]

After walk through with Product and Engineering teams, this project is now ready to hand off to Engineering.

See the board: https://miro.com/app/board/o9J_kwN9u-I=/
SVG asset for Language icon: https://dzwonsemrish7.cloudfront.net/items/1j0I1L1E282t24241N0l/language.svg

• For MVP, we will only have the ability to change Browser language.
• There’s a new policy to handle Webpage Content language when a new Browser language has been selected. User-selected language goes on top. A sensible fallback like English goes under it.
• For post-MVP, we will split the Webpage Content language work in two: the page itself, and its edit mode
• The design specified having two names for each language: endonym and exonym. If L10N doesn’t have these values, then this feature can still ship with only one name per language.

[cpeterso]

@cpeterso do we have hooks in GV to change language for webpage content?

GV honors the system language by default (i.e. Gecko's HTTP requests set the Accept-Language HTTP header to match the system language, issue #940). Fenix can override Gecko's list of preferred languages using the GeckoRuntimeSettings#setLocales API:

https://mozilla.github.io/geckoview/javadoc/mozilla-central/org/mozilla/geckoview/GeckoRuntimeSettings.html#setLocales-java.lang.String:A-

[BranescuMihai]

@liuche Do we have the translations for the language names (endonym and exonym) available somewhere?
Also, I saw that some of our translation files are not complete (for example, the Catalan one), so I'm thinking we should not include these ones in our list since it will be a bit weird for the user to have only 2-3 strings translated.

[brampitoyo]

@BranescuMihai @liuche As far as I’m aware, Firefox Desktop has endonym, but the exonyms are only in English. Click “Select your preferred language” on this page: https://www.mozilla.org/en-US/firefox/all/#product-desktop-release

If exonyms aren’t available in any other language, it’s fine to only use the English exonyms.

[Pike]

https://developer.android.com/reference/android/icu/text/LocaleDisplayNames might be worth trying, if that has all the data you need.

Otherwise we've done this a few times, and we can provide a dataset.

Side note, we should handle release-ready localizations independently of the language chooser. In particular on Nightly, it's important that localizers can start testing their strings, even if they've only done 5 of them by now.

[liuche]

@BranescuMihai ^ we should definitely try to avoid adding locale names as new strings.

[BranescuMihai]

@liuche @Pike @brampitoyo Turns out Android provides the exonym and endonym by itself, so all good now, thanks!

Pull request is opened:
Video with the feature

[brampitoyo]

@BranescuMihai Just want to say that your video demo looks amazing. Thanks heaps for implementing these changes!

[AndiAJ]

Hi, I've just check this issues on the latest Nightly Build #20070606 from 01/07 using a Google Pixel 3a (Android 9) and noticed a couple of inconsistencies:

1. The language isn't actually changed from Fenix's language setting.
2. After closing and re-opening Fenix noticed that:
   • Only some settings subsections seem to be translated (Theme, Toolbar), but after opening them, the language isn't changed.
   • If you re-open the Language section, the previously selected pref isn't checked.
3. Supposedly, while still having the desired language selected in Fenix's setting ("Follow device language" isn't enabled) if you change the device's Language and input setting it actually changes Fenix's language.

► Video

@BranescuMihai & @Baron-Severin - Please review the above.
I'll remove the QA needed label until further notice.

[severinrudie]

I smoke tested this and it worked as expected.... Not sure, possible that I messed something up when rebasing. I'll try to find some time to investigate this.

[severinrudie]

Hm, very strange. I'm on Nightly Build #20071807 from 1/7, and mine is behaving very differently, no idea why.

If you re-open the Language section, the previously selected pref isn't checked.

Oof, good catch. @BranescuMihai I heard you were back from PTO, are you able to take a look at this? If not I'll try to fix it tomorrow.

The language isn't actually changed from Fenix's language setting.

Supposedly, while still having the desired language selected in Fenix's setting ("Follow device language" isn't enabled) if you change the device's Language and input setting it actually changes Fenix's language.

These two aren't reproducible for me (video attached).

Only some settings subsections seem to be translated (Theme, Toolbar), but after opening them, the language isn't changed.

I know a lot of our translations are only partial, so this might be expected on certain languages. When I tested, theme and toolbar were translated in German, Chinese, Italian, French, and Spanish, but theme was untranslated in Japanese, for example.

[AndiAJ]

Hi, I've re-checked this matter on the latest Nightly Build #20100616 from 01/10.

I've noticed that the problem is caused by the theme selection, namely if the user is using the dark theme, it will not work at all.

✔️ Using the "Light" or "Follow device theme" It worked with a couple of inconsistencies on:
• Google Pixel 3a (Android 9)
• Huawei Mate 20 Lite (Android 8.1.0)

Inconsistencies:

1. If you re-open the Language section, the previously selected pref isn't checked. (already mentioned it)
2. The subsections from "Theme" & "Toolbar" aren't changed as per the language from Fenix.( are displayed as per the devices language & input setting)

► Video full run

► Screenshot "Theme" & "Toolbar" inconsistency

❌ Didn't work at all on the following devices:
• Samsung Galaxy S7 (Android 7)
• OnePlus A3 (Android 6.0.1)
• LG Nexus 4 (Android 5.1.1)

@Baron-Severin - Please review ☺️

[cadeyrn]

The subsections from "Theme" & "Toolbar" aren't changed as per the language from Fenix.( are displayed as per the devices language & input setting)

On my device the exact opposite is true: These strings are (almost) the only strings using the Fenix and not the device language, see https://github.com/mozilla-mobile/fenix/issues/7559#issuecomment-572774124. Interesting. 🤔

the problem is caused by the theme selection, namely if the user is using the dark theme, it will not work at all.

Oh, that's a good hint. There is also the opposite true for me: it only works with the dark and not with the light theme for me. 😅 I will test a bit more and update #7559 with my observations.

[severinrudie]

I checked in and it looks like @BranescuMihai will be back on Monday, so I'm going to leave this one to him.

[sv-ohorvath]

@Baron-Severin @BranescuMihai this landed on Beta 3.1.0 but it still has the issues mentioned above, not in a very good condition. Should we hide it until the bugs are fixed?

[liuche]

Yes, is it easy to hide that language picker setting, or make it Nightly only? @BranescuMihai could you open a PR for that, to make this Language Picker Nightly-only until these bugs and #7559 are fixed? That we can also uplift it into the Beta.

[liuche]

@BranescuMihai when you have fixed the issues here, could you also remove the feature flag hiding the language picker?

[liuche]

Putting this back into the sprint bc @BranescuMihai isn't available to work on this right now!

[BranescuMihai]

@liuche I'm back from medical leave, so I'll finish up those bugs

[Delphine]

I just tried the locale switcher on today's Nightly and it seems to work as expected :)
Maybe QA can do a thorough check and confirm?

[liuche]

Since this seems to be working on Nightly, and #7677 is already filed, sending this to QA. Let's file others as follow-ups if the main feature works.

[softvision-miralobontiu]

Hi all,
I've tested on the latest Nightly build from 03/02 with Samsung Galaxy Note 8 (Android 9), and Google Pixel (Android 10), and this is not fixed yet.
On both devices I had dark themes applied.
The newly selected language was switched back to the system's language when the user selected the "Light" theme, instead of the "Dark" theme. Changing back to the "Dark" theme, the newly selected language was enabled again.

I will remove the eng:qa:needed label. Please let me know if I should file a new issue.
Thanks!

[cadeyrn]

Is your device theme dark? If yes, it's #7596 (it only works if system and Fenix theme are either both light or both dark).

edit: It has been fixed in latest build from master, should be in Nightly tomorrow.

[softvision-miralobontiu]

Hi!
Verified as fixed on the latest Nightly build 200204 from 2/4, with Sony Xperia Z5 Premium (Android 7.1.1), and Google Pixel (Android 10).
I will set the proper label. Cannot close the issue, since it's blocked by #7677.

[liuche]

@boek could you remove the feature flag for language picker now, and we'll get it out in 4.2? (And anything else you want to get out in 4.2 :) )

[cadeyrn]

@liuche @boek Please note that the feature is still completely broken for some users since more than three weeks, see #7559...

[liuche]

Probably need a fix for #9413 before we turn this on. Could be an activity restart, maybe?

[liuche]

@boek will we have to wait for the new AC nightly version to be merged into Fenix? Not sure how to track, I'll add a comment to #9413

[boek]

@liuche I updated a-c with this PR :)

[softvision-miralobontiu]

Verified that the user can:

• change the language in Fenix to be different than the system's language,
• follow the system's language,
• change the language in Fenix with dark or light theme applied.

Tested with Google Pixel (Android 10), OnePlus 5T (Android 9), Sony Xperia Z5 Premium (Android 7.1.1), Samsung Galaxy Tab A6 (Android 5.1.1), and HTC 10 (Android 8) on the latest Nightly build from 4/8.

I'll remove the qa:needed label.

@liuche #9413 is not entirely fixed, should I leave this issue opened as well?

[liuche]

Took a look at that other bug - thanks for filing and following up! For adding the language-switcher, I think we can fix that in release - it affects not all devices, but RTL support is important to get right. So I'll close this, and we can follow up in the other bug.