Merge pull request #974 from mozilla/bump-version-to-4.1.0

bump version to 4.1.0

.eslintignore

@@ -1,3 +1 @@
-testpilot-metrics.js
-lib/shield/*.js
 lib/testpilot/*.js

.eslintrc.js

@@ -13,7 +13,12 @@ module.exports = {
     "CustomizableUI": true,
     "CustomizableWidgets": true,
     "SessionStore": true,
-    "Services": true
+    "Services": true,
+    "Components": true,
+    "XPCOMUtils": true,
+    "OS": true,
+    "ADDON_UNINSTALL": true,
+    "ADDON_DISABLE": true
   },
   "plugins": [
     "promise",

.gitignore

@@ -8,3 +8,5 @@ README.html
 .vimrc
 .env
 addon.env
+
+webextension/web-ext-artifacts/*

.jpmignore

@@ -3,6 +3,7 @@ docs/
 test/
 .npm/
 node_modules/
+bin/
 
 .env
 .eslintrc.js
@@ -14,6 +15,7 @@ node_modules/
 .stylelintrc
 .travis.yml
 *.xpi
+*.md
 .vimrc
 .DS_Store
 .gdb_history

README.md

@@ -1,11 +1,11 @@
-# Containers Add-on
+# Multi-Account Containers
 
-[![Available on Test Pilot](https://img.shields.io/badge/available_on-Test_Pilot-0996F8.svg)](https://testpilot.firefox.com/experiments/containers)
 
-[Embedded Web Extension](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Embedded_WebExtensions) to build [Containers](https://blog.mozilla.org/tanvi/2016/06/16/contextual-identities-on-the-web/) as a Firefox [Test Pilot](https://testpilot.firefox.com/) Experiment and [Shield Study](https://wiki.mozilla.org/Firefox/Shield/Shield_Studies) to learn:
+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/)
 
-* Will a general Firefox audience understand the Containers feature?
-* Is the UI as currently implemented in Nightly clear or discoverable?
+[Available on addons.mozilla.org](https://addons.mozilla.org/en-GB/firefox/addon/multi-account-containers/)
+
+**Note:** Firefox 57 + 58 users should Install from our [latest GitHub Release](https://github.com/mozilla/testpilot-containers/releases/latest)
 
 For more info, see: 
 
@@ -20,6 +20,19 @@ For more info, see:
 
 
 ## Development
+
+### Web Extension Development
+
+Since Firefox 57, this extension can now be run without any of the legacy components that were previously needed.
+
+1. Install web-ext with npm
+2. cd webextension; web-ext run -f Nightly
+
+This will work in other builds of Firefox however certain features won't work and you will need to manually flip preferences to enable containers. All other sections of this guide talk about using the legacy setup with jpm.
+
+
+## Legacy Development
+
 ### Development Environment
 
 Add-on development is better with [a particular  environment](https://developer.mozilla.org/en-US/Add-ons/Setting_up_extension_development_environment). One simple way to get that environment set up is to install the [DevPrefs add-on](https://addons.mozilla.org/en-US/firefox/addon/devprefs/). You can make a custom Firefox profile that includes the DevPrefs add-on, and use that profile when you run the code in this repository. 
@@ -40,6 +53,16 @@ Release & Beta channels do not allow un-signed add-ons, even with the DevPrefs.
 5. Click the gear, and select "Install Add-on From File..."
 6. Select the `.xpi` file
 
+#### Correct prefs
+
+Whilst this is still using legacy code to test you will need the following in your profile:
+
+Change the following prefs in about:config:
+
+- extensions.legacy.enabled = true
+- xpinstall.signatures.required = false
+
+
 #### Run the TxP experiment with `jpm`
 
 1. `git clone git@github.com:mozilla/testpilot-containers.git`
@@ -49,40 +72,50 @@ Release & Beta channels do not allow un-signed add-ons, even with the DevPrefs.
 
 Check out the [Browser Toolbox](https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox) for more information about debugging add-on code.
 
-#### Run the shield study with `shield`
-
-1. `git clone git@github.com:mozilla/testpilot-containers.git`
-2. `cd testpilot-containers`
-3. `npm install`
-4. `npm install -g shield-study-cli`
-5. `shield run . -- --binary Nightly`
-
 ### Building .xpi
 
 To build a local testpilot-containers.xpi, use the plain [`jpm
 xpi`](https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/jpm#jpm_xpi) command,
 or run `npm run build`.
 
-#### Building a shield .xpi
-To build a local shield-study-containers.xpi, run `npm run build-shield`.
-
-### Signing an .xpi
-
-To sign an .xpi, use [`jpm
-sign`](https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/jpm#jpm_sign)
-command.
-
-Note: You will need to be [an author on the AMO
-add-on](https://addons.mozilla.org/en-US/developers/addon/containers-experiment/ownership).
-
 ### Testing
 TBD
 
 ### Distributing
-TBD
+#### Make the new version
+
+1. Bump the version number in `package.json`, `install.rdf`, and
+   `manifest.json`
+2. Commit the version number bump
+3. Create a git tag for the version: `git tag <version>`
+4. Push the tag up to GitHub: `git push --tags`
+
+#### Publish to AMO
+While the add-on is an Embedded Web Extension, we have to use the [Mozilla
+Internal Signing
+Service](https://mana.mozilla.org/wiki/display/FIREFOX/Internal+Extension+Signing)
+to sign it as a Mozilla extension exempt from AMO's Web Extension restrictions.
+
+So, to distribute the add-on to AMO:
+
+1. Use `jpm xpi` to build the `.xpi` file
+2. [Submit the `.xpi` to the Internal Signing Service and download the signed `.xpi`](https://mana.mozilla.org/wiki/display/SVCOPS/Sign+a+Mozilla+Internal+Extension)
+3. [Upload the signed `.xpi` file to
+   AMO](https://addons.mozilla.org/en-US/developers/addon/multi-account-containers/versions/submit/)
+
+#### Publish to GitHub
+Finally, we also publish the release to GitHub for those followers.
+
+1. [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"
+   * Release notes: copy the output of `git log --no-merges --pretty=format:"%h %s" <previous-version>..<new-version>`
+   * Attach binaries: select the signed `.xpi` file
 
 ### Links
 
+Facebook & Twitter icons CC-Attrib http://fairheadcreative.com.
+
 - [Licence](./LICENSE.txt)
 - [Contributing](./CONTRIBUTING.md)
 - [Code Of Conduct](./CODE_OF_CONDUCT.md)

bootstrap.js

@@ -0,0 +1,187 @@
+"use strict";
+
+const PREFS = [
+  {
+    name: "privacy.userContext.enabled",
+    value: true,
+    type: "bool",
+    default: false
+  },
+  {
+    name: "privacy.userContext.longPressBehavior",
+    value: 2,
+    type: "int",
+    default: 0
+  },
+  {
+    name: "privacy.userContext.ui.enabled",
+    value: true, // Post web ext we will be setting this true
+    type: "bool",
+    default: true
+  },
+  {
+    name: "privacy.usercontext.about_newtab_segregation.enabled",
+    value: true,
+    type: "bool",
+    default: false
+  },
+];
+const Ci = Components.interfaces;
+const Cu = Components.utils;
+const Cc = Components.classes;
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+Cu.importGlobalProperties(["TextEncoder", "TextDecoder"]);
+
+XPCOMUtils.defineLazyModuleGetter(this, "OS",
+                                  "resource://gre/modules/osfile.jsm");
+
+const JETPACK_DIR_BASENAME = "jetpack";
+const EXTENSION_ID = "@testpilot-containers";
+
+function loadStyles(resourceURI) {
+  const styleSheetService = Cc["@mozilla.org/content/style-sheet-service;1"]
+                            .getService(Ci.nsIStyleSheetService);
+  const styleURI = styleSheet(resourceURI);
+  const sheetType = styleSheetService.AGENT_SHEET;
+  styleSheetService.loadAndRegisterSheet(styleURI, sheetType);
+}
+
+function styleSheet(resourceURI) {
+  return Services.io.newURI("data/usercontext.css", null, resourceURI);
+}
+
+function unloadStyles(resourceURI) {
+  const styleURI = styleSheet(resourceURI);
+  const styleSheetService = Cc["@mozilla.org/content/style-sheet-service;1"]
+                  .getService(Ci.nsIStyleSheetService);
+  const sheetType = styleSheetService.AGENT_SHEET;
+  if (styleSheetService.sheetRegistered(styleURI, sheetType)) {
+    styleSheetService.unregisterSheet(styleURI, sheetType);
+  }
+}
+
+function filename() {
+  const storeFile = Services.dirsvc.get("ProfD", Ci.nsIFile);
+  storeFile.append(JETPACK_DIR_BASENAME);
+  storeFile.append(EXTENSION_ID);
+  storeFile.append("simple-storage");
+  storeFile.append("store.json");
+  return storeFile.path;
+}
+
+async function makeFilepath() {
+  const storeFile = Services.dirsvc.get("ProfD", Ci.nsIFile);
+  storeFile.append(JETPACK_DIR_BASENAME);
+  await OS.File.makeDir(storeFile.path, { ignoreExisting: true });
+  storeFile.append(EXTENSION_ID);
+  await OS.File.makeDir(storeFile.path, { ignoreExisting: true });
+  storeFile.append("simple-storage");
+  await OS.File.makeDir(storeFile.path, { ignoreExisting: true });
+}
+
+async function getConfig() {
+  let savedConfig = {savedConfiguration: {}};
+  try {
+    const bytes = await OS.File.read(filename());
+    const raw = new TextDecoder().decode(bytes) || "";
+    if (raw) {
+      savedConfig = JSON.parse(raw);
+    }
+  } catch (e) {
+    // ignore file read errors, sometimes they happen and I'm not sure if we can fix
+  }
+  return savedConfig;
+}
+
+async function initConfig() {
+  const savedConfig = await getConfig();
+  savedConfig.savedConfiguration.version = 2;
+  if (!("prefs" in savedConfig.savedConfiguration)) {
+    savedConfig.savedConfiguration.prefs = {};
+    PREFS.forEach((pref) => {
+      if ("int" === pref.type) {
+        savedConfig.savedConfiguration.prefs[pref.name] = Services.prefs.getIntPref(pref.name);
+      } else {
+        savedConfig.savedConfiguration.prefs[pref.name] = Services.prefs.getBoolPref(pref.name);
+      }
+    });
+  }
+  const serialized = JSON.stringify(savedConfig);
+  const bytes = new TextEncoder().encode(serialized) || "";
+  await makeFilepath();
+  await OS.File.writeAtomic(filename(), bytes, { });
+}
+
+function setPrefs() {
+  PREFS.forEach((pref) => {
+    if ("int" === pref.type) {
+      Services.prefs.setIntPref(pref.name, pref.value);
+    } else {
+      Services.prefs.setBoolPref(pref.name, pref.value);
+    }
+  });
+}
+
+// eslint-disable-next-line no-unused-vars
+async function install() {
+  await initConfig();
+  setPrefs();
+}
+
+// eslint-disable-next-line no-unused-vars
+async function uninstall({resourceURI}, aReason) {
+  if (checkLegacyFirefox()) {
+    if (aReason === ADDON_UNINSTALL) {
+      unloadStyles(resourceURI);
+      await removeChanges();
+    }
+  }
+}
+
+async function removeChanges() {
+  const config = await getConfig();
+  const storedPrefs = config.savedConfiguration.prefs || {};
+  PREFS.forEach((pref) => {
+    let value = pref.default;
+    if (pref.name in storedPrefs) {
+      value = storedPrefs[pref.name];
+    }
+    if ("int" === pref.type) {
+      Services.prefs.setIntPref(pref.name, value);
+    } else {
+      Services.prefs.setBoolPref(pref.name, value);
+    }
+  });
+}
+
+function checkLegacyFirefox() {
+  const version = Services.appinfo.version;
+  const versionMatch = version.match(/^([0-9]+)\./)[1];
+  if (Number(versionMatch) <= 56) {
+    return true;
+  }
+  return false;
+}
+
+// eslint-disable-next-line no-unused-vars
+function startup({webExtension, resourceURI}) {
+  if (checkLegacyFirefox()) {
+    loadStyles(resourceURI);
+    // Reset prefs that may have changed, or are legacy
+    install();
+  }
+  // Start the embedded webextension.
+  webExtension.startup();
+}
+
+// eslint-disable-next-line no-unused-vars
+function shutdown({resourceURI}, aReason) {
+  if (checkLegacyFirefox()) {
+    unloadStyles(resourceURI);
+    if (aReason === ADDON_DISABLE) {
+      removeChanges();
+    }
+  }
+}
+

data/usercontext.css

@@ -1,108 +1,3 @@
-/* HACK: Custom Container vars do not propigate correctly
-until the container tab is blurred and refocused,
-adding the data-identity-color with the default hex
-value, or chrome url path as an alternate selector mitiages this bug.*/
-[data-identity-color="blue"],
-[data-identity-color="#00a7e0"] {
-  --identity-tab-color: #37adff;
-  --identity-icon-color: #37adff;
-}
-
-[data-identity-color="turquoise"],
-[data-identity-color="#01bdad"] {
-  --identity-tab-color: #00c79a;
-  --identity-icon-color: #00c79a;
-}
-
-[data-identity-color="green"],
-[data-identity-color="#7dc14c"] {
-  --identity-tab-color: #51cd00;
-  --identity-icon-color:  #51cd00;
-}
-
-[data-identity-color="yellow"],
-[data-identity-color="#ffcb00"] {
-  --identity-tab-color: #ffcb00;
-  --identity-icon-color: #ffcb00;
-}
-
-[data-identity-color="orange"],
-[data-identity-color="#f89c24"] {
-  --identity-tab-color: #ff9f00;
-  --identity-icon-color: #ff9f00;
-}
-
-[data-identity-color="red"],
-[data-identity-color="#d92215"] {
-  --identity-tab-color: #ff613d;
-  --identity-icon-color: #ff613d;
-}
-
-[data-identity-color="pink"],
-[data-identity-color="#ee5195"] {
-  --identity-tab-color: #ff4bda;
-  --identity-icon-color: #ff4bda;
-}
-
-[data-identity-color="purple"],
-[data-identity-color="#7a2f7a"] {
-  --identity-tab-color: #af51f5;
-  --identity-icon-color: #af51f5;
-}
-
-[data-identity-icon="fingerprint"],
-[data-identity-icon="chrome://browser/skin/usercontext/personal.svg"] {
-  --identity-icon: url("/data/usercontext.svg#fingerprint");
-}
-
-[data-identity-icon="briefcase"],
-[data-identity-icon="chrome://browser/skin/usercontext/work.svg"] {
-  --identity-icon: url("/data/usercontext.svg#briefcase");
-}
-
-[data-identity-icon="dollar"],
-[data-identity-icon="chrome://browser/skin/usercontext/banking.svg"] {
-  --identity-icon: url("/data/usercontext.svg#dollar");
-}
-
-[data-identity-icon="cart"],
-[data-identity-icon="chrome://browser/skin/usercontext/cart.svg"],
-[data-identity-icon="chrome://browser/skin/usercontext/shopping.svg"] {
-  --identity-icon: url("/data/usercontext.svg#cart");
-}
-
-[data-identity-icon="circle"] {
-  --identity-icon: url("/data/usercontext.svg#circle");
-}
-
-[data-identity-icon="gift"] {
-  --identity-icon: url("/data/usercontext.svg#gift");
-}
-
-[data-identity-icon="vacation"] {
-  --identity-icon: url("/data/usercontext.svg#vacation");
-}
-
-[data-identity-icon="food"] {
-  --identity-icon: url("/data/usercontext.svg#food");
-}
-
-[data-identity-icon="fruit"] {
-  --identity-icon: url("/data/usercontext.svg#fruit");
-}
-
-[data-identity-icon="pet"] {
-  --identity-icon: url("/data/usercontext.svg#pet");
-}
-
-[data-identity-icon="tree"] {
-  --identity-icon: url("/data/usercontext.svg#tree");
-}
-
-[data-identity-icon="chill"] {
-  --identity-icon: url("/data/usercontext.svg#chill");
-}
-
 #userContext-indicator {
   height: 16px;
   list-style-image: none !important;
@@ -129,19 +24,6 @@ value, or chrome url path as an alternate selector mitiages this bug.*/
   display: none;
 }
 
