Merge pull request #2803 from mozilla/survey

Join our Multi-Account Containers Research Study! 🚀

.eslintignore

@@ -1,2 +0,0 @@
-lib/testpilot/*.js
-coverage

.eslintrc.js

@@ -1,69 +0,0 @@
-module.exports = {
-  "parserOptions": {
-    "ecmaVersion": 2018
-  },
-  "env": {
-    "browser": true,
-    "es6": true,
-    "node": true,
-    "webextensions": true
-  },
-  "globals": {
-    "Utils": true,
-    "CustomizableUI": true,
-    "CustomizableWidgets": true,
-    "SessionStore": true,
-    "Services": true,
-    "Components": true,
-    "XPCOMUtils": true,
-    "OS": true,
-    "ADDON_UNINSTALL": true,
-    "ADDON_DISABLE": true,
-    "CONTAINER_ORDER_STORAGE_KEY": true,
-    "proxifiedContainers": true,
-    "MozillaVPN": true,
-    "MozillaVPN_Background": true
-  },
-  "plugins": [
-    "promise",
-    "no-unsanitized"
-  ],
-  "extends": [
-    "eslint:recommended"
-  ],
-  "root": true,
-  "rules": {
-    "promise/always-return": "off",
-    "promise/avoid-new": "off",
-    "promise/catch-or-return": "error",
-    "promise/no-callback-in-promise": "warn",
-    "promise/no-native": "off",
-    "promise/no-nesting": "warn",
-    "promise/no-promise-in-callback": "warn",
-    "promise/no-return-wrap": "error",
-    "promise/param-names": "error",
-
-    "no-unsanitized/method": [
-      "error"
-    ],
-    "no-unsanitized/property": [
-      "error",
-      {
-        "escape": {
-          "taggedTemplates": ["Utils.escaped"]
-        }
-      }
-    ],
-
-    "eqeqeq": "error",
-    "indent": ["error", 2],
-    "linebreak-style": ["error", "unix"],
-    "no-throw-literal": "error",
-    "no-warning-comments": "warn",
-    "no-var": "error",
-    "prefer-const": "error",
-    "quotes": ["error", "double"],
-    "radix": "error",
-    "semi": ["error", "always"]
-  }
-};

bin/addons-linter.sh

@@ -1,4 +1,4 @@
-#!/bin/env bash
+#!/usr/bin/env bash
 
 # 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

bin/build-addon.sh

@@ -1,4 +1,4 @@
-#!/bin/env bash
+#!/usr/bin/env bash
 
 # 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

bin/commons.sh

@@ -1,4 +1,4 @@
-#!/bin/env bash
+#!/usr/bin/env bash
 
 # 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

eslint.config.js

@@ -0,0 +1,102 @@
+const {
+  defineConfig,
+  globalIgnores,
+} = require("eslint/config");
+
+const globals = require("globals");
+const promise = require("eslint-plugin-promise");
+const noUnsanitized = require("eslint-plugin-no-unsanitized");
+const js = require("@eslint/js");
+
+module.exports = defineConfig([{
+  languageOptions: {
+    "ecmaVersion": 2021,
+    parserOptions: {},
+
+    globals: {
+      ...globals.browser,
+      ...globals.node,
+      ...globals.webextensions,
+      "Utils": true,
+      "CustomizableUI": true,
+      "CustomizableWidgets": true,
+      "SessionStore": true,
+      "Services": true,
+      "Components": true,
+      "XPCOMUtils": true,
+      "OS": true,
+      "ADDON_UNINSTALL": true,
+      "ADDON_DISABLE": true,
+      "CONTAINER_ORDER_STORAGE_KEY": true,
+      "proxifiedContainers": true,
+      "MozillaVPN": true,
+      "MozillaVPN_Background": true,
+    },
+  },
+
+  plugins: {
+    js,
+    promise,
+    "no-unsanitized": noUnsanitized,
+  },
+
+  extends: ["js/recommended"],
+
+  "rules": {
+    "promise/always-return": "off",
+    "promise/avoid-new": "off",
+    "promise/catch-or-return": "error",
+    "promise/no-callback-in-promise": "warn",
+    "promise/no-native": "off",
+    "promise/no-nesting": "warn",
+    "promise/no-promise-in-callback": "warn",
+    "promise/no-return-wrap": "error",
+    "promise/param-names": "error",
+    "no-unsanitized/method": ["error"],
+
+    "no-unsanitized/property": ["error", {
+      "escape": {
+        "taggedTemplates": ["Utils.escaped"],
+      },
+    }],
+
+    "eqeqeq": "error",
+    "indent": ["error", 2],
+    "linebreak-style": ["error", "unix"],
+    "no-throw-literal": "error",
+    "no-warning-comments": "warn",
+    "no-var": "error",
+    "prefer-const": "error",
+    "quotes": ["error", "double"],
+    "radix": "error",
+    "semi": ["error", "always"],
+  },
+},
+
+{
+  files: ["test/**/*.js"],
+  languageOptions: {
+    globals: {
+      ...globals.mocha,
+    },
+  },
+  "rules": {
+    "no-restricted-globals": ["error", "browser"],
+  },
+},
+
+{
+  files: ["src/js/**/*.js"],
+  languageOptions: {
+    globals: {
+      "assignManager": true,
+      "badge": true,
+      "backgroundLogic": true,
+      "identityState": true,
+      "messageHandler": true,
+      "sync": true,
+    },
+  },
+},
+
+globalIgnores(["lib/testpilot/*.js", "**/coverage"])]);

