Make use of JSON-based l10n strings

bin/generate-offline-files.js

@@ -16,7 +16,6 @@ function fileFinder(dir, pattern) {
 // Find css and JS files
 const findJs = fileFinder(`src/js`, `-iname "*.js"`);
 const findCss = fileFinder(`src/css`, `-iname "*.css" -or -iname "*.svg" -or -iname "*.png"`);
-const findLocale = fileFinder(`src/locale`, `-iname "*.js"`);
 
 function processResults(results) {
   const paths = results
@@ -37,7 +36,7 @@ function writeFile(template) {
 }
 
 // Process and generate file
-Promise.all([findJs, findCss, findLocale])
+Promise.all([findJs, findCss])
   .then(processResults)
   .then(writeFile)
   .catch(err => console.error(err));

karma.conf.js

@@ -42,11 +42,6 @@ module.exports = function(config) {
         watched: true,
         served: true,
         included: false
-      }, {
-        pattern: "src/locale/newTab.js",
-        watched: true,
-        served: true,
-        included: false
       },
     ],
 
@@ -96,7 +91,6 @@ module.exports = function(config) {
       "/js/undo.js": "http://localhost:9876/base/src/js/undo.js",
       "/js/updater.js": "http://localhost:9876/base/src/js/updater.js",
       "/js/userDatabase.js": "http://localhost:9876/base/src/js/userDatabase.js",
-      "/locale/newTab.js": "http://localhost:9876/base/src/locale/newTab.js",
       "/test/rectangle.js": "http://localhost:9876/base/src/test/rectangle.js",
       "/test/script_test_example.js": "http://localhost:9876/base/src/test/script_test_example.js",
       "/test/sw_spec.js": "http://localhost:9876/base/src/test/sw_spec.js",

src/index.html

@@ -93,7 +93,6 @@
     <script src="js/lib/async.js"></script>
     <script src="js/lib/cachetasks.js"></script>
     <script src="js/intro.js"></script>
-    <script src="locale/newTab.js"></script>
     <script src="js/customize.js"></script>
     <script src="js/rectangle.js"></script>
     <script src="js/dropTargetShim.js"></script>

src/js/grid.js

@@ -203,7 +203,7 @@
       // Create the site's inner HTML code.
       site.innerHTML = `
         <span class="newtab-sponsored">
-          ${gNewTab.newTabString("sponsored.button")}
+          ${gNewTab.newTabString("sponsored-button")}
         </span>
         <a class="newtab-link">
           <span class="newtab-thumbnail"></span>

src/js/intro.js

@@ -41,7 +41,7 @@ const TILES_INTRO_LINK = "https://www.mozilla.org/firefox/tiles/";
 
       // Set the button
       document.getElementById("newtab-intro-button")
-        .value = gNewTab.newTabString("intro.gotit");
+        .value = gNewTab.newTabString("intro-gotit");
     },
 
     _bold: function(str) {
@@ -62,10 +62,10 @@ const TILES_INTRO_LINK = "https://www.mozilla.org/firefox/tiles/";
     _generateParagraphs() {
       let customizeIcon =
         `<input type="button" class="newtab-control newtab-customize"/>`;
-      this._paragraphs.push(gNewTab.newTabString("intro1.paragraph1"));
-      this._paragraphs.push(gNewTab.newTabString("intro1.paragraph2", [
+      this._paragraphs.push(gNewTab.newTabString("intro1-paragraph1"));
+      this._paragraphs.push(gNewTab.newTabString("intro1-paragraph2", [
         this._link(TILES_PRIVACY_LINK,
-          gNewTab.newTabString("privacy.link")),
+          gNewTab.newTabString("privacy-link")),
         customizeIcon
       ]));
     },
@@ -92,13 +92,13 @@ const TILES_INTRO_LINK = "https://www.mozilla.org/firefox/tiles/";
       this._showMessage();
 
       // Header text
-      let text = "intro.header.update";
+      let text = "intro-header-update";
       this._nodes.header.innerHTML = gNewTab.newTabString(text);
 
       // Footer links
       let footerLinkNode = document.getElementById("newtab-intro-link");
       footerLinkNode.innerHTML =
-        this._link(TILES_INTRO_LINK, gNewTab.newTabString("learn.link2"));
+        this._link(TILES_INTRO_LINK, gNewTab.newTabString("learn-link2"));
     },
   };
   exports.gIntro = gIntro;

src/js/mainSiteURLs.json

@@ -34,6 +34,5 @@
   "/js/undo.js",
   "/js/updater.js",
   "/js/userDatabase.js",
-  "/locale/newTab.js",
   "/"
 ]

src/js/newTab.js

@@ -1,24 +1,43 @@
 /* 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/. */
-/*globals gGrid, gPage, gStrings, gUpdater, gUserDatabase, gPinnedLinks, gBlockedLinks, async*/
+/*globals Request, CacheTasks, gGrid, gPage, gUpdater, gUserDatabase,
+  gPinnedLinks, gBlockedLinks, async*/
 
 "use strict";
 
 (function(exports) {
   const gNewTab = {
-    _prefsObjectStoreKeys: {"pinnedLinks": [], "blockedLinks": []},
 
     listeners: {},
 
+    _l10nStrings: new Map(),
+
     init() {
-      // Add a listener for messages sent from the browser.
-      // The listener calls our associated callback functions.
-      window.addEventListener("message", message => {
-        for (let callback of this.listeners[message.data.name]) {
-          callback(message.data.data);
+      return async.task(function*() {
+        // Add a listener for messages sent from the browser.
+        // The listener calls our associated callback functions.
+        window.addEventListener("message", message => {
+          for (let callback of this.listeners[message.data.name]) {
+            callback(message.data.data);
+          }
+        });
+        let json = {};
+        try {
+          let request = new Request("./locale/strings.json");
+          let response = yield CacheTasks.update(request, "skeleton_cache");
+          json = yield response.json();
+        } catch (err) {
+          console.warn("Error handling localized strings.", err);
         }
-      });
+        // Save the strings in the map
+        Object.getOwnPropertyNames(json)
+          // weed out any potentially empty values
+          .filter(name => name.trim())
+          .forEach(
+            name => this._l10nStrings.set(name, json[name])
+          );
+      }, this);
     },
 
     observe(topic, data) {
@@ -63,12 +82,12 @@
     },
 
     newTabString(name, args) {
-      let stringName = "newtab." + name;
+      let key = "newtab-" + name;
       if (!args) {
-        return gStrings[stringName];
+        return this._l10nStrings.get(key);
       }
       let len = args.length;
-      return this._formatStringFromName(gStrings[stringName], args, len);
+      return this._formatStringFromName(this._l10nStrings.get(key), args, len);
     },
 
     _formatStringFromName(str, substrArr) {

src/js/sites.js

@@ -166,7 +166,7 @@
           this.link.explanation, [targetedName, targetedSite]
         );
       }
-      return gNewTab.newTabString("suggested.button", [targetedName]);
+      return gNewTab.newTabString("suggested-button", [targetedName]);
     },
 
     /**
@@ -231,7 +231,7 @@
       if (this.link.targetedSite) {
         if (this.node.dataset.type !== "sponsored") {
           this._querySelector(".newtab-sponsored").textContent =
-            gNewTab.newTabString("suggested.tag");
+            gNewTab.newTabString("suggested-tag");
         }
         this.node.dataset.suggested = true;
         let explanation = this._getSuggestedTileExplanation();
@@ -340,7 +340,7 @@
 
         let link = `
           <a href="${TILES_EXPLAIN_LINK}">
-            ${gNewTab.newTabString("learn.link")}
+            ${gNewTab.newTabString("learn-link")}
           </a>`;
         let linkType = this.node.dataset.type;
         let isAffiliate = linkType === "affiliate";
@@ -350,7 +350,7 @@
         let icon = `<input type="button"
                       class="newtab-control newtab-${tabClass}">`;
         explain.innerHTML = gNewTab.newTabString(
-          type + (type === "sponsored" ? ".explain2" : ".explain"), [icon, link]
+          type + (type === "sponsored" ? "-explain2" : "-explain"), [icon, link]
         );
 
         button.dataset.active = true;