Bug 1437427 - Workaround promise/microtask bug with a callback in Fluent runtime. r=Pike

Due to bug 1193394 triggering a Promise in the event loop causes the Promise to be
resolved after the event loop microtask.
In this particular case the result is that the document localization is triggered
right before initial layout, but is executed much later, only after DOMContentLoaded.

This in turn causes an additional reflow and frame creation.

In order to workaround this, we're adding a callback method that is executed synchronously
after the event resolves which puts back the initial document localization to happen
right before layout.

MozReview-Commit-ID: HXuMJPwS24N

--HG--
extra : rebase_source : 7d5065658e9873dde2d61964dcb22e209cc6d4f6

intl/l10n/l10n.js

@@ -6,14 +6,21 @@
    * Polyfill for document.ready polyfill.
    * See: https://github.com/whatwg/html/issues/127 for details.
    *
+   * XXX: The callback is a temporary workaround for bug 1193394. Once Promises in Gecko
+   *      start beeing a microtask and stop pushing translation post-layout, we can
+   *      remove it and start using the returned Promise again.
+   *
+   * @param {Function} callback - function to be called when the document is ready.
    * @returns {Promise}
    */
-  function documentReady() {
+  function documentReady(callback) {
     if (document.contentType === 'application/vnd.mozilla.xul+xml') {
       // XUL
       return new Promise(
         resolve => document.addEventListener(
-          'MozBeforeInitialXULLayout', resolve, { once: true }
+          'MozBeforeInitialXULLayout', () => {
+            resolve(callback());
+          }, { once: true }
         )
       );
     }
@@ -21,11 +28,13 @@
     // HTML
     const rs = document.readyState;
     if (rs === 'interactive' || rs === 'completed') {
-      return Promise.resolve();
+      return Promise.resolve(callback());
     }
     return new Promise(
       resolve => document.addEventListener(
-        'readystatechange', resolve, { once: true }
+        'readystatechange', () => {
+          resolve(callback());
+        }, { once: true }
       )
     );
   }
@@ -49,7 +58,7 @@
   // trigger first context to be fetched eagerly
   document.l10n.ctxs.touchNext();
 
-  document.l10n.ready = documentReady().then(() => {
+  document.l10n.ready = documentReady(() => {
     document.l10n.registerObservers();
     window.addEventListener('unload', () => {
       document.l10n.unregisterObservers();