From 1740be8a9190fd5a00777ac7d6a8c6b6b724c3dd Mon Sep 17 00:00:00 2001
From: Sebastian Streich <streich.mobile@gmail.com>
Date: Wed, 21 Aug 2024 14:57:57 +0200
Subject: [PATCH] Add i18n support

---
 src/_locales/en/messages.json     | 69 +++++++++++++++++++++++++++++++
 src/components/vpncard.js         |  9 ++--
 src/manifest.json                 |  5 ++-
 src/shared/i18n.js                | 18 ++++++++
 src/ui/browserAction/popupPage.js | 14 +++----
 src/ui/pageAction/pageAction.js   |  3 +-
 6 files changed, 104 insertions(+), 14 deletions(-)
 create mode 100644 src/_locales/en/messages.json
 create mode 100644 src/shared/i18n.js

diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
new file mode 100644
index 0000000..9616e44
--- /dev/null
+++ b/src/_locales/en/messages.json
@@ -0,0 +1,69 @@
+{
+  "extensionName": {
+    "message": "Mozilla VPN Extension",
+    "description": "Name of the extension."
+  },
+
+  "extensionDescription": {
+    "message": "Integrate VPN into Firefox: Exclude Tabs, set Site locations and more!",
+    "description": "Description of the extension."
+  },
+
+  "notificationTitle": {
+    "message": "Click notification",
+    "description": "Title of the click notification."
+  },
+  "productName": {
+    "message": "Mozilla VPN",
+    "description": "Name of the Product"
+  },
+
+  "notificationContent": {
+    "message": "You clicked $URL$.",
+    "description": "Tells the user which link they clicked.",
+    "placeholders": {
+      "url": {
+        "content": "$1",
+        "example": "https://developer.mozilla.org"
+      }
+    }
+  },
+  "titleServerList": {
+    "message": "Select site location",
+    "description": "The header of a Serverlist, prompting the user to select a location"
+  },
+  "titlePageSettings": {
+    "message": "Preferences for this site",
+    "description": "The header for website specific settings i.e exclude a page from vpn"
+  },
+  "exludePageFor": {
+    "message": "Always turn off VPN protection for  $origin$ ",
+    "description": "Setting to exclude a website from vpn ",
+    "placeholders": {
+      "origin": {
+        "content": "$1",
+        "example": "developer.mozilla.org"
+      }
+    }
+  },
+  "resetPageSettings": {
+    "message": "Reset site preferences",
+    "description": "Button Text to Reset all Site specific settings"
+  },
+  "isPrivateConnection": {
+    "message": "Secure and private",
+    "description": "Subheader in the 'card' telling users their current connection is secured by the vpn"
+  },
+  "turnOnForPrivateConnection": {
+    "message": "Turn on to protect your browser",
+    "description": "Call to Action for users to turn on the VPN"
+  },
+  "vpnIsOn": {
+    "message": "VPN is On",
+    "description": "Header to signal that VPN connection is enabled"
+  },
+  "vpnIsOff": {
+    "message": "VPN is Off",
+    "description": "Header to signal that VPN connection is disabled"
+  }
+}
diff --git a/src/components/vpncard.js b/src/components/vpncard.js
index 1c0f7e4..d5c5ff9 100644
--- a/src/components/vpncard.js
+++ b/src/components/vpncard.js
@@ -9,7 +9,7 @@ import {
   classMap,
   styleMap,
 } from "../vendor/lit-all.min.js";
