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

popup: Exclude "Always open" from menu colors hack.
2026-03-11 22:35:56 +01:00 · 2026-03-11 17:07:48 +01:00 · 2026-03-09 16:50:10 +01:00 · 2026-03-09 14:44:43 +01:00 · 2026-03-05 18:37:50 +01:00 · 2026-03-05 18:33:33 +01:00
57 changed files with 14895 additions and 1008 deletions
@@ -1,2 +0,0 @@
-lib/testpilot/*.js
-coverage
@@ -1,68 +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,
-    "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"]
-  }
-};
@@ -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
@@ -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
@@ -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"
@@ -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:
+
+*
+*
+*
@@ -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@v4
        with:
            name: ${{matrix.config.name}} Build
            path: src/web-ext-artifacts
@@ -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
@@ -1,5 +1,4 @@
 .DS_Store
-package-lock.json
 node_modules
 README.html
 *.xpi
@@ -9,6 +8,7 @@ README.html
 addon.env

 src/web-ext-artifacts/*
+web-ext-artifacts

 # JetBrains IDE files
 .idea
@@ -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
@@ -1,35 +1,54 @@
 # 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.
+## Tips for contributing

-See the main [README](./README.md) for information on prerequisites, installing, running and testing.
+1. Choose [an issue][issues] that you would like to work on.
+2. Fork the repository and follow the instructions for setting it up locally.
+3. Run the add-on locally and try reproducing the issue.
+4. Debug add-ons by clicking the “Settings” icon in about:addons, and then clicking “Debug Add-ons”
+5. Click “Inspect” on the MAC add-on to open developer tools for the popup extension (see [this documentation][extension-doc] for more information)
+6. Once you have a fix ready, commit your changes with the following commit message template: “Fix #<insert issue id #>: <short description>”
+7. Push your changes and open a pull request for review.
+
+If you run into an issue, you can always ask the other community members in the [discussions board][discussions]. 
+
+<!-- Please keep the list in alphabetical order -->
+[discussions]: https://github.com/mozilla/multi-account-containers/discussions
+[extension-doc]: https://extensionworkshop.com/documentation/develop/debugging/
+[fork]: https://docs.github.com/en/get-started/quickstart/fork-a-repo
+[issues]: https://github.com/mozilla/multi-account-containers/issues
+[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
@@ -1,109 +1,33 @@
 # 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 ask in [our discussions board][discussions].

-* 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
+[discussions]: https://github.com/mozilla/multi-account-containers/discussions
+[matrix]: https://matrix.to/#/#containers:mozilla.org
@@ -1,4 +1,4 @@
-#!/bin/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
@@ -32,4 +32,4 @@ rm -rf $TMPDIR/src/_locales/.github || die
 print G "done."

 print Y "Running the test..."
-$(npm bin)/addons-linter $TMPDIR/src || die
+npx addons-linter $TMPDIR/src || die
@@ -1,4 +1,4 @@
-#!/bin/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
@@ -23,4 +23,4 @@ if [[ $# -gt 0 ]]; then
  EXTRA_PARAMS="--filename $1"
 fi

-$(npm bin)/web-ext build --overwrite-dest $EXTRA_PARAMS || die
+npx web-ext build --overwrite-dest $EXTRA_PARAMS || die
@@ -1,4 +1,4 @@
-#!/bin/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
@@ -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
@@ -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
@@ -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"])]);
@@ -2,22 +2,23 @@
  "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.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"
  },
-  "dependencies": {},
  "devDependencies": {
-    "addons-linter": "^3.23.0",
+    "@eslint/js": "^9.36.0",
+    "addons-linter": "^5.28.0",
    "ajv": "^6.6.3",
    "chai": "^4.2.0",
-    "eslint": "^7.32.0",
-    "eslint-plugin-no-unsanitized": "^4.0.0",
-    "eslint-plugin-promise": "^5.2.0",
+    "eslint": "^9.36.0",
+    "eslint-plugin-no-unsanitized": "^4.1.4",
+    "eslint-plugin-promise": "^7.2.1",
+    "globals": "^16.4.0",
    "htmllint-cli": "0.0.7",
    "json": ">=10.0.0",
-    "mocha": "^6.2.2",
+    "mocha": "^10.1.0",
    "npm-run-all": "^4.0.0",
    "nyc": "^15.0.0",
    "sinon": "^7.5.0",
@@ -25,7 +26,7 @@
    "stylelint": "^13.5.0",
    "stylelint-config-standard": "^20.0.0",
    "stylelint-order": "^4.0.0",
-    "web-ext": "^5.4.1",
+    "web-ext": "^8.10.0",
    "webextensions-jsdom": "^1.2.1"
  },
  "homepage": "https://github.com/mozilla/multi-account-containers#readme",
@@ -36,13 +37,16 @@
    "url": "git+https://github.com/mozilla/multi-account-containers.git"
  },
  "scripts": {
-    "webext": "web-ext run -s src/",
+    "build": "web-ext build -s src/",
+    "dev": "npm run remove-locales-github && web-ext run -s src/",
    "lint": "npm-run-all lint:*",
    "lint:addon": "./bin/addons-linter.sh",
    "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",
    "test:once": "mocha test/**/*.test.js",
    "test:watch": "npm run test:once -- --watch",
@@ -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>
@@ -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>
@@ -1,9 +0,0 @@
-<!-- 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/. --><svg data-name="Flat (For Export)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-  <style>rect,path {fill: rgba(249, 249, 250, 0.8);}</style>
-  <rect x="1" y="1" width="6" height="6" rx="1"/>
-  <path d="M14.75 3H13V1.25A0.25 0.25 0 0 0 12.75 1h-1.5A0.25 0.25 0 0 0 11 1.25V3H9.25A0.25 0.25 0 0 0 9 3.25v1.5A0.25 0.25 0 0 0 9.25 5H11v1.75A0.25 0.25 0 0 0 11.25 7h1.5A0.25 0.25 0 0 0 13 6.75V5h1.75A0.25 0.25 0 0 0 15 4.75v-1.5A0.25 0.25 0 0 0 14.75 3z" fill-rule="evenodd"/>
-  <rect x="1" y="9" width="6" height="6" rx="1"/>
-  <rect x="9" y="9" width="6" height="6" rx="1"/>
-</svg>
@@ -1,7 +1,13 @@
-<svg data-name="Flat (For Export)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-  <style>rect,path {fill: rgba(24, 25, 26, 01);}</style>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <style>
+    :root { color-scheme: light dark; }
+    rect, path { fill: rgb(24, 25, 26); }
+    @media (prefers-color-scheme: dark) {
+      rect, path { fill: rgba(249, 249, 250, 0.8); }
+    }
+  </style>
  <rect x="1" y="1" width="6" height="6" rx="1"/>
  <path d="M14.75 3H13V1.25A0.25 0.25 0 0 0 12.75 1h-1.5A0.25 0.25 0 0 0 11 1.25V3H9.25A0.25 0.25 0 0 0 9 3.25v1.5A0.25 0.25 0 0 0 9.25 5H11v1.75A0.25 0.25 0 0 0 11.25 7h1.5A0.25 0.25 0 0 0 13 6.75V5h1.75A0.25 0.25 0 0 0 15 4.75v-1.5A0.25 0.25 0 0 0 14.75 3z" fill-rule="evenodd"/>
  <rect x="1" y="9" width="6" height="6" rx="1"/>
  <rect x="9" y="9" width="6" height="6" rx="1"/>
-</svg>
+</svg>
@@ -4,6 +4,7 @@
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;">
  <style>
+    :root { color-scheme: light dark; }
    path, circle, g {
      fill: menutext;
    }