-.userContext-icon,
-.menuitem-iconic[data-usercontextid] > .menu-iconic-left > .menu-iconic-icon,
-.subviewbutton[usercontextid] > .toolbarbutton-icon,
-#userContext-indicator {
-  background-image: var(--identity-icon) !important;
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: contain;
-  fill: var(--identity-icon-color) !important;
-  filter: url(/img/filters.svg#fill);
-  filter: url(/data/filters.svg#fill);
-}
-
 /* containers experiment */
 
 /* reset nightly containers */

docs/metrics.md

@@ -1,285 +0,0 @@
-# METRICS
-
-## Data Analysis
-The collected data will primarily be used to answer the following questions.
-Images are used for visualization and are not composed of actual data.
-
-### Do users install and run this?
-
-What is the overall engagement of the Containers experiment?
-**This is the standard Daily Active User (DAU) and Monthly Active User (MAU) analysis.**
-
-This captures data from the users who have the add-on installed, regardless of
-whether they are actively interacting with it.
-
-![](kpi-1.png)
-
-### Immediate Questions
-
-* Do people use the containers feature & how do people create new container tabs?
-  * Click to create new container tab
-    * \+ `entry-point` value: "tab-bar" or "pop-up"
-* Do people who use the containers feature continue to use it?
-  * Retention: opening a second container tab (second tab in the same container, or a tab in a second container?)
-* What containers do people use?
-  * userContextId
-    * \+ Number of tabs in the container (when should we measure this? on every tab open?)
-* Do people edit their containers?
-  * Click on "Edit Containers"
-  * Click to edit a single container
-    * Click "OK"
-  * Click to delete a single container
-    * Click "OK"
-  * Click to add a container
-    * Click "OK"
-* Do people sort the tabs?
-  * Click sort
-    * \+ Number of tabs when clicked
-  * Average number of container tabs when sort was clicked
-* Do users show and hide container tabs?
-  * Click hide
-    * \+ Number of tabs when clicked
-    * \+ Number of hidden containers when clicked
-  * Click show
-    * \+ Number of tabs when clicked
-    * \+ Number of shown containers when clicked
-* Do users move container tabs to new windows?
-  * Click move
-    * \+ Number of tabs when clicked
-  * Average number of container tabs when new window was clicked
-* How many containers do users have hidden at the same time? (when should we measure this? each time a container is hidden?)
-* Do users pin container tabs? (do we have existing Telemetry for pinning?)
-* Do users visit more pages in container tabs than non-container tabs?
-
-### Follow-up Questions
-
-What are some follow-up questions we anticipate we will ask based on any of the
-above answers/data?
-
-* What is the average lifespan of a container tab? Is that longer or shorter than a regular tab? (if we don't have data on the latter, the former probably isn't worth gathering data on since we will have nothing to compare it to).
-
-## Data Collection
-
-### Server Side
-There is currently no server side component to Containers.
-
-### Client Side
-Containers will use Test Pilot Telemetry with no batching of data.  Details
-of when pings are sent are below, along with examples of the `payload` portion
-of a `testpilottest` telemetry ping for each scenario.
-
-* The user shows the new tab menu
-
-```js
-  {
-    "uuid": <uuid>,
-    "event": "show-plus-button-menu",
-    "eventSource": ["plus-button"]
-  }
-```
-
-* The user clicks on a container name to open a tab in that container
-
-```js
-  {
-    "uuid": <uuid>,
-    "userContextId": <userContextId>,
-    "clickedContainerTabCount": <number-of-tabs-in-the-container>,
-    "event": "open-tab",
-    "eventSource": ["tab-bar"|"pop-up"|"file-menu"|"alltabs-menu"|"plus-button"]
-  }
-```
-
-* The user clicks "Edit Containers" in the pop-up
-
-```js
-  {
-    "uuid": <uuid>,
-    "event": "edit-containers"
-  }
-```
-
-* The user clicks OK after clicking on a container edit icon in the pop-up
-
-```js
-  {
-    "uuid": <uuid>,
-    "userContextId": <userContextId>,
-    "event": "edit-container"
-  }
-```
-
-* The user clicks OK after clicking on a container delete icon in the pop-up
-
-```js
-  {
-    "uuid": <uuid>,
-    "userContextId": <userContextId>,
-    "event": "delete-container"
-  }
-```
-
-* The user clicks OK after clicking to add a container in the pop-up
-
-```js
-  {
-    "uuid": <uuid>,
-    "event": "add-container"
-  }
-```
-
-* The user clicks the sort button/icon in the pop-up
-
-```js
-  {
-    "uuid": <uuid>,
-    "event": "sort-tabs",
-    "shownContainersCount": <number-of-containers-with-tabs-shown>,
-    "totalContainerTabsCount": <number-of-all-container-tabs>,
-    "totalNonContainerTabsCount": <number-of-all-non-container-tabs>
-  }
-```
-
-* The user clicks "Hide these container tabs" in the popup
-
-```js
-  {
-    "uuid": <uuid>,
-    "userContextId": <userContextId>,
-    "clickedContainerTabCount": <number-of-tabs-in-the-container>,
-    "event": "hide-tabs",
-    "hiddenContainersCount": <number-of-containers-with-tabs-hidden>,
-    "shownContainersCount": <number-of-containers-with-tabs-shown>,
-    "totalContainersCount": <number-of-containers-with-tabs-hidden-or-shown>
-  }
-```
-
-* The user clicks "Show these container tabs" in the popup
-
-```js
-  {
-    "uuid": <uuid>,
-    "userContextId": <userContextId>,
-    "clickedContainerTabCount": <number-of-tabs-in-the-container>,
-    "event": "show-tabs",
-    "hiddenContainersCount": <number-of-containers-with-tabs-hidden>,
-    "shownContainersCount": <number-of-containers-with-tabs-shown>,
-    "totalContainersCount": <number-of-containers-with-tabs-hidden-or-shown>
-  }
-```
-
-* The user clicks "Move tabs to a new window" in the popup
-
-```js
-  {
-    "uuid": <uuid>,
-    "userContextId": <userContextId>,
-    "clickedContainerTabCount": <number-of-tabs-in-the-container>,
-    "event": "move-tabs-to-window"
-  }
-```
-
-* When a user encounters the disabled "move" feature because of incompatible add-ons
-
-```js
-  {
-    "uuid": <uuid>,
-    "event": "incompatible-addons-detected"
-  }
-```
-
-* The user closes a tab
-
-```js
-  {
-    "uuid": <uuid>,
-    "userContextId": <userContextId>,
-    "event": "page-requests-completed-per-tab",
-    "pageRequestCount": <pageRequestCount>
-  }
-```
-
-* The user goes idle
-
-```js
-  {
-    "uuid": <uuid>,
-    "userContextId": <userContextId>,
-    "event": "page-requests-completed-per-activity",
-    "pageRequestCount": <pageRequestCount>
-  }
-```
-
-* The user chooses "Always Open in this Container" context menu option. (Note: We send two separate event names: one for assigning a site to a container, one for removing a site from a container.)
-
-```js
-  {
-    "uuid": <uuid>,
-    "userContextId": <userContextId>,
-    "event": "[added|removed]-container-assignment"
-  }
-```
-
-* Firefox prompts the user to reload a site into a container after the user picked "Always Open in this Container".
-
-```js
-  {
-    "uuid": <uuid>,
-    "userContextId": <userContextId>,
-    "event": "prompt-reload-page-in-container"
-  }
-```
-
-* The user clicks "Open in *assigned* container" to reload a site into a container after the user picked "Always Open in this Container".
-
-```js
-  {
-    "uuid": <uuid>,
-    "event": "click-to-reload-page-in-container"
-  }
-```
-
-* The user clicks "Open in *Current* container" to reload a site into a container after the user picked "Always Open in this Container".
-
-```js
-  {
-    "uuid": <uuid>,
-    "event": "click-to-reload-page-in-same-container"
-  }
-```
-
-* Firefox automatically reloads a site into a container after the user picked "Always Open in this Container".
-
-```js
-  {
-    "uuid": <uuid>,
-    "userContextId": <userContextId>,
-    "event": "auto-reload-page-in-container"
-  }
-```
-
-### A Redshift schema for the payload:
-
-```lua
-local schema = {
---   column name                    field type   length  attributes   field name
-    {"uuid",                        "VARCHAR",   255,    nil,         "Fields[payload.uuid]"},
-    {"userContextId",               "INTEGER",   255,    nil,         "Fields[payload.userContextId]"},
-    {"clickedContainerTabCount",    "INTEGER",   255,    nil,         "Fields[payload.clickedContainerTabCount]"},
-    {"eventSource",                 "VARCHAR",   255,    nil,         "Fields[payload.eventSource]"},
-    {"event",                       "VARCHAR",   255,    nil,         "Fields[payload.event]"},
-    {"pageRequestCount",            "INTEGER",   255,    nil,         "Fields[payload.pageRequestCount]"}
-    {"hiddenContainersCount",       "INTEGER",   255,    nil,         "Fields[payload.hiddenContainersCount]"},
-    {"shownContainersCount",        "INTEGER",   255,    nil,         "Fields[payload.shownContainersCount]"},
-    {"totalContainersCount",        "INTEGER",   255,    nil,         "Fields[payload.totalContainersCount]"},
-    {"totalContainerTabsCount",     "INTEGER",   255,    nil,         "Fields[payload.totalContainerTabsCount]"},
-    {"totalNonContainerTabsCount",  "INTEGER",   255,    nil,         "Fields[payload.totalNonContainerTabsCount]"}
-}
-```
-
-### Valid data should be enforced on the server side:
-
-* `eventSource` should be one of `tab-bar`, `pop-up`, `file-menu`, "alltabs-nmenu" or "plus-button".
-
-All Mozilla data is kept by default for 180 days and in accordance with our
-privacy policies.

install.rdf

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+  <Description about="urn:mozilla:install-manifest">
+    <em:id>@testpilot-containers</em:id>
+    <em:type>2</em:type>
+    <em:bootstrap>true</em:bootstrap>
+    <em:multiprocessCompatible>true</em:multiprocessCompatible>
+    <em:hasEmbeddedWebExtension>true</em:hasEmbeddedWebExtension>
+    <em:name>Multi-Account Containers</em:name>
+    <em: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.</em:description>
+    <em:targetApplication>
+      <Description>
+        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <!--Firefox-->
+        <em:minVersion>53.0</em:minVersion>
+        <em:maxVersion>*</em:maxVersion>
+      </Description>
+    </em:targetApplication>
+    <em:version>4.1.0</em:version>
+    <em:unpack>false</em:unpack>
+  </Description>
+</RDF>
+

lib/shield/event-target.js

@@ -1,55 +0,0 @@
-/**
- * Drop-in replacement for {@link external:sdk/event/target.EventTarget} for use
- * with es6 classes.
- * @module event-target
- * @author Martin Giger
- * @license MPL-2.0
- */
- /**
- * An SDK class that add event reqistration methods
- * @external sdk/event/target
- * @requires sdk/event/target
- */
-/**
- * @class EventTarget
- * @memberof external:sdk/event/target
- * @see {@link https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/event_target#EventTarget}
- */
-
-// slightly modified from:  https://raw.githubusercontent.com/freaktechnik/justintv-stream-notifications/master/lib/event-target.js
-
-"use strict";
-
-const { on, once, off, setListeners } = require("sdk/event/core");
-
-/* istanbul ignore next */
-/**
- * @class
- */
-class EventTarget {
-    constructor(options) {
-        setListeners(this, options);
-    }
-
-    on(...args) {
-        on(this, ...args);
-        return this;
-    }
-
-    once(...args) {
-        once(this, ...args);
-        return this;
-    }
-
-    off(...args) {
-        off(this, ...args);
-        return this;
-    }
-
-    removeListener(...args) {
-        off(this, ...args);
-        return this;
-    }
-}
-
-exports.EventTarget = EventTarget;

lib/shield/index.js

@@ -1,428 +0,0 @@
-"use strict";
-
-// Chrome privileged
-const {Cu} = require("chrome");
-const { Services } = Cu.import("resource://gre/modules/Services.jsm");
-const { TelemetryController } = Cu.import("resource://gre/modules/TelemetryController.jsm");
-const CID = Cu.import("resource://gre/modules/ClientID.jsm");
-
-// sdk
-const { merge } = require("sdk/util/object");
-const querystring = require("sdk/querystring");
-const { prefs } = require("sdk/simple-prefs");
-const prefSvc = require("sdk/preferences/service");
-const { setInterval } = require("sdk/timers");
-const tabs = require("sdk/tabs");
-const { URL } = require("sdk/url");
-
-const { EventTarget } = require("./event-target");
-const { emit } = require("sdk/event/core");
-const self = require("sdk/self");
-
-const DAY = 86400*1000;
-
-// ongoing within-addon fuses / timers
-let lastDailyPing = Date.now();
-
-/* Functional, self-contained utils */
-
-// equal probability choices from a list "choices"
-function chooseVariation(choices,rng=Math.random()) {
-  let l = choices.length;
-  return choices[Math.floor(l*Math.random())];
-}
-
-function dateToUTC(date) {
-    return Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
-}
-
-function generateTelemetryIdIfNeeded() {
-  let id = TelemetryController.clientID;
-  /* istanbul ignore next */
-  if (id == undefined) {
-    return CID.ClientIDImpl._doLoadClientID()
-  } else {
-    return Promise.resolve(id)
-  }
-}
-
-function userId () {
-  return prefSvc.get("toolkit.telemetry.cachedClientID","unknown");
-}
-
-var Reporter = new EventTarget().on("report",
-  (d) => prefSvc.get('shield.debug') && console.log("report",d)
-);
-
-function report(data, src="addon", bucket="shield-study") {
-  data = merge({}, data , {
-    study_version: self.version,
-    about: {
-      _src: src,
-      _v: 2
-    }
-  });
-  if (prefSvc.get('shield.testing')) data.testing = true
-
-  emit(Reporter, "report", data);
-  let telOptions = {addClientId: true, addEnvironment: true}
-  return TelemetryController.submitExternalPing(bucket, data, telOptions);
-}
-
-function survey (url, queryArgs={}) {
-  if (! url) return
-
-  let U = new URL(url);
-  let q = U.search;
-  if (q) {
-    url = U.href.split(q)[0];
-    q = querystring.parse(querystring.unescape(q.slice(1)));
-  } else {
-    q = {};
-  }
-  // get user info.
-  let newArgs = merge({},
-    q,
-    queryArgs
-  );
-  let searchstring = querystring.stringify(newArgs);
-  url = url + "?" + searchstring;
-  return url;
-}
-
-
-function setOrGetFirstrun () {
-  let firstrun = prefs["shield.firstrun"];
-  if (firstrun === undefined) {
-    firstrun = prefs["shield.firstrun"] = String(dateToUTC(new Date())) // in utc, user set
-  }
-  return Number(firstrun)
-}
-
-function reuseVariation (choices) {
-  return prefs["shield.variation"];
-}
-
-function setVariation (choice) {
-  prefs["shield.variation"] = choice
-  return choice
-}
-
-function die (addonId=self.id) {
-  /* istanbul ignore else */
-  if (prefSvc.get("shield.fakedie")) return;
-  /* istanbul ignore next */
-  require("sdk/addon/installer").uninstall(addonId);
-}
-
-// TODO: GRL vulnerable to clock time issues #1
-function expired (xconfig, now = Date.now() ) {
-  return ((now - Number(xconfig.firstrun))/ DAY) > xconfig.days;
-}
-
-function resetShieldPrefs () {
-  delete prefs['shield.firstrun'];
-  delete prefs['shield.variation'];
-}
-
-function cleanup () {
-  prefSvc.keys(`extensions.${self.preferencesBranch}`).forEach (
-  (p) => {
-    delete prefs[p];
-  })
-}
-
-function telemetrySubset (xconfig) {
-  return {
-    study_name: xconfig.name,
-    branch: xconfig.variation,
-  }
-}
-
-class Study extends EventTarget {
-  constructor (config) {
-    super();
-    this.config = merge({
-      name: self.addonId,
-      variations: {'observe-only': () => {}},
-      surveyUrls: {},
-      days: 7
-    },config);
-
-    this.config.firstrun = setOrGetFirstrun();
-
-    let variation = reuseVariation();
-    if (variation === undefined) {
-      variation = this.decideVariation();
-      if (!(variation in this.config.variations)) {
-        // chaijs doesn't think this is an instanceof Error
-        // freaktechnik and gregglind debugged for a while.
-        // sdk errors might not be 'Errors' or chai is wack, who knows.
-        // https://dxr.mozilla.org/mozilla-central/search?q=regexp%3AError%5Cs%3F(%3A%7C%3D)+path%3Aaddon-sdk%2Fsource%2F&redirect=false would list
-        throw new Error("Study Error: chosen variation must be in config.variations")
-      }
-      setVariation(variation);
-    }
-    this.config.variation = variation;
-
-    this.flags = {
-      ineligibleDie: undefined
-    };
-    this.states = [];
-    // all these work, but could be cleaner.  I hate the `bind` stuff.
-    this.on(
-      "change", (function (newstate) {
-        prefSvc.get('shield.debug') && console.log(newstate, this.states);
-        this.states.push(newstate);
-        emit(this, newstate);  // could have checks here.
-      }).bind(this)
-    )
-    this.on(
-      "starting", (function () {
-        this.changeState("modifying");
-      }).bind(this)
-    )
-    this.on(
-      "maybe-installing", (function () {
-        if (!this.isEligible()) {
-          this.changeState("ineligible-die");
-        } else {
-          this.changeState("installed")
-        }
-      }).bind(this)
-    )
-    this.on(
-      "ineligible-die", (function () {
-        try {this.whenIneligible()} catch (err) {/*ok*/} finally { /*ok*/ }
-        this.flags.ineligibleDie = true;
-        this.report(merge({}, telemetrySubset(this.config), {study_state: "ineligible"}), "shield");
-        this.final();
-        die();
-      }).bind(this)
-    )
-    this.on(
-      "installed", (function () {
-        try {this.whenInstalled()} catch (err) {/*ok*/} finally { /*ok*/ }
-        this.report(merge({}, telemetrySubset(this.config), {study_state: "install"}), "shield");
-        this.changeState("modifying");
-      }).bind(this)
-    )
-    this.on(
-      "modifying", (function () {
-        var mybranchname = this.variation;
-        this.config.variations[mybranchname]();  // do the effect
-        this.changeState("running");
-      }).bind(this)
-    )
-    this.on(  // the one 'many'
-      "running", (function () {
-        // report success
-        this.report(merge({}, telemetrySubset(this.config), {study_state: "running"}), "shield");
-        this.final();
-      }).bind(this)
-    )
-    this.on(
-      "normal-shutdown", (function () {
-        this.flags.dying = true;
-        this.report(merge({}, telemetrySubset(this.config), {study_state: "shutdown"}), "shield");
-        this.final();
-      }).bind(this)
-    )
-    this.on(
-      "end-of-study", (function () {
-        if (this.flags.expired) {  // safe to call multiple times
-          this.final();
-          return;
-        } else {
-          // first time seen.
-          this.flags.expired = true;
-          try {this.whenComplete()} catch (err) { /*ok*/ } finally { /*ok*/ }
-          this.report(merge({}, telemetrySubset(this.config) ,{study_state: "end-of-study"}), "shield");
-          // survey for end of study
-          let that = this;
-          generateTelemetryIdIfNeeded().then(()=>that.showSurvey("end-of-study"));
-          try {this.cleanup()} catch (err) {/*ok*/} finally { /*ok*/ }
-          this.final();
-          die();
-        }
-      }).bind(this)
-    )
-    this.on(
-      "user-uninstall-disable", (function () {
-        if (this.flags.dying) {
-          this.final();
-          return;
-        }
-        this.flags.dying = true;
-        this.report(merge({}, telemetrySubset(this.config), {study_state: "user-ended-study"}), "shield");
-        let that = this;
-        generateTelemetryIdIfNeeded().then(()=>that.showSurvey("user-ended-study"));
-        try {this.cleanup()} catch (err) {/*ok*/} finally { /*ok*/ }
-        this.final();
-        die();
-      }).bind(this)
-    )
-  }
-
-  get state () {
-    let n = this.states.length;
-    return n ? this.states[n-1]  : undefined
-  }
-
-  get variation () {
-    return this.config.variation;
-  }
-
-  get firstrun () {
-    return this.config.firstrun;
-  }
-
-  dieIfExpired () {
-    let xconfig = this.config;
-    if (expired(xconfig)) {
-      emit(this, "change", "end-of-study");
-      return true
-    } else {
-      return false
-    }
-  }
-
-  alivenessPulse (last=lastDailyPing) {
-    // check for new day, phone home if true.
-    let t = Date.now();
-    if ((t - last) >= DAY) {
-      lastDailyPing = t;
-      // phone home
-      emit(this,"change","running");
-    }
-    // check expiration, and die with report if needed
-    return this.dieIfExpired();
-  }
-
-  changeState (newstate) {
-    emit(this,'change', newstate);
-  }
-
-  final () {
-    emit(this,'final', {});
-  }
-
-  startup (reason) {
-    // https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Listening_for_load_and_unload
-
-    // check expiry first, before anything, quit and die if so
-
-    // check once, right away, short circuit both install and startup
-    // to prevent modifications from happening.
-    if (this.dieIfExpired()) return this
-
-    switch (reason) {
-      case "install":
-        emit(this, "change", "maybe-installing");
-        break;
-
-      case "enable":
-      case "startup":
-      case "upgrade":
-      case "downgrade":
-        emit(this, "change", "starting");
-    }
-
-    if (! this._pulseTimer) this._pulseTimer = setInterval(this.alivenessPulse.bind(this), 5*60*1000 /*5 minutes */)
-    return this;
-  }
-
-  shutdown (reason) {
-    // https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Listening_for_load_and_unload
-    if (this.flags.ineligibleDie ||
-      this.flags.expired ||
-      this.flags.dying
-    ) { return this }        // special cases.
-
-    switch (reason) {
-      case "uninstall":
-      case "disable":
-        emit(this, "change", "user-uninstall-disable");
-        break;
-
-      // 5. usual end of session.
-      case "shutdown":
-      case "upgrade":
-      case "downgrade":
-        emit(this, "change", "normal-shutdown")
-        break;
-    }
-    return this;
-  }
-
-  cleanup () {
-    // do the simple prefs and simplestorage cleanup
-    // extend by extension
-    resetShieldPrefs();
-    cleanup();
-  }
-
-  isEligible () {
-    return true;
-  }
-
-  whenIneligible () {
-    // empty function unless overrided
-  }
-
-  whenInstalled () {
-    // empty unless overrided
-  }
-
-  whenComplete () {
-    // when the study expires
-  }
-
-  /**
-    * equal choice from varations, by default.  override to get unequal
-    */
-  decideVariation (rng=Math.random()) {
-    return chooseVariation(Object.keys(this.config.variations), rng);
-  }
-
-  get surveyQueryArgs () {
-    return {
-      variation: this.variation,
-      xname: this.config.name,
-      who: userId(),
-      updateChannel: Services.appinfo.defaultUpdateChannel,
-      fxVersion: Services.appinfo.version,
-    }
-  }
-
-  showSurvey(reason) {
-    let partial = this.config.surveyUrls[reason];
-
-    let queryArgs = this.surveyQueryArgs;
-    queryArgs.reason = reason;
-    if (partial) {
-      let url = survey(partial, queryArgs);
-      tabs.open(url);
-      return url
-    } else {
-      return
-    }
-  }
-
-  report () {  // convenience only
-    return report.apply(null, arguments);
-  }
-}
-
-module.exports = {
-  chooseVariation: chooseVariation,
-  die: die,
-  expired: expired,
-  generateTelemetryIdIfNeeded: generateTelemetryIdIfNeeded,
-  report: report,
-  Reporter: Reporter,
-  resetShieldPrefs: resetShieldPrefs,
-  Study:  Study,
-  cleanup: cleanup,
-  survey: survey
-}

lib/testpilot/experiment.js

@@ -1,95 +0,0 @@
-const { AddonManager } = require('resource://gre/modules/AddonManager.jsm');
-const { ClientID } = require('resource://gre/modules/ClientID.jsm');
-const Events = require('sdk/system/events');
-const { Services } = require('resource://gre/modules/Services.jsm');
-const { storage } = require('sdk/simple-storage');
-const {
-  TelemetryController
-} = require('resource://gre/modules/TelemetryController.jsm');
-const { Request } = require('sdk/request');
-
-
-const EVENT_SEND_METRIC = 'testpilot::send-metric';
-const startTime = (Services.startup.getStartupInfo().process);
-
-function makeTimestamp(timestamp) {
-  return Math.round((timestamp - startTime) / 1000);
-}
-
-function experimentPing(event) {
-  const timestamp = new Date();
-  const { subject, data } = event;
-  let parsed;
-  try {
-    parsed = JSON.parse(data);
-  } catch (err) {
-    // eslint-disable-next-line no-console
-    return console.error(`Dropping bad metrics packet: ${err}`);
-  }
-
-  AddonManager.getAddonByID(subject, addon => {
-    const payload = {
-      test: subject,
-      version: addon.version,
-      timestamp: makeTimestamp(timestamp),
-      variants: storage.experimentVariants &&
-        subject in storage.experimentVariants
-        ? storage.experimentVariants[subject]
-        : null,
-      payload: parsed
-    };
-    TelemetryController.submitExternalPing('testpilottest', payload, {
-      addClientId: true,
-      addEnvironment: true
-    });
-
-    // TODO: DRY up this ping centre code here and in lib/Telemetry.
-    const pcPing = TelemetryController.getCurrentPingData();
-    pcPing.type = 'testpilot';
-    pcPing.payload = payload;
-    const pcPayload = {
-      // 'method' is used by testpilot-metrics library.
-      // 'event' was used before that library existed.
-      event_type: parsed.event || parsed.method,
-      client_time: makeTimestamp(parsed.timestamp || timestamp),
-      addon_id: subject,
-      addon_version: addon.version,
-      firefox_version: pcPing.environment.build.version,
-      os_name: pcPing.environment.system.os.name,
-      os_version: pcPing.environment.system.os.version,
-      locale: pcPing.environment.settings.locale,
-      // Note: these two keys are normally inserted by the ping-centre client.
-      client_id: ClientID.getCachedClientID(),
-      topic: 'testpilot'
-    };
-    // Add any other extra top-level keys = require(the payload, possibly including
-    // 'object' or 'category', among others.
-    Object.keys(parsed).forEach(f => {
-      // Ignore the keys we've already added to `pcPayload`.
-      const ignored = ['event', 'method', 'timestamp'];
-      if (!ignored.includes(f)) {
-        pcPayload[f] = parsed[f];
-      }
-    });
-
-    const req = new Request({
-      url: 'https://tiles.services.mozilla.com/v3/links/ping-centre',
-      contentType: 'application/json',
-      content: JSON.stringify(pcPayload)
-    });
-    req.post();
-  });
-}
-
-function Experiment() {
-  // If the user has @testpilot-addon, it already bound
-  // experimentPing to testpilot::send-metric,
-  // so we don't need to bind this one
-  AddonManager.getAddonByID('@testpilot-addon', addon => {
-    if (!addon) {
-      Events.on(EVENT_SEND_METRIC, experimentPing);
-    }
-  });
-}
-
-module.exports = Experiment;

package.json

@@ -1,8 +1,8 @@
 {
   "name": "testpilot-containers",
-  "title": "Containers Experiment",
-  "description": "Containers works by isolating cookie jars using separate origin-attributes defined visually by colored ‘Container Tabs’. This add-on is a modified version of the containers feature for Firefox Test Pilot.",
-  "version": "2.4.1",
+  "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": "4.1.0",
   "author": "Andrea Marchesini, Luke Crouch and Jonathan Kingston",
   "bugs": {
     "url": "https://github.com/mozilla/testpilot-containers/issues"
@@ -18,23 +18,11 @@
     "jpm": "^1.2.2",
     "json": "^9.0.6",
     "npm-run-all": "^4.0.0",
-    "shield-studies-addon-utils": "^2.0.0",
     "stylelint": "^7.9.0",
     "stylelint-config-standard": "^16.0.0",
-    "stylelint-order": "^0.3.0",
-    "testpilot-metrics": "^2.1.0"
+    "stylelint-order": "^0.3.0"
   },
-  "engines": {
-    "firefox": ">=51.0"
-  },
-  "permissions": {
-    "multiprocess": true
-  },
-  "hasEmbeddedWebExtension": true,
   "homepage": "https://github.com/mozilla/testpilot-containers#readme",
-  "keywords": [
-    "jetpack"
-  ],
   "license": "MPL-2.0",
   "main": "index.js",
   "repository": {
@@ -43,7 +31,6 @@
   },
   "scripts": {
     "build": "npm test && jpm xpi",
-    "build-shield": "npm test && npm run package-shield",
     "deploy": "deploy-txp",
     "lint": "npm-run-all lint:*",
     "lint:addon": "addons-linter webextension --self-hosted",
@@ -51,8 +38,6 @@
     "lint:html": "htmllint webextension/*.html",
     "lint:js": "eslint .",
     "package": "npm run build && mv testpilot-containers.xpi addon.xpi",
-    "package-shield": "./node_modules/.bin/json -I -f package.json -e 'this.name=\"shield-study-containers\"' && jpm xpi && ./node_modules/.bin/json -I -f package.json -e 'this.name=\"testpilot-containers\"'",
     "test": "npm run lint"
-  },
-  "updateURL": "https://testpilot.firefox.com/files/@testpilot-containers/updates.json"
+  }
 }

