Extract strings using WebExtension i18n library

Fixes part of #2294.

addon/webextension/_locales/en_US/messages.json

@@ -0,0 +1,33 @@
+{
+  "addonDescription": { "message": "Page Shot takes clips and screenshots from pages, and can save a permanent copy of a page." },
+  "addonAuthorsList": { "message": "Ian Bicking, Donovan Preston, and Bram Pitoyo" },
+  "toolbarButtonLabel": { "message": "Take a shot" },
+  "contextMenuLabel": { "message": "Create Page Shot" },
+  "myShotsLink": { "message": "My Shots" },
+  "screenshotInstructions": { "message": "Drag or click on the page to select a region. Press ESC to cancel." },
+  "saveScreenshotSelectedArea": { "message": "Save" },
+  "saveScreenshotVisibleArea": { "message": "Save visible" },
+  "saveScreenshotFullPage": { "message": "Save full page" },
+  "cancelScreenshot": { "message": "Cancel" },
+  "downloadScreenshot": { "message": "Download" },
+  "notificationLinkCopiedTitle": { "message": "Link Copied" },
+  "notificationLinkCopiedDetails": {
+    "message": "The link to your shot has been copied to the clipboard. Press $META_KEY$-V to paste.",
+    "placeholders": {
+      "META_KEY": {
+        "content": "$1"
+       }
+    }
+  },
+  "requestErrorTitle": { "message": "Page Shot is out of order." },
+  "requestErrorDetails": { "message": "Your shot was not saved. We apologize for the inconvenience. Try again soon." },
+  "connectionErrorTitle": { "message": "Cannot connect to the Page Shot server." },
+  "connectionErrorDetails": { "message": "There may be a problem with the service or with your network connection." },
+  "loginErrorDetails": { "message": "Your shot was not saved. There was an error authenticating with the server." },
+  "loginConnectionErrorDetails": { "message": "There may be a problem with the service or your network connection." },
+  "unshootablePageErrorTitle": { "message": "Page cannot be screenshotted." },
+  "unshootablePageErrorDetails": { "message": "This is not a normal web page, and Page Shot cannot capture screenshots from it." },
+  "selfScreenshotErrorTitle": { "message": "You can’t take a shot of a Page Shot page!" },
+  "genericErrorTitle": { "message": "Page Shot went haywire." },
+  "genericErrorDetails": { "message": "Try again or take a shot on another page?" }
+}

addon/webextension/background/main.js

