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
60 changed files with 15427 additions and 1148 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,7 +0,0 @@
-language: node_js
-node_js:
-    - "lts/*"
-
-notifications:
-    irc:
-        - "ircs://irc.mozilla.org:6697/#testpilot-containers-bots"
@@ -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
@@ -11,7 +11,7 @@ git submodule init || die
 git submodule update --remote --depth 1 src/_locales || die

 print Y "Installing dependencies..."
-npm install || die
+npm install --legacy-peer-deps || die

 print Y "Running tests..."
 npm test
@@ -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.0",
-  "author": "Andrea Marchesini, Luke Crouch and Jonathan Kingston",
+  "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": "^1.3.2",
+    "@eslint/js": "^9.36.0",
+    "addons-linter": "^5.28.0",
    "ajv": "^6.6.3",
    "chai": "^4.2.0",
-    "eslint": "^6.6.0",
-    "eslint-plugin-no-unsanitized": "^2.0.0",
-    "eslint-plugin-promise": "^3.4.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" 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>
@@ -1,29 +1,122 @@
 body {
-  background: #fff;
-  color: #202023;
-}
+  --grey10: #e7e7e7;

-h3 {
-  margin-block-start: 2.5rem;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  background: #fff;
+  color: rgb(74, 74, 79);
+  font-size: 13px;
+  overflow: hidden;
 }

 h3:first-of-type {
-  margin-block-start: 1rem;
+  margin-block-start: 2.5rem;
 }

-p,
 label {
-  color: rgb(74, 74, 79);
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+
+label > span {
+  padding-inline-end: 4px;
+}
+
+.settings-group {
+  margin-block-end: 16px;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  padding-block-end: 1rem;
+}
+
+.settings-group p {
+  margin-inline-start: 24px;
+  margin-block: 4px 8px;
+}
+
+input[type="checkbox"] {
+  margin-inline: 0 8px;
+  margin-block: 1px auto;
+  inline-size: 16px;
+  block-size: 16px;
+}
+
+button {
+  margin-inline: 0 auto;
+}
+
+.keyboard-shortcut {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  max-inline-size: 70%;
+  align-items: center;
+}
+
+.bold {
+  font-weight: 600;
+}
+
+.moz-vpn-proxy-permissions {
+  margin-block: 0 2rem;
+  padding-block-end: 1rem;
+  border-block-end: 1px solid var(--grey10);
+  display: flex;
+  flex-direction: column;
+}
+
+h3.moz-vpn-proxy-permissions-title {
+  margin-block-start: 0;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.warning-icon {
+  display: flex;
+  align-items: center;
+}
+
+.warning-icon.show-warning::before {
+  background-image: url("/img/warning.svg");
+  background-size: 24px;
+  background-repeat: no-repeat;
+  background-position: center;
+  content: "";
+  display: block;
+  block-size: 24px;
+  inline-size: 24px;
+  margin-inline-end: 0.5rem;
+}
+
+.moz-vpn-proxy-permissions-title::before,
+.moz-vpn-proxy-permissions-title::after {
+  background-color: var(--grey10);
+  content: "";
+  height: 1px;
+  flex: 1 1 0%;
+}
+
+h3.moz-vpn-proxy-permissions-title::before {
+  margin-inline-end: 2rem;
+  margin-inline-start: -50%;
+}
+
+h3.moz-vpn-proxy-permissions-title::after {
+  margin-inline-start: 2rem;
+  margin-inline-end: -50%;
 }

@media (prefers-color-scheme: dark) {
  body {
-    background: #202023;
+    background: #23212a;
    color: #fff;
  }

-  p,
-  label {
+  p {
    color: rgb(177, 177, 179);
  }
 }
@@ -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;
    }
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.6929 16.0119L13.7399 6.10586C13.5739 5.77358 13.3185 5.49411 13.0025 5.29878C12.6866 5.10346 12.3224 5 11.9509 5C11.5795 5 11.2153 5.10346 10.8993 5.29878C10.5834 5.49411 10.328 5.77358 10.1619 6.10586L5.20894 16.0159C5.0575 16.3206 4.98633 16.659 5.00217 16.999C5.01801 17.3389 5.12033 17.6692 5.29946 17.9586C5.47858 18.2479 5.72858 18.4868 6.0258 18.6526C6.32302 18.8183 6.65762 18.9055 6.99794 18.9059H16.9029C17.2439 18.906 17.5792 18.819 17.8771 18.6531C18.1749 18.4872 18.4255 18.2479 18.6048 17.9579C18.7842 17.668 18.8864 17.337 18.9018 16.9964C18.9172 16.6557 18.8453 16.3169 18.6929 16.0119V16.0119ZM10.9509 8.90586C10.9509 8.64065 11.0563 8.38629 11.2438 8.19876C11.4314 8.01122 11.6857 7.90586 11.9509 7.90586C12.2162 7.90586 12.4705 8.01122 12.658 8.19876C12.8456 8.38629 12.9509 8.64065 12.9509 8.90586V12.9059C12.9509 13.1711 12.8456 13.4254 12.658 13.613C12.4705 13.8005 12.2162 13.9059 11.9509 13.9059C11.6857 13.9059 11.4314 13.8005 11.2438 13.613C11.0563 13.4254 10.9509 13.1711 10.9509 12.9059V8.90586ZM11.9509 17.1559C11.7037 17.1559 11.462 17.0826 11.2565 16.9452C11.0509 16.8078 10.8907 16.6126 10.7961 16.3842C10.7015 16.1558 10.6767 15.9045 10.725 15.662C10.7732 15.4195 10.8922 15.1968 11.0671 15.022C11.2419 14.8472 11.4646 14.7281 11.7071 14.6799C11.9496 14.6317 12.2009 14.6564 12.4293 14.751C12.6577 14.8456 12.8529 15.0058 12.9903 15.2114C13.1276 15.417 13.2009 15.6586 13.2009 15.9059C13.2009 16.2374 13.0692 16.5553 12.8348 16.7897C12.6004 17.0242 12.2825 17.1559 11.9509 17.1559V17.1559Z" fill="#FF4F5E" />
+</svg>
@@ -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) => {
@@ -188,13 +195,18 @@ window.assignManager = {
    // The following blocks potentially dangerous requests for privacy that come without a tabId

    if(requestInfo.tabId === -1) {
-      return {type: "direct"};
+      return {};
    }

    const tab = await browser.tabs.get(requestInfo.tabId);
    const result = await proxifiedContainers.retrieve(tab.cookieStoreId);
    if (!result || !result.proxy) {
-      return {type: "direct"};
+      return {};
+    }
+
+    // proxyDNS only works for SOCKS proxies
+    if (["socks", "socks4"].includes(result.proxy.type)) {
+      result.proxy.proxyDNS = true;
    }

    if (!result.proxy.mozProxyEnabled) {
@@ -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);
@@ -382,6 +396,12 @@ window.assignManager = {
    return currentContainerState && currentContainerState.isIsolated;
  },

+  maybeAddProxyListeners() {
+    if (browser.proxy) {
+      browser.proxy.onRequest.addListener(this.handleProxifiedRequest, {urls: ["<all_urls>"]});
+    }
+  },
+
  init() {
    browser.contextMenus.onClicked.addListener((info, tab) => {
      info.bookmarkId ?
@@ -390,7 +410,7 @@ window.assignManager = {
    });

    // Before anything happens we decide if the request should be proxified
-    browser.proxy.onRequest.addListener(this.handleProxifiedRequest, {urls: ["<all_urls>"]});
+    this.maybeAddProxyListeners();

    // Before a request is handled by the browser we decide if we should
    // route through a different container
@@ -462,9 +482,7 @@ window.assignManager = {
  },

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

  async _onClickedHandler(info, tab) {
@@ -559,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
@@ -610,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;
@@ -641,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) {
@@ -666,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"],
@@ -680,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"],
    });
  },
@@ -698,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.
    //
@@ -717,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;
@@ -734,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) => {
@@ -752,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"],
    });

@@ -768,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,17 +13,140 @@ 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) {
+    permissions.permissions.forEach(async permission => {
+      switch (permission) {
+      case "bookmarks":
+        assignManager.resetBookmarksMenuItem();
+        break;
+
+      case "nativeMessaging":
+        await MozillaVPN_Background.removeMozillaVpnProxies();
+        await browser.runtime.reload();
+        break;
+
+      case "proxy":
+        assignManager.maybeAddProxyListeners();
+        break;
      }
    });
  },