study.js

@@ -1,40 +0,0 @@
-/* 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/. */
-
-const self = require("sdk/self");
-const { when: unload } = require("sdk/system/unload");
-
-const shield = require("./lib/shield/index");
-
-const surveyUrl = "https://www.surveygizmo.com/s3/3621810/shield-txp-containers";
-
-const studyConfig = {
-  name: self.addonId,
-  days: 28,
-  surveyUrls: {
-    "end-of-study": surveyUrl,
-    "user-ended-study": surveyUrl,
-    ineligible: null,
-  },
-  variations: {
-    "control": () => {},
-    "securityOnboarding": () => {}
-  }
-};
-
-class ContainersStudy extends shield.Study {
-  isEligible () {
-    // If the user already has testpilot-containers extension, they are in the
-    // Test Pilot experiment, so exclude them.
-    return super.isEligible();
-  }
-}
-
-const thisStudy = new ContainersStudy(studyConfig);
-
-if (self.id === "@shield-study-containers") {
-  unload((reason) => thisStudy.shutdown(reason));
-}
-
-exports.study = thisStudy;

testpilot-metrics.js

@@ -1,336 +0,0 @@
-// 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/.
-const Experiment = require('./lib/testpilot/experiment');
-
-const experiment = new Experiment();
-
-/**
- * Class that represents a metrics event broker. Events are sent to Google
- * Analytics if the `tid` parameter is set. Events are sent to Mozilla's
- * data pipeline via the Test Pilot add-on. No metrics code changes are
- * needed when the experiment is added to or removed from Test Pilot.
- * @constructor
- * @param {string} $0.id - addon ID, e.g. '@testpilot-addon'. See https://mdn.io/add_on_id.
- * @param {string} $0.version - addon version, e.g. '1.0.2'.
- * @param {string} [$0.uid] - unique identifier for a specific instance of an addon.
- * Optional, but required to send events to Google Analytics. Sent to Google Analytics
- * but not Mozilla services.
- * @param {string} [$0.tid] - Google Analytics tracking ID. Optional, but required
- * to send events to Google Analytics.
- * @param {string} [$0.type=webextension] - addon type. one of: 'webextension',
- * 'sdk', 'bootstrapped'.
- * @param {boolean} [$0.debug=false] - if true, enables logging. Note that this
- * value can be changed on a running instance, by modifying its `debug` property.
- * @throws {SyntaxError} If the required properties are missing, or if the
- * 'type' property is unrecognized.
- * @throws {Error} if initializing the transports fails.
- */
-function Metrics({id, version, uid, tid = null, type = 'webextension', debug = false}) {
-  if (!id) {
-    throw new SyntaxError(`'id' property is required.`);
-  } else if (!version) {
-    throw new SyntaxError(`'version' property is required.`);
-  } else if (tid && !uid) {
-    throw new SyntaxError(`'uid' property is required to send events to Google Analytics.`);
-  }
-
-  if (!['webextension', 'sdk', 'bootstrapped'].includes(type)) {
-    throw new SyntaxError(`'type' property must be one of: 'webextension', 'sdk', or 'bootstrapped'`);
-  }
-  Object.assign(this, {id, uid, version, tid, type, debug});
-
-  // The test pilot add-on uses its own nsIObserverService topic for sending
-  // pings to Telemetry. Otherwise, the topic is based on add-on type.
-  if (id === '@testpilot-addon') {
-    this.topic = 'testpilot';
-  } else if (type === 'webextension') {
-    this.topic = 'testpilot-telemetry';
-  } else {
-    this.topic = 'testpilottest';
-  }
-
-  // NOTE: order is important here. _initTransports uses console.log, which may
-  // not be available before _initConsole has run.
-  this._initConsole();
-  this._initTransports();
-
-  this.sendEvent = this.sendEvent.bind(this);
-
-  this._log(`Initialized topic to ${this.topic}`);
-  if (!tid) {
-    this._log(`Google Analytics disabled: 'tid' value not passed to constructor.`);
-  } else {
-    this._log(`Google Analytics enabled for Tracking ID ${tid}.`);
-  }
-  this._log('Constructor finished successfully.');
-}
-Metrics.prototype = {
-  /**
-   * Sends an event to the Mozilla data pipeline (and Google Analytics, if
-   * a `tid` was passed to the constructor). Note: to avoid breaking callers,
-   * if sending the event fails, no Errors will be thrown. Instead, the message
-   * will be silently dropped, and, if debug mode is enabled, an error will be
-   * logged to the Browser Console.
-   *
-   * If you want to pass extra fields to GA, or use a GA hit type other than
-   * `Event`, you can transform the output data object yourself using the
-   * `transform` parameter. You will need to add Custom Dimensions to GA for any
-   * extra fields: https://support.google.com/analytics/answer/2709828. Note
-   * that, by convention, the `variant` argument is mapped to the first Custom
-   * Dimension (`cd1`) when constructing the GA Event hit.
-   *
-   * Note: the data object format is currently different for each experiment,
-   * and should be defined based on the result of conversations with the Mozilla
-   * data team.
-   *
-   * A suggested default format is:
-   * @param {string} [$0.method] - What is happening? e.g. `click`
-   * @param {string} [$0.object] - What is being affected? e.g. `home-button-1`
-   * @param {string} [$0.category=interactions] - If you want to add a category
-   * for easy reporting later. e.g. `mainmenu`
-   * @param {string} [$0.variant=null] - An identifying string if you're running
-   * different variants. e.g. `cohort-A`
-   * @param {function} [transform] - Transform function used to alter the
-   * parameters sent to GA. The `transform` function signature is
-   * `transform(input, output)`, where `input` is the object passed to
-   * `sendEvent` (excluding `transform`), and `output` is the default GA
-   * object generated by the `_gaTransform` method. The `transform` function
-   * should return an object whose keys are GA Measurement Protocol parameters.
-   * The returned object will be form encoded and sent to GA.
-   */
-  sendEvent: function(params = {}, transform) {
-    const args = this._clone(params);
-    args.object = params.object || null;
-    args.category = params.category || 'interactions';
-    args.variant = params.variant || null;
-
-    this._log(`sendEvent called with method = ${args.method}, object = ${args.object}, category = ${args.category}, variant = ${args.variant}.`);
-
-    const clientData = this._clone(args);
-    const gaData = this._clone(args);
-    if (!clientData) {
-      this._error(`Unable to process data object. Dropping packet.`);
-      return;
-    }
-    this._sendToClient(clientData);
-
-    if (this.tid && this.uid) {
-      const defaultEvent = this._gaTransform(gaData);
-
-      let userEvent;
-      if (transform) {
-        userEvent = transform.call(null, gaData, defaultEvent);
-      }
-
-      this._gaSend(userEvent || defaultEvent);
-    }
-  },
-
-  /**
-   * Clone a data object by serializing / deserializing it.
-   * @private
-   * @param {object} o - Object to be cloned.
-   * @returns A clone of the object, or `null` if cloning failed.
-   */
-  _clone: function(o) {
-    let cloned;
-    try {
-      cloned = JSON.parse(JSON.stringify(o));
-    } catch (ex) {
-      this._error(`Unable to clone object: ${ex}.`);
-      return null;
-    }
-    return cloned;
-  },
-
-  /**
-   * Sends an event to the Mozilla data pipeline via the Test Pilot add-on.
-   * Uses BroadcastChannel for WebExtensions, and nsIObserverService for other
-   * add-on types.
-   * @private
-   * @param {object} params - Entire object sent to `sendEvent`.
-   */
-  _sendToClient: function(params) {
-    if (this.type === 'webextension') {
-      this._channel.postMessage(params);
-      this._log(`Sent client message via postMessage: ${params}`);
-    } else {
-      let stringified;
-
-      try {
-        stringified = JSON.stringify(params);
-      } catch(ex) {
-        this._error(`Unable to serialize metrics event: ${ex}`);
-        return;
-      }
-
-      const subject = {
-        wrappedJSObject: {
-          observersModuleSubjectWrapper: true,
-          object: this.id
-        }
-      };
-
-      try {
-        Services.obs.notifyObservers(subject, 'testpilot::send-metric', stringified);
-        this._log(`Sent client message via nsIObserverService: ${stringified}`);
-      } catch (ex) {
-        this._error(`Failed to send nsIObserver client ping: ${ex}`);
-        return;
-      }
-    }
-  },
-
-   /**
-   * Transforms `sendEvent()` arguments into a Google Analytics `Event` hit.
-   * @private
-   * @param {string} method - see `sendEvent` docs
-   * @param {string} [object] - see `sendEvent` docs
-   * @param {string} category - see `sendEvent` docs. Note that `category` is
-   * required here, assuming the default value was filled in by `sendEvent()`.
-   * @param {string} variant - see `sendEvent` docs. Note that `variant` is
-   * required here, assuming the default value was filled in by `sendEvent()`.
-   */
-  _gaTransform: function({method, object, category, variant}) {
-    const data = {
-      v: 1,
-      an: this.id,
-      av: this.version,
-      tid: this.tid,
-      uid: this.uid,
-      t: 'event',
-      ec: category,
-      ea: method
-    };
-    if (object) {
-      data.el = object;
-    }
-    if (variant) {
-      data.cd1 = variant;
-    }
-    return data;
-  },
-
-  /**
-   * Encodes and sends an event message to Google Analytics.
-   * @private
-   * @param {object} msg - An object whose keys correspond to parameters in the
-   * Google Analytics Measurement Protocol.
-   */
-  _gaSend: function(msg) {
-    const encoded = this._formEncode(msg);
-    const GA_URL = 'https://ssl.google-analytics.com/collect';
-    if (this.type === 'webextension') {
-      navigator.sendBeacon(GA_URL, encoded);
-    } else {
-      // SDK and bootstrapped types might not have a window reference, so get
-      // the sendBeacon DOM API from the hidden window.
-      Services.appShell.hiddenDOMWindow.navigator.sendBeacon(GA_URL, encoded);
-    }
-    this._log(`Sent GA message: ${encoded}`);
-  },
-
-  /**
-   * URL encodes an object. Encodes spaces as '%20', not '+', following the
-   * GA docs.
-   *
-   * @example
-   * // returns 'a=b&foo=b%20ar'
-   * metrics._formEncode({a: 'b', foo: 'b ar'});
-   * @private
-   * @param {Object} obj - Any JS object
-   * @returns {string}
-   */
-  _formEncode: function(obj) {
-    const params = [];
-    if (!obj) { return ''; }
-    Object.keys(obj).forEach(item => {
-      const encoded = encodeURIComponent(item) + '=' + encodeURIComponent(obj[item]);
-      params.push(encoded);
-    });
-    return params.join('&');
-  },
-
-  /**
-   * Initializes transports used for sending messages. For WebExtensions,
-   * creates a `BroadcastChannel` (transport for client pings). WebExtensions
-   * use navigator.sendBeacon for GA transport, and they always have access
-   * to DOM APIs, so there's no setup work required. For other types, loads
-   * `Services.jsm`, which exposes the nsIObserverService (transport for client
-   * pings), and exposes the navigator.sendBeacon API (GA transport) via the
-   * appShell service's hidden window.
-   * @private
-   * @throws {Error} if transport setup unexpectedly fails
-   */
-  _initTransports: function() {
-    if (this.type === 'webextension') {
-      try {
-        this._channel = new BroadcastChannel(this.topic);
-      } catch(ex) {
-        throw new Error(`Unable to create BroadcastChannel: ${ex}`);
-      }
-    } else if (this.type === 'sdk') {
-      try {
-        const { Cu } = require('chrome');
-        Cu.import('resource://gre/modules/Services.jsm');
-      } catch(ex) {
-        throw new Error(`Unable to load Services.jsm: ${ex}`);
-      }
-    } else { /* this.type === 'bootstrapped' */
-      try {
-        Components.utils.import('resource://gre/modules/Services.jsm');
-      } catch(ex) {
-        throw new Error(`Unable to load Services.jsm: ${ex}`);
-      }
-    }
-    this._log('Successfully initialized transports.');
-  },
-
-  /**
-   * Initializes a console for 'bootstrapped' add-ons.
-   * @private
-   */
-  _initConsole: function() {
-    if (this.type === 'bootstrapped') {
-      try {
-        Components.utils.import('resource://gre/modules/Console.jsm');
-        this._log('Successfully initialized console.');
-      } catch(ex) {
-        throw new Error(`Unable to initialize console: ${ex}`);
-      }
-    }
-  },
-
-  /**
-   * Logs messages to the console. Only enabled if `this.debug` is truthy.
-   * @private
-   * @param {string} msg - A message
-   */
-  _log: function(msg) {
-    if (this.debug) {
-      console.log(msg); // eslint-disable-line no-console
-    }
-  },
-
-  /**
-   * Logs errors to the console. Only enabled if `this.debug` is truthy.
-   * @private
-   * @param {string} msg - An error message
-   */
-  _error: function(msg) {
-    if (this.debug) {
-      console.error(msg); // eslint-disable-line no-console
-    }
-  }
-};
-
-// WebExtensions don't support CommonJS module style, so 'module' might not be
-// defined.
-if (typeof module !== 'undefined') {
-  module.exports = Metrics;
-}
-
-// Export the Metrics constructor in Gecko JSM style, for legacy addons
-// that use the JSM loader. See also: https://mdn.io/jsm/using
-const EXPORTED_SYMBOLS = ['Metrics']; // eslint-disable-line no-unused-vars

