Bug 1453878 - Follow-up to fluent-dom to 0.2.0 landing. r=me draft
authorZibi Braniecki <zbraniecki@mozilla.com>
Thu, 12 Apr 2018 22:20:05 -0700
changeset 781555 3802f022fff201d5f8fceaa022b45fbec90c4fe4
parent 781242 173dcddc18b3b2f31023128c9bdbd70842c79485
push id106337
push userbmo:gandalf@aviary.pl
push dateFri, 13 Apr 2018 05:20:38 +0000
reviewersme
bugs1453878
milestone61.0a1
Bug 1453878 - Follow-up to fluent-dom to 0.2.0 landing. r=me MozReview-Commit-ID: D5jgJWzrDlX
browser/components/preferences/in-content/tests/browser_fluent.js
intl/l10n/DOMLocalization.jsm
intl/l10n/Localization.jsm
intl/l10n/test/dom/test_domloc_overlay.html
intl/l10n/test/dom/test_domloc_overlay_missing_children.html
intl/l10n/test/dom/test_domloc_overlay_repeated.html
intl/l10n/test/dom/test_domloc_repeated_l10nid.html
--- a/browser/components/preferences/in-content/tests/browser_fluent.js
+++ b/browser/components/preferences/in-content/tests/browser_fluent.js
@@ -34,15 +34,15 @@ add_task(async function() {
     ["performance-default-content-process-count", { num: defaultProcessCount }]
   ]);
 
   let elem = doc.querySelector(
     `#contentProcessCount > menupopup > menuitem[value="${defaultProcessCount}"]`);
 
   Assert.deepEqual(msg, {
     value: null,
-    attrs: [
+    attributes: [
       {name: "label", value: elem.getAttribute("label")}
     ]
   });
 
   BrowserTestUtils.removeTab(gBrowser.selectedTab);
 });
