Our UI Widgets often set data-l10n-attrs so that the Lit properties can be set from Fluent. It would be nice to streamline this a little so that it's a bit easier to write, easier to tell which properties are Fluent-able, and to ensure that the element gets translated properly when it gets auto-imported (there appears to be a potential bug where Fluent translates the element before the attribute is set on initial auto-import).

The proposed API would be to add fluent: true to the static properties definition within the component and have MozLitElement automatically generate the data-l10n-attrs based on this in the connectedCallback and then translate the element if necessary.

See also bug 1848371 which is another potential solution, however that would move the config from the custom element definition to L10nOverlays.cpp which may not be as discoverable.

Depends on D213328

Backed out for causing mochitest failures on test_moz_message_bar.html and on browser_a11y_sidebar.js

• Backout link
• Push with failures
• Failure Log for sidebar
• Failure Log for message bar:

[task 2024-06-14T02:56:51.190Z] 02:56:51     INFO - TEST-PASS | toolkit/content/tests/widgets/test_moz_message_bar.html | Info icon is showing up. 
[task 2024-06-14T02:56:51.191Z] 02:56:51     INFO - Buffered messages finished
[task 2024-06-14T02:56:51.192Z] 02:56:51     INFO - TEST-UNEXPECTED-FAIL | toolkit/content/tests/widgets/test_moz_message_bar.html | Alternate text for the info icon is present. - got "", expected "Info"
[task 2024-06-14T02:56:51.192Z] 02:56:51     INFO - SimpleTest.is@chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:509:14
[task 2024-06-14T02:56:51.192Z] 02:56:51     INFO - test_component_declaration@chrome://mochitests/content/chrome/toolkit/content/tests/widgets/test_moz_message_bar.html:33:9
[task 2024-06-14T02:56:51.193Z] 02:56:51     INFO - add_task/nextTick/<@chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:2189:34
[task 2024-06-14T02:56:51.193Z] 02:56:51     INFO - nextTick@chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:2233:11
[task 2024-06-14T02:56:51.194Z] 02:56:51     INFO - setTimeout handler*SimpleTest_setTimeoutShim@chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:922:41
[task 2024-06-14T02:56:51.194Z] 02:56:51     INFO - add_task@chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:2137:17
[task 2024-06-14T02:56:51.194Z] 02:56:51     INFO - @chrome://mochitests/content/chrome/toolkit/content/tests/widgets/test_moz_message_bar.html:24:13
[task 2024-06-14T02:56:51.196Z] 02:56:51     INFO - TEST-PASS | toolkit/content/tests/widgets/test_moz_message_bar.html | Heading is showing up. 

Backed out for causing bc failures @ browser_a11y_sidebar.js

Backout link: https://hg.mozilla.org/integration/autoland/rev/f32af8e7b2d8e50f7a67462367ec346dc12817a0

Push with failures

Failure log -> TEST-UNEXPECTED-FAIL | browser/components/sidebar/tests/browser/browser_a11y_sidebar.js | Uncaught exception in test bound test_menu_items_labeled