webextension/background.js

@@ -1,746 +0,0 @@
-const MAJOR_VERSIONS = ["2.3.0", "2.4.0"];
-const LOOKUP_KEY = "$ref";
-
-const assignManager = {
-  MENU_ASSIGN_ID: "open-in-this-container",
-  MENU_REMOVE_ID: "remove-open-in-this-container",
-  storageArea: {
-    area: browser.storage.local,
-    exemptedTabs: {},
-
-    getSiteStoreKey(pageUrl) {
-      const url = new window.URL(pageUrl);
-      const storagePrefix = "siteContainerMap@@_";
-      return `${storagePrefix}${url.hostname}`;
-    },
-
-    setExempted(pageUrl, tabId) {
-      const siteStoreKey = this.getSiteStoreKey(pageUrl);
-      if (!(siteStoreKey in this.exemptedTabs)) {
-        this.exemptedTabs[siteStoreKey] = [];
-      }
-      this.exemptedTabs[siteStoreKey].push(tabId);
-    },
-
-    removeExempted(pageUrl) {
-      const siteStoreKey = this.getSiteStoreKey(pageUrl);
-      this.exemptedTabs[siteStoreKey] = [];
-    },
-
-    isExempted(pageUrl, tabId) {
-      const siteStoreKey = this.getSiteStoreKey(pageUrl);
-      if (!(siteStoreKey in this.exemptedTabs)) {
-        return false;
-      }
-      return this.exemptedTabs[siteStoreKey].includes(tabId);
-    },
-
-    get(pageUrl) {
-      const siteStoreKey = this.getSiteStoreKey(pageUrl);
-      return new Promise((resolve, reject) => {
-        this.area.get([siteStoreKey]).then((storageResponse) => {
-          if (storageResponse && siteStoreKey in storageResponse) {
-            resolve(storageResponse[siteStoreKey]);
-          }
-          resolve(null);
-        }).catch((e) => {
-          reject(e);
-        });
-      });
-    },
-
-    set(pageUrl, data, exemptedTabIds) {
-      const siteStoreKey = this.getSiteStoreKey(pageUrl);
-      if (exemptedTabIds) {
-        exemptedTabIds.forEach((tabId) => {
-          this.setExempted(pageUrl, tabId);
-        });
-      }
-      return this.area.set({
-        [siteStoreKey]: data
-      });
-    },
-
-    remove(pageUrl) {
-      const siteStoreKey = this.getSiteStoreKey(pageUrl);
-      // When we remove an assignment we should clear all the exemptions
-      this.removeExempted(pageUrl);
-      return this.area.remove([siteStoreKey]);
-    },
-
-    async deleteContainer(userContextId) {
-      const sitesByContainer = await this.getByContainer(userContextId);
-      this.area.remove(Object.keys(sitesByContainer));
-    },
-
-    async getByContainer(userContextId) {
-      const sites = {};
-      const siteConfigs = await this.area.get();
-      Object.keys(siteConfigs).forEach((key) => {
-        // For some reason this is stored as string... lets check them both as that
-        if (String(siteConfigs[key].userContextId) === String(userContextId)) {
-          const site = siteConfigs[key];
-          // In hindsight we should have stored this
-          // TODO file a follow up to clean the storage onLoad
-          site.hostname = key.replace(/^siteContainerMap@@_/, "");
-          sites[key] = site;
-        }
-      });
-      return sites;
-    }
-  },
-
-  _neverAsk(m) {
-    const pageUrl = m.pageUrl;
-    if (m.neverAsk === true) {
-      // If we have existing data and for some reason it hasn't been deleted etc lets update it
-      this.storageArea.get(pageUrl).then((siteSettings) => {
-        if (siteSettings) {
-          siteSettings.neverAsk = true;
-          this.storageArea.set(pageUrl, siteSettings);
-        }
-      }).catch((e) => {
-        throw e;
-      });
-    }
-  },
-
-  // We return here so the confirm page can load the tab when exempted
-  async _exemptTab(m) {
-    const pageUrl = m.pageUrl;
-    this.storageArea.setExempted(pageUrl, m.tabId);
-    return true;
-  },
-
-  init() {
-    browser.contextMenus.onClicked.addListener((info, tab) => {
-      this._onClickedHandler(info, tab);
-    });
-
-    // Before a request is handled by the browser we decide if we should route through a different container
-    browser.webRequest.onBeforeRequest.addListener((options) => {
-      if (options.frameId !== 0 || options.tabId === -1) {
-        return {};
-      }
-      this.removeContextMenu();
-      return Promise.all([
-        browser.tabs.get(options.tabId),
-        this.storageArea.get(options.url)
-      ]).then(([tab, siteSettings]) => {
-        const userContextId = this.getUserContextIdFromCookieStore(tab);
-        if (!siteSettings
-            || userContextId === siteSettings.userContextId
-            || tab.incognito
-            || this.storageArea.isExempted(options.url, tab.id)) {
-          return {};
-        }
-
-        this.reloadPageInContainer(options.url, userContextId, siteSettings.userContextId, tab.index + 1, siteSettings.neverAsk);
-        this.calculateContextMenu(tab);
-
-        /* Removal of existing tabs:
-           We aim to open the new assigned container tab / warning prompt in it's own tab:
-             - As the history won't span from one container to another it seems most sane to not try and reopen a tab on history.back()
-             - When users open a new tab themselves we want to make sure we don't end up with three tabs as per: https://github.com/mozilla/testpilot-containers/issues/421
-           If we are coming from an internal url that are used for the new tab page (NEW_TAB_PAGES), we can safely close as user is unlikely losing history
-           Detecting redirects on "new tab" opening actions is pretty hard as we don't get tab history:
-           - Redirects happen from Short URLs and tracking links that act as a gateway
-           - Extensions don't provide a way to history crawl for tabs, we could inject content scripts to do this
-               however they don't run on about:blank so this would likely be just as hacky.
-           We capture the time the tab was created and close if it was within the timeout to try to capture pages which haven't had user interaction or history.
-        */
-        if (backgroundLogic.NEW_TAB_PAGES.has(tab.url)
-            || (messageHandler.lastCreatedTab
-            && messageHandler.lastCreatedTab.id === tab.id)) {
-          browser.tabs.remove(tab.id);
-        }
-        return {
-          cancel: true,
-        };
-      }).catch((e) => {
-        throw e;
-      });
-    },{urls: ["<all_urls>"], types: ["main_frame"]}, ["blocking"]);
-  },
-
-  async _onClickedHandler(info, tab) {
-    const userContextId = this.getUserContextIdFromCookieStore(tab);
-    // Mapping ${URL(info.pageUrl).hostname} to ${userContextId}
-    if (userContextId) {
-     // let actionName;
-      let remove;
-      if (info.menuItemId === this.MENU_ASSIGN_ID) {
-        remove = false;
-      } else {
-        remove = true;
-      }
-      await this._setOrRemoveAssignment(tab.id, info.pageUrl, userContextId, remove);
-    }
-  },
-
-
-  deleteContainer(userContextId) {
-    this.storageArea.deleteContainer(userContextId);
-  },
-
-  getUserContextIdFromCookieStore(tab) {
-    if (!("cookieStoreId" in tab)) {
-      return false;
-    }
-    const cookieStore = tab.cookieStoreId;
-    const container = cookieStore.replace("firefox-container-", "");
-    if (container !== cookieStore) {
-      return container;
-    }
-    return false;
-  },
-
-  isTabPermittedAssign(tab) {
-    // Ensure we are not an important about url
-    // Ensure we are not in incognito mode
-    const url = new URL(tab.url);
-    if (url.protocol === "about:"
-        || url.protocol === "moz-extension:"
-        || tab.incognito) {
-      return false;
-    }
-    return true;
-  },
-
-  async _setOrRemoveAssignment(tabId, pageUrl, userContextId, remove) {
-    let actionName;
-
-    // https://github.com/mozilla/testpilot-containers/issues/626
-    // Context menu has stored context IDs as strings, so we need to coerce
-    // the value to a string for accurate checking
-    userContextId = String(userContextId);
-
-    if (!remove) {
-      const tabs = await browser.tabs.query({});
-      const assignmentStoreKey = this.storageArea.getSiteStoreKey(pageUrl);
-      const exemptedTabIds = tabs.filter((tab) => {
-        const tabStoreKey = this.storageArea.getSiteStoreKey(tab.url);
-        /* Auto exempt all tabs that exist for this hostname that are not in the same container */
-        if (tabStoreKey === assignmentStoreKey &&
-            this.getUserContextIdFromCookieStore(tab) !== userContextId) {
-          return true;
-        }
-        return false;
-      }).map((tab) => {
-        return tab.id;
-      });
-
-      await this.storageArea.set(pageUrl, {
-        userContextId,
-        neverAsk: false
-      }, exemptedTabIds);
-      actionName = "added";
-    } else {
-      await this.storageArea.remove(pageUrl);
-      actionName = "removed";
-    }
-    browser.tabs.sendMessage(tabId, {
-      text: `Successfully ${actionName} site to always open in this container`
-    });
-    backgroundLogic.sendTelemetryPayload({
-      event: `${actionName}-container-assignment`,
-      userContextId: userContextId,
-    });
-    const tab = await browser.tabs.get(tabId);
-    this.calculateContextMenu(tab);
-  },
-
-  async _getAssignment(tab) {
-    const cookieStore = this.getUserContextIdFromCookieStore(tab);
-    // Ensure we have a cookieStore to assign to
-    if (cookieStore
-        && this.isTabPermittedAssign(tab)) {
-      return await this.storageArea.get(tab.url);
-    }
-    return false;
-  },
-
-  _getByContainer(userContextId) {
-    return this.storageArea.getByContainer(userContextId);
-  },
-
-  removeContextMenu() {
-    // There is a focus issue in this menu where if you change window with a context menu click
-    // you get the wrong menu display because of async
-    // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1215376#c16
-    // We also can't change for always private mode
-    // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1352102
-    browser.contextMenus.remove(this.MENU_ASSIGN_ID);
-    browser.contextMenus.remove(this.MENU_REMOVE_ID);
-  },
-
-  async calculateContextMenu(tab) {
-    this.removeContextMenu();
-    const siteSettings = await this._getAssignment(tab);
-    // Return early and not add an item if we have false
-    // False represents assignment is not permitted
-    if (siteSettings === false) {
-      return false;
-    }
-    // ✓ This is to mitigate https://bugzilla.mozilla.org/show_bug.cgi?id=1351418
-    let prefix = "   "; // Alignment of non breaking space, unknown why this requires so many spaces to align with the tick
-    let menuId = this.MENU_ASSIGN_ID;
-    const tabUserContextId = this.getUserContextIdFromCookieStore(tab);
-    if (siteSettings &&
-        Number(siteSettings.userContextId) === Number(tabUserContextId)) {
-      prefix = "✓";
-      menuId = this.MENU_REMOVE_ID;
-    }
-    browser.contextMenus.create({
-      id: menuId,
-      title: `${prefix} Always Open in This Container`,
-      checked: true,
-      contexts: ["all"],
-    });
-  },
-
-  reloadPageInContainer(url, currentUserContextId, userContextId, index, neverAsk = false) {
-    const cookieStoreId = backgroundLogic.cookieStoreId(userContextId);
-    const loadPage = browser.extension.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) {
-      browser.tabs.create({url, cookieStoreId, index});
-      backgroundLogic.sendTelemetryPayload({
-        event: "auto-reload-page-in-container",
-        userContextId: userContextId,
-      });
-    } else {
-      backgroundLogic.sendTelemetryPayload({
-        event: "prompt-to-reload-page-in-container",
-        userContextId: userContextId,
-      });
-      let confirmUrl = `${loadPage}?url=${encodeURIComponent(url)}&cookieStoreId=${cookieStoreId}`;
-      let currentCookieStoreId;
-      if (currentUserContextId) {
-        currentCookieStoreId = backgroundLogic.cookieStoreId(currentUserContextId);
-        confirmUrl += `&currentCookieStoreId=${currentCookieStoreId}`;
-      }
-      browser.tabs.create({
-        url: confirmUrl,
-        cookieStoreId: currentCookieStoreId,
-        index
-      }).then(() => {
-        // We don't want to sync this URL ever nor clutter the users history
-        browser.history.deleteUrl({url: confirmUrl});
-      }).catch((e) => {
-        throw e;
-      });
-    }
-  }
-};
-
-
-const backgroundLogic = {
-  NEW_TAB_PAGES: new Set([
-    "about:startpage",
-    "about:newtab",
-    "about:home",
-    "about:blank"
-  ]),
-
-  deleteContainer(userContextId) {
-    this.sendTelemetryPayload({
-      event: "delete-container",
-      userContextId
-    });
-
-    const removeTabsPromise = this._containerTabs(userContextId).then((tabs) => {
-      const tabIds = tabs.map((tab) => tab.id);
-      return browser.tabs.remove(tabIds);
-    });
-
-    return new Promise((resolve) => {
-      removeTabsPromise.then(() => {
-        const removed = browser.contextualIdentities.remove(this.cookieStoreId(userContextId));
-        removed.then(() => {
-          assignManager.deleteContainer(userContextId);
-          browser.runtime.sendMessage({
-            method: "forgetIdentityAndRefresh"
-          }).then(() => {
-            resolve({done: true, userContextId});
-          }).catch((e) => {throw e;});
-        }).catch((e) => {throw e;});
-      }).catch((e) => {throw e;});
-    });
-  },
-
-  createOrUpdateContainer(options) {
-    let donePromise;
-    if (options.userContextId !== "new") {
-      donePromise = browser.contextualIdentities.update(
-        this.cookieStoreId(options.userContextId),
-        options.params
-      );
-      this.sendTelemetryPayload({
-        event: "edit-container",
-        userContextId: options.userContextId
-      });
-    } else {
-      donePromise = browser.contextualIdentities.create(options.params);
-      this.sendTelemetryPayload({
-        event: "add-container"
-      });
-    }
-    return donePromise.then(() => {
-      browser.runtime.sendMessage({
-        method: "refreshNeeded"
-      });
-    });
-  },
-
-  openTab(options) {
-    let url = options.url || undefined;
-    const userContextId = ("userContextId" in options) ? options.userContextId : 0;
-    const active = ("nofocus" in options) ? options.nofocus : true;
-    const source = ("source" in options) ? options.source : null;
-
-    // Only send telemetry for tabs opened by UI - i.e., not via showTabs
-    if (source && userContextId) {
-      this.sendTelemetryPayload({
-        "event": "open-tab",
-        "eventSource": source,
-        "userContextId": userContextId,
-        "clickedContainerTabCount": LOOKUP_KEY
-      });
-    }
-    // Autofocus url bar will happen in 54: https://bugzilla.mozilla.org/show_bug.cgi?id=1295072
-
-    // We can't open new tab pages, so open a blank tab. Used in tab un-hide
-    if (this.NEW_TAB_PAGES.has(url)) {
-      url = undefined;
-    }
-
-    // Unhide all hidden tabs
-    browser.runtime.sendMessage({
-      method: "showTabs",
-      userContextId: options.userContextId
-    });
-    return browser.tabs.create({
-      url,
-      active,
-      pinned: options.pinned || false,
-      cookieStoreId: backgroundLogic.cookieStoreId(options.userContextId)
-    });
-  },
-
-  sendTelemetryPayload(message = {}) {
-    if (!message.event) {
-      throw new Error("Missing event name for telemetry");
-    }
-    message.method = "sendTelemetryPayload";
-    browser.runtime.sendMessage(message);
-  },
-
-  cookieStoreId(userContextId) {
-    return `firefox-container-${userContextId}`;
-  },
-
-  _containerTabs(userContextId) {
-    return browser.tabs.query({
-      cookieStoreId: this.cookieStoreId(userContextId)
-    }).catch((e) => {throw e;});
-  },
-};
-
-const messageHandler = {
-  // After the timer completes we assume it's a tab the user meant to keep open
-  // We use this to catch redirected tabs that have just opened
-  // If this were in platform we would change how the tab opens based on "new tab" link navigations such as ctrl+click
-  LAST_CREATED_TAB_TIMER: 2000,
-
-  init() {
-    // Handles messages from webextension code
-    browser.runtime.onMessage.addListener((m) => {
-      let response;
-
-      switch (m.method) {
-      case "deleteContainer":
-        response = backgroundLogic.deleteContainer(m.message.userContextId);
-        break;
-      case "createOrUpdateContainer":
-        response = backgroundLogic.createOrUpdateContainer(m.message);
-        break;
-      case "openTab":
-        // Same as open-tab for index.js
-        response = backgroundLogic.openTab(m.message);
-        break;
-      case "neverAsk":
-        assignManager._neverAsk(m);
-        break;
-      case "getAssignment":
-        response = browser.tabs.get(m.tabId).then((tab) => {
-          return assignManager._getAssignment(tab);
-        });
-        break;
-      case "getAssignmentObjectByContainer":
-        response = assignManager._getByContainer(m.message.userContextId);
-        break;
-      case "setOrRemoveAssignment":
-        // m.tabId is used for where to place the in content message
-        // m.url is the assignment to be removed/added
-        response = browser.tabs.get(m.tabId).then((tab) => {
-          return assignManager._setOrRemoveAssignment(tab.id, m.url, m.userContextId, m.value);
-        });
-        break;
-      case "exemptContainerAssignment":
-        response = assignManager._exemptTab(m);
-        break;
-      }
-      return response;
-    });
-
-    // Handles messages from sdk code
-    const port = browser.runtime.connect();
-    port.onMessage.addListener(m => {
-      switch (m.type) {
-      case "lightweight-theme-changed":
-        themeManager.update(m.message);
-        break;
-      case "open-tab":
-        backgroundLogic.openTab(m.message);
-        break;
-      default:
-        throw new Error(`Unhandled message type: ${m.message}`);
-      }
-    });
-
-    browser.tabs.onCreated.addListener((tab) => {
-      // This works at capturing the tabs as they are created
-      // However we need onFocusChanged and onActivated to capture the initial tab
-      if (tab.id === -1) {
-        return {};
-      }
-      tabPageCounter.initTabCounter(tab);
-    });
-
-    browser.tabs.onRemoved.addListener((tabId) => {
-      if (tabId === -1) {
-        return {};
-      }
-      tabPageCounter.sendTabCountAndDelete(tabId);
-    });
-
-    browser.tabs.onActivated.addListener((info) => {
-      assignManager.removeContextMenu();
-      browser.tabs.get(info.tabId).then((tab) => {
-        tabPageCounter.initTabCounter(tab);
-        assignManager.calculateContextMenu(tab);
-      }).catch((e) => {
-        throw e;
-      });
-    });
-
-    browser.windows.onFocusChanged.addListener((windowId) => {
-      assignManager.removeContextMenu();
-      // browserAction loses background color in new windows ...
-      // https://bugzil.la/1314674
-      // https://github.com/mozilla/testpilot-containers/issues/608
-      // ... so re-call displayBrowserActionBadge on window changes
-      displayBrowserActionBadge();
-      browser.tabs.query({active: true, windowId}).then((tabs) => {
-        if (tabs && tabs[0]) {
-          tabPageCounter.initTabCounter(tabs[0]);
-          assignManager.calculateContextMenu(tabs[0]);
-        }
-      }).catch((e) => {
-        throw e;
-      });
-    });
-
-    browser.idle.onStateChanged.addListener((newState) => {
-      browser.tabs.query({}).then(tabs => {
-        for (let tab of tabs) { // eslint-disable-line prefer-const
-          if (newState === "idle") {
-            tabPageCounter.sendTabCountAndDelete(tab.id, "user-went-idle");
-          } else if (newState === "active" && tab.active) {
-            tabPageCounter.initTabCounter(tab);
-          }
-        }
-      }).catch(e => {
-        throw e;
-      });
-    });
-
-    browser.webRequest.onCompleted.addListener((details) => {
-      if (details.frameId !== 0 || details.tabId === -1) {
-        return {};
-      }
-      assignManager.removeContextMenu();
-
-      browser.tabs.get(details.tabId).then((tab) => {
-        tabPageCounter.incrementTabCount(tab);
-        assignManager.calculateContextMenu(tab);
-      }).catch((e) => {
-        throw e;
-      });
-    }, {urls: ["<all_urls>"], types: ["main_frame"]});
-
-    // lets remember the last tab created so we can close it if it looks like a redirect
-    browser.tabs.onCreated.addListener((details) => {
-      this.lastCreatedTab = details;
-      setTimeout(() => {
-        this.lastCreatedTab = null;
-      }, this.LAST_CREATED_TAB_TIMER);
-    });
-
-  }
-};
-
-const themeManager = {
-  existingTheme: null,
-  init() {
-    this.check();
-  },
-  setPopupIcon(theme) {
-    let icons = {
-      16: "img/container-site-d-24.png",
-      32: "img/container-site-d-48.png"
-    };
-    if (theme === "firefox-compact-dark@mozilla.org") {
-      icons = {
-        16: "img/container-site-w-24.png",
-        32: "img/container-site-w-48.png"
-      };
-    }
-    browser.browserAction.setIcon({
-      path: icons
-    });
-  },
-  check() {
-    browser.runtime.sendMessage({
-      method: "getTheme"
-    }).then((theme) => {
-      this.update(theme);
-    }).catch(() => {
-      throw new Error("Unable to get theme");
-    });
-  },
-  update(theme) {
-    if (this.existingTheme !== theme) {
-      this.setPopupIcon(theme);
-      this.existingTheme = theme;
-    }
-  }
-};
-
-const tabPageCounter = {
-  counters: {},
-
-  initTabCounter(tab) {
-    if (tab.id in this.counters) {
-      if (!("activity" in this.counters[tab.id])) {
-        this.counters[tab.id].activity = {
-          "cookieStoreId": tab.cookieStoreId,
-          "pageRequests": 0
-        };
-      }
-      if (!("tab" in this.counters[tab.id])) {
-        this.counters[tab.id].tab = {
-          "cookieStoreId": tab.cookieStoreId,
-          "pageRequests": 0
-        };
-      }
-    } else {
-      this.counters[tab.id] = {};
-      this.counters[tab.id].tab = {
-        "cookieStoreId": tab.cookieStoreId,
-        "pageRequests": 0
-      };
-      this.counters[tab.id].activity = {
-        "cookieStoreId": tab.cookieStoreId,
-        "pageRequests": 0
-      };
-    }
-  },
-
-  sendTabCountAndDelete(tabId, why = "user-closed-tab") {
-    if (!(this.counters[tabId])) {
-      return;
-    }
-    if (why === "user-closed-tab" && this.counters[tabId].tab) {
-      backgroundLogic.sendTelemetryPayload({
-        event: "page-requests-completed-per-tab",
-        userContextId: this.counters[tabId].tab.cookieStoreId,
-        pageRequestCount: this.counters[tabId].tab.pageRequests
-      });
-      // When we send the ping because the user closed the tab,
-      // delete both the 'tab' and 'activity' counters
-      delete this.counters[tabId];
-    } else if (why === "user-went-idle" && this.counters[tabId].activity) {
-      backgroundLogic.sendTelemetryPayload({
-        event: "page-requests-completed-per-activity",
-        userContextId: this.counters[tabId].activity.cookieStoreId,
-        pageRequestCount: this.counters[tabId].activity.pageRequests
-      });
-      // When we send the ping because the user went idle,
-      // only reset the 'activity' counter
-      this.counters[tabId].activity = {
-        "cookieStoreId": this.counters[tabId].tab.cookieStoreId,
-        "pageRequests": 0
-      };
-    }
-  },
-
-  incrementTabCount(tab) {
-    this.counters[tab.id].tab.pageRequests++;
-    this.counters[tab.id].activity.pageRequests++;
-  }
-};
-
-assignManager.init();
-themeManager.init();
-// Lets do this last as theme manager did a check before connecting before
-messageHandler.init();
-
-browser.runtime.sendMessage({
-  method: "getPreference",
-  pref: "browser.privatebrowsing.autostart"
-}).then(pbAutoStart => {
-
-  // We don't want to disable the addon if we are in auto private-browsing.
-  if (!pbAutoStart) {
-    browser.tabs.onCreated.addListener(tab => {
-      if (tab.incognito) {
-        disableAddon(tab.id);
-      }
-    });
-
-    browser.tabs.query({}).then(tabs => {
-      for (let tab of tabs) { // eslint-disable-line prefer-const
-        if (tab.incognito) {
-          disableAddon(tab.id);
-        }
-      }
-    }).catch(() => {});
-  }
-}).catch(() => {});
-
-function disableAddon(tabId) {
-  browser.browserAction.disable(tabId);
-  browser.browserAction.setTitle({ tabId, title: "Containers disabled in Private Browsing Mode" });
-}
-
-async function getExtensionInfo() {
-  const manifestPath = browser.extension.getURL("manifest.json");
-  const response = await fetch(manifestPath);
-  const extensionInfo = await response.json();
-  return extensionInfo;
-}
-
-async function displayBrowserActionBadge() {
-  const extensionInfo = await getExtensionInfo();
-  const storage = await browser.storage.local.get({browserActionBadgesClicked: []});
-
-  if (MAJOR_VERSIONS.indexOf(extensionInfo.version) > -1 &&
-      storage.browserActionBadgesClicked.indexOf(extensionInfo.version) < 0) {
-    browser.browserAction.setBadgeBackgroundColor({color: "rgba(0,217,0,255)"});
-    browser.browserAction.setBadgeText({text: "NEW"});
-  }
-}
-displayBrowserActionBadge();

