Merge pull request #2873 from emilio/always-open-color

popup: Exclude "Always open" from menu colors hack.

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.2",
+  "version": "8.3.7",
   "author": "Andrea Marchesini, Luke Crouch, Lesley Norton, Kendall Werts, Maxx Crawford, Jonathan Kingston",
   "bugs": {
     "url": "https://github.com/mozilla/multi-account-containers/issues"
@@ -26,7 +26,7 @@
     "stylelint": "^13.5.0",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-order": "^4.0.0",
-    "web-ext": "^7.5.0",
+    "web-ext": "^8.10.0",
     "webextensions-jsdom": "^1.2.1"
   },
   "homepage": "https://github.com/mozilla/multi-account-containers#readme",
@@ -44,7 +44,7 @@
     "lint:css": "stylelint src/css/*.css",
     "lint:html": "htmllint *.html",
     "lint:js": "eslint .",
-    "package": "rm -rf src/web-ext-artifacts && npm run build && mv src/web-ext-artifacts/firefox_multi-account_containers-*.zip addon.xpi",
+    "package": "rm -rf web-ext-artifacts && npm run build && mv web-ext-artifacts/firefox_multi-account_containers-*.zip addon.xpi",
     "restore-locales-github": "cd src/_locales && git restore .github/",
     "remove-locales-github": "rm -rf src/_locales/.github",
     "test": "npm run lint && npm run coverage",

src/css/popup.css