package.json

@@ -2,19 +2,20 @@
   "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.3.1",
   "author": "Andrea Marchesini, Luke Crouch, Lesley Norton, Kendall Werts, Maxx Crawford, Jonathan Kingston",
   "bugs": {
     "url": "https://github.com/mozilla/multi-account-containers/issues"
   },
-  "dependencies": {},
   "devDependencies": {
+    "@eslint/js": "^9.36.0",
     "addons-linter": "^5.28.0",
     "ajv": "^6.6.3",
     "chai": "^4.2.0",
-    "eslint": "^7.32.0",
+    "eslint": "^9.36.0",
-    "eslint-plugin-no-unsanitized": "^4.0.0",
+    "eslint-plugin-no-unsanitized": "^4.1.4",
-    "eslint-plugin-promise": "^5.2.0",
+    "eslint-plugin-promise": "^7.2.1",
+    "globals": "^16.4.0",
     "htmllint-cli": "0.0.7",
     "json": ">=10.0.0",
     "mocha": "^10.1.0",

src/css/popup.css

@@ -26,10 +26,18 @@
   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 {
   --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");
@@ -1651,8 +1659,20 @@ 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);
@@ -2409,3 +2429,52 @@ 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/js/.eslintrc.js

@@ -1,14 +0,0 @@
-module.exports = {
-  "extends": [
-    "../../.eslintrc.js"
-  ],
-  "globals": {
-    "assignManager": true,
-    "badge": true,
-    "backgroundLogic": true,
-    "identityState": true,
-    "messageHandler": true,
-    "sync": true,
-    "Utils": true
-  }
-};

src/js/background/assignManager.js

@@ -77,7 +77,6 @@ window.assignManager = {
           this.setExempted(pageUrlorUrlKey, tabId);
         });
       }
-      // eslint-disable-next-line require-atomic-updates
       data.identityMacAddonUUID =
         await identityState.lookupMACaddonUUID(data.userContextId);
       await this.area.set({
@@ -233,7 +232,7 @@ window.assignManager = {
     try {
       container = await browser.contextualIdentities
         .get(backgroundLogic.cookieStoreId(siteSettings.userContextId));
-    } catch (e) {
+    } catch {
       container = false;
     }
 

src/js/background/backgroundLogic.js

@@ -239,7 +239,7 @@ const backgroundLogic = {
         containerState.isIsolated = "locked";
       }
       return await identityState.storageArea.set(cookieStoreId, containerState);
-    } catch (error) {
+    } catch {
       // console.error(`No container: ${cookieStoreId}`);
     }
   },

src/js/background/messageHandler.js

@@ -141,7 +141,6 @@ const messageHandler = {
         if (!extensionInfo.permissions.includes("contextualIdentities")) {
           throw new Error("Missing contextualIdentities permission");
         }
-        // eslint-disable-next-line require-atomic-updates
         externalExtensionAllowed[sender.id] = true;
       }
       let response;
@@ -258,6 +257,8 @@ const messageHandler = {
       browser.browserAction.setBadgeBackgroundColor({color: "rgba(0,217,0,255)"});
       browser.browserAction.setBadgeText({text: "NEW"});
     }
+
+    this.maybePrepareSurveyAchievementOnUpdate(countOfContainerTabsOpened);
   },
 
   async onFocusChangedCallback(windowId) {
@@ -274,7 +275,33 @@ const messageHandler = {
     }).catch((e) => {
       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/background/mozillaVpnBackground.js

@@ -27,7 +27,7 @@ const MozillaVPN_Background = {
       // invalid proxy connection.
       this.port.onDisconnect.addListener(() => this.increaseIsolationKey());
 
-    } catch(e) {
+    } catch {
       this._installed = false;
       this._connected = false;
     }

src/js/background/sync.js

@@ -338,7 +338,7 @@ async function reconcileIdentities(){
     if (deletedCookieStoreId){
       try{
         await browser.contextualIdentities.remove(deletedCookieStoreId);
-      } catch (error) {
+      } catch {
         // if the identity we are deleting is not there, that's fine.
         console.error("Error deleting contextualIdentity", deletedCookieStoreId);
         continue;
@@ -514,7 +514,7 @@ async function reconcileSiteAssignments() {
         await setAssignmentWithUUID(assignedSite, urlKey);
         continue;
       }
-    } catch (error) {
+    } catch {
       // this is probably old or incorrect site info in Sync
       // skip and move on.
     }
@@ -565,7 +565,6 @@ async function setAssignmentWithUUID(assignedSite, urlKey) {
   const uuid = assignedSite.identityMacAddonUUID;
   const cookieStoreId = await identityState.lookupCookieStoreId(uuid);
   if (cookieStoreId) {
-    // eslint-disable-next-line require-atomic-updates
     assignedSite.userContextId = cookieStoreId
       .replace(/^firefox-container-/, "");
     await assignManager.storageArea.set(

src/js/mozillaVpn.js

@@ -88,7 +88,7 @@ const MozillaVPN = {
         el.classList.remove("display-none");
       });
       this.setStatusIndicatorIcons(mozillaVpnInstalled);
-    } catch (e) {
+    } catch {
       mozVpnLogotypes.forEach(el => {
         el.style.display = "none";
       });
@@ -139,7 +139,7 @@ const MozillaVPN = {
         try {
           const proxy = await proxifiedContainers.retrieve(identity.cookieStoreId);
           proxies[identity.cookieStoreId] = proxy;
-        } catch (e) {
+        } catch {
           proxies[identity.cookieStoreId] = {};
         }
       }

src/js/popup.js

@@ -31,6 +31,7 @@ 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,18 +139,23 @@ 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) {
+    const pending = achievementsStorage.achievements.filter(a => !a.done);
-      if (!achievement.done) {
+
-        showAchievements = true;
+    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);
+        return;
       }
-    }
+
-    if (showAchievements) {
       this.showPanel(P_CONTAINERS_ACHIEVEMENT);
-    } else {
+      return;
-      this.showPanel(P_CONTAINERS_LIST);
     }
+
+    this.showPanel(P_CONTAINERS_LIST);
   },
 
   // In case the user wants to click multiple actions,
@@ -198,7 +204,7 @@ const Logic = {
     // Handle old style rejection with null and also Promise.reject new style
     try {
       return await browser.contextualIdentities.get(cookieStoreId) || defaultContainer;
-    } catch (e) {
+    } catch {
       return defaultContainer;
     }
   },
@@ -425,7 +431,7 @@ const Logic = {
           cookieStoreId: identity.cookieStoreId
         });
         window.close();
-      } catch (e) {
+      } catch {
         window.close();
       }
     }