@@ -28,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;
@@ -96,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;
@@ -146,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}`);
    }
  },
@@ -282,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.
@@ -295,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) {
@@ -1,4 +1,4 @@
-const MAJOR_VERSIONS = ["2.3.0", "2.4.0", "6.2.0", "8.0.0"];
+const MAJOR_VERSIONS = ["2.3.0", "2.4.0", "6.2.0", "8.0.2"];
 const badge = {
  async init() {
    const currentWindow = await browser.windows.getCurrent();
@@ -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>
@@ -20,12 +20,12 @@ const messageHandler = {
      case "resetSync":
        response = sync.resetSync();
        break;
-      case "resetBookmarksContext":
-        response = assignManager.resetBookmarksMenuItem();
-        break;
      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;
@@ -48,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;
@@ -88,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
@@ -134,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;
@@ -223,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"]
+            });
          }
        }
      }
@@ -265,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});
@@ -100,6 +100,19 @@ const MozillaVPN_Background = {
  get isolationKey() {
    return this._isolationKey;
  },
+
+  async removeMozillaVpnProxies() {
+    const proxies = await proxifiedContainers.retrieveAll();
+    if (!proxies) {
+      return;
+    }
+    for (const proxyObj of proxies) {
+      const { proxy } = proxyObj;
+      if (proxy.countryCode !== undefined) {
+        await proxifiedContainers.delete(proxyObj.cookieStoreId);
+      }
+    }
+  },
 };

 MozillaVPN_Background.init();
@@ -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);
@@ -5,6 +5,11 @@ const MozillaVPN = {
    const mozillaVpnInstalled = await browser.runtime.sendMessage({ method: "MozillaVPN_getInstallationStatus" });
    this.handleStatusIndicatorsInContainerLists(mozillaVpnInstalled);

+    const permissionsEnabled = await this.bothPermissionsEnabled();
+    if (!permissionsEnabled) {
+      return;
+    }
+
    const proxies = await this.getProxies(identities);
    if (Object.keys(proxies).length === 0) {
      return;
@@ -29,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";
          }
@@ -63,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;
-      }
    });
  },

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

+  async bothPermissionsEnabled() {
+    return await browser.permissions.contains({ permissions: ["proxy", "nativeMessaging"] });
+  },
+

  async getProxyWarnings(proxyObj) {
    if (!proxyObj) {
@@ -245,7 +248,7 @@ const MozillaVPN = {
      randomInteger = (randomInteger - server.weight);
    }
    return nextServer;
-  }
+  },
 };

 window.MozillaVPN = MozillaVPN;
@@ -1,17 +1,45 @@
 const NUMBER_OF_KEYBOARD_SHORTCUTS = 10;

-async function requestPermissions() {
-  const checkbox = document.querySelector("#bookmarksPermissions");
-  if (checkbox.checked) {
-    const granted = await browser.permissions.request({permissions: ["bookmarks"]});
-    if (!granted) { 
-      checkbox.checked = false; 
+async function setUpCheckBoxes() {
+  document.querySelectorAll("[data-permission-id]").forEach(async(el) => {
+    const permissionId = el.dataset.permissionId;
+    const permissionEnabled = await browser.permissions.contains({ permissions: [permissionId] });
+    el.checked = !!permissionEnabled;
+  });
+}
+
+function disablePermissionsInputs() {
+  document.querySelectorAll("[data-permission-id").forEach(el => {
+    el.disabled = true;
+  });
+}
+
+function enablePermissionsInputs() {
+  document.querySelectorAll("[data-permission-id").forEach(el => {
+    el.disabled = false;
+  });
+}
+
+document.querySelectorAll("[data-permission-id").forEach(async(el) => {
+  const permissionId = el.dataset.permissionId;
+  el.addEventListener("change", async() => {
+    if (el.checked) {
+      disablePermissionsInputs();
+      const granted = await browser.permissions.request({ permissions: [permissionId] });
+      if (!granted) {
+        el.checked = false;
+        enablePermissionsInputs();
+      }
      return;
    }
-  } else {
-    await browser.permissions.remove({permissions: ["bookmarks"]});
-  }
-  browser.runtime.sendMessage({ method: "resetBookmarksContext" });
+    await browser.permissions.remove({ permissions: [permissionId] });
+  });
+});
+
+async function maybeShowPermissionsWarningIcon() {
+  const bothMozillaVpnPermissionsEnabled = await MozillaVPN.bothPermissionsEnabled();
+  const permissionsWarningEl = document.querySelector(".warning-icon");
+  permissionsWarningEl.classList.toggle("show-warning", !bothMozillaVpnPermissionsEnabled);
 }

 async function enableDisableSync() {
@@ -25,15 +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 hasPermission = await browser.permissions.contains({permissions: ["bookmarks"]});
  const { syncEnabled } = await browser.storage.local.get("syncEnabled");
  const { replaceTabEnabled } = await browser.storage.local.get("replaceTabEnabled");
-  if (hasPermission) {
-    document.querySelector("#bookmarksPermissions").checked = true;
-  }
+  const { currentThemeId } = await browser.storage.local.get("currentThemeId");
+
  document.querySelector("#syncCheck").checked = !!syncEnabled;
  document.querySelector("#replaceTabCheck").checked = !!replaceTabEnabled;
+  document.querySelector("#changeTheme").selectedIndex = currentThemeId;
  setupContainerShortcutSelects();
 }

@@ -78,13 +111,38 @@ function resetOnboarding() {
  browser.storage.local.set({"onboarding-stage": 0});
 }

+async function resetPermissionsUi() {
+  await maybeShowPermissionsWarningIcon();
+  await setUpCheckBoxes();
+  enablePermissionsInputs();
+}
+
+browser.permissions.onAdded.addListener(resetPermissionsUi);
+browser.permissions.onRemoved.addListener(resetPermissionsUi);
+
 document.addEventListener("DOMContentLoaded", setupOptions);
-document.querySelector("#bookmarksPermissions").addEventListener( "change", requestPermissions);
 document.querySelector("#syncCheck").addEventListener( "change", enableDisableSync);
 document.querySelector("#replaceTabCheck").addEventListener( "change", enableDisableReplaceTab);
-document.querySelector("button").addEventListener("click", resetOnboarding);
+document.querySelector("#changeTheme").addEventListener( "change", changeTheme);

+maybeShowPermissionsWarningIcon();
 for (let i=0; i < NUMBER_OF_KEYBOARD_SHORTCUTS; i++) {
  document.querySelector("#open_container_"+i)
    .addEventListener("change", storeShortcutChoice);
-}
+}
+
+document.querySelectorAll("[data-btn-id]").forEach(btn => {
+  btn.addEventListener("click", () => {
+    switch (btn.dataset.btnId) {
+    case "reset-onboarding":
+      resetOnboarding();
+      break;
+    case "moz-vpn-learn-more":
+      browser.tabs.create({
+        url: MozillaVPN.attachUtmParameters("https://support.mozilla.org/kb/protect-your-container-tabs-mozilla-vpn", "options-learn-more")
+      });
+      break;
+    }
+  });
+});
+resetPermissionsUi();
@@ -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);
@@ -643,14 +714,29 @@ Logic.registerPanel(P_ONBOARDING_8, {

  // This method is called when the object is registered.
  initialize() {
-    Utils.addEnterHandler(document.querySelector("#onboarding-done-btn"), async () => {
-      await Logic.setOnboardingStage(8);
-      Logic.showPanel(P_CONTAINERS_LIST);
+    document.querySelectorAll(".onboarding-done").forEach(el => {
+      Utils.addEnterHandler(el, async () => {
+        await Logic.setOnboardingStage(8);
+        Logic.showPanel(P_CONTAINERS_LIST);
+      });
    });
+
  },

  // This method is called when the panel is shown.
-  prepare() {
+  async prepare() {
+    const mozillaVpnPermissionsEnabled = await MozillaVPN.bothPermissionsEnabled();
+    if (!mozillaVpnPermissionsEnabled) {
+      const panel = document.querySelector(".onboarding-panel-8");
+      panel.classList.add("optional-permissions-disabled");
+
+      Utils.addEnterHandler(panel.querySelector("#onboarding-enable-permissions"), async () => {
+        const granted = await browser.permissions.request({ permissions: ["proxy", "nativeMessaging"] });
+        if (granted) {
+          await Logic.setOnboardingStage(8);
+        }
+      });
+    }
    return Promise.resolve(null);
  },
 });
@@ -662,24 +748,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {

  // This method is called when the object is registered.
  async initialize() {
-    const mozillaVpnToutName = "moz-tout-main-panel";
-
    await browser.runtime.sendMessage({ method: "MozillaVPN_queryStatus" });
-    Utils.addEnterHandler(document.querySelector("#moz-vpn-learn-more"), () => {
-      MozillaVPN.handleMozillaCtaClick("mac-main-panel-btn");
-      window.close();
-    });
-    Utils.addEnterHandler(document.querySelector(".dismiss-moz-vpn-tout"), async() => {
-      const { mozillaVpnHiddenToutsList } = await browser.storage.local.get("mozillaVpnHiddenToutsList");
-      if (typeof(mozillaVpnHiddenToutsList) === "undefined") {
-        await browser.storage.local.set({ "mozillaVpnHiddenToutsList": [] });
-      }
-      document.querySelector("#moz-vpn-tout").classList.add("disappear");
-      mozillaVpnHiddenToutsList.push({
-        name: mozillaVpnToutName
-      });
-      await browser.storage.local.set({ mozillaVpnHiddenToutsList });
-    });
    Utils.addEnterHandler(document.querySelector("#manage-containers-link"), (e) => {
      if (!e.target.classList.contains("disable-edit-containers")) {
        Logic.showPanel(MANAGE_CONTAINERS_PICKER);
@@ -694,30 +763,43 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
    Utils.addEnterHandler(document.querySelector("#always-open-in"), () => {
      Logic.showPanel(ALWAYS_OPEN_IN_PICKER);
    });
-    Utils.addEnterHandler(document.querySelector("#info-icon"), () => {
-      browser.runtime.openOptionsPage();
-    });
    Utils.addEnterHandler(document.querySelector("#sort-containers-link"), async () => {
      try {
        await browser.runtime.sendMessage({
          method: "sortTabs"
        });
        window.close();
-      } catch (e) {
+      } catch {
        window.close();
      }
    });

-    const mozVpnTout = document.getElementById("moz-vpn-tout");
-    const mozillaVpnInstalled = await browser.runtime.sendMessage({ method: "MozillaVPN_getInstallationStatus" });
-    if (mozillaVpnInstalled) {
-      return mozVpnTout.remove();
+    const mozillaVpnPermissionsWarningDotName = "moz-permissions-warning-dot";
+
+    let { mozillaVpnHiddenToutsList } = await browser.storage.local.get("mozillaVpnHiddenToutsList");
+    if (typeof(mozillaVpnHiddenToutsList) === "undefined") {
+      await browser.storage.local.set({ "mozillaVpnHiddenToutsList": [] });
+      mozillaVpnHiddenToutsList = [];
    }
-    const { mozillaVpnHiddenToutsList } = await browser.storage.local.get("mozillaVpnHiddenToutsList");
-    const mozillaVpnToutShouldBeHidden = mozillaVpnHiddenToutsList && mozillaVpnHiddenToutsList.find(tout => tout.name === mozillaVpnToutName);
-    if (mozillaVpnToutShouldBeHidden) {
-      return mozVpnTout.remove();
+
+    // 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);
+    const optionsIcon = document.getElementById("info-icon");
+    if (optionsIcon && !bothMozillaVpnPermissionsEnabled && !warningDotShouldBeHidden) {
+      optionsIcon.classList.add("info-icon-alert");
    }
+
+    Utils.addEnterHandler((document.querySelector("#info-icon")), async() => {
+      browser.runtime.openOptionsPage();
+      if (!mozillaVpnHiddenToutsList.find(tout => tout.name === mozillaVpnPermissionsWarningDotName)) {
+        optionsIcon.classList.remove("info-icon-alert");
+        mozillaVpnHiddenToutsList.push({
+          name: mozillaVpnPermissionsWarningDotName
+        });
+      }
+      await browser.storage.local.set({ mozillaVpnHiddenToutsList });
+    });
  },

  unregister() {
@@ -749,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"/>
@@ -777,7 +858,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
            cookieStoreId: identity.cookieStoreId
          });
          window.close();
-        } catch (e) {
+        } catch {
          window.close();
        }
      });
@@ -788,7 +869,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
            cookieStoreId: identity.cookieStoreId
          });
          window.close();
-        } catch (e) {
+        } catch {
          window.close();
        }
      });
@@ -799,7 +880,6 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
      Utils.addEnterHandler(showPanelButton, () => {
        Logic.showPanel(P_CONTAINER_INFO, identity);
      });
-
    }

    const list = document.querySelector("#identities-list");
@@ -809,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);

@@ -838,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.");
    }

@@ -873,7 +954,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
          cookieStoreId: identity.cookieStoreId
        });
        window.close();
-      } catch (e) {
+      } catch {
        window.close();
      }
    });
@@ -885,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" : "";
@@ -908,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);
  },

@@ -927,7 +1016,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
          cookieStoreId: Logic.currentCookieStoreId()
        });
        window.close();
-      } catch (e) {
+      } catch {
        window.close();
      }
    });
@@ -1004,7 +1093,7 @@ Logic.registerPanel(OPEN_NEW_CONTAINER_PICKER, {
          cookieStoreId: identity.cookieStoreId
        });
        window.close();
-      } catch (e) {
+      } catch {
        window.close();
      }
    };
@@ -1198,7 +1287,8 @@ Logic.registerPanel(REOPEN_IN_CONTAINER_PICKER, {
        false,
        newUserContextId,
        currentTab.index + 1,
-        currentTab.active
+        currentTab.active,
+        currentTab.groupId
      );
      window.close();
    };
@@ -1208,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`
@@ -1227,7 +1318,8 @@ Logic.registerPanel(REOPEN_IN_CONTAINER_PICKER, {
          false,
          0,
          currentTab.index + 1,
-          currentTab.active
+          currentTab.active,
+          currentTab.groupId
        );
        window.close();
      });
