2002127 - Migrate the Translations Settings to Conform to the Settings Redesign

Status: RESOLVED FIXED

(Firefox :: Translations, enhancement)

Description

[Erik Nordin [:nordzilla]]

Description

As part of the greater initiative to redesign the about:settings page layout, we need to migrate the Translations settings to conform to the new designs specified in the Figma files.

Link to designs (internal only):

• https://www.figma.com/design/2b02v18AppIpsTceWac2T3/Settings-Desktop?node-id=6396-14366&m=dev

Comment 1

[Erik Nordin [:nordzilla]]

Attachment: Bug 2002127 - Part 02: Remove unused browser.translations.newSettingsUI code r=hjones!

Comment 2

[Erik Nordin [:nordzilla]]

Attachment: Bug 2002127 - Part 03: Support icons in subpage headers r=hjones!

This commit allows an icon to appear in a subpage header.

Comment 3

[Erik Nordin [:nordzilla]]

Attachment: Bug 2002127 - Part 03: Support actions in moz-box-item r=mstriemer

This commit allows actions to appear in moz-box-item.

Comment 4

[Erik Nordin [:nordzilla]]

Attachment: WIP: Bug 2002127 - Part 04: Improve null checking in moz-box-group r=mstriemer

Resolves error in moz-box-group.mjs:127:20

Uncaught TypeError: can't access property "getAttribute", event.target.closest(...) is null
handleKeydown chrome://global/content/elements/moz-box-group.mjs:127
handleEvent chrome://global/content/vendor/lit.all.mjs:2031
handleKeydown chrome://global/content/elements/moz-box-group.mjs:127
handleEvent chrome://global/content/vendor/lit.all.mjs:2031

Comment 5

[Erik Nordin [:nordzilla]]

Attachment: Bug 2002127 - Part 04: Fix translations.svg in dark mode r=hjones

Comment 6

[Erik Nordin [:nordzilla]]

Attachment: Bug 2002127 - Part 05: Implement Top-Level Translations Setting Group r=hjones!

Comment 7

[Erik Nordin [:nordzilla]]

Attachment: Bug 2002127 - Part 06: Implement "More Translation Settings" SubPage r=hjones!

Comment 8

[Erik Nordin [:nordzilla]]

Attachment: Bug 2002127 - Part 07: Implement Speed up translation default state r=hjones!

Comment 9

[Erik Nordin [:nordzilla]]

Attachment: Bug 2002127 - Part 08: Implement Automatic translation default state r=hjones!

Comment 10

[Erik Nordin [:nordzilla]]

Attachment: Bug 2002127 - Part 09: Implement Never translate sites default state r=hjones!

Comment 11

[Erik Nordin [:nordzilla]]

Attachment: Bug 2002127 - Part 10: Implement Always Translate Languages Functionality r=hjones!

Comment 12

[Erik Nordin [:nordzilla]]

Attachment: Bug 2002127 - Part 11: Implement Never Translate Languages Functionality r=hjones!

Comment 13

[Erik Nordin [:nordzilla]]

Attachment: Bug 2002127 - Part 12: Implement Never Translate Sites Functionality r=hjones!

Comment 14

[Erik Nordin [:nordzilla]]

Attachment: Bug 2002127 - Part 13: Implement Download Languages Functionality r=hjones!

Comment 15

[Erik Nordin [:nordzilla]]

Attachment: Bug 2002127 - Part 14: Implement Translations Settings Tests r=hjones!,#translations-reviewers!

Comment 16

[Erik Nordin [:nordzilla]]

Attachment: Bug 2002127 - Part 15: Use Button Pattern for ATL r=hjones!,#translations-reviewers!

This commit updates the Always Translate Languages
section of the Translations settings the moz-select
with button pattern, similar to the download section.

Comment 17

[Erik Nordin [:nordzilla]]

Attachment: Bug 2002127 - Part 16: Use Button Pattern for NTL r=hjones!,#translations-reviewers!

This commit updates the Never Translate Languages
section of the Translations settings the moz-select
with button pattern, similar to the download section.

Comment 18

[Erik Nordin [:nordzilla]]

Attachment: Bug 2002127 - Part 17: Update Ghost Button Usage r=hjones!,#translations-reviewers!

This commit updates the usage of ghost icon buttons in the Translations Settings
subpage to only be used in the case of showing a loading spinner, a warning icon,
or an error icon. If the button is intended to be clicked, whether enabled or disabled,
it will be shown as a non-ghost button.

Comment 19

[Erik Nordin [:nordzilla]]

