Merge pull request #2803 from mozilla/survey

Join our Multi-Account Containers Research Study! 🚀

.eslintignore

@@ -1,2 +0,0 @@
-lib/testpilot/*.js
-coverage

.eslintrc.js

@@ -1,69 +0,0 @@
-module.exports = {
-  "parserOptions": {
-    "ecmaVersion": 2018
-  },
-  "env": {
-    "browser": true,
-    "es6": true,
-    "node": true,
-    "webextensions": true
-  },
-  "globals": {
-    "Utils": true,
-    "CustomizableUI": true,
-    "CustomizableWidgets": true,
-    "SessionStore": true,
-    "Services": true,
-    "Components": true,
-    "XPCOMUtils": true,
-    "OS": true,
-    "ADDON_UNINSTALL": true,
-    "ADDON_DISABLE": true,
-    "CONTAINER_ORDER_STORAGE_KEY": true,
-    "proxifiedContainers": true,
-    "MozillaVPN": true,
-    "MozillaVPN_Background": true
-  },
-  "plugins": [
-    "promise",
-    "no-unsanitized"
-  ],
-  "extends": [
-    "eslint:recommended"
-  ],
-  "root": true,
-  "rules": {
-    "promise/always-return": "off",
-    "promise/avoid-new": "off",
-    "promise/catch-or-return": "error",
-    "promise/no-callback-in-promise": "warn",
-    "promise/no-native": "off",
-    "promise/no-nesting": "warn",
-    "promise/no-promise-in-callback": "warn",
-    "promise/no-return-wrap": "error",
-    "promise/param-names": "error",
-
-    "no-unsanitized/method": [
-      "error"
-    ],
-    "no-unsanitized/property": [
-      "error",
-      {
-        "escape": {
-          "taggedTemplates": ["Utils.escaped"]
-        }
-      }
-    ],
-
-    "eqeqeq": "error",
-    "indent": ["error", 2],
-    "linebreak-style": ["error", "unix"],
-    "no-throw-literal": "error",
-    "no-warning-comments": "warn",
-    "no-var": "error",
-    "prefer-const": "error",
-    "quotes": ["error", "double"],
-    "radix": "error",
-    "semi": ["error", "always"]
-  }
-};

.github/workflows/builds.yaml

@@ -26,7 +26,7 @@ jobs:
           ./bin/build-addon.sh nightly.xpi
 
       - name: Uploading
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
             name: ${{matrix.config.name}} Build
             path: src/web-ext-artifacts

CONTRIBUTING.md

@@ -32,7 +32,23 @@ repository like any other. Before editing files in this folder, you need to:
 
 You can then [open a pull request][pr] on [the l10n repository][l10n].
 
+## Tips for contributing
+
+1. Choose [an issue][issues] that you would like to work on.
+2. Fork the repository and follow the instructions for setting it up locally.
+3. Run the add-on locally and try reproducing the issue.
+4. Debug add-ons by clicking the “Settings” icon in about:addons, and then clicking “Debug Add-ons”
+5. Click “Inspect” on the MAC add-on to open developer tools for the popup extension (see [this documentation][extension-doc] for more information)
+6. Once you have a fix ready, commit your changes with the following commit message template: “Fix #<insert issue id #>: <short description>”
+7. Push your changes and open a pull request for review.
+
+If you run into an issue, you can always ask the other community members in the [discussions board][discussions]. 
+
+<!-- Please keep the list in alphabetical order -->
+[discussions]: https://github.com/mozilla/multi-account-containers/discussions
+[extension-doc]: https://extensionworkshop.com/documentation/develop/debugging/
 [fork]: https://docs.github.com/en/get-started/quickstart/fork-a-repo
+[issues]: https://github.com/mozilla/multi-account-containers/issues
 [l10n]: https://github.com/mozilla-l10n/multi-account-containers-l10n/
 [pr]: https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests
-[web-ext]: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Getting_started_with_web-ext
+[web-ext]: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Getting_started_with_web-ext

README.md

@@ -13,7 +13,7 @@ Everyone is welcome to contribute to Multi-Account Containers. To learn how
 to contribute a patch to Multi-Account Container, please
 [read our contributing guide][contributing].
 
-You can also chat with us on [our Matrix room][matrix] or [our forum][forum].
+You can also chat with us on [our Matrix room][matrix] or ask in [our discussions board][discussions].
 
 This repository is governed by Mozilla's code of conduct and etiquette
 guidelines. For more details, [please read the Mozilla Community Participation Guidelines][cpg].
@@ -29,4 +29,5 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/.
 [cpg]: https://www.mozilla.org/about/governance/policies/participation/
 [enduser]: https://support.mozilla.org/en-US/kb/containers
 [forum]: https://discourse.mozilla.org/c/containers/223
+[discussions]: https://github.com/mozilla/multi-account-containers/discussions
 [matrix]: https://matrix.to/#/#containers:mozilla.org

bin/addons-linter.sh

@@ -1,4 +1,4 @@
-#!/bin/env bash
+#!/usr/bin/env bash
 
 # 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

bin/build-addon.sh

@@ -1,4 +1,4 @@
-#!/bin/env bash
+#!/usr/bin/env bash
 
 # 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

bin/commons.sh

@@ -1,4 +1,4 @@
-#!/bin/env bash
+#!/usr/bin/env bash
 
 # 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

eslint.config.js

@@ -0,0 +1,102 @@
+const {
+  defineConfig,
+  globalIgnores,
+} = require("eslint/config");
+
+const globals = require("globals");
+const promise = require("eslint-plugin-promise");
+const noUnsanitized = require("eslint-plugin-no-unsanitized");
+const js = require("@eslint/js");
+
+module.exports = defineConfig([{
+  languageOptions: {
+    "ecmaVersion": 2021,
+    parserOptions: {},
+
+    globals: {
+      ...globals.browser,
+      ...globals.node,
+      ...globals.webextensions,
+      "Utils": true,
+      "CustomizableUI": true,
+      "CustomizableWidgets": true,
+      "SessionStore": true,
+      "Services": true,
+      "Components": true,
+      "XPCOMUtils": true,
+      "OS": true,
+      "ADDON_UNINSTALL": true,
+      "ADDON_DISABLE": true,
+      "CONTAINER_ORDER_STORAGE_KEY": true,
+      "proxifiedContainers": true,
+      "MozillaVPN": true,
+      "MozillaVPN_Background": true,
+    },
+  },
+
+  plugins: {
+    js,
+    promise,
+    "no-unsanitized": noUnsanitized,
+  },
+
+  extends: ["js/recommended"],
+
+  "rules": {
+    "promise/always-return": "off",
+    "promise/avoid-new": "off",
+    "promise/catch-or-return": "error",
+    "promise/no-callback-in-promise": "warn",
+    "promise/no-native": "off",
+    "promise/no-nesting": "warn",
+    "promise/no-promise-in-callback": "warn",
+    "promise/no-return-wrap": "error",
+    "promise/param-names": "error",
+    "no-unsanitized/method": ["error"],
+
+    "no-unsanitized/property": ["error", {
+      "escape": {
+        "taggedTemplates": ["Utils.escaped"],
+      },
+    }],
+
+    "eqeqeq": "error",
+    "indent": ["error", 2],
+    "linebreak-style": ["error", "unix"],
+    "no-throw-literal": "error",
+    "no-warning-comments": "warn",
+    "no-var": "error",
+    "prefer-const": "error",
+    "quotes": ["error", "double"],
+    "radix": "error",
+    "semi": ["error", "always"],
+  },
+},
+
+{
+  files: ["test/**/*.js"],
+  languageOptions: {
+    globals: {
+      ...globals.mocha,
+    },
+  },
+  "rules": {
+    "no-restricted-globals": ["error", "browser"],
+  },
+},
+
+{
+  files: ["src/js/**/*.js"],
+  languageOptions: {
+    globals: {
+      "assignManager": true,
+      "badge": true,
+      "backgroundLogic": true,
+      "identityState": true,
+      "messageHandler": true,
+      "sync": true,
+    },
+  },
+},
+
+globalIgnores(["lib/testpilot/*.js", "**/coverage"])]);

