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

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

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "testpilot-containers",
-  "version": "8.3.5",
+  "version": "8.3.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "testpilot-containers",
-      "version": "8.3.5",
+      "version": "8.3.7",
       "license": "MPL-2.0",
       "devDependencies": {
         "@eslint/js": "^9.36.0",

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.5",
+  "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"
@@ -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

@@ -26,18 +26,12 @@
   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 {
+  color-scheme: light;
+
   --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");
@@ -121,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");
@@ -246,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);
 }
 
@@ -1659,20 +1657,8 @@ 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);
@@ -2429,52 +2415,3 @@ 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/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"/>
+  <style>
-  <rect x="1" y="9" width="6" height="6" rx="1"/>
+    :root { color-scheme: light dark; }
-  <rect x="9" y="9" width="6" height="6" rx="1"/>
+  </style>
-  <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"/>
+  <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 key = MAC_CONSTANTS.OPEN_CONTAINER_PREFIX + i;
-        const cookieStoreId = identityState.keyboardShortcut[key];
+        const reopenKey = MAC_CONSTANTS.REOPEN_IN_CONTAINER_PREFIX + i;
         if (command === key) {
-          if (cookieStoreId === "none") return;
+          const cookieStoreId = identityState.keyboardShortcut[key];
-          browser.tabs.create({cookieStoreId});
+          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;
         }
       }
     });
@@ -69,6 +82,28 @@ 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
@@ -84,11 +119,15 @@ const backgroundLogic = {
   },
 
   updateTranslationInManifest() {
-    for (let index = 0; index < 10; index++) {
+    for (let index = 0; index < MAC_CONSTANTS.NUMBER_OF_KEYBOARD_SHORTCUTS; index++) {
-      const ajustedIndex = index + 1; // We want to start from 1 instead of 0 in the UI.
+      const adjustedIndex = index + 1; // We want to start from 1 instead of 0 in the UI.
       browser.commands.update({
-        name: `open_container_${index}`,
+        name: `${MAC_CONSTANTS.OPEN_CONTAINER_PREFIX}${index}`,
-        description: browser.i18n.getMessage("containerShortcut", `${ajustedIndex}`)
+        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++) {
+      for (let i=0; i < MAC_CONSTANTS.NUMBER_OF_KEYBOARD_SHORTCUTS; i++) {
-        const key = "open_container_" + i;
+        const openKey = MAC_CONSTANTS.OPEN_CONTAINER_PREFIX + i;
-        const storageObject = await this.area.get(key);
+        const reopenKey = MAC_CONSTANTS.REOPEN_IN_CONTAINER_PREFIX + i;
-        if (storageObject[key]){
+
-          identityState.keyboardShortcut[key] = storageObject[key];
+        for (const key of [openKey, reopenKey]) {
-          continue;
+          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

@@ -257,8 +257,6 @@ const messageHandler = {
       browser.browserAction.setBadgeBackgroundColor({color: "rgba(0,217,0,255)"});
       browser.browserAction.setBadgeText({text: "NEW"});
     }
-
-    this.maybePrepareSurveyAchievementOnUpdate(countOfContainerTabsOpened);
   },
 
   async onFocusChangedCallback(windowId) {
@@ -276,33 +274,6 @@ const messageHandler = {
       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 scheduled in the past; if so, do not show again.
-    const achievementsStorage = await browser.storage.local.get({ achievements: [] });
-    const achievements = achievementsStorage.achievements;
-    const existing = achievements.find(a => a.name === "surveyFinal");
-    if (existing) {
-      return;
-    }
-
-    // Ensure the achievement exists and is pending.
-    achievements.push({ name: "surveyFinal", 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/popup.js

@@ -31,7 +31,6 @@ 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";
 
@@ -148,11 +147,6 @@ const Logic = {
         return;
       }
 
-      if (achievement.name === "surveyFinal") {
-        this.showPanel(P_SURVEY_ACHIEVEMENT);
-        return;
-      }
-
       // We have found an unknown achievement. Let's mark it as done.
       achievement.done = true;
       saveAchievements = true;
@@ -2389,30 +2383,6 @@ 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("surveyFinal");
-      Logic.showPanel(P_CONTAINERS_LIST);
-    });
-    Utils.addEnterHandler(document.querySelector("#survey-button"), async () => {
-      await Logic.setAchievementDone("surveyFinal");
-      window.close();
-    });
-  },
-
-  // This method is called when the panel is shown.
-  prepare() {
-    return Promise.resolve(null);
-  },
-});
-
 Logic.init();
 
 window.addEventListener("resize", function () {

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.5",
+  "version": "8.3.7",
   "incognito": "not_allowed",
   "description": "__MSG_extensionDescription__",
   "icons": {
@@ -109,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>
@@ -106,19 +107,6 @@
     <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">Help Improve Containers</h3>
-    <p class="survey-blurb">Please take 5 minutes to share your experiences with the add-on! This will help us effectively prioritize improvements.</p>
-    <p class="survey-blurb">Learn more about the research here.</p>
-    <br/><p class="survey-blurb">Thank you for using Multi-Account Containers!</p>
-    <p class="share-ctas survey-back">
-      <a class="cta-link onboarding-button keyboard-nav" href="https://mozilla.qualtrics.com/jfe/form/SV_2aSQMGyfp2DFLtI" id="survey-button" target="_blank">Take 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>

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;
+    });
+  });
+});