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

@@ -9,3 +9,6 @@ README.html
 addon.env
 
 src/web-ext-artifacts/*
+
+# JetBrains IDE files
+.idea

.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

@@ -19,7 +19,7 @@ For more info, see:
 ## Development
 
 1. `npm install`
-2. `./node_modules/.bin/web-ext run -s src/
+2. `./node_modules/.bin/web-ext run -s src/`
 
 ### Testing
 TBD
@@ -49,7 +49,7 @@ Finally, we also publish the release to GitHub for those followers.
 
 ### Links
 
-Facebook & Twitter icons CC-Attrib http://fairheadcreative.com.
+Facebook & Twitter icons CC-Attrib https://fairheadcreative.com.
 
 - [Licence](./LICENSE.txt)
 - [Contributing](./CONTRIBUTING.md)

package.json

@@ -2,42 +2,47 @@
   "name": "testpilot-containers",
   "title": "Multi-Account Containers",
   "description": "Containers helps you keep all the parts of your online life contained in different tabs. Custom labels and color-coded tabs help keep different activities — like online shopping, travel planning, or checking work email — separate.",
-  "version": "5.0.1",
+  "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",
-    "deploy-txp": "^1.0.7",
+    "ajv": "^6.6.2",
+    "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",
+    "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",
     "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 && cd src && web-ext build --overwrite-dest",
-    "deploy": "deploy-txp",
     "lint": "npm-run-all lint:*",
     "lint:addon": "addons-linter src --self-hosted",
     "lint:css": "stylelint src/css/*.css",
     "lint:html": "htmllint *.html",
     "lint:js": "eslint .",
     "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"
   }
 }

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;
-  max-inline-size: 300px;
+  inline-size: calc(var(--overflow-size) + 299px);
+  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;
@@ -266,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 {
@@ -537,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);
 }
@@ -575,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 {
@@ -653,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 {
@@ -670,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;
@@ -696,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;
@@ -761,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 {
@@ -800,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 {

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/js/background/assignManager.js

@@ -12,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) {
@@ -132,7 +136,7 @@ const assignManager = {
 
     // The container we have in the assignment map isn't present any more so lets remove it
     //   then continue the existing load
-    if (!container) {
+    if (siteSettings && !container) {
       this.deleteContainer(siteSettings.userContextId);
       return {};
     }
@@ -143,8 +147,57 @@ const assignManager = {
         || 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;
 
-    this.reloadPageInContainer(options.url, userContextId, siteSettings.userContextId, tab.index + 1, tab.active, siteSettings.neverAsk);
+    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:
@@ -158,9 +211,7 @@ const assignManager = {
             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)) {
+    if (removeTab) {
       browser.tabs.remove(tab.id);
     }
     return {
@@ -174,9 +225,23 @@ const assignManager = {
     });
 
     // 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) => {
       return this.onBeforeRequest(options);
     },{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) {
@@ -350,13 +415,13 @@ const assignManager = {
     });
   },
 
-  reloadPageInContainer(url, currentUserContextId, userContextId, index, active, neverAsk = false) {
+  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, active});
+      browser.tabs.create({url, cookieStoreId, index, active, openerTabId});
     } else {
       let confirmUrl = `${loadPage}?url=${this.encodeURLProperty(url)}&cookieStoreId=${cookieStoreId}`;
       let currentCookieStoreId;
@@ -367,6 +432,7 @@ const assignManager = {
       browser.tabs.create({
         url: confirmUrl,
         cookieStoreId: currentCookieStoreId,
+        openerTabId,
         index,
         active
       }).then(() => {

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");
@@ -112,6 +113,17 @@ const backgroundLogic = {
     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) {
     const requiredArguments = ["cookieStoreId", "windowId"];
     this.checkArgs(requiredArguments, options, "moveTabsToWindow");
@@ -123,6 +135,7 @@ const backgroundLogic = {
     });
 
     const containerState = await identityState.storageArea.get(cookieStoreId);
+
     // Nothing to do
     if (list.length === 0 &&
         containerState.hiddenTabs.length === 0) {
@@ -131,9 +144,13 @@ const backgroundLogic = {
     let newWindowObj;
     let hiddenDefaultTabToClose;
     if (list.length) {
-      newWindowObj = await browser.windows.create({
-        tabId: list.shift().id
-      });
+      newWindowObj = await browser.windows.create();
+
+      // 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
@@ -148,12 +165,15 @@ const backgroundLogic = {
     const showHiddenPromises = [];
 
     // Let's show the hidden tabs.
-    for (let object of containerState.hiddenTabs) { // eslint-disable-line prefer-const
-      showHiddenPromises.push(browser.tabs.create({
-        url: object.url || DEFAULT_TAB,
-        windowId: newWindowObj.id,
-        cookieStoreId
-      }));
+    if (!this.unhideQueue.includes(cookieStoreId)) {
+      this.unhideQueue.push(cookieStoreId);
+      for (let object of containerState.hiddenTabs) { // eslint-disable-line prefer-const
+        showHiddenPromises.push(browser.tabs.create({
+          url: object.url || DEFAULT_TAB,
+          windowId: newWindowObj.id,
+          cookieStoreId
+        }));
+      }
     }
 
     if (hiddenDefaultTabToClose) {
@@ -172,7 +192,9 @@ const backgroundLogic = {
         browser.tabs.remove(tab.id);
       }
     }
-    return await identityState.storageArea.set(cookieStoreId, containerState);
+    const rv = await identityState.storageArea.set(cookieStoreId, containerState);
+    this.unhideQueue.splice(this.unhideQueue.indexOf(cookieStoreId), 1);
+    return rv;
   },
 
   async _closeTabs(userContextId, windowId = false) {
@@ -196,7 +218,7 @@ const backgroundLogic = {
   async queryIdentitiesState(windowId) {
     const identities = await browser.contextualIdentities.query({});
     const identitiesOutput = {};
-    const identitiesPromise = identities.map(async function (identity) {
+    const identitiesPromise = identities.map(async (identity) => {
       const { cookieStoreId } = identity;
       const containerState = await identityState.storageArea.get(cookieStoreId);
       const openTabs = await browser.tabs.query({
@@ -205,7 +227,9 @@ const backgroundLogic = {
       });
       identitiesOutput[cookieStoreId] = {
         hasHiddenTabs: !!containerState.hiddenTabs.length,
-        hasOpenTabs: !!openTabs.length
+        hasOpenTabs: !!openTabs.length,
+        numberOfHiddenTabs: containerState.hiddenTabs.length,
+        numberOfOpenTabs: openTabs.length
       };
       return;
     });
@@ -303,4 +327,3 @@ const backgroundLogic = {
     return `firefox-container-${userContextId}`;
   }
 };
-

src/js/background/messageHandler.js

@@ -3,7 +3,6 @@ const messageHandler = {
   // We use this to catch redirected tabs that have just opened
   // If this were in platform we would change how the tab opens based on "new tab" link navigations such as ctrl+click
   LAST_CREATED_TAB_TIMER: 2000,
-  unhideQueue: [],
 
   init() {
     // Handles messages from webextension code
@@ -39,7 +38,7 @@ const messageHandler = {
         backgroundLogic.sortTabs();
         break;
       case "showTabs":
-        this.unhideContainer(m.cookieStoreId);
+        backgroundLogic.unhideContainer(m.cookieStoreId);
         break;
       case "hideTabs":
         backgroundLogic.hideTabs({
@@ -72,6 +71,42 @@ const messageHandler = {
       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);
@@ -120,7 +155,7 @@ const messageHandler = {
           this.incrementCountOfContainerTabsOpened();
         }
 
-        this.unhideContainer(tab.cookieStoreId);
+        backgroundLogic.unhideContainer(tab.cookieStoreId);
       }
       setTimeout(() => {
         this.lastCreatedTab = null;
@@ -146,17 +181,6 @@ const messageHandler = {
     }
   },
 
-  async unhideContainer(cookieStoreId) {
-    if (!this.unhideQueue.includes(cookieStoreId)) {
-      this.unhideQueue.push(cookieStoreId);
-      // Unhide all hidden tabs
-      await backgroundLogic.showTabs({
-        cookieStoreId
-      });
-      this.unhideQueue.splice(this.unhideQueue.indexOf(cookieStoreId), 1);
-    }
-  },
-
   async onFocusChangedCallback(windowId) {
     assignManager.removeContextMenu();
     // browserAction loses background color in new windows ...

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;
-    switch (buttonTarget.id) {
-    case "confirm":
-      confirmSubmit(redirectUrl, cookieStoreId);
-      break;
+    let button = "confirm"; // Confirm is the form default.
+    let buttonTarget = e.explicitOriginalTarget;
+    if (buttonTarget.tagName !== "BUTTON") {
+      buttonTarget = buttonTarget.closest("button");
+    }
+    if (buttonTarget && buttonTarget.id) {
+      button = buttonTarget.id;
+    }
+    switch (button) {
     case "deny":
       denySubmit(redirectUrl);
       break;
+    case "confirm":
+      confirmSubmit(redirectUrl, cookieStoreId);
+      break;
     }
   });
 }

src/js/popup.js

@@ -162,7 +162,7 @@ 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);
     // use set and spread to create a unique array
@@ -177,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 {
@@ -212,6 +214,27 @@ 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({}),
@@ -227,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;
     });
@@ -370,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);
       });
@@ -394,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);
       });
@@ -418,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);
       });
@@ -440,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);
     });
@@ -461,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);
     });
@@ -485,11 +510,13 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
       Logic.showPanel(P_CONTAINER_EDIT, { name: Logic.generateIdentityName() });
     });
 
-    Logic.addEnterHandler(document.querySelector("#edit-containers-link"), () => {
-      Logic.showPanel(P_CONTAINERS_EDIT);
+    Logic.addEnterHandler(document.querySelector("#edit-containers-link"), (e) => {
+      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"
@@ -524,7 +551,8 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
         previous();
         break;
       default:
-        if (e.keyCode >= 49 && e.keyCode <= 57) {
+        if ((e.keyCode >= 49 && e.keyCode <= 57) &&
+            Logic._currentPanel === "containersList") {
           const element = selectables[e.keyCode - 48];
           if (element) {
             element.click();
@@ -631,7 +659,7 @@ 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") {
@@ -665,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();
   },
@@ -682,7 +717,7 @@ 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({
@@ -697,37 +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",
-            windowId: browser.windows.WINDOW_ID_CURRENT,
-            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.
@@ -776,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();
+          });
+        }
+      }
+    } 
   },
 });
 
@@ -932,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>
@@ -942,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
@@ -1000,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;
     });
@@ -1024,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.
@@ -1044,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);
@@ -1064,7 +1131,7 @@ Logic.registerPanel(P_CONTAINERS_ACHIEVEMENT, {
   // This method is called when the object is registered.
   initialize() {
     // Set done and move to the containers list panel.
-    Logic.addEnterHandler(document.querySelector("#achievement-done-button"), async function () {
+    Logic.addEnterHandler(document.querySelector("#achievement-done-button"), async () => {
       await Logic.setAchievementDone("manyContainersOpened");
       Logic.showPanel(P_CONTAINERS_LIST);
     });
@@ -1077,3 +1144,14 @@ Logic.registerPanel(P_CONTAINERS_ACHIEVEMENT, {
 });
 
 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,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Firefox Multi-Account Containers",
-  "version": "5.0.1",
+  "version": "6.1.1",
 
   "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": {
@@ -16,7 +16,7 @@
     }
   },
 
-  "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",
@@ -46,7 +47,12 @@
     "browser_style": true,
     "default_icon": "img/container-site.svg",
     "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

@@ -2,7 +2,7 @@
 <head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   <title>Multi-Account Containers</title>
-  <link rel="stylesheet" href="/css/popup.css">
+  <link rel="stylesheet" href="css/popup.css">
 
 </head>
 <body>
@@ -204,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;
+  }
+});