Attachment: Bug 2002127 - Part 18: Move moz-selects to header slot r=hjones!,#translations-reviewers!

This commit moves the moz-select elements to the
header slot withing the Translations subpage, instead
of the actions slot. The arrow key navigation and tab
index focus was not working in the actions slot.

Comment 20

[Erik Nordin [:nordzilla]]

Attachment: Bug 2002127 - Part 19: Improve Language-Download States r=hjones!,#translations-reviewers!

This commit improves the logic around the various states
of downloaded languages, from the download-failed message
to the delete-downloaded-language confirmation.

This change ensures that only one confirmation state can
be shown at a time, opening another closes the previous,
and that any confirmation or failure states are cleaned
up on reload.

Comment 21

[Erik Nordin [:nordzilla]]

Attachment: Bug 2002127 - Part 20: Restructure Translations Settings Subpage r=hjones!

This commit restructures the elements of the Translations
Settings Subpage, so that each group is a proper setting-group
rather than a fieldset within the subpage. This was the original
intended pattern, but I got it wrong in the previous commits.

It's easier to fix it here rather than rebasing into this already
very large stack.

Comment 22

[Erik Nordin [:nordzilla]]

Attachment: Bug 2002127 - Part 01: Increase tr8ns default max-run-time in CI r=jmaher!

This commit increases the max runtime value for the tr8ns
tests on debug builds in CI from 1200 to 1500.

Comment 23

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/d5b8cf2b29db
https://hg.mozilla.org/integration/autoland/rev/ae7333072cf6
Part 01: Increase tr8ns default max-run-time in CI r=jmaher
https://github.com/mozilla-firefox/firefox/commit/203bfbfbf272
https://hg.mozilla.org/integration/autoland/rev/a87ff6b78b49
Part 02: Remove unused browser.translations.newSettingsUI code r=desktop-theme-reviewers,translations-reviewers,frontend-codestyle-reviewers,gregtatum,Itiel,hjones
https://github.com/mozilla-firefox/firefox/commit/a6bcf5518e5b
https://hg.mozilla.org/integration/autoland/rev/454ebdc9640c
Part 03: Support icons in subpage headers r=hjones
https://github.com/mozilla-firefox/firefox/commit/e0dcb037e3fd
https://hg.mozilla.org/integration/autoland/rev/3766199c4e3c
Part 04: Fix translations.svg in dark mode r=desktop-theme-reviewers,emilio
https://github.com/mozilla-firefox/firefox/commit/25796bd80fdf
https://hg.mozilla.org/integration/autoland/rev/ae7a536c9e24
Part 05: Implement Top-Level Translations Setting Group r=fluent-reviewers,bolsson,hjones
https://github.com/mozilla-firefox/firefox/commit/71227cdf20ed
https://hg.mozilla.org/integration/autoland/rev/967bc27ac8fc
Part 06: Implement "More Translation Settings" SubPage r=fluent-reviewers,bolsson,hjones
https://github.com/mozilla-firefox/firefox/commit/5b48f111a190
https://hg.mozilla.org/integration/autoland/rev/e778984f56f9
Part 07: Implement Speed up translation default state r=fluent-reviewers,bolsson,hjones
https://github.com/mozilla-firefox/firefox/commit/c98984eee222
https://hg.mozilla.org/integration/autoland/rev/2ee0980dc0ee
Part 08: Implement Automatic translation default state r=fluent-reviewers,bolsson,hjones
https://github.com/mozilla-firefox/firefox/commit/798f8febaf31
https://hg.mozilla.org/integration/autoland/rev/4424ce4a5ba5
Part 09: Implement Never translate sites default state r=fluent-reviewers,bolsson,hjones
https://github.com/mozilla-firefox/firefox/commit/a62db80e52a9
https://hg.mozilla.org/integration/autoland/rev/3960f2a026d7
Part 10: Implement Always Translate Languages Functionality r=hjones
https://github.com/mozilla-firefox/firefox/commit/74f09dc58c47
https://hg.mozilla.org/integration/autoland/rev/6d8da3adb114
Part 11: Implement Never Translate Languages Functionality r=hjones
https://github.com/mozilla-firefox/firefox/commit/4c25cbd6149c
https://hg.mozilla.org/integration/autoland/rev/a338435bc07f
Part 12: Implement Never Translate Sites Functionality r=hjones
https://github.com/mozilla-firefox/firefox/commit/07f707056f54
https://hg.mozilla.org/integration/autoland/rev/b02d219764cb
Part 13: Implement Download Languages Functionality r=fluent-reviewers,bolsson,hjones
https://github.com/mozilla-firefox/firefox/commit/add0e3b25791
https://hg.mozilla.org/integration/autoland/rev/a8c436abd31c
Part 14: Implement Translations Settings Tests r=translations-reviewers,hjones
https://github.com/mozilla-firefox/firefox/commit/19ce23f408bb
https://hg.mozilla.org/integration/autoland/rev/75424e0d5ec5
Part 15: Use Button Pattern for ATL r=translations-reviewers,fluent-reviewers,bolsson,gregtatum,hjones
https://github.com/mozilla-firefox/firefox/commit/fe9a7f0ec0e7
https://hg.mozilla.org/integration/autoland/rev/1e76f76f0111
Part 16: Use Button Pattern for NTL r=translations-reviewers,hjones
https://github.com/mozilla-firefox/firefox/commit/fe1d8d747881
https://hg.mozilla.org/integration/autoland/rev/8a5742d0476e
Part 17: Update Ghost Button Usage r=translations-reviewers,hjones
https://github.com/mozilla-firefox/firefox/commit/53700a63ae0f
https://hg.mozilla.org/integration/autoland/rev/c75d94391f4d
Part 18: Move moz-selects to header slot r=translations-reviewers,hjones
https://github.com/mozilla-firefox/firefox/commit/e034951ed416
https://hg.mozilla.org/integration/autoland/rev/bf3a7cbb69dc
Part 19: Improve Language-Download States r=translations-reviewers,desktop-theme-reviewers,hjones
https://github.com/mozilla-firefox/firefox/commit/c3ab936d8de2
https://hg.mozilla.org/integration/autoland/rev/f320e0bba747
Part 20: Restructure Translations Settings Subpage r=hjones

