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
--- a/devtools/shared/l10n.js
+++ b/devtools/shared/l10n.js
@@ -109,16 +109,73 @@ LocalizationHelper.prototype = {
return number.toLocaleString(undefined, {
maximumFractionDigits: decimals,
minimumFractionDigits: decimals
});
}
};
+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");
/**
* A helper for having the same interface as LocalizationHelper, but for more
* than one file. Useful for abstracting l10n string locations.
*/
function MultiLocalizationHelper(...stringBundleNames) {
@@ -146,10 +203,11 @@ function MultiLocalizationHelper(...stri
}
}
return null;
};
});
}
exports.LocalizationHelper = LocalizationHelper;
+exports.localizeMarkup = localizeMarkup;
exports.MultiLocalizationHelper = MultiLocalizationHelper;
exports.ELLIPSIS = ELLIPSIS;
--- a/devtools/shared/tests/browser/browser.ini
+++ b/devtools/shared/tests/browser/browser.ini
@@ -1,7 +1,8 @@
[DEFAULT]
tags = devtools
subsuite = devtools
support-files =
../../../server/tests/browser/head.js
[browser_async_storage.js]
+[browser_l10n_localizeMarkup.js]
new file mode 100644
--- /dev/null
+++ b/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");
+});