@@ -1368,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");
@@ -1384,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);
      });
@@ -1438,18 +1547,25 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
      async connectedCallback() {
        const { mozillaVpnHiddenToutsList } = await browser.storage.local.get("mozillaVpnHiddenToutsList");
        const mozillaVpnCollapseEditContainerTout = mozillaVpnHiddenToutsList && mozillaVpnHiddenToutsList.find(tout => tout.name === this.toutName);
+        const mozillaVpnInstalled = await browser.runtime.sendMessage({ method: "MozillaVPN_getInstallationStatus" });

        this.hideShowButton.addEventListener("click", this);

-        if (mozillaVpnCollapseEditContainerTout) {
+        if (mozillaVpnCollapseEditContainerTout && !mozillaVpnInstalled) {
          this.collapseUi();
        }

        // Add listeners
        if (!this.classList.contains("has-attached-listeners")) {

-          this.primaryCta.addEventListener("click", () => {
-            MozillaVPN.handleMozillaCtaClick("mac-edit-container-panel-btn");
+          const bothMozillaVpnPermissionsEnabled = await MozillaVPN.bothPermissionsEnabled();
+          this.primaryCta.addEventListener("click", async() => {
+            if (!bothMozillaVpnPermissionsEnabled && mozillaVpnInstalled) {
+              await browser.permissions.request({ permissions: ["proxy", "nativeMessaging"] });
+            } else {
+              MozillaVPN.handleMozillaCtaClick("mac-edit-container-panel-btn");
+            }
+
          });

          this.switch.addEventListener("click", async() => {
@@ -1502,9 +1618,9 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
              await proxifiedContainers.set(id.cookieStoreId, proxy);
              this.switch.checked = true;
              this.updateProxyDependentUi(proxy);
-
            } else {
              this.switch.checked = false;
+              this.updateProxyDependentUi({});
              return;
            }
          });
@@ -1518,24 +1634,35 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
        const mozillaVpnInstalled = await browser.runtime.sendMessage({ method: "MozillaVPN_getInstallationStatus" });
        const mozillaVpnConnected = await browser.runtime.sendMessage({ method: "MozillaVPN_getConnectionStatus" });

-        if (!mozillaVpnInstalled) {
+        this.subtitle.textContent = browser.i18n.getMessage("integrateContainers");

-          this.hideEls(this.switch, this.switchLabel, this.currentServerButton);
-          this.subtitle.textContent = browser.i18n.getMessage("protectThisContainer");
-          this.primaryCta.addEventListener("click", this);
+        const bothMozillaVpnPermissionsEnabled = await MozillaVPN.bothPermissionsEnabled();

-        } else {
-
-          // Mozilla VPN installed...
+        if (mozillaVpnInstalled && !bothMozillaVpnPermissionsEnabled) {
+          this.subtitle.style.flex = "1 1 100%";
+          this.classList.remove("show-server-button");
+          this.subtitle.textContent = browser.i18n.getMessage("additionalPermissionNeeded");
+          this.hideEls(this.hideShowButton, this.switch, this.switchLabel, this.currentServerButton);
+          this.primaryCta.style.display = "block";
+          this.primaryCta.textContent = browser.i18n.getMessage("enable");
+          return;
+        }

+        if (mozillaVpnInstalled) {
          // Hide cta and hide/show button
          this.hideEls(this.primaryCta, this.hideShowButton);

          // Update subtitle
          this.subtitle.textContent = mozillaVpnConnected ? browser.i18n.getMessage("useCustomLocation") : browser.i18n.getMessage("mozillaVpnMustBeOn");
+          this.subtitle.style.flex = "1 1 80%";
+          this.currentServerButton.style.display = "flex";
        }

-        if (!mozillaVpnConnected) {
+        if (mozillaVpnConnected) {
+          [this.switchLabel, this.switch].forEach(el => {
+            el.style.display = "inline-block";
+          });
+        } else {
          this.hideEls(this.switch, this.switchLabel, this.currentServerButton);
          this.switch.checked = false;
        }
@@ -1582,17 +1709,15 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
        this.mozProxyEnabledInput.value = proxyInfo.mozProxyEnabled;
        this.proxyAddressInput.value = `${proxyInfo.type}://${proxyInfo.host}:${proxyInfo.port}`;

-        if (typeof(proxyInfo.countryCode) === "undefined" && proxyInfo.type !== "direct") {
+        if (typeof(proxyInfo.countryCode) === "undefined" && proxyInfo.type) {
          // Set custom proxy URL below 'Advanced proxy settings' button label
          this.advancedProxyAddress.textContent = `${proxyInfo.type}://${proxyInfo.host}:${proxyInfo.port}`;
        }
      }

      async updateProxyDependentUi(proxyInfo) {
-        const containerHasProxy = typeof(proxyInfo) !== "undefined";
-
        const mozillaVpnProxyLocationAvailable = (proxy) => {
-          return typeof(proxy.countryCode) !== "undefined" && typeof(proxyInfo.cityName) !== "undefined";
+          return typeof(proxy) !== "undefined" && typeof(proxy.countryCode) !== "undefined" && typeof(proxy.cityName) !== "undefined";
        };

        const mozillaVpnProxyIsEnabled = (proxy) => {
@@ -1605,7 +1730,7 @@ Logic.registerPanel(P_CONTAINER_EDIT, {

        const mozillaVpnConnected = await browser.runtime.sendMessage({ method: "MozillaVPN_getConnectionStatus" });
        if (
-          !containerHasProxy ||
+          !proxyInfo ||
          !mozillaVpnProxyLocationAvailable(proxyInfo) ||
          !mozillaVpnConnected
        ) {
@@ -1620,23 +1745,20 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
        }

        // Populate inputs and server button with current or previously stored mozilla vpn proxy
-        if(containerHasProxy && mozillaVpnProxyLocationAvailable(proxyInfo)) {
+        if(proxyInfo && mozillaVpnProxyLocationAvailable(proxyInfo)) {
          this.currentCountryFlag.style.backgroundImage = `url("./img/flags/${proxyInfo.countryCode.toUpperCase()}.png")`;
          this.currentCountryFlag.style.backgroundImage = proxyInfo.countryCode + ".png";
          this.currentCityName.textContent = proxyInfo.cityName;
          this.countryCode = proxyInfo.countryCode;
        }
-        return;
      }

      expandUi() {
        this.classList.add("expanded");
-        this.style.maxHeight = 500 + "px";
      }

      collapseUi() {
        this.classList.remove("expanded");
-        this.style.maxHeight = 56 + "px";
      }

      hideEls(...els) {
@@ -1673,6 +1795,10 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
    customElements.define("moz-vpn-container-ui", MozVpnContainerUi);
    const mozillaVpnUi = document.querySelector("moz-vpn-container-ui");
    mozillaVpnUi.updateMozVpnStatusDependentUi();
+
+    browser.permissions.onAdded.addListener(() => { mozillaVpnUi.updateMozVpnStatusDependentUi(); });
+    browser.permissions.onRemoved.addListener(() => { mozillaVpnUi.updateMozVpnStatusDependentUi(); });
+
    const advancedProxySettingsButton = document.querySelector(".advanced-proxy-settings-btn");
    Utils.addEnterHandler(advancedProxySettingsButton, () => {
      Logic.showPanel(P_ADVANCED_PROXY_SETTINGS, this.getEditInProgressIdentity(), false, false);
@@ -1729,7 +1855,7 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
      });
      await Logic.refreshIdentities();
      Logic.showPreviousPanel();
-    } catch (e) {
+    } catch {
      Logic.showPreviousPanel();
    }
  },
@@ -1835,23 +1961,23 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
      return;
    }

-    const proxyData = await proxifiedContainers.retrieve(identity.cookieStoreId);
-    if (proxyData) {
-      if (proxyData.proxy && proxyData.proxy.mozProxyEnabled && !mozillaVpnConnected) {
+    const proxyPermissionEnabled = await browser.permissions.contains({ permissions: ["proxy"] });
+    if (proxyPermissionEnabled) {
+      const proxyData = await proxifiedContainers.retrieve(identity.cookieStoreId);
+      if (proxyData && proxyData.proxy.mozProxyEnabled && !mozillaVpnConnected) {
+        mozillaVpnUi.updateProxyDependentUi({});
        return;
      }
-      mozillaVpnUi.updateProxyDependentUi(proxyData.proxy);
-      return;
+      const proxy = proxyData ? proxyData.proxy : {};
+      mozillaVpnUi.updateProxyDependentUi(proxy);
    }
-
-    mozillaVpnUi.updateProxyDependentUi({});
  },
 });

 Logic.registerPanel(P_ADVANCED_PROXY_SETTINGS, {
  panelSelector: "#advanced-proxy-settings-panel",

-  initialize(){
+  async initialize() {
    this._proxyForm = document.querySelector(".advanced-proxy-panel-content");
    this._advancedProxyInput = this._proxyForm.querySelector("#edit-advanced-proxy-input");
    const clearAdvancedProxyInput = this._proxyForm.querySelector("#clear-advanced-proxy-input");
@@ -1929,10 +2055,52 @@ Logic.registerPanel(P_ADVANCED_PROXY_SETTINGS, {

  async prepare() {
    const identity = Logic.currentIdentity();
-    console.log(this._advancedProxyInput);
+    const advancedProxyInput = document.getElementById("edit-advanced-proxy-input");
+
+    const proxyPermissionEnabled = await browser.permissions.contains({ permissions: ["proxy"] });
+    if (!proxyPermissionEnabled) {
+
+      // Restrict tabbing inside advanced proxy panel to proxy permissions ui
+      const panel = document.getElementById("advanced-proxy-settings-panel");
+      const clickableEls = panel.querySelectorAll("button, a, input");
+      clickableEls.forEach(el => {
+        if (!el.dataset.tabGroup && el.id !== "advanced-proxy-settings-return") {
+          el.setAttribute("tabindex", "-1");
+          el.disabled = true;
+        }
+      });
+
+      // Show proxy permission overlay
+      const permissionsOverlay = document.getElementById("permissions-overlay");
+      permissionsOverlay.style.display = "flex";
+
+      // Add "enable" button handling
+      const enableProxyPermissionsButton = document.getElementById("enable-proxy-permissions");
+
+      enableProxyPermissionsButton.addEventListener("click", async() => {
+        const granted = await browser.permissions.request({ permissions: ["proxy"] });
+        if (granted) {
+          permissionsOverlay.style.display = "none";
+          // restore normal panel tabbing
+          clickableEls.forEach(el => {
+            el.tabindex = "0";
+            el.disabled = false;
+          });
+        }
+      });
+    }
+

    // reset input
-    this._advancedProxyInput.value = "";
+    const resetProxyInput = () => {
+      if (!advancedProxyInput) {
+        return;
+      }
+      advancedProxyInput.value = "";
+    };
+
+    resetProxyInput();
+
    this.hideInvalidEntryWarning();

    const setProxyInputPlaceholder = (proxy) => {
@@ -1940,8 +2108,8 @@ Logic.registerPanel(P_ADVANCED_PROXY_SETTINGS, {
    };

    const edit_proxy_dom = function(proxy) {
-      if (proxy.type === "direct" || typeof proxy.type === "undefined" || MozillaVPN.proxyIsDisabled(proxy)) {
-        this._advancedProxyInput.value = "";
+      if (!proxy.type || MozillaVPN.proxyIsDisabled(proxy)) {
+        resetProxyInput();
        return;
      }
      return setProxyInputPlaceholder(proxy);
@@ -1951,7 +2119,7 @@ Logic.registerPanel(P_ADVANCED_PROXY_SETTINGS, {
    if (proxyData) {
      edit_proxy_dom(proxyData.proxy);
    } else {
-      this._advancedProxyInput.value = "";
+      resetProxyInput();
    }
    const containerColor = document.querySelector(".proxy-title-container-color");
    containerColor.dataset.identityColor = identity.color;
@@ -2100,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.
 // ----------------------------------------------------------------------------

@@ -2137,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();
      }
    });
@@ -2149,15 +2358,6 @@ Logic.registerPanel(P_CONTAINER_DELETE, {

    // Populating the panel: name, icon, and warning message
    document.getElementById("container-delete-title").textContent = identity.name;
-
-    const totalNumberOfTabs = identity.numberOfHiddenTabs + identity.numberOfOpenTabs;
-    let warningMessage = "";
-    if (totalNumberOfTabs > 0) {
-      const grammaticalNumTabs = totalNumberOfTabs > 1 ? "tabs" : "tab";
-      warningMessage = `If you remove this container now, ${totalNumberOfTabs} container ${grammaticalNumTabs} will be closed.`;
-    }
-    document.getElementById("delete-container-tab-warning").textContent = warningMessage;
-
    return Promise.resolve(null);
  },
 });
@@ -44,14 +44,14 @@ 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;
    }

    if (mozillaVpnData && mozillaVpnData.mozProxyEnabled === undefined) {
-      matches.groups.type = "direct";
+      matches.groups.type = null;
    }

    if (!mozillaVpnData) {
@@ -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,18 +1,12 @@
 {
  "manifest_version": 2,
  "name": "Firefox Multi-Account Containers",
-  "version": "8.0.0",
+  "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"
-  },
-  "applications": {
-    "gecko": {
-      "id": "@testpilot-containers",
-      "strict_min_version": "67.0"
-    }
+    "48": "img/multiaccountcontainer-16.svg",
+    "96": "img/multiaccountcontainer-16.svg"
  },
  "homepage_url": "https://github.com/mozilla/multi-account-containers#readme",
  "permissions": [
@@ -24,20 +18,25 @@
    "history",
    "idle",
    "management",
-    "nativeMessaging",
    "storage",
    "unlimitedStorage",
    "tabs",
    "webRequestBlocking",
-    "webRequest",
-    "proxy"
+    "webRequest"
  ],
  "optional_permissions": [
-    "bookmarks"
+    "bookmarks",
+    "browsingData",
+    "nativeMessaging",
+    "proxy"
  ],
  "browser_specific_settings": {
    "gecko": {
-      "id": "@testpilot-containers"
+      "id": "@testpilot-containers",
+      "strict_min_version": "91.1.0",
+      "data_collection_permissions": {
+        "required": ["none"]
+      }
    }
  },
  "commands": {
@@ -46,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
      }
@@ -125,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": ["*://*/*"]
@@ -149,7 +182,7 @@
  ],
  "default_locale": "en",
  "web_accessible_resources": [
-    "/img/container-site-d-24.png"
+    "/img/multiaccountcontainer-16.svg"
  ],
  "options_ui": {
    "page": "options.html",
@@ -4,85 +4,137 @@
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="./js/i18n.js"></script>
+    <script type="text/javascript" src="./js/mozillaVpn.js"></script>
+    <script type="text/javascript" src="./js/proxified-containers.js"></script>
    <link rel="stylesheet" href="css/options.css">
  </head>

  <body>
    <form>
      <h3 data-i18n-message-id="optionalPermissions"></h3>
-      <label >
-        <input type="checkbox" id="bookmarksPermissions">
-        <span data-i18n-message-id="enableBookMarkMenus"></span>
+      <div class="settings-group">
+        <label class="permission">
+          <input type="checkbox" data-permission-id="bookmarks" id="bookmarksPermissions">
+          <span class="bold" data-i18n-message-id="enableBookMarkMenus"></span>
+        </label>
+        <p><em data-i18n-message-id="enableBookMarkMenusDescription"></em></p>
+      </div>
+      <div id="moz-vpn-proxy-permissions" class="moz-vpn-proxy-permissions">
+        <h3 class="moz-vpn-proxy-permissions-title">
+          <span data-i18n-message-id="mozillaVpnAndProxyPermissionsTitle" class="warning-icon"></span>
+        </h3>
+        <div class="moz-vpn-proxy-permissions-content">
+          <div class="settings-group">
+            <label class="permission">
+              <input type="checkbox" data-permission-id="nativeMessaging">
+              <span class="bold" data-i18n-message-id="nativeMessagingPermissionTitle"></span>
+            </label>
+            <p><em data-i18n-message-id="nativeMessagingPermissionDescription"></em></p>
+          </div>
+          <div class="settings-group">
+            <label class="permission">
+              <input type="checkbox" data-permission-id="proxy">
+              <span class="bold" data-i18n-message-id="proxyPermissionTitle"></span>
+            </label>
+            <p><em data-i18n-message-id="proxyPermissionDescription"></em></p>
+          </div>
+        </div>
+      </div>
+      <h3 data-i18n-message-id="sync"></h3>
+      <div class="settings-group">
+        <label>
+          <input type="checkbox" id="syncCheck">
+          <span class="bold" data-i18n-message-id="enableSync"></span>
+        </label>
+        <p><em data-i18n-message-id="enableSyncDescription"></em></p>
+      </div>

-      </label>
-      <p><em data-i18n-message-id="enableBookMarkMenusDescription"></em></p>
-      <h3 data-i18n-message-id="firefoxAccountsSync"></h3>
-      <label>
-        <input type="checkbox" id="syncCheck">
-        <span data-i18n-message-id="enableSync"></span>
-      </label>
-      <p><em data-i18n-message-id="enableSyncDescription"></em></p>
      <h3 data-i18n-message-id="tabBehavior"></h3>
-      <label>
-        <input type="checkbox" id="replaceTabCheck">
-        <span data-i18n-message-id="replaceTab"></span>
-      </label>
-      <p><em data-i18n-message-id="replaceTabDescription"></em></p>
+
+      <div class="settings-group">
+        <label>
+          <input type="checkbox" id="replaceTabCheck">
+          <span class="bold" data-i18n-message-id="replaceTab"></span>
+        </label>
+        <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>
-      <p><label>
+
+      <p><label class="keyboard-shortcut">
        <span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="1"></span>
        <select id="open_container_0">
        </select>
      </label></p>
-      <p><label>
+      <p><label class="keyboard-shortcut">
        <span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="2"></span>
        <select id="open_container_1">
        </select>
      </label></p>
-      <p><label>
+      <p><label class="keyboard-shortcut">
        <span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="3"></span>
        <select id="open_container_2">
        </select>
      </label></p>
-      <p><label>
+      <p><label class="keyboard-shortcut">
        <span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="4"></span>
        <select id="open_container_3">
        </select>
      </label></p>
-      <p><label>
+      <p><label class="keyboard-shortcut">
        <span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="5"></span>
        <select id="open_container_4">
        </select>
      </label></p>
-      <p><label>
+      <p><label class="keyboard-shortcut">
        <span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="6"></span>
        <select id="open_container_5">
        </select>
      </label></p>
-      <p><label>
+      <p><label class="keyboard-shortcut">
        <span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="7"></span>
        <select id="open_container_6">
        </select>
      </label></p>
-      <p><label>
+      <p><label class="keyboard-shortcut">
        <span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="8"></span>
        <select id="open_container_7">
        </select>
      </label></p>
-      <p><label>
+      <p><label class="keyboard-shortcut">
        <span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="9"></span>
        <select id="open_container_8">
        </select>
      </label></p>
-      <p><label>
+      <p><label class="keyboard-shortcut">
        <span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="10"></span>
        <select id="open_container_9">
        </select>
      </label></p>
      <h3 data-i18n-message-id="onboarding"></h3>
-      <button data-i18n-message-id="resetOnboardingPanels"></button>
+      <button data-btn-id="reset-onboarding" data-i18n-message-id="resetOnboardingPanels"></button>
      <p><em data-i18n-message-id="onboardingToggle"></em></p>
+      <h3>Mozilla VPN</h3>
+      <button data-btn-id="moz-vpn-learn-more" data-i18n-message-id="learnMore"></button>
    </form>
    <script src="js/options.js"></script>
  </body>
@@ -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>
@@ -62,11 +63,22 @@
  </div>

  <div class="panel onboarding onboarding-panel-8 hide" id="onboarding-panel-8">
-    <img class="onboarding-img" alt="" src="/img/moz-vpn-onboarding.svg" />
-    <h3 class="onboarding-title" data-i18n-message-id="proxyNowAvailable"></h3>
-    <p data-i18n-message-id="onboarding-8-description"></p>
-    <div class="half-button-wrapper">
-      <a href="#" id="onboarding-done-btn" class="half-onboarding-button keyboard-nav" tabindex="0" data-i18n-message-id="done"></a>
+    <div class="moz-vpn-onboarding-content">
+      <img class="onboarding-img" alt="" src="/img/moz-vpn-onboarding.svg" />
+      <h3 class="onboarding-title" data-i18n-message-id="proxyNowAvailable"></h3>
+      <p data-i18n-message-id="onboarding-8-description"></p>
+    </div>
+    <div id="moz-vpn-fw-onboarding-done" class="half-button-wrapper">
+      <a id="moz-vpn-fw-onboarding-done" href="#" class="half-onboarding-button keyboard-nav onboarding-done" tabindex="0" data-i18n-message-id="done"></a>
+    </div>
+    <div class="moz-vpn-permissions">
+      <div class="moz-vpn-permissions-copy">
+        <span data-i18n-message-id="mozillaVpnRequiresAdditionalPermissions"></span>
+      </div>
+      <div class="half-button-wrapper">
+        <a href="#" id="permissions-not-now" class="half-onboarding-button grey-button keyboard-nav onboarding-done" tabindex="0" data-i18n-message-id="notNow"></a>
+        <a href="#" id="onboarding-enable-permissions" class="half-onboarding-button keyboard-nav" tabindex="0" data-i18n-message-id="enable"></a>
+      </div>
    </div>
  </div>

@@ -96,9 +108,10 @@
  </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="" ="info" src="/img/info.svg" / >
+      <img data-i18n-attribute-message-id="info" data-i18n-attribute="alt" alt="" src="/img/info.svg" / >
    </a>
    <hr>
    <table class="menu">
@@ -143,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>
@@ -169,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="protectYourContainers"></span>
-            </div>
-          <button id="moz-vpn-learn-more" class="moz-vpn-cta primary-cta" data-i18n-message-id="learnMore"></button>
-        </div>
-      </div>
-    <v-padding-hack-footer></v-padding-hack-footer> <!--presents last container from getting covered up by the 'manage containers button' when list is long-->
+
+    <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>
@@ -223,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">
@@ -240,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>
@@ -269,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>
@@ -288,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/>
@@ -324,17 +348,18 @@
              <span class="slider round"></span>
            </label>
          </div>
-        <button id="get-mozilla-vpn" class="moz-vpn-cta primary-cta" data-i18n-message-id="learnMore"></button>
+        <button id="get-mozilla-vpn" class="moz-vpn-cta primary-cta" data-i18n-message-id="getMozillaVpn"></button>
        <button id="moz-vpn-current-server" class="controller">
          <span class="current-country-flag"></span>
          <span class="current-city-name"></span>
        </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 -->
@@ -358,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>
@@ -383,12 +409,27 @@
    <hr>
    <div class="panel-content delete-container-confirm">
      <h4 class="delete-container-confirm-title" data-i18n-message-id="removeThisContainer"></h4>
-      <p class="delete-warning" id="delete-container-tab-warning"></p>
      <p class="delete-warning" data-i18n-message-id="removeThisContainerConfirmation"></p>
    </div>
    <div class="panel-footer">
      <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>

@@ -430,13 +471,17 @@
    <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>
      <button id="submit-advanced-proxy" class="primary-cta apply-to-container" data-i18n-message-id="applyToContainer"></button>
      <a id="advanced-proxy-settings-learn-more" href="" class="blue-link" data-i18n-message-id="learnMore"></a>
    </form>
+    <div id="permissions-overlay" class="permissions-overlay" data-tab-group="proxy-disabled">
+      <p data-tab-group="proxy-disabled" data-i18n-message-id="additionalPermissionNeeded"></p>
+      <button id="enable-proxy-permissions" class="primary-cta" data-tab-group="proxy-disabled" data-i18n-message-id="enable"></button>
+    </div>
  </div>
  <script src="js/utils.js"></script>
  <script src="js/popup.js"></script>
@@ -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"
+      ]);
+    });
+  });
+});