package.json

@@ -2,19 +2,20 @@
   "name": "testpilot-containers",
   "title": "Multi-Account Containers",
   "description": "Containers helps you keep all the parts of your online life contained in different tabs. Custom labels and color-coded tabs help keep different activities — like online shopping, travel planning, or checking work email — separate.",
-  "version": "8.2.0",
+  "version": "8.3.1",
   "author": "Andrea Marchesini, Luke Crouch, Lesley Norton, Kendall Werts, Maxx Crawford, Jonathan Kingston",
   "bugs": {
     "url": "https://github.com/mozilla/multi-account-containers/issues"
   },
-  "dependencies": {},
   "devDependencies": {
+    "@eslint/js": "^9.36.0",
     "addons-linter": "^5.28.0",
     "ajv": "^6.6.3",
     "chai": "^4.2.0",
-    "eslint": "^7.32.0",
+    "eslint": "^9.36.0",
-    "eslint-plugin-no-unsanitized": "^4.0.0",
+    "eslint-plugin-no-unsanitized": "^4.1.4",
-    "eslint-plugin-promise": "^5.2.0",
+    "eslint-plugin-promise": "^7.2.1",
+    "globals": "^16.4.0",
     "htmllint-cli": "0.0.7",
     "json": ">=10.0.0",
     "mocha": "^10.1.0",

src/css/popup.css

@@ -26,10 +26,18 @@
   src: url("/fonts/Inter-Medium.woff2") format("woff2");
 }
 
+@font-face {
+  font-family: "Inter-SemiBold";
+  font-style: normal;
+  font-weight: 700;
+  src: url("/fonts/Inter-SemiBold.woff2") format("woff2");
+}
+
 [data-theme="light"],
 :root {
   --fontInter: "Inter", sans-serif;
   --fontInterMedium: "Inter-Medium", sans-serif;
+  --fontInterSemiBold: "Inter-SemiBold", sans-serif;
   --fontMetropolis: "Metropolis", sans-serif;
   --fontMetropolisLight: "Metropolis-Light", sans-serif;
   --iconArrowLeft: url("/img/arrow-icon-left.svg");
@@ -110,7 +118,6 @@
   --usercontext-bg-hover-color: #f0f0fa;
   --usercontext-bg-focus-color: #e0e0e6;
   --usercontext-bg-active-color: #cfcfd8;
-  --moz-vpn-tout-shadow: 0 0 7px 0 #9498a25e;
 }
 
 [data-theme="dark"] {
@@ -180,7 +187,6 @@
   --usercontext-bg-active-color: #5b5b66;
   --usercontext-bg-focus-color: #2b2a33;
   --usercontext-bg-hover-color: #52525e;
-  --moz-vpn-tout-shadow: 0 0 7px 0 #7478825e;
 }
 
 /* General Rules and Resets */
@@ -635,37 +641,8 @@ input:checked:hover:focus + .slider {
   background-color: var(--button-bg-active-color-primary);
 }
 
