Update localization system and events

chrome/settings.html

@@ -7,7 +7,7 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 
-        <title data-l10n="settings_label"></title>
+        <title data-l10n-id="settings_label"></title>
 
         <link rel="stylesheet" type="text/css" href="css/settings.css">
 
@@ -17,22 +17,22 @@
 
         <header>
 
-            <h1 class="title" data-l10n="settings_label"></h1>
+            <h1 class="title" data-l10n-id="settings_label"></h1>
 
         </header>
 
         <div class="settings-container">
 
-            <h2 class="title" data-l10n="security_label"></h2>
+            <h2 class="title" data-l10n-id="security_label"></h2>
 
             <div class="settings-item slider">
 
                 <input class="slider-input" type="range" max="2" value="0" id="slider-input" onchange="changed()">
 
                 <div class="slider-legend">
-                    <div class="slider-legend-item text-left" data-l10n="standard_label"></div>
-                    <div class="slider-legend-item text-center" data-l10n="safer_label"></div>
-                    <div class="slider-legend-item text-right" data-l10n="safest_label"></div>
+                    <div class="slider-legend-item text-left" data-l10n-id="standard_label"></div>
+                    <div class="slider-legend-item text-center" data-l10n-id="safer_label"></div>
+                    <div class="slider-legend-item text-right" data-l10n-id="safest_label"></div>
                 </div>
 
             </div>
@@ -40,7 +40,7 @@
             <div class="settings-item notice">
 
                 <div class="notice-body">
-                    <div data-l10n="standard_description"></div>
+                    <div data-l10n-id="standard_description"></div>
                 </div>
 
             </div>
@@ -49,8 +49,8 @@
 
                 <div class="notice-body">
 
-                    <div data-l10n="safer_description"></div>
-                    <span data-l10n="safer_list_label"></span>&#58;
+                    <div data-l10n-id="safer_description"></div>
+                    <span data-l10n-id="safer_list_label"></span>&#58;
 
                     <ul style="padding-left: 20px; font-size: 12.5px;">
                         <li>JavaScript is disabled on non-HTTPS sites.</li>
@@ -66,8 +66,8 @@
 
                 <div class="notice-body">
 
-                    <div data-l10n="safest_description"></div>
-                    <span data-l10n="safest_list_label"></span>&#58;
+                    <div data-l10n-id="safest_description"></div>
+                    <span data-l10n-id="safest_list_label"></span>&#58;
 
                     <ul style="padding-left: 20px; font-size: 12.5px;">
                         <li>JavaScript is disabled by default on all sites.</li>
@@ -80,7 +80,7 @@
             </div>
 
             <div class="footnote">
-                <a href="https://tb-manual.torproject.org/linux/en-US/security-slider.html" target="_blank" data-l10n="learn_more_label"></a>
+                <a href="https://tb-manual.torproject.org/linux/en-US/security-slider.html" target="_blank" data-l10n-id="learn_more_label"></a>
             </div>
 
         </div>

data/content-scripts/settings.js

 /**
- * Event Handlers
+ * Fires once the content script worker is initialized.
+ *
+ * @event worker:initialized
+ * @param {Object} initialState The initial state of the settings module.
  */
+self.port.once('worker:initialized', function (initialState) {
 
-self.port.once('preferences:initialized', function (details) {
-
-    var localizationKeys = Object.keys(details.l10n);
-
-    localizationKeys.forEach(function (localizationKey) {
-
-        var elements = document.querySelectorAll('[data-l10n="' + localizationKey + '"]');
-
-        for (let element of elements) {
-            element.textContent = details.l10n[localizationKey];
-        }
-    });
+    applyL10n(initialState.l10n);
 });
 
 self.port.on('preference:fetched', function () {
@@ -22,8 +15,25 @@ self.port.on('preference:fetched', function () {
 });
 
 /**
- * Private Functions
+ * Applies a given localization to marked document elements.
+ * https://bugzilla.mozilla.org/show_bug.cgi?id=787351
+ *
+ * @private
+ * @param {Object} l10n A localization object.
  */
+function applyL10n (l10n) {
+
+    var l10nKeys = Object.keys(l10n);
+
+    l10nKeys.forEach(function (l10nKey) {
+
+        var elements = document.querySelectorAll('[data-l10n-id="' + l10nKey + '"]');
+
+        for (let element of elements) {
+            element.textContent = l10n[l10nKey];
+        }
+    });
+}
 
 function fetchPreference (preferenceKey) {
     self.port.emit('preference:fetch', preferenceKey);

src/main.js

@@ -67,7 +67,7 @@ exports.onUnload = function () {
 
 function startListening (worker) {
 
-    worker.port.emit('preferences:initialized', {
+    worker.port.emit('worker:initialized', {
 
         l10n: {
             settings_label: _('settings_label', BROWSER_NAME),
@@ -76,8 +76,10 @@ function startListening (worker) {
             standard_description: _('standard_description', BROWSER_NAME),
             safer_label: _('safer_label'),
             safer_description: _('safer_description'),
+            safer_list_label: _('safer_list_label'),
             safest_label: _('safest_label'),
             safest_description: _('safest_description'),
+            safest_list_label: _('safest_list_label'),
             learn_more_label: _('learn_more_label')
         }
     });