Merge branch 'master' into proxy-support

README.md

@@ -2,7 +2,7 @@
 
 The Firefox Multi-Account Containers extension lets you carve out a separate box for each of your online lives – no more opening a different browser just to check your work email! [Learn More Here](https://blog.mozilla.org/firefox/introducing-firefox-multi-account-containers/)
 
-[Available on addons.mozilla.org](https://addons.mozilla.org/en-GB/firefox/addon/multi-account-containers/)
+[Available on addons.mozilla.org](https://addons.mozilla.org/firefox/addon/multi-account-containers/)
 
 For more info, see: 
 
@@ -18,17 +18,43 @@ For more info, see:
 
 ## Development
 
-1. `npm install`
+### Running Locally
-2. `./node_modules/web-ext/bin/web-ext run -s src/`
+
+#### Via WebExtensions API (web-ext)
+
+1. Install the [web-ext](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Getting_started_with_web-ext) tool.
+2. Run `web-ext run -s src/`. This launches Firefox and installs the extension automatically.
+
+This tool provides some additional development features, such as [automatic reloading](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Getting_started_with_web-ext#Automatic_extension_reloading).
+
+#### Via about:debugging in Firefox
+
+1. Open the `about:debugging` page in Firefox.
+2. Click on `This Firefox`.
+3. Click on [Load Temporary Add-on](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox).
+4. Select `src/manifest.json`.
+
+Here is a [video](https://www.youtube.com/watch?v=cer9EUKegG4) that demonstrates how to do this.
 
 ### Testing
-`npm run test`
 
-or 
+* Install dependencies:
 
-`npm run lint` 
+  ```
+  npm install
+  ```
 
-for just the linter
+* Run all tests:
+
+  ```
+  npm run test
+  ```
+
+* Only run the linter:
+
+  ```
+  npm run lint
+  ```
 
 There is a timeout test that sometimes fails on certain machines, so make sure to run the tests on your clone before you make any changes to see if you have this problem.
 
@@ -43,12 +69,12 @@ There is a timeout test that sometimes fails on certain machines, so make sure t
 #### Publish to AMO
 
 1. `npm run-script build`
-2. [Upload the `.zip` to AMO](https://addons.mozilla.org/en-US/developers/addon/multi-account-containers/versions/submit/)
+2. [Upload the `.zip` to AMO](https://addons.mozilla.org/developers/addon/multi-account-containers/versions/submit/)
 
 #### Publish to GitHub
 Finally, we also publish the release to GitHub for those followers.
 
-1. Download the signed `.xpi` from [the addon versions page](https://addons.mozilla.org/en-US/developers/addon/multi-account-containers/versions)
+1. Download the signed `.xpi` from [the addon versions page](https://addons.mozilla.org/developers/addon/multi-account-containers/versions)
 2. [Make the new release on
    GitHub](https://github.com/mozilla/multi-account-containers/releases/new)
    * Use the version number for "Tag version" and "Release title"

package.json

@@ -2,7 +2,7 @@
   "name": "testpilot-containers",
   "title": "Multi-Account Containers",
   "description": "Containers helps you keep all the parts of your online life contained in different tabs. Custom labels and color-coded tabs help keep different activities — like online shopping, travel planning, or checking work email — separate.",
-  "version": "8.0.0",
+  "version": "7.4.0",
   "author": "Andrea Marchesini, Luke Crouch and Jonathan Kingston",
   "bugs": {
     "url": "https://github.com/mozilla/multi-account-containers/issues"

src/_locales/en/messages.json

@@ -0,0 +1,270 @@
+{
+  "extensionDescription": {
+      "message": "Multi-Account Containers helps you keep all the parts of your online life contained in different tabs. Custom labels and color-coded tabs help keep different activities — like online shopping, travel planning, or checking work email — separate.",
+      "description": "Description of the extension. DO NOT TRANSLATE \"Multi-Account Containers\"."
+  },
+  "openInNewTabTitle": {
+    "message": "Open New Tab in…",
+    "description": "Menu title"
+  },
+  "reopenThisSiteIn": {
+    "message": "Reopen This Site in…",
+    "description": "Menu title"
+  },
+  "sortTabsByContainer": {
+    "message": "Sort Tabs by Container",
+    "description": "Menu title"
+  },
+  "alwaysOpenThisSiteIn": {
+    "message": "Always Open This Site in…",
+    "description": "Menu title"
+  },
+  "alwaysOpenIn": {
+    "message": "Always open in…",
+    "description": "Menu title"
+  },
+  "alwaysOpenSiteInContainer": {
+    "message": "Always Open Site in Container"
+  },
+  "openANewTabIn": {
+    "message" : "Open a New Tab in…"
+  },
+  "openNewTabInThisContainer": {
+    "message" : "Open New Tab in this Container"
+  },
+  "openTabs": {
+    "message": "Open Tabs"
+  },
+  "moveTabsToANewWindow": {
+    "message": "Move Tabs to a New Window"
+  },
+  "onboarding-1-header": {
+    "message": "A better way to manage all the things you do online"
+  },
+  "onboarding-1-description": {
+    "message": "Use containers to organize tasks, manage accounts, and keep your focus where you want it."
+  },
+  "onboarding-1-sec-header": {
+    "message": "A simple and secure way to manage your online life"
+  },
+  "onboarding-1-sec-description": {
+    "message" : "Use containers to organize tasks, manage accounts, and store sensitive data."
+  },
+  "onboarding-2-header": {
+    "message": "Put containers to work for you."
+  },
+  "onboarding-2-description": {
+    "message": "Features like color-coding and separate container tabs help you find things easily, focus your attention, and minimize distractions."
+  },
+  "onboarding-2-sec-description": {
+    "message": "Color-coding helps you categorize your online life, find things easily, and minimize distractions."
+  },
+  "onboarding-3-header": {
+    "message": "A place for everything, and everything in its place."
+  },
+  "onboarding-3-description": {
+    "message": "Start with the containers we've created, or create your own."
+  },
+  "onboarding-3-sec-header": {
+    "message": "Set boundaries for your browsing."
+  },
+  "onboarding-3-sec-description": {
+    "message": "Cookies are stored within a container, so you can segment sensitive data and browsing history to stay organized and to limit the impact of online trackers."
+  },
+  "onboarding-4-header": {
+    "message": "Always open sites in the containers you want."
+  },
+  "onboarding-4-description": {
+    "message": "Right-click inside a container tab to assign the site to always open in the container."
+  },
+  "onboarding-5-header": {
+    "message": "Container tabs when you need them."
+  },
+  "onboarding-5-description": {
+    "message": "Long-press the New Tab button to create a new container tab."
+  },
+  "onboarding-6-header": {
+    "message": "Syncing Containers is now Available!"
+  },
+  "onboarding-6-description": {
+    "message": "Turn on Sync to share container and site assignments with any computer connected to your Firefox Account."
+  },
+  "onboarding-7-header": {
+    "message": "Firefox Account is required to sync."
+  },
+  "onboarding-7-description": {
+    "message": "Click Sign In to confirm that your Firefox Account is active."
+  },
+  "oneHundredTabsHeader": {
+    "message": "100 tabs!"
+  },
+  "youHaveOpened": {
+    "message": "You've opened 100 Container tabs."
+  },
+  "spreadTheWord": {
+    "message": "If you enjoy Containers, help us spread the word!"
+  },
+  "rate": {
+    "message": "Rate"
+  },
+  "share": {
+    "message": "Share"
+  },
+  "tweet": {
+    "message": "Tweet"
+  },
+  "default": {
+    "message": "Default"
+  },
+  "manageContainers": {
+    "message": "Manage Containers"
+  },
+  "newContainer": {
+    "message": "New Container"
+  },
+  "hideThisContainer": {
+    "message": "Hide This Container"
+  },
+  "removeThisContainer": {
+    "message": "Remove This Container"
+  },
+  "removeThisContainerConfirmation": {
+    "message": "Are you sure you want to remove this Container?"
+  },
+  "cancel": {
+    "message": "Cancel"
+  },
+  "ok": {
+    "message": "OK"
+  },
+  "sitesAssignedToThisContainer": {
+    "message": "Sites assigned to this container"
+  },
+  "options": {
+    "message": "Options"
+  },
+  "name": {
+    "message": "Name"
+  },
+  "color": {
+    "message": "Color"
+  },
+  "icon": {
+    "message": "Icon"
+  },
+  "limitToDesignatedSites": {
+    "message": "Limit to Designated Sites"
+  },
+  "deleteThisContainer": {
+    "message": "Delete This Container"
+  },
+  "manageSiteList": {
+    "message": "Manage Site List…"
+  },
+  "manageThisContainer": {
+    "message": "Manage This Container"
+  },
+  "containers": {
+    "message": "Containers"
+  },
+  "done": {
+    "message": "Done"
+  },
+  "getStarted": {
+    "message": "Get Started"
+  },
+  "signIn": {
+    "message": "Sign In"
+  },
+  "notNow": {
+    "message": "Not Now"
+  },
+  "startSyncing": {
+    "message": "Start Syncing"
+  },
+  "info": {
+    "message": "info"
+  },
+  "next": {
+    "message": "Next"
+  },
+  "openThisSiteConfirmation": {
+    "message": "Open this site in your assigned container?"
+  },
+  "wouldYouStillLikeToOpenConfirmation": {
+    "message": "Would you still like to open in this current container?"
+  },
+  "rememberMyDecision": {
+    "message": "Remember my decision for this site"
+  },
+  "optionalPermissions": {
+    "message": "Optional Permissions:"
+  },
+  "keyboardShortCuts": {
+    "message": "Keyboard Shortcuts:"
+  },
+  "onboarding": {
+    "message": "Onboarding"
+  },
+  "resetOnboardingPanels": {
+    "message": "Reset Onboarding Panels"
+  },
+  "onboardingToggle": {
+    "message": "Toggle this to see the onboarding panels again."
+  },
+  "tabBehavior": {
+    "message": "Tab behavior:"
+  },
+  "firefoxAccountsSync": {
+    "message": "Firefox Accounts Sync:"
+  },
+  "enableBookMarkMenus": {
+    "message": "Enable Bookmark Menus"
+  },
+  "enableSync": {
+    "message": "Enable Sync"
+  },
+  "enableBookMarkMenusDescription": {
+    "message": "This setting allows you to open a bookmark or folder of bookmarks in a container."
+  },
+  "enableSyncDescription": {
+    "message": "This setting allows you to sync your containers and site assignments across devices."
+  },
+  "replaceTab": {
+    "message": "This setting allows you to sync your containers and site assignments across devices."
+  },
+  "replaceTabDescription": {
+    "message": "Replace the current tab if a page which is assigned to another container is opened (instead of keeping the current tab open). Opening tabs with middle mouse button is not affected."
+  },
+  "editWhichContainer": {
+    "message": "Edit which container is opened when using the numbered shortcuts."
+  },
+  "keyboardShortCut": {
+    "message": "Container to open with Keyboard Shortcut $keyId$",
+    "placeholders": {
+      "keyId": {
+          "content": "$1"
+      }
+    }
+  },
+  "confirmNavigationTitle": {
+    "message": "Multi-Account Containers Confirm Navigation",
+    "description": "This is the title of a confirmation page. Please do not translate \"Multi-Account Containers\"."
+  },
+  "openInContainer": {
+    "message": "Open in $containerName$ Container",
+    "placeholders": {
+      "containerName": {
+        "content": "$1"
+      }
+    }
+  },
+  "youAskedFirefox": {
+    "message": "You asked Firefox to always open $containerName$ for this site:",
+    "placeholders": {
+      "containerName": {
+        "content": "$1"
+      }
+    }
+  }
+}

src/confirm-page.html

@@ -1,31 +1,30 @@
 <html>
 <head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
-  <title>Multi-Account Containers Confirm Navigation</title>
+  <title data-i18n-message-id="confirmNavigationTitle"></title>
   <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="chrome://browser/skin/aboutNetError.css" type="text/css" media="all" />
+  <script type="text/javascript" src="./js/i18n.js"></script>
   <link rel="stylesheet" href="/css/confirm-page.css" />
 </head>
 <body>
   <main>
     <div class="title">
-      <h1 class="title-text">Open this site in your assigned container?</h1>
+      <h1 class="title-text" data-i18n-message-id="openThisSiteConfirmation"></h1>
     </div>
     <form id="redirect-form">
-      <p>
+      <p data-message-id="youAskedFireFox" data-message-arg="container-name"></p>
-        You asked <dfn id="browser-name" title="Thanks for trying out Containers. Sorry we may have got your browser name wrong. #FxNightly" >Firefox</dfn> to always open <dfn class="container-name"></dfn> for this site:<br />
-      </p>
       <div id="redirect-url"></div>
-      <p>Would you still like to open in this current container?</p>
+      <p data-i18n-message-id="wouldYouStillLikeToOpenConfirmation"></p>
       <br />
       <br />
       <label for="never-ask" class="check-label">
         <input id="never-ask" type="checkbox" />
-        Remember my decision for this site
+        <span data-i18n-message-id="rememberMyDecision"></span>
       </label>
       <br />
       <div class="button-container">
-        <button id="deny" class="button">Open in <dfn id="current-container-name">Current</dfn> Container</button>
+        <button id="deny" class="button" data-message-id="openInContainer" data-message-arg="current-container-name"></button>
-        <button id="confirm" class="button primary" autofocus>Open in <dfn class="container-name"></dfn> Container</button>
+        <button id="confirm" class="button primary" data-message-id="openInContainer" data-message-arg="container-name"></button>
       </div>
     </form>
   </main>

src/css/confirm-page.css

@@ -27,7 +27,7 @@ button .container-name,
 
   /* for a mid sized window we have enough for this but not our image */
   .title {
-    background-image: url("chrome://global/skin/icons/info.svg");
+    background-image: url('chrome://global/skin/icons/info.svg');
   }
 }
 
@@ -76,6 +76,11 @@ dfn {
   font-style: normal;
 }
 
+#deny,
+#confirm {
+  flex-grow: 1;
+}
+
 .button-container > button {
   min-inline-size: 240px;
 }

src/js/background/assignManager.js

@@ -712,7 +712,7 @@ window.assignManager = {
 
   reloadPageInContainer(url, currentUserContextId, userContextId, index, active, neverAsk = false, openerTabId = null) {
     const cookieStoreId = backgroundLogic.cookieStoreId(userContextId);
-    const loadPage = browser.extension.getURL("confirm-page.html");
+    const loadPage = browser.runtime.getURL("confirm-page.html");
     // False represents assignment is not permitted
     // If the user has explicitly checked "Never Ask Again" on the warning page we will send them straight there
     if (neverAsk) {

src/js/background/backgroundLogic.js

@@ -22,7 +22,7 @@ const backgroundLogic = {
   },
 
   async getExtensionInfo() {
-    const manifestPath = browser.extension.getURL("manifest.json");
+    const manifestPath = browser.runtime.getURL("manifest.json");
     const response = await fetch(manifestPath);
     const extensionInfo = await response.json();
     return extensionInfo;

src/js/confirm-page.js

@@ -7,21 +7,21 @@ async function load() {
   redirectUrlElement.textContent = redirectUrl;
   appendFavicon(redirectUrl, redirectUrlElement);
 
-  const container = await browser.contextualIdentities.get(cookieStoreId);
-  [...document.querySelectorAll(".container-name")].forEach((containerNameElement) => {
-    containerNameElement.textContent = container.name;
-  });
-
-  // If default container, button will default to normal HTML content
-  if (currentCookieStoreId) {
-    const currentContainer = await browser.contextualIdentities.get(currentCookieStoreId);
-    document.getElementById("current-container-name").textContent = currentContainer.name;
-  }
   document.getElementById("deny").addEventListener("click", (e) => {
     e.preventDefault();
     denySubmit(redirectUrl);
   });
 
+  const container = await browser.contextualIdentities.get(cookieStoreId);
+  const currentContainer = currentCookieStoreId ? await browser.contextualIdentities.get(currentCookieStoreId) : null;
+  const currentContainerName = currentContainer ? currentContainer.name : "";
+
+  document.querySelectorAll("[data-message-id]").forEach(el => {
+    const elementData = el.dataset;
+    const containerName = elementData.messageArg === "container-name" ? container.name : currentContainerName;
+    el.textContent = browser.i18n.getMessage(elementData.messageId, containerName);
+  });
+  
   document.getElementById("confirm").addEventListener("click", (e) => {
     e.preventDefault();
     confirmSubmit(redirectUrl, cookieStoreId);

src/js/content-script.js

@@ -24,7 +24,7 @@ async function addMessage(message) {
   divElement.innerText = message.text;
 
   const imageElement = document.createElement("img");
-  const imagePath = browser.extension.getURL("/img/container-site-d-24.png");
+  const imagePath = browser.runtime.getURL("/img/container-site-d-24.png");
   const response = await fetch(imagePath);
   const blob = await response.blob();
   const objectUrl = URL.createObjectURL(blob);

src/js/i18n.js

@@ -0,0 +1,9 @@
+document.addEventListener("DOMContentLoaded", async () => {
+  document.querySelectorAll("[data-i18n-message-id]").forEach(el => {
+    const messageArgs = el.dataset.i18nPlaceholder ? el.dataset.i18nPlaceholder : null;
+    el.textContent = browser.i18n.getMessage(el.dataset.i18nMessageId, [messageArgs]);
+  });
+  document.querySelectorAll("[data-i18n-attribute]").forEach(el => {
+    el.setAttribute(el.dataset.i18nAttribute, browser.i18n.getMessage(el.dataset.i18nAttributeMessageId));
+  });
+});

src/js/popup.js

@@ -41,7 +41,7 @@ function addRemoveSiteIsolation() {
 }
 
 async function getExtensionInfo() {
-  const manifestPath = browser.extension.getURL("manifest.json");
+  const manifestPath = browser.runtime.getURL("manifest.json");
   const response = await fetch(manifestPath);
   const extensionInfo = await response.json();
   return extensionInfo;
@@ -924,7 +924,7 @@ Logic.registerPanel(OPEN_NEW_CONTAINER_PICKER, {
   // This method is called when the panel is shown.
   prepare() {
     Logic.listenToPickerBackButton();
-    document.getElementById("picker-title").textContent = "Open a New Tab in";
+    document.getElementById("picker-title").textContent = browser.i18n.getMessage("openANewTabIn");
     const fragment = document.createDocumentFragment();
     const pickedFunction = function (identity) {
       try {
@@ -992,7 +992,7 @@ Logic.registerPanel(MANAGE_CONTAINERS_PICKER, {
       });
       this._listenerSet = true;
     }
-    document.getElementById("picker-title").textContent = "Manage Containers";
+    document.getElementById("picker-title").textContent = browser.i18n.getMessage("manageContainers");
     const fragment = document.createDocumentFragment();
     const pickedFunction = function (identity) {
       Logic.showPanel(P_CONTAINER_EDIT, identity);
@@ -1004,7 +1004,7 @@ Logic.registerPanel(MANAGE_CONTAINERS_PICKER, {
           <td>
             <div class="menu-icon"><img alt="New Container" src="/img/new-16.svg" />
             </div>
-            <span class="menu-text">New Container</span>
+            <span class="menu-text">${ browser.i18n.getMessage("newContainer") }</span>
           </td>
         </tr>
       </table>
@@ -1108,7 +1108,7 @@ Logic.registerPanel(REOPEN_IN_CONTAINER_PICKER, {
   // This method is called when the panel is shown.
   async prepare() {
     Logic.listenToPickerBackButton();
-    document.getElementById("picker-title").textContent = "Reopen This Site in";
+    document.getElementById("picker-title").textContent = browser.i18n.getMessage("reopenThisSiteIn");
     const fragment = document.createDocumentFragment();
     const currentTab = await Utils.currentTab();
     const pickedFunction = function (identity) {
@@ -1201,7 +1201,7 @@ Logic.registerPanel(ALWAYS_OPEN_IN_PICKER, {
   // This method is called when the panel is shown.
   prepare() {
     Logic.listenToPickerBackButton();
-    document.getElementById("picker-title").textContent = "Reopen This Site in";
+    document.getElementById("picker-title").textContent = browser.i18n.getMessage("alwaysOpenIn");
     const fragment = document.createDocumentFragment();
 
     document.getElementById("new-container-div").innerHTML = "";

src/manifest.json

@@ -1,9 +1,9 @@
 {
   "manifest_version": 2,
   "name": "Firefox Multi-Account Containers",
-  "version": "8.0.0",
+  "version": "7.4.0",
   "incognito": "not_allowed",
-  "description": "Multi-Account Containers helps you keep all the parts of your online life contained in different tabs. Custom labels and color-coded tabs help keep different activities — like online shopping, travel planning, or checking work email — separate.",
+  "description": "__MSG_extensionDescription__",
   "icons": {
     "48": "img/container-site-d-48.png",
     "96": "img/container-site-d-96.png"
@@ -25,6 +25,7 @@
     "idle",
     "management",
     "storage",
+    "unlimitedStorage",
     "tabs",
     "webRequestBlocking",
     "webRequest",
@@ -140,6 +141,7 @@
       "run_at": "document_start"
     }
   ],
+  "default_locale": "en",
   "web_accessible_resources": [
     "/img/container-site-d-24.png"
   ],

src/options.html

@@ -3,85 +3,86 @@
 <html>
   <head>
     <meta charset="utf-8">
+    <script type="text/javascript" src="./js/i18n.js"></script>
     <link rel="stylesheet" href="css/options.css">
   </head>
 
   <body>
     <form>
-      <h3>Optional Permissions:</h3>
+      <h3 data-i18n-message-id="optionalPermissions"></h3>
       <label >
         <input type="checkbox" id="bookmarksPermissions">
-        Enable Bookmark Menus
+        <span data-i18n-message-id="enableBookMarkMenus"></span>
+
       </label>
-      <p><em>This setting allows you to open a bookmark or folder of bookmarks in a container.</em></p>
+      <p><em data-i18n-message-id="enableBookMarkMenusDescription"></em></p>
-      <h3>Firefox Accounts Sync:</h3>
+      <h3 data-i18n-message-id="firefoxAccountsSync"></h3>
       <label>
         <input type="checkbox" id="syncCheck">
-        Enable Sync
+        <span data-i18n-message-id="enableSync"></span>
       </label>
-      <p><em>This setting allows you to sync your containers and site assignments across devices.</em></p>
+      <p><em data-i18n-message-id="enableSyncDescription"></em></p>
-      <h3>Tab behaviour:</h3>
+      <h3 data-i18n-message-id="tabBehavior"></h3>
       <label>
         <input type="checkbox" id="replaceTabCheck">
-        Replace tab instead of creating a new one
+        <span data-i18n-message-id="replaceTab"></span>
       </label>
-      <p><em>Replace the current tab if a page which is assigned to another container is opened (instead of keeping the current tab open).
+      <p><em data-i18n-message-id="replaceTabDescription"></em></p>
-        Opening tabs with middle mouse button is not affected.</em></p>
+      <h3 data-i18n-message-id="keyboardShortCuts"></h3>
-      <h3>Keyboard Shortcuts:</h3>
+      <p><em data-i18n-message-id="editWhichContainer"></em></p>
-      <p><em>Edit which container is opened when using the numbered shortcuts.</em></p>
       <p><label>
-        Container to open with Keyboard Shortcut 1
+        <span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="1"></span>
         <select id="open_container_0">
         </select>
       </label></p>
       <p><label>
-        Container to open with Keyboard Shortcut 2
+        <span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="2"></span>
         <select id="open_container_1">
         </select>
       </label></p>
       <p><label>
-        Container to open with Keyboard Shortcut 3
+        <span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="3"></span>
         <select id="open_container_2">
         </select>
       </label></p>
       <p><label>
-        Container to open with Keyboard Shortcut 4
+        <span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="4"></span>
         <select id="open_container_3">
         </select>
       </label></p>
       <p><label>
-        Container to open with Keyboard Shortcut 5
+        <span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="5"></span>
         <select id="open_container_4">
         </select>
       </label></p>
       <p><label>
-        Container to open with Keyboard Shortcut 6
+        <span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="6"></span>
         <select id="open_container_5">
         </select>
       </label></p>
       <p><label>
-        Container to open with Keyboard Shortcut 7
+        <span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="7"></span>
         <select id="open_container_6">
         </select>
       </label></p>
       <p><label>
-        Container to open with Keyboard Shortcut 8
+        <span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="8"></span>
         <select id="open_container_7">
         </select>
       </label></p>
       <p><label>
-        Container to open with Keyboard Shortcut 9
+        <span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="9"></span>
         <select id="open_container_8">
         </select>
       </label></p>
       <p><label>
-        Container to open with Keyboard Shortcut 10
+        <span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="10"></span>
         <select id="open_container_9">
         </select>
       </label></p>
-      <h3>Onboarding:</h3>
+      <h3 data-i18n-message-id="onboarding"></h3>
-      <button>Reset Onboarding Panels</button>
+      <button data-i18n-message-id="resetOnboardingPanels"></button>
-      <p><em>Toggle this to see the onboarding panels again.</em></p>
+      <p><em data-i18n-message-id="onboardingToggle"></em></p>
     </form>
     <script src="js/options.js"></script>
   </body>

src/pageActionPopup.html

@@ -2,15 +2,14 @@
 <head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   <title>Multi-Account Containers</title>
+  <script type="text/javascript" src="./js/i18n.js"></script>
   <link rel="stylesheet" type="text/css" href="css/popup.css">
 
 </head>
 <body>
 
   <div class="page-action-container-picker" id="container-picker-panel">
-    <h3 class="title">
+    <h3 class="title" data-i18n-message-id="alwaysOpenThisSiteIn"></h3>
-      Always Open this Site in...
-    </h3>
     <hr>
     <div class="scrollable identities-list">
       <table class="menu" id="picker-identities-list">
@@ -22,7 +21,7 @@
                 data-identity-color="blue">
               </div>
             </div>
-            <span class="menu-text">Default</span>
+            <span class="menu-text" data-i18n-message-id="default"></span>
           </td>
         </tr>
       </table>

src/popup.html

@@ -2,143 +2,133 @@
 <head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   <title>Multi-Account Containers</title>
-  <link rel="stylesheet" href="css/popup.css">
+  <script type="text/javascript" src="./js/i18n.js"></script>
-
+  <link rel="stylesheet" href="./css/popup.css">
 </head>
 <body>
-
   <div class="hide panel onboarding onboarding-panel-1">
-    <img class="onboarding-img" alt="Container Tabs Overview" src="/img/onboarding-1.png" />
+    <img class="onboarding-img" alt="" src="/img/onboarding-1.png" />
-    <h3 class="onboarding-title">A better way to manage all the things you do online</h3>
+    <h3 class="onboarding-title" data-i18n-message-id="onboarding-1-header"></h3>
-    <p>
+    <p data-i18n-message-id="onboarding-1-description"></p>
-      Use containers to organize tasks, manage accounts, and keep your focus where you want it.
+    <a href="#" class="onboarding-button onboarding-start-button keyboard-nav" tabindex="0" data-i18n-message-id="getStarted"></a>
-    </p>
-    <a href="#" class="onboarding-button onboarding-start-button keyboard-nav" tabindex="0">Get Started</a>
   </div>
 
   <div class="hide panel onboarding security-onboarding-panel-1">
-    <img class="onboarding-img" alt="Container Tabs Overview" src="/img/onboarding-1.png" />
+    <img class="onboarding-img" alt="" src="/img/onboarding-1.png" />
-    <h3 class="onboarding-title">A simple and secure way to manage your online life</h3>
+    <h3 class="onboarding-title" data-i18n-message-id="onboarding-1-sec-header"></h3>
-    <p>
+    <p data-i18n-message-id="onboarding-1-sec-description"></p>
-      Use containers to organize tasks, manage accounts, and store sensitive data.
+    <a href="#" class="onboarding-button onboarding-start-button keyboard-nav" tabindex="0" data-i18n-message-id="getStarted"></a>
-    </p>
-    <a href="#" class="onboarding-button onboarding-start-button keyboard-nav" tabindex="0">Get Started</a>
   </div>
 
   <div class="panel onboarding onboarding-panel-2 hide">
-    <img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-2.png" />
+    <img class="onboarding-img" alt="" src="/img/onboarding-2.png" />
-    <h3 class="onboarding-title">Put containers to work for you.</h3>
+    <h3 class="onboarding-title" data-i18n-message-id="onboarding-2-header"></h3>
-    <p>Features like color-coding and separate container tabs help you find things easily, focus your attention, and minimize distractions.</p>
+    <p data-i18n-message-id="onboarding-2-description"></p>
-    <a href="#" class="onboarding-button onboarding-next-button keyboard-nav" tabindex="0">Next</a>
+    <a href="#" class="onboarding-button onboarding-next-button keyboard-nav" tabindex="0" data-i18n-message-id="next"></a>
   </div>
 
   <div class="panel onboarding security-onboarding-panel-2 hide">
-    <img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-2.png" />
+    <img class="onboarding-img" alt="" src="/img/onboarding-2.png" />
-    <h3 class="onboarding-title">Put containers to work for you.</h3>
+    <h3 class="onboarding-title" data-i18n-message-id="onboarding-2-header"></h3>
-    <p>Color-coding helps you categorize your online life, find things easily, and minimize distractions.</p>
+    <p data-i18n-message-id="onboarding-2-sec-description"></p>
-    <a href="#" class="onboarding-button onboarding-next-button keyboard-nav" tabindex="0">Next</a>
+    <a href="#" class="onboarding-button onboarding-next-button keyboard-nav" tabindex="0" data-i18n-message-id="next"></a>
   </div>
 
   <div class="panel onboarding onboarding-panel-3 hide">
-    <img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-3.png" />
+    <img class="onboarding-img" alt="" src="/img/onboarding-3.png" />
-    <h3 class="onboarding-title">A place for everything, and everything in its place.</h3>
+    <h3 class="onboarding-title" data-i18n-message-id="onboarding-3-header"></h3>
-    <p>Start with the containers we've created, or create your own.</p>
+    <p data-i18n-message-id="onboarding-3-description"></p>
-    <a href="#" class="onboarding-button onboarding-almost-done-button keyboard-nav" tabindex="0">Next</a>
+    <a href="#" class="onboarding-button onboarding-almost-done-button keyboard-nav" tabindex="0" data-i18n-message-id="next"></a>
   </div>
 
   <div class="panel onboarding security-onboarding-panel-3 hide">
-    <img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-3-security.png" />
+    <img class="onboarding-img" alt="" src="/img/onboarding-3-security.png" />
-    <h3 class="onboarding-title">Set boundaries for your browsing.</h3>
+    <h3 class="onboarding-title" data-i18n-message-id="onboarding-3-sec-header"></h3>
-    <p>Cookies are stored within a container, so you can segment sensitive data and browsing history to stay organized and to limit the impact of online trackers.</p>
+    <p data-i18n-message-id="onboarding-2-sec-description"></p>
-    <a href="#" class="onboarding-button onboarding-almost-done-button keyboard-nav" tabindex="0">Next</a>
+    <a href="#" class="onboarding-button onboarding-almost-done-button keyboard-nav" tabindex="0" data-i18n-message-id="next"></a>
   </div>
 
   <div class="panel onboarding onboarding-panel-4 hide" id="onboarding-panel-4">
-    <img class="onboarding-img" alt="How to assign sites to containers" src="/img/onboarding-4.png" />
+    <img class="onboarding-img" alt="" src="/img/onboarding-4.png" />
-    <h3 class="onboarding-title">Always open sites in the containers you want.</h3>
+    <h3 class="onboarding-title" data-i18n-message-id="onboarding-4-header"></h3>
-    <p>Right-click inside a container tab to assign the site to always open in the container.</p>
+    <p data-i18n-message-id="onboarding-4-description"></p>
-    <a href="#" id="onboarding-done-button" class="onboarding-button keyboard-nav" tabindex="0">Next</a>
+    <a href="#" id="onboarding-done-button" class="onboarding-button keyboard-nav" tabindex="0" data-i18n-message-id="next"></a>
   </div>
 
   <div class="panel onboarding onboarding-panel-5 hide" id="onboarding-panel-5">
-    <img class="onboarding-img" alt="Long-press the New Tab button to create a new container tab." src="/img/onboarding-3.png" />
+    <img class="onboarding-img" alt="" src="/img/onboarding-3.png" />
-    <h3 class="onboarding-title">Container tabs when you need them.</h3>
+    <h3 class="onboarding-title" data-i18n-message-id="onboarding-5-header"></h3>
-    <p>Long-press the New Tab button to create a new container tab.</p>
+    <p data-i18n-message-id="onboarding-5-description"></p>
-    <a href="#" id="onboarding-longpress-button" class="onboarding-button keyboard-nav" tabindex="0">Next</a>
+    <a href="#" id="onboarding-longpress-button" class="onboarding-button keyboard-nav" tabindex="0" data-i18n-message-id="next"></a>
   </div>
 
   <div class="panel onboarding onboarding-panel-6 hide" id="onboarding-panel-6">
-    <img class="onboarding-img" alt="Syncing Containers is now Available!" src="/img/Sync.svg" />
+    <img class="onboarding-img" alt="" src="/img/Sync.svg" />
-    <h3 class="onboarding-title">Syncing Containers is now Available!</h3>
+    <h3 class="onboarding-title" data-i18n-message-id="onboarding-6-header"></h3>
-    <p>Turn on Sync to share container and site assignments with any computer connected to your Firefox Account.</p>
+    <p data-i18n-message-id="onboarding-6-description"></p>
     <div class="half-button-wrapper">
-      <a herf="#" id="no-sync" class="half-onboarding-button grey-button keyboard-nav" tabindex="0">Not Now</a>
+      <a href="#" id="no-sync" class="half-onboarding-button grey-button keyboard-nav" tabindex="0" data-i18n-message-id="notNow"></a>
-      <a href="#" id="start-sync-button" class="half-onboarding-button keyboard-nav" tabindex="0">Start Syncing</a>
+      <a href="#" id="start-sync-button" class="half-onboarding-button keyboard-nav" tabindex="0" data-i18n-message-id="startSyncing"></a>
     </div>
   </div>
 
   <div class="panel onboarding onboarding-panel-7 hide" id="onboarding-panel-7">
-    <img class="onboarding-img" alt="Firefox Account is required to sync" src="/img/Account.svg" />
+    <img class="onboarding-img" alt="" src="/img/Account.svg" />
-    <h3 class="onboarding-title">Firefox Account is required to sync.</h3>
+    <h3 class="onboarding-title" data-i18n-message-id="onboarding-7-header"></h3>
-    <p>Click Sign In to confirm that your Firefox Account is active.</p>
+    <p data-i18n-message-id="onboarding-7-description"></p>
     <div class="half-button-wrapper">
-      <a herf="#" id="no-sign-in" class="half-onboarding-button grey-button keyboard-nav" tabindex="0">Not Now</a>
+      <a href="#" id="no-sign-in" class="half-onboarding-button grey-button keyboard-nav" tabindex="0" data-i18n-message-id="notNow"></a>
-      <a href="#" id="sign-in" class="half-onboarding-button keyboard-nav" tabindex="0">Sign In</a>
+      <a href="#" id="sign-in" class="half-onboarding-button keyboard-nav" tabindex="0" data-i18n-message-id="signIn"></a>
     </div>
   </div>
 
   <div class="panel achievement-panel hide" id="achievement-panel">
-    <img class="onboarding-img" alt="You achieved a Containers milestone!" src="/img/onboarding-3.png" />
+    <img class="onboarding-img" alt="" src="/img/onboarding-3.png" />
-    <h3 class="onboarding-title">100 tabs!</h3>
+    <h3 class="onboarding-title" data-i18n-message-id="oneHundredTabsHeader"></h3>
-    <p>You've opened 100 Container tabs.</p>
+    <p data-i18n-message-id="youHaveOpened"></p>
-    <p>If you enjoy Containers, help us spread the word!</p>
+    <p data-i18n-message-id="spreadTheWord"></p>
     <p class="share-ctas">
       <a class="cta-link" href="https://mzl.la/2gJtIZ4" id="achievement-rate-button" target="_blank">
-        <span class="cta amo-rate-cta">
+        <span class="cta amo-rate-cta" data-i18n-message-id="rate">
-          <img src="/img/amo-icon.svg" class="cta-icon" alt="addons.mozilla.org Icon">
+          <img src="/img/amo-icon.svg" class="cta-icon" alt="">
-          Rate
         </span>
       </a>
       <a class="cta-link" href="https://bit.ly/fb-share-mac-addon" target="_blank">
-        <span class="cta fb-share-cta">
+        <span class="cta fb-share-cta" data-i18n-message-id="share">
-          <img src="/img/webicon-facebook.svg" class="cta-icon" alt="Facebook Icon">
+          <img src="/img/webicon-facebook.svg" class="cta-icon" alt="">
-          Share
         </span>
       </a>
       <a class="cta-link" href="http://bit.ly/tweet-100-tabs-mac-addon" target="_blank">
-        <span class="cta tweet-cta">
+        <span class="cta tweet-cta" data-i18n-message-id="tweet">
-          <img src="/img/webicon-twitter.svg" class="cta-icon" alt="Twitter Icon">
+          <img src="/img/webicon-twitter.svg" class="cta-icon" alt="">
-          Tweet
         </span>
       </a>
     </p>
-    <a href="#" id="achievement-done-button" class="onboarding-button keyboard-nav">Done</a>
+    <a href="#" id="achievement-done-button" class="onboarding-button keyboard-nav" data-i18n-message-id="done"></a>
   </div>
 
   <div class="panel menu-panel container-panel hide" id="container-panel">
-    <h3 class="title">
+    <h3 class="title">Multi-Account Containers</h3>
-      Multi-Account Containers
-    </h3>
     <a href="#" class="info-icon" id="info-icon" tabindex="10">
-      <img alt="info" src="/img/info-thin-16.svg" / >
+      <img data-i18n-attribute-message-id="info" data-i18n-attribute="alt" alt="" ="info" src="/img/info-thin-16.svg" / >
     </a>
     <hr>
     <table class="menu">
       <tr class="menu-item hover-highlight keyboard-nav" id="open-new-tab-in" tabindex="0">
         <td>
-          <img class="menu-icon" alt="Open in New Tab" src="/img/tab-new-16.svg" />
+          <img class="menu-icon" alt="" src="/img/tab-new-16.svg" />
-          <span class="menu-text">Open New Tab in...</span>
+          <span class="menu-text" data-i18n-message-id="openInNewTabTitle"></span>
             <span class="menu-arrow">
-              <img alt="Container Info" src="/img/arrow-icon-right.svg" />
+              <img alt="" src="/img/arrow-icon-right.svg" />
             </span>
         </td>
       </tr>
       <tr class="menu-item hover-highlight keyboard-nav" id="reopen-site-in" tabindex="0">
         <td>
-          <img class="menu-icon" alt="Open in New Tab" src="/img/refresh-16.svg" />
+          <img class="menu-icon" alt="" src="/img/refresh-16.svg" />
-          <span class="menu-text">Reopen This Site in...</span>
+          <span data-i18n-message-id="reopenThisSiteIn" class="menu-text"></span>
             <span class="menu-arrow">
-              <img alt="Container Info" src="/img/arrow-icon-right.svg" />
+              <img alt="" src="/img/arrow-icon-right.svg" />
             </span>
         </td>
       </tr>
@@ -147,26 +137,24 @@
     <table class="menu">
       <tr class="menu-item hover-highlight keyboard-nav" id="sort-containers-link" tabindex="0">
         <td>
-          <img class="menu-icon" alt="Open in New Tab" src="/img/sort-16_1.svg" />
+          <img class="menu-icon" alt="" src="/img/sort-16_1.svg" />
-          <span class="menu-text">Sort Tabs by Container</span>
+          <span class="menu-text" data-i18n-message-id="sortTabsByContainer"></span>
             <span class="menu-arrow">
             </span>
         </td>
       </tr>
       <tr class="menu-item hover-highlight keyboard-nav" id="always-open-in" tabindex="0">
         <td>
-          <img class="menu-icon" alt="Open in New Tab" src="/img/container-openin-16.svg" />
+          <img class="menu-icon" alt="" src="/img/container-openin-16.svg" />
-          <span class="menu-text">Always Open This Site in...</span>
+          <span class="menu-text" data-i18n-message-id="alwaysOpenThisSiteIn"></span>
             <span class="menu-arrow">
-              <img alt="Container Info" src="/img/arrow-icon-right.svg" />
+              <img alt="" src="/img/arrow-icon-right.svg" />
             </span>
         </td>
       </tr>
     </table>
     <hr>
-    <div class="sub-header">
+    <div class="sub-header" data-i18n-message-id="containers"></div>
-    Containers
-    </div>
     <div class="scrollable identities-list">
       <table class="menu" id="identities-list">
         <tr class="menu-item hover-highlight">
@@ -177,68 +165,62 @@
                   data-identity-icon="pet"
                   data-identity-color="blue"></div>
               </div>
-              <span class="menu-text">Default</span>
+              <span class="menu-text" data-i18n-message-id="default"></span>
             </div>
             <span class="menu-right-float">
               <span class="container-count">22</span>
               <span class="menu-arrow">
-                <img alt="Container Info" src="/img/arrow-icon-right.svg" />
+                <img alt="" src="/img/arrow-icon-right.svg" />
               </span>
             </span>
           </td>
         </tr>
       </table>
     </div>
-    <div class="bottom-btn keyboard-nav hover-highlight" id="manage-containers-link" tabindex="0">
+    <div class="bottom-btn keyboard-nav hover-highlight" id="manage-containers-link" tabindex="0" data-i18n-message-id="manageContainers"></div>
-      Manage Containers
-    </div>
   </div>
 
 
   <div class="hide panel menu-panel container-info-panel" id="container-info-panel" tabindex="-1">
-    <h3 class="title" id="container-info-title">
+    <h3 class="title" id="container-info-title" data-i18n-attribute-message-id="personal"></h3>
-      Personal
-    </h3>
     <button class="btn-return arrow-left keyboard-nav-back" id="close-container-info-panel" tabindex="0"></button>
     <hr>
     <table class="menu">
       <tr class="menu-item hover-highlight keyboard-nav" id="open-new-tab-in-info" tabindex="0">
         <td>
-          <img class="menu-icon" alt="Open in New Tab" src="/img/tab-new-16.svg" />
+          <img class="menu-icon" alt="" src="/img/tab-new-16.svg" />
-          <span class="menu-text">Open New Tab in this Container</span>
+          <span class="menu-text" data-i18n-message-id="openNewTabInThisContainer"></span>
             <span class="menu-arrow">
             </span>
         </td>
       </tr>
       <tr class="menu-item hover-highlight keyboard-nav" id="hideorshow-container" tabindex="0">
         <td>
-          <img id="container-info-hideorshow-icon" class="menu-icon" alt="Hide This Container" src="img/password-hide.svg" />
+          <img id="container-info-hideorshow-icon" class="menu-icon" alt="" src="img/password-hide.svg" />
-          <span id="container-info-hideorshow-label" class="menu-text">Hide This Container</span>
+          <span id="container-info-hideorshow-label" class="menu-text" data-i18n-message-id="hideThisContainer"></span>
             <span class="menu-arrow">
             </span>
         </td>
       </tr>
       <tr class="menu-item hover-highlight keyboard-nav" id="move-to-new-window" tabindex="0">
         <td>
-          <img class="menu-icon" alt="Move Tabs to a New Window" src="/img/movetowindow-16.svg" />
+          <img class="menu-icon" alt="" src="/img/movetowindow-16.svg" />
-          <span class="menu-text">Move Tabs to a New Window</span>
+          <span class="menu-text" data-i18n-message-id="moveTabsToANewWindow"></span>
             <span class="menu-arrow">
             </span>
         </td>
       </tr>
       <tr class="menu-item hover-highlight keyboard-nav" id="always-open" tabindex="0">
         <td>
-          <img class="menu-icon" alt="Always Open Site in Container" src="/img/container-openin-16.svg" />
+          <img class="menu-icon" alt="" src="/img/container-openin-16.svg" />
-          <span class="menu-text" id="always-open-in-info-panel">Always Open Site in Container</span>
+          <span class="menu-text" id="always-open-in-info-panel" data-i18n-message-id="alwaysOpenSiteInContainer"></span>
             <span class="menu-arrow">
             </span>
         </td>
       </tr>
     </table>
     <hr>
-    <div class="sub-header">
+    <div class="sub-header" data-i18n-message-id="openTabs"></div>
-    Open Tabs
-    </div>
     <div class="scrollable">
       <table class="menu" id="container-info-table">
         <tr class="menu-item hover-highlight keyboard-nav" tabindex="0">
@@ -250,9 +232,7 @@
         </tr>
       </table>
     </div>
-    <div class="bottom-btn keyboard-nav hover-highlight" id="manage-container-link" tabindex="0">
+    <div class="bottom-btn keyboard-nav hover-highlight" id="manage-container-link" tabindex="0" data-i18n-message-id="manageThisContainer"></div>
-      Manage This Container
-    </div>
   </div>
 
 
@@ -273,7 +253,7 @@
                 data-identity-color="blue">
               </div>
             </div>
-            <span class="menu-text">Default</span>
+            <span class="menu-text" data-i18n-message-id="default"></span>
           </td>
         </tr>
       </table>
@@ -281,23 +261,21 @@
   </div>
 
   <div class="panel menu-panel edit-container-panel hide" id="edit-container-panel">
-    <h3 class="title" id="container-edit-title">
+    <h3 class="title" id="container-edit-title" data-i18n-message-id="default"></h3>
-      Default
-    </h3>
     <button class="btn-return arrow-left" id="close-container-edit-panel"></button>
     <hr>
     <div class="scrollable edit-form">
       <form id="edit-container-panel-form">
         <input type="hidden" name="container-id" id="edit-container-panel-usercontext-input" />
         <fieldset>
-          <legend class="form-header">Name</legend>
+          <legend class="form-header" data-i18n-message-id="name"></legend>
           <input type="text" name="container-name" id="edit-container-panel-name-input" class="edit-container-panel-name-input" maxlength="25"/>
         </fieldset>
         <fieldset id="edit-container-panel-choose-color" class="radio-choice">
-          <legend class="form-header">Color</legend>
+          <legend class="form-header" data-i18n-message-id="color"></legend>
         </fieldset>
         <fieldset id="edit-container-panel-choose-icon" class="radio-choice">
-          <legend class="form-header">Icon</legend>
+          <legend class="form-header" data-i18n-message-id="icon"></legend>
         </fieldset>
         <fieldset>
           <legend>Proxy (Optional)</legend>
@@ -305,32 +283,30 @@
         </fieldset>
       </form>
       <div id="edit-container-options">
-        <div class="options-header">Options</div>
+        <div class="options-header" data-i18n-message-id="options"></div>
         <div class="container-options">
           <input type="checkbox" class="site-isolation" id="site-isolation" name="site-isolation">
-          <label for="site-isolation" class="options-label">Limit to Designated Sites</label>
+          <label for="site-isolation" class="options-label" data-i18n-message-id="limitToDesignatedSites"></label>
         </div>
-        <div class="container-options options-label manage-assigned-sites-list" id="manage-assigned-sites-list" tabindex="0">Manage Site List...
+        <div class="container-options options-label manage-assigned-sites-list" id="manage-assigned-sites-list" tabindex="0">
         </div>
       </div>
     </div>
     <div class="delete-container">
-      <button class="delete-btn" id="delete-container-button">Delete This Container</button>
+      <button class="delete-btn" id="delete-container-button" data-i18n-message-id="deleteThisContainer"></button>
     </div>
     <div class="panel-footer">
-      <a href="#" class="button expanded secondary footer-button cancel-button" id="create-container-cancel-link">Cancel</a>
+      <a href="#" class="button expanded secondary footer-button cancel-button" id="create-container-cancel-link" data-i18n-message-id="cancel"></a>
-      <a href="#" class="button expanded primary footer-button" id="create-container-ok-link">OK</a>
+      <a href="#" class="button expanded primary footer-button" id="create-container-ok-link" data-i18n-message-id="ok"></a>
     </div>
   </div>
 
   <div class="panel menu-panel edit-container-assignments hide" id="edit-container-assignments">
-    <h3 class="title" id="edit-assignments-title">
+    <h3 class="title" id="edit-assignments-title" data-i18n-message-id="default"></h3>
-      Default
-    </h3>
     <button class="btn-return arrow-left" id="close-container-assignment-panel"></button>
     <hr>
     <div class="scrollable edit-sites-assigned">
-      <div class="sub-header">Sites assigned to this container</div>
+      <div class="sub-header" data-i18n-attribute-message-id="sitesAssignedToThisContainer"></div>
       <table class="menu scrollable" id="edit-sites-assigned">
         <tr class="menu-item hover-highlight" tabindex="0">
           <td>
@@ -344,19 +320,18 @@
   </div>
 
   <div class="hide panel delete-container-panel" id="delete-container-panel">
-    <h3 class="title" id="container-delete-title">
+    <h3 class="title" id="container-delete-title" data-i18n-message-id="default">
-      Default
     </h3>
     <button class="btn-return arrow-left" id="close-container-delete-panel"></button>
     <hr>
     <div class="panel-content delete-container-confirm">
-      <h4 class="delete-container-confirm-title">Remove This Container</h4>
+      <h4 class="delete-container-confirm-title" data-i18n-message-id="removeThisContainer"></h4>
       <p class="delete-warning" id="delete-container-tab-warning"></p>
-      <p class="delete-warning">Are you sure you want to remove this Container?</p>
+      <p class="delete-warning" data-i18n-message-id="removeThisContainerConfirmation"></p>
     </div>
     <div class="panel-footer">
-      <a href="#" class="button expanded secondary footer-button cancel-button" id="delete-container-cancel-link">Cancel</a>
+      <a href="#" class="button expanded secondary footer-button cancel-button" data-i18n-message-id="cancel" id="delete-container-cancel-link"></a>
-      <a href="#" class="button expanded primary footer-button" id="delete-container-ok-link">OK</a>
+      <a href="#" class="button expanded primary footer-button" data-i18n-message-id="ok" id="delete-container-ok-link"></a>
     </div>
   </div>