Show some UI in the Browser Toolbox to toggle Fluent pseudolocalization
Categories
(DevTools :: Framework, enhancement, P3)
Tracking
(firefox98 fixed)
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.
Comment 1•5 years ago
|
||
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
Comment 2•5 years ago
|
||
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.
Comment 3•5 years ago
|
||
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).
Reporter | ||
Comment 4•5 years ago
|
||
(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.
Updated•5 years ago
|
Comment 5•5 years ago
|
||
I recorded a screencast of how the feature looks like in action - https://twitter.com/zbraniecki/status/1172676322528612352
Assignee | ||
Comment 6•3 years ago
|
||
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.
Comment 7•3 years ago
|
||
Cool, happy to help with design feedback :)
Assignee | ||
Comment 8•3 years ago
|
||
I started migrating some of the strings here to Fluent, and filed a follow-up Bug 1709191 for the rest of the toolbox.
Assignee | ||
Comment 9•3 years ago
|
||
Assignee | ||
Comment 10•3 years ago
|
||
Depends on D114157
Assignee | ||
Comment 11•3 years ago
|
||
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.
Assignee | ||
Comment 12•3 years ago
|
||
Assignee | ||
Comment 13•2 years ago
|
||
Assignee | ||
Comment 14•2 years ago
|
||
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
Assignee | ||
Comment 15•2 years ago
|
||
Here is a screenshot of the completed work, up for the first review.
Updated•2 years ago
|
Updated•2 years ago
|
Assignee | ||
Comment 16•2 years ago
|
||
Depends on D134420
Comment 17•2 years ago
|
||
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
Comment 18•2 years ago
|
||
bugherder |
https://hg.mozilla.org/mozilla-central/rev/e31b11d30538
https://hg.mozilla.org/mozilla-central/rev/ee4372d071a0
https://hg.mozilla.org/mozilla-central/rev/9b4893bbbde8
Description
•