-/* Mozilla VPN tout */
-
-#moz-vpn-tout {
-  opacity: 0;
-  background-color: var(--panel-bg-color);
-  visibility: visible;
-  max-block-size: 500px;
-  position: absolute;
-  inset-block-end: var(--footerHeight);
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-  box-shadow: var(--moz-vpn-tout-shadow);
-  animation: appear 0.2s ease-out 0.5s forwards;
-  transition: opacity 0.1s ease-in-out, max-height 0.3s ease-in-out;
-}
-
-@keyframes appear {
-  0% {
-    opacity: 0;
-    transform: translateY(10%);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0%);
-  }
-}
-
 /* Mozilla VPN Controller UI in Container Management Panel */
 
-.moz-vpn-content,
 .moz-vpn-controller-content {
   display: flex;
   position: relative;
@@ -1053,7 +1030,6 @@ input.proxies {
 
 /* Mozilla VPN Server list */
 
-.moz-vpn-logo,
 .moz-vpn-logotype {
   color: var(--text-color-primary);
   background-image: var(--logoMozillaVpn);
@@ -1683,8 +1659,20 @@ input[type=text] {
   background-color: var(--button-bg-hover-color-primary);
 }
 
+#survey-achievement-done-button {
+  color: var(--button-bg-color-primary);
+  transition: color 0.1s ease;
+  font-size: 14px;
+  padding-inline: 3px;
+  padding-block: 1px;
+  border-radius: 1px;
+  text-align: center;
+  margin-inline: auto;
+}
+
 .onboarding-button:focus,
-.half-onboarding-button:focus {
+.half-onboarding-button:focus,
+#survey-achievement-done-button:focus {
   box-shadow:
     0 0 0 2px var(--button-bg-color-secondary),
     0 0 0 4px var(--button-bg-focus-color-primary);
@@ -2441,3 +2429,52 @@ tr:hover > td > .reset-button {
 .searchbar input {
   inline-size: 100%;
 }
+
+/* Survey Popup */
+
+.survey-blurb,
+#survey-panel h3.onboarding-title {
+  text-align: center;
+  margin-inline: auto;
+}
+
+#survey-panel h3.onboarding-title {
+  max-inline-size: 100%;
+  font-family: var(--fontInterSemiBold);
+  line-height: 24px;
+  margin-block-end: 12px;
+}
+
+#survey-panel {
+  padding-block: 40px;
+  padding-inline: 0;
+}
+
+.survey-blurb {
+  margin-block-end: 16px;
+  margin-inline: 24px;
+}
+
+#survey-img {
+  block-size: 180px;
+  margin-block-end: 16px;
+}
+
+#survey-button {
+  padding-block: 4px;
+  padding-inline: 16px;
+  margin-block: 0 8px;
+  min-block-size: 32px;
+}
+
+.share-ctas.survey-back {
+  margin-inline: auto;
+}
+
+#survey-achievement-done-button:hover {
+  color: var(--button-bg-hover-color-primary);
+}
+
+#survey-achievement-done-button:active {
+  color: var(--button-bg-active-color-primary);
+}

src/js/.eslintrc.js

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

src/js/background/assignManager.js

@@ -61,8 +61,9 @@ window.assignManager = {
         this.area.get([siteStoreKey]).then((storageResponse) => {
           if (storageResponse && siteStoreKey in storageResponse) {
             resolve(storageResponse[siteStoreKey]);
+          } else {
+            resolve(null);
           }
-          resolve(null);
         }).catch((e) => {
           reject(e);
         });
@@ -76,7 +77,6 @@ window.assignManager = {
           this.setExempted(pageUrlorUrlKey, tabId);
         });
       }
