Update FluentDOM classes to work with XPIDL (#245)

* Update FluentDOM classes to work with XPIDL

* fix tests

* Feedback updates

* Another update

Author: zbraniecki

fluent-dom/src/dom_localization.js

@@ -16,13 +16,12 @@ const L10N_ELEMENT_QUERY = `[${L10NID_ATTR_NAME}]`;
  */
 export default class DOMLocalization extends Localization {
   /**
-   * @param {Window}           windowElement
    * @param {Array<String>}    resourceIds      - List of resource IDs
    * @param {Function}         generateMessages - Function that returns a
    *                                              generator over MessageContexts
    * @returns {DOMLocalization}
    */
-  constructor(windowElement, resourceIds, generateMessages) {
+  constructor(resourceIds, generateMessages) {
     super(resourceIds, generateMessages);
 
     // A Set of DOM trees observed by the `MutationObserver`.
@@ -31,10 +30,8 @@ export default class DOMLocalization extends Localization {
     this.pendingrAF = null;
     // list of elements pending for translation.
     this.pendingElements = new Set();
-    this.windowElement = windowElement;
-    this.mutationObserver = new windowElement.MutationObserver(
-      mutations => this.translateMutations(mutations)
-    );
+    this.windowElement = null;
+    this.mutationObserver = null;
 
     this.observerConfig = {
       attribute: true,
@@ -132,6 +129,19 @@ export default class DOMLocalization extends Localization {
       }
     }
 
+    if (this.windowElement) {
+      if (this.windowElement !== newRoot.ownerGlobal) {
+        throw new Error(`Cannot connect a root:
+          DOMLocalization already has a root from a different window.`);
+      }
+    } else {
+      this.windowElement = newRoot.ownerGlobal;
+      this.mutationObserver = new this.windowElement.MutationObserver(
+        mutations => this.translateMutations(mutations)
+      );
+    }
+
+
     this.roots.add(newRoot);
     this.mutationObserver.observe(newRoot, this.observerConfig);
   }
@@ -150,11 +160,20 @@ export default class DOMLocalization extends Localization {
    */
   disconnectRoot(root) {
     this.roots.delete(root);
-    // Pause and resume the mutation observer to stop observing `root`.
+    // Pause the mutation observer to stop observing `root`.
     this.pauseObserving();
-    this.resumeObserving();
 
-    return this.roots.size === 0;
+    if (this.roots.size === 0) {
+      this.mutationObserver = null;
+      this.windowElement = null;
+      this.pendingrAF = null;
+      this.pendingElements.clear();
+      return true;
+    }
+
+    // Resume observing all other roots.
+    this.resumeObserving();
+    return false;
   }
 
   /**
@@ -175,6 +194,10 @@ export default class DOMLocalization extends Localization {
    * @private
    */
   pauseObserving() {
+    if (!this.mutationObserver) {
+      return;
+    }
+
     this.translateMutations(this.mutationObserver.takeRecords());
     this.mutationObserver.disconnect();
   }
@@ -185,6 +208,10 @@ export default class DOMLocalization extends Localization {
    * @private
    */
   resumeObserving() {
+    if (!this.mutationObserver) {
+      return;
+    }
+
     for (const root of this.roots) {
       this.mutationObserver.observe(root, this.observerConfig);
     }

fluent-dom/src/localization.js

@@ -17,7 +17,7 @@ export default class Localization {
    *
    * @returns {Localization}
    */
-  constructor(resourceIds, generateMessages) {
+  constructor(resourceIds = [], generateMessages) {
     this.resourceIds = resourceIds;
     this.generateMessages = generateMessages;
     this.ctxs =
@@ -27,11 +27,13 @@ export default class Localization {
   addResourceIds(resourceIds) {
     this.resourceIds.push(...resourceIds);
     this.onChange();
+    return this.resourceIds.length;
   }
 
   removeResourceIds(resourceIds) {
     this.resourceIds = this.resourceIds.filter(r => !resourceIds.includes(r));
     this.onChange();
+    return this.resourceIds.length;
   }
 
   /**
@@ -154,6 +156,7 @@ export default class Localization {
   onChange() {
     this.ctxs =
       new CachedAsyncIterable(this.generateMessages(this.resourceIds));
+    this.ctxs.touchNext(2);
   }
 }
 

fluent-dom/test/dom_localization_test.js

@@ -8,16 +8,9 @@ async function* mockGenerateMessages(resourceIds) {
   yield mc;
 }
 
-const mockWindow = {
-  MutationObserver: class MutationObserver {
-    takeRecords() {return new Set();}
-    disconnect() {}
-  }
-};
-
 suite("translateFragment", function() {
   test("translates a node", async function() {
-    const domLoc = new DOMLocalization(mockWindow, ["test.ftl"], mockGenerateMessages);
+    const domLoc = new DOMLocalization(["test.ftl"], mockGenerateMessages);
 
     const frag = document.createDocumentFragment();
     const elem = document.createElement("p");
@@ -30,7 +23,7 @@ suite("translateFragment", function() {
   });
 
   test("does not inject content into a node with missing translation", async function() {
-    const domLoc = new DOMLocalization(mockWindow, ["test.ftl"], mockGenerateMessages);
+    const domLoc = new DOMLocalization(["test.ftl"], mockGenerateMessages);
 
     const frag = document.createDocumentFragment();
     const elem = document.createElement("p");