1879933 - Add a button to change the translation direction in about:translations

Status: RESOLVED FIXED

(Firefox :: Translations, enhancement)

Description

[Marco Castelluccio [:marco]]

It would be nice to have a button to invert the translation direction in the about:translations page.

Comment 1

[Gabriel Lee [:gabrielchl]]

so for this feature I'm thinking that an icon on the button would help users understand the button better (faster?), again, taking inspiration from the google translate ui

looking at the icons that come with firefox it seems like the best is chrome/toolkit/skin/classic/global/icons/autoscroll-horizontal.svg.
alternatively, we can build an "icon" using multiple divs and different existing icons (such as 2 different arrows in different direction)

wondering what people think about this.

Comment 2

[Erik Nordin [:nordzilla]]

(In reply to Gabriel Lee [:gabrielchl] from comment #1)

so for this feature I'm thinking that an icon on the button would help users understand the button better (faster?), again, taking inspiration from the google translate ui

looking at the icons that come with firefox it seems like the best is chrome/toolkit/skin/classic/global/icons/autoscroll-horizontal.svg.
alternatively, we can build an "icon" using multiple divs and different existing icons (such as 2 different arrows in different direction)

wondering what people think about this.

I agree that an icon button would be best to use here.

I think this one, rotated 90 degrees, may be a bit more fitting:

https://searchfox.org/mozilla-central/source/browser/themes/shared/icons/import-export.svg

---

Since you've taken interest in completing some of the open bugs for the about:translations page, I want to give you a bit of background on what the about:translations page is, and how the workflow here differs in some ways from other features in Firefox.

The about:translations page originated as somewhat of a developer testing area while we were implementing the full-page translations (FPT) feature for Firefox in 2023. It proved very useful during early development to have a space where we could fully hook up the translation back-end infrastructure end-to-end without having to concern ourselves with the complexities of the FPT user interface and state management across various tabs and windows.

However the about:translations page is technically not an officially supported or released product in Firefox. It is not listed in the about:about page, for example. The only way that someone would discover it is by engaging with the community, or by looking at the source code etc.

Additionally, the localized content for this page is still in a preview file (mozilla-central/toolkit/locales-preview/aboutTranslations.ftl). This means that these strings have not been officially localized to other languages, therefore about:translations currently supports only the English using the exact strings in this preview file.

Another difference is that the user interface for about:translations has not had any official input from our User Experience (UX) team. This is the relevant part here, because typically UX would choose and validate all of the icons and visual characteristics ahead of implementation time, and we wouldn't be having this discussion in the comments on the bug.

Given the nature of this page in its current state, I think it's acceptable for us to move forward with choosing an icon based on this Bugzilla discussion, but I want to be clear that this isn't a typical workflow for an officially released feature at Mozilla.

All of this said, I think that the about:translations page has a lot of value, especially in that it provides a place in the code where non-urgent work items can exist for community contributors to onboard into the code base.

Thanks for your interest here!

Comment 3

[Gabriel Lee [:gabrielchl]]

(In reply to Erik Nordin [:nordzilla] from comment #2)

ahhh I see, thanks for the summary.

regarding the icons, can I ask how did you find that icon? i can't seem to find any resources that points to a "library" of icons that the firefox uses aside from the list in chrome/toolkit/skin/classic/global/icons/

Comment 4

[Erik Nordin [:nordzilla]]

(In reply to Gabriel Lee [:gabrielchl] from comment #3)

regarding the icons, can I ask how did you find that icon? i can't seem to find any resources that points to a "library" of icons that the firefox uses aside from the list in chrome/toolkit/skin/classic/global/icons/

Most of the icons that we would use for a feature like this are going to be in one of the "shared" directories.

• toolkit/themes/shared/icons
• browser/themes/shared/icons

Code within toolkit is shared across all of our products: Firefox for Desktop, Firefox for Android, Thunderbird, etc.

Code within browser is just specific to Firefox for Desktop.

I looked in the toolkit section first, but didn't find anything that looked relevant for this purpose, so then I looked in the browser section.

Comment 5

[Gabriel Lee [:gabrielchl]]

Attachment: Bug 1879933 - Add a button to change the translation direction in about:translations. r=#translations-reviewers

Add button. Disabled when the selected languages are equivalent.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/75e4425e7945
Add a button to change the translation direction in about:translations. r=translations-reviewers,fluent-reviewers,desktop-theme-reviewers,bolsson,nordzilla,dao

Comment 7

[Iulian Moraru]

Backed out for causing bc failures related to translations.css.

• Push with failures

• Failure log
  Also, please take a look at this TV failure before relanding.

• Backout link

[task 2024-08-22T22:12:51.487Z] 22:12:51     INFO - Console message: [JavaScript Warning: "Unknown pseudo-class or pseudo-element ‘-moz-svg-text’.  Ruleset ignored due to bad selector." {file: "resource://gre/res/svg.css?always-parse-css-0.1932537397183327" line: 59}]
[task 2024-08-22T22:12:51.488Z] 22:12:51     INFO - Console message: [JavaScript Warning: "Unknown pseudo-class or pseudo-element ‘-moz-svg-marker-anon-child’.  Ruleset ignored due to bad selector." {file: "resource://gre/res/svg.css?always-parse-css-0.1932537397183327" line: 68}]
[task 2024-08-22T22:12:51.489Z] 22:12:51     INFO - Buffered messages finished
[task 2024-08-22T22:12:51.490Z] 22:12:51     INFO - TEST-UNEXPECTED-FAIL | browser/base/content/test/static/browser_parsable_css.js | browser file chrome://browser/skin/import-export.svg referenced outside browser in chrome://global/content/translations/translations.css - 
[task 2024-08-22T22:12:51.491Z] 22:12:51     INFO - Stack trace:
[task 2024-08-22T22:12:51.492Z] 22:12:51     INFO - chrome://mochikit/content/browser-test.js:test_ok:1597
[task 2024-08-22T22:12:51.492Z] 22:12:51     INFO - chrome://mochitests/content/browser/browser/base/content/test/static/browser_parsable_css.js:checkAllTheCSS:488
[task 2024-08-22T22:12:51.493Z] 22:12:51     INFO - chrome://mochikit/content/browser-test.js:handleTask:1145
[task 2024-08-22T22:12:51.494Z] 22:12:51     INFO - chrome://mochikit/content/browser-test.js:_runTaskBasedTest:1217
[task 2024-08-22T22:12:51.494Z] 22:12:51     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1358
[task 2024-08-22T22:12:51.495Z] 22:12:51     INFO - chrome://mochikit/content/browser-test.js:nextTest/<:1134
[task 2024-08-22T22:12:51.496Z] 22:12:51     INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/<:1058
<...>

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/8e7c7228c9fe
Add a button to change the translation direction in about:translations. r=translations-reviewers,fluent-reviewers,desktop-theme-reviewers,bolsson,nordzilla,dao

Comment 9

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/8e7c7228c9fe