-      // eslint-disable-next-line require-atomic-updates
       data.identityMacAddonUUID =
         await identityState.lookupMACaddonUUID(data.userContextId);
       await this.area.set({
@@ -232,7 +232,7 @@ window.assignManager = {
     try {
       container = await browser.contextualIdentities
         .get(backgroundLogic.cookieStoreId(siteSettings.userContextId));
-    } catch (e) {
+    } catch {
       container = false;
     }
 
@@ -325,7 +325,8 @@ window.assignManager = {
         options.url,
         tab.index + 1,
         tab.active,
-        openTabId
+        openTabId,
+        tab.groupId
       );
     } else {
       this.reloadPageInContainer(
@@ -335,7 +336,8 @@ window.assignManager = {
         tab.index + 1,
         tab.active,
         siteSettings.neverAsk,
-        openTabId
+        openTabId,
+        tab.groupId
       );
     }
     this.calculateContextMenu(tab);
@@ -480,9 +482,7 @@ window.assignManager = {
   },
 
   contextualIdentityRemoved(changeInfo) {
-    browser.contextMenus.remove(
+    this.removeMenuItem(changeInfo.contextualIdentity.cookieStoreId);
-      changeInfo.contextualIdentity.cookieStoreId
-    );
   },
 
   async _onClickedHandler(info, tab) {
@@ -638,7 +638,7 @@ window.assignManager = {
   },
 
   async _maybeRemoveSiteIsolation(userContextId) {
-    const assignments = await this.storageArea.getByContainer(userContextId);
+    const assignments = await this.storageArea.getAssignedSites(userContextId);
     const hasAssignments = assignments && Object.keys(assignments).length > 0;
     if (hasAssignments) {
       return;
@@ -669,11 +669,11 @@ window.assignManager = {
     // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1215376#c16
     // We also can't change for always private mode
     // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1352102
-    browser.contextMenus.remove(this.MENU_ASSIGN_ID);
+    this.removeMenuItem(this.MENU_ASSIGN_ID);
-    browser.contextMenus.remove(this.MENU_REMOVE_ID);
+    this.removeMenuItem(this.MENU_REMOVE_ID);
-    browser.contextMenus.remove(this.MENU_SEPARATOR_ID);
+    this.removeMenuItem(this.MENU_SEPARATOR_ID);
-    browser.contextMenus.remove(this.MENU_HIDE_ID);
+    this.removeMenuItem(this.MENU_HIDE_ID);
-    browser.contextMenus.remove(this.MENU_MOVE_ID);
+    this.removeMenuItem(this.MENU_MOVE_ID);
   },
 
   async calculateContextMenu(tab) {
@@ -726,7 +726,15 @@ window.assignManager = {
     });
   },
 
-  reloadPageInDefaultContainer(url, index, active, openerTabId) {
+  /**
+   * @param {string} url
+   * @param {number} index
+   * @param {boolean} active
+   * @param {number} [openerTabId]
+   * @param {number} [groupId]
+   * @returns {void}
+   */
+  reloadPageInDefaultContainer(url, index, active, openerTabId, groupId) {
     // To create a new tab in the default container, it is easiest just to omit the
     // cookieStoreId entirely.
     //
@@ -745,16 +753,58 @@ window.assignManager = {
     // does not automatically return to the original opener tab. To get this desired behaviour,
     // we MUST specify the openerTabId when creating the new tab.
     const cookieStoreId = "firefox-default";
-    browser.tabs.create({url, cookieStoreId, index, active, openerTabId});
+    this.createTabWrapper(url, cookieStoreId, index, active, openerTabId, groupId);
   },
 
-  reloadPageInContainer(url, currentUserContextId, userContextId, index, active, neverAsk = false, openerTabId = null) {
+
+  /**
+   * Wraps around `browser.tabs.create` and `browser.tabs.group` to create a
+   * tab and ensure that it ends up in the requested tab group, if applicable.
+   *
+   * @param {string} url
+   * @param {string} cookieStoreId
+   * @param {number} index
+   * @param {boolean} active
+   * @param {number} openerTabId
+   * @param {number} [groupId] Tab group ID
+   * @returns {Promise<Tab>}
+   */
+  async createTabWrapper(url, cookieStoreId, index, active, openerTabId, groupId) {
+    const newTab = await browser.tabs.create({
+      url,
+      cookieStoreId,
+      index,
+      active,
+      openerTabId,
+    });
+
+    if (groupId >= 0) {
+      // If the original tab was in a tab group, make sure that the reopened tab
+      // stays in the same tab group.
+      await browser.tabs.group({ groupId, tabIds: newTab.id });
+    }
+
+    return newTab;
+  },
+
+  /**
+   * @param {string} url
+   * @param {string} currentUserContextId
+   * @param {string} userContextId
+   * @param {number} index
+   * @param {boolean} active
+   * @param {boolean} [neverAsk=false]
+   * @param {number} [openerTabId=null]
+   * @param {number} [groupId]
+   * @returns {Promise<Tab>}
+   */
+  reloadPageInContainer(url, currentUserContextId, userContextId, index, active, neverAsk = false, openerTabId = null, groupId = undefined) {
     const cookieStoreId = backgroundLogic.cookieStoreId(userContextId);
     const loadPage = browser.runtime.getURL("confirm-page.html");
     // False represents assignment is not permitted
     // If the user has explicitly checked "Never Ask Again" on the warning page we will send them straight there
     if (neverAsk) {
-      return browser.tabs.create({url, cookieStoreId, index, active, openerTabId});
+      return this.createTabWrapper(url, cookieStoreId, index, active, openerTabId, groupId);
     } else {
       let confirmUrl = `${loadPage}?url=${this.encodeURLProperty(url)}&cookieStoreId=${cookieStoreId}`;
       let currentCookieStoreId;
@@ -762,13 +812,14 @@ window.assignManager = {
         currentCookieStoreId = backgroundLogic.cookieStoreId(currentUserContextId);
         confirmUrl += `&currentCookieStoreId=${currentCookieStoreId}`;
       }
-      return browser.tabs.create({
+      return this.createTabWrapper(
-        url: confirmUrl,
+        confirmUrl,
-        cookieStoreId: currentCookieStoreId,
+        currentCookieStoreId,
-        openerTabId,
         index,
-        active
+        active,
-      }).then(() => {
+        openerTabId,
+        groupId
+      ).then(() => {
         // We don't want to sync this URL ever nor clutter the users history
         browser.history.deleteUrl({url: confirmUrl});
       }).catch((e) => {
@@ -796,12 +847,19 @@ window.assignManager = {
   },
 
   async removeBookmarksMenu() {
-    browser.contextMenus.remove(this.OPEN_IN_CONTAINER);
+    this.removeMenuItem(this.OPEN_IN_CONTAINER);
     const identities = await browser.contextualIdentities.query({});
     for (const identity of identities) {
-      browser.contextMenus.remove(identity.cookieStoreId);
+      this.removeMenuItem(identity.cookieStoreId);
     }
   },
+
+  removeMenuItem(menuItemId) {
+    // Callers do not check whether the menu exists before attempting to remove
+    // it. contextMenus.remove rejects when the menu does not exist, so we need
+    // to catch and swallow the error to avoid logspam.
+    browser.contextMenus.remove(menuItemId).catch(() => {});
+  }
 };
 
 assignManager.init();

src/js/background/backgroundLogic.js

@@ -35,10 +35,39 @@ const backgroundLogic = {
     browser.permissions.onRemoved.addListener(permissions => this.resetPermissions(permissions));
 
     // Update Translation in Manifest
-    browser.runtime.onInstalled.addListener(this.updateTranslationInManifest);
+    browser.runtime.onInstalled.addListener((details) => {
+      this.updateTranslationInManifest();
+      this._undoDefault820SortTabsKeyboardShortcut(details);
+    });
     browser.runtime.onStartup.addListener(this.updateTranslationInManifest);
   },
 
+  /**
+   * One-time migration after updating from v8.2.0:
+   * Unset the default keyboard shortcut (Ctrl+Comma) for the `sort_tabs`
+   * command if it was set in v8.2.0 of this addon. If the user remapped
+   * a different shortcut manually, retain their shortcut. Users who used
+   * the default keyboard shortcut will need to manually set a shortcut.
+   * See https://support.mozilla.org/en-US/kb/manage-extension-shortcuts-firefox
+   *
+   * @param {{reason: runtime.OnInstalledReason, previousVersion?: string}} details
+   */
+  async _undoDefault820SortTabsKeyboardShortcut(details) {
+    if (details.reason === "update" && details.previousVersion === "8.2.0") {
+      const commands = await browser.commands.getAll();
+      const sortTabsCommand = commands.find(command => command.name === "sort_tabs");
+      if (sortTabsCommand) {
+        const previouslySuggestedKeys = [
+          "Ctrl+Comma", // "default"
+          "MacCtrl+Comma", // "mac"
+        ];
+        if (previouslySuggestedKeys.includes(sortTabsCommand.shortcut)) {
+          browser.commands.reset("sort_tabs");
+        }
+      }
+    }
+  },
+
   updateTranslationInManifest() {
     for (let index = 0; index < 10; index++) {
       const ajustedIndex = index + 1; // We want to start from 1 instead of 0 in the UI.
@@ -210,7 +239,7 @@ const backgroundLogic = {
         containerState.isIsolated = "locked";
       }
       return await identityState.storageArea.set(cookieStoreId, containerState);
-    } catch (error) {
+    } catch {
       // console.error(`No container: ${cookieStoreId}`);
     }
   },
@@ -343,7 +372,13 @@ const backgroundLogic = {
     let pos = 0;
 
     // Let's collect UCIs/tabs for this window.
+    /** @type {Map<string, {order: string, tabs: Tab[]}>} */
     const map = new Map;
+
+    const lastTab = tabs.at(-1);
+    /** @type {boolean} */
+    let lastTabIsInTabGroup = !!lastTab && lastTab.groupId >= 0;
+
     for (const tab of tabs) {
       if (pinnedTabs && !tab.pinned) {
         // We don't have, or we already handled all the pinned tabs.
@@ -356,6 +391,11 @@ const backgroundLogic = {
         continue;
       }
 
+      if (tab.groupId >= 0) {
+        // Skip over tabs in tab groups until it's possible to handle them better.
+        continue;
+      }
+
       if (!map.has(tab.cookieStoreId)) {
         const userContextId = backgroundLogic.getUserContextIdFromCookieStoreId(tab.cookieStoreId);
         map.set(tab.cookieStoreId, { order: userContextId, tabs: [] });
@@ -377,15 +417,25 @@ const backgroundLogic = {
     const sortMap = new Map([...map.entries()].sort((a, b) => a[1].order > b[1].order));
 
     // Let's move tabs.
-    sortMap.forEach(obj => {
+    for (const { tabs } of sortMap.values()) {
-      for (const tab of obj.tabs) {
+      for (const tab of tabs) {
         ++pos;
         browser.tabs.move(tab.id, {
           windowId: windowObj.id,
-          index: pos
+          index: pinnedTabs ? pos : -1
         });
+        // Pinned tabs are never grouped and always inserted in the front.
+        if (!pinnedTabs && lastTabIsInTabGroup && browser.tabs.ungroup) {
+          // If the last item in the tab strip is a grouped tab, moving a tab
+          // to its position will also add it to the tab group. Since this code
+          // is only sorting ungrouped tabs, this forcibly ungroups the first
+          // tab to be moved. All subsequent iterations will only be moving
+          // ungrouped tabs to the position of other ungrouped tabs.
+          lastTabIsInTabGroup = false;
+          browser.tabs.ungroup(tab.id);
+        }
       }
-    });
+    }
   },
 
   async hideTabs(options) {

src/js/background/messageHandler.js

@@ -91,7 +91,9 @@ const messageHandler = {
           m.newUserContextId,
           m.tabIndex,
           m.active,
-          true
+          true,
+          null,
+          m.groupId
         );
         break;
       case "assignAndReloadInContainer":
@@ -101,7 +103,9 @@ const messageHandler = {
           m.newUserContextId,
           m.tabIndex,
           m.active,
-          true
+          true,
+          null,
+          m.groupId
         );
         // m.tabId is used for where to place the in content message
         // m.url is the assignment to be removed/added
@@ -137,7 +141,6 @@ const messageHandler = {
         if (!extensionInfo.permissions.includes("contextualIdentities")) {
           throw new Error("Missing contextualIdentities permission");
         }
-        // eslint-disable-next-line require-atomic-updates
         externalExtensionAllowed[sender.id] = true;
       }
       let response;
@@ -254,6 +257,8 @@ const messageHandler = {
       browser.browserAction.setBadgeBackgroundColor({color: "rgba(0,217,0,255)"});
       browser.browserAction.setBadgeText({text: "NEW"});
     }
+
+    this.maybePrepareSurveyAchievementOnUpdate(countOfContainerTabsOpened);
   },
 
   async onFocusChangedCallback(windowId) {
@@ -270,7 +275,33 @@ const messageHandler = {
     }).catch((e) => {
       throw e;
     });
-  }
+  },
+
+  async maybePrepareSurveyAchievementOnUpdate(countOpened) {
+    if (countOpened < 10) {
+      return;
+    }
+
+    // Show the survey only for English locales (en or en-*).
+    const uiLang = browser.i18n.getUILanguage();
+    const lang = (uiLang || "").toLowerCase();
+    if (lang !== "en" && !lang.startsWith("en-")) {
+      return;
+    }
+
+    // Check if already shown in the past; if so, do not show again.
+    const { achievements } = await browser.storage.local.get({ achievements: [] });
+    const existing = achievements.find(a => a.name === "survey");
+    if (existing) {
+      return;
+    }
+
+    // Ensure the achievement exists and is pending.
+    achievements.push({ name: "survey", done: false });
+    browser.storage.local.set({ achievements });
+    browser.browserAction.setBadgeBackgroundColor({color: "rgba(0,217,0,255)"});
+    browser.browserAction.setBadgeText({text: "NEW"});
+  },
 };
 
 // Lets do this last as theme manager did a check before connecting before

src/js/background/mozillaVpnBackground.js

@@ -27,7 +27,7 @@ const MozillaVPN_Background = {
       // invalid proxy connection.
       this.port.onDisconnect.addListener(() => this.increaseIsolationKey());
 
-    } catch(e) {
+    } catch {
       this._installed = false;
       this._connected = false;
     }

src/js/background/sync.js

@@ -338,7 +338,7 @@ async function reconcileIdentities(){
     if (deletedCookieStoreId){
       try{
         await browser.contextualIdentities.remove(deletedCookieStoreId);
-      } catch (error) {
+      } catch {
         // if the identity we are deleting is not there, that's fine.
         console.error("Error deleting contextualIdentity", deletedCookieStoreId);
         continue;
@@ -514,7 +514,7 @@ async function reconcileSiteAssignments() {
         await setAssignmentWithUUID(assignedSite, urlKey);
         continue;
       }
-    } catch (error) {
+    } catch {
       // this is probably old or incorrect site info in Sync
       // skip and move on.
     }
@@ -565,7 +565,6 @@ async function setAssignmentWithUUID(assignedSite, urlKey) {
   const uuid = assignedSite.identityMacAddonUUID;
   const cookieStoreId = await identityState.lookupCookieStoreId(uuid);
   if (cookieStoreId) {
-    // eslint-disable-next-line require-atomic-updates
     assignedSite.userContextId = cookieStoreId
       .replace(/^firefox-container-/, "");
     await assignManager.storageArea.set(

src/js/confirm-page.js

@@ -69,11 +69,15 @@ function confirmSubmit(redirectUrl, cookieStoreId) {
   openInContainer(redirectUrl, cookieStoreId);
 }
 
-function getCurrentTab() {
+/**
-  return browser.tabs.query({
+ * @returns {Promise<Tab>}
+ */
+async function getCurrentTab() {
+  const tabs = await browser.tabs.query({
     active: true,
     windowId: browser.windows.WINDOW_ID_CURRENT
   });
+  return tabs[0];
 }
 
 async function denySubmit(redirectUrl, currentCookieStoreId) {
@@ -93,7 +97,7 @@ async function denySubmit(redirectUrl, currentCookieStoreId) {
 
   await browser.runtime.sendMessage({
     method: "exemptContainerAssignment",
-    tabId: tab[0].id,
+    tabId: tab.id,
     pageUrl: redirectUrl
   });
   document.location.replace(redirectUrl);
@@ -103,12 +107,15 @@ load();
 
 async function openInContainer(redirectUrl, cookieStoreId) {
   const tab = await getCurrentTab();
-  await browser.tabs.create({
+  const reopenedTab = await browser.tabs.create({
-    index: tab[0].index + 1,
+    index: tab.index + 1,
     cookieStoreId,
     url: redirectUrl
   });
-  if (tab.length > 0) {
+  if (tab.groupId >= 0) {
-    browser.tabs.remove(tab[0].id);
+    // If the original tab was in a tab group, make sure that the reopened tab
+    // stays in the same tab group.
+    await browser.tabs.group({ groupId: tab.groupId, tabIds: reopenedTab.id });
   }
+  await browser.tabs.remove(tab.id);
 }

src/js/mozillaVpn.js

@@ -88,7 +88,7 @@ const MozillaVPN = {
         el.classList.remove("display-none");
       });
       this.setStatusIndicatorIcons(mozillaVpnInstalled);
-    } catch (e) {
+    } catch {
       mozVpnLogotypes.forEach(el => {
         el.style.display = "none";
       });
@@ -139,7 +139,7 @@ const MozillaVPN = {
         try {
           const proxy = await proxifiedContainers.retrieve(identity.cookieStoreId);
           proxies[identity.cookieStoreId] = proxy;
-        } catch (e) {
+        } catch {
           proxies[identity.cookieStoreId] = {};
         }
       }

src/js/popup.js

@@ -31,6 +31,7 @@ const P_CONTAINER_INFO = "containerInfo";
 const P_CONTAINER_EDIT = "containerEdit";
 const P_CONTAINER_DELETE = "containerDelete";
 const P_CONTAINERS_ACHIEVEMENT = "containersAchievement";
+const P_SURVEY_ACHIEVEMENT = "surveyAchievement";
 const P_CONTAINER_ASSIGNMENTS = "containerAssignments";
 const P_CLEAR_CONTAINER_STORAGE = "clearContainerStorage";
 
@@ -138,18 +139,23 @@ 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) {
+    const pending = achievementsStorage.achievements.filter(a => !a.done);
-      if (!achievement.done) {
+
-        showAchievements = true;
+    if (pending.length) {
+      // Prefer showing the survey view first if present, otherwise fall back
+      // to the existing achievement panel.
+      const survey = pending.find(a => a.name === "survey");
+      if (survey) {
+        this.showPanel(P_SURVEY_ACHIEVEMENT);
+        return;
       }
-    }
+
-    if (showAchievements) {
       this.showPanel(P_CONTAINERS_ACHIEVEMENT);
-    } else {
+      return;
-      this.showPanel(P_CONTAINERS_LIST);
     }
+
+    this.showPanel(P_CONTAINERS_LIST);
   },
 
   // In case the user wants to click multiple actions,
@@ -198,7 +204,7 @@ const Logic = {
     // Handle old style rejection with null and also Promise.reject new style
     try {
       return await browser.contextualIdentities.get(cookieStoreId) || defaultContainer;
-    } catch (e) {
+    } catch {
       return defaultContainer;
     }
   },
@@ -425,7 +431,7 @@ const Logic = {
           cookieStoreId: identity.cookieStoreId
         });
         window.close();
-      } catch (e) {
+      } catch {
         window.close();
       }
     }
@@ -762,12 +768,11 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
           method: "sortTabs"
         });
         window.close();
-      } catch (e) {
+      } catch {
         window.close();
       }
     });
 
-    const mozillaVpnToutName = "moz-tout-main-panel";
     const mozillaVpnPermissionsWarningDotName = "moz-permissions-warning-dot";
 
     let { mozillaVpnHiddenToutsList } = await browser.storage.local.get("mozillaVpnHiddenToutsList");
@@ -776,31 +781,6 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
       mozillaVpnHiddenToutsList = [];
     }
 
-    // Decide whether to show Mozilla VPN tout
-    const mozVpnTout = document.getElementById("moz-vpn-tout");
-    const mozillaVpnInstalled = await browser.runtime.sendMessage({ method: "MozillaVPN_getInstallationStatus" });
-    const mozillaVpnToutShouldBeHidden = mozillaVpnHiddenToutsList.find(tout => tout.name === mozillaVpnToutName);
-    if (mozillaVpnInstalled || mozillaVpnToutShouldBeHidden) {
-      mozVpnTout.remove();
-    }
-
-    // Add handlers if tout is visible
-    const mozVpnDismissTout = document.querySelector(".dismiss-moz-vpn-tout");
-    if (mozVpnDismissTout) {
-      Utils.addEnterHandler((mozVpnDismissTout), async() => {
-        mozVpnTout.remove();
-        mozillaVpnHiddenToutsList.push({
-          name: mozillaVpnToutName
-        });
-        await browser.storage.local.set({ mozillaVpnHiddenToutsList });
-      });
-
-      Utils.addEnterHandler(document.querySelector("#moz-vpn-learn-more"), () => {
-        MozillaVPN.handleMozillaCtaClick("mac-main-panel-btn");
-        window.close();
-      });
-    }
-
     // Badge Options icon if both nativeMessaging and/or proxy permissions are disabled
     const bothMozillaVpnPermissionsEnabled = await MozillaVPN.bothPermissionsEnabled();
     const warningDotShouldBeHidden = mozillaVpnHiddenToutsList.find(tout => tout.name === mozillaVpnPermissionsWarningDotName);
@@ -877,7 +857,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
             cookieStoreId: identity.cookieStoreId
           });
           window.close();
-        } catch (e) {
+        } catch {
           window.close();
         }
       });
@@ -888,7 +868,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
             cookieStoreId: identity.cookieStoreId
           });
           window.close();
-        } catch (e) {
+        } catch {
           window.close();
         }
       });
@@ -938,7 +918,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
       incompatible = await browser.runtime.sendMessage({
         method: "checkIncompatibleAddons"
       });
-    } catch (e) {
+    } catch {
       throw new Error("Could not check for incompatible add-ons.");
     }
 
@@ -973,7 +953,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
           cookieStoreId: identity.cookieStoreId
         });
         window.close();
-      } catch (e) {
+      } catch {
         window.close();
       }
     });