webextension/confirm-page.html

@@ -1,7 +1,7 @@
 <html>
 <head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
-  <title>Containers confirm navigation</title>
+  <title>Multi-Account Containers Confirm Navigation</title>
   <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="chrome://browser/skin/aboutNetError.css" type="text/css" media="all" />
   <link rel="stylesheet" href="/css/confirm-page.css" />
 </head>

webextension/css/popup.css

@@ -242,7 +242,8 @@ table {
   min-block-size: 400px;
 }
 
-.panel.onboarding {
+.panel.onboarding,
+.achievement-panel {
   align-items: center;
   block-size: 360px;
   margin-block-end: 16px;
@@ -887,3 +888,53 @@ span ~ .panel-header-text {
   font-size: 14px !important;
   padding-block-end: 6px;
 }
+
+/* Achievement panel elements */
+.share-ctas {
+  padding-block-end: 0.5em;
+  padding-block-start: 0.5em;
+  padding-inline-end: 0.5em;
+  padding-inline-start: 0.5em;
+  text-align: center;
+}
+
+.cta-link {
+  text-decoration: none;
+}
+
+.cta {
+  color: #fff;
+  font-size: 0.7em;
+  font-weight: bold;
+  margin-block-end: 0.4em;
+  margin-block-start: 0.4em;
+  margin-inline-end: 0.4em;
+  margin-inline-start: 0.4em;
+  padding-block-end: 0.5em;
+  padding-block-start: 0.5em;
+  padding-inline-end: 0.5em;
+  padding-inline-start: 0.5em;
+  text-transform: uppercase;
+}
+
+.cta-icon {
+  height: 18px;
+  padding-right: 0.5em;
+  vertical-align: middle;
+}
+
+.fb-share-cta {
+  background: #375496;
+}
+
+.fb-share-cta .cta-icon {
+  margin-block-start: -5px;
+}
+
+.tweet-cta {
+  background: #37bae7;
+}
+
+.amo-rate-cta {
+  background: #0f1126;
+}

webextension/img/amo-icon.svg

@@ -0,0 +1 @@
+<svg width="32px" height="33px" viewBox="0 0 32 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs> <linearGradient x1="74.0423237%" y1="18.5882821%" x2="0%" y2="100%" id="linearGradient-1"> <stop stop-color="#00FEFF" offset="0%"/> <stop stop-color="#3D85FF" offset="100%"/> </linearGradient> </defs> <g id="Specs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Header-Copy" transform="translate(-182.000000, -152.000000)" fill="url(#linearGradient-1)"> <path d="M205.58574,176.859518 L205.58574,169.287998 C205.58574,169.287998 205.800116,167.315137 207.086372,167.315137 C208.372629,167.315137 208.265441,169.394639 210.677171,169.394639 C211.909834,169.394639 214,168.754792 214,165.022352 C214,161.289912 211.909834,160.810027 210.677171,160.810027 C208.265441,160.810027 208.372629,162.782888 207.086372,162.782888 C205.800116,162.782888 205.58574,160.756707 205.58574,160.756707 L205.58574,157.664114 C205.58574,156.491061 204.621048,155.531291 203.44198,155.531291 L197.814608,155.531291 C197.814608,155.531291 195.992412,155.211368 195.992412,153.931674 C195.992412,152.65198 198.028985,152.545339 198.028985,150.145914 C198.028985,148.91954 197.332262,147 193.580682,147 C189.829101,147 189.293161,148.91954 189.293161,150.145914 C189.293161,152.545339 191.115357,152.65198 191.115357,153.931674 C191.115357,155.211368 189.293161,155.531291 189.293161,155.531291 L184.148135,155.531291 C182.969067,155.531291 182.004375,156.491061 182.004375,157.664114 L182.004375,161.823118 C182.004375,161.823118 181.789999,165.022352 184.362512,165.022352 C186.023926,165.022352 186.07752,162.836209 188.274874,162.836209 C189.346755,162.836209 190.418635,163.8493 190.418635,166.035443 C190.418635,168.274907 189.346755,169.394639 188.274874,169.394639 C186.131114,169.394639 186.023926,167.208496 184.362512,167.208496 C181.789999,167.208496 182.004375,170.301089 182.004375,170.301089 L182.004375,176.859518 C182.004375,178.032571 182.969067,178.992341 184.148135,178.992341 L191.115357,178.992341 C191.115357,178.992341 194.49178,179.205623 194.49178,176.646236 C194.49178,174.993299 192.348019,174.726696 192.348019,172.540552 C192.348019,171.474141 193.527088,170.141127 195.778036,170.141127 C198.028985,170.141127 199.315241,171.474141 199.315241,172.540552 C199.315241,174.673375 197.225074,174.993299 197.225074,176.646236 C197.225074,179.258944 200.601497,178.992341 200.601497,178.992341 L203.44198,178.992341 C204.621048,178.992341 205.58574,178.032571 205.58574,176.859518 Z" id="Shape-Copy-23" transform="translate(198.000000, 163.000000) rotate(-42.000000) translate(-198.000000, -163.000000) "/> </g> </g> </svg>

webextension/img/container-site.svg

@@ -0,0 +1,3 @@
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path fill="context-fill #4c4c4c" fill-opacity="context-fill-opacity" d="M12.9137931,3.0862069 L12.9137931,1.27586207 C12.9137931,0.84736528 12.5664278,0.5 12.137931,0.5 C11.7094342,0.5 11.362069,0.84736528 11.362069,1.27586207 L11.362069,1.27586207 L11.362069,3.0862069 L9.55172414,3.0862069 C9.12322735,3.0862069 8.77586207,3.43357218 8.77586207,3.86206897 C8.77586207,4.29056575 9.12322735,4.63793103 9.55172414,4.63793103 L11.362069,4.63793103 L11.362069,6.44827586 C11.362069,6.87677265 11.7094342,7.22413793 12.137931,7.22413793 L12.137931,7.22413793 C12.5664278,7.22413793 12.9137931,6.87677265 12.9137931,6.44827586 L12.9137931,6.44827586 L12.9137931,4.63793103 L14.7241379,4.63793103 C15.1526347,4.63793103 15.5,4.29056575 15.5,3.86206897 L15.5,3.86206897 C15.5,3.43357218 15.1526347,3.0862069 14.7241379,3.0862069 L14.7241379,3.0862069 L12.9137931,3.0862069 Z M0.5,9.76803178 C0.5,9.22007158 0.94118947,8.77586207 1.49216971,8.77586207 L6.23196822,8.77586207 C6.77992842,8.77586207 7.22413793,9.21705154 7.22413793,9.76803178 L7.22413793,14.5078303 C7.22413793,15.0557905 6.78294846,15.5 6.23196822,15.5 L1.49216971,15.5 C0.94420951,15.5 0.5,15.0588105 0.5,14.5078303 L0.5,9.76803178 Z M8.77586207,9.76803178 C8.77586207,9.22007158 9.21705154,8.77586207 9.76803178,8.77586207 L14.5078303,8.77586207 C15.0557905,8.77586207 15.5,9.21705154 15.5,9.76803178 L15.5,14.5078303 C15.5,15.0557905 15.0588105,15.5 14.5078303,15.5 L9.76803178,15.5 C9.22007158,15.5 8.77586207,15.0588105 8.77586207,14.5078303 L8.77586207,9.76803178 Z M0.5,1.49216971 C0.5,0.94420951 0.94118947,0.5 1.49216971,0.5 L6.23196822,0.5 C6.77992842,0.5 7.22413793,0.94118947 7.22413793,1.49216971 L7.22413793,6.23196822 C7.22413793,6.77992842 6.78294846,7.22413793 6.23196822,7.22413793 L1.49216971,7.22413793 C0.94420951,7.22413793 0.5,6.78294846 0.5,6.23196822 L0.5,1.49216971 Z"></path>
+</svg>

webextension/img/webicon-facebook.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="-14 -14 48 48" enable-background="new -14 -14 48 48" xml:space="preserve">
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="90.0527" y1="-99.7603" x2="90.0527" y2="-106.3809" gradientTransform="matrix(7.2338 0 0 -7.2338 -641.4998 -735.5619)">
+	<stop  offset="0" style="stop-color:#4B71B8"/>
+	<stop  offset="1" style="stop-color:#293F7E"/>
+</linearGradient>
+<path fill="url(#SVGID_1_)" d="M33.931,27.993c0,3.304-2.689,5.983-6.002,5.983H-8.082c-3.315,0-6.001-2.683-6.001-5.983V-7.928
+	c0-3.308,2.687-5.988,6.001-5.988h36.011c3.312,0,6.002,2.681,6.002,5.988V27.993z"/>
+<path fill="#FFFFFF" d="M25.613-4.557c0,0-3.707,0-6.166,0c-3.662,0-7.732,1.535-7.732,6.835c0.019,1.845,0,3.613,0,5.603H7.481
+	v6.728h4.366v19.37h8.021V14.48h5.295l0.479-6.618h-5.913c0,0,0.016-2.946,0-3.8c0-2.093,2.184-1.974,2.312-1.974
+	c1.042,0,3.059,0.003,3.578,0v-6.646H25.613z"/>
+</svg>

webextension/img/webicon-twitter.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="23.9995" y1="0" x2="23.9995" y2="48.0005">
+	<stop  offset="0" style="stop-color:#4BD0EF"/>
+	<stop  offset="1" style="stop-color:#29AAE1"/>
+</linearGradient>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="url(#SVGID_1_)" d="M48,42c0,3.313-2.687,6-6,6H6c-3.313,0-6-2.687-6-6V6
+	c0-3.313,2.687-6,6-6h36c3.313,0,6,2.687,6,6V42z"/>
+<path fill="#29AAE1" d="M40.231,13.413c-1.12,0.497-2.323,0.833-3.588,0.984c1.291-0.774,2.28-1.998,2.747-3.457
+	c-1.206,0.716-2.543,1.236-3.968,1.516c-1.139-1.214-2.763-1.972-4.56-1.972c-3.449,0-6.246,2.796-6.246,6.247
+	c0,0.49,0.055,0.966,0.161,1.424c-5.192-0.261-9.795-2.749-12.876-6.528c-0.538,0.923-0.846,1.996-0.846,3.141
+	c0,2.167,1.103,4.08,2.779,5.199c-1.024-0.032-1.987-0.313-2.83-0.781c0,0.026,0,0.053,0,0.079c0,3.026,2.153,5.551,5.011,6.125
+	c-0.525,0.143-1.076,0.219-1.646,0.219c-0.403,0-0.794-0.038-1.176-0.11c0.795,2.48,3.102,4.287,5.835,4.338
+	c-2.138,1.675-4.832,2.675-7.758,2.675c-0.504,0-1.002-0.03-1.491-0.089c2.765,1.773,6.048,2.808,9.576,2.808
+	c11.49,0,17.774-9.519,17.774-17.774c0-0.271-0.006-0.54-0.019-0.809C38.334,15.766,39.394,14.666,40.231,13.413z"/>
+<path fill="#FFFFFF" d="M40.231,14.739c-1.12,0.497-2.323,0.833-3.588,0.984c1.291-0.773,2.28-1.998,2.747-3.456
+	c-1.206,0.716-2.543,1.236-3.968,1.516c-1.139-1.214-2.763-1.972-4.56-1.972c-3.449,0-6.246,2.796-6.246,6.247
+	c0,0.489,0.055,0.966,0.161,1.424c-5.192-0.261-9.795-2.748-12.876-6.527c-0.538,0.923-0.846,1.996-0.846,3.141
+	c0,2.167,1.103,4.079,2.779,5.199c-1.024-0.032-1.987-0.313-2.83-0.781c0,0.026,0,0.052,0,0.079c0,3.027,2.153,5.551,5.011,6.125
+	c-0.525,0.144-1.076,0.219-1.646,0.219c-0.403,0-0.794-0.038-1.176-0.11c0.795,2.481,3.102,4.287,5.835,4.338
+	c-2.138,1.676-4.832,2.675-7.758,2.675c-0.504,0-1.002-0.03-1.491-0.089c2.765,1.773,6.048,2.808,9.576,2.808
+	c11.49,0,17.774-9.519,17.774-17.774c0-0.271-0.006-0.54-0.019-0.808C38.334,17.092,39.394,15.992,40.231,14.739z"/>
+</svg>

webextension/js/.eslintrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+  "extends": [
+    "../../.eslintrc.js"
+  ],
+  "globals": {
+    "assignManager": true,
+    "badge": true,
+    "backgroundLogic": true,
+    "identityState": true,
+    "messageHandler": true
+  }
+};

webextension/js/background/assignManager.js

@@ -0,0 +1,381 @@
+const assignManager = {
+  MENU_ASSIGN_ID: "open-in-this-container",
+  MENU_REMOVE_ID: "remove-open-in-this-container",
+  MENU_SEPARATOR_ID: "separator",
+  MENU_HIDE_ID: "hide-container",
+  MENU_MOVE_ID: "move-to-new-window-container",
+
+  storageArea: {
+    area: browser.storage.local,
+    exemptedTabs: {},
+
+    getSiteStoreKey(pageUrl) {
+      const url = new window.URL(pageUrl);
+      const storagePrefix = "siteContainerMap@@_";
+      return `${storagePrefix}${url.hostname}`;
+    },
+
+    setExempted(pageUrl, tabId) {
+      const siteStoreKey = this.getSiteStoreKey(pageUrl);
+      if (!(siteStoreKey in this.exemptedTabs)) {
+        this.exemptedTabs[siteStoreKey] = [];
+      }
+      this.exemptedTabs[siteStoreKey].push(tabId);
+    },
+
+    removeExempted(pageUrl) {
+      const siteStoreKey = this.getSiteStoreKey(pageUrl);
+      this.exemptedTabs[siteStoreKey] = [];
+    },
+
+    isExempted(pageUrl, tabId) {
+      const siteStoreKey = this.getSiteStoreKey(pageUrl);
+      if (!(siteStoreKey in this.exemptedTabs)) {
+        return false;
+      }
+      return this.exemptedTabs[siteStoreKey].includes(tabId);
+    },
+
+    get(pageUrl) {
+      const siteStoreKey = this.getSiteStoreKey(pageUrl);
+      return new Promise((resolve, reject) => {
+        this.area.get([siteStoreKey]).then((storageResponse) => {
+          if (storageResponse && siteStoreKey in storageResponse) {
+            resolve(storageResponse[siteStoreKey]);
+          }
+          resolve(null);
+        }).catch((e) => {
+          reject(e);
+        });
+      });
+    },
+
+    set(pageUrl, data, exemptedTabIds) {
+      const siteStoreKey = this.getSiteStoreKey(pageUrl);
+      if (exemptedTabIds) {
+        exemptedTabIds.forEach((tabId) => {
+          this.setExempted(pageUrl, tabId);
+        });
+      }
+      return this.area.set({
+        [siteStoreKey]: data
+      });
+    },
+
+    remove(pageUrl) {
+      const siteStoreKey = this.getSiteStoreKey(pageUrl);
+      // When we remove an assignment we should clear all the exemptions
+      this.removeExempted(pageUrl);
+      return this.area.remove([siteStoreKey]);
+    },
+
+    async deleteContainer(userContextId) {
+      const sitesByContainer = await this.getByContainer(userContextId);
+      this.area.remove(Object.keys(sitesByContainer));
+    },
+
+    async getByContainer(userContextId) {
+      const sites = {};
+      const siteConfigs = await this.area.get();
+      Object.keys(siteConfigs).forEach((key) => {
+        // For some reason this is stored as string... lets check them both as that
+        if (String(siteConfigs[key].userContextId) === String(userContextId)) {
+          const site = siteConfigs[key];
+          // In hindsight we should have stored this
+          // TODO file a follow up to clean the storage onLoad
+          site.hostname = key.replace(/^siteContainerMap@@_/, "");
+          sites[key] = site;
+        }
+      });
+      return sites;
+    }
+  },
+
+  _neverAsk(m) {
+    const pageUrl = m.pageUrl;
+    if (m.neverAsk === true) {
+      // If we have existing data and for some reason it hasn't been deleted etc lets update it
+      this.storageArea.get(pageUrl).then((siteSettings) => {
+        if (siteSettings) {
+          siteSettings.neverAsk = true;
+          this.storageArea.set(pageUrl, siteSettings);
+        }
+      }).catch((e) => {
+        throw e;
+      });
+    }
+  },
+
+  // We return here so the confirm page can load the tab when exempted
+  async _exemptTab(m) {
+    const pageUrl = m.pageUrl;
+    this.storageArea.setExempted(pageUrl, m.tabId);
+    return true;
+  },
+
+  // Before a request is handled by the browser we decide if we should route through a different container
+  async onBeforeRequest(options) {
+    if (options.frameId !== 0 || options.tabId === -1) {
+      return {};
+    }
+    this.removeContextMenu();
+    const [tab, siteSettings] = await Promise.all([
+      browser.tabs.get(options.tabId),
+      this.storageArea.get(options.url)
+    ]);
+    let container;
+    try {
+      container = await browser.contextualIdentities.get(backgroundLogic.cookieStoreId(siteSettings.userContextId));
+    } catch (e) {
+      container = false;
+    }
+
+    // The container we have in the assignment map isn't present any more so lets remove it
+    //   then continue the existing load
+    if (!container) {
+      this.deleteContainer(siteSettings.userContextId);
+      return {};
+    }
+    const userContextId = this.getUserContextIdFromCookieStore(tab);
+    if (!siteSettings
+        || userContextId === siteSettings.userContextId
+        || tab.incognito
+        || this.storageArea.isExempted(options.url, tab.id)) {
+      return {};
+    }
+
+    this.reloadPageInContainer(options.url, userContextId, siteSettings.userContextId, tab.index + 1, siteSettings.neverAsk);
+    this.calculateContextMenu(tab);
+
+    /* Removal of existing tabs:
+        We aim to open the new assigned container tab / warning prompt in it's own tab:
+          - As the history won't span from one container to another it seems most sane to not try and reopen a tab on history.back()
+          - When users open a new tab themselves we want to make sure we don't end up with three tabs as per: https://github.com/mozilla/testpilot-containers/issues/421
+        If we are coming from an internal url that are used for the new tab page (NEW_TAB_PAGES), we can safely close as user is unlikely losing history
+        Detecting redirects on "new tab" opening actions is pretty hard as we don't get tab history:
+        - Redirects happen from Short URLs and tracking links that act as a gateway
+        - Extensions don't provide a way to history crawl for tabs, we could inject content scripts to do this
+            however they don't run on about:blank so this would likely be just as hacky.
+        We capture the time the tab was created and close if it was within the timeout to try to capture pages which haven't had user interaction or history.
+    */
+    if (backgroundLogic.NEW_TAB_PAGES.has(tab.url)
+        || (messageHandler.lastCreatedTab
+        && messageHandler.lastCreatedTab.id === tab.id)) {
+      browser.tabs.remove(tab.id);
+    }
+    return {
+      cancel: true,
+    };
+  },
+
+  init() {
+    browser.contextMenus.onClicked.addListener((info, tab) => {
+      this._onClickedHandler(info, tab);
+    });
+
+    // Before a request is handled by the browser we decide if we should route through a different container
+    browser.webRequest.onBeforeRequest.addListener((options) => {
+      return this.onBeforeRequest(options);
+    },{urls: ["<all_urls>"], types: ["main_frame"]}, ["blocking"]);
+  },
+
+  async _onClickedHandler(info, tab) {
+    const userContextId = this.getUserContextIdFromCookieStore(tab);
+    // Mapping ${URL(info.pageUrl).hostname} to ${userContextId}
+    let remove;
+    if (userContextId) {
+      switch (info.menuItemId) {
+      case this.MENU_ASSIGN_ID:
+      case this.MENU_REMOVE_ID:
+        if (info.menuItemId === this.MENU_ASSIGN_ID) {
+          remove = false;
+        } else {
+          remove = true;
+        }
+        await this._setOrRemoveAssignment(tab.id, info.pageUrl, userContextId, remove);
+        break;
+      case this.MENU_MOVE_ID:
+        backgroundLogic.moveTabsToWindow({
+          cookieStoreId: tab.cookieStoreId,
+          windowId: tab.windowId,
+        });
+        break;
+      case this.MENU_HIDE_ID:
+        backgroundLogic.hideTabs({
+          cookieStoreId: tab.cookieStoreId,
+          windowId: tab.windowId,
+        });
+        break;
+      }
+    }
+  },
+
+
+  deleteContainer(userContextId) {
+    this.storageArea.deleteContainer(userContextId);
+  },
+
+  getUserContextIdFromCookieStore(tab) {
+    if (!("cookieStoreId" in tab)) {
+      return false;
+    }
+    return backgroundLogic.getUserContextIdFromCookieStoreId(tab.cookieStoreId);
+  },
+
+  isTabPermittedAssign(tab) {
+    // Ensure we are not an important about url
+    // Ensure we are not in incognito mode
+    const url = new URL(tab.url);
+    if (url.protocol === "about:"
+        || url.protocol === "moz-extension:"
+        || tab.incognito) {
+      return false;
+    }
+    return true;
+  },
+
+  async _setOrRemoveAssignment(tabId, pageUrl, userContextId, remove) {
+    let actionName;
+
+    // https://github.com/mozilla/testpilot-containers/issues/626
+    // Context menu has stored context IDs as strings, so we need to coerce
+    // the value to a string for accurate checking
+    userContextId = String(userContextId);
+
+    if (!remove) {
+      const tabs = await browser.tabs.query({});
+      const assignmentStoreKey = this.storageArea.getSiteStoreKey(pageUrl);
+      const exemptedTabIds = tabs.filter((tab) => {
+        const tabStoreKey = this.storageArea.getSiteStoreKey(tab.url);
+        /* Auto exempt all tabs that exist for this hostname that are not in the same container */
+        if (tabStoreKey === assignmentStoreKey &&
+            this.getUserContextIdFromCookieStore(tab) !== userContextId) {
+          return true;
+        }
+        return false;
+      }).map((tab) => {
+        return tab.id;
+      });
+
+      await this.storageArea.set(pageUrl, {
+        userContextId,
+        neverAsk: false
+      }, exemptedTabIds);
+      actionName = "added";
+    } else {
+      await this.storageArea.remove(pageUrl);
+      actionName = "removed";
+    }
+    browser.tabs.sendMessage(tabId, {
+      text: `Successfully ${actionName} site to always open in this container`
+    });
+    const tab = await browser.tabs.get(tabId);
+    this.calculateContextMenu(tab);
+  },
+
+  async _getAssignment(tab) {
+    const cookieStore = this.getUserContextIdFromCookieStore(tab);
+    // Ensure we have a cookieStore to assign to
+    if (cookieStore
+        && this.isTabPermittedAssign(tab)) {
+      return await this.storageArea.get(tab.url);
+    }
+    return false;
+  },
+
+  _getByContainer(userContextId) {
+    return this.storageArea.getByContainer(userContextId);
+  },
+
+  removeContextMenu() {
+    // There is a focus issue in this menu where if you change window with a context menu click
+    // you get the wrong menu display because of async
+    // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1215376#c16
+    // We also can't change for always private mode
+    // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1352102
+    browser.contextMenus.remove(this.MENU_ASSIGN_ID);
+    browser.contextMenus.remove(this.MENU_REMOVE_ID);
+    browser.contextMenus.remove(this.MENU_SEPARATOR_ID);
+    browser.contextMenus.remove(this.MENU_HIDE_ID);
+    browser.contextMenus.remove(this.MENU_MOVE_ID);
+  },
+
+  async calculateContextMenu(tab) {
+    this.removeContextMenu();
+    const siteSettings = await this._getAssignment(tab);
+    // Return early and not add an item if we have false
+    // False represents assignment is not permitted
+    if (siteSettings === false) {
+      return false;
+    }
+    let checked = false;
+    let menuId = this.MENU_ASSIGN_ID;
+    const tabUserContextId = this.getUserContextIdFromCookieStore(tab);
+    if (siteSettings &&
+        Number(siteSettings.userContextId) === Number(tabUserContextId)) {
+      checked = true;
+      menuId = this.MENU_REMOVE_ID;
+    }
+    browser.contextMenus.create({
+      id: menuId,
+      title: "Always Open in This Container",
+      checked,
+      type: "checkbox",
+      contexts: ["all"],
+    });
+
+    browser.contextMenus.create({
+      id: this.MENU_SEPARATOR_ID,
+      type: "separator",
+      contexts: ["all"],
+    });
+
+    browser.contextMenus.create({
+      id: this.MENU_HIDE_ID,
+      title: "Hide This Container",
+      contexts: ["all"],
+    });
+
+    browser.contextMenus.create({
+      id: this.MENU_MOVE_ID,
+      title: "Move Tabs to a New Window",
+      contexts: ["all"],
+    });
+  },
+
+  encodeURLProperty(url) {
+    return encodeURIComponent(url).replace(/[!'()*]/g, (c) => {
+      const charCode = c.charCodeAt(0).toString(16);
+      return `%${charCode}`;
+    });
+  },
+
+  reloadPageInContainer(url, currentUserContextId, userContextId, index, neverAsk = false) {
+    const cookieStoreId = backgroundLogic.cookieStoreId(userContextId);
+    const loadPage = browser.extension.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) {
+      browser.tabs.create({url, cookieStoreId, index});
+    } else {
+      let confirmUrl = `${loadPage}?url=${this.encodeURLProperty(url)}&cookieStoreId=${cookieStoreId}`;
+      let currentCookieStoreId;
+      if (currentUserContextId) {
+        currentCookieStoreId = backgroundLogic.cookieStoreId(currentUserContextId);
+        confirmUrl += `&currentCookieStoreId=${currentCookieStoreId}`;
+      }
+      browser.tabs.create({
+        url: confirmUrl,
+        cookieStoreId: currentCookieStoreId,
+        index
+      }).then(() => {
+        // We don't want to sync this URL ever nor clutter the users history
+        browser.history.deleteUrl({url: confirmUrl});
+      }).catch((e) => {
+        throw e;
+      });
+    }
+  }
+};
+
+assignManager.init();

