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

@@ -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,
-#survey-achievement-done-button:focus {
+.half-onboarding-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"/>
-  <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

@@ -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,32 +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 shown in the past; if so, do not show again.
-    const { achievements } = await browser.storage.local.get({ achievements: [] });
-    const existing = achievements.find(a => a.name === "survey");
-    if (existing) {
-      return;
-    }
-
-    // Ensure the achievement exists and is pending.
-    achievements.push({ name: "survey", done: false });
-    browser.storage.local.set({ achievements });
-    browser.browserAction.setBadgeBackgroundColor({color: "rgba(0,217,0,255)"});
-    browser.browserAction.setBadgeText({text: "NEW"});
-  },
 };
 
 // Lets do this last as theme manager did a check before connecting before

src/js/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";
 
@@ -138,21 +137,23 @@ const Logic = {
   },
 
   async showAchievementOrContainersListPanel() {
-    // Do we need to show an achievement panel?
     const achievementsStorage = await browser.storage.local.get({ achievements: [] });
-    const pending = achievementsStorage.achievements.filter(a => !a.done);
+    const achievements = achievementsStorage.achievements;
 
-    if (pending.length) {
-      // Prefer showing the survey view first if present, otherwise fall back
-      // to the existing achievement panel.
-      const survey = pending.find(a => a.name === "survey");
-      if (survey) {
-        this.showPanel(P_SURVEY_ACHIEVEMENT);
+    let saveAchievements = false;
+    for (const achievement of achievements.filter(a => !a.done)) {
+      if (achievement.name === "manyContainersOpened") {
+        this.showPanel(P_CONTAINERS_ACHIEVEMENT);
         return;
       }
 
-      this.showPanel(P_CONTAINERS_ACHIEVEMENT);
-      return;
+      // We have found an unknown achievement. Let's mark it as done.
+      achievement.done = true;
+      saveAchievements = true;
+    }
+
+    if (saveAchievements) {
+      browser.storage.local.set({ achievements });
     }
 
     this.showPanel(P_CONTAINERS_LIST);
@@ -2382,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("survey");
-      Logic.showPanel(P_CONTAINERS_LIST);
-    });
-    Utils.addEnterHandler(document.querySelector("#survey-button"), async () => {
-      await Logic.setAchievementDone("survey");
-      window.close();
-    });
-  },
-
-  // This method is called when the panel is shown.
-  prepare() {
-    return Promise.resolve(null);
-  },
-});
-
 Logic.init();
 
 window.addEventListener("resize", function () {

src/js/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.1",
+  "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>
@@ -106,17 +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">Participate in Paid Research with Firefox</h3>
-    <p class="survey-blurb">We'd love to learn about your experiences with this add-on! Join a 1:1 Zoom interview and receive a $75 Amazon e-gift card or PayPal payment.</p>
-    <p class="survey-blurb">Thank you for helping us improve Firefox.</p>
-    <p class="share-ctas survey-back">
-      <a class="cta-link onboarding-button keyboard-nav" href="https://qsurvey.mozilla.com/s3/Multi-Account-Containers-Research-Interest-Form" id="survey-button" target="_blank">Take Interest Survey</a>
-    </p>
-    <a href="#" id="survey-achievement-done-button">Back</a>
-  </div>
-
   <div class="panel menu-panel container-panel hide" id="container-panel">
     <span class="popup-notification-card"></span>
     <h3 class="title">Firefox Multi-Account Containers</h3>

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