Bug 1294186 - Create localization helper for markup using data-localization attributes;r=bgrins

Create a helper designed to localize markup containing specific localization atttributes
(see the jsdoc in l10n.js)

MozReview-Commit-ID: 4ThyI1DaLQS

--HG--
extra : rebase_source : 3cb6620964c0dc27a348d4e85f93d437c2ad5d08

devtools/shared/l10n.js

@@ -114,6 +114,63 @@ LocalizationHelper.prototype = {
   }
 };
 
+function getPropertiesForNode(node) {
+  let bundleEl = node.closest("[data-localization-bundle]");
+  if (!bundleEl) {
+    return null;
+  }
+
+  let propertiesUrl = bundleEl.getAttribute("data-localization-bundle");
+  return getProperties(propertiesUrl);
+}
+
+/**
+ * Translate existing markup annotated with data-localization attributes.
+ *
+ * How to use data-localization in markup:
+ *
+ *   <div data-localization="content=myContent;title=myTitle"/>
+ *
+ * The data-localization attribute identifies an element as being localizable.
+ * The content of the attribute is semi-colon separated list of descriptors.
+ * - "title=myTitle" means the "title" attribute should be replaced with the localized
+ *   string corresponding to the key "myTitle".
+ * - "content=myContent" means the text content of the node should be replaced by the
+ *   string corresponding to "myContent"
+ *
+ * How to define the localization bundle in markup:
+ *
+ *   <div data-localization-bundle="url/to/my.properties">
+ *     [...]
+ *       <div data-localization="content=myContent;title=myTitle"/>
+ *
+ * Set the data-localization-bundle on an ancestor of the nodes that should be localized.
+ *
+ * @param {Element} root
+ *        The root node to use for the localization
+ */
+function localizeMarkup(root) {
+  let elements = root.querySelectorAll("[data-localization]");
+  for (let element of elements) {
+    let properties = getPropertiesForNode(element);
+    if (!properties) {
+      continue;
+    }
+
+    let attributes = element.getAttribute("data-localization").split(";");
+    for (let attribute of attributes) {
+      let [name, value] = attribute.trim().split("=");
+      if (name === "content") {
+        element.textContent = properties[value];
+      } else {
+        element.setAttribute(name, properties[value]);
+      }
+    }
+
+    element.removeAttribute("data-localization");
+  }
+}
+
 const sharedL10N = new LocalizationHelper("devtools-shared/locale/shared.properties");
 const ELLIPSIS = sharedL10N.getStr("ellipsis");
 
@@ -151,5 +208,6 @@ function MultiLocalizationHelper(...stringBundleNames) {
 }
 
 exports.LocalizationHelper = LocalizationHelper;
+exports.localizeMarkup = localizeMarkup;
 exports.MultiLocalizationHelper = MultiLocalizationHelper;
 exports.ELLIPSIS = ELLIPSIS;

devtools/shared/tests/browser/browser.ini

@@ -5,3 +5,4 @@ support-files =
   ../../../server/tests/browser/head.js
 
 [browser_async_storage.js]
+[browser_l10n_localizeMarkup.js]

devtools/shared/tests/browser/browser_l10n_localizeMarkup.js

@@ -0,0 +1,54 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the markup localization works properly.
+
+const { localizeMarkup, LocalizationHelper } = require("devtools/shared/l10n");
+
+add_task(function* () {
+  info("Check that the strings used for this test are still valid");
+  let INSPECTOR_L10N = new LocalizationHelper("devtools/locale/inspector.properties");
+  let TOOLBOX_L10N = new LocalizationHelper("devtools/locale/toolbox.properties");
+  let str1 = INSPECTOR_L10N.getStr("inspector.label");
+  let str2 = INSPECTOR_L10N.getStr("inspector.commandkey");
+  let str3 = TOOLBOX_L10N.getStr("toolbox.defaultTitle");
+  ok(str1 && str2 && str3, "If this failed, strings should be updated in the test");
+
+  info("Create the test markup");
+  let div = document.createElement("div");
+  div.innerHTML =
+  `<div data-localization-bundle="devtools/locale/inspector.properties">
+     <div id="d0" data-localization="content=inspector.someInvalidKey"></div>
+     <div id="d1" data-localization="content=inspector.label">Text will disappear</div>
+     <div id="d2" data-localization="content=inspector.label;title=inspector.commandkey">
+     </div>
+     <!-- keep the following data-localization on two separate lines -->
+     <div id="d3" data-localization="content=inspector.label;
+                                     title=inspector.commandkey"></div>
+     <div id="d4" data-localization="aria-label=inspector.label">Some content</div>
+     <div data-localization-bundle="devtools/locale/toolbox.properties">
+       <div id="d5" data-localization="content=toolbox.defaultTitle"></div>
+     </div>
+   </div>
+  `;
+
+  info("Use localization helper to localize the test markup");
+  localizeMarkup(div);
+
+  let div1 = div.querySelector("#d1");
+  let div2 = div.querySelector("#d2");
+  let div3 = div.querySelector("#d3");
+  let div4 = div.querySelector("#d4");
+  let div5 = div.querySelector("#d5");
+
+  is(div1.innerHTML, str1, "The content of #d1 is localized");
+  is(div2.innerHTML, str1, "The content of #d2 is localized");
+  is(div2.getAttribute("title"), str2, "The title of #d2 is localized");
+  is(div3.innerHTML, str1, "The content of #d3 is localized");
+  is(div3.getAttribute("title"), str2, "The title of #d3 is localized");
+  is(div4.innerHTML, "Some content", "The content of #d4 is not replaced");
+  is(div4.getAttribute("aria-label"), str1, "The aria-label of #d4 is localized");
+  is(div5.innerHTML, str3, "The content of #d5 is localized with another bundle");
+});