Update webExt package

.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

bin/addons-linter.sh

@@ -9,27 +9,9 @@
 
 . $(dirname $0)/commons.sh
 
-TMPDIR=/tmp/MAC_addonsLinter
-
 print Y "Update the submodules..."
 git submodule init || die
 git submodule update --remote --depth 1 src/_locales || die
 
-printn Y "Removing previous execution data... "
-rm -rf $TMPDIR || die
-print G "done."
-
-printn Y "Creating a tmp folder ($TMPDIR)... "
-mkdir $TMPDIR || die
-print G "done."
-
-printn Y "Copying data... "
-cp -r src $TMPDIR || die
-print G "done."
-
-printn Y "Removing the github folder... "
-rm -rf $TMPDIR/src/_locales/.github || die
-print G "done."
-
 print Y "Running the test..."
-npx addons-linter $TMPDIR/src || die
+npx addons-linter ./src || die

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.2.0",
   "author": "Andrea Marchesini, Luke Crouch, Lesley Norton, Kendall Werts, Maxx Crawford, Jonathan Kingston",
   "bugs": {
     "url": "https://github.com/mozilla/multi-account-containers/issues"
@@ -25,7 +25,7 @@
     "stylelint": "^13.5.0",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-order": "^4.0.0",
-    "web-ext": "^7.5.0",
+    "web-ext": "^8.3.0",
     "webextensions-jsdom": "^1.2.1"
   },
   "homepage": "https://github.com/mozilla/multi-account-containers#readme",

src/_locales

@@ -1 +1 @@
-Subproject commit bdaa01291b7367a5e815470fd263ea36c862fe32
+Subproject commit deb50a7871abe4d5d9560abf115fb8a7b5714abf

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 */
@@ -633,8 +635,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 +1053,7 @@ input.proxies {
 
 /* Mozilla VPN Server list */
 
+.moz-vpn-logo,
 .moz-vpn-logotype {
   color: var(--text-color-primary);
   background-image: var(--logoMozillaVpn);

src/js/background/assignManager.js

@@ -326,8 +326,7 @@ window.assignManager = {
         options.url,
         tab.index + 1,
         tab.active,
-        openTabId,
-        tab.groupId
+        openTabId
       );
     } else {
       this.reloadPageInContainer(
@@ -337,8 +336,7 @@ window.assignManager = {
         tab.index + 1,
         tab.active,
         siteSettings.neverAsk,
-        openTabId,
-        tab.groupId
+        openTabId
       );
     }
     this.calculateContextMenu(tab);
@@ -483,7 +481,9 @@ window.assignManager = {
   },
 
   contextualIdentityRemoved(changeInfo) {
-    this.removeMenuItem(changeInfo.contextualIdentity.cookieStoreId);
+    browser.contextMenus.remove(
+      changeInfo.contextualIdentity.cookieStoreId
+    );
   },
 
   async _onClickedHandler(info, tab) {
@@ -670,11 +670,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);
-    this.removeMenuItem(this.MENU_REMOVE_ID);
-    this.removeMenuItem(this.MENU_SEPARATOR_ID);
-    this.removeMenuItem(this.MENU_HIDE_ID);
-    this.removeMenuItem(this.MENU_MOVE_ID);
+    browser.contextMenus.remove(this.MENU_ASSIGN_ID);
+    browser.contextMenus.remove(this.MENU_REMOVE_ID);
+    browser.contextMenus.remove(this.MENU_SEPARATOR_ID);
+    browser.contextMenus.remove(this.MENU_HIDE_ID);
+    browser.contextMenus.remove(this.MENU_MOVE_ID);
   },
 
   async calculateContextMenu(tab) {
@@ -727,15 +727,7 @@ window.assignManager = {
     });
   },
 
-  /**
-   * @param {string} url
-   * @param {number} index
-   * @param {boolean} active
-   * @param {number} [openerTabId]
-   * @param {number} [groupId]
-   * @returns {void}
-   */
-  reloadPageInDefaultContainer(url, index, active, openerTabId, groupId) {
+  reloadPageInDefaultContainer(url, index, active, openerTabId) {
     // To create a new tab in the default container, it is easiest just to omit the
     // cookieStoreId entirely.
     //
@@ -754,58 +746,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});
   },
 
-
-  /**
-   * 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) {
+  reloadPageInContainer(url, currentUserContextId, userContextId, index, active, neverAsk = false, openerTabId = null) {
     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 +763,13 @@ window.assignManager = {
         currentCookieStoreId = backgroundLogic.cookieStoreId(currentUserContextId);
         confirmUrl += `&currentCookieStoreId=${currentCookieStoreId}`;
       }
-      return this.createTabWrapper(
-        confirmUrl,
-        currentCookieStoreId,
-        index,
-        active,
+      return browser.tabs.create({
+        url: confirmUrl,
+        cookieStoreId: currentCookieStoreId,
         openerTabId,
-        groupId
-      ).then(() => {
+        index,
+        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 +797,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) => {
-      this.updateTranslationInManifest();
-      this._undoDefault820SortTabsKeyboardShortcut(details);
-    });
+    browser.runtime.onInstalled.addListener(this.updateTranslationInManifest);
     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.
@@ -372,13 +343,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 +356,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 +377,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()) {
-      for (const tab of tabs) {
+    sortMap.forEach(obj => {
+      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

@@ -91,9 +91,7 @@ const messageHandler = {
           m.newUserContextId,
           m.tabIndex,
           m.active,
-          true,
-          null,
-          m.groupId
+          true
         );
         break;
       case "assignAndReloadInContainer":
@@ -103,9 +101,7 @@ const messageHandler = {
           m.newUserContextId,
           m.tabIndex,
           m.active,
-          true,
-          null,
-          m.groupId
+          true
         );
         // m.tabId is used for where to place the in content message
         // m.url is the assignment to be removed/added

src/js/confirm-page.js

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

src/js/popup.js

@@ -767,6 +767,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 +776,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);
@@ -1280,8 +1306,7 @@ Logic.registerPanel(REOPEN_IN_CONTAINER_PICKER, {
         false,
         newUserContextId,
         currentTab.index + 1,
-        currentTab.active,
-        currentTab.groupId
+        currentTab.active
       );
       window.close();
     };
@@ -1311,8 +1336,7 @@ Logic.registerPanel(REOPEN_IN_CONTAINER_PICKER, {
           false,
           0,
           currentTab.index + 1,
-          currentTab.active,
-          currentTab.groupId
+          currentTab.active
         );
         window.close();
       });

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) {
@@ -149,24 +146,14 @@ const Utils = {
     });
   },
 
-  /**
-   * @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) {
+  async reloadInContainer(url, currentUserContextId, newUserContextId, tabIndex, active) {
     return await browser.runtime.sendMessage({
       method: "reloadInContainer",
       url,
       currentUserContextId,
       newUserContextId,
       tabIndex,
-      active,
-      groupId
+      active
     });
   },
 
@@ -180,8 +167,7 @@ const Utils = {
         currentUserContextId: false,
         newUserContextId: assignedUserContextId,
         tabIndex: currentTab.index +1,
-        active: currentTab.active,
-        groupId: currentTab.groupId
+        active:currentTab.active
       });
     }
     await Utils.setOrRemoveAssignment(

src/manifest.json

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

src/popup.html

@@ -192,7 +192,18 @@
         </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/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();
       }
     }
   };