@@ -37,7 +37,7 @@ window.main = (function () {
 
   browser.contextMenus.create({
     id: "create-pageshot",
-    title: "Create Page Shot",
+    title: browser.i18n.getMessage("contextMenuLabel"),
     contexts: ["page"]
   }, () => {
     // Note: unlike most browser.* functions this one does not return a promise
@@ -72,9 +72,8 @@ window.main = (function () {
       return browser.notifications.create(id, {
         type: "basic",
         iconUrl: "../icons/clipboard-32.png",
-        title: "Link Copied",
-        message: "The link to your shot has been copied to the clipboard. Press "
-        + pasteSymbol + "-V to paste."
+        title: browser.i18n.getMessage("notificationLinkCopied"),
+        message: browser.i18n.getMessage("notificationLinkCopiedDetails", pasteSymbol)
       });
     }
   });

addon/webextension/background/senderror.js

@@ -5,34 +5,34 @@ window.errorpopup = (function () {
 
   let messages = {
     REQUEST_ERROR: {
-      title: "Page Shot is out of order.",
-      info: "Your shot was not saved.  We apologize for the inconvenience. Try again soon."
+      title: browser.i18n.getMessage("requestErrorTitle"),
+      info: browser.i18n.getMessage("requestErrorDetails")
     },
     CONNECTION_ERROR: {
-      title: "Cannot connect to the Page Shot server.",
-      info: "There may be a problem with the service or with your network connection."
+      title: browser.i18n.getMessage("connectionErrorTitle"),
+      info: browser.i18n.getMessage("connectionErrorDetails")
     },
     LOGIN_ERROR: {
-      title: "Page Shot is out of order.",
-      info: "Your shot was not saved.  There was an error authenticating with the server."
+      title: browser.i18n.getMessage("requestErrorTitle"),
+      info: browser.i18n.getMessage("loginErrorDetails")
     },
     LOGIN_CONNECTION_ERROR: {
-      title: "Cannot connect to the Page Shot server.",
-      info: "There may be a problem with the service or your network connection."
+      title: browser.i18n.getMessage("connectionErrorTitle"),
+      info: browser.i18n.getMessage("loginConnectionErrorDetails")
     },
     UNSHOOTABLE_PAGE: {
-      title: "Page cannot be screenshotted",
-      info: "This is not a normal web page, and Page Shot cannot capture screenshots from it."
+      title: browser.i18n.getMessage("unshootablePageErrorTitle"),
+      info: browser.i18n.getMessage("unshootablePageErrorDetails")
     },
     SHOT_PAGE: {
-      title: "You can't take a shot of a Page Shot page!"
+      title: browser.i18n.getMessage("selfScreenshotErrorTitle")
     },
     MY_SHOTS: {
-      title: "You can't take a shot of a Page Shot page!"
+      title: browser.i18n.getMessage("selfScreenshotErrorTitle")
     },
     generic: {
-      title: "Page Shot went haywire.",
-      info: "Try again or take a shot on another page?",
+      title: browser.i18n.getMessage("genericErrorTitle"),
+      info: browser.i18n.getMessage("genericErrorDetails"),
       showMessage: true
     }
   };

addon/webextension/manifest.json.template

@@ -2,14 +2,15 @@
   "manifest_version": 2,
   "name": "Page Shot",
   "version": "__VERSION__",
-  "description": "Page Shot takes clips and screenshots from pages, and can save a permanent copy of a page",
-  "author": "Ian Bicking, Donovan Preston, and Bram Pitoyo",
+  "description": "__MSG_addonDescription__",
+  "author": "__MSG_addonAuthorsList__",
   "homepage_url": "https://github.com/mozilla-services/pageshot",
   "applications": {
     "gecko": {
       "id": "pageshot@mozilla.org"
     }
   },
+  "default_locale": "en_US",
   "icons": {
     "16": "icons/pageshot-icon-16.png",
     "32": "icons/pageshot-icon-32.png",
@@ -23,7 +24,7 @@
       "19": "icons/pageshot-icon-19.png",
       "38": "icons/pageshot-icon-38.png"
     },
-    "default_title": "Take a shot"
+    "default_title": "__MSG_toolbarButtonLabel__"
   },
   "background": {
     "scripts": [

addon/webextension/selector/ui.js

@@ -213,21 +213,19 @@ window.ui = (function () { // eslint-disable-line no-unused-vars
       this.el = makeEl("div", "pageshot-preview-overlay");
       this.el.innerHTML = `
       <div class="pageshot-moving-element" style="position: absolute; pointer-events: none; display: flex">
-        <div class="pageshot-preview-instructions">
-          Drag or click on the page to select a region. Press ESC to cancel.
-        </div>
+        <div class="pageshot-preview-instructions"></div>
         <div class="pageshot-myshots pageshot-myshots-button">
           <div class="pageshot-pre-myshots"></div>
-          <div class="pageshot-myshots-text">My Shots</div>
+          <div class="pageshot-myshots-text"></div>
           <div class="pageshot-post-myshots"></div>
         </div>
-        <div class="pageshot-overlay-button pageshot-visible">
-          Save visible
-        </div>
-        <div class="pageshot-overlay-button pageshot-full-page">
-          Save full page
-        </div>
+        <div class="pageshot-overlay-button pageshot-visible"></div>
+        <div class="pageshot-overlay-button pageshot-full-page"></div>
       `;
+      this.el.querySelector(".pageshot-preview-instructions").textContent = browser.i18n.getMessage("screenshotInstructions");
+      this.el.querySelector(".pageshot-myshots-text").textContent = browser.i18n.getMessage("myShotsLink");
+      this.el.querySelector(".pageshot-visible").textContent = browser.i18n.getMessage("saveScreenshotVisibleArea");
+      this.el.querySelector(".pageshot-full-page").textContent = browser.i18n.getMessage("saveScreenshotFullPage");
       this.el.querySelector(".pageshot-myshots").addEventListener(
         "click", watchFunction(callbacks.onOpenMyShots), false);
       this.el.querySelector(".pageshot-visible").addEventListener(
@@ -379,14 +377,14 @@ window.ui = (function () { // eslint-disable-line no-unused-vars
       boxEl = makeEl("div", "pageshot-highlight");
       let buttons = makeEl("div", "pageshot-highlight-buttons");
       let cancel = makeEl("button", "pageshot-highlight-button-cancel");
-      cancel.title = "Cancel";
+      cancel.title = browser.i18n.getMessage("cancelScreenshot");
       buttons.appendChild(cancel);
       let download = makeEl("button", "pageshot-highlight-button-download");
-      download.title = "Download";
+      download.title = browser.i18n.getMessage("downloadScreenshot");
       buttons.appendChild(download);
       let save = makeEl("button", "pageshot-highlight-button-save");
-      save.textContent = "Save";
-      save.title = "Save"
+      save.textContent = browser.i18n.getMessage("saveScreenshotSelectedArea");
+      save.title = browser.i18n.getMessage("saveScreenshotSelectedArea");
       buttons.appendChild(save);
       this.cancel = cancel;
       this.download = download;