@@ -1035,7 +1015,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
           cookieStoreId: Logic.currentCookieStoreId()
         });
         window.close();
-      } catch (e) {
+      } catch {
         window.close();
       }
     });
@@ -1112,7 +1092,7 @@ Logic.registerPanel(OPEN_NEW_CONTAINER_PICKER, {
           cookieStoreId: identity.cookieStoreId
         });
         window.close();
-      } catch (e) {
+      } catch {
         window.close();
       }
     };
@@ -1306,7 +1286,8 @@ Logic.registerPanel(REOPEN_IN_CONTAINER_PICKER, {
         false,
         newUserContextId,
         currentTab.index + 1,
-        currentTab.active
+        currentTab.active,
+        currentTab.groupId
       );
       window.close();
     };
@@ -1336,7 +1317,8 @@ Logic.registerPanel(REOPEN_IN_CONTAINER_PICKER, {
           false,
           0,
           currentTab.index + 1,
-          currentTab.active
+          currentTab.active,
+          currentTab.groupId
         );
         window.close();
       });
@@ -1872,7 +1854,7 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
       });
       await Logic.refreshIdentities();
       Logic.showPreviousPanel();
-    } catch (e) {
+    } catch {
       Logic.showPreviousPanel();
     }
   },
@@ -2363,7 +2345,7 @@ Logic.registerPanel(P_CONTAINER_DELETE, {
         await Logic.removeIdentity(Utils.userContextId(Logic.currentIdentity().cookieStoreId));
         await Logic.refreshIdentities();
         Logic.showPreviousPanel();
-      } catch (e) {
+      } catch {
         Logic.showPreviousPanel();
       }
     });