@@ -1,14 +0,0 @@
-module.exports = {
-  "extends": [
-    "../../.eslintrc.js"
-  ],
-  "globals": {
-    "assignManager": true,
-    "badge": true,
-    "backgroundLogic": true,
-    "identityState": true,
-    "messageHandler": true,
-    "sync": true,
-    "Utils": true
-  }
-};
@@ -61,8 +61,9 @@ window.assignManager = {
        this.area.get([siteStoreKey]).then((storageResponse) => {
          if (storageResponse && siteStoreKey in storageResponse) {
            resolve(storageResponse[siteStoreKey]);
+          } else {
+            resolve(null);
          }
-          resolve(null);
        }).catch((e) => {
          reject(e);
        });
@@ -76,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({
@@ -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) {
@@ -164,11 +165,17 @@ window.assignManager = {
  _neverAsk(m) {
    const pageUrl = m.pageUrl;
    if (m.neverAsk === true) {
+      if (m.defaultContainer === true) {
+        this.storageArea.remove(pageUrl);
+        return;
+      }
+
      // If we have existing data and for some reason it hasn't been
      // deleted etc lets update it
      this.storageArea.get(pageUrl).then((siteSettings) => {
        if (siteSettings) {
          siteSettings.neverAsk = true;
+          siteSettings.userContextId = backgroundLogic.getUserContextIdFromCookieStoreId(m.cookieStoreId);
          this.storageArea.set(pageUrl, siteSettings);
        }
      }).catch((e) => {
@@ -197,12 +204,17 @@ 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, proxyDNS: true }];
+      return result.proxy;
    }

    // Let's add the isolation key.
-    return [{ ...result.proxy, connectionIsolationKey: "" + MozillaVPN_Background.isolationKey, proxyDNS: true }];
+    return [{ ...result.proxy, connectionIsolationKey: "" + MozillaVPN_Background.isolationKey }];
  },

  // Before a request is handled by the browser we decide if we should
@@ -220,7 +232,7 @@ window.assignManager = {
    try {
      container = await browser.contextualIdentities
        .get(backgroundLogic.cookieStoreId(siteSettings.userContextId));
-    } catch (e) {
+    } catch {
      container = false;
    }

@@ -313,7 +325,8 @@ window.assignManager = {
        options.url,
        tab.index + 1,
        tab.active,
-        openTabId
+        openTabId,
+        tab.groupId
      );
    } else {
      this.reloadPageInContainer(
@@ -323,7 +336,8 @@ window.assignManager = {
        tab.index + 1,
        tab.active,
        siteSettings.neverAsk,
-        openTabId
+        openTabId,
+        tab.groupId
      );
    }
    this.calculateContextMenu(tab);
@@ -468,9 +482,7 @@ window.assignManager = {
  },

  contextualIdentityRemoved(changeInfo) {
-    browser.contextMenus.remove(
-      changeInfo.contextualIdentity.cookieStoreId
-    );
+    this.removeMenuItem(changeInfo.contextualIdentity.cookieStoreId);
  },

  async _onClickedHandler(info, tab) {
@@ -565,6 +577,16 @@ window.assignManager = {
    return true;
  },

+  async _resetCookiesForSite(hostname, cookieStoreId) {
+    const hostNameTruncated = hostname.replace(/^www\./, ""); // Remove "www." from the hostname
+    await browser.browsingData.removeCookies({
+      cookieStoreId: cookieStoreId,
+      hostnames: [hostNameTruncated] // This does not remove cookies from associated domains. To remove all cookies, we have a container storage removal option.
+    });
+
+    return true;
+  },
+
  async _setOrRemoveAssignment(tabId, pageUrl, userContextId, remove) {
    let actionName;
    // https://github.com/mozilla/testpilot-containers/issues/626
@@ -616,7 +638,7 @@ window.assignManager = {
  },

  async _maybeRemoveSiteIsolation(userContextId) {
-    const assignments = await this.storageArea.getByContainer(userContextId);
+    const assignments = await this.storageArea.getAssignedSites(userContextId);
    const hasAssignments = assignments && Object.keys(assignments).length > 0;
    if (hasAssignments) {
      return;
@@ -647,11 +669,11 @@ window.assignManager = {
    // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1215376#c16
    // We also can't change for always private mode
    // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1352102
-    browser.contextMenus.remove(this.MENU_ASSIGN_ID);
-    browser.contextMenus.remove(this.MENU_REMOVE_ID);
-    browser.contextMenus.remove(this.MENU_SEPARATOR_ID);
-    browser.contextMenus.remove(this.MENU_HIDE_ID);
-    browser.contextMenus.remove(this.MENU_MOVE_ID);
+    this.removeMenuItem(this.MENU_ASSIGN_ID);
+    this.removeMenuItem(this.MENU_REMOVE_ID);
+    this.removeMenuItem(this.MENU_SEPARATOR_ID);
+    this.removeMenuItem(this.MENU_HIDE_ID);
+    this.removeMenuItem(this.MENU_MOVE_ID);
  },

  async calculateContextMenu(tab) {
@@ -672,7 +694,7 @@ window.assignManager = {
    }
    browser.contextMenus.create({
      id: menuId,
-      title: "Always Open in This Container",
+      title: browser.i18n.getMessage("alwaysOpenSiteInContainer"),
      checked,
      type: "checkbox",
      contexts: ["all"],
@@ -686,13 +708,13 @@ window.assignManager = {

    browser.contextMenus.create({
      id: this.MENU_HIDE_ID,
-      title: "Hide This Container",
+      title: browser.i18n.getMessage("hideThisContainer"),
      contexts: ["all"],
    });

    browser.contextMenus.create({
      id: this.MENU_MOVE_ID,
-      title: "Move Tabs to a New Window",
+      title: browser.i18n.getMessage("moveTabsToANewWindow"),
      contexts: ["all"],
    });
  },
@@ -704,7 +726,15 @@ window.assignManager = {
    });
  },

-  reloadPageInDefaultContainer(url, index, active, openerTabId) {
+  /**
+   * @param {string} url
+   * @param {number} index
+   * @param {boolean} active
+   * @param {number} [openerTabId]
+   * @param {number} [groupId]
+   * @returns {void}
+   */
+  reloadPageInDefaultContainer(url, index, active, openerTabId, groupId) {
    // To create a new tab in the default container, it is easiest just to omit the
    // cookieStoreId entirely.
    //
@@ -723,16 +753,58 @@ window.assignManager = {
    // does not automatically return to the original opener tab. To get this desired behaviour,
    // we MUST specify the openerTabId when creating the new tab.
    const cookieStoreId = "firefox-default";
-    browser.tabs.create({url, cookieStoreId, index, active, openerTabId});
+    this.createTabWrapper(url, cookieStoreId, index, active, openerTabId, groupId);
  },

-  reloadPageInContainer(url, currentUserContextId, userContextId, index, active, neverAsk = false, openerTabId = null) {
+
+  /**
+   * Wraps around `browser.tabs.create` and `browser.tabs.group` to create a
+   * tab and ensure that it ends up in the requested tab group, if applicable.
+   *
+   * @param {string} url
+   * @param {string} cookieStoreId
+   * @param {number} index
+   * @param {boolean} active
+   * @param {number} openerTabId
+   * @param {number} [groupId] Tab group ID
+   * @returns {Promise<Tab>}
+   */
+  async createTabWrapper(url, cookieStoreId, index, active, openerTabId, groupId) {
+    const newTab = await browser.tabs.create({
+      url,
+      cookieStoreId,
+      index,
+      active,
+      openerTabId,
+    });
+
+    if (groupId >= 0) {
+      // If the original tab was in a tab group, make sure that the reopened tab
+      // stays in the same tab group.
+      await browser.tabs.group({ groupId, tabIds: newTab.id });
+    }
+
+    return newTab;
+  },
+
+  /**
+   * @param {string} url
+   * @param {string} currentUserContextId
+   * @param {string} userContextId
+   * @param {number} index
+   * @param {boolean} active
+   * @param {boolean} [neverAsk=false]
+   * @param {number} [openerTabId=null]
+   * @param {number} [groupId]
+   * @returns {Promise<Tab>}
+   */
+  reloadPageInContainer(url, currentUserContextId, userContextId, index, active, neverAsk = false, openerTabId = null, groupId = undefined) {
    const cookieStoreId = backgroundLogic.cookieStoreId(userContextId);
    const loadPage = browser.runtime.getURL("confirm-page.html");
    // False represents assignment is not permitted
    // If the user has explicitly checked "Never Ask Again" on the warning page we will send them straight there
    if (neverAsk) {
-      return browser.tabs.create({url, cookieStoreId, index, active, openerTabId});
+      return this.createTabWrapper(url, cookieStoreId, index, active, openerTabId, groupId);
    } else {
      let confirmUrl = `${loadPage}?url=${this.encodeURLProperty(url)}&cookieStoreId=${cookieStoreId}`;
      let currentCookieStoreId;
@@ -740,13 +812,14 @@ window.assignManager = {
        currentCookieStoreId = backgroundLogic.cookieStoreId(currentUserContextId);
        confirmUrl += `&currentCookieStoreId=${currentCookieStoreId}`;
      }
-      return browser.tabs.create({
-        url: confirmUrl,
-        cookieStoreId: currentCookieStoreId,
-        openerTabId,
+      return this.createTabWrapper(
+        confirmUrl,
+        currentCookieStoreId,
        index,
-        active
-      }).then(() => {
+        active,
+        openerTabId,
+        groupId
+      ).then(() => {
        // We don't want to sync this URL ever nor clutter the users history
        browser.history.deleteUrl({url: confirmUrl});
      }).catch((e) => {
@@ -758,7 +831,7 @@ window.assignManager = {
  async initBookmarksMenu() {
    browser.contextMenus.create({
      id: this.OPEN_IN_CONTAINER,
-      title: "Open Bookmark in Container Tab",
+      title: browser.i18n.getMessage("openBookmarkInContainerTab"),
      contexts: ["bookmark"],
    });

@@ -774,12 +847,19 @@ window.assignManager = {
  },

  async removeBookmarksMenu() {
-    browser.contextMenus.remove(this.OPEN_IN_CONTAINER);
+    this.removeMenuItem(this.OPEN_IN_CONTAINER);
    const identities = await browser.contextualIdentities.query({});
    for (const identity of identities) {
-      browser.contextMenus.remove(identity.cookieStoreId);
+      this.removeMenuItem(identity.cookieStoreId);
    }
  },
+
+  removeMenuItem(menuItemId) {
+    // Callers do not check whether the menu exists before attempting to remove
+    // it. contextMenus.remove rejects when the menu does not exist, so we need
+    // to catch and swallow the error to avoid logspam.
+    browser.contextMenus.remove(menuItemId).catch(() => {});
+  }
 };

 assignManager.init();
@@ -1,4 +1,11 @@
+/* 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 */
+
 const DEFAULT_TAB = "about:newtab";
+
 const backgroundLogic = {
  NEW_TAB_PAGES: new Set([
    "about:startpage",
@@ -6,22 +13,123 @@ 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) {
+    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;
        }
      }
    });

    browser.permissions.onAdded.addListener(permissions => this.resetPermissions(permissions));
    browser.permissions.onRemoved.addListener(permissions => this.resetPermissions(permissions));
+
+    // Update Translation in Manifest
+    browser.runtime.onInstalled.addListener((details) => {
+      this.updateTranslationInManifest();
+      this._undoDefault820SortTabsKeyboardShortcut(details);
+      this._removeSurveyAchievement();
+    });
+    browser.runtime.onStartup.addListener(this.updateTranslationInManifest);
+  },
+
+  /**
+   * One-time migration after updating from v8.2.0:
+   * Unset the default keyboard shortcut (Ctrl+Comma) for the `sort_tabs`
+   * command if it was set in v8.2.0 of this addon. If the user remapped
+   * a different shortcut manually, retain their shortcut. Users who used
+   * the default keyboard shortcut will need to manually set a shortcut.
+   * See https://support.mozilla.org/en-US/kb/manage-extension-shortcuts-firefox
+   *
+   * @param {{reason: runtime.OnInstalledReason, previousVersion?: string}} details
+   */
+  async _undoDefault820SortTabsKeyboardShortcut(details) {
+    if (details.reason === "update" && details.previousVersion === "8.2.0") {
+      const commands = await browser.commands.getAll();
+      const sortTabsCommand = commands.find(command => command.name === "sort_tabs");
+      if (sortTabsCommand) {
+        const previouslySuggestedKeys = [
+          "Ctrl+Comma", // "default"
+          "MacCtrl+Comma", // "mac"
+        ];
+        if (previouslySuggestedKeys.includes(sortTabsCommand.shortcut)) {
+          browser.commands.reset("sort_tabs");
+        }
+      }
+    }
+  },
+
+  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 < 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: `${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}`)
+      });
+    }
  },

  resetPermissions(permissions) {
@@ -50,6 +158,19 @@ const backgroundLogic = {
    return extensionInfo;
  },

+  // Remove container data (cookies, localStorage and cache)
+  async deleteContainerDataOnly(userContextId) {
+    await browser.browsingData.removeCookies({
+      cookieStoreId: this.cookieStoreId(userContextId)
+    });
+
+    await browser.browsingData.removeLocalStorage({
+      cookieStoreId: this.cookieStoreId(userContextId)
+    });
+
+    return {done: true, userContextId};
+  },
+
  getUserContextIdFromCookieStoreId(cookieStoreId) {
    if (!cookieStoreId) {
      return false;
@@ -118,7 +239,8 @@ const backgroundLogic = {
    // We can't open these we just have to throw them away
    if (protocol === "about:"
        || protocol === "chrome:"
-        || protocol === "moz-extension:") {
+        || protocol === "moz-extension:"
+        || protocol === "file:") {
      return false;
    }
    return true;
@@ -168,10 +290,10 @@ 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) {
+    } catch {
      // console.error(`No container: ${cookieStoreId}`);
    }
  },
@@ -304,7 +426,13 @@ const backgroundLogic = {
    let pos = 0;

    // Let's collect UCIs/tabs for this window.
+    /** @type {Map<string, {order: string, tabs: Tab[]}>} */
    const map = new Map;
+
+    const lastTab = tabs.at(-1);
+    /** @type {boolean} */
+    let lastTabIsInTabGroup = !!lastTab && lastTab.groupId >= 0;
+
    for (const tab of tabs) {
      if (pinnedTabs && !tab.pinned) {
        // We don't have, or we already handled all the pinned tabs.
@@ -317,26 +445,51 @@ const backgroundLogic = {
        continue;
      }

-      const userContextId = backgroundLogic.getUserContextIdFromCookieStoreId(tab.cookieStoreId);
-      if (!map.has(userContextId)) {
-        map.set(userContextId, []);
+      if (tab.groupId >= 0) {
+        // Skip over tabs in tab groups until it's possible to handle them better.
+        continue;
      }
-      map.get(userContextId).push(tab);
+
+      if (!map.has(tab.cookieStoreId)) {
+        const userContextId = backgroundLogic.getUserContextIdFromCookieStoreId(tab.cookieStoreId);
+        map.set(tab.cookieStoreId, { order: userContextId, tabs: [] });
+      }
+      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 { tabs } of sortMap.values()) {
      for (const tab of tabs) {
        ++pos;
        browser.tabs.move(tab.id, {
          windowId: windowObj.id,
-          index: pos
+          index: pinnedTabs ? pos : -1
        });
+        // Pinned tabs are never grouped and always inserted in the front.
+        if (!pinnedTabs && lastTabIsInTabGroup && browser.tabs.ungroup) {
+          // If the last item in the tab strip is a grouped tab, moving a tab
+          // to its position will also add it to the tab group. Since this code
+          // is only sorting ungrouped tabs, this forcibly ungroups the first
+          // tab to be moved. All subsequent iterations will only be moving
+          // ungrouped tabs to the position of other ungrouped tabs.
+          lastTabIsInTabGroup = false;
+          browser.tabs.ungroup(tab.id);
+        }
      }
-    });
+    }
  },

  async hideTabs(options) {
@@ -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,
+};
@@ -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;
    },
@@ -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>
@@ -23,6 +23,9 @@ const messageHandler = {
      case "deleteContainer":
        response = backgroundLogic.deleteContainer(m.message.userContextId);
        break;
+      case "deleteContainerDataOnly":
+        response = backgroundLogic.deleteContainerDataOnly(m.message.userContextId);
+        break;
      case "createOrUpdateContainer":
        response = backgroundLogic.createOrUpdateContainer(m.message);
        break;
@@ -45,6 +48,9 @@ const messageHandler = {
        // m.url is the assignment to be removed/added
        response = assignManager._setOrRemoveAssignment(m.tabId, m.url, m.userContextId, m.value);
        break;
+      case "resetCookiesForSite":
+        response = assignManager._resetCookiesForSite(m.pageUrl, m.cookieStoreId);
+        break;
      case "sortTabs":
        backgroundLogic.sortTabs();
        break;
@@ -85,17 +91,21 @@ const messageHandler = {
          m.newUserContextId,
          m.tabIndex,
          m.active,
-          true
+          true,
+          null,
+          m.groupId
        );
        break;
      case "assignAndReloadInContainer":
        tab = await assignManager.reloadPageInContainer(
-          m.url, 
+          m.url,
          m.currentUserContextId,
-          m.newUserContextId, 
-          m.tabIndex, 
+          m.newUserContextId,
+          m.tabIndex,
          m.active,
-          true
+          true,
+          null,
+          m.groupId
        );
        // m.tabId is used for where to place the in content message
        // m.url is the assignment to be removed/added
@@ -131,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;
@@ -220,7 +229,9 @@ const messageHandler = {
          // if it's a container tab wait for it to complete and
          // unhide other tabs from this container
          if (tab.cookieStoreId.startsWith("firefox-container")) {
-            browser.tabs.onUpdated.addListener(this.tabUpdateHandler);
+            browser.tabs.onUpdated.addListener(this.tabUpdateHandler, {
+              properties: ["status"]
+            });
          }
        }
      }
@@ -262,7 +273,7 @@ const messageHandler = {
    }).catch((e) => {
      throw e;
    });
-  }
+  },
 };

 // Lets do this last as theme manager did a check before connecting before
@@ -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;
    }
@@ -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});
@@ -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(
@@ -7,27 +7,47 @@ async function load() {
  redirectUrlElement.textContent = redirectUrl;
  appendFavicon(redirectUrl, redirectUrlElement);

+  // Option for staying on the previous container
  document.getElementById("deny").addEventListener("click", (e) => {
    e.preventDefault();
-    denySubmit(redirectUrl);
+    denySubmit(redirectUrl, currentCookieStoreId);
+  });
+
+  // Option for going to the default container (no container)
+  document.getElementById("deny-no-container").addEventListener("click", (e) => {
+    e.preventDefault();
+    denySubmit(redirectUrl, currentCookieStoreId);
  });

  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);
  });
-  
+
+  // Option for going to newly selected container
  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`);
@@ -42,24 +62,42 @@ function confirmSubmit(redirectUrl, cookieStoreId) {
    browser.runtime.sendMessage({
      method: "neverAsk",
      neverAsk: true,
+      cookieStoreId: cookieStoreId,
      pageUrl: redirectUrl
    });
  }
  openInContainer(redirectUrl, cookieStoreId);
 }

-function getCurrentTab() {
-  return browser.tabs.query({
+/**
+ * @returns {Promise<Tab>}
+ */
+async function getCurrentTab() {
+  const tabs = await browser.tabs.query({
    active: true,
    windowId: browser.windows.WINDOW_ID_CURRENT
  });
+  return tabs[0];
 }

-async function denySubmit(redirectUrl) {
+async function denySubmit(redirectUrl, currentCookieStoreId) {
  const tab = await getCurrentTab();
+  const currentContainer = currentCookieStoreId ? await browser.contextualIdentities.get(currentCookieStoreId) : null;
+  const neverAsk = document.getElementById("never-ask").checked;
+
+  if (neverAsk) {
+    await browser.runtime.sendMessage({
+      method: "neverAsk",
+      neverAsk: true,
+      cookieStoreId: currentCookieStoreId,
+      pageUrl: redirectUrl,
+      defaultContainer: !currentContainer
+    });
+  }
+
  await browser.runtime.sendMessage({
    method: "exemptContainerAssignment",
-    tabId: tab[0].id,
+    tabId: tab.id,
    pageUrl: redirectUrl
  });
  document.location.replace(redirectUrl);
@@ -69,12 +107,15 @@ load();

 async function openInContainer(redirectUrl, cookieStoreId) {
  const tab = await getCurrentTab();
-  await browser.tabs.create({
-    index: tab[0].index + 1,
+  const reopenedTab = await browser.tabs.create({
+    index: tab.index + 1,
    cookieStoreId,
    url: redirectUrl
  });
-  if (tab.length > 0) {
-    browser.tabs.remove(tab[0].id);
+  if (tab.groupId >= 0) {
+    // If the original tab was in a tab group, make sure that the reopened tab
+    // stays in the same tab group.
+    await browser.tabs.group({ groupId: tab.groupId, tabIds: reopenedTab.id });
  }
+  await browser.tabs.remove(tab.id);
 }
@@ -24,11 +24,12 @@ async function addMessage(message) {
  divElement.innerText = message.text;

  const imageElement = document.createElement("img");
-  const imagePath = browser.runtime.getURL("/img/container-site-d-24.png");
+  const imagePath = browser.runtime.getURL("/img/multiaccountcontainer-16.svg");
  const response = await fetch(imagePath);
  const blob = await response.blob();
  const objectUrl = URL.createObjectURL(blob);
  imageElement.src = objectUrl;
+  imageElement.width = imageElement.height = 24;
  divElement.prepend(imageElement);

  document.body.appendChild(divElement);
@@ -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;
-      }
    });
  },

@@ -94,7 +88,7 @@ const MozillaVPN = {
        el.classList.remove("display-none");
      });
      this.setStatusIndicatorIcons(mozillaVpnInstalled);
-    } catch (e) {
+    } catch {
      mozVpnLogotypes.forEach(el => {
        el.style.display = "none";
      });
@@ -145,7 +139,7 @@ const MozillaVPN = {
        try {
          const proxy = await proxifiedContainers.retrieve(identity.cookieStoreId);
          proxies[identity.cookieStoreId] = proxy;
-        } catch (e) {
+        } catch {
          proxies[identity.cookieStoreId] = {};
        }
      }
@@ -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)
@@ -32,6 +32,9 @@ async function init() {
  list.appendChild(fragment);

  MozillaVPN.handleContainerList(identities);
+
+  // Set the theme
+  Utils.applyTheme();
 }

 init();
@@ -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
@@ -33,6 +32,7 @@ const P_CONTAINER_EDIT = "containerEdit";
 const P_CONTAINER_DELETE = "containerDelete";
 const P_CONTAINERS_ACHIEVEMENT = "containersAchievement";
 const P_CONTAINER_ASSIGNMENTS = "containerAssignments";
+const P_CLEAR_CONTAINER_STORAGE = "clearContainerStorage";

 const P_MOZILLA_VPN_SERVER_LIST = "moz-vpn-server-list";
 const P_ADVANCED_PROXY_SETTINGS = "advanced-proxy-settings-panel";
@@ -66,6 +66,9 @@ const Logic = {
      method: "MozillaVPN_attemptPort"
    }),

+    // Set the theme
+    Utils.applyTheme();
+
    // Remove browserAction "upgraded" badge when opening panel
    this.clearBrowserActionBadge();

@@ -120,20 +123,40 @@ const Logic = {

  },

+  notify(i18nOpts) {
+    const notificationCards = document.querySelectorAll(".popup-notification-card");
+    const text = browser.i18n.getMessage(i18nOpts.messageId, i18nOpts.placeholders);
+    notificationCards.forEach(notificationCard => {
+      notificationCard.textContent = text;
+      notificationCard.classList.add("is-shown");
+    
+      setTimeout(() => {
+        notificationCard.classList.remove("is-shown");
+      }, 2000);
+    });
+  },
+
  async showAchievementOrContainersListPanel() {
-    // Do we need to show an achievement panel?
-    let showAchievements = false;
    const achievementsStorage = await browser.storage.local.get({ achievements: [] });
-    for (const achievement of achievementsStorage.achievements) {
-      if (!achievement.done) {
-        showAchievements = true;
+    const achievements = achievementsStorage.achievements;
+
+    let saveAchievements = false;
+    for (const achievement of achievements.filter(a => !a.done)) {
+      if (achievement.name === "manyContainersOpened") {
+        this.showPanel(P_CONTAINERS_ACHIEVEMENT);
+        return;
      }
+
+      // We have found an unknown achievement. Let's mark it as done.
+      achievement.done = true;
+      saveAchievements = true;
    }
-    if (showAchievements) {
-      this.showPanel(P_CONTAINERS_ACHIEVEMENT);
-    } else {
-      this.showPanel(P_CONTAINERS_LIST);
+
+    if (saveAchievements) {
+      browser.storage.local.set({ achievements });
    }
+
+    this.showPanel(P_CONTAINERS_LIST);
  },

  // In case the user wants to click multiple actions,
@@ -182,7 +205,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;
    }
  },
@@ -209,6 +232,11 @@ const Logic = {
  async saveContainerOrder(rows) {
    const containerOrder = {};
    rows.forEach((node, index) => {
+      if (typeof browser.contextualIdentities.move === "function") {
+        browser.contextualIdentities.move(
+          node.dataset.containerId, index);
+      }
+
      return containerOrder[node.dataset.containerId] = index;
    });
    await browser.storage.local.set({
@@ -394,22 +422,48 @@ const Logic = {
  },

  shortcutListener(e){
-    function openNewContainerTab(identity) {
+    function openTopContainers() {
+      const identities = Logic.identities();
+      const key = e.code.substring(5);
+      const identity = e.code === "Digit0" ? identities[9] : identities[key - 1];
+
      try {
        browser.tabs.create({
          cookieStoreId: identity.cookieStoreId
        });
        window.close();
-      } catch (e) {
+      } catch {
        window.close();
      }
    }
-    const identities = Logic.identities();
-    if ((e.keyCode >= 49 && e.keyCode <= 57) &&
-            Logic._currentPanel === "containersList") {
-      const identity = identities[e.keyCode - 49];
-      if (identity) {
-        openNewContainerTab(identity);
+
+    // We monitor if the search input is focused so we can disable opening
+    // containers by typing a digit between 0-9 while the popup is open.
+    const searchInput = document.getElementById("search-terms");
+    let isSearchInputFocused = false;
+
+    if (document.activeElement === searchInput) {
+      isSearchInputFocused = true;
+    }
+
+    if (Logic._currentPanel === "containersList" && !isSearchInputFocused) {
+      switch(e.code) {
+      case "Digit0":
+      case "Digit1":
+      case "Digit2":
+      case "Digit3":
+      case "Digit4":
+      case "Digit5":
+      case "Digit6":
+      case "Digit7":
+      case "Digit8":
+      case "Digit9":
+        openTopContainers();
+        break;
+      case "Slash":
+        document.getElementById("search-terms").focus();
+        e.preventDefault();
+        break;
      }
    }
  },
@@ -462,6 +516,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";
+      }
+    }
  }
 };

@@ -621,7 +692,7 @@ Logic.registerPanel(P_ONBOARDING_7, {
    // Let's move to the containers list panel.
    Utils.addEnterHandler(document.querySelector("#sign-in"), async () => {
      browser.tabs.create({
-        url: "https://accounts.firefox.com/?service=sync&action=email&context=fx_desktop_v3&entrypoint=multi-account-containers&utm_source=addon&utm_medium=panel&utm_campaign=container-sync",
+        url: "https://accounts.firefox.com/?service=sync&action=email&context=fx_desktop_v3&entrypoint=multi-account-containers&utm_source=addon&utm_medium=panel&utm_campaign=container-sync&brand=mozilla",
      });
      await Logic.setOnboardingStage(7);
      Logic.showPanel(P_ONBOARDING_8);
@@ -698,12 +769,11 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
          method: "sortTabs"
        });
        window.close();
-      } catch (e) {
+      } catch {
        window.close();
      }
    });

-    const mozillaVpnToutName = "moz-tout-main-panel";
    const mozillaVpnPermissionsWarningDotName = "moz-permissions-warning-dot";

    let { mozillaVpnHiddenToutsList } = await browser.storage.local.get("mozillaVpnHiddenToutsList");
@@ -712,31 +782,6 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
      mozillaVpnHiddenToutsList = [];
    }

-    // Decide whether to show Mozilla VPN tout
-    const mozVpnTout = document.getElementById("moz-vpn-tout");
-    const mozillaVpnInstalled = await browser.runtime.sendMessage({ method: "MozillaVPN_getInstallationStatus" });
-    const mozillaVpnToutShouldBeHidden = mozillaVpnHiddenToutsList.find(tout => tout.name === mozillaVpnToutName);
-    if (mozillaVpnInstalled || mozillaVpnToutShouldBeHidden) {
-      mozVpnTout.remove();
-    }
-
-    // Add handlers if tout is visible
-    const mozVpnDismissTout = document.querySelector(".dismiss-moz-vpn-tout");
-    if (mozVpnDismissTout) {
-      Utils.addEnterHandler((mozVpnDismissTout), async() => {
-        mozVpnTout.remove();
-        mozillaVpnHiddenToutsList.push({
-          name: mozillaVpnToutName
-        });
-        await browser.storage.local.set({ mozillaVpnHiddenToutsList });
-      });
-
-      Utils.addEnterHandler(document.querySelector("#moz-vpn-learn-more"), () => {
-        MozillaVPN.handleMozillaCtaClick("mac-main-panel-btn");
-        window.close();
-      });
-    }
-
    // Badge Options icon if both nativeMessaging and/or proxy permissions are disabled
    const bothMozillaVpnPermissionsEnabled = await MozillaVPN.bothPermissionsEnabled();
    const warningDotShouldBeHidden = mozillaVpnHiddenToutsList.find(tout => tout.name === mozillaVpnPermissionsWarningDotName);
@@ -786,7 +831,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"/>
@@ -814,7 +858,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
            cookieStoreId: identity.cookieStoreId
          });
          window.close();
-        } catch (e) {
+        } catch {
          window.close();
        }
      });
@@ -825,7 +869,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
            cookieStoreId: identity.cookieStoreId
          });
          window.close();
-        } catch (e) {
+        } catch {
          window.close();
        }
      });
@@ -845,6 +889,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {

    document.addEventListener("keydown", Logic.keyboardNavListener);
    document.addEventListener("keydown", Logic.shortcutListener);
+    document.addEventListener("input", Logic.filterContainerList);

    MozillaVPN.handleContainerList(identities);

@@ -874,7 +919,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.");
    }

@@ -909,7 +954,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
          cookieStoreId: identity.cookieStoreId
        });
        window.close();
-      } catch (e) {
+      } catch {
        window.close();
      }
    });
@@ -921,6 +966,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
      Utils.alwaysOpenInContainer(identity);
      window.close();
    });
+
    // Show or not the has-tabs section.
    for (let trHasTabs of document.getElementsByClassName("container-info-has-tabs")) { // eslint-disable-line prefer-const
      trHasTabs.style.display = !identity.hasHiddenTabs && !identity.hasOpenTabs ? "none" : "";
@@ -944,6 +990,13 @@ Logic.registerPanel(P_CONTAINER_INFO, {
    Utils.addEnterHandler(manageContainer, async () => {
      Logic.showPanel(P_CONTAINER_EDIT, identity);
    });
+    const clearContainerStorageButton = document.getElementById("clear-container-storage-info");
+    Utils.addEnterHandler(clearContainerStorageButton, async () => {
+      const granted = await browser.permissions.request({ permissions: ["browsingData"] });
+      if (granted) {
+        Logic.showPanel(P_CLEAR_CONTAINER_STORAGE, identity);
+      }
+    });
    return this.buildOpenTabTable(tabs);
  },

@@ -963,7 +1016,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
          cookieStoreId: Logic.currentCookieStoreId()
        });
        window.close();
-      } catch (e) {
+      } catch {
        window.close();
      }
    });
@@ -1040,7 +1093,7 @@ Logic.registerPanel(OPEN_NEW_CONTAINER_PICKER, {
          cookieStoreId: identity.cookieStoreId
        });
        window.close();
-      } catch (e) {
+      } catch {
        window.close();
      }
    };
@@ -1234,7 +1287,8 @@ Logic.registerPanel(REOPEN_IN_CONTAINER_PICKER, {
        false,
        newUserContextId,
        currentTab.index + 1,
-        currentTab.active
+        currentTab.active,
+        currentTab.groupId
      );
      window.close();
    };
@@ -1244,6 +1298,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`
@@ -1263,7 +1318,8 @@ Logic.registerPanel(REOPEN_IN_CONTAINER_PICKER, {
          false,
          0,
          currentTab.index + 1,
-          currentTab.active
+          currentTab.active,
+          currentTab.groupId
        );
        window.close();
      });
@@ -1404,11 +1460,14 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
        /* As we don't have the full or correct path the best we can assume is the path is HTTPS and then replace with a broken icon later if it doesn't load.
           This is pending a better solution for favicons from web extensions */
        const assumedUrl = `https://${site.hostname}/favicon.ico`;
+        const resetSiteCookiesInfo = browser.i18n.getMessage("clearSiteCookiesTooltipInfo");
+        const deleteSiteInfo = browser.i18n.getMessage("deleteSiteTooltipInfo");
        trElement.innerHTML = Utils.escaped`
        <td>
          <div class="favicon"></div>
-          <span title="${site.hostname}" class="menu-text">${site.hostname}</span>
-          <img class="trash-button delete-assignment" src="/img/container-delete.svg" />
+          <span title="${site.hostname}" class="menu-text truncate-text">${site.hostname}</span>
+          <img title="${resetSiteCookiesInfo}" class="reset-button reset-assignment" src="/img/refresh-16.svg" />
+          <img title="${deleteSiteInfo}" class="trash-button delete-assignment"  src="/img/container-delete.svg" />
        </td>`;
        trElement.getElementsByClassName("favicon")[0].appendChild(Utils.createFavIconElement(assumedUrl));
        const deleteButton = trElement.querySelector(".trash-button");
@@ -1420,6 +1479,20 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
          delete assignments[siteKey];
          this.showAssignedContainers(assignments);
        });
+        const resetButton = trElement.querySelector(".reset-button");
+        Utils.addEnterHandler(resetButton, async () => {
+          const cookieStoreId = Logic.currentCookieStoreId();
+          const granted = await browser.permissions.request({ permissions: ["browsingData"] });
+          if (!granted) {
+            return;
+          }
+          const result = await Utils.resetCookiesForSite(site.hostname, cookieStoreId);
+          if (result === true) {
+            Logic.notify({messageId: "cookiesClearedSuccess", placeholders: [site.hostname]});
+          } else {
+            Logic.notify({messageId: "cookiesCouldNotBeCleared", placeholders: [site.hostname]});
+          }
+        });
        trElement.classList.add("menu-item", "hover-highlight", "keyboard-nav");
        tableElement.appendChild(trElement);
      });
@@ -1492,7 +1565,7 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
            } else {
              MozillaVPN.handleMozillaCtaClick("mac-edit-container-panel-btn");
            }
-           
+
          });

          this.switch.addEventListener("click", async() => {
@@ -1547,6 +1620,7 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
              this.updateProxyDependentUi(proxy);
            } else {
              this.switch.checked = false;
+              this.updateProxyDependentUi({});
              return;
            }
          });
