Bug 1427954 - Move autofill edit dialog l10n to mutation observers. r=sfoster

MozReview-Commit-ID: 5jSj0xPBTQj

--HG--
extra : rebase_source : c673bee489ae495b3842a4bac71b9246175659b8

browser/extensions/formautofill/FormAutofillUtils.jsm

@@ -827,25 +827,43 @@ this.FormAutofillUtils = {
     };
   },
 
+  /**
+   * Localize "data-localization" or "data-localization-region" attributes.
+   * @param {Element} element
+   * @param {string} attributeName
+   */
+  localizeAttributeForElement(element, attributeName) {
+    let bundle = null;
+    switch (attributeName) {
+      case "data-localization": {
+        bundle = this.stringBundle;
+        break;
+      }
+      case "data-localization-region": {
+        bundle = this.regionsBundle;
+        break;
+      }
+      default:
+        throw new Error("Unexpected attributeName");
+    }
+
+    element.textContent = bundle.GetStringFromName(element.getAttribute(attributeName));
+    element.removeAttribute(attributeName);
+  },
+
   /**
    * Localize elements with "data-localization" or "data-localization-region" attributes.
-   * @param   {DOMElement} root
+   * @param {Element} root
    */
   localizeMarkup(root) {
     let elements = root.querySelectorAll("[data-localization]");
     for (let element of elements) {
-      element.textContent = this.stringBundle.GetStringFromName(
-        element.getAttribute("data-localization")
-      );
-      element.removeAttribute("data-localization");
+      this.localizeAttributeForElement(element, "data-localization");
     }
 
-    let regionElements = root.querySelectorAll("[data-localization-region]");
-    for (let element of regionElements) {
-      element.textContent = this.regionsBundle.GetStringFromName(
-        element.getAttribute("data-localization-region")
-      );
-      element.removeAttribute("data-localization-region");
+    elements = root.querySelectorAll("[data-localization-region]");
+    for (let element of elements) {
+      this.localizeAttributeForElement(element, "data-localization-region");
     }
   },
 };

browser/extensions/formautofill/content/autofillEditForms.js

@@ -103,7 +103,6 @@ class EditAddress extends EditAutofillForm {
     const {addressLevel1Label, postalCodeLabel, fieldsOrder} = FormAutofillUtils.getFormFormat(country);
     this._elements.addressLevel1Label.dataset.localization = addressLevel1Label;
     this._elements.postalCodeLabel.dataset.localization = postalCodeLabel;
-    FormAutofillUtils.localizeMarkup(document);
     this.arrangeFields(fieldsOrder);
   }
 
@@ -147,7 +146,6 @@ class EditAddress extends EditAutofillForm {
       fragment.appendChild(option);
     }
     this._elements.country.appendChild(fragment);
