Merge pull request #2488 from mozilla/8.1.2-release

Bump version number for AMO submission

.eslintrc.js

@@ -19,6 +19,7 @@ module.exports = {
     "OS": true,
     "ADDON_UNINSTALL": true,
     "ADDON_DISABLE": true,
+    "CONTAINER_ORDER_STORAGE_KEY": true,
     "proxifiedContainers": true,
     "MozillaVPN": true,
     "MozillaVPN_Background": true

.github/ISSUE_TEMPLATE.md

@@ -1,27 +0,0 @@
-<!--
-  Feel free to ignore this Issue template if you just want to ask or suggest something. If you experience an Issue then please provide all asked information.
-
-  Also please make sure that:
-  - "Firefox will: Never remember history" in the Firefox Preferences/Options under "Privacy & Security > History" is NOT selected
-  - You are NOT using Firefox in a Private Window
-  - You can see a grayed out but ticked Checkbox with the description "Enable Container Tabs" in the Firefox Preferences/Options under "Tabs"
--->
-- Multi-Account Containers Version:
-- Operating System + Version:
-- Firefox Version:
-- Other installed Add-ons + Version + Enabled/Disabled-Status:
-<!-- To be able to copy & paste the full list of your Add-ons navigate to "about:support" and scroll down to "Extensions" -->
-
-
-### Actual behavior
-
-
-### Expected behavior
-
-
-### Steps to reproduce
-1.
-2.
-3.
-
-### Notes

.github/ISSUE_TEMPLATE/bug.yml

@@ -0,0 +1,53 @@
+name: Bug Report
+description: Report a problem in Multi-Account Containers
+labels: [bug]
+body:
+  - type: checkboxes
+    id: before-bug-report
+    attributes:
+      label: Before submitting a bug report
+      options:
+        - label: "I updated to the latest version of Multi-Account Container and tested if I can reproduce the issue"
+          required: true
+        - label: "I searched for existing reports to see if it hasn\'t already been reported"
+          required: true
+  - type: textarea
+    id: step_to_reproduce
+    attributes:
+      label: "Step to reproduce"
+      description: "Provide a list of steps you did to trigger this bug"
+      placeholder: |
+        1. I opened ...
+        2. I clicked on ...
+        3. ...
+    validations:
+      required: true
+  - type: textarea
+    id: actual_behavior
+    attributes:
+      label: "Actual behavior"
+      description: "Provide a description of what is currently happening"
+    validations:
+      required: true
+  - type: textarea
+    id: expected_behavior
+    attributes:
+      label: "Expected behavior"
+      description: "Provide a description of what should happen"
+    validations:
+      required: true
+  - type: textarea
+    id: additional_informations
+    attributes:
+      label: "Additional informations"
+      description: "Provide any other information revelant to this issue"
+    validations:
+      required: false
+  - type: textarea
+    id: about_support
+    attributes:
+      label: "Provide a copy of Troubleshooting Information page (optional)"
+      description: "To get a copy of the Troubleshooting Information page, type *about:support* in the address bar and click on the *Copy text to clipboard* button."
+      render: "plain text"
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,17 @@
+blank_issues_enabled: false
+contact_links:
+  - name: "Explore our help articles"
+    url: "https://support.mozilla.org/kb/containers"
+    about: "Dig into the knowledge base, tips and tricks, troubleshooting, and so much more."
+  - name: "Ask a support question"
+    url: "https://support.mozilla.org/questions/new/desktop/form"
+    about: "Get support from our contributors or staff members."
+  - name: "Submit new ideas"
+    url: "https://connect.mozilla.org/t5/discussions/how-to-submit-a-great-idea-in-five-easy-steps/td-p/24"
+    about: "Have an idea for a new product feature? Share it with our community and staff members!"
+  - name: "Discussions" 
+    url: "https://connect.mozilla.org/t5/discussions/bd-p/discussions"
+    about: "Give feedback and participate in meaningful conversations with the community and Mozilla employees"
+  - name: "Discover more awesome tools"
+    url: "https://www.mozilla.org/firefox/products/"
+    about: "Learn more about other products from Mozilla"

.github/PULL_REQUEST_TEMPLATE/pull_request_template.md

@@ -0,0 +1,24 @@
+**Before submitting your pull request**
+
+- [ ] I agree to license my code under the [MPL 2.0 license](https://www.mozilla.org/en-US/MPL/2.0/).
+- [ ] I rebased my work on top of the main branch.
+- [ ] I ran `npm test` and all tests passed.
+- [ ] I added test coverages if relevant.
+
+# Description
+
+*Please include a summary of the changes including relevant motivation and context.*
+
+## Type of change
+
+*Select all that apply.*
+
+- [ ] Bug fix
+- [ ] New feature
+- [ ] Major change (fix or feature that would cause existing functionality to work differently than in the current version)
+
+Tag issues related to this pull request:
+
+*
+*
+*

.github/workflows/builds.yaml

@@ -9,16 +9,16 @@ on:
       - main
       - production
   schedule:
-    - cron: '0 2 * * *' # Daily at 2AM UTC      
+    - cron: '0 2 * * *' # Daily at 2AM UTC
 
 jobs:
   builds:
     name: Builds
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Create the package
         shell: bash
@@ -26,7 +26,7 @@ jobs:
           ./bin/build-addon.sh nightly.xpi
 
       - name: Uploading
-        uses: actions/upload-artifact@v1
+        uses: actions/upload-artifact@v3
         with:
             name: ${{matrix.config.name}} Build
             path: src/web-ext-artifacts

.github/workflows/test.yaml

@@ -0,0 +1,28 @@
+name: Test
+on:
+  push:
+    branches:
+      - main
+      - production
+  pull_request:
+    branches:
+
+jobs:
+  test:
+    name: Run tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v3
+
+      - name: Set up node
+        uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+
+      - name: Install dependencies
+        run: npm install --legacy-peer-deps
+
+      - name: Run tests
+        run: npm run test

.gitignore

@@ -1,5 +1,4 @@
 .DS_Store
-package-lock.json
 node_modules
 README.html
 *.xpi

.travis.yml

@@ -1,10 +0,0 @@
-language: node_js
-node_js:
-    - "lts/*"
-
-notifications:
-    irc:
-        - "ircs://irc.mozilla.org:6697/#testpilot-containers-bots"
-
-install:
-    - npm install --legacy-peer-deps

CONTRIBUTING.md

@@ -1,35 +1,38 @@
 # Contributing
 
-Everyone is welcome to contribute to containers. Reach out to team members if you have questions:
+## Requirements
 
-- Matrix chat: [#containers:mozilla.org](https://matrix.to/#/#containers:mozilla.org)
-- Email: containers@mozilla.com
+* Firefox 91.1.0+
+* Git 2.13+
+* Node 7+
 
-## Filing bugs
+## Getting Started
 
-If you find a bug with containers, please file a issue.
+1. Follow the instructions on [How to fork a repository][fork]
+2. Fetch the locales:
 
-Check first if the bug might already exist: https://github.com/mozilla/multi-account-containers/issues
+    ```
+    cd multi-account-containers
+    git submodule update --init
+    ```
+3. Install the project dependencies
+    ```
+    npm install --legacy-peer-deps
+    ```
+4. Run `npm run dev`.
 
-[Open an issue](https://github.com/mozilla/multi-account-containers/issues/new)
+## Translations
 
-1. Visit about:support
-2. Click "Copy raw data to clipboard" and paste into the bug. Alternatively copy the following sections into the issue:
-  - Application Basics
-  - Nightly Features (if you are in nightly)
-  - Extensions
-  - Experimental Features
-3. Include clear steps to reproduce the issue you have experienced.
-4. Include screenshots if possible.
+The translations are located in `src/_locales`. This directory is a git
+repository like any other. Before editing files in this folder, you need to:
 
-## Sending Pull Requests
+1. `cd src/_locales/`
+2. `git checkout -b message-updates-yyyymmdd`
+3. `git push -u origin message-updates-yyyymmdd`
 
-Patches should be submitted as pull requests. When submitting patches as PRs:
+You can then [open a pull request][pr] on [the l10n repository][l10n].
 
-- You agree to license your code under the project's open source license (MPL 2.0).
-- Base your branch off the current master (see below for an example workflow).
-- Add both your code and new tests if relevant.
-- Run npm test to make sure all tests still pass.
-- Please do not include merge commits in pull requests; include only commits with the new relevant code.
-
-See the main [README](./README.md) for information on prerequisites, installing, running and testing.
+[fork]: https://docs.github.com/en/get-started/quickstart/fork-a-repo
+[l10n]: https://github.com/mozilla-l10n/multi-account-containers-l10n/
+[pr]: https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests
+[web-ext]: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Getting_started_with_web-ext

README.md

@@ -1,109 +1,32 @@
 # Multi-Account Containers
 
-The Firefox Multi-Account Containers extension lets you carve out a separate box for each of your online lives – no more opening a different browser just to check your work email! [Learn More Here](https://blog.mozilla.org/firefox/introducing-firefox-multi-account-containers/)
+[![Test](https://github.com/mozilla/multi-account-containers/actions/workflows/test.yaml/badge.svg)](https://github.com/mozilla/multi-account-containers/actions/workflows/test.yaml)
 
-[Available on addons.mozilla.org](https://addons.mozilla.org/firefox/addon/multi-account-containers/)
+The Firefox Multi-Account Containers extension lets you carve out a separate box for each of your online lives – no more opening a different browser just to check your work email!
 
-For more info, see: 
+Learn more about Multi-Account Containers in
+[our end-user documentation][enduser].
 
-* [Test Pilot Product Hypothesis Document](https://docs.google.com/document/d/1WQdHTVXROk7dYkSFluc6_hS44tqZjIrG9I-uPyzevE8/edit#)
-* [Shield Product Hypothesis Document](https://docs.google.com/document/d/1vMD-fH_5hGDDqNvpRZk12_RhCN2WAe4_yaBamaNdtik/edit#)
+## Contributing
 
+Everyone is welcome to contribute to Multi-Account Containers. To learn how
+to contribute a patch to Multi-Account Container, please
+[read our contributing guide][contributing].
 
-## Requirements
+You can also chat with us on [our Matrix room][matrix] or [our forum][forum].
 
-* node 7+ (for jpm)
-* Firefox 57+
+This repository is governed by Mozilla's code of conduct and etiquette
+guidelines. For more details, [please read the Mozilla Community Participation Guidelines][cpg].
 
+### License
 
-## Development
+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 https://mozilla.org/MPL/2.0/.
 
-### Running Locally
-
-#### Via WebExtensions API (web-ext)
-
-1. Fetch the locales updating the git-submodules: `git submodule init && git submodule update --remote --depth 1 src/_locales`
-2. Install the [web-ext](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Getting_started_with_web-ext) tool.
-3. Run `web-ext run -s src/`. This launches Firefox and installs the extension automatically.
-
-This tool provides some additional development features, such as [automatic reloading](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Getting_started_with_web-ext#Automatic_extension_reloading).
-
-#### Via about:debugging in Firefox
-
-1. Fetch the locales updating the git-submodules: `git submodule init && git submodule update --remote --depth 1 src/_locales`
-2. Open the `about:debugging` page in Firefox.
-3. Click on `This Firefox`.
-4. Click on [Load Temporary Add-on](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox).
-5. Select `src/manifest.json`.
-
-Here is a [video](https://www.youtube.com/watch?v=cer9EUKegG4) that demonstrates how to do this.
-
-### Testing
-
-* Install dependencies:
-
-  ```
-  npm install
-  ```
-
-* Run all tests:
-
-  ```
-  npm run test
-  ```
-
-* Only run the linter:
-
-  ```
-  npm run lint
-  ```
-
-There is a timeout test that sometimes fails on certain machines, so make sure to run the tests on your clone before you make any changes to see if you have this problem.
-
-#### Add/update messages for translation
-
-The `src/_locales` directory is a git repository like any other, so to make changes to the messages:
-
-1. Make whatever changes you need in `src/_locales/en` as you work.
-
-2. `cd src/_locales/en`
-
-3. `git branch message-updates-yyyymmdd`
-
-4. `git push -u origin message-updates-yyyymmdd`
-
-You can then open a pull request from the `message-updates-yyyymmdd` branch to
-
-[the l10n repo](https://github.com/mozilla-l10n/multi-account-containers-l10n/) `main` branch.
-
-### Distributing
-#### Make the new version
-
-1. Bump the version number in `package.json` and `manifest.json`
-2. Commit the version number bump
-3. Create a git tag for the version: `git tag <version>`
-4. Push the tag up to GitHub: `git push --tags`
-
-#### Publish to AMO
-
-1. `./bin/build-addon.sh`
-2. [Upload the `.zip` to AMO](https://addons.mozilla.org/developers/addon/multi-account-containers/versions/submit/)
-
-#### Publish to GitHub
-
-Finally, we also publish the release to GitHub for those followers.
-
-1. Download the signed `.xpi` from [the addon versions page](https://addons.mozilla.org/developers/addon/multi-account-containers/versions)
-2. [Make the new release on
-   GitHub](https://github.com/mozilla/multi-account-containers/releases/new)
-   * Use the version number for "Tag version" and "Release title"
-   * Release notes: copy the output of `git log --no-merges --pretty=format:"%h %s" <previous-version>..<new-version>`
-   * Attach binaries: select the signed `.xpi` file
-
-### Links
-
-Facebook & Twitter icons CC-Attrib https://fairheadcreative.com.
-
-- [License](./LICENSE.txt)
-- [Contributing](./CONTRIBUTING.md)
-- [Code Of Conduct](./CODE_OF_CONDUCT.md)
+<!-- Please keep the list in alphabetical order -->
+[contributing]: CONTRIBUTING.md
+[cpg]: https://www.mozilla.org/about/governance/policies/participation/
+[enduser]: https://support.mozilla.org/en-US/kb/containers
+[forum]: https://discourse.mozilla.org/c/containers/223
+[matrix]: https://matrix.to/#/#containers:mozilla.org

docs/acceptance.md

@@ -1,31 +0,0 @@
-# Acceptance Criteria
-
-## User Experience
-- [ ] It should place a containers button on the user’s browser toolbar
-- [ ] It should include all containers management UI inside a door hanger from this toolbar button
-- [ ] It should provide a set of default container choices for users to pick from (work, home, travel etc.)
-  - [ ] Each container type should have a color, icon and name
-- [ ] It should allow users to create new containers
-- [ ] It should allow users to delete containers
-- [ ] It should allow users to open container tabs
-  - [ ] each container tab should be clearly demarcated by color/icon etc.
-- [ ] It should provide a control to show/hide all open tabs of one container type
-- [ ] It should provide a control to sort tabs by container type
-- [ ] It should provide a control to allow users to open containers in new tab or new window by default
-
-## User Experience Non-Requirements (out of scope)
-- [ ] It should not show any UI in browser settings
-- [ ] It should not effect the awesome bar
-- [ ] It should not effect the Firefox Library 
-- [ ] It should not make any changes to sync functionality
-
-## Measurements
-- [ ] It should measure container tab creations per session
-- [ ] It should measure the type of container tab created
-- [ ] It should measure container tab creations
-- [ ] It should measure new container creations
-- [ ] It should measure container deletes
-- [ ] It should measure container sorts
-- [ ] It should measure container hides
-- [ ] It should report URIs accessed across multiple containers
-- [ ] It should measure the % of tab-based vs windows-based containers

docs/release.md

@@ -0,0 +1,31 @@
+# Release a new version
+
+## Make the new version
+
+1. Bump the version number in `package.json` and `manifest.json`
+2. Commit the version number bump
+3. Create a git tag for the version: `git tag <version>`
+4. Push the tag up to GitHub: `git push --tags`
+
+## Publish to AMO
+
+1. Run `./bin/build-addon.sh`
+2. [Upload the zip file to AMO][amo-upload]
+
+## Publish to GitHub
+
+Finally, we also publish the release to GitHub.
+
+1. Download the signed `.xpi` from [the addon versions page][addon-page]
+2. [Create a new release on GitHub][gh-release]
+   * For *Tag version* and *Release title*, use the version number
+   * For *Release notes*, copy the output of:
+     ```
+     git log --no-merges \
+             --pretty=format:"%h %s" <previous-version>..<new-version>
+     ```
+   * For the *Attach binaries*, select the signed `.xpi` file
+
+[addon-page]: https://addons.mozilla.org/developers/addon/multi-account-containers/versions
+[amo-upload]: https://addons.mozilla.org/developers/addon/multi-account-containers/versions/submit/
+[gh-release]: https://github.com/mozilla/multi-account-containers/releases/new

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.0.4",
+  "version": "8.1.2",
   "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": "^5.4.1",
+    "web-ext": "^7.1.1",
     "webextensions-jsdom": "^1.2.1"
   },
   "homepage": "https://github.com/mozilla/multi-account-containers#readme",
@@ -36,7 +36,7 @@
     "url": "git+https://github.com/mozilla/multi-account-containers.git"
   },
   "scripts": {
-    "webext": "web-ext run -s src/",
+    "dev": "web-ext run -s src/",
     "lint": "npm-run-all lint:*",
     "lint:addon": "./bin/addons-linter.sh",
     "lint:css": "stylelint src/css/*.css",

src/confirm-page.html

@@ -3,6 +3,7 @@
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   <title data-i18n-message-id="confirmNavigationTitle"></title>
   <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="chrome://browser/skin/aboutNetError.css" type="text/css" media="all" />
+  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="chrome://global/skin/aboutNetError.css" type="text/css" media="all" />
   <script type="text/javascript" src="./js/i18n.js"></script>
   <link rel="stylesheet" href="/css/confirm-page.css" />
 </head>
@@ -23,8 +24,21 @@
       </label>
       <br />
       <div class="button-container">
-        <button id="deny" class="button" data-message-id="openInContainer" data-message-arg="current-container-name"></button>
-        <button id="confirm" class="button primary" autofocus data-message-id="openInContainer" data-message-arg="container-name"></button>
+        <button id="deny"
+                class="button"
+                data-message-id="openInContainer"
+                data-message-arg="current-container-name">
+        </button>
+        <button id="deny-no-container"
+                class="button"
+                data-message-id="openInNoContainer">
+        </button>
+        <button id="confirm"
+                class="button primary"
+                autofocus
+                data-message-id="openInContainer"
+                data-message-arg="container-name">
+        </button>
       </div>
     </form>
   </main>

src/js/background/assignManager.js

@@ -102,6 +102,7 @@ window.assignManager = {
     async deleteContainer(userContextId) {
       const sitesByContainer = await this.getAssignedSites(userContextId);
       this.area.remove(Object.keys(sitesByContainer));
+      identityState.storageArea.remove(backgroundLogic.cookieStoreId(userContextId));
     },
 
     async getAssignedSites(userContextId = null) {
@@ -197,6 +198,11 @@ window.assignManager = {
       return {};
     }
 
+    // proxyDNS only works for SOCKS proxies
+    if (["socks", "socks4"].includes(result.proxy.type)) {
+      result.proxy.proxyDNS = true;
+    }
+
     if (!result.proxy.mozProxyEnabled) {
       return result.proxy;
     }

src/js/background/backgroundLogic.js

@@ -1,4 +1,9 @@
+/* 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/. */
+
 const DEFAULT_TAB = "about:newtab";
+
 const backgroundLogic = {
   NEW_TAB_PAGES: new Set([
     "about:startpage",
@@ -168,7 +173,7 @@ const backgroundLogic = {
       if ("isIsolated" in containerState || remove) {
         delete containerState.isIsolated;
       } else {
-        containerState.isIsolated = "locked";        
+        containerState.isIsolated = "locked";
       }
       return await identityState.storageArea.set(cookieStoreId, containerState);
     } catch (error) {
@@ -317,19 +322,29 @@ const backgroundLogic = {
         continue;
       }
 
-      const userContextId = backgroundLogic.getUserContextIdFromCookieStoreId(tab.cookieStoreId);
-      if (!map.has(userContextId)) {
-        map.set(userContextId, []);
+      if (!map.has(tab.cookieStoreId)) {
+        const userContextId = backgroundLogic.getUserContextIdFromCookieStoreId(tab.cookieStoreId);
+        map.set(tab.cookieStoreId, { order: userContextId, tabs: [] });
       }
-      map.get(userContextId).push(tab);
+      map.get(tab.cookieStoreId).tabs.push(tab);
+    }
+
+    const containerOrderStorage = await browser.storage.local.get([CONTAINER_ORDER_STORAGE_KEY]);
+    const containerOrder =
+      containerOrderStorage && containerOrderStorage[CONTAINER_ORDER_STORAGE_KEY];
+
+    if (containerOrder) {
+      map.forEach((obj, key) => {
+        obj.order = (key in containerOrder) ? containerOrder[key] : -1;
+      });
     }
 
     // Let's sort the map.
-    const sortMap = new Map([...map.entries()].sort((a, b) => a[0] > b[0]));
+    const sortMap = new Map([...map.entries()].sort((a, b) => a[1].order > b[1].order));
 
     // Let's move tabs.
-    sortMap.forEach(tabs => {
-      for (const tab of tabs) {
+    sortMap.forEach(obj => {
+      for (const tab of obj.tabs) {
         ++pos;
         browser.tabs.move(tab.id, {
           windowId: windowObj.id,

src/js/background/mozillaVpnBackground.js

@@ -66,11 +66,11 @@ const MozillaVPN_Background = {
 
   // Handle responses from MozillaVPN client
   async handleResponse(response) {
+    MozillaVPN_Background._installed = true;
     if (response.error && response.error === "vpn-client-down") {
       MozillaVPN_Background._connected = false;
       return;
     }
-    MozillaVPN_Background._installed = true;
     if (response.servers) {
       const servers = response.servers.countries;
       browser.storage.local.set({ [MozillaVPN_Background.MOZILLA_VPN_SERVERS_KEY]: servers});

src/js/confirm-page.js

@@ -12,22 +12,39 @@ async function load() {
     denySubmit(redirectUrl);
   });
 
+  document.getElementById("deny-no-container").addEventListener("click", (e) => {
+    e.preventDefault();
+    denySubmit(redirectUrl);
+  });
+
   const container = await browser.contextualIdentities.get(cookieStoreId);
   const currentContainer = currentCookieStoreId ? await browser.contextualIdentities.get(currentCookieStoreId) : null;
-  const currentContainerName = currentContainer ? currentContainer.name : "";
+  const currentContainerName = currentContainer ? setDenyButton(currentContainer.name) : setDenyButton("");
 
   document.querySelectorAll("[data-message-id]").forEach(el => {
     const elementData = el.dataset;
     const containerName = elementData.messageArg === "container-name" ? container.name : currentContainerName;
     el.textContent = browser.i18n.getMessage(elementData.messageId, containerName);
   });
-  
+
   document.getElementById("confirm").addEventListener("click", (e) => {
     e.preventDefault();
     confirmSubmit(redirectUrl, cookieStoreId);
   });
 }
 
+function setDenyButton(currentContainerName) {
+  const buttonDeny = document.getElementById("deny");
+  const buttonDenyNoContainer = document.getElementById("deny-no-container");
+
+  if (currentContainerName) {
+    buttonDenyNoContainer.style.display = "none";
+    return currentContainerName;
+  }
+  buttonDeny.style.display = "none";
+  return;
+}
+
 function appendFavicon(pageUrl, redirectUrlElement) {
   const origin = new URL(pageUrl).origin;
   const favIconElement = Utils.createFavIconElement(`${origin}/favicon.ico`);

src/js/mozillaVpn.js

@@ -34,11 +34,8 @@ const MozillaVPN = {
         }
         if (!mozillaVpnConnected && proxy.mozProxyEnabled) {
           flag.classList.add("proxy-unavailable");
-          const tooltip = el.querySelector(".tooltip.proxy-unavailable");
-          if (tooltip) {
-            tooltip.textContent = tooltipProxyWarning;
-          }
           const menuItemName = el.querySelector(".menu-item-name");
+          menuItemName.setAttribute("title", tooltipProxyWarning);
           if (menuItemName) {
             el.querySelector(".menu-item-name").dataset.mozProxyWarning = "proxy-unavailable";
           }
@@ -68,14 +65,11 @@ const MozillaVPN = {
     const mozillaVpnConnected = await browser.runtime.sendMessage({ method: "MozillaVPN_getConnectionStatus" });
     const connectionStatusStringId = mozillaVpnConnected ? "moz-vpn-connected" : "moz-vpn-disconnected";
     const connectionStatusLocalizedString = browser.i18n.getMessage(connectionStatusStringId);
+    const connectionStatusTooltip = document.querySelector(".vpn-status-container-list");
+    connectionStatusTooltip.setAttribute("title", connectionStatusLocalizedString);
 
     statusIconEls.forEach(el => {
       el.style.backgroundImage = mozillaVpnConnected ? connectedIndicatorSrc : disconnectedIndicatorSrc;
-      if (el.querySelector(".tooltip")) {
-        el.querySelector(".tooltip").textContent = connectionStatusLocalizedString;
-      } else {
-        el.textContent = connectionStatusLocalizedString;
-      }
     });
   },
 

src/js/options.js

@@ -53,11 +53,20 @@ async function enableDisableReplaceTab() {
   await browser.storage.local.set({replaceTabEnabled: !!checkbox.checked});
 }
 
+async function changeTheme(event) {
+  const theme = event.currentTarget;
+  await browser.storage.local.set({currentTheme: theme.value});
+  await browser.storage.local.set({currentThemeId: theme.selectedIndex});
+}
+
 async function setupOptions() {
   const { syncEnabled } = await browser.storage.local.get("syncEnabled");
   const { replaceTabEnabled } = await browser.storage.local.get("replaceTabEnabled");
+  const { currentThemeId } = await browser.storage.local.get("currentThemeId");
+
   document.querySelector("#syncCheck").checked = !!syncEnabled;
   document.querySelector("#replaceTabCheck").checked = !!replaceTabEnabled;
+  document.querySelector("#changeTheme").selectedIndex = currentThemeId;
   setupContainerShortcutSelects();
 }
 
@@ -114,6 +123,8 @@ browser.permissions.onRemoved.addListener(resetPermissionsUi);
 document.addEventListener("DOMContentLoaded", setupOptions);
 document.querySelector("#syncCheck").addEventListener( "change", enableDisableSync);
 document.querySelector("#replaceTabCheck").addEventListener( "change", enableDisableReplaceTab);
+document.querySelector("#changeTheme").addEventListener( "change", changeTheme);
+
 maybeShowPermissionsWarningIcon();
 for (let i=0; i < NUMBER_OF_KEYBOARD_SHORTCUTS; i++) {
   document.querySelector("#open_container_"+i)

src/js/pageAction.js

@@ -32,6 +32,9 @@ async function init() {
   list.appendChild(fragment);
 
   MozillaVPN.handleContainerList(identities);
+
+  // Set the theme
+  Utils.applyTheme();
 }
 
 init();

src/js/popup.js

@@ -10,7 +10,6 @@ const DEFAULT_ICON = "circle";
 const NEW_CONTAINER_ID = "new";
 
 const ONBOARDING_STORAGE_KEY = "onboarding-stage";
-const CONTAINER_ORDER_STORAGE_KEY = "container-order";
 const CONTAINER_DRAG_DATA_TYPE = "firefox-container";
 
 // List of panels
@@ -66,6 +65,9 @@ const Logic = {
       method: "MozillaVPN_attemptPort"
     }),
 
+    // Set the theme
+    Utils.applyTheme();
+
     // Remove browserAction "upgraded" badge when opening panel
     this.clearBrowserActionBadge();
 
@@ -462,6 +464,23 @@ const Logic = {
     default:
       break;
     }
+  },
+
+  filterContainerList() {
+    const pattern = /^\s+|\s+$/g;
+    const list = Array.from(document.querySelectorAll("#identities-list tr"));
+    const search = document.querySelector("#search-terms").value.replace(pattern, "").toLowerCase();
+
+    for (const i in list) {
+      const text = list[i].querySelector("td div span");
+
+      if (text.innerText.replace(pattern, "").toLowerCase().includes(search) ||
+          !search) {
+        list[i].style.display = "block";
+      } else {
+        list[i].style.display = "none";
+      }
+    }
   }
 };
 
@@ -786,7 +805,6 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
             </div>
           </div>
           <span class="menu-text">${identity.name}</span>
-          <span class="tooltip proxy-unavailable"></span>
         </div>
         <span class="menu-right-float">
           <img alt="" class="always-open-in-flag flag-img" src="/img/flags/.png"/>
@@ -845,6 +863,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
 
     document.addEventListener("keydown", Logic.keyboardNavListener);
     document.addEventListener("keydown", Logic.shortcutListener);
+    document.addEventListener("input", Logic.filterContainerList);
 
     MozillaVPN.handleContainerList(identities);
 
@@ -1244,6 +1263,7 @@ Logic.registerPanel(REOPEN_IN_CONTAINER_PICKER, {
     if (currentTab.cookieStoreId !== "firefox-default") {
       const tr = document.createElement("tr");
       tr.classList.add("menu-item", "hover-highlight", "keyboard-nav");
+      tr.setAttribute("tabindex", "0");
       const td = document.createElement("td");
 
       td.innerHTML = Utils.escaped`
@@ -1407,7 +1427,7 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
         trElement.innerHTML = Utils.escaped`
         <td>
           <div class="favicon"></div>
-          <span title="${site.hostname}" class="menu-text">${site.hostname}</span>
+          <span title="${site.hostname}" class="menu-text truncate-text">${site.hostname}</span>
           <img class="trash-button delete-assignment" src="/img/container-delete.svg" />
         </td>`;
         trElement.getElementsByClassName("favicon")[0].appendChild(Utils.createFavIconElement(assumedUrl));
@@ -1492,7 +1512,7 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
             } else {
               MozillaVPN.handleMozillaCtaClick("mac-edit-container-panel-btn");
             }
-           
+
           });
 
           this.switch.addEventListener("click", async() => {
@@ -1547,6 +1567,7 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
               this.updateProxyDependentUi(proxy);
             } else {
               this.switch.checked = false;
+              this.updateProxyDependentUi({});
               return;
             }
           });
@@ -1677,7 +1698,6 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
           this.currentCityName.textContent = proxyInfo.cityName;
           this.countryCode = proxyInfo.countryCode;
         }
-        return;
       }
 
       expandUi() {
@@ -1892,6 +1912,7 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
     if (proxyPermissionEnabled) {
       const proxyData = await proxifiedContainers.retrieve(identity.cookieStoreId);
       if (proxyData && proxyData.proxy.mozProxyEnabled && !mozillaVpnConnected) {
+        mozillaVpnUi.updateProxyDependentUi({});
         return;
       }
       const proxy = proxyData ? proxyData.proxy : {};
@@ -2243,15 +2264,6 @@ Logic.registerPanel(P_CONTAINER_DELETE, {
 
     // Populating the panel: name, icon, and warning message
     document.getElementById("container-delete-title").textContent = identity.name;
-
-    const totalNumberOfTabs = identity.numberOfHiddenTabs + identity.numberOfOpenTabs;
-    let warningMessage = "";
-    if (totalNumberOfTabs > 0) {
-      const grammaticalNumTabs = totalNumberOfTabs > 1 ? "tabs" : "tab";
-      warningMessage = `If you remove this container now, ${totalNumberOfTabs} container ${grammaticalNumTabs} will be closed.`;
-    }
-    document.getElementById("delete-container-tab-warning").textContent = warningMessage;
-
     return Promise.resolve(null);
   },
 });

src/js/proxified-containers.js

@@ -44,7 +44,7 @@ proxifiedContainers = {
 
   // Parses a proxy description string of the format type://host[:port] or type://username:password@host[:port] (port is optional)
   parseProxy(proxy_str, mozillaVpnData = null) {
-    const proxyRegexp = /(?<type>(https?)|(socks4?)):\/\/(\b(?<username>\w+):(?<password>\w+)@)?(?<host>((?:\d{1,3}\.){3}\d{1,3}\b)|(\b([\w.-]+)+))(:(?<port>\d+))?/;
+    const proxyRegexp = /(?<type>(https?)|(socks4?)):\/\/(\b(?<username>[\w-]+):(?<password>[\w-]+)@)?(?<host>((?:\d{1,3}\.){3}\d{1,3}\b)|(\b([\w.-]+)+))(:(?<port>\d+))?/;
     const matches = proxyRegexp.exec(proxy_str);
     if (!matches) {
       return false;

src/js/utils.js

@@ -2,6 +2,9 @@
 
 const DEFAULT_FAVICON = "/img/blank-favicon.svg";
 
+// eslint-disable-next-line
+const CONTAINER_ORDER_STORAGE_KEY = "container-order";
+
 // TODO use export here instead of globals
 const Utils = {
 
@@ -166,6 +169,26 @@ const Utils = {
       false
     );
   },
+  /* Theme helper
+   *
+   * First, we look if there's a theme already set in the local storage. If
+   * there isn't one, we set the theme based on `prefers-color-scheme`.
+   * */
+  getTheme(currentTheme, window) {
+    if (typeof currentTheme !== "undefined" && currentTheme !== "auto") {
+      return currentTheme;
+    }
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      return "dark";
+    }
+    return "light";
+  },
+  async applyTheme() {
+    const { currentTheme } = await browser.storage.local.get("currentTheme");
+    const popup = document.getElementsByTagName("html")[0];
+    const theme = Utils.getTheme(currentTheme, window);
+    popup.setAttribute("data-theme", theme);
+  }
 };
 
 window.Utils = Utils;

src/manifest.json

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

src/options.html

@@ -59,6 +59,24 @@
         <p><em data-i18n-message-id="replaceTabDescription"></em></p>
       </div>
 
+      <!--
+        TODO
+        - Add data-i18n
+      -->
+      <h3 data-i18n-message-id="theme"></h3>
+
+      <p><label class="keyboard-shortcut">
+          <span data-i18n-message-id="chooseTheme"></span>
+          <select id="changeTheme" name="changeTheme">
+            <option value="auto" selected data-i18n-message-id="themeAuto">
+            </option>
+            <option value="light" data-i18n-message-id="themeLight">
+            </option>
+            <option value="dark" data-i18n-message-id="themeDark">
+            </option>
+          </select>
+      </label></p>
+
       <h3 data-i18n-message-id="keyboardShortCuts"></h3>
       <p><em data-i18n-message-id="editWhichContainer"></em></p>
 

src/popup.html

@@ -1,4 +1,4 @@
-<html>
+<html data-theme="auto">
 <head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   <title>Multi-Account Containers</title>
@@ -154,11 +154,22 @@
       <div class="sub-header" data-i18n-message-id="containers"></div>
       <h4 class="moz-vpn-logotype vpn-status-container-list display-none">Mozilla VPN
         <span class="moz-vpn-connection-status-indicator container-list-status-icon">
-          <span class="tooltip"></span>
         </span>
       </h4>
     </div>
     <div class="scrollable identities-list">
+      <div class="searchbar">
+        <label for="search-terms"
+               class="hide-label"
+               data-i18n-message-id="filterInputLabel">
+        </label>
+        <input type="text"
+               id="search-terms"
+               name="search-terms"
+               placeholder="Search container name"
+               data-i18n-attribute="placeholder"
+               data-i18n-attribute-message-id="filterInputPlaceholder">
+      </div>
       <table class="menu" id="identities-list">
         <tr class="menu-item hover-highlight">
           <td>
@@ -251,7 +262,7 @@
       </table>
     </div>
     <v-padding-hack-footer></v-padding-hack-footer>
-    <div class="bottom-btn keyboard-nav hover-highlight" id="manage-container-link" tabindex="0" data-i18n-message-id="manageThisContainer"></div>
+    <div class="bottom-btn keyboard-nav hover-highlight controller" id="manage-container-link" tabindex="0" data-i18n-message-id="manageThisContainer"></div>
   </div>
 
 
@@ -299,7 +310,7 @@
           <legend class="form-header" data-i18n-message-id="icon"></legend>
         </fieldset>
         <fieldset class="proxies"> <!---- PROXIES -->
-          <input type="text" class="proxies" name="container-proxy" id="edit-container-panel-proxy" maxlength="50" placeholder="type://host:port" hidden/>
+          <input type="text" class="proxies" name="container-proxy" id="edit-container-panel-proxy" placeholder="type://host:port" hidden/>
           <input type="text" class="proxies" name="moz-proxy-enabled" id="moz-proxy-enabled" maxlength="5" hidden/>
           <input type="text" class="proxies" name="country-code" id="country-code-input" maxlength="5" hidden/>
           <input type="text" class="proxies" name="city-name" id="city-name-input" maxlength="5" hidden/>
@@ -342,10 +353,11 @@
         </button>
       </div>
     </moz-vpn-container-ui>
-    <button id="advanced-proxy-settings-btn" class="proxy-section advanced-proxy-settings-btn controller">
+    <button id="advanced-proxy-settings-btn" class="proxy-section advanced-proxy-settings-btn">
       <span class="advanced-proxy-settings-btn-label" data-i18n-message-id="advancedProxySettings"></span>
       <span id="advanced-proxy-address"></span>
     </button>
+    <hr>
     <button class="delete-container delete-btn alert-text" id="delete-container-button" data-i18n-message-id="deleteThisContainer"></button>
 
     <!-- TODO get UX / CONTENT on how to message about unavailable proxies -->
@@ -394,7 +406,6 @@
     <hr>
     <div class="panel-content delete-container-confirm">
       <h4 class="delete-container-confirm-title" data-i18n-message-id="removeThisContainer"></h4>
-      <p class="delete-warning" id="delete-container-tab-warning"></p>
       <p class="delete-warning" data-i18n-message-id="removeThisContainerConfirmation"></p>
     </div>
     <div class="panel-footer">
@@ -441,7 +452,7 @@
     <form class="advanced-proxy-panel-content">
       <label class="advanced-proxy-input-label" for="container-proxy" data-i18n-message-id="advancedProxySettings"></label>
       <div class="advanced-proxy-input-wrapper">
-        <input id="edit-advanced-proxy-input" class="proxy-host primary-input" name="container-proxy" type="text" maxlength="50" placeholder="type://host:port" />
+        <input id="edit-advanced-proxy-input" class="proxy-host primary-input" name="container-proxy" type="text" placeholder="type://host:port" />
         <button id="clear-advanced-proxy-input" class="controller" data-i18n-attribute="value" data-i18n-attribute-message-id="clearproxylabel"></button>
         <span class="proxy-validity" data-i18n-message-id="invalidProxyAlert"></span>
       </div>
@@ -450,7 +461,7 @@
     </form>
     <div id="permissions-overlay" class="permissions-overlay" data-tab-group="proxy-disabled">
       <p data-tab-group="proxy-disabled" data-i18n-message-id="additionalPermissionNeeded"></p>
-      <button id="enable-proxy-permissions" class="primary-cta" data-tab-group="proxy-disabled">Enable</button>
+      <button id="enable-proxy-permissions" class="primary-cta" data-tab-group="proxy-disabled" data-i18n-message-id="enable"></button>
     </div>
   </div>
   <script src="js/utils.js"></script>

test/issues/1140.test.js

@@ -0,0 +1,27 @@
+const { sinon, nextTick, buildBackgroundDom } = require("../common");
+
+describe("#1140", () => {
+  beforeEach(async () => {
+    this.background = await buildBackgroundDom();
+  });
+
+  describe("removing containers", () => {
+    beforeEach(async () => {
+      this.background.browser.contextualIdentities.onRemoved.addListener = sinon.stub();
+      const [promise] = this.background.browser.runtime.onMessage.addListener.yield({
+        method: "deleteContainer",
+        message: {
+          userContextId: "1"
+        }
+      });
+      await promise;
+      await nextTick();
+    });
+
+    it("should remove the identitystate from storage as well", async () => {
+      this.background.browser.storage.local.remove.should.have.been.calledWith([
+        "identitiesState@@_firefox-container-1"
+      ]);
+    });
+  });
+});