Closed Bug 1580599 Opened 5 years ago Closed 2 years ago

Show some UI in the Browser Toolbox to toggle Fluent pseudolocalization

Categories

(DevTools :: Framework, enhancement, P3)

enhancement

Tracking

(firefox98 fixed)

RESOLVED FIXED
98 Branch
Tracking Status
firefox98 --- fixed

People

(Reporter: bgrins, Assigned: gregtatum)

References

(Blocks 1 open bug)

Details

Attachments

(6 files, 2 obsolete files)

There's a fluent feature called pseudolocalization which lets you change the localized strings in the UI for development and it has three states: off, accented, and bidi: https://firefox-source-docs.mozilla.org/intl/l10n/l10n/fluent_tutorial.html#pseudolocalization.

Since this can come in handy while doing frontend firefox development, I think it makes sense to surface some kind of UI (similar to "Disable popup autohide"). Perhaps next to the popup autohide item in the toolbar popup.

Attached image menu with row buttons

You've probably already considered the most straightforward UI, which I think Matthew mentioned on slack - adding a submenu with the three options. Unwieldy and hides the state, but at least no custom parts.

I've been wanting to do a row of buttons, Chrome-style, for our docking options (attached).

An example of how this type of fancy menu item can look in Firefox is the Zoom and Edit button-rows in the hamburger menu.

Perhaps the text for this could be:

Localization: Accented | RTL

One thing to notice is that this is a global switch. I feel like majority of the UI for devtools is per-tab, but this option changes (in real time!) translation of the whole browser UI. Not sure how to indicate it via the UI.

Good to know! For states that are potentially dangerous to forget, we've been working on footgun icons that badge onto the panel's icon. We could put a badge like this on the meatball icon (inside the browser toolbox).

(In reply to Zibi Braniecki [:zbraniecki][:gandalf] from comment #2)

One thing to notice is that this is a global switch. I feel like majority of the UI for devtools is per-tab, but this option changes (in real time!) translation of the whole browser UI. Not sure how to indicate it via the UI.

Disable popup autohide is the same way. Agree it's a bit inconsistent but since it's Browser Toolbox only I guess we figured we could communicate pretty directly with folks using it to explain the behavior. Also FWIW I believe the popup autohide item attempts to reset the pref value to default when the BT closes if it was set from the UI - we could make this do the same.

Priority: -- → P3

I recorded a screencast of how the feature looks like in action - https://twitter.com/zbraniecki/status/1172676322528612352

I'm tentatively taking this bug, but not planning on working on it until sometime a bit later. If someone else wants to take it feel free.

Assignee: nobody → gtatum

Cool, happy to help with design feedback :)

Blocks: 1709191

I started migrating some of the strings here to Fluent, and filed a follow-up Bug 1709191 for the rest of the toolbox.

Attached image image.png

Right now I'm opting for the simple to implement approach of having two menu items. I still need to create some icons for this, but the implementation is pretty simple so far.

This commit adds support for setting the pseudo-locale for the browser
UI directly from the Browser Toolbox. This places the icons in the same
place as the "Disable Popup Autohide" command. This will make it easier
for Firefox developers to test that their UI is properly localized.

The SVGs were optimized for size using an optimizer that dropped the
path precision and any extra tags. I tested that they work correctly in
both light and dark modes.

Pseudo-localization is documented here:
https://firefox-source-docs.mozilla.org/l10n/fluent/tutorial.html#pseudolocalization

After this patch lands I'll follow-up with updating that documentation.

Depends on D134419

Attached image screenshot.jpg

Here is a screenshot of the completed work, up for the first review.

Attachment #9219978 - Attachment is obsolete: true
Attachment #9219952 - Attachment is obsolete: true
Pushed by gtatum@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/e31b11d30538
Migrate DevTools toolbox meatball menu to fluent; r=devtools-reviewers,fluent-reviewers,nchevobbe,flod
https://hg.mozilla.org/integration/autoland/rev/ee4372d071a0
Add pseudo-locale configuration to the browser toolbox; r=platform-i18n-reviewers,devtools-reviewers,fluent-reviewers,nchevobbe,dminor
https://hg.mozilla.org/integration/autoland/rev/9b4893bbbde8
Add a Fluent string helper to shared-head.js - r=nchevobbe
You need to log in before you can comment on or make changes to this bug.