1520659 - Expose timing of localization completion

Status: RESOLVED DUPLICATE of bug 1819664

(Core :: Internationalization, enhancement, P3)

Description

[Tim Guan-tin Chien [:timdream] (please needinfo)]

There are at least two use cases (bug 1518786 and bug 1520350) where we would like to measure the size of the newly inserted DOM. Yet the size of the content would depend on its localization string. It would be great if there is a promise or something that resolves when the newly inserted element (or better, the newly inserted DOM with the entire subtree included) is localized (and with their layout ready).

Comment 1

[Zibi Braniecki [:zbraniecki][:gandalf]]

This will likely have to wait for the C++ migration because doing it in JS would be kind of quirky.

For now, the workaround for cases where you need to ensure l10n is completed is:

await document.l10n.translateElements([elem1, elem2]);
// the translation has been applied

Since bug 1518786 landed, in such case any previous translation will be removed from pendingElements.

Comment 2

[Axel Hecht [:Pike]]

In the locale-switching scenario, would we want to get a notification again? I.e., should this rather be an event than a one-off promise?

Comment 3

[Tim Guan-tin Chien [:timdream] (please needinfo)]

The two use cases are about measuring the dimensions of the newly inserted DOM. They don't need a notification again.

That said, I can see the possibility where caller gets confused. I wonder if this can be prevented with better naming.

Comment 4

[Zibi Braniecki [:zbraniecki][:gandalf]]

In cases we encountered so far, the user wants to wait with some layout/sizing/painting work until translation is displayed.

That would indicate that they need a one-time promise, not an event, but I may be wrong. Event would be easier, but also more costly to handle:

await document.l10n.setAttributesAndWait(elem1, id);
getSizeAndShowWindow();

vs

let promise = new Promise((resolve) => {
  document.addEventListener("pending-l10n-applied", resolve, {once: true});
});
document.l10n.setAttributes(elem1, id);
await promise;
getSizeAndShowWindow();

also, this can still make us miss if the requestAnimationFrame is scheduled right as this code gets executed, but the attribute changed get collected by MutationObserver only after the current rAF gets fired, which means that this element gets added to pendingElements and localized only in the next pending-l10n-applied :/

Comment 5

[Ed Lee :Mardak]

During development/testing of bug 1710955, we ran into some sizing issues with some locales as we were using l10n.setAttributes then incorrectly resolving a promise for sizing the dialog after await l10n.ready + requestAnimationFrame, which seemed to have been sufficient before. We ended up using await l10n.translateElements to correctly size. Unclear if it was the mix of new untranslated strings that resulted in the timing difference.

Comment 6

[Zibi Braniecki [:zbraniecki][:gandalf]]

This has been fixed in bug 1819664