@@ -2400,6 +2382,30 @@ Logic.registerPanel(P_CONTAINERS_ACHIEVEMENT, {
   },
 });
 
+// P_SURVEY_ACHIEVEMENT: A simple survey view.
+// ----------------------------------------------------------------------------
+
+Logic.registerPanel(P_SURVEY_ACHIEVEMENT, {
+  panelSelector: ".survey-panel",
+
+  // This method is called when the object is registered.
+  initialize() {
+    Utils.addEnterHandler(document.querySelector("#survey-achievement-done-button"), async () => {
+      await Logic.setAchievementDone("survey");
+      Logic.showPanel(P_CONTAINERS_LIST);
+    });
+    Utils.addEnterHandler(document.querySelector("#survey-button"), async () => {
+      await Logic.setAchievementDone("survey");
+      window.close();
+    });
+  },
+
+  // This method is called when the panel is shown.
+  prepare() {
+    return Promise.resolve(null);
+  },
+});
+
 Logic.init();
 
 window.addEventListener("resize", function () {

src/js/utils.js

@@ -94,6 +94,9 @@ const Utils = {
     return result.join("");
   },
 
+  /**
+   * @returns {Promise<Tab|false>}
+   */
   async currentTab() {
     const activeTabs = await browser.tabs.query({ active: true, windowId: browser.windows.WINDOW_ID_CURRENT });
     if (activeTabs.length > 0) {
@@ -146,14 +149,24 @@ const Utils = {
     });
   },
 
-  async reloadInContainer(url, currentUserContextId, newUserContextId, tabIndex, active) {
+  /**
+   * @param {string} url
+   * @param {string} currentUserContextId
+   * @param {string} newUserContextId
+   * @param {number} tabIndex
+   * @param {boolean} active
+   * @param {number} [groupId]
+   * @returns {Promise<any>}
+   */
+  async reloadInContainer(url, currentUserContextId, newUserContextId, tabIndex, active, groupId = undefined) {
     return await browser.runtime.sendMessage({
       method: "reloadInContainer",
       url,
       currentUserContextId,
       newUserContextId,
       tabIndex,
-      active
+      active,
+      groupId
     });
   },
 
@@ -167,7 +180,8 @@ const Utils = {
         currentUserContextId: false,
         newUserContextId: assignedUserContextId,
         tabIndex: currentTab.index +1,
-        active:currentTab.active
+        active: currentTab.active,
+        groupId: currentTab.groupId
       });
     }
     await Utils.setOrRemoveAssignment(

src/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Firefox Multi-Account Containers",
-  "version": "8.2.0",
+  "version": "8.3.1",
   "incognito": "not_allowed",
   "description": "__MSG_extensionDescription__",
   "icons": {
@@ -45,10 +45,6 @@
       "description": "__MSG_openContainerPanel__"
     },
     "sort_tabs": {
-      "suggested_key": {
-        "default": "Ctrl+Comma",
-        "mac": "MacCtrl+Comma"
-      },
       "description": "__MSG_sortTabsByContainer__"
     },
     "open_container_0": {

src/popup.html

@@ -106,6 +106,17 @@
     <a href="#" id="achievement-done-button" class="onboarding-button keyboard-nav" data-i18n-message-id="done"></a>
   </div>
 
+  <div class="panel survey-panel hide" id="survey-panel">
+    <img id="survey-img" alt="" src="/img/survey.svg" />
+    <h3 class="onboarding-title">Participate in Paid Research with Firefox</h3>
+    <p class="survey-blurb">We'd love to learn about your experiences with this add-on! Join a 1:1 Zoom interview and receive a $75 Amazon e-gift card or PayPal payment.</p>
+    <p class="survey-blurb">Thank you for helping us improve Firefox.</p>
+    <p class="share-ctas survey-back">
+      <a class="cta-link onboarding-button keyboard-nav" href="https://qsurvey.mozilla.com/s3/Multi-Account-Containers-Research-Interest-Form" id="survey-button" target="_blank">Take Interest Survey</a>
+    </p>
+    <a href="#" id="survey-achievement-done-button">Back</a>
+  </div>
+
   <div class="panel menu-panel container-panel hide" id="container-panel">
     <span class="popup-notification-card"></span>
     <h3 class="title">Firefox Multi-Account Containers</h3>
@@ -192,18 +203,7 @@
         </tr>
       </table>
     </div>
-    <div id="moz-vpn-tout" class="moz-vpn-content expanded">
+
-      <div class="flx-row button-wrapper">
-        <h4 class="moz-vpn-logo">Mozilla VPN</h4>
-        <button class="controller dismiss-moz-vpn-tout" tab-index="0"></button>
-      </div>
-      <div class="collapsible-content flx-col controller-collapsible-content">
-        <div class="flx-row flx-space-between">
-          <span class="moz-vpn-subtitle" data-i18n-message-id="integrateContainers"></span>
-        </div>
-        <button id="moz-vpn-learn-more" class="moz-vpn-cta primary-cta" data-i18n-message-id="getMozillaVpn"></button>
-      </div>
-    </div>
     <v-padding-hack-footer></v-padding-hack-footer> <!--prevents last container from getting covered up by the 'manage containers button' when list is long-->
     <div class="bottom-btn keyboard-nav controller" id="manage-containers-link" tabindex="0" data-i18n-message-id="manageContainers"></div>
   </div>

test/.eslintrc.js

@@ -1,12 +0,0 @@
-module.exports = {
-  env: {
-    "node": true,
-    "mocha": true
-  },
-  "parserOptions": {
-    "ecmaVersion": 2018
-  },
-  "rules": {
-    "no-restricted-globals": ["error", "browser"]
-  }
-};

test/common.js

@@ -1,5 +1,4 @@
 if (!process.listenerCount("unhandledRejection")) {
-  // eslint-disable-next-line no-console
   process.on("unhandledRejection", r => console.log(r));
 }
 
@@ -32,6 +31,10 @@ const buildDom = async ({background = {}, popup = {}}) => {
         window.crypto = {
           getRandomValues: arr => crypto.randomBytes(arr.length),
         };
+        // By default, the mock contextMenus.remove() returns undefined;
+        // Let it return a Promise instead, so that .then() calls chained to
+        // it (in src/js/background/assignManager.js) do not fail.
+        window.browser.contextMenus.remove.resolves();
       }
     }
   };