@@ -1677,7 +1751,6 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
          this.currentCityName.textContent = proxyInfo.cityName;
          this.countryCode = proxyInfo.countryCode;
        }
-        return;
      }

      expandUi() {
@@ -1782,7 +1855,7 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
      });
      await Logic.refreshIdentities();
      Logic.showPreviousPanel();
-    } catch (e) {
+    } catch {
      Logic.showPreviousPanel();
    }
  },
@@ -1892,6 +1965,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 : {};
@@ -2194,6 +2268,47 @@ Logic.registerPanel(P_MOZILLA_VPN_SERVER_LIST, {
  }
 });

+// P_CLEAR_CONTAINER_STORAGE: Page for confirming container storage removal.
+// ----------------------------------------------------------------------------
+
+Logic.registerPanel(P_CLEAR_CONTAINER_STORAGE, {
+  panelSelector: "#clear-container-storage-panel",
+
+  // This method is called when the object is registered.
+  initialize() {
+
+    Utils.addEnterHandler(document.querySelector("#clear-container-storage-cancel-link"), () => {
+      const identity = Logic.currentIdentity();
+      Logic.showPanel(P_CONTAINER_INFO, identity, false, false);
+    });
+    Utils.addEnterHandler(document.querySelector("#close-clear-container-storage-panel"), () => {
+      const identity = Logic.currentIdentity();
+      Logic.showPanel(P_CONTAINER_INFO, identity, false, false);
+    });
+    Utils.addEnterHandler(document.querySelector("#clear-container-storage-ok-link"), async () => {
+      const identity = Logic.currentIdentity();
+      const userContextId = Utils.userContextId(identity.cookieStoreId);
+      const result = await browser.runtime.sendMessage({
+        method: "deleteContainerDataOnly",
+        message: { userContextId }
+      });
+      if (result.done === true) {
+        Logic.notify({messageId: "storageWasClearedConfirmation", placeholders: [identity.name]});
+      }
+      Logic.showPanel(P_CONTAINER_INFO, identity, false, false);
+    });
+  },
+
+  // This method is called when the panel is shown.
+  prepare() {
+    const identity = Logic.currentIdentity();
+    
+    // Populating the panel: name, icon, and warning message
+    document.getElementById("container-clear-storage-title").textContent = identity.name;
+    return Promise.resolve(null);
+  },
+});
+
 // P_CONTAINER_DELETE: Delete a container.
 // ----------------------------------------------------------------------------

