.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   "parserOptions": {
-    "ecmaVersion": 2021
+    "ecmaVersion": 2018
   },
   "env": {
     "browser": true,

.github/workflows/builds.yaml

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

CONTRIBUTING.md

@@ -32,23 +32,7 @@ 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 ask in [our discussions board][discussions].
+You can also chat with us on [our Matrix room][matrix] or [our forum][forum].
 
 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,5 +29,4 @@ 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

package.json

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

src/_locales

@@ -1 +1 @@
-Subproject commit bdaa01291b7367a5e815470fd263ea36c862fe32
+Subproject commit d3301069f51262e8cf493a86aa2785cf3261141e

src/css/popup.css

@@ -110,6 +110,7 @@
   --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"] {
@@ -179,6 +180,7 @@
   --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 */
@@ -226,7 +228,6 @@ body {
 
 /* Hack for menu icons to use a light color without affecting container icons */
 [data-theme="light"] img.delete-assignment,
-[data-theme="dark"] img.reset-assignment,
 [data-theme="dark"] .trash-button,
 [data-theme="dark"] img.menu-icon,
 [data-theme="dark"] .menu-icon > img,
@@ -235,7 +236,6 @@ body {
   filter: invert(1);
 }
 
-[data-theme="dark"] img.clear-storage-icon,
 [data-theme="dark"] img.delete-assignment,
 [data-theme="dark"] #edit-sites-assigned .menu-icon,
 [data-theme="dark"] #container-info-table .menu-icon {
@@ -285,33 +285,9 @@ table {
   display: none !important;
 }
 
-.popup-notification-card {
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 2s;
-  border-radius: 4px;
-  font-size: 12px;
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-  padding-block: 8px;
-  padding-inline: 8px;
-  margin-block: 8px;
-  margin-inline: 8px;
-  inline-size: calc(100vw - 25px);
-  background-color: var(--button-bg-active-color-secondary);
-  z-index: 3;
-}
-
-.is-shown {
-  pointer-events: auto;
-  opacity: 1;
-  transition: opacity 0s;
-}
-
 /* effect borrowed from tabs in firefox, ensure that the element flexes to the full width */
 .truncate-text {
-  inline-size: calc(100vw - 100px);
+  inline-size: calc(100vw - 80px);
   overflow: hidden;
   position: relative;
   white-space: nowrap;
@@ -633,8 +609,37 @@ 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;
@@ -1022,6 +1027,7 @@ input.proxies {
 
 /* Mozilla VPN Server list */
 
+.moz-vpn-logo,
 .moz-vpn-logotype {
   color: var(--text-color-primary);
   background-image: var(--logoMozillaVpn);
@@ -1499,9 +1505,8 @@ input[type=text] {
   min-block-size: 500px;
 }
 
-.delete-container-panel,
+.delete-container-panel {
-.clear-container-storage-panel {
+  min-block-size: 300px;
-  min-block-size: 500px;
 }
 
 .panel.onboarding,
@@ -1789,14 +1794,12 @@ manage things like container crud */
   margin-inline-end: 0;
 }
 
-.delete-container-confirm,
+.delete-container-confirm {
-.clear-container-storage-confirm {
   padding-inline-end: 20px;
   padding-inline-start: 20px;
 }
 
-.delete-container-confirm-title,
+.delete-container-confirm-title {
-.clear-container-storage-confirm-title {
   color: var(--text-color-primary);
   font-size: var(--font-size-heading);
 }
@@ -2170,11 +2173,6 @@ hr {
   text-align: center;
 }
 
-.confirmation-destructive-ok-btn {
-  background-color: var(--button-destructive-bg-color);
-  color: var(--button-destructive-text-color);
-}
-
 .delete-btn {
   background-color: var(--button-destructive-bg-color);
   block-size: 32px;
@@ -2305,8 +2303,7 @@ input {
   font-weight: bolder;
 }
 
-.delete-warning,
+.delete-warning {
-.clear-container-storage-warning {
   padding-block-end: 8px;
   padding-block-start: 8px;
   padding-inline-end: 0;
@@ -2317,8 +2314,7 @@ input {
  * rules grouped together at the beginning of the file
  */
 /* stylelint-disable no-descending-specificity */
-.trash-button,
+.trash-button {
-.reset-button {
   display: inline-block;
   block-size: 20px;
   inline-size: 20px;
@@ -2327,21 +2323,11 @@ input {
   text-align: center;
 }
 
-.reset-button {
+tr > td > .trash-button {
-  margin-inline-end: 12px;
-}
-
-.tooltip-wrapper:hover .site-settings-tooltip {
-  display: block;
-}
-
-tr > td > .trash-button,
-tr > td > .reset-button {
   display: none;
 }
 
-tr:hover > td > .trash-button,
+tr:hover > td > .trash-button {
-tr:hover > td > .reset-button {
   display: block;
 }
 

src/js/background/assignManager.js

@@ -61,9 +61,8 @@ 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);
         });
@@ -166,17 +165,11 @@ window.assignManager = {
   _neverAsk(m) {
     const pageUrl = m.pageUrl;
     if (m.neverAsk === true) {
-      if (m.defaultContainer === true) {
-        this.storageArea.remove(pageUrl);
-        return;
-      }
-
       // If we have existing data and for some reason it hasn't been
       // deleted etc lets update it
       this.storageArea.get(pageUrl).then((siteSettings) => {
         if (siteSettings) {
           siteSettings.neverAsk = true;
-          siteSettings.userContextId = backgroundLogic.getUserContextIdFromCookieStoreId(m.cookieStoreId);
           this.storageArea.set(pageUrl, siteSettings);
         }
       }).catch((e) => {
@@ -326,8 +319,7 @@ window.assignManager = {
         options.url,
         tab.index + 1,
         tab.active,
-        openTabId,
+        openTabId
-        tab.groupId
       );
     } else {
       this.reloadPageInContainer(
@@ -337,8 +329,7 @@ window.assignManager = {
         tab.index + 1,
         tab.active,
         siteSettings.neverAsk,
-        openTabId,
+        openTabId
-        tab.groupId
       );
     }
     this.calculateContextMenu(tab);
@@ -483,7 +474,9 @@ window.assignManager = {
   },
 
   contextualIdentityRemoved(changeInfo) {
-    this.removeMenuItem(changeInfo.contextualIdentity.cookieStoreId);
+    browser.contextMenus.remove(
+      changeInfo.contextualIdentity.cookieStoreId
+    );
   },
 
   async _onClickedHandler(info, tab) {
@@ -578,16 +571,6 @@ window.assignManager = {
     return true;
   },
 
-  async _resetCookiesForSite(hostname, cookieStoreId) {
-    const hostNameTruncated = hostname.replace(/^www\./, ""); // Remove "www." from the hostname
-    await browser.browsingData.removeCookies({
-      cookieStoreId: cookieStoreId,
-      hostnames: [hostNameTruncated] // This does not remove cookies from associated domains. To remove all cookies, we have a container storage removal option.
-    });
-
-    return true;
-  },
-
   async _setOrRemoveAssignment(tabId, pageUrl, userContextId, remove) {
     let actionName;
     // https://github.com/mozilla/testpilot-containers/issues/626
@@ -639,7 +622,7 @@ window.assignManager = {
   },
 
   async _maybeRemoveSiteIsolation(userContextId) {
-    const assignments = await this.storageArea.getAssignedSites(userContextId);
+    const assignments = await this.storageArea.getByContainer(userContextId);
     const hasAssignments = assignments && Object.keys(assignments).length > 0;
     if (hasAssignments) {
       return;
@@ -670,11 +653,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
-    this.removeMenuItem(this.MENU_ASSIGN_ID);
+    browser.contextMenus.remove(this.MENU_ASSIGN_ID);
-    this.removeMenuItem(this.MENU_REMOVE_ID);
+    browser.contextMenus.remove(this.MENU_REMOVE_ID);
-    this.removeMenuItem(this.MENU_SEPARATOR_ID);
+    browser.contextMenus.remove(this.MENU_SEPARATOR_ID);
-    this.removeMenuItem(this.MENU_HIDE_ID);
+    browser.contextMenus.remove(this.MENU_HIDE_ID);
-    this.removeMenuItem(this.MENU_MOVE_ID);
+    browser.contextMenus.remove(this.MENU_MOVE_ID);
   },
 
   async calculateContextMenu(tab) {
@@ -727,15 +710,7 @@ 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.
     //
@@ -754,58 +729,16 @@ 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";
-    this.createTabWrapper(url, cookieStoreId, index, active, openerTabId, groupId);
+    browser.tabs.create({url, cookieStoreId, index, active, openerTabId});
   },
 
-
+  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 this.createTabWrapper(url, cookieStoreId, index, active, openerTabId, groupId);
+      return browser.tabs.create({url, cookieStoreId, index, active, openerTabId});
     } else {
       let confirmUrl = `${loadPage}?url=${this.encodeURLProperty(url)}&cookieStoreId=${cookieStoreId}`;
       let currentCookieStoreId;
@@ -813,14 +746,13 @@ window.assignManager = {
         currentCookieStoreId = backgroundLogic.cookieStoreId(currentUserContextId);
         confirmUrl += `&currentCookieStoreId=${currentCookieStoreId}`;
       }
-      return this.createTabWrapper(
+      return browser.tabs.create({
-        confirmUrl,
+        url: confirmUrl,
-        currentCookieStoreId,
+        cookieStoreId: currentCookieStoreId,
-        index,
-        active,
         openerTabId,
-        groupId
+        index,
-      ).then(() => {
+        active
+      }).then(() => {
         // We don't want to sync this URL ever nor clutter the users history
         browser.history.deleteUrl({url: confirmUrl});
       }).catch((e) => {
@@ -848,19 +780,12 @@ window.assignManager = {
   },
 
   async removeBookmarksMenu() {
-    this.removeMenuItem(this.OPEN_IN_CONTAINER);
+    browser.contextMenus.remove(this.OPEN_IN_CONTAINER);
     const identities = await browser.contextualIdentities.query({});
     for (const identity of identities) {
-      this.removeMenuItem(identity.cookieStoreId);
+      browser.contextMenus.remove(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,39 +35,10 @@ const backgroundLogic = {
     browser.permissions.onRemoved.addListener(permissions => this.resetPermissions(permissions));
 
     // Update Translation in Manifest
-    browser.runtime.onInstalled.addListener((details) => {
+    browser.runtime.onInstalled.addListener(this.updateTranslationInManifest);
-      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.
@@ -104,19 +75,6 @@ const backgroundLogic = {
     return extensionInfo;
   },
 
-  // Remove container data (cookies, localStorage and cache)
-  async deleteContainerDataOnly(userContextId) {
-    await browser.browsingData.removeCookies({
-      cookieStoreId: this.cookieStoreId(userContextId)
-    });
-
-    await browser.browsingData.removeLocalStorage({
-      cookieStoreId: this.cookieStoreId(userContextId)
-    });
-
-    return {done: true, userContextId};
-  },
-
   getUserContextIdFromCookieStoreId(cookieStoreId) {
     if (!cookieStoreId) {
       return false;
@@ -372,13 +330,7 @@ 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.
@@ -391,11 +343,6 @@ 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: [] });
@@ -417,25 +364,15 @@ const backgroundLogic = {
     const sortMap = new Map([...map.entries()].sort((a, b) => a[1].order > b[1].order));
 
     // Let's move tabs.
-    for (const { tabs } of sortMap.values()) {
+    sortMap.forEach(obj => {
-      for (const tab of tabs) {
+      for (const tab of obj.tabs) {
         ++pos;
         browser.tabs.move(tab.id, {
           windowId: windowObj.id,
-          index: pinnedTabs ? pos : -1
+          index: pos
         });
-        // 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

@@ -23,9 +23,6 @@ const messageHandler = {
       case "deleteContainer":
         response = backgroundLogic.deleteContainer(m.message.userContextId);
         break;
-      case "deleteContainerDataOnly":
-        response = backgroundLogic.deleteContainerDataOnly(m.message.userContextId);
-        break;
       case "createOrUpdateContainer":
         response = backgroundLogic.createOrUpdateContainer(m.message);
         break;
@@ -48,9 +45,6 @@ const messageHandler = {
         // m.url is the assignment to be removed/added
         response = assignManager._setOrRemoveAssignment(m.tabId, m.url, m.userContextId, m.value);
         break;
-      case "resetCookiesForSite":
-        response = assignManager._resetCookiesForSite(m.pageUrl, m.cookieStoreId);
-        break;
       case "sortTabs":
         backgroundLogic.sortTabs();
         break;
@@ -91,21 +85,17 @@ const messageHandler = {
           m.newUserContextId,
           m.tabIndex,
           m.active,
-          true,
+          true
-          null,
-          m.groupId
         );
         break;
       case "assignAndReloadInContainer":
         tab = await assignManager.reloadPageInContainer(
-          m.url,
+          m.url, 
           m.currentUserContextId,
-          m.newUserContextId,
+          m.newUserContextId, 
-          m.tabIndex,
+          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
@@ -230,9 +220,7 @@ const messageHandler = {
           // if it's a container tab wait for it to complete and
           // unhide other tabs from this container
           if (tab.cookieStoreId.startsWith("firefox-container")) {
-            browser.tabs.onUpdated.addListener(this.tabUpdateHandler, {
+            browser.tabs.onUpdated.addListener(this.tabUpdateHandler);
-              properties: ["status"]
-            });
           }
         }
       }

src/js/confirm-page.js

@@ -7,16 +7,14 @@ async function load() {
   redirectUrlElement.textContent = redirectUrl;
   appendFavicon(redirectUrl, redirectUrlElement);
 
-  // Option for staying on the previous container
   document.getElementById("deny").addEventListener("click", (e) => {
     e.preventDefault();
-    denySubmit(redirectUrl, currentCookieStoreId);
+    denySubmit(redirectUrl);
   });
 
-  // Option for going to the default container (no container)
   document.getElementById("deny-no-container").addEventListener("click", (e) => {
     e.preventDefault();
-    denySubmit(redirectUrl, currentCookieStoreId);
+    denySubmit(redirectUrl);
   });
 
   const container = await browser.contextualIdentities.get(cookieStoreId);
@@ -29,7 +27,6 @@ async function load() {
     el.textContent = browser.i18n.getMessage(elementData.messageId, containerName);
   });
 
-  // Option for going to newly selected container
   document.getElementById("confirm").addEventListener("click", (e) => {
     e.preventDefault();
     confirmSubmit(redirectUrl, cookieStoreId);
@@ -62,42 +59,24 @@ function confirmSubmit(redirectUrl, cookieStoreId) {
     browser.runtime.sendMessage({
       method: "neverAsk",
       neverAsk: true,
-      cookieStoreId: cookieStoreId,
       pageUrl: redirectUrl
     });
   }
   openInContainer(redirectUrl, cookieStoreId);
 }
 
-/**
+function getCurrentTab() {
- * @returns {Promise<Tab>}
+  return browser.tabs.query({
- */
-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) {
+async function denySubmit(redirectUrl) {
   const tab = await getCurrentTab();
-  const currentContainer = currentCookieStoreId ? await browser.contextualIdentities.get(currentCookieStoreId) : null;
-  const neverAsk = document.getElementById("never-ask").checked;
-
-  if (neverAsk) {
-    await browser.runtime.sendMessage({
-      method: "neverAsk",
-      neverAsk: true,
-      cookieStoreId: currentCookieStoreId,
-      pageUrl: redirectUrl,
-      defaultContainer: !currentContainer
-    });
-  }
-
   await browser.runtime.sendMessage({
     method: "exemptContainerAssignment",
-    tabId: tab.id,
+    tabId: tab[0].id,
     pageUrl: redirectUrl
   });
   document.location.replace(redirectUrl);
@@ -107,15 +86,12 @@ load();
 
 async function openInContainer(redirectUrl, cookieStoreId) {
   const tab = await getCurrentTab();
-  const reopenedTab = await browser.tabs.create({
+  await browser.tabs.create({
-    index: tab.index + 1,
+    index: tab[0].index + 1,
     cookieStoreId,
     url: redirectUrl
   });
-  if (tab.groupId >= 0) {
+  if (tab.length > 0) {
-    // If the original tab was in a tab group, make sure that the reopened tab
+    browser.tabs.remove(tab[0].id);
-    // stays in the same tab group.
-    await browser.tabs.group({ groupId: tab.groupId, tabIds: reopenedTab.id });
   }
-  await browser.tabs.remove(tab.id);
 }

src/js/popup.js

@@ -32,7 +32,6 @@ const P_CONTAINER_EDIT = "containerEdit";
 const P_CONTAINER_DELETE = "containerDelete";
 const P_CONTAINERS_ACHIEVEMENT = "containersAchievement";
 const P_CONTAINER_ASSIGNMENTS = "containerAssignments";
-const P_CLEAR_CONTAINER_STORAGE = "clearContainerStorage";
 
 const P_MOZILLA_VPN_SERVER_LIST = "moz-vpn-server-list";
 const P_ADVANCED_PROXY_SETTINGS = "advanced-proxy-settings-panel";
@@ -123,19 +122,6 @@ const Logic = {
 
   },
 
-  notify(i18nOpts) {
-    const notificationCards = document.querySelectorAll(".popup-notification-card");
-    const text = browser.i18n.getMessage(i18nOpts.messageId, i18nOpts.placeholders);
-    notificationCards.forEach(notificationCard => {
-      notificationCard.textContent = text;
-      notificationCard.classList.add("is-shown");
-    
-      setTimeout(() => {
-        notificationCard.classList.remove("is-shown");
-      }, 2000);
-    });
-  },
-
   async showAchievementOrContainersListPanel() {
     // Do we need to show an achievement panel?
     let showAchievements = false;
@@ -225,11 +211,6 @@ const Logic = {
   async saveContainerOrder(rows) {
     const containerOrder = {};
     rows.forEach((node, index) => {
-      if (typeof browser.contextualIdentities.move === "function") {
-        browser.contextualIdentities.move(
-          node.dataset.containerId, index);
-      }
-
       return containerOrder[node.dataset.containerId] = index;
     });
     await browser.storage.local.set({
@@ -767,6 +748,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
       }
     });
 
+    const mozillaVpnToutName = "moz-tout-main-panel";
     const mozillaVpnPermissionsWarningDotName = "moz-permissions-warning-dot";
 
     let { mozillaVpnHiddenToutsList } = await browser.storage.local.get("mozillaVpnHiddenToutsList");
@@ -775,6 +757,31 @@ 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);
@@ -959,7 +966,6 @@ Logic.registerPanel(P_CONTAINER_INFO, {
       Utils.alwaysOpenInContainer(identity);
       window.close();
     });
-
     // Show or not the has-tabs section.
     for (let trHasTabs of document.getElementsByClassName("container-info-has-tabs")) { // eslint-disable-line prefer-const
       trHasTabs.style.display = !identity.hasHiddenTabs && !identity.hasOpenTabs ? "none" : "";
@@ -983,13 +989,6 @@ Logic.registerPanel(P_CONTAINER_INFO, {
     Utils.addEnterHandler(manageContainer, async () => {
       Logic.showPanel(P_CONTAINER_EDIT, identity);
     });
-    const clearContainerStorageButton = document.getElementById("clear-container-storage-info");
-    Utils.addEnterHandler(clearContainerStorageButton, async () => {
-      const granted = await browser.permissions.request({ permissions: ["browsingData"] });
-      if (granted) {
-        Logic.showPanel(P_CLEAR_CONTAINER_STORAGE, identity);
-      }
-    });
     return this.buildOpenTabTable(tabs);
   },
 
@@ -1280,8 +1279,7 @@ Logic.registerPanel(REOPEN_IN_CONTAINER_PICKER, {
         false,
         newUserContextId,
         currentTab.index + 1,
-        currentTab.active,
+        currentTab.active
-        currentTab.groupId
       );
       window.close();
     };
@@ -1311,8 +1309,7 @@ Logic.registerPanel(REOPEN_IN_CONTAINER_PICKER, {
           false,
           0,
           currentTab.index + 1,
-          currentTab.active,
+          currentTab.active
-          currentTab.groupId
         );
         window.close();
       });
@@ -1453,14 +1450,11 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
         /* 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}/favicon.ico`;
-        const resetSiteCookiesInfo = browser.i18n.getMessage("clearSiteCookiesTooltipInfo");
-        const deleteSiteInfo = browser.i18n.getMessage("deleteSiteTooltipInfo");
         trElement.innerHTML = Utils.escaped`
         <td>
           <div class="favicon"></div>
           <span title="${site.hostname}" class="menu-text truncate-text">${site.hostname}</span>
-          <img title="${resetSiteCookiesInfo}" class="reset-button reset-assignment" src="/img/refresh-16.svg" />
+          <img class="trash-button delete-assignment" src="/img/container-delete.svg" />
-          <img title="${deleteSiteInfo}" class="trash-button delete-assignment"  src="/img/container-delete.svg" />
         </td>`;
         trElement.getElementsByClassName("favicon")[0].appendChild(Utils.createFavIconElement(assumedUrl));
         const deleteButton = trElement.querySelector(".trash-button");
@@ -1472,20 +1466,6 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
           delete assignments[siteKey];
           this.showAssignedContainers(assignments);
         });
-        const resetButton = trElement.querySelector(".reset-button");
-        Utils.addEnterHandler(resetButton, async () => {
-          const cookieStoreId = Logic.currentCookieStoreId();
-          const granted = await browser.permissions.request({ permissions: ["browsingData"] });
-          if (!granted) {
-            return;
-          }
-          const result = await Utils.resetCookiesForSite(site.hostname, cookieStoreId);
-          if (result === true) {
-            Logic.notify({messageId: "cookiesClearedSuccess", placeholders: [site.hostname]});
-          } else {
-            Logic.notify({messageId: "cookiesCouldNotBeCleared", placeholders: [site.hostname]});
-          }
-        });
         trElement.classList.add("menu-item", "hover-highlight", "keyboard-nav");
         tableElement.appendChild(trElement);
       });
@@ -2261,47 +2241,6 @@ Logic.registerPanel(P_MOZILLA_VPN_SERVER_LIST, {
   }
 });
 
-// P_CLEAR_CONTAINER_STORAGE: Page for confirming container storage removal.
-// ----------------------------------------------------------------------------
-
-Logic.registerPanel(P_CLEAR_CONTAINER_STORAGE, {
-  panelSelector: "#clear-container-storage-panel",
-
-  // This method is called when the object is registered.
-  initialize() {
-
-    Utils.addEnterHandler(document.querySelector("#clear-container-storage-cancel-link"), () => {
-      const identity = Logic.currentIdentity();
-      Logic.showPanel(P_CONTAINER_INFO, identity, false, false);
-    });
-    Utils.addEnterHandler(document.querySelector("#close-clear-container-storage-panel"), () => {
-      const identity = Logic.currentIdentity();
-      Logic.showPanel(P_CONTAINER_INFO, identity, false, false);
-    });
-    Utils.addEnterHandler(document.querySelector("#clear-container-storage-ok-link"), async () => {
-      const identity = Logic.currentIdentity();
-      const userContextId = Utils.userContextId(identity.cookieStoreId);
-      const result = await browser.runtime.sendMessage({
-        method: "deleteContainerDataOnly",
-        message: { userContextId }
-      });
-      if (result.done === true) {
-        Logic.notify({messageId: "storageWasClearedConfirmation", placeholders: [identity.name]});
-      }
-      Logic.showPanel(P_CONTAINER_INFO, identity, false, false);
-    });
-  },
-
-  // This method is called when the panel is shown.
-  prepare() {
-    const identity = Logic.currentIdentity();
-    
-    // Populating the panel: name, icon, and warning message
-    document.getElementById("container-clear-storage-title").textContent = identity.name;
-    return Promise.resolve(null);
-  },
-});
-
 // P_CONTAINER_DELETE: Delete a container.
 // ----------------------------------------------------------------------------
 

src/js/utils.js

@@ -94,9 +94,6 @@ 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) {
@@ -141,32 +138,14 @@ const Utils = {
     });
   },
 
-  resetCookiesForSite(pageUrl, cookieStoreId) {
+  async reloadInContainer(url, currentUserContextId, newUserContextId, tabIndex, active) {
-    return browser.runtime.sendMessage({ 
-      method: "resetCookiesForSite", 
-      pageUrl,
-      cookieStoreId,
-    });
-  },
-
-  /**
-   * @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
     });
   },
 
@@ -180,8 +159,7 @@ 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.3.0",
+  "version": "8.1.3",
   "incognito": "not_allowed",
   "description": "__MSG_extensionDescription__",
   "icons": {
@@ -26,7 +26,6 @@
   ],
   "optional_permissions": [
     "bookmarks",
-    "browsingData",
     "nativeMessaging",
     "proxy"
   ],
@@ -45,6 +44,10 @@
       "description": "__MSG_openContainerPanel__"
     },
     "sort_tabs": {
+      "suggested_key": {
+        "default": "Ctrl+Comma",
+        "mac": "MacCtrl+Comma"
+      },
       "description": "__MSG_sortTabsByContainer__"
     },
     "open_container_0": {

src/popup.html

@@ -107,7 +107,6 @@
   </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>
     <a href="#" class="info-icon" id="info-icon" tabindex="10">
       <img data-i18n-attribute-message-id="info" data-i18n-attribute="alt" alt="" src="/img/info.svg" / >
@@ -192,14 +191,24 @@
         </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>
 
 
   <div class="hide panel menu-panel container-info-panel" id="container-info-panel" tabindex="-1">
-    <span class="popup-notification-card"></span>
     <h3 class="title" id="container-info-title" data-i18n-attribute-message-id="personal"></h3>
     <button class="btn-return arrow-left controller keyboard-nav-back" id="close-container-info-panel" tabindex="0"></button>
     <hr>
@@ -236,14 +245,6 @@
             </span>
         </td>
       </tr>
-      <tr class="menu-item hover-highlight keyboard-nav" id="clear-container-storage" tabindex="0">
-        <td>
-          <img class="menu-icon clear-storage-icon" alt="" src="img/container-delete.svg" />
-          <span class="menu-text" id="clear-container-storage-info" data-i18n-message-id="clearContainerStorage"></span>
-            <span class="menu-arrow">
-            </span>
-        </td>
-      </tr>
     </table>
     <hr>
     <div class="sub-header-wrapper">
@@ -266,7 +267,6 @@
 
 
   <div class="panel menu-panel container-picker-panel hide" id="container-picker-panel">
-    <span class="popup-notification-card"></span>
     <h3 class="title" id="picker-title">
       Firefox Multi-Account Containers
     </h3>
@@ -291,7 +291,6 @@
   </div>
 
   <div class="panel menu-panel edit-container-panel hide" id="edit-container-panel">
-    <span class="popup-notification-card"></span>
     <h3 class="title" id="container-edit-title" data-i18n-message-id="default"></h3>
     <button class="btn-return arrow-left controller" id="close-container-edit-panel"></button>
     <hr>
@@ -382,7 +381,6 @@
   </div>
 
   <div class="panel menu-panel edit-container-assignments hide" id="edit-container-assignments">
-    <span class="popup-notification-card"></span>
     <h3 class="title" id="edit-assignments-title" data-i18n-message-id="default"></h3>
     <button class="btn-return arrow-left controller" id="close-container-assignment-panel"></button>
     <hr>
@@ -412,23 +410,7 @@
     </div>
     <div class="panel-footer">
       <a href="#" class="button expanded secondary footer-button cancel-button" data-i18n-message-id="cancel" id="delete-container-cancel-link"></a>
-      <a href="#" class="button expanded confirmation-destructive-ok-btn footer-button alert-text" data-i18n-message-id="ok" id="delete-container-ok-link"></a>
+      <a href="#" class="button expanded primary footer-button" data-i18n-message-id="ok" id="delete-container-ok-link"></a>
-    </div>
-  </div>
-
-  <div class="hide panel clear-container-storage-panel" id="clear-container-storage-panel">
-    <h3 class="title" id="container-clear-storage-title" data-i18n-message-id="default">
-    </h3>
-
-    <button class="btn-return arrow-left controller" id="close-clear-container-storage-panel"></button>
-    <hr>
-    <div class="panel-content clear-container-storage-confirm">
-      <h4 class="clear-container-storage-confirm-title" data-i18n-message-id="clearContainerStoragePanelTitle"></h4>
-      <p class="clear-container-storage-warning" data-i18n-message-id="clearContainerStorageConfirmation"></p>
-    </div>
-    <div class="panel-footer">
-      <a href="#" class="button expanded secondary footer-button cancel-button" data-i18n-message-id="cancel" id="clear-container-storage-cancel-link"></a>
-      <a href="#" class="button expanded confirmation-destructive-ok-btn footer-button alert-text" data-i18n-message-id="ok" id="clear-container-storage-ok-link"></a>
     </div>
   </div>
 

test/common.js

@@ -32,10 +32,6 @@ 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();
       }
     }
   };