Comment 24

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/509ee60b49bc
https://hg.mozilla.org/integration/autoland/rev/2af936342967
Revert "Bug 2002127 - Part 20: Restructure Translations Settings Subpage r=hjones" for causing bc failures on browser_MLSuggest_integration.js

Comment 25

[Cristina Horotan [:chorotan]]

Backed out for causing bc failures on browser_MLSuggest_integration.js

Backout link

Push with failures

Failure log

Comment 26

[Erik Nordin [:nordzilla]]

I didn't realize that the ML test code was still depending on the translations test code for a few things.

I made a few changes to the way pending mock downloads are tracked that broke the ML test.

Now that I'm aware of it, I've rewritten it in a way that is compatible with both.

Try is looking green.

• https://treeherder.mozilla.org/jobs?repo=try&revision=028283985916d7b2457a857280e4e761b09e68e9

Going to reland once it gets closer to finished.

Comment 27

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/57801552452f
https://hg.mozilla.org/integration/autoland/rev/150e8eb147bb
Part 01: Increase tr8ns default max-run-time in CI r=jmaher
https://github.com/mozilla-firefox/firefox/commit/d5c2d6e66aa3
https://hg.mozilla.org/integration/autoland/rev/bf887c3292c4
Part 02: Remove unused browser.translations.newSettingsUI code r=desktop-theme-reviewers,translations-reviewers,frontend-codestyle-reviewers,gregtatum,Itiel,hjones
https://github.com/mozilla-firefox/firefox/commit/3617e8c62575
https://hg.mozilla.org/integration/autoland/rev/b12c76bcf384
Part 03: Support icons in subpage headers r=hjones
https://github.com/mozilla-firefox/firefox/commit/57ea016fbf50
https://hg.mozilla.org/integration/autoland/rev/363cd9c0f748
Part 04: Fix translations.svg in dark mode r=desktop-theme-reviewers,emilio
https://github.com/mozilla-firefox/firefox/commit/c4e82fad7103
https://hg.mozilla.org/integration/autoland/rev/6bef9829cf0f
Part 05: Implement Top-Level Translations Setting Group r=fluent-reviewers,bolsson,hjones
https://github.com/mozilla-firefox/firefox/commit/a32ade1b85b7
https://hg.mozilla.org/integration/autoland/rev/39822f3ec733
Part 06: Implement "More Translation Settings" SubPage r=fluent-reviewers,bolsson,hjones
https://github.com/mozilla-firefox/firefox/commit/e34d17857890
https://hg.mozilla.org/integration/autoland/rev/4b227f0de15b
Part 07: Implement Speed up translation default state r=fluent-reviewers,bolsson,hjones
https://github.com/mozilla-firefox/firefox/commit/0a7435d55fa3
https://hg.mozilla.org/integration/autoland/rev/c9d3c90abc5f
Part 08: Implement Automatic translation default state r=fluent-reviewers,bolsson,hjones
https://github.com/mozilla-firefox/firefox/commit/5a99bf38a776
https://hg.mozilla.org/integration/autoland/rev/ab821b50ab38
Part 09: Implement Never translate sites default state r=fluent-reviewers,bolsson,hjones
https://github.com/mozilla-firefox/firefox/commit/d9e4629dd40d
https://hg.mozilla.org/integration/autoland/rev/34217b6c74a7
Part 10: Implement Always Translate Languages Functionality r=hjones
https://github.com/mozilla-firefox/firefox/commit/4ab31c469663
https://hg.mozilla.org/integration/autoland/rev/19612ab3562c
Part 11: Implement Never Translate Languages Functionality r=hjones
https://github.com/mozilla-firefox/firefox/commit/742ed6d1c2d6
https://hg.mozilla.org/integration/autoland/rev/054e5d5e3a8d
Part 12: Implement Never Translate Sites Functionality r=hjones
https://github.com/mozilla-firefox/firefox/commit/64b849fa70e2
https://hg.mozilla.org/integration/autoland/rev/0a56d3c7024b
Part 13: Implement Download Languages Functionality r=fluent-reviewers,bolsson,hjones
https://github.com/mozilla-firefox/firefox/commit/85b9f6aa07b9
https://hg.mozilla.org/integration/autoland/rev/1ef4cb7588e6
Part 14: Implement Translations Settings Tests r=translations-reviewers,hjones
https://github.com/mozilla-firefox/firefox/commit/5ebdc38c6862
https://hg.mozilla.org/integration/autoland/rev/048f14adc865
Part 15: Use Button Pattern for ATL r=translations-reviewers,fluent-reviewers,bolsson,gregtatum,hjones
https://github.com/mozilla-firefox/firefox/commit/9ec4dc20d383
https://hg.mozilla.org/integration/autoland/rev/5f824be03b68
Part 16: Use Button Pattern for NTL r=translations-reviewers,hjones
https://github.com/mozilla-firefox/firefox/commit/e22c3ee7c9fa
https://hg.mozilla.org/integration/autoland/rev/e6754b283b66
Part 17: Update Ghost Button Usage r=translations-reviewers,hjones
https://github.com/mozilla-firefox/firefox/commit/2dc82c6195c3
https://hg.mozilla.org/integration/autoland/rev/8b01d67e55cb
Part 18: Move moz-selects to header slot r=translations-reviewers,hjones
https://github.com/mozilla-firefox/firefox/commit/1156edd12a22
https://hg.mozilla.org/integration/autoland/rev/0b877bf2a3ab
Part 19: Improve Language-Download States r=translations-reviewers,desktop-theme-reviewers,hjones
https://github.com/mozilla-firefox/firefox/commit/ebefbf620740
https://hg.mozilla.org/integration/autoland/rev/d05159700d36
Part 20: Restructure Translations Settings Subpage r=hjones

