Merge pull request #1509 from mozilla/october-2019-dot-release

Updated add-on to version 6.1.1

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,27 @@
+<!--
+  Feel free to ignore this Issue template if you just want to ask or suggest something. If you experience an Issue then please provide all asked information.
+
+  Also please make sure that:
+  - "Firefox will: Never remember history" in the Firefox Preferences/Options under "Privacy & Security > History" is NOT selected
+  - You are NOT using Firefox in a Private Window
+  - You can see a grayed out but ticked Checkbox with the description "Enable Container Tabs" in the Firefox Preferences/Options under "Tabs"
+-->
+- Multi-Account Containers Version:
+- Operating System + Version:
+- Firefox Version:
+- Other installed Add-ons + Version + Enabled/Disabled-Status:
+<!-- To be able to copy & paste the full list of your Add-ons navigate to "about:support" and scroll down to "Extensions" -->
+
+
+### Actual behavior
+
+
+### Expected behavior
+
+
+### Steps to reproduce
+1.
+2.
+3.
+
+### Notes

.gitignore

@@ -3,8 +3,12 @@ package-lock.json
 node_modules
 README.html
 *.xpi
-*.swp
+*.sw*
-*.swo
 .vimrc
 .env
 addon.env
+
+src/web-ext-artifacts/*
+
+# JetBrains IDE files
+.idea

.jpmignore

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

.stylelintrc

@@ -5,7 +5,7 @@
 
   "extends": "stylelint-config-standard",
 
-  "ignoreFiles": ["webextension/css/*.min.css"],
+  "ignoreFiles": ["src/css/*.min.css"],
 
   "rules": {
     "declaration-block-no-duplicate-properties": true,

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-    - "6.1"
+    - "lts/*"
 
 notifications:
     irc:

CODE_OF_CONDUCT.md

@@ -1,3 +1,15 @@
-# Code Of Conduct
+# Community Participation Guidelines
 
-This add-on follows the [Mozilla Community Participation Guidelines](https://www.mozilla.org/en-US/about/governance/policies/participation/) for our code of conduct.
+This repository is governed by Mozilla's code of conduct and etiquette guidelines. 
+For more details, please read the
+[Mozilla Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/). 
+
+## How to Report
+For more information on how to report violations of the Community Participation Guidelines, please read our '[How to Report](https://www.mozilla.org/about/governance/policies/participation/reporting/)' page.
+
+<!--
+## Project Specific Etiquette
+
+In some cases, there will be additional project etiquette i.e.: (https://bugzilla.mozilla.org/page.cgi?id=etiquette.html).
+Please update for your project.
+-->

CONTRIBUTING.md

@@ -9,9 +9,9 @@ Everyone is welcome to contribute to containers. Reach out to team members if yo
 
 If you find a bug with containers, please file a issue.
 
-Check first if the bug might already exist: https://github.com/mozilla/testpilot-containers/issues
+Check first if the bug might already exist: https://github.com/mozilla/multi-account-containers/issues
 
-[Open an issue](https://github.com/mozilla/testpilot-containers/issues/new)
+[Open an issue](https://github.com/mozilla/multi-account-containers/issues/new)
 
 1. Visit about:support
 2. Click "Copy raw data to clipboard" and paste into the bug. Alternatively copy the following sections into the issue:

README.md

@@ -1,11 +1,8 @@
-# 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)
+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/)
 
-[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:
+[Available on addons.mozilla.org](https://addons.mozilla.org/en-GB/firefox/addon/multi-account-containers/)
-
-* Will a general Firefox audience understand the Containers feature?
-* Is the UI as currently implemented in Nightly clear or discoverable?
 
 For more info, see: 
 
@@ -16,73 +13,44 @@ For more info, see:
 ## Requirements
 
 * node 7+ (for jpm)
-* Firefox 53+
+* Firefox 57+
 
 
 ## 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. 
+1. `npm install`
-
+2. `./node_modules/.bin/web-ext run -s src/`
-1. Make a new profile by running `/path/to/firefox -P`, which launches the profile editor. "Create Profile" -- name it whatever you wish (e.g. 'addon_dev') and store it in the default location. It's probably best to deselect the option to "Use without asking," since you probably don't want to use this as your default profile.
-
-2. Once you've created your profile, click "Start Firefox". A new instance of Firefox should launch. Go to Tools->Add-ons and search for "DevPrefs". Install it. Quit Firefox.
-
-3. Now you have a new, vanilla Firefox profile with the DevPrefs add-on installed. You can use your new profile with the code in _this_ repository like so:
-
-#### Run the `.xpi` file in an unbranded build
-Release & Beta channels do not allow un-signed add-ons, even with the DevPrefs. So, you must run the add-on in an [unbranded build](https://wiki.mozilla.org/Add-ons/Extension_Signing#Unbranded_Builds):
-
-1. Download and install an un-branded build of Firefox
-2. Download the latest `.xpi` from this repository's releases
-3. Run the un-branded build of Firefox with your DevPrefs profile
-4. Go to `about:addons`
-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`
-2. `cd testpilot-containers`
-3. `npm install`
-4. `./node_modules/.bin/jpm run -p /Path/To/Firefox/Profiles/{junk}.addon_dev -b FirefoxBeta` (where FirefoxBeta might be: ~/<reponame>/obj-x86_64-pc-linux-gnu/dist/bin/firefox or ~/<downloadedFirefoxBeta>/firefox)
-
-Check out the [Browser Toolbox](https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox) for more information about debugging add-on code.
-
-### 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`.
-
-### 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` 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
+
+1. `npm run-script build`
+2. [Upload the `.zip` 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. Download the signed `.xpi` from [the addon versions page](https://addons.mozilla.org/en-US/developers/addon/multi-account-containers/versions)
+2. [Make the new release on
+   GitHub](https://github.com/mozilla/multi-account-containers/releases/new)
+   * Use the version number for "Tag version" and "Release title"
+   * 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 https://fairheadcreative.com.
+
 - [Licence](./LICENSE.txt)
 - [Contributing](./CONTRIBUTING.md)
 - [Code Of Conduct](./CODE_OF_CONDUCT.md)

bootstrap.js

@@ -1,120 +0,0 @@
-"use strict";
-
-const PREFS = [
-  {
-    name: "privacy.userContext.enabled",
-    value: true,
-    type: "bool"
-  },
-  {
-    name: "privacy.userContext.longPressBehavior",
-    value: 2,
-    type: "int"
-  },
-  {
-    name: "privacy.userContext.ui.enabled",
-    value: true, // Post web ext we will be setting this true
-    type: "bool"
-  },
-  {
-    name: "privacy.usercontext.about_newtab_segregation.enabled",
-    value: true,
-    type: "bool"
-  },
-];
-const Ci = Components.interfaces;
-const Cu = Components.utils;
-Cu.import("resource://gre/modules/Services.jsm");
-Cu.import("resource://gre/modules/XPCOMUtils.jsm");
-const { TextDecoder, TextEncoder } = Cu.import("resource://gre/modules/commonjs/toolkit/loader.js", {});
-
-XPCOMUtils.defineLazyModuleGetter(this, "OS",
-                                  "resource://gre/modules/osfile.jsm");
-
-const JETPACK_DIR_BASENAME = "jetpack";
-const EXTENSION_ID = "@testpilot-containers";
-
-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 getConfig() {
-  const bytes = await OS.File.read(filename());
-  const raw = new TextDecoder().decode(bytes) || "";
-  let savedConfig = {savedConfiguration: {}};
-  if (raw) {
-    savedConfig = JSON.parse(raw);
-  }
-
-  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, pref.name);
-      } else {
-        savedConfig.savedConfiguration.prefs[pref.name] = Services.prefs.getBoolPref(pref.name, pref.value);
-      }
-    });
-  }
-  const serialized = JSON.stringify(savedConfig);
-  const bytes = new TextEncoder().encode(serialized) || "";
-  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(aData, aReason) {
-  if (aReason === ADDON_UNINSTALL
-      || aReason === ADDON_DISABLE) {
-    const config = await getConfig();
-    const storedPrefs = config.savedConfiguration.prefs;
-    PREFS.forEach((pref) => {
-      if (pref.name in storedPrefs) {
-        if ("int" === pref.type) {
-          Services.prefs.setIntPref(pref.name, storedPrefs[pref.name]);
-        } else {
-          Services.prefs.setBoolPref(pref.name, storedPrefs[pref.name]);
-        }
-      }
-    });
-  }
-}
-
-// eslint-disable-next-line no-unused-vars
-function startup({webExtension}) {
-  // Reset prefs that may have changed, or are legacy
-  setPrefs();
-  // Start the embedded webextension.
-  webExtension.startup();
-}
-
-// eslint-disable-next-line no-unused-vars
-function shutdown() {
-}
-

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

@@ -1,22 +0,0 @@
-<?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>Testpilot containers</em:name>
-    <em:targetApplication>
-      <Description>
-        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <!--Firefox-->
-        <em:minVersion>51.0a1</em:minVersion>
-        <em:maxVersion>*</em:maxVersion>
-      </Description>
-    </em:targetApplication>
-    <em:version>3.1.0</em:version>
-    <em:unpack>false</em:unpack>
-  </Description>
-</RDF>
-

package.json

@@ -1,44 +1,48 @@
 {
   "name": "testpilot-containers",
-  "title": "Containers Experiment",
+  "title": "Multi-Account Containers",
-  "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": "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": "3.1.0",
+  "version": "6.1.1",
   "author": "Andrea Marchesini, Luke Crouch and Jonathan Kingston",
   "bugs": {
-    "url": "https://github.com/mozilla/testpilot-containers/issues"
+    "url": "https://github.com/mozilla/multi-account-containers/issues"
   },
   "dependencies": {},
   "devDependencies": {
-    "addons-linter": "^0.15.14",
+    "ajv": "^6.6.2",
-    "deploy-txp": "^1.0.7",
+    "addons-linter": "^1.3.2",
+    "chai": "^4.1.2",
     "eslint": "^3.17.1",
     "eslint-plugin-no-unsanitized": "^2.0.0",
     "eslint-plugin-promise": "^3.4.0",
-    "htmllint-cli": "^0.0.5",
+    "htmllint-cli": "0.0.7",
-    "jpm": "^1.2.2",
+    "jsdom": "^11.6.2",
     "json": "^9.0.6",
+    "mocha": "^5.0.0",
     "npm-run-all": "^4.0.0",
+    "sinon": "^4.4.0",
+    "sinon-chai": "^2.14.0",
     "stylelint": "^7.9.0",
     "stylelint-config-standard": "^16.0.0",
-    "stylelint-order": "^0.3.0"
+    "stylelint-order": "^0.3.0",
+    "web-ext": "^2.2.2"
   },
-  "homepage": "https://github.com/mozilla/testpilot-containers#readme",
+  "homepage": "https://github.com/mozilla/multi-account-containers#readme",
   "license": "MPL-2.0",
   "main": "index.js",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/mozilla/testpilot-containers.git"
+    "url": "git+https://github.com/mozilla/multi-account-containers.git"
   },
   "scripts": {
-    "build": "npm test && jpm xpi",
+    "build": "npm test && cd src && web-ext build --overwrite-dest",
-    "deploy": "deploy-txp",
     "lint": "npm-run-all lint:*",
-    "lint:addon": "addons-linter webextension --self-hosted",
+    "lint:addon": "addons-linter src --self-hosted",
-    "lint:css": "stylelint webextension/css/*.css",
+    "lint:css": "stylelint src/css/*.css",
-    "lint:html": "htmllint webextension/*.html",
+    "lint:html": "htmllint *.html",
     "lint:js": "eslint .",
-    "package": "npm run build && mv testpilot-containers.xpi addon.xpi",
+    "package": "rm -rf src/web-ext-artifacts && npm run build && mv src/web-ext-artifacts/firefox_multi-account_containers-*.zip addon.xpi",
-    "test": "npm run lint"
+    "test": "npm run lint && mocha ./test/setup.js test/**/*.test.js",
-  },
+    "test-watch": "mocha ./test/setup.js test/**/*.test.js --watch"
-  "updateURL": "https://testpilot.firefox.com/files/@testpilot-containers/updates.json"
+  }
 }