-
+import { tr } from "../shared/i18n.js";
 import { resetSizing } from "./styles.js";
 
 /**
@@ -83,15 +83,16 @@ export class VPNCard extends LitElement {
       : html``;
 
     const subLine = this.enabled
-      ? "Secure and private"
-      : "Turn on to protect your browser";
+      ? tr("isPrivateConnection")
+      : tr("turnOnForPrivateConnection");
+    const vpnHeader = this.enabled ? tr("vpnIsOn") : tr("vpnIsOff");
 
     return html`
       <div class="${classMap(boxClasses)}">
         <main>
           <img src=${shieldURL} />
           <div class="infobox">
-            <h1>VPN is ${this.enabled ? "On" : "Off"}</h1>
+            <h1>${vpnHeader}</h1>
             <p>${subLine}</p>
             ${timeString}
           </div>
diff --git a/src/manifest.json b/src/manifest.json
index 3212b03..fa7b7ed 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "version": "1.0",
   "author": "Mozilla",
-  "name": "Mozilla VPN Web Extension (TODO Localize)",
-  "description": "Mozilla VPN",
+  "name": "__MSG_extensionName__",
+  "description": "__MSG_extensionDescription__",
 
   "browser_specific_settings": {
     "gecko": {
@@ -36,6 +36,7 @@
   "icons": {
     "48": "assets/logos/logo-dark.svg"
   },
+  "default_locale": "en",
 
   "incognito": "spanning",
 
diff --git a/src/shared/i18n.js b/src/shared/i18n.js
new file mode 100644
index 0000000..c3c3925
--- /dev/null
+++ b/src/shared/i18n.js
@@ -0,0 +1,18 @@
+/* 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/. */
+
+/**
+ * Get's a translated message
+ * @param {*} id - The Id Of the Message
+ * @param  {...any} arg - Substitution arguments
+ * @returns The Message translated for the Users Language.
+ */
+export const tr = (id, ...arg) => {
+  const candidate = browser.i18n.getMessage(id, arg);
+  if (!candidate || candidate.length === 0) {
+    console.error(`Missing Translation Message for ${id}`);
+    return id;
+  }
+  return candidate;
+};
diff --git a/src/ui/browserAction/popupPage.js b/src/ui/browserAction/popupPage.js
index 393c41b..eaad24e 100644
--- a/src/ui/browserAction/popupPage.js
+++ b/src/ui/browserAction/popupPage.js
@@ -14,7 +14,7 @@ import {
 import { vpnController, proxyHandler } from "./backend.js";
 
 import { Utils } from "../../shared/utils.js";
-
+import { tr } from "../../shared/i18n.js";
 import { fontSizing, resetSizing } from "../../components/styles.js";
 
 // Other components used
@@ -100,7 +100,7 @@ export class BrowserActionPopup extends LitElement {
       return this.stackView?.value?.count > 1;
     })();
     let title = this.stackView?.value?.currentElement?.dataset?.title;
-    title ??= "Mozilla VPN";
+    title ??= tr("productName");
 
     return html`
       <vpn-titlebar title="${title}" ${ref(this.titleBar)}>
@@ -108,7 +108,7 @@ export class BrowserActionPopup extends LitElement {
         <img slot="right" src="../../assets/img/settings-cog.svg" />
       </vpn-titlebar>
       <stack-view ${ref(this.stackView)}>
-        <section data-title="Mozilla VPN">
+        <section data-title="${tr("productName")}">
           <main>
             <vpn-card
               .enabled=${this.vpnState?.connected}
@@ -195,7 +195,7 @@ export class BrowserActionPopup extends LitElement {
         return null;
       }
       return html`
-        <h2>Select site location</h2>
+        <h2>${tr("titleServerList")}</h2>
         <div class="row" id="selectPageLocation" @click=${openServerList}>
           <img
             src="../../assets//flags/${siteContext.countryCode}.png"
@@ -214,19 +214,19 @@ export class BrowserActionPopup extends LitElement {
     })();
 
     return html`
-      <h1>Preferences for this site</h1>
+      <h1>${tr("titlePageSettings")}</h1>
       <div class="row">
         <input
           type="checkbox"
           ?checked=${siteContext.excluded}
           @click=${tooggleExcluded}
         />
-        <p>Always turn off VPN protection for <b>${siteContext.origin}</b></p>
+        <p>${tr("exludePageFor", siteContext.origin)}</p>
       </div>
       ${pageLocationPicker}
       ${hasSiteContext
         ? html`<button id="selectLocation" @click=${removeSiteContext}>
-            Reset Site Preferences
+            ${tr("resetPageSettings")}
           </button>`
         : null}
     `;
diff --git a/src/ui/pageAction/pageAction.js b/src/ui/pageAction/pageAction.js
index 2b85a8e..ef63bed 100644
--- a/src/ui/pageAction/pageAction.js
+++ b/src/ui/pageAction/pageAction.js
@@ -7,6 +7,7 @@ import { html, css, LitElement } from "../../vendor/lit-all.min.js";
 import { vpnController, proxyHandler } from "../browserAction/backend.js";
 
 import { Utils } from "../../shared/utils.js";
+import { tr } from "../../shared/i18n.js";
 
 import { fontSizing, resetSizing } from "../../components/styles.js";
 
@@ -81,7 +82,7 @@ export class PageActionPopup extends LitElement {
     };
 
     return html`
-      <h1>Mozilla VPN</h1>
+      <h1>${tr("productName")}</h1>
       <p id="context-description">${contextDescriptionText()}</p>
 
       <div class="flex">