webextension/js/background/backgroundLogic.js

@@ -0,0 +1,306 @@
+const DEFAULT_TAB = "about:newtab";
+const backgroundLogic = {
+  NEW_TAB_PAGES: new Set([
+    "about:startpage",
+    "about:newtab",
+    "about:home",
+    "about:blank"
+  ]),
+
+  async getExtensionInfo() {
+    const manifestPath = browser.extension.getURL("manifest.json");
+    const response = await fetch(manifestPath);
+    const extensionInfo = await response.json();
+    return extensionInfo;
+  },
+
+  getUserContextIdFromCookieStoreId(cookieStoreId) {
+    if (!cookieStoreId) {
+      return false;
+    }
+    const container = cookieStoreId.replace("firefox-container-", "");
+    if (container !== cookieStoreId) {
+      return container;
+    }
+    return false;
+  },
+
+  async deleteContainer(userContextId, removed = false) {
+    await this._closeTabs(userContextId);
+    if (!removed) {
+      await browser.contextualIdentities.remove(this.cookieStoreId(userContextId));
+    }
+    assignManager.deleteContainer(userContextId);
+    return {done: true, userContextId};
+  },
+
+  async createOrUpdateContainer(options) {
+    let donePromise;
+    if (options.userContextId !== "new") {
+      donePromise = browser.contextualIdentities.update(
+        this.cookieStoreId(options.userContextId),
+        options.params
+      );
+    } else {
+      donePromise = browser.contextualIdentities.create(options.params);
+    }
+    await donePromise;
+    browser.runtime.sendMessage({
+      method: "refreshNeeded"
+    });
+  },
+
+  async openNewTab(options) {
+    let url = options.url || undefined;
+    const userContextId = ("userContextId" in options) ? options.userContextId : 0;
+    const active = ("nofocus" in options) ? options.nofocus : true;
+
+    const cookieStoreId = backgroundLogic.cookieStoreId(userContextId);
+    // Autofocus url bar will happen in 54: https://bugzilla.mozilla.org/show_bug.cgi?id=1295072
+
+    // We can't open new tab pages, so open a blank tab. Used in tab un-hide
+    if (this.NEW_TAB_PAGES.has(url)) {
+      url = undefined;
+    }
+
+    if (!this.isPermissibleURL(url)) {
+      return;
+    }
+
+    return browser.tabs.create({
+      url,
+      active,
+      pinned: options.pinned || false,
+      cookieStoreId
+    });
+  },
+
+  isPermissibleURL(url) {
+    const protocol = new URL(url).protocol;
+    // We can't open these we just have to throw them away
+    if (protocol === "about:"
+        || protocol === "chrome:"
+        || protocol === "moz-extension:") {
+      return false;
+    }
+    return true;
+  },
+
+  checkArgs(requiredArguments, options, methodName) {
+    requiredArguments.forEach((argument) => {
+      if (!(argument in options)) {
+        return new Error(`${methodName} must be called with ${argument} argument.`);
+      }
+    });
+  },
+
+  async getTabs(options) {
+    const requiredArguments = ["cookieStoreId", "windowId"];
+    this.checkArgs(requiredArguments, options, "getTabs");
+    const { cookieStoreId, windowId } = options;
+
+    const list = [];
+    const tabs = await browser.tabs.query({
+      cookieStoreId,
+      windowId
+    });
+    tabs.forEach((tab) => {
+      list.push(identityState._createTabObject(tab));
+    });
+
+    const containerState = await identityState.storageArea.get(cookieStoreId);
+    return list.concat(containerState.hiddenTabs);
+  },
+
+  async moveTabsToWindow(options) {
+    const requiredArguments = ["cookieStoreId", "windowId"];
+    this.checkArgs(requiredArguments, options, "moveTabsToWindow");
+    const { cookieStoreId, windowId } = options;
+
+    const list = await browser.tabs.query({
+      cookieStoreId,
+      windowId
+    });
+
+    const containerState = await identityState.storageArea.get(cookieStoreId);
+    // Nothing to do
+    if (list.length === 0 &&
+        containerState.hiddenTabs.length === 0) {
+      return;
+    }
+    let newWindowObj;
+    let hiddenDefaultTabToClose;
+    if (list.length) {
+      newWindowObj = await browser.windows.create({
+        tabId: list.shift().id
+      });
+      browser.tabs.move(list.map((tab) => tab.id), {
+        windowId: newWindowObj.id,
+        index: -1
+      });
+    } else {
+      //As we get a blank tab here we will need to await the tabs creation
+      newWindowObj = await browser.windows.create({
+      });
+      hiddenDefaultTabToClose = true;
+    }
+
+    const showHiddenPromises = [];
+
+    // Let's show the hidden tabs.
+    for (let object of containerState.hiddenTabs) { // eslint-disable-line prefer-const
+      showHiddenPromises.push(browser.tabs.create({
+        url: object.url || DEFAULT_TAB,
+        windowId: newWindowObj.id,
+        cookieStoreId
+      }));
+    }
+
+    if (hiddenDefaultTabToClose) {
+      // Lets wait for hidden tabs to show before closing the others
+      await showHiddenPromises;
+    }
+
+    containerState.hiddenTabs = [];
+
+    // Let's close all the normal tab in the new window. In theory it
+    // should be only the first tab, but maybe there are addons doing
+    // crazy stuff.
+    const tabs = await browser.tabs.query({windowId: newWindowObj.id});
+    for (let tab of tabs) { // eslint-disable-line prefer-const
+      if (tab.cookieStoreId !== cookieStoreId) {
+        browser.tabs.remove(tab.id);
+      }
+    }
+    return await identityState.storageArea.set(cookieStoreId, containerState);
+  },
+
+  async _closeTabs(userContextId, windowId = false) {
+    const cookieStoreId = this.cookieStoreId(userContextId);
+    let tabs;
+    /* if we have no windowId we are going to close all this container (used for deleting) */
+    if (windowId !== false) {
+      tabs = await browser.tabs.query({
+        cookieStoreId,
+        windowId
+      });
+    } else {
+      tabs = await browser.tabs.query({
+        cookieStoreId
+      });
+    }
+    const tabIds = tabs.map((tab) => tab.id);
+    return browser.tabs.remove(tabIds);
+  },
+
+  async queryIdentitiesState(windowId) {
+    const identities = await browser.contextualIdentities.query({});
+    const identitiesOutput = {};
+    const identitiesPromise = identities.map(async function (identity) {
+      const { cookieStoreId } = identity;
+      const containerState = await identityState.storageArea.get(cookieStoreId);
+      const openTabs = await browser.tabs.query({
+        cookieStoreId,
+        windowId
+      });
+      identitiesOutput[cookieStoreId] = {
+        hasHiddenTabs: !!containerState.hiddenTabs.length,
+        hasOpenTabs: !!openTabs.length
+      };
+      return;
+    });
+    await Promise.all(identitiesPromise);
+    return identitiesOutput;
+  },
+
+  async sortTabs() {
+    const windows = await browser.windows.getAll();
+    for (let windowObj of windows) { // eslint-disable-line prefer-const
+      // First the pinned tabs, then the normal ones.
+      await this._sortTabsInternal(windowObj, true);
+      await this._sortTabsInternal(windowObj, false);
+    }
+  },
+
+  async _sortTabsInternal(windowObj, pinnedTabs) {
+    const tabs = await browser.tabs.query({windowId: windowObj.id});
+    let pos = 0;
+
+    // Let's collect UCIs/tabs for this window.
+    const map = new Map;
+    for (const tab of tabs) {
+      if (pinnedTabs && !tab.pinned) {
+        // We don't have, or we already handled all the pinned tabs.
+        break;
+      }
+
+      if (!pinnedTabs && tab.pinned) {
+        // pinned tabs must be consider as taken positions.
+        ++pos;
+        continue;
+      }
+
+      const userContextId = backgroundLogic.getUserContextIdFromCookieStoreId(tab.cookieStoreId);
+      if (!map.has(userContextId)) {
+        map.set(userContextId, []);
+      }
+      map.get(userContextId).push(tab);
+    }
+
+    // Let's sort the map.
+    const sortMap = new Map([...map.entries()].sort((a, b) => a[0] > b[0]));
+
+    // Let's move tabs.
+    sortMap.forEach(tabs => {
+      for (const tab of tabs) {
+        ++pos;
+        browser.tabs.move(tab.id, {
+          windowId: windowObj.id,
+          index: pos
+        });
+      }
+    });
+  },
+
+  async hideTabs(options) {
+    const requiredArguments = ["cookieStoreId", "windowId"];
+    this.checkArgs(requiredArguments, options, "hideTabs");
+    const { cookieStoreId, windowId } = options;
+
+    const userContextId = backgroundLogic.getUserContextIdFromCookieStoreId(cookieStoreId);
+
+    const containerState = await identityState.storeHidden(cookieStoreId, windowId);
+    await this._closeTabs(userContextId, windowId);
+    return containerState;
+  },
+
+  async showTabs(options) {
+    if (!("cookieStoreId" in options)) {
+      return Promise.reject("showTabs must be called with cookieStoreId argument.");
+    }
+
+    const userContextId = backgroundLogic.getUserContextIdFromCookieStoreId(options.cookieStoreId);
+    const promises = [];
+
+    const containerState = await identityState.storageArea.get(options.cookieStoreId);
+
+    for (let object of containerState.hiddenTabs) { // eslint-disable-line prefer-const
+      promises.push(this.openNewTab({
+        userContextId: userContextId,
+        url: object.url,
+        nofocus: options.nofocus || false,
+        pinned: object.pinned,
+      }));
+    }
+
+    containerState.hiddenTabs = [];
+
+    await Promise.all(promises);
+    return await identityState.storageArea.set(options.cookieStoreId, containerState);
+  },
+
+  cookieStoreId(userContextId) {
+    return `firefox-container-${userContextId}`;
+  }
+};
+