src/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>

src/css/confirm-page.css

@@ -47,7 +47,7 @@ html {
 }
 
 #redirect-url {
-  background: #efefef;
+  background: #efedf0; /* Grey 20 */
   border-radius: 2px;
   line-height: 1.5;
   padding-block-end: 0.5rem;
@@ -56,6 +56,14 @@ html {
   padding-inline-start: 0.5rem;
 }
 
+/* stylelint-disable media-feature-name-no-unknown */
+@media (prefers-color-scheme: dark) {
+  #redirect-url {
+    background: #38383d; /* Grey 70 */
+  }
+}
+/* stylelint-enable */
+
 #redirect-url img {
   block-size: 16px;
   inline-size: 16px;

src/css/popup.css

@@ -19,8 +19,13 @@ html {
 
 body {
   font-family: Roboto, Noto, "San Francisco", Ubuntu, "Segoe UI", "Fira Sans", message-box, Arial, sans-serif;
-  inline-size: 300px;
+  inline-size: calc(var(--overflow-size) + 299px);
-  max-inline-size: 300px;
+  max-inline-size: calc(var(--overflow-size) + 299px);
+}
+
+html,
+body {
+  block-size: 100%; /* Bugfix: issue 948 */
 }
 
 :root {
@@ -45,6 +50,10 @@ body {
   --small-text-size: 0.833rem; /* 10px */
   --small-radius: 3px;
   --icon-button-size: calc(calc(var(--block-line-separation-size) * 2) + 1.66rem); /* 20px */
+  --column-panel-inline-size: calc(var(--overflow-size) + 267px);
+  --inactive-opacity: 0.3;
+  --overflow-size: 1px;
+  --icon-fit: 8;
 }
 
 @media (min-resolution: 1dppx) {
@@ -234,7 +243,7 @@ table {
   text-decoration: underline;
 }
 
-/* Panels keep everything togethert */
+/* Panels keep everything together */
 .panel {
   display: flex;
   flex-direction: column;
@@ -242,7 +251,8 @@ table {
   min-block-size: 400px;
 }
 
-.panel.onboarding {
+.panel.onboarding,
+.achievement-panel {
   align-items: center;
   block-size: 360px;
   margin-block-end: 16px;
@@ -265,7 +275,7 @@ table {
 .column-panel-content {
   display: flex;
   flex-direction: column;
-  inline-size: 268px;
+  inline-size: var(--column-panel-inline-size);
 }
 
 .column-panel-content .panel-footer {
@@ -536,7 +546,7 @@ span ~ .panel-header-text {
 }
 
 #current-tab > label > input:checked {
-  background-image: url("chrome://global/skin/in-content/check.svg#check-native");
+  background-image: url("/img/check.svg");
   background-position: -1px -1px;
   background-size: var(--icon-size);
 }
@@ -574,7 +584,12 @@ span ~ .panel-header-text {
 }
 
 .edit-containers-panel .userContext-wrapper {
-  max-inline-size: 204px;
+  max-inline-size: calc(var(--overflow-size) + 203px);
+}
+
+.disable-edit-containers {
+  opacity: var(--inactive-opacity);
+  pointer-events: none;
 }
 
 .userContext-wrapper {
@@ -652,7 +667,11 @@ span ~ .panel-header-text {
 
 /* Container info list */
 .container-info-tab-title {
-  flex: 1;
+  display: flex;
+}
+
+.container-info-tab-row:hover .container-info-tab-title .truncate-text {
+  inline-size: calc(var(--column-panel-inline-size) - 58px);
 }
 
 #container-info-hideorshow {
@@ -669,6 +688,21 @@ span ~ .panel-header-text {
   opacity: 0.3;
 }
 
+.container-close-tab {
+  transform: scale(0.7);
+  visibility: collapse;
+}
+
+.container-info-tab-row:hover .container-close-tab {
+  opacity: 0.5;
+  visibility: visible;
+}
+
+.container-info-tab-row .container-close-tab:hover {
+  opacity: 1;
+  visibility: visible;
+}
+
 .container-info-has-tabs,
 .container-info-tab-row {
   align-items: center;
@@ -695,10 +729,6 @@ span ~ .panel-header-text {
   margin-inline-end: 0;
 }
 
-.container-info-tab-row td {
-  max-inline-size: 200px;
-}
-
 .container-info-list {
   display: flex;
   flex-direction: column;
@@ -760,8 +790,12 @@ span ~ .panel-header-text {
   padding-inline-start: 16px;
 }
 
+.edit-container-panel .columns {
+  overflow: hidden; /* Bugfix: issue 948 */
+}
+
 #edit-sites-assigned {
-  flex: 1;
+  flex: 1000; /* Bugfix: issue 948 */
 }
 
 #edit-sites-assigned h3 {
@@ -799,7 +833,7 @@ span ~ .panel-header-text {
   align-items: center;
   block-size: 29px;
   display: flex;
-  flex: 0 0 calc(100% / 8);
+  flex: 0 0 calc(100% / var(--icon-fit));
 }
 
 .radio-choice > .radio-container > label {
@@ -887,3 +921,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;
+}

src/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>

src/img/check.svg

@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="#3c3c3c" d="M6 14a1 1 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.639 1.146l-7 10a1 1 0 0 1-.732.427A.863.863 0 0 1 6 14z"/>
+</svg>

src/img/container-close-tab.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 7">
+	<polygon fill="#4c4c4c" points="5.8,0 3.5,2.4 1.2,0 0,1.2 2.4,3.5 0.1,5.8 1.2,7 3.5,4.7 5.8,7 7,5.8 4.7,3.5 7,1.2"/>
+</svg>

src/img/container-site-light.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 #bebebe" 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>

src/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>

src/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>

src/js/.eslintrc.js

@@ -7,7 +7,6 @@ module.exports = {
     "badge": true,
     "backgroundLogic": true,
     "identityState": true,
-    "messageHandler": true,
+    "messageHandler": true
-    "tabPageCounter": true
   }
 };

src/js/background/assignManager.js

@@ -1,6 +1,10 @@
 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: {},
@@ -8,7 +12,11 @@ const assignManager = {
     getSiteStoreKey(pageUrl) {
       const url = new window.URL(pageUrl);
       const storagePrefix = "siteContainerMap@@_";
-      return `${storagePrefix}${url.hostname}`;
+      if (url.port === "80" || url.port === "443") {
+        return `${storagePrefix}${url.hostname}`;
+      } else {
+        return `${storagePrefix}${url.hostname}${url.port}`;
+      }
     },
 
     setExempted(pageUrl, tabId) {
@@ -109,69 +117,161 @@ const assignManager = {
     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 (siteSettings && !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 {};
+    }
+    const removeTab = backgroundLogic.NEW_TAB_PAGES.has(tab.url)
+      || (messageHandler.lastCreatedTab
+        && messageHandler.lastCreatedTab.id === tab.id);
+    const openTabId = removeTab ? tab.openerTabId : tab.id;
+
+    if (!this.canceledRequests[tab.id]) {
+      // we decided to cancel the request at this point, register canceled request
+      this.canceledRequests[tab.id] = {
+        requestIds: {
+          [options.requestId]: true
+        },
+        urls: {
+          [options.url]: true
+        }
+      };
+
+      // since webRequest onCompleted and onErrorOccurred are not 100% reliable (see #1120)
+      // we register a timer here to cleanup canceled requests, just to make sure we don't
+      // end up in a situation where certain urls in a tab.id stay canceled
+      setTimeout(() => {
+        if (this.canceledRequests[tab.id]) {
+          delete this.canceledRequests[tab.id];
+        }
+      }, 2000);
+    } else {
+      let cancelEarly = false;
+      if (this.canceledRequests[tab.id].requestIds[options.requestId] ||
+          this.canceledRequests[tab.id].urls[options.url]) {
+        // same requestId or url from the same tab
+        // this is a redirect that we have to cancel early to prevent opening two tabs
+        cancelEarly = true;
+      }
+      // we decided to cancel the request at this point, register canceled request
+      this.canceledRequests[tab.id].requestIds[options.requestId] = true;
+      this.canceledRequests[tab.id].urls[options.url] = true;
+      if (cancelEarly) {
+        return {
+          cancel: true
+        };
+      }
+    }
+
+    this.reloadPageInContainer(
+      options.url,
+      userContextId,
+      siteSettings.userContextId,
+      tab.index + 1,
+      tab.active,
+      siteSettings.neverAsk,
+      openTabId
+    );
+    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 (removeTab) {
+      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
+    this.canceledRequests = {};
     browser.webRequest.onBeforeRequest.addListener((options) => {
-      if (options.frameId !== 0 || options.tabId === -1) {
+      return this.onBeforeRequest(options);
-        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"]);
+
+    // Clean up canceled requests
+    browser.webRequest.onCompleted.addListener((options) => {
+      if (this.canceledRequests[options.tabId]) {
+        delete this.canceledRequests[options.tabId];
+      }
+    },{urls: ["<all_urls>"], types: ["main_frame"]});
+    browser.webRequest.onErrorOccurred.addListener((options) => {
+      if (this.canceledRequests[options.tabId]) {
+        delete this.canceledRequests[options.tabId];
+      }
+    },{urls: ["<all_urls>"], types: ["main_frame"]});
+
   },
 
   async _onClickedHandler(info, tab) {
     const userContextId = this.getUserContextIdFromCookieStore(tab);
     // Mapping ${URL(info.pageUrl).hostname} to ${userContextId}
+    let remove;
     if (userContextId) {
-     // let actionName;
+      switch (info.menuItemId) {
-      let remove;
+      case this.MENU_ASSIGN_ID:
-      if (info.menuItemId === this.MENU_ASSIGN_ID) {
+      case this.MENU_REMOVE_ID:
-        remove = false;
+        if (info.menuItemId === this.MENU_ASSIGN_ID) {
-      } else {
+          remove = false;
-        remove = true;
+        } 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;
       }
-      await this._setOrRemoveAssignment(tab.id, info.pageUrl, userContextId, remove);
     }
   },
 
@@ -260,6 +360,9 @@ const assignManager = {
     // 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) {
@@ -270,32 +373,57 @@ const assignManager = {
     if (siteSettings === false) {
       return false;
     }
-    // ✓ This is to mitigate https://bugzilla.mozilla.org/show_bug.cgi?id=1351418
+    let checked = false;
-    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 = "✓";
+      checked = true;
       menuId = this.MENU_REMOVE_ID;
     }
     browser.contextMenus.create({
       id: menuId,
-      title: `${prefix} Always Open in This Container`,
+      title: "Always Open in This Container",
-      checked: true,
+      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"],
     });
   },
 
-  reloadPageInContainer(url, currentUserContextId, userContextId, index, neverAsk = false) {
+  encodeURLProperty(url) {
+    return encodeURIComponent(url).replace(/[!'()*]/g, (c) => {
+      const charCode = c.charCodeAt(0).toString(16);
+      return `%${charCode}`;
+    });
+  },
+
+  reloadPageInContainer(url, currentUserContextId, userContextId, index, active, neverAsk = false, openerTabId = null) {
     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});
+      browser.tabs.create({url, cookieStoreId, index, active, openerTabId});
     } else {
-      let confirmUrl = `${loadPage}?url=${encodeURIComponent(url)}&cookieStoreId=${cookieStoreId}`;
+      let confirmUrl = `${loadPage}?url=${this.encodeURLProperty(url)}&cookieStoreId=${cookieStoreId}`;
       let currentCookieStoreId;
       if (currentUserContextId) {
         currentCookieStoreId = backgroundLogic.cookieStoreId(currentUserContextId);
@@ -304,7 +432,9 @@ const assignManager = {
       browser.tabs.create({
         url: confirmUrl,
         cookieStoreId: currentCookieStoreId,
-        index
+        openerTabId,
+        index,
+        active
       }).then(() => {
         // We don't want to sync this URL ever nor clutter the users history
         browser.history.deleteUrl({url: confirmUrl});

src/js/background/backgroundLogic.js

@@ -6,6 +6,7 @@ const backgroundLogic = {
     "about:home",
     "about:blank"
   ]),
+  unhideQueue: [],
 
   async getExtensionInfo() {
     const manifestPath = browser.extension.getURL("manifest.json");
@@ -25,13 +26,12 @@ const backgroundLogic = {
     return false;
   },
 
-  async deleteContainer(userContextId) {
+  async deleteContainer(userContextId, removed = false) {
     await this._closeTabs(userContextId);
-    await browser.contextualIdentities.remove(this.cookieStoreId(userContextId));
+    if (!removed) {
+      await browser.contextualIdentities.remove(this.cookieStoreId(userContextId));
+    }
     assignManager.deleteContainer(userContextId);
-    await browser.runtime.sendMessage({
-      method: "forgetIdentityAndRefresh"
-    });
     return {done: true, userContextId};
   },
 
@@ -51,7 +51,7 @@ const backgroundLogic = {
     });
   },
 
-  async openTab(options) {
+  async openNewTab(options) {
     let url = options.url || undefined;
     const userContextId = ("userContextId" in options) ? options.userContextId : 0;
     const active = ("nofocus" in options) ? options.nofocus : true;
@@ -64,10 +64,10 @@ const backgroundLogic = {
       url = undefined;
     }
 
-    // Unhide all hidden tabs
+    if (!this.isPermissibleURL(url)) {
-    this.showTabs({
+      return;
-      cookieStoreId
+    }
-    });
+
     return browser.tabs.create({
       url,
       active,
@@ -76,61 +76,109 @@ const backgroundLogic = {
     });
   },
 
-  async getTabs(options) {
+  isPermissibleURL(url) {
-    if (!("cookieStoreId" in options)) {
+    const protocol = new URL(url).protocol;
-      return new Error("getTabs must be called with cookieStoreId argument.");
+    // We can't open these we just have to throw them away
+    if (protocol === "about:"
+        || protocol === "chrome:"
+        || protocol === "moz-extension:") {
+      return false;
     }
+    return true;
+  },
 
-    const userContextId = backgroundLogic.getUserContextIdFromCookieStoreId(options.cookieStoreId);
+  checkArgs(requiredArguments, options, methodName) {
-    await identityState.remapTabsIfMissing(options.cookieStoreId);
+    requiredArguments.forEach((argument) => {
-    const isKnownContainer = await identityState._isKnownContainer(userContextId);
+      if (!(argument in options)) {
-    if (!isKnownContainer) {
+        return new Error(`${methodName} must be called with ${argument} argument.`);
-      return [];
+      }
-    }
+    });
+  },
+
+  async getTabs(options) {
+    const requiredArguments = ["cookieStoreId", "windowId"];
+    this.checkArgs(requiredArguments, options, "getTabs");
+    const { cookieStoreId, windowId } = options;
 
     const list = [];
-    const tabs = await this._containerTabs(options.cookieStoreId);
+    const tabs = await browser.tabs.query({
+      cookieStoreId,
+      windowId
+    });
     tabs.forEach((tab) => {
       list.push(identityState._createTabObject(tab));
     });
 
-    const containerState = await identityState.storageArea.get(options.cookieStoreId);
+    const containerState = await identityState.storageArea.get(cookieStoreId);
     return list.concat(containerState.hiddenTabs);
   },
 
+  async unhideContainer(cookieStoreId) {
+    if (!this.unhideQueue.includes(cookieStoreId)) {
+      this.unhideQueue.push(cookieStoreId);
+      await this.showTabs({
+        cookieStoreId
+      });
+      this.unhideQueue.splice(this.unhideQueue.indexOf(cookieStoreId), 1);
+    }
+  },
+
+
   async moveTabsToWindow(options) {
-    if (!("cookieStoreId" in options)) {
+    const requiredArguments = ["cookieStoreId", "windowId"];
-      return new Error("moveTabsToWindow must be called with cookieStoreId argument.");
+    this.checkArgs(requiredArguments, options, "moveTabsToWindow");
-    }
+    const { cookieStoreId, windowId } = options;
 
-    const userContextId = backgroundLogic.getUserContextIdFromCookieStoreId(options.cookieStoreId);
+    const list = await browser.tabs.query({
-    await identityState.remapTabsIfMissing(options.cookieStoreId);
+      cookieStoreId,
-    if (!identityState._isKnownContainer(userContextId)) {
+      windowId
-      return null;
+    });
-    }
 
-    const list = await identityState._matchTabsByContainer(options.cookieStoreId);
+    const containerState = await identityState.storageArea.get(cookieStoreId);
 
-    const containerState = await identityState.storageArea.get(options.cookieStoreId);
     // Nothing to do
     if (list.length === 0 &&
         containerState.hiddenTabs.length === 0) {
       return;
     }
-    const window = await browser.windows.create({
+    let newWindowObj;
-      tabId: list.shift().id
+    let hiddenDefaultTabToClose;
-    });
+    if (list.length) {
-    browser.tabs.move(list, {
+      newWindowObj = await browser.windows.create();
-      windowId: window.id,
+
-      index: -1
+      // Pin the default tab in the new window so existing pinned tabs can be moved after it.
-    });
+      // From the docs (https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/move):
+      //   Note that you can't move pinned tabs to a position after any unpinned tabs in a window, or move any unpinned tabs to a position before any pinned tabs.
+      await browser.tabs.update(newWindowObj.tabs[0].id, { pinned: true });
+
+      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
+    if (!this.unhideQueue.includes(cookieStoreId)) {
-      browser.tabs.create(object.url || DEFAULT_TAB, {
+      this.unhideQueue.push(cookieStoreId);
-        windowId: window.id,
+      for (let object of containerState.hiddenTabs) { // eslint-disable-line prefer-const
-        cookieStoreId: options.cookieStoreId
+        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 = [];
@@ -138,31 +186,50 @@ const backgroundLogic = {
     // 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 = browser.tabs.query({windowId: window.id});
+    const tabs = await browser.tabs.query({windowId: newWindowObj.id});
     for (let tab of tabs) { // eslint-disable-line prefer-const
-      if (tabs.cookieStoreId !== options.cookieStoreId) {
+      if (tab.cookieStoreId !== cookieStoreId) {
         browser.tabs.remove(tab.id);
       }
     }
-    return await identityState.storageArea.set(options.cookieStoreId, containerState);
+    const rv = await identityState.storageArea.set(cookieStoreId, containerState);
+    this.unhideQueue.splice(this.unhideQueue.indexOf(cookieStoreId), 1);
+    return rv;
   },
 
-  async _closeTabs(userContextId) {
+  async _closeTabs(userContextId, windowId = false) {
     const cookieStoreId = this.cookieStoreId(userContextId);
-    const tabs = await this._containerTabs(cookieStoreId);
+    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() {
+  async queryIdentitiesState(windowId) {
     const identities = await browser.contextualIdentities.query({});
     const identitiesOutput = {};
-    const identitiesPromise = identities.map(async function (identity) {
+    const identitiesPromise = identities.map(async (identity) => {
-      await identityState.remapTabsIfMissing(identity.cookieStoreId);
+      const { cookieStoreId } = identity;
-      const containerState = await identityState.storageArea.get(identity.cookieStoreId);
+      const containerState = await identityState.storageArea.get(cookieStoreId);
-      identitiesOutput[identity.cookieStoreId] = {
+      const openTabs = await browser.tabs.query({
+        cookieStoreId,
+        windowId
+      });
+      identitiesOutput[cookieStoreId] = {
         hasHiddenTabs: !!containerState.hiddenTabs.length,
-        hasOpenTabs: !!containerState.openTabs
+        hasOpenTabs: !!openTabs.length,
+        numberOfHiddenTabs: containerState.hiddenTabs.length,
+        numberOfOpenTabs: openTabs.length
       };
       return;
     });
@@ -172,15 +239,15 @@ const backgroundLogic = {
 
   async sortTabs() {
     const windows = await browser.windows.getAll();
-    for (let window of windows) { // eslint-disable-line prefer-const
+    for (let windowObj of windows) { // eslint-disable-line prefer-const
       // First the pinned tabs, then the normal ones.
-      await this._sortTabsInternal(window, true);
+      await this._sortTabsInternal(windowObj, true);
-      await this._sortTabsInternal(window, false);
+      await this._sortTabsInternal(windowObj, false);
     }
   },
 
-  async _sortTabsInternal(window, pinnedTabs) {
+  async _sortTabsInternal(windowObj, pinnedTabs) {
-    const tabs = await browser.tabs.query({windowId: window.id});
+    const tabs = await browser.tabs.query({windowId: windowObj.id});
     let pos = 0;
 
     // Let's collect UCIs/tabs for this window.
@@ -212,28 +279,22 @@ const backgroundLogic = {
       for (const tab of tabs) {
         ++pos;
         browser.tabs.move(tab.id, {
-          windowId: window.id,
+          windowId: windowObj.id,
           index: pos
         });
-        //xulWindow.gBrowser.moveTabTo(tab, pos++);
       }
     });
   },
 
   async hideTabs(options) {
-    if (!("cookieStoreId" in options)) {
+    const requiredArguments = ["cookieStoreId", "windowId"];
-      return new Error("hideTabs must be called with cookieStoreId option.");
+    this.checkArgs(requiredArguments, options, "hideTabs");
-    }
+    const { cookieStoreId, windowId } = options;
 
-    const userContextId = backgroundLogic.getUserContextIdFromCookieStoreId(options.cookieStoreId);
+    const userContextId = backgroundLogic.getUserContextIdFromCookieStoreId(cookieStoreId);
-    await identityState.remapTabsIfMissing(options.cookieStoreId);
-    const isKnownContainer = await identityState._isKnownContainer(userContextId);
-    if (!isKnownContainer) {
-      return null;
-    }
 
-    const containerState = await identityState.storeHidden(options.cookieStoreId);
+    const containerState = await identityState.storeHidden(cookieStoreId, windowId);
-    await this._closeTabs(userContextId); 
+    await this._closeTabs(userContextId, windowId);
     return containerState;
   },
 
@@ -243,17 +304,12 @@ const backgroundLogic = {
     }
 
     const userContextId = backgroundLogic.getUserContextIdFromCookieStoreId(options.cookieStoreId);
-    await identityState.remapTabsIfMissing(options.cookieStoreId);
-    if (!identityState._isKnownContainer(userContextId)) {
-      return null;
-    }
-
     const promises = [];
 
     const containerState = await identityState.storageArea.get(options.cookieStoreId);
 
     for (let object of containerState.hiddenTabs) { // eslint-disable-line prefer-const
-      promises.push(this.openTab({
+      promises.push(this.openNewTab({
         userContextId: userContextId,
         url: object.url,
         nofocus: options.nofocus || false,
@@ -269,12 +325,5 @@ const backgroundLogic = {
 
   cookieStoreId(userContextId) {
     return `firefox-container-${userContextId}`;
-  },
+  }
-
-  _containerTabs(cookieStoreId) {
-    return browser.tabs.query({
-      cookieStoreId
-    }).catch((e) => {throw e;});
-  },
 };
-

src/js/background/badge.js

@@ -1,8 +1,15 @@
 const MAJOR_VERSIONS = ["2.3.0", "2.4.0"];
 const badge = {
-  init() {
+  async init() {
-    this.displayBrowserActionBadge();
+    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: []});

src/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: []
+    };
+  },
+};

src/js/background/index.html

@@ -11,8 +11,6 @@
       "js/background/badge.js",
       "js/background/identityState.js",
       "js/background/messageHandler.js",
-      "js/background/tabPageCounter.js",
-      "js/backdround/init.js"
     ]
 -->
     <script type="text/javascript" src="backgroundLogic.js"></script>
@@ -20,7 +18,5 @@
     <script type="text/javascript" src="badge.js"></script>
     <script type="text/javascript" src="identityState.js"></script>
     <script type="text/javascript" src="messageHandler.js"></script>
-    <script type="text/javascript" src="tabPageCounter.js"></script>
-    <script type="text/javascript" src="init.js"></script>
   </body>
 </html>

src/js/background/messageHandler.js

@@ -0,0 +1,202 @@
+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 "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":
+        backgroundLogic.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;
+    });
+
+    // Handles external messages from webextensions
+    const externalExtensionAllowed = {};
+    browser.runtime.onMessageExternal.addListener(async (message, sender) => {
+      if (!externalExtensionAllowed[sender.id]) {
+        const extensionInfo = await browser.management.get(sender.id);
+        if (!extensionInfo.permissions.includes("contextualIdentities")) {
+          throw new Error("Missing contextualIdentities permission");
+        }
+        externalExtensionAllowed[sender.id] = true;
+      }
+      let response;
+      switch (message.method) {
+      case "getAssignment":
+        if (typeof message.url === "undefined") {
+          throw new Error("Missing message.url");
+        }
+        response = assignManager.storageArea.get(message.url);
+        break;
+      default:
+        throw new Error("Unknown message.method");
+      }
+      return response;
+    });
+    // Delete externalExtensionAllowed if add-on installs/updates; permissions might change
+    browser.management.onInstalled.addListener(extensionInfo => {
+      if (externalExtensionAllowed[extensionInfo.id]) {
+        delete externalExtensionAllowed[extensionInfo.id];
+      }
+    });
+    // Delete externalExtensionAllowed if add-on uninstalls; not needed anymore
+    browser.management.onUninstalled.addListener(extensionInfo => {
+      if (externalExtensionAllowed[extensionInfo.id]) {
+        delete externalExtensionAllowed[extensionInfo.id];
+      }
+    });
+
+    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();
+        }
+
+        backgroundLogic.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 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();

src/js/confirm-page.js

@@ -20,14 +20,21 @@ async function load() {
 
   document.getElementById("redirect-form").addEventListener("submit", (e) => {
     e.preventDefault();
-    const buttonTarget = e.explicitOriginalTarget;
+    let button = "confirm"; // Confirm is the form default.
-    switch (buttonTarget.id) {
+    let buttonTarget = e.explicitOriginalTarget;
-    case "confirm":
+    if (buttonTarget.tagName !== "BUTTON") {
-      confirmSubmit(redirectUrl, cookieStoreId);
+      buttonTarget = buttonTarget.closest("button");
-      break;
+    }
+    if (buttonTarget && buttonTarget.id) {
+      button = buttonTarget.id;
+    }
+    switch (button) {
     case "deny":
       denySubmit(redirectUrl);
       break;
+    case "confirm":
+      confirmSubmit(redirectUrl, cookieStoreId);
+      break;
     }
   });
 }

src/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);

src/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.
@@ -90,27 +91,16 @@ const Logic = {
 
     // 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]);
+    const onboardingData = await browser.storage.local.get([ONBOARDING_STORAGE_KEY]);
-    let onboarded = data[ONBOARDING_STORAGE_KEY];
+    let onboarded = onboardingData[ONBOARDING_STORAGE_KEY];
     if (!onboarded) {
-      // Legacy local storage used before panel 5
+      onboarded = 0;
-      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;
-      }
       this.setOnboardingStage(onboarded);
     }
 
     switch (onboarded) {
     case 5:
-      this.showPanel(P_CONTAINERS_LIST);
+      this.showAchievementOrContainersListPanel();
       break;
     case 4:
       this.showPanel(P_ONBOARDING_5);
@@ -132,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
@@ -141,10 +162,14 @@ const Logic = {
   async clearBrowserActionBadge() {
     const extensionInfo = await getExtensionInfo();
     const storage = await browser.storage.local.get({browserActionBadgesClicked: []});
-    browser.browserAction.setBadgeBackgroundColor({color: ""});
+    browser.browserAction.setBadgeBackgroundColor({color: null});
     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) {
@@ -152,7 +177,9 @@ const Logic = {
       name: "Default",
       cookieStoreId,
       icon: "default-tab",
-      color: "default-tab"
+      color: "default-tab",
+      numberOfHiddenTabs: 0,
+      numberOfOpenTabs: 0
     };
     // Handle old style rejection with null and also Promise.reject new style
     try {
@@ -168,6 +195,7 @@ const Logic = {
     });
     element.addEventListener("keydown", (e) => {
       if (e.keyCode === 13) {
+        e.preventDefault();
         handler(e);
       }
     });
@@ -186,11 +214,35 @@ const Logic = {
     return false;
   },
 
+  async numTabs() {
+    const activeTabs = await browser.tabs.query({windowId: browser.windows.WINDOW_ID_CURRENT});
+    return activeTabs.length;
+  },
+
+  _disableMoveTabs(message) {
+    const moveTabsEl = document.querySelector("#container-info-movetabs");
+    const fragment = document.createDocumentFragment();
+    const incompatEl = document.createElement("div");
+
+    moveTabsEl.classList.remove("clickable");
+    moveTabsEl.setAttribute("title", message);
+
+    fragment.appendChild(incompatEl);
+    incompatEl.setAttribute("id", "container-info-movetabs-incompat");
+    incompatEl.textContent = message;
+    incompatEl.classList.add("container-info-tab-row");
+
+    moveTabsEl.parentNode.insertBefore(fragment, moveTabsEl.nextSibling);
+  },
+
   async refreshIdentities() {
     const [identities, state] = await Promise.all([
       browser.contextualIdentities.query({}),
       browser.runtime.sendMessage({
-        method: "queryIdentitiesState"
+        method: "queryIdentitiesState",
+        message: {
+          windowId: browser.windows.WINDOW_ID_CURRENT
+        }
       })
     ]);
     this._identities = identities.map((identity) => {
@@ -198,6 +250,8 @@ const Logic = {
       if (stateObject) {
         identity.hasOpenTabs = stateObject.hasOpenTabs;
         identity.hasHiddenTabs = stateObject.hasHiddenTabs;
+        identity.numberOfHiddenTabs = stateObject.numberOfHiddenTabs;
+        identity.numberOfOpenTabs = stateObject.numberOfOpenTabs;
       }
       return identity;
     });
@@ -341,7 +395,7 @@ Logic.registerPanel(P_ONBOARDING_1, {
   initialize() {
     // Let's move to the next panel.
     [...document.querySelectorAll(".onboarding-start-button")].forEach(startElement => {
-      Logic.addEnterHandler(startElement, async function () {
+      Logic.addEnterHandler(startElement, async () => {
         await Logic.setOnboardingStage(1);
         Logic.showPanel(P_ONBOARDING_2);
       });
@@ -365,7 +419,7 @@ Logic.registerPanel(P_ONBOARDING_2, {
   initialize() {
     // Let's move to the containers list panel.
     [...document.querySelectorAll(".onboarding-next-button")].forEach(nextElement => {
-      Logic.addEnterHandler(nextElement, async function () {
+      Logic.addEnterHandler(nextElement, async () => {
         await Logic.setOnboardingStage(2);
         Logic.showPanel(P_ONBOARDING_3);
       });
@@ -389,7 +443,7 @@ Logic.registerPanel(P_ONBOARDING_3, {
   initialize() {
     // Let's move to the containers list panel.
     [...document.querySelectorAll(".onboarding-almost-done-button")].forEach(almostElement => {
-      Logic.addEnterHandler(almostElement, async function () {
+      Logic.addEnterHandler(almostElement, async () => {
         await Logic.setOnboardingStage(3);
         Logic.showPanel(P_ONBOARDING_4);
       });
@@ -411,7 +465,7 @@ Logic.registerPanel(P_ONBOARDING_4, {
   // This method is called when the object is registered.
   initialize() {
     // Let's move to the containers list panel.
-    Logic.addEnterHandler(document.querySelector("#onboarding-done-button"), async function () {
+    Logic.addEnterHandler(document.querySelector("#onboarding-done-button"), async () => {
       await Logic.setOnboardingStage(4);
       Logic.showPanel(P_ONBOARDING_5);
     });
@@ -432,7 +486,7 @@ Logic.registerPanel(P_ONBOARDING_5, {
   // This method is called when the object is registered.
   initialize() {
     // Let's move to the containers list panel.
-    Logic.addEnterHandler(document.querySelector("#onboarding-longpress-button"), async function () {
+    Logic.addEnterHandler(document.querySelector("#onboarding-longpress-button"), async () => {
       await Logic.setOnboardingStage(5);
       Logic.showPanel(P_CONTAINERS_LIST);
     });
@@ -451,16 +505,18 @@ 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.addEnterHandler(document.querySelector("#edit-containers-link"), (e) => {
-      Logic.showPanel(P_CONTAINERS_EDIT);
+      if (!e.target.classList.contains("disable-edit-containers")){
+        Logic.showPanel(P_CONTAINERS_EDIT);
+      }
     });
 
-    Logic.addEnterHandler(document.querySelector("#sort-containers-link"), async function () {
+    Logic.addEnterHandler(document.querySelector("#sort-containers-link"), async () => {
       try {
         await browser.runtime.sendMessage({
           method: "sortTabs"
@@ -494,6 +550,15 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
       case 38:
         previous();
         break;
+      default:
+        if ((e.keyCode >= 49 && e.keyCode <= 57) &&
+            Logic._currentPanel === "containersList") {
+          const element = selectables[e.keyCode - 48];
+          if (element) {
+            element.click();
+          }
+        }
+        break;
       }
     });
 
@@ -594,17 +659,13 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
         tr.appendChild(manage);
       }
 
-      Logic.addEnterHandler(tr, async function (e) {
+      Logic.addEnterHandler(tr, async (e) => {
         if (e.target.matches(".open-newtab")
             || e.target.parentNode.matches(".open-newtab")
             || e.type === "keydown") {
           try {
-            await browser.runtime.sendMessage({
+            browser.tabs.create({
-              method: "openTab",
+              cookieStoreId: identity.cookieStoreId
-              message: {
-                userContextId: Logic.userContextId(identity.cookieStoreId),
-                source: "pop-up"
-              }
             });
             window.close();
           } catch (e) {
@@ -632,6 +693,13 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
     document.addEventListener("mousedown", () => {
       document.removeEventListener("focus", focusHandler);
     });
+    /*  If no container is present disable the Edit Containers button */
+    const editContainer = document.querySelector("#edit-containers-link");
+    if (Logic.identities().length === 0) {
+      editContainer.classList.add("disable-edit-containers");
+    } else {
+      editContainer.classList.remove("disable-edit-containers");
+    }
 
     return Promise.resolve();
   },
@@ -649,11 +717,12 @@ Logic.registerPanel(P_CONTAINER_INFO, {
       Logic.showPreviousPanel();
     });
 
-    Logic.addEnterHandler(document.querySelector("#container-info-hideorshow"), async function () {
+    Logic.addEnterHandler(document.querySelector("#container-info-hideorshow"), async () => {
       const identity = Logic.currentIdentity();
       try {
         browser.runtime.sendMessage({
           method: identity.hasHiddenTabs ? "showTabs" : "hideTabs",
+          windowId: browser.windows.WINDOW_ID_CURRENT,
           cookieStoreId: Logic.currentCookieStoreId()
         });
         window.close();
@@ -663,36 +732,31 @@ Logic.registerPanel(P_CONTAINER_INFO, {
     });
 
     // Check if the user has incompatible add-ons installed
+    let incompatible = false;
     try {
-      const incompatible = await browser.runtime.sendMessage({
+      incompatible = await browser.runtime.sendMessage({
         method: "checkIncompatibleAddons"
       });
-      const moveTabsEl = document.querySelector("#container-info-movetabs");
-      if (incompatible) {
-        const fragment = document.createDocumentFragment();
-        const incompatEl = document.createElement("div");
-
-        moveTabsEl.classList.remove("clickable");
-        moveTabsEl.setAttribute("title", "Moving container tabs is incompatible with Pulse, PageShot, and SnoozeTabs.");
-
-        fragment.appendChild(incompatEl);
-        incompatEl.setAttribute("id", "container-info-movetabs-incompat");
-        incompatEl.textContent = "Incompatible with other Experiments.";
-        incompatEl.classList.add("container-info-tab-row");
-
-        moveTabsEl.parentNode.insertBefore(fragment, moveTabsEl.nextSibling);
-      } else {
-        Logic.addEnterHandler(moveTabsEl, async function () {
-          await browser.runtime.sendMessage({
-            method: "moveTabsToWindow",
-            cookieStoreId: Logic.currentIdentity().cookieStoreId,
-          });
-          window.close();
-        });
-      }
     } catch (e) {
       throw new Error("Could not check for incompatible add-ons.");
     }
+    const moveTabsEl = document.querySelector("#container-info-movetabs");
+    const numTabs = await Logic.numTabs();
+    if (incompatible) {
+      Logic._disableMoveTabs("Moving container tabs is incompatible with Pulse, PageShot, and SnoozeTabs.");
+      return;
+    } else if (numTabs === 1) {
+      Logic._disableMoveTabs("Cannot move a tab from a single-tab window.");
+      return; 
+    }
+    Logic.addEnterHandler(moveTabsEl, async () => {
+      await browser.runtime.sendMessage({
+        method: "moveTabsToWindow",
+        windowId: browser.windows.WINDOW_ID_CURRENT,
+        cookieStoreId: Logic.currentIdentity().cookieStoreId,
+      });
+      window.close();
+    });
   },
 
   // This method is called when the panel is shown.
@@ -726,6 +790,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
     // Let's retrieve the list of tabs.
     const tabs = await browser.runtime.sendMessage({
       method: "getTabs",
+      windowId: browser.windows.WINDOW_ID_CURRENT,
       cookieStoreId: Logic.currentIdentity().cookieStoreId
     });
     return this.buildInfoTable(tabs);
@@ -740,20 +805,44 @@ Logic.registerPanel(P_CONTAINER_INFO, {
       tr.classList.add("container-info-tab-row");
       tr.innerHTML = escaped`
         <td></td>
-        <td class="container-info-tab-title truncate-text" title="${tab.url}" >${tab.title}</td>`;
+        <td class="container-info-tab-title truncate-text" title="${tab.url}" ><div class="container-tab-title">${tab.title}</div></td>`;
       tr.querySelector("td").appendChild(Utils.createFavIconElement(tab.favIconUrl));
-
+      document.getElementById("container-info-table").appendChild(fragment);
+      
       // On click, we activate this tab. But only if this tab is active.
       if (!tab.hiddenState) {
+        const closeImage = document.createElement("img");
+        closeImage.src = "/img/container-close-tab.svg";
+        closeImage.className = "container-close-tab";
+        closeImage.title = "Close tab";
+        closeImage.id = tab.id;
+        const tabTitle = tr.querySelector(".container-info-tab-title");
+        tabTitle.appendChild(closeImage);
+
+        // On hover, we add truncate-text class to add close-tab-image after tab title truncates
+        const tabTitleHoverEvent = () => {
+          tabTitle.classList.toggle("truncate-text");
+          tr.querySelector(".container-tab-title").classList.toggle("truncate-text");
+        };
+
+        tr.addEventListener("mouseover", tabTitleHoverEvent);
+        tr.addEventListener("mouseout", tabTitleHoverEvent);
+
         tr.classList.add("clickable");
-        Logic.addEnterHandler(tr, async function () {
+        Logic.addEnterHandler(tr, async () => {
           await browser.tabs.update(tab.id, {active: true});
           window.close();
         });
-      }
-    }
 
-    document.getElementById("container-info-table").appendChild(fragment);
+        const closeTab = document.getElementById(tab.id);
+        if (closeTab) {
+          Logic.addEnterHandler(closeTab, async (e) => {
+            await browser.tabs.remove(Number(e.target.id));
+            window.close();
+          });
+        }
+      }
+    } 
   },
 });
 
@@ -800,7 +889,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 => {
@@ -896,9 +985,9 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
         const trElement = document.createElement("div");
         /* As we don't have the full or correct path the best we can assume is the path is HTTPS and then replace with a broken icon later if it doesn't load.
            This is pending a better solution for favicons from web extensions */
-        const assumedUrl = `https://${site.hostname}`;
+        const assumedUrl = `https://${site.hostname}/favicon.ico`;
         trElement.innerHTML = escaped`
-        <img class="icon" src="${assumedUrl}/favicon.ico">
+        <div class="favicon"></div>
         <div title="${site.hostname}" class="truncate-text hostname">
           ${site.hostname}
         </div>
@@ -906,9 +995,10 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
           class="pop-button-image delete-assignment"
           src="/img/container-delete.svg"
         />`;
+        trElement.getElementsByClassName("favicon")[0].appendChild(Utils.createFavIconElement(assumedUrl));
         const deleteButton = trElement.querySelector(".delete-assignment");
         const that = this;
-        Logic.addEnterHandler(deleteButton, async function () {
+        Logic.addEnterHandler(deleteButton, async () => {
           const userContextId = Logic.currentUserContextId();
           // Lets show the message to the current tab
           // TODO remove then when firefox supports arrow fn async
@@ -964,6 +1054,11 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
 
     document.querySelector("#edit-container-panel-name-input").value = identity.name || "";
     document.querySelector("#edit-container-panel-usercontext-input").value = userContextId || NEW_CONTAINER_ID;
+    const containerName = document.querySelector("#edit-container-panel-name-input");
+    window.requestAnimationFrame(() => {
+      containerName.select();
+      containerName.focus();
+    });
     [...document.querySelectorAll("[name='container-color']")].forEach(colorInput => {
       colorInput.checked = colorInput.value === identity.color;
     });
@@ -988,7 +1083,7 @@ Logic.registerPanel(P_CONTAINER_DELETE, {
       Logic.showPreviousPanel();
     });
 
-    Logic.addEnterHandler(document.querySelector("#delete-container-ok-link"), async function () {
+    Logic.addEnterHandler(document.querySelector("#delete-container-ok-link"), async () => {
       /* 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.
@@ -1008,9 +1103,17 @@ Logic.registerPanel(P_CONTAINER_DELETE, {
   prepare() {
     const identity = Logic.currentIdentity();
 
-    // Populating the panel: name and icon
+    // Populating the panel: name, icon, and warning message
     document.getElementById("delete-container-name").textContent = identity.name;
 
+    const totalNumberOfTabs = identity.numberOfHiddenTabs + identity.numberOfOpenTabs;
+    let warningMessage = "";
+    if (totalNumberOfTabs > 0) {
+      const grammaticalNumTabs = totalNumberOfTabs > 1 ? "tabs" : "tab";
+      warningMessage = `If you remove this container now, ${totalNumberOfTabs} container ${grammaticalNumTabs} will be closed.`;
+    }
+    document.getElementById("delete-container-tab-warning").textContent = warningMessage;
+
     const icon = document.getElementById("delete-container-icon");
     icon.setAttribute("data-identity-icon", identity.icon);
     icon.setAttribute("data-identity-color", identity.color);
@@ -1019,4 +1122,36 @@ 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 () => {
+      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();
+
+window.addEventListener("resize", function () {
+  //for overflow menu
+  const difference = window.innerWidth - document.body.offsetWidth;
+  if (difference > 2) {
+    //if popup is in the overflow menu, window will be larger than 300px
+    const root = document.documentElement;
+    root.style.setProperty("--overflow-size", difference + "px");
+    root.style.setProperty("--icon-fit", "12");
+  }
+});

src/js/utils.js

@@ -1,4 +1,4 @@
-const DEFAULT_FAVICON = "moz-icon://goat?size=16";
+const DEFAULT_FAVICON = "/img/blank-favicon.svg";
 
 // TODO use export here instead of globals
 window.Utils = {

src/manifest.json

@@ -1,9 +1,9 @@
 {
   "manifest_version": 2,
-  "name": "Containers Experiment",
+  "name": "Firefox Multi-Account Containers",
-  "version": "3.1.0",
+  "version": "6.1.1",
 
-  "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,12 +11,12 @@
 
   "applications": {
     "gecko": {
-      "strict_min_version": "51.0",
+      "id": "@testpilot-containers",
-      "update_url": "https://testpilot.firefox.com/files/@testpilot-containers/updates.json"
+      "strict_min_version": "57.0"
     }
   },
 
-  "homepage_url": "https://testpilot.firefox.com/",
+  "homepage_url": "https://github.com/mozilla/multi-account-containers#readme",
 
   "permissions": [
     "<all_urls>",
@@ -26,6 +26,7 @@
     "contextualIdentities",
     "history",
     "idle",
+    "management",
     "storage",
     "tabs",
     "webRequestBlocking",
@@ -45,8 +46,13 @@
   "browser_action": {
     "browser_style": true,
     "default_icon": "img/container-site.svg",
-    "default_title": "Containers",
+    "default_title": "Multi-Account Containers",
-    "default_popup": "popup.html"
+    "default_popup": "popup.html",
+    "theme_icons": [{
+        "light": "img/container-site-light.svg",
+        "dark": "img/container-site.svg",
+        "size": 32
+    }]
   },
 
   "background": {

src/popup.html

@@ -1,8 +1,8 @@
 <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">
+  <link rel="stylesheet" href="css/popup.css">
 
 </head>
 <body>
@@ -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>
@@ -176,7 +204,7 @@
     </div>
     <div class="panel-content delete-container-confirm">
       <h4 class="delete-container-confirm-title">Remove This Container</h4>
-      <p>If you remove this container now, <span id="delete-container-tab-count"></span> container tabs will be closed. Are you sure you want to remove this Container?</p>
+      <p><span id="delete-container-tab-warning"></span> Are you sure you want to remove this Container?</p>
     </div>
     <div class="panel-footer">
       <a href="#" class="button expanded secondary footer-button cancel-button" id="delete-container-cancel-link">Cancel</a>

test/.eslintrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+    env: {
+      "node": true,
+      "mocha": true
+    },
+    globals: {
+      "sinon": false,
+      "expect": false,
+      "nextTick": false,
+      "buildBackgroundDom": false,
+      "background": false,
+      "buildPopupDom": false,
+      "popup": false,
+      "helper": false
+    }
+}

test/browser.mock.js

@@ -0,0 +1,137 @@
+module.exports = () => {
+  const _storage = {};
+
+  // could maybe be replaced by https://github.com/acvetkov/sinon-chrome
+  const browserMock = {
+    _storage,
+    runtime: {
+      onMessage: {
+        addListener: sinon.stub(),
+      },
+      onMessageExternal: {
+        addListener: sinon.stub(),
+      },
+      sendMessage: sinon.stub().resolves(),
+    },
+    webRequest: {
+      onBeforeRequest: {
+        addListener: sinon.stub()
+      },
+      onCompleted: {
+        addListener: sinon.stub()
+      },
+      onErrorOccurred: {
+        addListener: sinon.stub()
+      }
+    },
+    windows: {
+      getCurrent: sinon.stub().resolves({}),
+      onFocusChanged: {
+        addListener: sinon.stub(),
+      }
+    },
+    tabs: {
+      onActivated: {
+        addListener: sinon.stub()
+      },
+      onCreated: {
+        addListener: sinon.stub()
+      },
+      onUpdated: {
+        addListener: sinon.stub()
+      },
+      sendMessage: sinon.stub(),
+      query: sinon.stub().resolves([{}]),
+      get: sinon.stub(),
+      create: sinon.stub().resolves({}),
+      remove: sinon.stub().resolves()
+    },
+    history: {
+      deleteUrl: sinon.stub()
+    },
+    storage: {
+      local: {
+        get: sinon.stub(),
+        set: sinon.stub()
+      }
+    },
+    contextualIdentities: {
+      create: sinon.stub(),
+      get: sinon.stub(),
+      query: sinon.stub().resolves([])
+    },
+    contextMenus: {
+      create: sinon.stub(),
+      remove: sinon.stub(),
+      onClicked: {
+        addListener: sinon.stub()
+      }
+    },
+    browserAction: {
+      setBadgeBackgroundColor: sinon.stub(),
+      setBadgeText: sinon.stub()
+    },
+    management: {
+      get: sinon.stub(),
+      onInstalled: {
+        addListener: sinon.stub()
+      },
+      onUninstalled: {
+        addListener: sinon.stub()
+      }
+    },
+    extension: {
+      getURL: sinon.stub().returns("moz-extension://multi-account-containers/confirm-page.html")
+    }
+  };
+
+  // inmemory local storage
+  browserMock.storage.local = {
+    get: sinon.spy(async key => {
+      if (!key) {
+        return _storage;
+      }
+      let result = {};
+      if (Array.isArray(key)) {
+        key.map(akey => {
+          if (typeof _storage[akey] !== "undefined") {
+            result[akey] = _storage[akey];
+          }
+        });
+      } else if (typeof key === "object") {
+        // TODO support nested objects
+        Object.keys(key).map(oKey => {
+          if (typeof _storage[oKey] !== "undefined") {
+            result[oKey] = _storage[oKey];
+          } else {
+            result[oKey] = key[oKey];
+          }
+        });
+      } else {
+        result = _storage[key];
+      }
+      return result;
+    }),
+    set: sinon.spy(async (key, value) => {
+      if (typeof key === "object") {
+        // TODO support nested objects
+        Object.keys(key).map(oKey => {
+          _storage[oKey] = key[oKey];
+        });
+      } else {
+        _storage[key] = value;
+      }
+    }),
+    remove: sinon.spy(async (key) => {
+      if (Array.isArray(key)) {
+        key.map(aKey => {
+          delete _storage[aKey];
+        });
+      } else {
+        delete _storage[key];
+      }
+    }),
+  };
+
+  return browserMock;
+};

test/features/assignment.test.js

@@ -0,0 +1,75 @@
+describe("Assignment Feature", () => {
+  const activeTab = {
+    id: 1,
+    cookieStoreId: "firefox-container-1",
+    url: "http://example.com",
+    index: 0
+  };
+  beforeEach(async () => {
+    await helper.browser.initializeWithTab(activeTab);
+  });
+
+  describe("click the 'Always open in' checkbox in the popup", () => {
+    beforeEach(async () => {
+      // popup click to set assignment for activeTab.url
+      await helper.popup.clickElementById("container-page-assigned");
+    });
+
+    describe("open new Tab with the assigned URL in the default container", () => {
+      const newTab = {
+        id: 2,
+        cookieStoreId: "firefox-default",
+        url: activeTab.url,
+        index: 1,
+        active: true
+      };
+      beforeEach(async () => {
+        // new Tab opening activeTab.url in default container
+        await helper.browser.openNewTab(newTab);
+      });
+
+      it("should open the confirm page", async () => {
+        // should have created a new tab with the confirm page
+        background.browser.tabs.create.should.have.been.calledWith({
+          url: "moz-extension://multi-account-containers/confirm-page.html?" +
+               `url=${encodeURIComponent(activeTab.url)}` +
+               `&cookieStoreId=${activeTab.cookieStoreId}`,
+          cookieStoreId: undefined,
+          openerTabId: null,
+          index: 2,
+          active: true
+        });
+      });
+
+      it("should remove the new Tab that got opened in the default container", () => {
+        background.browser.tabs.remove.should.have.been.calledWith(newTab.id);
+      });
+    });
+
+    describe("click the 'Always open in' checkbox in the popup again", () => {
+      beforeEach(async () => {
+        // popup click to remove assignment for activeTab.url
+        await helper.popup.clickElementById("container-page-assigned");
+      });
+
+      describe("open new Tab with the no longer assigned URL in the default container", () => {
+        const newTab = {
+          id: 3,
+          cookieStoreId: "firefox-default",
+          url: activeTab.url,
+          index: 3,
+          active: true
+        };
+        beforeEach(async () => {
+          // new Tab opening activeTab.url in default container
+          await helper.browser.openNewTab(newTab);
+        });
+
+        it("should not open the confirm page", async () => {
+          // should not have created a new tab
+          background.browser.tabs.create.should.not.have.been.called;
+        });
+      });
+    });
+  });
+});

test/features/external-webextensions.test.js

@@ -0,0 +1,67 @@
+describe("External Webextensions", () => {
+  const activeTab = {
+    id: 1,
+    cookieStoreId: "firefox-container-1",
+    url: "http://example.com",
+    index: 0
+  };
+  beforeEach(async () => {
+    await helper.browser.initializeWithTab(activeTab);
+    await helper.popup.clickElementById("container-page-assigned");
+  });
+
+  describe("with contextualIdentities permissions", () => {
+    it("should be able to get assignments", async () => {
+      background.browser.management.get.resolves({
+        permissions: ["contextualIdentities"]
+      });
+
+      const message = {
+        method: "getAssignment",
+        url: "http://example.com"
+      };
+      const sender = {
+        id: "external-webextension"
+      };
+
+      // currently not possible to get the return value of yielding with sinon
+      // so we expect that if no error is thrown and the storage was called, everything is ok
+      // maybe i get around to provide a PR https://github.com/sinonjs/sinon/issues/903
+      //
+      // the alternative would be to expose the actual messageHandler and call it directly
+      // but personally i think that goes against the black-box-ish nature of these feature tests
+      const rejectionStub = sinon.stub();
+      process.on("unhandledRejection", rejectionStub);
+      background.browser.runtime.onMessageExternal.addListener.yield(message, sender);
+      await nextTick();
+      process.removeListener("unhandledRejection", rejectionStub);
+      rejectionStub.should.not.have.been.called;
+      background.browser.storage.local.get.should.have.been.called;
+    });
+  });
+
+  describe("without contextualIdentities permissions", () => {
+    it("should throw an error", async () => {
+      background.browser.management.get.resolves({
+        permissions: []
+      });
+
+      const message = {
+        method: "getAssignment",
+        url: "http://example.com"
+      };
+      const sender = {
+        id: "external-webextension"
+      };
+
+      const rejectionStub = sinon.spy();
+      process.on("unhandledRejection", rejectionStub);
+      background.browser.runtime.onMessageExternal.addListener.yield(message, sender);
+      await nextTick();
+      process.removeListener("unhandledRejection", rejectionStub);
+      rejectionStub.should.have.been.calledWith(sinon.match({
+        message: "Missing contextualIdentities permission"
+      }));
+    });
+  });
+});

test/helper.js

@@ -0,0 +1,47 @@
+module.exports = {
+  browser: {
+    async initializeWithTab(tab) {
+      await buildBackgroundDom({
+        beforeParse(window) {
+          window.browser.tabs.get.resolves(tab);
+          window.browser.tabs.query.resolves([tab]);
+          window.browser.contextualIdentities.get.resolves({
+            cookieStoreId: tab.cookieStoreId
+          });
+        }
+      });
+      await buildPopupDom({
+        beforeParse(window) {
+          window.browser.tabs.get.resolves(tab);
+          window.browser.tabs.query.resolves([tab]);
+        }
+      });
+    },
+
+    async openNewTab(tab, options = {}) {
+      if (options.resetHistory) {
+        background.browser.tabs.create.resetHistory();
+        background.browser.tabs.remove.resetHistory();
+      }
+      background.browser.tabs.get.resolves(tab);
+      background.browser.tabs.onCreated.addListener.yield(tab);
+      const [promise] = background.browser.webRequest.onBeforeRequest.addListener.yield({
+        frameId: 0,
+        tabId: tab.id,
+        url: tab.url,
+        requestId: options.requestId
+      });
+
+      return promise;
+    }
+  },
+
+  popup: {
+    async clickElementById(id) {
+      const clickEvent = popup.document.createEvent("HTMLEvents");
+      clickEvent.initEvent("click");
+      popup.document.getElementById(id).dispatchEvent(clickEvent);
+      await nextTick();
+    }
+  },
+};

test/issues/940.test.js

@@ -0,0 +1,180 @@
+describe("#940", () => {
+  describe("when other onBeforeRequestHandlers are faster and redirect with the same requestId", () => {
+    it("should not open two confirm pages", async () => {
+      // init
+      const activeTab = {
+        id: 1,
+        cookieStoreId: "firefox-container-1",
+        url: "http://example.com",
+        index: 0
+      };
+      await helper.browser.initializeWithTab(activeTab);
+      // assign the activeTab.url
+      await helper.popup.clickElementById("container-page-assigned");
+
+      // start request and don't await the requests at all
+      // so the second request below is actually comparable to an actual redirect that also fires immediately
+      const newTab = {
+        id: 2,
+        cookieStoreId: "firefox-default",
+        url: activeTab.url,
+        index: 1,
+        active: true
+      };
+      helper.browser.openNewTab(newTab, {
+        requestId: 1
+      });
+
+      // other addon sees the same request
+      // and redirects to the https version of activeTab.url
+      // since it's a redirect the request has the same requestId
+      background.browser.webRequest.onBeforeRequest.addListener.yield({
+        frameId: 0,
+        tabId: newTab.id,
+        url: "https://example.com",
+        requestId: 1
+      });
+      await nextTick();
+
+      background.browser.tabs.create.should.have.been.calledOnce;
+    });
+  });
+
+  describe("when redirects change requestId midflight", () => {
+    let promiseResults;
+    beforeEach(async () => {
+      // init
+      const activeTab = {
+        id: 1,
+        cookieStoreId: "firefox-container-1",
+        url: "https://www.youtube.com",
+        index: 0
+      };
+      await helper.browser.initializeWithTab(activeTab);
+      // assign the activeTab.url
+      await helper.popup.clickElementById("container-page-assigned");
+
+      // http://youtube.com
+      const newTab = {
+        id: 2,
+        cookieStoreId: "firefox-default",
+        url: "http://youtube.com",
+        index: 1,
+        active: true
+      };
+      const promise1 = helper.browser.openNewTab(newTab, {
+        requestId: 1
+      });
+
+      // https://youtube.com
+      const [promise2] = background.browser.webRequest.onBeforeRequest.addListener.yield({
+        frameId: 0,
+        tabId: newTab.id,
+        url: "https://youtube.com",
+        requestId: 1
+      });
+
+      // https://www.youtube.com
+      const [promise3] = background.browser.webRequest.onBeforeRequest.addListener.yield({
+        frameId: 0,
+        tabId: newTab.id,
+        url: "https://www.youtube.com",
+        requestId: 1
+      });
+
+      // https://www.youtube.com
+      const [promise4] = background.browser.webRequest.onBeforeRequest.addListener.yield({
+        frameId: 0,
+        tabId: newTab.id,
+        url: "https://www.youtube.com",
+        requestId: 2
+      });
+
+      promiseResults = await Promise.all([promise1, promise2, promise3, promise4]);
+    });
+
+    it("should not open two confirm pages", async () => {
+      // http://youtube.com is not assigned, no cancel, no reopening
+      expect(promiseResults[0]).to.deep.equal({});
+
+      // https://youtube.com is not assigned, no cancel, no reopening
+      expect(promiseResults[1]).to.deep.equal({});
+
+      // https://www.youtube.com is assigned, this triggers reopening, cancel
+      expect(promiseResults[2]).to.deep.equal({
+        cancel: true
+      });
+
+      // https://www.youtube.com is assigned, this was a redirect, cancel early, no reopening
+      expect(promiseResults[3]).to.deep.equal({
+        cancel: true
+      });
+
+      background.browser.tabs.create.should.have.been.calledOnce;
+    });
+
+    it("should uncancel after webRequest.onCompleted", async () => {
+      const [promise1] = background.browser.webRequest.onCompleted.addListener.yield({
+        tabId: 2
+      });
+      await promise1;
+
+      const [promise2] = background.browser.webRequest.onBeforeRequest.addListener.yield({
+        frameId: 0,
+        tabId: 2,
+        url: "https://www.youtube.com",
+        requestId: 123
+      });
+      await promise2;
+
+      background.browser.tabs.create.should.have.been.calledTwice;
+    });
+
+    it("should uncancel after webRequest.onErrorOccurred", async () => {
+      const [promise1] = background.browser.webRequest.onErrorOccurred.addListener.yield({
+        tabId: 2
+      });
+      await promise1;
+
+      // request to assigned url in same tab
+      const [promise2] = background.browser.webRequest.onBeforeRequest.addListener.yield({
+        frameId: 0,
+        tabId: 2,
+        url: "https://www.youtube.com",
+        requestId: 123
+      });
+      await promise2;
+
+      background.browser.tabs.create.should.have.been.calledTwice;
+    });
+
+    it("should uncancel after 2 seconds", async () => {
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      // request to assigned url in same tab
+      const [promise2] = background.browser.webRequest.onBeforeRequest.addListener.yield({
+        frameId: 0,
+        tabId: 2,
+        url: "https://www.youtube.com",
+        requestId: 123
+      });
+      await promise2;
+
+      background.browser.tabs.create.should.have.been.calledTwice;
+    }).timeout(2002);
+
+    it("should not influence the canceled url in other tabs", async () => {
+      const newTab = {
+        id: 123,
+        cookieStoreId: "firefox-default",
+        url: "https://www.youtube.com",
+        index: 10,
+        active: true
+      };
+      await helper.browser.openNewTab(newTab, {
+        requestId: 321
+      });
+
+      background.browser.tabs.create.should.have.been.calledTwice;
+    });
+  });
+});

test/setup.js

@@ -0,0 +1,101 @@
+if (!process.listenerCount("unhandledRejection")) {
+  // eslint-disable-next-line no-console
+  process.on("unhandledRejection", r => console.log(r));
+}
+const jsdom = require("jsdom");
+const path = require("path");
+const chai = require("chai");
+const sinonChai = require("sinon-chai");
+global.sinon = require("sinon");
+global.expect = chai.expect;
+chai.should();
+chai.use(sinonChai);
+global.nextTick = () => {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      process.nextTick(resolve);
+    });
+  });
+};
+
+global.helper = require("./helper");
+const browserMock = require("./browser.mock");
+const srcBasePath = path.resolve(path.join(__dirname, "..", "src"));
+const srcJsBackgroundPath = path.join(srcBasePath, "js", "background");
+global.buildBackgroundDom = async (options = {}) => {
+  const dom = await jsdom.JSDOM.fromFile(path.join(srcJsBackgroundPath, "index.html"), {
+    runScripts: "dangerously",
+    resources: "usable",
+    virtualConsole: (new jsdom.VirtualConsole).sendTo(console),
+    beforeParse(window) {
+      window.browser = browserMock();
+      window.fetch = sinon.stub().resolves({
+        json: sinon.stub().resolves({})
+      });
+
+      if (options.beforeParse) {
+        options.beforeParse(window);
+      }
+    }
+  });
+  await new Promise(resolve => {
+    dom.window.document.addEventListener("DOMContentLoaded", resolve);
+  });
+  await nextTick();
+
+  global.background = {
+    dom,
+    browser: dom.window.browser
+  };
+};
+
+global.buildPopupDom = async (options = {}) => {
+  const dom = await jsdom.JSDOM.fromFile(path.join(srcBasePath, "popup.html"), {
+    runScripts: "dangerously",
+    resources: "usable",
+    virtualConsole: (new jsdom.VirtualConsole).sendTo(console),
+    beforeParse(window) {
+      window.browser = browserMock();
+      window.browser.storage.local.set("browserActionBadgesClicked", []);
+      window.browser.storage.local.set("onboarding-stage", 5);
+      window.browser.storage.local.set("achievements", []);
+      window.browser.storage.local.set.resetHistory();
+      window.fetch = sinon.stub().resolves({
+        json: sinon.stub().resolves({})
+      });
+
+      if (options.beforeParse) {
+        options.beforeParse(window);
+      }
+    }
+  });
+  await new Promise(resolve => {
+    dom.window.document.addEventListener("DOMContentLoaded", resolve);
+  });
+  await nextTick();
+  dom.window.browser.runtime.sendMessage.resetHistory();
+
+  if (global.background) {
+    dom.window.browser.runtime.sendMessage = sinon.spy(function() {
+      global.background.browser.runtime.onMessage.addListener.yield(...arguments);
+    });
+  }
+
+  global.popup = {
+    dom,
+    document: dom.window.document,
+    browser: dom.window.browser
+  };
+};
+
+global.afterEach(() => {
+  if (global.background) {
+    global.background.dom.window.close();
+    delete global.background;
+  }
+
+  if (global.popup) {
+    global.popup.dom.window.close();
+    delete global.popup;
+  }
+});

test/test-index.js

@@ -1,19 +0,0 @@
-const main = require("../");
-
-exports["test main"] = function(assert) {
-  assert.pass("Unit test running!");
-};
-
-exports["test main async"] = function(assert, done) {
-  assert.pass("async Unit test running!");
-  done();
-};
-
-exports["test dummy"] = function(assert, done) {
-  main.dummy("foo", function(text) {
-    assert.ok((text === "foo"), "Is the text actually 'foo'");
-    done();
-  });
-};
-
-require("sdk/test").run(exports);

webextension/js/background/identityState.js

@@ -1,142 +0,0 @@
-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];
-      }
-      return null;
-    },
-
-    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]);
-    }
-  },
-
-  async _isKnownContainer(userContextId) {
-    const cookieStoreId = backgroundLogic.cookieStoreId(userContextId);
-    const state = await this.storageArea.get(cookieStoreId);
-    return !!state;
-  },
-
-  _createTabObject(tab) {
-    return Object.assign({}, tab);
-  },
-
-  async storeHidden(cookieStoreId) {
-    const containerState = await this.storageArea.get(cookieStoreId);
-    const tabsByContainer = await this._matchTabsByContainer(cookieStoreId);
-    tabsByContainer.forEach((tab) => {
-      const tabObject = this._createTabObject(tab);
-      // 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);
-  },
-
-  async containersCounts() {
-    let containersCounts = { // eslint-disable-line prefer-const
-      "shown": 0,
-      "hidden": 0,
-      "total": 0
-    };
-    const containers = await browser.contextualIdentities.query({});
-    for (const id in containers) {
-      const container = containers[id];
-      await this.remapTabsIfMissing(container.cookieStoreId);
-      const containerState = await this.storageArea.get(container.cookieStoreId);
-      if (containerState.openTabs > 0) {
-        ++containersCounts.shown;
-        ++containersCounts.total;
-        continue;
-      } else if (containerState.hiddenTabs.length > 0) {
-        ++containersCounts.hidden;
-        ++containersCounts.total;
-        continue;
-      }
-    }
-    return containersCounts;
-  },
-
-  async containerTabCount(cookieStoreId) {
-    // Returns the total of open and hidden tabs with this userContextId
-    let containerTabsCount = 0;
-    await identityState.remapTabsIfMissing(cookieStoreId);
-    const containerState = await this.storageArea.get(cookieStoreId);
-    containerTabsCount += containerState.openTabs;
-    containerTabsCount += containerState.hiddenTabs.length;
-    return containerTabsCount;
-  },
-
-  async totalContainerTabsCount() {
-    // Returns the number of total open tabs across ALL containers
-    let totalContainerTabsCount = 0;
-    const containers = await browser.contextualIdentities.query({});
-    for (const id in containers) {
-      const container = containers[id];
-      const cookieStoreId = container.cookieStoreId;
-      await identityState.remapTabsIfMissing(cookieStoreId);
-      totalContainerTabsCount += await this.storageArea.get(cookieStoreId).openTabs;
-    }
-    return totalContainerTabsCount;
-  },
-
-  async totalNonContainerTabsCount() {
-    // Returns the number of open tabs NOT IN a container
-    let totalNonContainerTabsCount = 0;
-    const tabs = await browser.tabs.query({});
-    for (const tab of tabs) {
-      const userContextId = backgroundLogic.getUserContextIdFromCookieStoreId(tab.cookieStoreId);
-      if (userContextId === 0) {
-        ++totalNonContainerTabsCount;
-      }
-    }
-    return totalNonContainerTabsCount;
-  },
-
-  async remapTabsIfMissing(cookieStoreId) {
-    // We already know this cookieStoreId.
-    const containerState = await this.storageArea.get(cookieStoreId) || this._createIdentityState();
-
-    await this.storageArea.set(cookieStoreId, containerState);
-    await this.remapTabsFromUserContextId(cookieStoreId);
-  },
-
-  _matchTabsByContainer(cookieStoreId) {
-    return browser.tabs.query({cookieStoreId});
-  },
-
-  async remapTabsFromUserContextId(cookieStoreId) {
-    const tabsByContainer = await this._matchTabsByContainer(cookieStoreId);
-    const containerState = await this.storageArea.get(cookieStoreId);
-    containerState.openTabs = tabsByContainer.length;
-    await this.storageArea.set(cookieStoreId, containerState);
-  },
-
-  _createIdentityState() {
-    return {
-      hiddenTabs: [],
-      openTabs: 0
-    };
-  },
-};

webextension/js/background/init.js

@@ -1,27 +0,0 @@
-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" });
-}

webextension/js/background/messageHandler.js

@@ -1,168 +0,0 @@
-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 "sortTabs":
-        backgroundLogic.sortTabs();
-        break;
-      case "showTabs":
-        backgroundLogic.showTabs({cookieStoreId: m.cookieStoreId});
-        break;
-      case "hideTabs":
-        backgroundLogic.hideTabs({cookieStoreId: m.cookieStoreId});
-        break;
-      case "checkIncompatibleAddons":
-        // TODO
-        break;
-      case "moveTabsToWindow":
-        response = backgroundLogic.moveTabsToWindow({
-          cookieStoreId: m.cookieStoreId
-        });
-        break;
-      case "getTabs":
-        response = backgroundLogic.getTabs({
-          cookieStoreId: m.cookieStoreId
-        });
-        break;
-      case "queryIdentitiesState":
-        response = backgroundLogic.queryIdentitiesState();
-        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 "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
-      badge.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);
-    });
-
-  }
-};
-
-// Lets do this last as theme manager did a check before connecting before
-messageHandler.init();

webextension/js/background/tabPageCounter.js

@@ -1,55 +0,0 @@
-// eslint-disable-next-line no-unused-vars
-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) {
-      // 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) {
-      // 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.initTabCounter(tab);
-    this.counters[tab.id].tab.pageRequests++;
-    this.counters[tab.id].activity.pageRequests++;
-  }
-};