Comment 28

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/150e8eb147bb
https://hg.mozilla.org/mozilla-central/rev/bf887c3292c4
https://hg.mozilla.org/mozilla-central/rev/b12c76bcf384
https://hg.mozilla.org/mozilla-central/rev/363cd9c0f748
https://hg.mozilla.org/mozilla-central/rev/6bef9829cf0f
https://hg.mozilla.org/mozilla-central/rev/39822f3ec733
https://hg.mozilla.org/mozilla-central/rev/4b227f0de15b
https://hg.mozilla.org/mozilla-central/rev/c9d3c90abc5f
https://hg.mozilla.org/mozilla-central/rev/ab821b50ab38
https://hg.mozilla.org/mozilla-central/rev/34217b6c74a7
https://hg.mozilla.org/mozilla-central/rev/19612ab3562c
https://hg.mozilla.org/mozilla-central/rev/054e5d5e3a8d
https://hg.mozilla.org/mozilla-central/rev/0a56d3c7024b
https://hg.mozilla.org/mozilla-central/rev/1ef4cb7588e6
https://hg.mozilla.org/mozilla-central/rev/048f14adc865
https://hg.mozilla.org/mozilla-central/rev/5f824be03b68
https://hg.mozilla.org/mozilla-central/rev/e6754b283b66
https://hg.mozilla.org/mozilla-central/rev/8b01d67e55cb
https://hg.mozilla.org/mozilla-central/rev/0b877bf2a3ab
https://hg.mozilla.org/mozilla-central/rev/d05159700d36