@@ -28,6 +28,8 @@
 
 [data-theme="light"],
 :root {
+  color-scheme: light;
+
   --fontInter: "Inter", sans-serif;
   --fontInterMedium: "Inter-Medium", sans-serif;
   --fontMetropolis: "Metropolis", sans-serif;
@@ -113,6 +115,8 @@
 }
 
 [data-theme="dark"] {
+  color-scheme: dark;
+
   --iconCloseX: url("/img/close-light.svg");
   --iconGear: url("/img/gear-icon-light.svg");
   --iconArrowRight: url("/img/arrow-icon-right-light.svg");
@@ -238,7 +242,9 @@ body {
 [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 {
+[data-theme="dark"] #container-info-table .menu-icon,
+[data-theme="dark"] #always-open .menu-icon,
+[data-theme="dark"] #always-open-in .menu-icon {
   filter: invert(0);
 }
 

src/img/container-openin-16.svg

@@ -2,8 +2,11 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <svg data-name="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-  <rect x="1" y="1" width="6" height="6" rx="1"/>
-  <rect x="1" y="9" width="6" height="6" rx="1"/>
-  <rect x="9" y="9" width="6" height="6" rx="1"/>
-  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M14.92 1.62a1 1 0 0 0-0.54-0.54A1 1 0 0 0 14 1h-4a1 1 0 0 0 0 2h1.59l-2.3 2.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0L13 4.41V6a1 1 0 0 0 2 0V2a1 1 0 0 0-0.08-0.38z"/>
+  <style>
+    :root { color-scheme: light dark; }
+  </style>
+  <rect fill="context-fill light-dark(black, white)" fill-opacity="context-fill-opacity" x="1" y="1" width="6" height="6" rx="1"/>
+  <rect fill="context-fill light-dark(black, white)" fill-opacity="context-fill-opacity" x="1" y="9" width="6" height="6" rx="1"/>
+  <rect fill="context-fill light-dark(black, white)" fill-opacity="context-fill-opacity" x="9" y="9" width="6" height="6" rx="1"/>
+  <path fill="context-fill light-dark(black, white)" fill-opacity="context-fill-opacity" d="M14.92 1.62a1 1 0 0 0-0.54-0.54A1 1 0 0 0 14 1h-4a1 1 0 0 0 0 2h1.59l-2.3 2.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0L13 4.41V6a1 1 0 0 0 2 0V2a1 1 0 0 0-0.08-0.38z"/>
 </svg>

src/js/background/backgroundLogic.js

@@ -2,6 +2,8 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+/* global MAC_CONSTANTS */
+
 const DEFAULT_TAB = "about:newtab";
 
 const backgroundLogic = {
@@ -11,22 +13,33 @@ const backgroundLogic = {
     "about:home",
     "about:blank"
   ]),
-  NUMBER_OF_KEYBOARD_SHORTCUTS: 10,
+  NUMBER_OF_KEYBOARD_SHORTCUTS: MAC_CONSTANTS.NUMBER_OF_KEYBOARD_SHORTCUTS,
   unhideQueue: [],
-  init() {
 
-    browser.commands.onCommand.addListener(function (command) {
+  init() {
+    browser.commands.onCommand.addListener(async function (command) {
       if (command === "sort_tabs") {
         backgroundLogic.sortTabs();
         return;
       }
 
       for (let i=0; i < backgroundLogic.NUMBER_OF_KEYBOARD_SHORTCUTS; i++) {
-        const key = "open_container_" + i;
-        const cookieStoreId = identityState.keyboardShortcut[key];
+        const key = MAC_CONSTANTS.OPEN_CONTAINER_PREFIX + i;
+        const reopenKey = MAC_CONSTANTS.REOPEN_IN_CONTAINER_PREFIX + i;
         if (command === key) {
-          if (cookieStoreId === "none") return;
-          browser.tabs.create({cookieStoreId});
+          const cookieStoreId = identityState.keyboardShortcut[key];
+          if (cookieStoreId && cookieStoreId !== "none") {
+            browser.tabs.create({cookieStoreId});
+          }
+          return;
+        }
+
+        if (command === reopenKey) {
+          const cookieStoreId = identityState.keyboardShortcut[reopenKey];
+          if (cookieStoreId && cookieStoreId !== "none") {
+            backgroundLogic.reopenInContainer(cookieStoreId);
+          }
+          return;
         }
       }
     });
@@ -38,6 +51,7 @@ const backgroundLogic = {
     browser.runtime.onInstalled.addListener((details) => {
       this.updateTranslationInManifest();
       this._undoDefault820SortTabsKeyboardShortcut(details);
+      this._removeSurveyAchievement();
     });
     browser.runtime.onStartup.addListener(this.updateTranslationInManifest);
   },
@@ -68,12 +82,52 @@ const backgroundLogic = {
     }
   },
 
+  async reopenInContainer(cookieStoreId) {
+    const currentTab = await browser.tabs.query({ active: true, currentWindow: true });
+
+    if (currentTab.length > 0) {
+      const tab = currentTab[0];
+
+      let url = tab.url;
+      if (this.NEW_TAB_PAGES.has(url) || !this.isPermissibleURL(url)) {
+        url = undefined;
+      }
+
+      browser.tabs.create({
+        url,
+        cookieStoreId,
+        index: tab.index + 1,
+        active: tab.active
+      });
+
+      browser.tabs.remove(tab.id);
+    }
+  },
+
+  /**
+   * We left an achievement entry in storage during a user research study in
+   * version 8.3.1. This method removes that entry to prevent broken logic in
+   * the achievement views.
+   */
+  async _removeSurveyAchievement() {
+    const achievementsStorage = await browser.storage.local.get({ achievements: [] });
+    const achievements = achievementsStorage.achievements;
+    const filtered = achievements.filter(a => a.name !== "survey");
+    if (filtered.length !== achievements.length) {
+      await browser.storage.local.set({achievements: filtered});
+    }
+  },
+
   updateTranslationInManifest() {
-    for (let index = 0; index < 10; index++) {
-      const ajustedIndex = index + 1; // We want to start from 1 instead of 0 in the UI.
+    for (let index = 0; index < MAC_CONSTANTS.NUMBER_OF_KEYBOARD_SHORTCUTS; index++) {
+      const adjustedIndex = index + 1; // We want to start from 1 instead of 0 in the UI.
       browser.commands.update({
-        name: `open_container_${index}`,
-        description: browser.i18n.getMessage("containerShortcut", `${ajustedIndex}`)
+        name: `${MAC_CONSTANTS.OPEN_CONTAINER_PREFIX}${index}`,
+        description: browser.i18n.getMessage("containerShortcut", `${adjustedIndex}`)
+      });
+      browser.commands.update({
+        name: `${MAC_CONSTANTS.REOPEN_IN_CONTAINER_PREFIX}${index}`,
+        description: browser.i18n.getMessage("reopenInContainerShortcut", `${adjustedIndex}`)
       });
     }
   },

src/js/background/constants.js

@@ -0,0 +1,10 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// Shared constants for background scripts
+window.MAC_CONSTANTS = {
+  OPEN_CONTAINER_PREFIX: "open_container_",
+  REOPEN_IN_CONTAINER_PREFIX: "reopen_in_container_",
+  NUMBER_OF_KEYBOARD_SHORTCUTS: 10,
+};

src/js/background/identityState.js

@@ -1,3 +1,8 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* global MAC_CONSTANTS */
 window.identityState = {
   keyboardShortcut: {},
   storageArea: {
@@ -50,18 +55,22 @@ window.identityState = {
 
     async loadKeyboardShortcuts () {
       const identities = await browser.contextualIdentities.query({});
-      for (let i=0; i < backgroundLogic.NUMBER_OF_KEYBOARD_SHORTCUTS; i++) {
-        const key = "open_container_" + i;
-        const storageObject = await this.area.get(key);
-        if (storageObject[key]){
-          identityState.keyboardShortcut[key] = storageObject[key];
-          continue;
+      for (let i=0; i < MAC_CONSTANTS.NUMBER_OF_KEYBOARD_SHORTCUTS; i++) {
+        const openKey = MAC_CONSTANTS.OPEN_CONTAINER_PREFIX + i;
+        const reopenKey = MAC_CONSTANTS.REOPEN_IN_CONTAINER_PREFIX + i;
+
+        for (const key of [openKey, reopenKey]) {
+          const storageObject = await this.area.get(key);
+
+          if (storageObject[key]){
+            identityState.keyboardShortcut[key] = storageObject[key];
+          } else if (identities[i]) {
+            identityState.keyboardShortcut[key] = identities[i].cookieStoreId;
+          } else {
+            identityState.keyboardShortcut[key] = "none";
+          }
         }
-        if (identities[i]) {
-          identityState.keyboardShortcut[key] = identities[i].cookieStoreId;
-          continue;
-        }
-        identityState.keyboardShortcut[key] = "none";
+
       }
       return identityState.keyboardShortcut;
     },

src/js/background/index.html

@@ -15,6 +15,7 @@
 -->
     <script type="text/javascript" src="../utils.js"></script>
     <script type="text/javascript" src="../proxified-containers.js"></script>
+    <script type="text/javascript" src="constants.js"></script>
     <script type="text/javascript" src="backgroundLogic.js"></script>
     <script type="text/javascript" src="mozillaVpnBackground.js"></script>
     <script type="text/javascript" src="assignManager.js"></script>

src/js/background/messageHandler.js

@@ -273,7 +273,7 @@ const messageHandler = {
     }).catch((e) => {
       throw e;
     });
-  }
+  },
 };
 
 // Lets do this last as theme manager did a check before connecting before

src/js/popup.js

@@ -137,19 +137,26 @@ const Logic = {
   },
 
   async showAchievementOrContainersListPanel() {
-    // Do we need to show an achievement panel?
-    let showAchievements = false;
     const achievementsStorage = await browser.storage.local.get({ achievements: [] });
-    for (const achievement of achievementsStorage.achievements) {
-      if (!achievement.done) {
-        showAchievements = true;
+    const achievements = achievementsStorage.achievements;
+
+    let saveAchievements = false;
+    for (const achievement of achievements.filter(a => !a.done)) {
+      if (achievement.name === "manyContainersOpened") {
+        this.showPanel(P_CONTAINERS_ACHIEVEMENT);
+        return;
       }
+
+      // We have found an unknown achievement. Let's mark it as done.
+      achievement.done = true;
+      saveAchievements = true;
     }
-    if (showAchievements) {
-      this.showPanel(P_CONTAINERS_ACHIEVEMENT);
-    } else {
-      this.showPanel(P_CONTAINERS_LIST);
+
+    if (saveAchievements) {
+      browser.storage.local.set({ achievements });
     }
+
+    this.showPanel(P_CONTAINERS_LIST);
   },
 
   // In case the user wants to click multiple actions,

src/js/proxified-containers.js

@@ -65,6 +65,10 @@ proxifiedContainers = {
   async delete(cookieStoreId) {
     // Assumes proxy is a properly formatted object
     const proxifiedContainersStore = await proxifiedContainers.retrieveAll();
+    if(!proxifiedContainersStore) {
+      return null;
+    }
+
     const index = proxifiedContainersStore.findIndex(i => i.cookieStoreId === cookieStoreId);
     if (index !== -1) {
       proxifiedContainersStore.splice(index, 1);

src/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Firefox Multi-Account Containers",
-  "version": "8.3.2",
+  "version": "8.3.7",
   "incognito": "not_allowed",
   "description": "__MSG_extensionDescription__",
   "icons": {
@@ -33,7 +33,10 @@
   "browser_specific_settings": {
     "gecko": {
       "id": "@testpilot-containers",
-      "strict_min_version": "91.1.0"
+      "strict_min_version": "91.1.0",
+      "data_collection_permissions": {
+        "required": ["none"]
+      }
     }
   },
   "commands": {
@@ -106,6 +109,36 @@
         "default": "Ctrl+Shift+0"
       },
       "description": "__MSG_containerShortcut__"
+    },
+    "reopen_in_container_0": {
+      "description": "__MSG_reopenInContainerShortcut__"
+    },
+    "reopen_in_container_1": {
+      "description": "__MSG_reopenInContainerShortcut__"
+    },
+    "reopen_in_container_2": {
+      "description": "__MSG_reopenInContainerShortcut__"
+    },
+    "reopen_in_container_3": {
+      "description": "__MSG_reopenInContainerShortcut__"
+    },
+    "reopen_in_container_4": {
+      "description": "__MSG_reopenInContainerShortcut__"
+    },
+    "reopen_in_container_5": {
+      "description": "__MSG_reopenInContainerShortcut__"
+    },
+    "reopen_in_container_6": {
+      "description": "__MSG_reopenInContainerShortcut__"
+    },
+    "reopen_in_container_7": {
+      "description": "__MSG_reopenInContainerShortcut__"
+    },
+    "reopen_in_container_8": {
+      "description": "__MSG_reopenInContainerShortcut__"
+    },
+    "reopen_in_container_9": {
+      "description": "__MSG_reopenInContainerShortcut__"
     }
   },
   "browser_action": {

src/popup.html

@@ -3,6 +3,7 @@
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   <title>Firefox Multi-Account Containers</title>
   <script type="text/javascript" src="./js/i18n.js"></script>
+  <meta name="color-scheme" content="light dark">
   <link rel="stylesheet" href="./css/popup.css">
 </head>
 <body>

test/features/reopen-shortcuts.test.js

@@ -0,0 +1,44 @@
+const {initializeWithTab} = require("../common");
+
+describe("Reopen Shortcuts Feature", function () {
+  beforeEach(async function () {
+    // Initialize with a tab in the default container
+    this.webExt = await initializeWithTab({
+      cookieStoreId: "firefox-default",
+      url: "https://example.com"
+    });
+  });
+
+  afterEach(function () {
+    this.webExt.destroy();
+  });
+
+  describe("when using keyboard shortcut to reopen in container", function () {
+    beforeEach(async function () {
+      // Simulate the keyboard shortcut command
+      await this.webExt.background.browser.commands.onCommand.addListener.firstCall.args[0]("reopen_in_container_0");
+    });
+
+    it("should open the page in the assigned container and close the original tab", async function () {
+      this.webExt.background.browser.tabs.create.should.have.been.calledWithMatch({
+        url: "https://example.com",
+        cookieStoreId: "firefox-container-1",
+        index: 1,
+        active: true
+      });
+
+      this.webExt.background.browser.tabs.remove.should.have.been.called;
+    });
+  });
+
+  describe("when container is set to 'none'", function () {
+    beforeEach(async function () {
+      await this.webExt.background.browser.commands.onCommand.addListener.firstCall.args[0]("reopen_in_container_9");
+    });
+
+    it("should not reopen the tab", function () {
+      this.webExt.background.browser.tabs.create.should.not.have.been.called;
+      this.webExt.background.browser.tabs.remove.should.not.have.been.called;
+    });
+  });
+});