-    FormAutofillUtils.localizeMarkup(this._elements.country);
   }
 
   handleChange(event) {

browser/extensions/formautofill/content/editAddress.xhtml

@@ -12,6 +12,7 @@
   <link rel="stylesheet" href="chrome://formautofill-shared/skin/editDialog.css"/>
   <link rel="stylesheet" href="chrome://formautofill-shared/skin/editAddress.css"/>
   <link rel="stylesheet" href="chrome://formautofill/skin/editDialog.css"/>
+  <script src="chrome://formautofill/content/l10n.js"></script>
   <script src="chrome://formautofill/content/editDialog.js"></script>
   <script src="chrome://formautofill/content/autofillEditForms.js"></script>
 </head>

browser/extensions/formautofill/content/editCreditCard.xhtml

@@ -12,6 +12,7 @@
   <link rel="stylesheet" href="chrome://formautofill-shared/skin/editDialog.css"/>
   <link rel="stylesheet" href="chrome://formautofill-shared/skin/editCreditCard.css"/>
   <link rel="stylesheet" href="chrome://formautofill/skin/editDialog.css"/>
+  <script src="chrome://formautofill/content/l10n.js"></script>
   <script src="chrome://formautofill/content/editDialog.js"></script>
   <script src="chrome://formautofill/content/autofillEditForms.js"></script>
 </head>

browser/extensions/formautofill/content/editDialog.js

@@ -168,7 +168,6 @@ class EditAddressDialog extends AutofillEditDialog {
     if (this._record) {
       this._elements.title.dataset.localization = "editAddressTitle";
     }
-    FormAutofillUtils.localizeMarkup(document);
   }
 
   async handleSubmit() {
@@ -186,7 +185,6 @@ class EditCreditCardDialog extends AutofillEditDialog {
     if (this._record) {
       this._elements.title.dataset.localization = "editCreditCardTitle";
     }
-    FormAutofillUtils.localizeMarkup(document);
   }
 
   /**

browser/extensions/formautofill/content/l10n.js

@@ -0,0 +1,36 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+/**
+ * This file will be replaced by Fluent but it's a middle ground so we can share
+ * the edit dialog code with the unprivileged PaymentRequest dialog before the
+ * Fluent conversion
+ */
+
+ChromeUtils.import("resource://formautofill/FormAutofillUtils.jsm");
+
+const L10N_ATTRIBUTES = ["data-localization", "data-localization-region"];
+
+let mutationObserver = new MutationObserver(function onMutation(mutations) {
+  for (let mutation of mutations) {
+    if (!mutation.target.hasAttribute(mutation.attributeName)) {
+      // The attribute was removed in the meantime.
+      continue;
+    }
+    FormAutofillUtils.localizeAttributeForElement(mutation.target, mutation.attributeName);
+  }
+});
+
+document.addEventListener("DOMContentLoaded", function onDCL() {
+  FormAutofillUtils.localizeMarkup(document);
+  mutationObserver.observe(document, {
+    attributes: true,
+    attributeFilter: L10N_ATTRIBUTES,
+    subtree: true,
+  });
+}, {
+  once: true,
+});

browser/extensions/formautofill/test/browser/browser_editAddressDialog.js

@@ -111,11 +111,15 @@ add_task(async function test_editAddress() {
 });
 
 add_task(async function test_saveAddressCA() {
-  await testDialog(EDIT_ADDRESS_DIALOG_URL, win => {
+  await testDialog(EDIT_ADDRESS_DIALOG_URL, async win => {
     let doc = win.document;
     // Change country to verify labels
     doc.querySelector("#country").focus();
     EventUtils.synthesizeKey("Canada", {}, win);
+
+    await TestUtils.waitForCondition(() => {
+      return doc.querySelector("#address-level1-container > span").textContent == "Province";
+    }, "Wait for the mutation observer to change the labels");
     is(doc.querySelector("#address-level1-container > span").textContent, "Province",
                          "CA address-level1 label should be 'Province'");
     is(doc.querySelector("#postal-code-container > span").textContent, "Postal Code",
@@ -158,11 +162,14 @@ add_task(async function test_saveAddressCA() {
 });
 
 add_task(async function test_saveAddressDE() {
-  await testDialog(EDIT_ADDRESS_DIALOG_URL, win => {
+  await testDialog(EDIT_ADDRESS_DIALOG_URL, async win => {
     let doc = win.document;
     // Change country to verify labels
     doc.querySelector("#country").focus();
     EventUtils.synthesizeKey("Germany", {}, win);
+    await TestUtils.waitForCondition(() => {
+      return doc.querySelector("#postal-code-container > span").textContent == "Postal Code";
+    }, "Wait for the mutation observer to change the labels");
     is(doc.querySelector("#postal-code-container > span").textContent, "Postal Code",
                          "DE postal-code label should be 'Postal Code'");
     is(doc.querySelector("#address-level1-container").style.display, "none",

browser/extensions/formautofill/test/browser/head.js

@@ -339,10 +339,10 @@ async function waitForFocusAndFormReady(win) {
 }
 
 async function testDialog(url, testFn, arg) {
-  let win = window.openDialog(url, null, null, arg);
+  let win = window.openDialog(url, null, "width=600,height=600", arg);
   await waitForFocusAndFormReady(win);
   let unloadPromise = BrowserTestUtils.waitForEvent(win, "unload");
-  testFn(win);
+  await testFn(win);
   return unloadPromise;
 }