webextension/js/background/badge.js

@@ -0,0 +1,25 @@
+const MAJOR_VERSIONS = ["2.3.0", "2.4.0"];
+const badge = {
+  async init() {
+    const currentWindow = await browser.windows.getCurrent();
+    this.displayBrowserActionBadge(currentWindow.incognito);
+  },
+
+  disableAddon(tabId) {
+    browser.browserAction.disable(tabId);
+    browser.browserAction.setTitle({ tabId, title: "Containers disabled in Private Browsing Mode" });
+  },
+
+  async displayBrowserActionBadge() {
+    const extensionInfo = await backgroundLogic.getExtensionInfo();
+    const storage = await browser.storage.local.get({browserActionBadgesClicked: []});
+
+    if (MAJOR_VERSIONS.indexOf(extensionInfo.version) > -1 &&
+        storage.browserActionBadgesClicked.indexOf(extensionInfo.version) < 0) {
+      browser.browserAction.setBadgeBackgroundColor({color: "rgba(0,217,0,255)"});
+      browser.browserAction.setBadgeText({text: "NEW"});
+    }
+  }
+};
+
+badge.init();

webextension/js/background/identityState.js

@@ -0,0 +1,62 @@
+const identityState = {
+  storageArea: {
+    area: browser.storage.local,
+
+    getContainerStoreKey(cookieStoreId) {
+      const storagePrefix = "identitiesState@@_";
+      return `${storagePrefix}${cookieStoreId}`;
+    },
+
+    async get(cookieStoreId) {
+      const storeKey = this.getContainerStoreKey(cookieStoreId);
+      const storageResponse = await this.area.get([storeKey]);
+      if (storageResponse && storeKey in storageResponse) {
+        return storageResponse[storeKey];
+      }
+      const defaultContainerState = identityState._createIdentityState();
+      await this.set(cookieStoreId, defaultContainerState);
+
+      return defaultContainerState;
+    },
+
+    set(cookieStoreId, data) {
+      const storeKey = this.getContainerStoreKey(cookieStoreId);
+      return this.area.set({
+        [storeKey]: data
+      });
+    },
+
+    remove(cookieStoreId) {
+      const storeKey = this.getContainerStoreKey(cookieStoreId);
+      return this.area.remove([storeKey]);
+    }
+  },
+
+  _createTabObject(tab) {
+    return Object.assign({}, tab);
+  },
+
+  async storeHidden(cookieStoreId, windowId) {
+    const containerState = await this.storageArea.get(cookieStoreId);
+    const tabsByContainer = await browser.tabs.query({cookieStoreId, windowId});
+    tabsByContainer.forEach((tab) => {
+      const tabObject = this._createTabObject(tab);
+      if (!backgroundLogic.isPermissibleURL(tab.url)) {
+        return;
+      }
+      // This tab is going to be closed. Let's mark this tabObject as
+      // non-active.
+      tabObject.active = false;
+      tabObject.hiddenState = true;
+      containerState.hiddenTabs.push(tabObject);
+    });
+
+    return this.storageArea.set(cookieStoreId, containerState);
+  },
+
+  _createIdentityState() {
+    return {
+      hiddenTabs: []
+    };
+  },
+};

webextension/js/background/index.html

@@ -0,0 +1,22 @@
+<html>
+  <head>
+    <meta charset="utf-8">
+  </head>
+  <body>
+ <!--
+    This didn't work for debugging in the manifest.
+    "scripts": [
+      "js/background/backgroundLogic.js",
+      "js/background/assignManager.js",
+      "js/background/badge.js",
+      "js/background/identityState.js",
+      "js/background/messageHandler.js",
+    ]
+-->
+    <script type="text/javascript" src="backgroundLogic.js"></script>
+    <script type="text/javascript" src="assignManager.js"></script>
+    <script type="text/javascript" src="badge.js"></script>
+    <script type="text/javascript" src="identityState.js"></script>
+    <script type="text/javascript" src="messageHandler.js"></script>
+  </body>
+</html>

webextension/js/background/messageHandler.js

@@ -0,0 +1,178 @@
+const messageHandler = {
+  // After the timer completes we assume it's a tab the user meant to keep open
+  // We use this to catch redirected tabs that have just opened
+  // If this were in platform we would change how the tab opens based on "new tab" link navigations such as ctrl+click
+  LAST_CREATED_TAB_TIMER: 2000,
+  unhideQueue: [],
+
+  init() {
+    // Handles messages from webextension code
+    browser.runtime.onMessage.addListener((m) => {
+      let response;
+
+      switch (m.method) {
+      case "deleteContainer":
+        response = backgroundLogic.deleteContainer(m.message.userContextId);
+        break;
+      case "createOrUpdateContainer":
+        response = backgroundLogic.createOrUpdateContainer(m.message);
+        break;
+      case "neverAsk":
+        assignManager._neverAsk(m);
+        break;
+      case "getAssignment":
+        response = browser.tabs.get(m.tabId).then((tab) => {
+          return assignManager._getAssignment(tab);
+        });
+        break;
+      case "getAssignmentObjectByContainer":
+        response = assignManager._getByContainer(m.message.userContextId);
+        break;
+      case "setOrRemoveAssignment":
+        // m.tabId is used for where to place the in content message
+        // m.url is the assignment to be removed/added
+        response = browser.tabs.get(m.tabId).then((tab) => {
+          return assignManager._setOrRemoveAssignment(tab.id, m.url, m.userContextId, m.value);
+        });
+        break;
+      case "sortTabs":
+        backgroundLogic.sortTabs();
+        break;
+      case "showTabs":
+        this.unhideContainer(m.cookieStoreId);
+        break;
+      case "hideTabs":
+        backgroundLogic.hideTabs({
+          cookieStoreId: m.cookieStoreId,
+          windowId: m.windowId
+        });
+        break;
+      case "checkIncompatibleAddons":
+        // TODO
+        break;
+      case "moveTabsToWindow":
+        response = backgroundLogic.moveTabsToWindow({
+          cookieStoreId: m.cookieStoreId,
+          windowId: m.windowId
+        });
+        break;
+      case "getTabs":
+        response = backgroundLogic.getTabs({
+          cookieStoreId: m.cookieStoreId,
+          windowId: m.windowId
+        });
+        break;
+      case "queryIdentitiesState":
+        response = backgroundLogic.queryIdentitiesState(m.message.windowId);
+        break;
+      case "exemptContainerAssignment":
+        response = assignManager._exemptTab(m);
+        break;
+      }
+      return response;
+    });
+
+    if (browser.contextualIdentities.onRemoved) {
+      browser.contextualIdentities.onRemoved.addListener(({contextualIdentity}) => {
+        const userContextId = backgroundLogic.getUserContextIdFromCookieStoreId(contextualIdentity.cookieStoreId);
+        backgroundLogic.deleteContainer(userContextId, true);
+      });
+    }
+
+    browser.tabs.onActivated.addListener((info) => {
+      assignManager.removeContextMenu();
+      browser.tabs.get(info.tabId).then((tab) => {
+        assignManager.calculateContextMenu(tab);
+      }).catch((e) => {
+        throw e;
+      });
+    });
+
+    browser.windows.onFocusChanged.addListener((windowId) => {
+      this.onFocusChangedCallback(windowId);
+    });
+
+    browser.webRequest.onCompleted.addListener((details) => {
+      if (details.frameId !== 0 || details.tabId === -1) {
+        return {};
+      }
+      assignManager.removeContextMenu();
+
+      browser.tabs.get(details.tabId).then((tab) => {
+        assignManager.calculateContextMenu(tab);
+      }).catch((e) => {
+        throw e;
+      });
+    }, {urls: ["<all_urls>"], types: ["main_frame"]});
+
+    browser.tabs.onCreated.addListener((tab) => {
+      if (tab.incognito) {
+        badge.disableAddon(tab.id);
+      }
+      // lets remember the last tab created so we can close it if it looks like a redirect
+      this.lastCreatedTab = tab;
+      if (tab.cookieStoreId) {
+        // Don't count firefox-default, firefox-private, nor our own confirm page loads
+        if (tab.cookieStoreId !== "firefox-default" &&
+            tab.cookieStoreId !== "firefox-private" &&
+            !tab.url.startsWith("moz-extension")) {
+          // increment the counter of container tabs opened
+          this.incrementCountOfContainerTabsOpened();
+        }
+
+        this.unhideContainer(tab.cookieStoreId);
+      }
+      setTimeout(() => {
+        this.lastCreatedTab = null;
+      }, this.LAST_CREATED_TAB_TIMER);
+    });
+  },
+
+  async incrementCountOfContainerTabsOpened() {
+    const key = "containerTabsOpened";
+    const count = await browser.storage.local.get({[key]: 0});
+    const countOfContainerTabsOpened = ++count[key];
+    browser.storage.local.set({[key]: countOfContainerTabsOpened});
+
+    // When the user opens their _ tab, give them the achievement
+    if (countOfContainerTabsOpened === 100) {
+      const storage = await browser.storage.local.get({achievements: []});
+      storage.achievements.push({"name": "manyContainersOpened", "done": false});
+      // use set and spread to create a unique array
+      const achievements = [...new Set(storage.achievements)];
+      browser.storage.local.set({achievements});
+      browser.browserAction.setBadgeBackgroundColor({color: "rgba(0,217,0,255)"});
+      browser.browserAction.setBadgeText({text: "NEW"});
+    }
+  },
+
+  async unhideContainer(cookieStoreId) {
+    if (!this.unhideQueue.includes(cookieStoreId)) {
+      this.unhideQueue.push(cookieStoreId);
+      // Unhide all hidden tabs
+      await backgroundLogic.showTabs({
+        cookieStoreId
+      });
+      this.unhideQueue.splice(this.unhideQueue.indexOf(cookieStoreId), 1);
+    }
+  },
+
+  async onFocusChangedCallback(windowId) {
+    assignManager.removeContextMenu();
+    // browserAction loses background color in new windows ...
+    // https://bugzil.la/1314674
+    // https://github.com/mozilla/testpilot-containers/issues/608
+    // ... so re-call displayBrowserActionBadge on window changes
+    badge.displayBrowserActionBadge();
+    browser.tabs.query({active: true, windowId}).then((tabs) => {
+      if (tabs && tabs[0]) {
+        assignManager.calculateContextMenu(tabs[0]);
+      }
+    }).catch((e) => {
+      throw e;
+    });
+  }
+};
+
+// Lets do this last as theme manager did a check before connecting before
+messageHandler.init();

webextension/js/confirm-page.js

@@ -49,10 +49,6 @@ function confirmSubmit(redirectUrl, cookieStoreId) {
       pageUrl: redirectUrl
     });
   }
-  browser.runtime.sendMessage({
-    method: "sendTelemetryPayload",
-    event: "click-to-reload-page-in-container",
-  });
   openInContainer(redirectUrl, cookieStoreId);
 }
 
@@ -70,10 +66,6 @@ async function denySubmit(redirectUrl) {
     tabId: tab[0].id,
     pageUrl: redirectUrl
   });
-  browser.runtime.sendMessage({
-    method: "sendTelemetryPayload",
-    event: "click-to-reload-page-in-same-container",
-  });
   document.location.replace(redirectUrl);
 }
 

webextension/js/content-script.js