@@ -762,7 +768,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
           method: "sortTabs"
         });
         window.close();
-      } catch (e) {
+      } catch {
         window.close();
       }
     });
@@ -851,7 +857,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
             cookieStoreId: identity.cookieStoreId
           });
           window.close();
-        } catch (e) {
+        } catch {
           window.close();
         }
       });
@@ -862,7 +868,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
             cookieStoreId: identity.cookieStoreId
           });
           window.close();
-        } catch (e) {
+        } catch {
           window.close();
         }
       });
@@ -912,7 +918,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
       incompatible = await browser.runtime.sendMessage({
         method: "checkIncompatibleAddons"
       });
-    } catch (e) {
+    } catch {
       throw new Error("Could not check for incompatible add-ons.");
     }
 
@@ -947,7 +953,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
           cookieStoreId: identity.cookieStoreId
         });
         window.close();
-      } catch (e) {
+      } catch {
         window.close();
       }
     });
@@ -1009,7 +1015,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
           cookieStoreId: Logic.currentCookieStoreId()
         });
         window.close();
-      } catch (e) {
+      } catch {
         window.close();
       }
     });
@@ -1086,7 +1092,7 @@ Logic.registerPanel(OPEN_NEW_CONTAINER_PICKER, {
           cookieStoreId: identity.cookieStoreId
         });
         window.close();
-      } catch (e) {
+      } catch {
         window.close();
       }
     };
@@ -1848,7 +1854,7 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
       });
       await Logic.refreshIdentities();
       Logic.showPreviousPanel();
-    } catch (e) {
+    } catch {
       Logic.showPreviousPanel();
     }
   },
@@ -2339,7 +2345,7 @@ Logic.registerPanel(P_CONTAINER_DELETE, {
         await Logic.removeIdentity(Utils.userContextId(Logic.currentIdentity().cookieStoreId));
         await Logic.refreshIdentities();
         Logic.showPreviousPanel();
-      } catch (e) {
+      } catch {
         Logic.showPreviousPanel();
       }
     });
@@ -2376,6 +2382,30 @@ 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/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Firefox Multi-Account Containers",
-  "version": "8.3.0",
+  "version": "8.3.1",
   "incognito": "not_allowed",
   "description": "__MSG_extensionDescription__",
   "icons": {

src/popup.html

@@ -106,6 +106,17 @@
     <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/.eslintrc.js

@@ -1,12 +0,0 @@
-module.exports = {
-  env: {
-    "node": true,
-    "mocha": true
-  },
-  "parserOptions": {
-    "ecmaVersion": 2018
-  },
-  "rules": {
-    "no-restricted-globals": ["error", "browser"]
-  }
-};

test/common.js

@@ -1,5 +1,4 @@
 if (!process.listenerCount("unhandledRejection")) {
-  // eslint-disable-next-line no-console
   process.on("unhandledRejection", r => console.log(r));
 }