--- a/intl/l10n/DOMLocalization.jsm
+++ b/intl/l10n/DOMLocalization.jsm
@@ -345,22 +345,22 @@ function shallowPopulateUsing(fromElemen
  * @returns boolean
  * @private
  */
 function sanitizeTranslationForNodeLocalize(l10nItem, translation) {
   if (reOverlay.test(translation.value)) {
     return false;
   }
 
-  if (translation.attrs) {
+  if (translation.attributes) {
     const explicitlyAllowed = l10nItem.l10nAttrs === null ? null :
       l10nItem.l10nAttrs.split(",").map(i => i.trim());
-    for (const [j, {name}] of translation.attrs.entries()) {
+    for (const [j, {name}] of translation.attributes.entries()) {
       if (!isAttrNameLocalizable(name, l10nItem, explicitlyAllowed)) {
-        translation.attrs.splice(j, 1);
+        translation.attributes.splice(j, 1);
       }
     }
   }
   return true;
 }
 
 const L10NID_ATTR_NAME = "data-l10n-id";
 const L10NARGS_ATTR_NAME = "data-l10n-args";
@@ -631,16 +631,18 @@ class DOMLocalization extends Localizati
 
           const hasOnlyText =
             sanitizeTranslationForNodeLocalize(l10nItems[i], translation);
           if (!hasOnlyText) {
             // Removing from translations to make Node.localize skip it.
             // We will translate it below using JS DOM Overlays.
             overlayTranslations[i] = translations[i];
             translations[i] = undefined;
+          } else {
+            translations[i].attrs = translations[i].attributes;
           }
         }
 
         // We pause translation observing here because Node.localize
         // will translate the whole DOM next, using the `translations`.
         //
         // The observer will be resumed after DOM Overlays are localized
         // in the next microtask.
--- a/intl/l10n/Localization.jsm
+++ b/intl/l10n/Localization.jsm
@@ -322,25 +322,25 @@ function valueFromContext(ctx, errors, i
  * @returns {Object}
  * @private
  */
 function messageFromContext(ctx, errors, id, args) {
   const msg = ctx.getMessage(id);
 
   const formatted = {
     value: ctx.format(msg, args, errors),
-    attrs: null,
+    attributes: null,
   };
 
   if (msg.attrs) {
-    formatted.attrs = [];
-    for (const name in msg.attrs) {
-      const value = ctx.format(msg.attrs[name], args, errors);
+    formatted.attributes = [];
+    for (const [name, attr] of Object.entries(msg.attrs)) {
+      const value = ctx.format(attr, args, errors);
       if (value !== null) {
-        formatted.attrs.push({ name, value });
+        formatted.attributes.push({name, value});
       }
     }
   }
 
   return formatted;
 }
 
 /**
--- a/intl/l10n/test/dom/test_domloc_overlay.html
+++ b/intl/l10n/test/dom/test_domloc_overlay.html
@@ -10,17 +10,17 @@
   const { DOMLocalization } =
     ChromeUtils.import("resource://gre/modules/DOMLocalization.jsm", {});
   const { MessageContext } =
     ChromeUtils.import("resource://gre/modules/MessageContext.jsm", {});
 
   async function* mockGenerateMessages(locales, resourceIds) {
     const mc = new MessageContext(locales);
     mc.addMessages("title = <strong>Hello</strong> World");
-    mc.addMessages("title2 = This is <a>a link</a>!");
+    mc.addMessages(`title2 = This is <a data-l10n-name="link">a link</a>!`);
     yield mc;
   }
 
   window.onload = async function() {
     SimpleTest.waitForExplicitFinish();
 
     const domLoc = new DOMLocalization(
       window,
@@ -45,12 +45,12 @@
 
     a.click();
   };
   </script>
 </head>
 <body>
   <p data-l10n-id="title" />
   <p data-l10n-id="title2">
-    <a href="http://www.mozilla.org"></a>
+    <a href="http://www.mozilla.org" data-l10n-name="link"></a>
   </p>
 </body>
 </html>
--- a/intl/l10n/test/dom/test_domloc_overlay_missing_children.html
+++ b/intl/l10n/test/dom/test_domloc_overlay_missing_children.html
@@ -9,17 +9,17 @@
   "use strict";
   const { DOMLocalization } =
     ChromeUtils.import("resource://gre/modules/DOMLocalization.jsm", {});
   const { MessageContext } =
     ChromeUtils.import("resource://gre/modules/MessageContext.jsm", {});
 
   async function* mockGenerateMessages(locales, resourceIds) {
     const mc = new MessageContext(locales);
-    mc.addMessages("title = Visit <a>Mozilla</a> or <a>Firefox</a> website!");
+    mc.addMessages(`title = Visit <a data-l10n-name="mozilla-link">Mozilla</a> or <a data-l10n-name="firefox-link">Firefox</a> website!`);
     yield mc;
   }
 
   window.onload = async function() {
     SimpleTest.waitForExplicitFinish();
 
     const domLoc = new DOMLocalization(
       window,
@@ -41,14 +41,14 @@
     is(linkList.length, 2, "There should be exactly two links in the result.");
 
     SimpleTest.finish();
   };
   </script>
 </head>
 <body>
   <p data-l10n-id="title">
-    <a href="http://www.mozilla.org"></a>
-    <a href="http://www.firefox.com"></a>
-    <a href="http://www.w3.org"></a>
+    <a href="http://www.mozilla.org" data-l10n-name="mozilla-link"></a>
+    <a href="http://www.firefox.com" data-l10n-name="firefox-link"></a>
+    <a href="http://www.w3.org" data-l10n-name="w3-link"></a>
   </p>
 </body>
 </html>
--- a/intl/l10n/test/dom/test_domloc_overlay_repeated.html
+++ b/intl/l10n/test/dom/test_domloc_overlay_repeated.html
@@ -9,17 +9,17 @@
   "use strict";
   const { DOMLocalization } =
     ChromeUtils.import("resource://gre/modules/DOMLocalization.jsm", {});
   const { MessageContext } =
     ChromeUtils.import("resource://gre/modules/MessageContext.jsm", {});
 
   async function* mockGenerateMessages(locales, resourceIds) {
     const mc = new MessageContext(locales);
-    mc.addMessages("title = Visit <a>Mozilla</a> or <a>Firefox</a> website!");
+    mc.addMessages(`title = Visit <a data-l10n-name="mozilla-link">Mozilla</a> or <a data-l10n-name="firefox-link">Firefox</a> website!`);
     yield mc;
   }
 
   window.onload = async function() {
     SimpleTest.waitForExplicitFinish();
 
     const domLoc = new DOMLocalization(
       window,
@@ -39,13 +39,13 @@
     is(linkList[1].textContent, "Firefox");
 
     SimpleTest.finish();
   };
   </script>
 </head>
 <body>
   <p data-l10n-id="title">
-    <a href="http://www.mozilla.org"></a>
-    <a href="http://www.firefox.com"></a>
+    <a href="http://www.mozilla.org" data-l10n-name="mozilla-link"></a>
+    <a href="http://www.firefox.com" data-l10n-name="firefox-link"></a>
   </p>
 </body>
 </html>
--- a/intl/l10n/test/dom/test_domloc_repeated_l10nid.html
+++ b/intl/l10n/test/dom/test_domloc_repeated_l10nid.html
@@ -12,17 +12,17 @@
   const { MessageContext } =
     ChromeUtils.import("resource://gre/modules/MessageContext.jsm", {});
 
   async function* mockGenerateMessages(locales, resourceIds) {
     const mc = new MessageContext(locales);
     mc.addMessages(`
 key1 = Translation For Key 1
 
-key2 = Visit <a>this link<a/>.
+key2 = Visit <a data-l10n-name="link">this link<a/>.
     `);
     yield mc;
   }
 
   SimpleTest.waitForExplicitFinish();
   addLoadEvent(async () => {
     const domLoc = new DOMLocalization(
       window,
@@ -48,16 +48,16 @@ key2 = Visit <a>this link<a/>.
   });
   </script>
 </head>
 <body>
   <h1 id="elem1" data-l10n-id="key1"></h1>
   <h2 id="elem2" data-l10n-id="key1"></h2>
 
   <p id="elem3" data-l10n-id="key2">
-    <a href="http://www.mozilla.org"></a>
+    <a href="http://www.mozilla.org" data-l10n-name="link"></a>
   </p>
 
   <p id="elem4" data-l10n-id="key2">
-    <a href="http://www.firefox.com"></a>
+    <a href="http://www.firefox.com" data-l10n-name="link"></a>
   </p>
 </body>
 </html>