@@ -20,11 +20,15 @@ async function doAnimation(element, property, value) {
 async function addMessage(message) {
   const divElement = document.createElement("div");
   divElement.classList.add("container-notification");
-  // For the eager eyed, this is an experiment. It is however likely that a website will know it is "contained" anyway
+  // Ideally we would use https://bugzilla.mozilla.org/show_bug.cgi?id=1340930 when this is available
   divElement.innerText = message.text;
 
   const imageElement = document.createElement("img");
-  imageElement.src = browser.extension.getURL("/img/container-site-d-24.png");
+  const imagePath = browser.extension.getURL("/img/container-site-d-24.png");
+  const response = await fetch(imagePath);
+  const blob = await response.blob();
+  const objectUrl = URL.createObjectURL(blob);
+  imageElement.src = objectUrl;
   divElement.prepend(imageElement);
 
   document.body.appendChild(divElement);

webextension/js/popup.js

@@ -22,6 +22,7 @@ const P_CONTAINERS_EDIT  = "containersEdit";
 const P_CONTAINER_INFO   = "containerInfo";
 const P_CONTAINER_EDIT   = "containerEdit";
 const P_CONTAINER_DELETE = "containerDelete";
+const P_CONTAINERS_ACHIEVEMENT = "containersAchievement";
 
 /**
  * Escapes any occurances of &, ", <, > or / with XML entities.
@@ -81,38 +82,25 @@ const Logic = {
 
     // Retrieve the list of identities.
     const identitiesPromise = this.refreshIdentities();
-    // Get the onboarding variation
-    const variationPromise = this.getShieldStudyVariation();
 
     try {
-      await Promise.all([identitiesPromise, variationPromise]);
+      await identitiesPromise;
     } catch(e) {
       throw new Error("Failed to retrieve the identities or variation. We cannot continue. ", e.message);
     }
 
     // Routing to the correct panel.
     // If localStorage is disabled, we don't show the onboarding.
-    const data = await browser.storage.local.get([ONBOARDING_STORAGE_KEY]);
-    let onboarded = data[ONBOARDING_STORAGE_KEY];
+    const onboardingData = await browser.storage.local.get([ONBOARDING_STORAGE_KEY]);
+    let onboarded = onboardingData[ONBOARDING_STORAGE_KEY];
     if (!onboarded) {
-      // Legacy local storage used before panel 5
-      if (localStorage.getItem("onboarded4")) {
-        onboarded = 4;
-      } else if (localStorage.getItem("onboarded3")) {
-        onboarded = 3;
-      } else if (localStorage.getItem("onboarded2")) {
-        onboarded = 2;
-      } else if (localStorage.getItem("onboarded1")) {
-        onboarded = 1;
-      } else {
-        onboarded = 0;
-      }
+      onboarded = 0;
       this.setOnboardingStage(onboarded);
     }
 
     switch (onboarded) {
     case 5:
-      this.showPanel(P_CONTAINERS_LIST);
+      this.showAchievementOrContainersListPanel();
       break;
     case 4:
       this.showPanel(P_ONBOARDING_5);
@@ -134,6 +122,37 @@ const Logic = {
 
   },
 
+  async showAchievementOrContainersListPanel() {
+    // Do we need to show an achievement panel?
+    let showAchievements = false;
+    const achievementsStorage = await browser.storage.local.get({achievements: []});
+    for (const achievement of achievementsStorage.achievements) {
+      if (!achievement.done) {
+        showAchievements = true;
+      }
+    }
+    if (showAchievements) {
+      this.showPanel(P_CONTAINERS_ACHIEVEMENT);
+    } else {
+      this.showPanel(P_CONTAINERS_LIST);
+    }
+  },
+
+  // In case the user wants to click multiple actions,
+  // they have to click the "Done" button to stop the panel
+  // from showing
+  async setAchievementDone(achievementName) {
+    const achievementsStorage = await browser.storage.local.get({achievements: []});
+    const achievements = achievementsStorage.achievements;
+    achievements.forEach((achievement, index, achievementsArray) => {
+      if (achievement.name === achievementName) {
+        achievement.done = true;
+        achievementsArray[index] = achievement;
+      }
+    });
+    browser.storage.local.set({achievements});
+  },
+
   setOnboardingStage(stage) {
     return browser.storage.local.set({
       [ONBOARDING_STORAGE_KEY]: stage
@@ -146,17 +165,26 @@ const Logic = {
     browser.browserAction.setBadgeBackgroundColor({color: ""});
     browser.browserAction.setBadgeText({text: ""});
     storage.browserActionBadgesClicked.push(extensionInfo.version);
-    browser.storage.local.set({browserActionBadgesClicked: storage.browserActionBadgesClicked});
+    // use set and spread to create a unique array
+    const browserActionBadgesClicked = [...new Set(storage.browserActionBadgesClicked)];
+    browser.storage.local.set({
+      browserActionBadgesClicked
+    });
   },
 
   async identity(cookieStoreId) {
-    const identity = await browser.contextualIdentities.get(cookieStoreId);
-    return identity || {
+    const defaultContainer = {
       name: "Default",
       cookieStoreId,
       icon: "default-tab",
       color: "default-tab"
     };
+    // Handle old style rejection with null and also Promise.reject new style
+    try {
+      return await browser.contextualIdentities.get(cookieStoreId) || defaultContainer;
+    } catch(e) {
+      return defaultContainer;
+    }
   },
 
   addEnterHandler(element, handler) {
@@ -165,6 +193,7 @@ const Logic = {
     });
     element.addEventListener("keydown", (e) => {
       if (e.keyCode === 13) {
+        e.preventDefault();
         handler(e);
       }
     });
@@ -183,22 +212,24 @@ const Logic = {
     return false;
   },
 
-  refreshIdentities() {
-    return Promise.all([
+  async refreshIdentities() {
+    const [identities, state] = await Promise.all([
       browser.contextualIdentities.query({}),
       browser.runtime.sendMessage({
-        method: "queryIdentitiesState"
-      })
-    ]).then(([identities, state]) => {
-      this._identities = identities.map((identity) => {
-        const stateObject = state[Logic.userContextId(identity.cookieStoreId)];
-        if (stateObject) {
-          identity.hasOpenTabs = stateObject.hasOpenTabs;
-          identity.hasHiddenTabs = stateObject.hasHiddenTabs;
+        method: "queryIdentitiesState",
+        message: {
+          windowId: browser.windows.WINDOW_ID_CURRENT
         }
-        return identity;
-      });
-    }).catch((e) => {throw e;});
+      })
+    ]);
+    this._identities = identities.map((identity) => {
+      const stateObject = state[identity.cookieStoreId];
+      if (stateObject) {
+        identity.hasOpenTabs = stateObject.hasOpenTabs;
+        identity.hasHiddenTabs = stateObject.hasHiddenTabs;
+      }
+      return identity;
+    });
   },
 
   getPanelSelector(panel) {
@@ -265,12 +296,9 @@ const Logic = {
     return Logic.userContextId(identity.cookieStoreId);
   },
 
-  sendTelemetryPayload(message = {}) {
-    if (!message.event) {
-      throw new Error("Missing event name for telemetry");
-    }
-    message.method = "sendTelemetryPayload";
-    browser.runtime.sendMessage(message);
+  currentCookieStoreId() {
+    const identity = Logic.currentIdentity();
+    return identity.cookieStoreId;
   },
 
   removeIdentity(userContextId) {
@@ -308,14 +336,6 @@ const Logic = {
     });
   },
 
-  getShieldStudyVariation() {
-    return browser.runtime.sendMessage({
-      method: "getShieldStudyVariation"
-    }).then(variation => {
-      this._onboardingVariation = variation;
-    });
-  },
-
   generateIdentityName() {
     const defaultName = "Container #";
     const ids = [];
@@ -460,40 +480,40 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
   panelSelector: "#container-panel",
 
   // This method is called when the object is registered.
-  initialize() {
+  async initialize() {
     Logic.addEnterHandler(document.querySelector("#container-add-link"), () => {
       Logic.showPanel(P_CONTAINER_EDIT, { name: Logic.generateIdentityName() });
     });
 
     Logic.addEnterHandler(document.querySelector("#edit-containers-link"), () => {
-      Logic.sendTelemetryPayload({
-        event: "edit-containers"
-      });
       Logic.showPanel(P_CONTAINERS_EDIT);
     });
 
-    Logic.addEnterHandler(document.querySelector("#sort-containers-link"), () => {
-      browser.runtime.sendMessage({
-        method: "sortTabs"
-      }).then(() => {
+    Logic.addEnterHandler(document.querySelector("#sort-containers-link"), async function () {
+      try {
+        await browser.runtime.sendMessage({
+          method: "sortTabs"
+        });
         window.close();
-      }).catch(() => {
+      } catch (e) {
         window.close();
-      });
+      }
     });
 
     document.addEventListener("keydown", (e) => {
+      const selectables = [...document.querySelectorAll("[tabindex='0'], [tabindex='-1']")];
       const element = document.activeElement;
+      const index = selectables.indexOf(element) || 0;
       function next() {
-        const nextElement = element.nextElementSibling;
+        const nextElement = selectables[index + 1];
         if (nextElement) {
-          nextElement.querySelector("td[tabindex=0]").focus();
+          nextElement.focus();
         }
       }
       function previous() {
-        const previousElement = element.previousElementSibling;
+        const previousElement = selectables[index - 1];
         if (previousElement) {
-          previousElement.querySelector("td[tabindex=0]").focus();
+          previousElement.focus();
         }
       }
       switch (e.keyCode) {
@@ -603,21 +623,18 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
         tr.appendChild(manage);
       }
 
-      Logic.addEnterHandler(tr, e => {
+      Logic.addEnterHandler(tr, async function (e) {
         if (e.target.matches(".open-newtab")
             || e.target.parentNode.matches(".open-newtab")
             || e.type === "keydown") {
-          browser.runtime.sendMessage({
-            method: "openTab",
-            message: {
-              userContextId: Logic.userContextId(identity.cookieStoreId),
-              source: "pop-up"
-            }
-          }).then(() => {
+          try {
+            browser.tabs.create({
+              cookieStoreId: identity.cookieStoreId
+            });
             window.close();
-          }).catch(() => {
+          } catch (e) {
             window.close();
-          });
+          }
         } else if (hasTabs) {
           Logic.showPanel(P_CONTAINER_INFO, identity);
         }
@@ -652,27 +669,30 @@ Logic.registerPanel(P_CONTAINER_INFO, {
   panelSelector: "#container-info-panel",
 
   // This method is called when the object is registered.
-  initialize() {
+  async initialize() {
     Logic.addEnterHandler(document.querySelector("#close-container-info-panel"), () => {
       Logic.showPreviousPanel();
     });
 
-    Logic.addEnterHandler(document.querySelector("#container-info-hideorshow"), () => {
+    Logic.addEnterHandler(document.querySelector("#container-info-hideorshow"), async function () {
       const identity = Logic.currentIdentity();
-      browser.runtime.sendMessage({
-        method: identity.hasHiddenTabs ? "showTabs" : "hideTabs",
-        userContextId: Logic.currentUserContextId()
-      }).then(() => {
+      try {
+        browser.runtime.sendMessage({
+          method: identity.hasHiddenTabs ? "showTabs" : "hideTabs",
+          windowId: browser.windows.WINDOW_ID_CURRENT,
+          cookieStoreId: Logic.currentCookieStoreId()
+        });
         window.close();
-      }).catch(() => {
+      } catch (e) {
         window.close();
-      });
+      }
     });
 
     // Check if the user has incompatible add-ons installed
-    browser.runtime.sendMessage({
-      method: "checkIncompatibleAddons"
-    }).then(incompatible => {
+    try {
+      const incompatible = await browser.runtime.sendMessage({
+        method: "checkIncompatibleAddons"
+      });
       const moveTabsEl = document.querySelector("#container-info-movetabs");
       if (incompatible) {
         const fragment = document.createDocumentFragment();
@@ -688,22 +708,22 @@ Logic.registerPanel(P_CONTAINER_INFO, {
 
         moveTabsEl.parentNode.insertBefore(fragment, moveTabsEl.nextSibling);
       } else {
-        Logic.addEnterHandler(moveTabsEl, () => {
-          browser.runtime.sendMessage({
+        Logic.addEnterHandler(moveTabsEl, async function () {
+          await browser.runtime.sendMessage({
             method: "moveTabsToWindow",
-            userContextId: Logic.userContextId(Logic.currentIdentity().cookieStoreId),
-          }).then(() => {
-            window.close();
-          }).catch((e) => { throw e; });
+            windowId: browser.windows.WINDOW_ID_CURRENT,
+            cookieStoreId: Logic.currentIdentity().cookieStoreId,
+          });
+          window.close();
         });
       }
-    }).catch(() => {
+    } catch (e) {
       throw new Error("Could not check for incompatible add-ons.");
-    });
+    }
   },
 
   // This method is called when the panel is shown.
-  prepare() {
+  async prepare() {
     const identity = Logic.currentIdentity();
 
     // Populating the panel: name and icon
@@ -731,10 +751,12 @@ Logic.registerPanel(P_CONTAINER_INFO, {
     }
 
     // Let's retrieve the list of tabs.
-    return browser.runtime.sendMessage({
+    const tabs = await browser.runtime.sendMessage({
       method: "getTabs",
-      userContextId: Logic.currentUserContextId(),
-    }).then(this.buildInfoTable);
+      windowId: browser.windows.WINDOW_ID_CURRENT,
+      cookieStoreId: Logic.currentIdentity().cookieStoreId
+    });
+    return this.buildInfoTable(tabs);
   },
 
   buildInfoTable(tabs) {
@@ -747,20 +769,14 @@ Logic.registerPanel(P_CONTAINER_INFO, {
       tr.innerHTML = escaped`
         <td></td>
         <td class="container-info-tab-title truncate-text" title="${tab.url}" >${tab.title}</td>`;
-      tr.querySelector("td").appendChild(Utils.createFavIconElement(tab.favicon));
+      tr.querySelector("td").appendChild(Utils.createFavIconElement(tab.favIconUrl));
 
       // On click, we activate this tab. But only if this tab is active.
-      if (tab.active) {
+      if (!tab.hiddenState) {
         tr.classList.add("clickable");
-        Logic.addEnterHandler(tr, () => {
-          browser.runtime.sendMessage({
-            method: "showTab",
-            tabId: tab.id,
-          }).then(() => {
-            window.close();
-          }).catch(() => {
-            window.close();
-          });
+        Logic.addEnterHandler(tr, async function () {
+          await browser.tabs.update(tab.id, {active: true});
+          window.close();
         });
       }
     }
@@ -812,7 +828,7 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
         </td>`;
       tr.querySelector(".container-name").textContent = identity.name;
       tr.querySelector(".edit-container").setAttribute("title", `Edit ${identity.name} container`);
-      tr.querySelector(".remove-container").setAttribute("title", `Delete ${identity.name} container`);
+      tr.querySelector(".remove-container").setAttribute("title", `Remove ${identity.name} container`);
 
 
       Logic.addEnterHandler(tr, e => {
@@ -871,25 +887,25 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
 
   },
 
-  _submitForm() {
+  async _submitForm() {
     const formValues = new FormData(this._editForm);
-    return browser.runtime.sendMessage({
-      method: "createOrUpdateContainer",
-      message: {
-        userContextId: formValues.get("container-id") || NEW_CONTAINER_ID,
-        params: {
-          name: document.getElementById("edit-container-panel-name-input").value || Logic.generateIdentityName(),
-          icon: formValues.get("container-icon") || DEFAULT_ICON,
-          color: formValues.get("container-color") || DEFAULT_COLOR,
+    try {
+      await browser.runtime.sendMessage({
+        method: "createOrUpdateContainer",
+        message: {
+          userContextId: formValues.get("container-id") || NEW_CONTAINER_ID,
+          params: {
+            name: document.getElementById("edit-container-panel-name-input").value || Logic.generateIdentityName(),
+            icon: formValues.get("container-icon") || DEFAULT_ICON,
+            color: formValues.get("container-color") || DEFAULT_COLOR,
+          }
         }
-      }
-    }).then(() => {
-      return Logic.refreshIdentities();
-    }).then(() => {
+      });
+      await Logic.refreshIdentities();
       Logic.showPreviousPanel();
-    }).catch(() => {
+    } catch (e) {
       Logic.showPanel(P_CONTAINERS_LIST);
-    });
+    }
   },
 
   showAssignedContainers(assignments) {
@@ -919,17 +935,15 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
           src="/img/container-delete.svg"
         />`;
         const deleteButton = trElement.querySelector(".delete-assignment");
-        Logic.addEnterHandler(deleteButton, () => {
+        const that = this;
+        Logic.addEnterHandler(deleteButton, async function () {
           const userContextId = Logic.currentUserContextId();
           // Lets show the message to the current tab
           // TODO remove then when firefox supports arrow fn async
-          Logic.currentTab().then((currentTab) => {
-            Logic.setOrRemoveAssignment(currentTab.id, assumedUrl, userContextId, true);
-            delete assignments[siteKey];
-            this.showAssignedContainers(assignments);
-          }).catch((e) => {
-            throw e;
-          });
+          const currentTab = await Logic.currentTab();
+          Logic.setOrRemoveAssignment(currentTab.id, assumedUrl, userContextId, true);
+          delete assignments[siteKey];
+          that.showAssignedContainers(assignments);
         });
         trElement.classList.add("container-info-tab-row", "clickable");
         tableElement.appendChild(trElement);
@@ -1002,19 +1016,19 @@ Logic.registerPanel(P_CONTAINER_DELETE, {
       Logic.showPreviousPanel();
     });
 
-    Logic.addEnterHandler(document.querySelector("#delete-container-ok-link"), () => {
+    Logic.addEnterHandler(document.querySelector("#delete-container-ok-link"), async function () {
       /* This promise wont resolve if the last tab was removed from the window.
           as the message async callback stops listening, this isn't an issue for us however it might be in future
           if you want to do anything post delete do it in the background script.
           Browser console currently warns about not listening also.
       */
-      Logic.removeIdentity(Logic.userContextId(Logic.currentIdentity().cookieStoreId)).then(() => {
-        return Logic.refreshIdentities();
-      }).then(() => {
+      try {
+        await Logic.removeIdentity(Logic.userContextId(Logic.currentIdentity().cookieStoreId));
+        await Logic.refreshIdentities();
         Logic.showPreviousPanel();
-      }).catch(() => {
+      } catch(e) {
         Logic.showPanel(P_CONTAINERS_LIST);
-      });
+      }
     });
   },
 
@@ -1033,4 +1047,25 @@ Logic.registerPanel(P_CONTAINER_DELETE, {
   },
 });
 
+// P_CONTAINERS_ACHIEVEMENT: Page for achievement.
+// ----------------------------------------------------------------------------
+
+Logic.registerPanel(P_CONTAINERS_ACHIEVEMENT, {
+  panelSelector: ".achievement-panel",
+
+  // This method is called when the object is registered.
+  initialize() {
+    // Set done and move to the containers list panel.
+    Logic.addEnterHandler(document.querySelector("#achievement-done-button"), async function () {
+      await Logic.setAchievementDone("manyContainersOpened");
+      Logic.showPanel(P_CONTAINERS_LIST);
+    });
+  },
+
+  // This method is called when the panel is shown.
+  prepare() {
+    return Promise.resolve(null);
+  },
+});
+
 Logic.init();

webextension/manifest.json

@@ -1,9 +1,9 @@
 {
   "manifest_version": 2,
-  "name": "Containers Experiment",
-  "version": "2.4.1",
+  "name": "Firefox Multi-Account Containers",
+  "version": "4.1.0",
 
-  "description": "Containers works by isolating cookie jars using separate origin-attributes defined visually by colored ‘Container Tabs’. This add-on is a modified version of the containers feature for Firefox Test Pilot.",
+  "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.",
   "icons": {
     "48": "img/container-site-d-48.png",
     "96": "img/container-site-d-96.png"
@@ -11,8 +11,7 @@
 
   "applications": {
     "gecko": {
-      "strict_min_version": "51.0",
-      "update_url": "https://testpilot.firefox.com/files/@testpilot-containers/updates.json"
+      "strict_min_version": "53.0"
     }
   },
 
@@ -44,16 +43,13 @@
 
   "browser_action": {
     "browser_style": true,
-    "default_icon": {
-      "16": "img/container-site-d-24.png",
-      "32": "img/container-site-d-48.png"
-    },
-    "default_title": "Containers",
+    "default_icon": "img/container-site.svg",
+    "default_title": "Multi-Account Containers",
     "default_popup": "popup.html"
   },
 
   "background": {
-    "scripts": ["background.js"]
+    "page": "js/background/index.html"
   },
 
   "content_scripts": [

webextension/popup.html

@@ -1,7 +1,7 @@
 <html>
 <head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
-  <title>Containers browserAction Popup</title>
+  <title>Multi-Account Containers</title>
   <link rel="stylesheet" href="/css/popup.css">
 
 </head>
@@ -67,6 +67,34 @@
     <a href="#" id="onboarding-longpress-button" class="onboarding-button">Done</a>
   </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" />
+    <h3 class="onboarding-title">100 tabs!</h3>
+    <p>You've opened 100 Container tabs.</p>
+    <p>If you enjoy Containers, help us spread the word!</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">
+          <img src="/img/amo-icon.svg" class="cta-icon" alt="addons.mozilla.org Icon">
+          Rate
+        </span>
+      </a>
+      <a class="cta-link" href="https://bit.ly/fb-share-mac-addon" target="_blank">
+        <span class="cta fb-share-cta">
+          <img src="/img/webicon-facebook.svg" class="cta-icon" alt="Facebook Icon">
+          Share
+        </span>
+      </a>
+      <a class="cta-link" href="http://bit.ly/tweet-100-tabs-mac-addon" target="_blank">
+        <span class="cta tweet-cta">
+          <img src="/img/webicon-twitter.svg" class="cta-icon" alt="Twitter Icon">
+          Tweet
+        </span>
+      </a>
+    </p>
+    <a href="#" id="achievement-done-button" class="onboarding-button">Done</a>
+  </div>
+
   <div class="panel container-panel hide" id="container-panel">
     <div id="current-tab">
       <h3>Current Tab</h3>