@@ -2231,7 +2346,7 @@ Logic.registerPanel(P_CONTAINER_DELETE, {
        await Logic.removeIdentity(Utils.userContextId(Logic.currentIdentity().cookieStoreId));
        await Logic.refreshIdentities();
        Logic.showPreviousPanel();
-      } catch (e) {
+      } catch {
        Logic.showPreviousPanel();
      }
    });
@@ -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;
@@ -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);
@@ -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 = {

@@ -91,6 +94,9 @@ const Utils = {
    return result.join("");
  },

+  /**
+   * @returns {Promise<Tab|false>}
+   */
  async currentTab() {
    const activeTabs = await browser.tabs.query({ active: true, windowId: browser.windows.WINDOW_ID_CURRENT });
    if (activeTabs.length > 0) {
@@ -135,14 +141,32 @@ const Utils = {
    });
  },

-  async reloadInContainer(url, currentUserContextId, newUserContextId, tabIndex, active) {
+  resetCookiesForSite(pageUrl, cookieStoreId) {
+    return browser.runtime.sendMessage({ 
+      method: "resetCookiesForSite", 
+      pageUrl,
+      cookieStoreId,
+    });
+  },
+
+  /**
+   * @param {string} url
+   * @param {string} currentUserContextId
+   * @param {string} newUserContextId
+   * @param {number} tabIndex
+   * @param {boolean} active
+   * @param {number} [groupId]
+   * @returns {Promise<any>}
+   */
+  async reloadInContainer(url, currentUserContextId, newUserContextId, tabIndex, active, groupId = undefined) {
    return await browser.runtime.sendMessage({
      method: "reloadInContainer",
      url,
      currentUserContextId,
      newUserContextId,
      tabIndex,
-      active
+      active,
+      groupId
    });
  },

@@ -156,7 +180,8 @@ const Utils = {
        currentUserContextId: false,
        newUserContextId: assignedUserContextId,
        tabIndex: currentTab.index +1,
-        active:currentTab.active
+        active: currentTab.active,
+        groupId: currentTab.groupId
      });
    }
    await Utils.setOrRemoveAssignment(
@@ -166,6 +191,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;
@@ -1,12 +1,12 @@
 {
  "manifest_version": 2,
  "name": "Firefox Multi-Account Containers",
-  "version": "8.0.5",
+  "version": "8.3.7",
  "incognito": "not_allowed",
  "description": "__MSG_extensionDescription__",
  "icons": {
-    "48": "img/container-site-d-48.png",
-    "96": "img/container-site-d-96.png"
+    "48": "img/multiaccountcontainer-16.svg",
+    "96": "img/multiaccountcontainer-16.svg"
  },
  "homepage_url": "https://github.com/mozilla/multi-account-containers#readme",
  "permissions": [
@@ -26,13 +26,17 @@
  ],
  "optional_permissions": [
    "bookmarks",
+    "browsingData",
    "nativeMessaging",
    "proxy"
  ],
  "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": {
@@ -41,77 +45,111 @@
        "default": "Ctrl+Period",
        "mac": "MacCtrl+Period"
      },
-      "description": "Open containers panel"
+      "description": "__MSG_openContainerPanel__"
+    },
+    "sort_tabs": {
+      "description": "__MSG_sortTabsByContainer__"
    },
    "open_container_0": {
      "suggested_key": {
        "default": "Ctrl+Shift+1"
      },
-      "description": "Container Shortcut 1"
+      "description": "__MSG_containerShortcut__"
    },
    "open_container_1": {
      "suggested_key": {
        "default": "Ctrl+Shift+2"
      },
-      "description": "Container Shortcut 2"
+      "description": "__MSG_containerShortcut__"
    },
    "open_container_2": {
      "suggested_key": {
        "default": "Ctrl+Shift+3"
      },
-      "description": "Container Shortcut 3"
+      "description": "__MSG_containerShortcut__"
    },
    "open_container_3": {
      "suggested_key": {
        "default": "Ctrl+Shift+4"
      },
-      "description": "Container Shortcut 4"
+      "description": "__MSG_containerShortcut__"
    },
    "open_container_4": {
      "suggested_key": {
        "default": "Ctrl+Shift+5"
      },
-      "description": "Container Shortcut 5"
+      "description": "__MSG_containerShortcut__"
    },
    "open_container_5": {
      "suggested_key": {
        "default": "Ctrl+Shift+6"
      },
-      "description": "Container Shortcut 6"
+      "description": "__MSG_containerShortcut__"
    },
    "open_container_6": {
      "suggested_key": {
        "default": "Ctrl+Shift+7"
      },
-      "description": "Container Shortcut 7"
+      "description": "__MSG_containerShortcut__"
    },
    "open_container_7": {
      "suggested_key": {
        "default": "Ctrl+Shift+8"
      },
-      "description": "Container Shortcut 8"
+      "description": "__MSG_containerShortcut__"
    },
    "open_container_8": {
      "suggested_key": {
        "default": "Ctrl+Shift+9"
      },
-      "description": "Container Shortcut 9"
+      "description": "__MSG_containerShortcut__"
    },
    "open_container_9": {
      "suggested_key": {
        "default": "Ctrl+Shift+0"
      },
-      "description": "Container Shortcut 10"
+      "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": {
    "browser_style": true,
    "default_icon": "img/multiaccountcontainer-16.svg",
-    "default_title": "Multi-Account Containers",
+    "default_title": "Firefox Multi-Account Containers",
    "default_popup": "popup.html",
+    "default_area": "navbar",
    "theme_icons": [
      {
-        "light": "img/multiaccountcontainer-16-dark.svg",
+        "light": "img/multiaccountcontainer-16.svg",
        "dark": "img/multiaccountcontainer-16.svg",
        "size": 32
      }
@@ -120,7 +158,7 @@
  "page_action": {
    "browser_style": true,
    "default_icon": "img/container-openin-16.svg",
-    "default_title": "Always open this in a Container",
+    "default_title": "__MSG_alwaysOpenSiteInContainer__",
    "default_popup": "pageActionPopup.html",
    "pinned": false,
    "show_matches": ["*://*/*"]
@@ -144,7 +182,7 @@
  ],
  "default_locale": "en",
  "web_accessible_resources": [
-    "/img/container-site-d-24.png"
+    "/img/multiaccountcontainer-16.svg"
  ],
  "options_ui": {
    "page": "options.html",
@@ -40,7 +40,7 @@
          </div>
        </div>
      </div>
-      <h3 data-i18n-message-id="firefoxAccountsSync"></h3>
+      <h3 data-i18n-message-id="sync"></h3>
      <div class="settings-group">
        <label>
          <input type="checkbox" id="syncCheck">
@@ -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>

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

@@ -1,8 +1,9 @@
-<html>
+<html data-theme="auto">
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
-  <title>Multi-Account Containers</title>
+  <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>
@@ -44,7 +45,7 @@
  <div class="panel onboarding onboarding-panel-6 hide" id="onboarding-panel-6">
    <img class="onboarding-img" alt="" src="/img/Sync.svg" />
    <h3 class="onboarding-title" data-i18n-message-id="onboarding-6-header"></h3>
-    <p data-i18n-message-id="onboarding-6-description"></p>
+    <p data-i18n-message-id="onboarding-6-description-2"></p>
    <div class="half-button-wrapper">
      <a href="#" id="no-sync" class="half-onboarding-button grey-button keyboard-nav" tabindex="0" data-i18n-message-id="notNow"></a>
      <a href="#" id="start-sync-button" class="half-onboarding-button keyboard-nav" tabindex="0" data-i18n-message-id="startSyncing"></a>
@@ -53,8 +54,8 @@

  <div class="panel onboarding onboarding-panel-7 hide" id="onboarding-panel-7">
    <img class="onboarding-img" alt="" src="/img/Account.svg" />
-    <h3 class="onboarding-title" data-i18n-message-id="onboarding-7-header"></h3>
-    <p data-i18n-message-id="onboarding-7-description"></p>
+    <h3 class="onboarding-title" data-i18n-message-id="onboarding-7-header-2"></h3>
+    <p data-i18n-message-id="onboarding-7-description-2"></p>
    <div class="half-button-wrapper">
      <a href="#" id="no-sign-in" class="half-onboarding-button grey-button keyboard-nav" tabindex="0" data-i18n-message-id="notNow"></a>
      <a href="#" id="sign-in" class="half-onboarding-button keyboard-nav" tabindex="0" data-i18n-message-id="signIn"></a>
@@ -107,7 +108,8 @@
  </div>

  <div class="panel menu-panel container-panel hide" id="container-panel">
-    <h3 class="title">Multi-Account Containers</h3>
+    <span class="popup-notification-card"></span>
+    <h3 class="title">Firefox Multi-Account Containers</h3>
    <a href="#" class="info-icon" id="info-icon" tabindex="10">
      <img data-i18n-attribute-message-id="info" data-i18n-attribute="alt" alt="" src="/img/info.svg" / >
    </a>
@@ -154,11 +156,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>
@@ -180,24 +193,14 @@
        </tr>
      </table>
    </div>
-    <div id="moz-vpn-tout" class="moz-vpn-content expanded">
-      <div class="flx-row button-wrapper">
-        <h4 class="moz-vpn-logo">Mozilla VPN</h4>
-        <button class="controller dismiss-moz-vpn-tout" tab-index="0"></button>
-      </div>
-      <div class="collapsible-content flx-col controller-collapsible-content">
-        <div class="flx-row flx-space-between">
-          <span class="moz-vpn-subtitle" data-i18n-message-id="integrateContainers"></span>
-        </div>
-        <button id="moz-vpn-learn-more" class="moz-vpn-cta primary-cta" data-i18n-message-id="getMozillaVpn"></button>
-      </div>
-    </div>
+
    <v-padding-hack-footer></v-padding-hack-footer> <!--prevents last container from getting covered up by the 'manage containers button' when list is long-->
    <div class="bottom-btn keyboard-nav controller" id="manage-containers-link" tabindex="0" data-i18n-message-id="manageContainers"></div>
  </div>


  <div class="hide panel menu-panel container-info-panel" id="container-info-panel" tabindex="-1">
+    <span class="popup-notification-card"></span>
    <h3 class="title" id="container-info-title" data-i18n-attribute-message-id="personal"></h3>
    <button class="btn-return arrow-left controller keyboard-nav-back" id="close-container-info-panel" tabindex="0"></button>
    <hr>
@@ -234,6 +237,14 @@
            </span>
        </td>
      </tr>
+      <tr class="menu-item hover-highlight keyboard-nav" id="clear-container-storage" tabindex="0">
+        <td>
+          <img class="menu-icon clear-storage-icon" alt="" src="img/container-delete.svg" />
+          <span class="menu-text" id="clear-container-storage-info" data-i18n-message-id="clearContainerStorage"></span>
+            <span class="menu-arrow">
+            </span>
+        </td>
+      </tr>
    </table>
    <hr>
    <div class="sub-header-wrapper">
@@ -251,13 +262,14 @@
      </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>


  <div class="panel menu-panel container-picker-panel hide" id="container-picker-panel">
+    <span class="popup-notification-card"></span>
    <h3 class="title" id="picker-title">
-      Multi-Account Containers
+      Firefox Multi-Account Containers
    </h3>
    <button class="btn-return arrow-left controller keyboard-nav-back" id="close-container-picker-panel" tabindex="0"></button>
    <hr>
@@ -280,6 +292,7 @@
  </div>

  <div class="panel menu-panel edit-container-panel hide" id="edit-container-panel">
+    <span class="popup-notification-card"></span>
    <h3 class="title" id="container-edit-title" data-i18n-message-id="default"></h3>
    <button class="btn-return arrow-left controller" id="close-container-edit-panel"></button>
    <hr>
@@ -299,7 +312,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 +355,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 -->
@@ -369,6 +383,7 @@
  </div>

  <div class="panel menu-panel edit-container-assignments hide" id="edit-container-assignments">
+    <span class="popup-notification-card"></span>
    <h3 class="title" id="edit-assignments-title" data-i18n-message-id="default"></h3>
    <button class="btn-return arrow-left controller" id="close-container-assignment-panel"></button>
    <hr>
@@ -398,7 +413,23 @@
    </div>
    <div class="panel-footer">
      <a href="#" class="button expanded secondary footer-button cancel-button" data-i18n-message-id="cancel" id="delete-container-cancel-link"></a>
-      <a href="#" class="button expanded primary footer-button" data-i18n-message-id="ok" id="delete-container-ok-link"></a>
+      <a href="#" class="button expanded confirmation-destructive-ok-btn footer-button alert-text" data-i18n-message-id="ok" id="delete-container-ok-link"></a>
+    </div>
+  </div>
+
+  <div class="hide panel clear-container-storage-panel" id="clear-container-storage-panel">
+    <h3 class="title" id="container-clear-storage-title" data-i18n-message-id="default">
+    </h3>
+
+    <button class="btn-return arrow-left controller" id="close-clear-container-storage-panel"></button>
+    <hr>
+    <div class="panel-content clear-container-storage-confirm">
+      <h4 class="clear-container-storage-confirm-title" data-i18n-message-id="clearContainerStoragePanelTitle"></h4>
+      <p class="clear-container-storage-warning" data-i18n-message-id="clearContainerStorageConfirmation"></p>
+    </div>
+    <div class="panel-footer">
+      <a href="#" class="button expanded secondary footer-button cancel-button" data-i18n-message-id="cancel" id="clear-container-storage-cancel-link"></a>
+      <a href="#" class="button expanded confirmation-destructive-ok-btn footer-button alert-text" data-i18n-message-id="ok" id="clear-container-storage-ok-link"></a>
    </div>
  </div>

@@ -440,7 +471,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>
@@ -1,12 +0,0 @@
-module.exports = {
-  env: {
-    "node": true,
-    "mocha": true
-  },
-  "parserOptions": {
-    "ecmaVersion": 2018
-  },
-  "rules": {
-    "no-restricted-globals": ["error", "browser"]
-  }
-};
@@ -1,5 +1,4 @@
 if (!process.listenerCount("unhandledRejection")) {
-  // eslint-disable-next-line no-console
  process.on("unhandledRejection", r => console.log(r));
 }

@@ -32,6 +31,10 @@ const buildDom = async ({background = {}, popup = {}}) => {
        window.crypto = {
          getRandomValues: arr => crypto.randomBytes(arr.length),
        };
+        // By default, the mock contextMenus.remove() returns undefined;
+        // Let it return a Promise instead, so that .then() calls chained to
+        // it (in src/js/background/assignManager.js) do not fail.
+        window.browser.contextMenus.remove.resolves();
      }
    }
  };
@@ -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;
+    });
+  });
+});
@@ -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"
+      ]);
+    });
+  });
+});