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

popup: Exclude "Always open" from menu colors hack.

.eslintignore

@@ -1 +0,0 @@
-testpilot-metrics.js

.eslintrc.js

@@ -1,59 +0,0 @@
-module.exports = {
-  "parserOptions": {
-    "ecmaVersion": 8
-  },
-  "env": {
-    "browser": true,
-    "es6": true,
-    "node": true,
-    "webextensions": true
-  },
-  "globals": {
-    "CustomizableUI": true,
-    "CustomizableWidgets": true,
-    "SessionStore": true,
-    "Services": 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": ["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"]
-  }
-};

.github/ISSUE_TEMPLATE/bug.yml

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

.github/ISSUE_TEMPLATE/config.yml

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

.github/pull_request_template.md

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

.github/workflows/builds.yaml

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

.github/workflows/test.yaml

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

.gitignore

@@ -2,7 +2,17 @@
 node_modules
 README.html
 *.xpi
-*.swp
+*.sw*
 .vimrc
 .env
 addon.env
+
+src/web-ext-artifacts/*
+web-ext-artifacts
+
+# JetBrains IDE files
+.idea
+
+# IstanbulJS
+.nyc_output
+coverage

.gitmodules

@@ -0,0 +1,5 @@
+[submodule "src/_locales"]
+	branch = main
+	path = src/_locales
+	url = https://github.com/mozilla-l10n/multi-account-containers-l10n.git 
+	ignore=all

.jpmignore

@@ -3,6 +3,7 @@ docs/
 test/
 .npm/
 node_modules/
+bin/
 
 .env
 .eslintrc.js
@@ -14,6 +15,8 @@ node_modules/
 .stylelintrc
 .travis.yml
 *.xpi
+*.md
 .vimrc
 .DS_Store
 .gdb_history
+*.sw*

.stylelintrc

@@ -5,13 +5,17 @@
 
   "extends": "stylelint-config-standard",
 
-  "ignoreFiles": ["webextension/css/*.min.css"],
+  "ignoreFiles": ["src/css/*.min.css"],
 
   "rules": {
     "declaration-block-no-duplicate-properties": true,
-    "order/declaration-block-properties-alphabetical-order": true,
-    "property-blacklist": [
-      "/height/",
+    "property-no-unknown": [
+      true, {
+        ignoreProperties:
+          ["inset-block-end", "inset-block-start"]
+    }],
+    "property-disallowed-list": [
+      "/(min[-]|max[-])height/",
       "/width/",
       "/top/",
       "/bottom/",

.travis.yml

@@ -1,7 +0,0 @@
-language: node_js
-node_js:
-    - "6.1"
-
-notifications:
-    irc:
-        - "ircs://irc.mozilla.org:6697/#testpilot-containers-bots"

CODE_OF_CONDUCT.md

@@ -0,0 +1,15 @@
+# Community Participation Guidelines
+
+This repository is governed by Mozilla's code of conduct and etiquette guidelines. 
+For more details, please read the
+[Mozilla Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/). 
+
+## How to Report
+For more information on how to report violations of the Community Participation Guidelines, please read our '[How to Report](https://www.mozilla.org/about/governance/policies/participation/reporting/)' page.
+
+<!--
+## Project Specific Etiquette
+
+In some cases, there will be additional project etiquette i.e.: (https://bugzilla.mozilla.org/page.cgi?id=etiquette.html).
+Please update for your project.
+-->

CONTRIBUTING.md

@@ -0,0 +1,54 @@
+# Contributing
+
+## Requirements
+
+* Firefox 91.1.0+
+* Git 2.13+
+* Node 7+
+
+## Getting Started
+
+1. Follow the instructions on [How to fork a repository][fork]
+2. Fetch the locales:
+
+    ```
+    cd multi-account-containers
+    git submodule update --init
+    ```
+3. Install the project dependencies
+    ```
+    npm install --legacy-peer-deps
+    ```
+4. Run `npm run dev`.
+
+## Translations
+
+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:
+
+1. `cd src/_locales/`
+2. `git checkout -b message-updates-yyyymmdd`
+3. `git push -u origin message-updates-yyyymmdd`
+
+You can then [open a pull request][pr] on [the l10n repository][l10n].
+
+## Tips for contributing
+
+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

README.md

@@ -1,80 +1,33 @@
-# Containers: Test Pilot Experiment
+# Multi-Account Containers
 
-[![Available on Test Pilot](https://img.shields.io/badge/available_on-Test_Pilot-0996F8.svg)](https://testpilot.firefox.com/experiments/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)
 
-[Embedded Web Extension](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Embedded_WebExtensions) to experiment with [Containers](https://blog.mozilla.org/tanvi/2016/06/16/contextual-identities-on-the-web/) in [Firefox Test Pilot](https://testpilot.firefox.com/) to learn:
+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!
 
-* Will a general Firefox audience understand the Containers feature?
-* Is the UI as currently implemented in Nightly clear or discoverable?
+Learn more about Multi-Account Containers in
+[our end-user documentation][enduser].
 
-See [the Product Hypothesis Document for more
-details](https://docs.google.com/document/d/1WQdHTVXROk7dYkSFluc6_hS44tqZjIrG9I-uPyzevE8/edit?ts=5824ba12#).
+## 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 51+
+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
 
-## Run it
+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/.
 
-See Development
-
-
-## Development
-### Development Environment
-
-Add-on development is better with [a particular  environment](https://developer.mozilla.org/en-US/Add-ons/Setting_up_extension_development_environment). One simple way to get that environment set up is to install the [DevPrefs add-on](https://addons.mozilla.org/en-US/firefox/addon/devprefs/). You can make a custom Firefox profile that includes the DevPrefs add-on, and use that profile when you run the code in this repository. 
-
-
-1. Make a new profile by running `/path/to/firefox -P`, which launches the profile editor. "Create Profile" -- name it whatever you wish (e.g. 'addon_dev') and store it in the default location. It's probably best to deselect the option to "Use without asking," since you probably don't want to use this as your default profile.
-
-2. Once you've created your profile, click "Start Firefox". A new instance of Firefox should launch. Go to Tools->Add-ons and search for "DevPrefs". Install it. Quit Firefox.
-
-3. Now you have a new, vanilla Firefox profile with the DevPrefs add-on installed. You can use your new profile with the code in _this_ repository like so:
-
-**Beta building**
-
-To build this for 51 beta just using the downloaded version of beta will not work as XPI signature checking is disabled fully.
-
-The only way to run the experiment is using an [unbranded version build](https://wiki.mozilla.org/Add-ons/Extension_Signing#Unbranded_Builds) or to build beta yourself:
-
-1. [Download the mozilla-beta repo](https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Source_Code/Mercurial#mozilla-beta_(prerelease_development_tree))
-2. [Create a mozconfig file](https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Build_Instructions/Configuring_Build_Options) - probably optional
-3. `cd <reponame>`
-3. `./mach bootstrap`
-4. `./mach build`
-5. Follow the above instructions by creating the new profile via: `~/<reponame>/obj-x86_64-pc-linux-gnu/dist/bin/firefox -P` (Where "obj-x86_64-pc-linux-gnu" may be different depending on platform obj-...)
-
-
-### Run with jpm
-
-1. `git clone git@github.com:mozilla/testpilot-containers.git`
-2. `cd testpilot-containers`
-3. `npm install`
-4. `./node_modules/.bin/jpm run -p /Path/To/Firefox/Profiles/{junk}.addon_dev -b FirefoxBeta` (where FirefoxBeta might be: ~/<reponame>/obj-x86_64-pc-linux-gnu/dist/bin/firefox or ~/<downloadedFirefoxBeta>/firefox)
-
-Check out the [Browser Toolbox](https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox) for more information about debugging add-on code.
-
-
-### Building .xpi
-
-To build a local .xpi, use the plain [`jpm
-xpi`](https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/jpm#jpm_xpi) command.
-
-### Signing an .xpi
-
-To sign an .xpi, use [`jpm
-sign`](https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/jpm#jpm_sign)
-command.
-
-Note: You will need to be [an author on the AMO
-add-on](https://addons.mozilla.org/en-US/developers/addon/containers-experiment/ownership).
-
-### Testing
-TBD
-
-
-### Distributing
-TBD
+<!-- 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

bin/addons-linter.sh

@@ -0,0 +1,35 @@
+#!/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
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+# addons-linter is not happy to see a `.github` folder in src/_locales.
+# We need to do an horrible hack to run the test.
+
+. $(dirname $0)/commons.sh
+
+TMPDIR=/tmp/MAC_addonsLinter
+
+print Y "Update the submodules..."
+git submodule init || die
+git submodule update --remote --depth 1 src/_locales || die
+
+printn Y "Removing previous execution data... "
+rm -rf $TMPDIR || die
+print G "done."
+
+printn Y "Creating a tmp folder ($TMPDIR)... "
+mkdir $TMPDIR || die
+print G "done."
+
+printn Y "Copying data... "
+cp -r src $TMPDIR || die
+print G "done."
+
+printn Y "Removing the github folder... "
+rm -rf $TMPDIR/src/_locales/.github || die
+print G "done."
+
+print Y "Running the test..."
+npx addons-linter $TMPDIR/src || die

bin/build-addon.sh

@@ -1 +1,26 @@
-npm install && npm run deploy
+#!/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
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+. $(dirname $0)/commons.sh
+
+print Y "Update the submodules..."
+git submodule init || die
+git submodule update --remote --depth 1 src/_locales || die
+
+print Y "Installing dependencies..."
+npm install --legacy-peer-deps || die
+
+print Y "Running tests..."
+npm test
+
+print Y "Creating the final package..."
+cd src || die
+
+if [[ $# -gt 0 ]]; then
+  EXTRA_PARAMS="--filename $1"
+fi
+
+npx web-ext build --overwrite-dest $EXTRA_PARAMS || die

bin/commons.sh

@@ -0,0 +1,54 @@
+#!/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
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+printv() {
+  if [ -t 1 ]; then
+    NCOLORS=$(tput colors)
+
+    if test -n "$NCOLORS" && test "$NCOLORS" -ge 8; then
+      NORMAL="$(tput sgr0)"
+      RED="$(tput setaf 1)"
+      GREEN="$(tput setaf 2)"
+      YELLOW="$(tput setaf 3)"
+    fi
+  fi
+
+  if [[ $2 = 'G' ]]; then
+    # shellcheck disable=SC2086
+    echo $1 -e "${GREEN}$3${NORMAL}"
+  elif [[ $2 = 'Y' ]]; then
+    # shellcheck disable=SC2086
+    echo $1 -e "${YELLOW}$3${NORMAL}"
+  elif [[ $2 = 'N' ]]; then
+    # shellcheck disable=SC2086
+    echo $1 -e "$3"
+  else
+    # shellcheck disable=SC2086
+    echo $1 -e "${RED}$3${NORMAL}"
+  fi
+}
+
+print() {
+  printv '' "$1" "$2"
+}
+
+printn() {
+  printv "-n" "$1" "$2"
+}
+
+error() {
+  printv '' R "$1"
+}
+
+die() {
+  if [[ "$1" ]]; then
+    error "$1"
+  else
+    error Failed
+  fi
+
+  exit 1
+}

data/usercontext.css

@@ -1,261 +0,0 @@
-/* HACK: Custom Container vars do not propigate correctly
-until the container tab is blurred and refocused,
-adding the data-identity-color with the default hex
-value, or chrome url path as an alternate selector mitiages this bug.*/
-[data-identity-color="blue"],
-[data-identity-color="#00a7e0"] {
-  --identity-tab-color: #37adff;
-  --identity-icon-color: #37adff;
-}
-
-[data-identity-color="turquoise"],
-[data-identity-color="#01bdad"] {
-  --identity-tab-color: #00c79a;
-  --identity-icon-color: #00c79a;
-}
-
-[data-identity-color="green"],
-[data-identity-color="#7dc14c"] {
-  --identity-tab-color: #51cd00;
-  --identity-icon-color:  #51cd00;
-}
-
-[data-identity-color="yellow"],
-[data-identity-color="#ffcb00"] {
-  --identity-tab-color: #ffcb00;
-  --identity-icon-color: #ffcb00;
-}
-
-[data-identity-color="orange"],
-[data-identity-color="#f89c24"] {
-  --identity-tab-color: #ff9f00;
-  --identity-icon-color: #ff9f00;
-}
-
-[data-identity-color="red"],
-[data-identity-color="#d92215"] {
-  --identity-tab-color: #ff613d;
-  --identity-icon-color: #ff613d;
-}
-
-[data-identity-color="pink"],
-[data-identity-color="#ee5195"] {
-  --identity-tab-color: #ff4bda;
-  --identity-icon-color: #ff4bda;
-}
-
-[data-identity-color="purple"],
-[data-identity-color="#7a2f7a"] {
-  --identity-tab-color: #af51f5;
-  --identity-icon-color: #af51f5;
-}
-
-[data-identity-icon="fingerprint"],
-[data-identity-icon="chrome://browser/skin/usercontext/personal.svg"] {
-  --identity-icon: url("resource://testpilot-containers/data/usercontext.svg#fingerprint");
-}
-
-[data-identity-icon="briefcase"],
-[data-identity-icon="chrome://browser/skin/usercontext/work.svg"] {
-  --identity-icon: url("resource://testpilot-containers/data/usercontext.svg#briefcase");
-}
-
-[data-identity-icon="dollar"],
-[data-identity-icon="chrome://browser/skin/usercontext/banking.svg"] {
-  --identity-icon: url("resource://testpilot-containers/data/usercontext.svg#dollar");
-}
-
-[data-identity-icon="cart"],
-[data-identity-icon="chrome://browser/skin/usercontext/cart.svg"],
-[data-identity-icon="chrome://browser/skin/usercontext/shopping.svg"] {
-  --identity-icon: url("resource://testpilot-containers/data/usercontext.svg#cart");
-}
-
-[data-identity-icon="circle"] {
-  --identity-icon: url("resource://testpilot-containers/data/usercontext.svg#circle");
-}
-
-[data-identity-icon="gift"] {
-  --identity-icon: url("resource://testpilot-containers/data/usercontext.svg#gift");
-}
-
-[data-identity-icon="vacation"] {
-  --identity-icon: url("resource://testpilot-containers/data/usercontext.svg#vacation");
-}
-
-[data-identity-icon="food"] {
-  --identity-icon: url("resource://testpilot-containers/data/usercontext.svg#food");
-}
-
-[data-identity-icon="fruit"] {
-  --identity-icon: url("resource://testpilot-containers/data/usercontext.svg#fruit");
-}
-
-[data-identity-icon="pet"] {
-  --identity-icon: url("resource://testpilot-containers/data/usercontext.svg#pet");
-}
-
-[data-identity-icon="tree"] {
-  --identity-icon: url("resource://testpilot-containers/data/usercontext.svg#tree");
-}
-
-[data-identity-icon="chill"] {
-  --identity-icon: url("resource://testpilot-containers/data/usercontext.svg#chill");
-}
-
-#userContext-indicator {
-  height: 16px;
-  list-style-image: none !important;
-  vertical-align: middle;
-  width: 16px;
-}
-
-#userContext-label {
-  color: var(--identity-tab-color) !important;
-  margin-inline-end: 5px;
-  max-inline-size: 75px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-#userContext-icons {
-  -moz-box-align: center;
-  align-items: center;
-  display: flex;
-  max-inline-size: 120px;
-}
-
-#userContext-icons[data-identity-color=""] {
-  display: none;
-}
-
-.userContext-icon,
-.menuitem-iconic[data-usercontextid] > .menu-iconic-left > .menu-iconic-icon,
-.subviewbutton[usercontextid] > .toolbarbutton-icon,
-#userContext-indicator {
-  background-image: var(--identity-icon) !important;
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: contain;
-  fill: var(--identity-icon-color) !important;
-  filter: url(/img/filters.svg#fill);
-  filter: url(resource://testpilot-containers/data/filters.svg#fill);
-}
-
-/* containers experiment */
-
-/* reset nightly containers */
-.tabbrowser-tab[usercontextid] {
-  background-image: none !important;
-  background-repeat: no-repeat;
-  background-size: 0;
-}
-
-/* special styles run through a psuedo-class off of
-these elements so they need to be relatively positioned.
-these styles address both regular and compact themes,
-special cases are addressed below */
-.tabbrowser-tab[usercontextid] .tab-background-middle,
-#main-window[style*='compact'] .tabbrowser-tab[usercontextid] .tab-content,
-#verticaltabs-box .tabbrowser-tab[usercontextid] .tab-content {
-  position: relative;
-}
-
-.tabbrowser-tab[usercontextid] .tab-background-middle::after,
-#main-window[style*='compact'] .tabbrowser-tab[usercontextid] .tab-content::after {
-  background-color: var(--identity-tab-color);
-  bottom: 0;
-  content: '';
-  height: 2px;
-  left: 0;
-  position: absolute;
-  right: 0;
-  width: 100%;
-  z-index: 999;
-}
-
-.tabbrowser-tab[usercontextid] .tab-background-middle::after {
-  background-color: var(--identity-tab-color);
-  border-radius: 2px 2px 0 0;
-  bottom: 1px;
-  height: 3px;
-}
-
-.tabbrowser-tab[usercontextid]:not([visuallyselected="true"]) .tab-background-middle::after {
-  bottom: 2px;
-  height: 2px !important;
-}
-
-.tabbrowser-tab[usercontextid][pinned="true"] .tab-background-middle::after {
-  left: -150%;
-  width: 400%;
-}
-
-.tabs-newtab-button .toolbarbutton-icon[type="menu"] {
-  margin-inline-end: 0;
-}
-
-.tabs-newtab-button .toolbarbutton-menu-dropmarker {
-  display: none;
-}
-
-#new-tab-overlay {
-  --icon-size: 26px;
-  -moz-appearance: none;
-  background: transparent;
-  font-style: -moz-use-system-font;
-  inline-size: 180px;
-  margin-inline-start: -50px !important;
-  visibility: visible;
-}
-
-#new-tab-overlay .panel-arrowcontent {
-  -moz-appearance: none !important;
-  background: none;
-  border: 0;
-  box-shadow: none;
-  display: block;
-  margin-block-end: 0;
-  margin-block-start: 2px;
-  padding-block-start: 0 !important;
-}
-
-#new-tab-overlay .panel-arrowcontent,
-#new-tab-overlay menuitem {
-  inline-size: 100%;
-}
-
-#new-tab-overlay .panel-arrowbox {
-  display: none;
-}
-
-#new-tab-overlay[hidden=true] {
-  display: none;
-}
-
-#new-tab-overlay menuitem {
-  -moz-appearance: none;
-  background: white;
-  border-radius: 20px;
-  border: 0;
-  box-shadow: 0 0 7px #0004;
-  color: #4b4b4b;
-  margin-block-end: 5px;
-  padding-block-end: 10px;
-  padding-block-start: 10px;
-  padding-inline-end: 10px;
-  padding-inline-start: 10px;
-}
-
-#new-tab-overlay menuitem:hover {
-  background: #f2f2f2;
-}
-
-#new-tab-overlay .menuitem-iconic[data-usercontextid] > .menu-iconic-left > .menu-iconic-icon {
-  block-height: var(--icon-size);
-  block-width: var(--icon-size);
-}
-
-.menuitem-iconic[data-usercontextid] > .menu-iconic-left {
-  visibility: visible;
-}

docs/acceptance.md

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

docs/metrics.md

@@ -1,266 +0,0 @@
-# METRICS
-
-## Data Analysis
-The collected data will primarily be used to answer the following questions.
-Images are used for visualization and are not composed of actual data.
-
-### Do users install and run this?
-
-What is the overall engagement of the Containers experiment?
-**This is the standard Daily Active User (DAU) and Monthly Active User (MAU) analysis.**
-
-This captures data from the users who have the add-on installed, regardless of
-whether they are actively interacting with it.
-
-![](kpi-1.png)
-
-### Immediate Questions
-
-* Do people use the containers feature & how do people create new container tabs?
-  * Click to create new container tab
-    * \+ `entry-point` value: "tab-bar" or "pop-up"
-* Do people who use the containers feature continue to use it?
-  * Retention: opening a second container tab (second tab in the same container, or a tab in a second container?)
-* What containers do people use?
-  * userContextId
-    * \+ Number of tabs in the container (when should we measure this? on every tab open?)
-* Do people edit their containers?
-  * Click on "Edit Containers"
-  * Click to edit a single container
-    * Click "OK"
-  * Click to delete a single container
-    * Click "OK"
-  * Click to add a container
-    * Click "OK"
-* Do people sort the tabs?
-  * Click sort
-    * \+ Number of tabs when clicked
-  * Average number of container tabs when sort was clicked
-* Do users show and hide container tabs?
-  * Click hide
-    * \+ Number of tabs when clicked
-    * \+ Number of hidden containers when clicked
-  * Click show
-    * \+ Number of tabs when clicked
-    * \+ Number of shown containers when clicked
-* Do users move container tabs to new windows?
-  * Click move
-    * \+ Number of tabs when clicked
-  * Average number of container tabs when new window was clicked
-* How many containers do users have hidden at the same time? (when should we measure this? each time a container is hidden?)
-* Do users pin container tabs? (do we have existing Telemetry for pinning?)
-* Do users visit more pages in container tabs than non-container tabs?
-
-### Follow-up Questions
-
-What are some follow-up questions we anticipate we will ask based on any of the
-above answers/data?
-
-* What is the average lifespan of a container tab? Is that longer or shorter than a regular tab? (if we don't have data on the latter, the former probably isn't worth gathering data on since we will have nothing to compare it to).
-
-## Data Collection
-
-### Server Side
-There is currently no server side component to Containers.
-
-### Client Side
-Containers will use Test Pilot Telemetry with no batching of data.  Details
-of when pings are sent are below, along with examples of the `payload` portion
-of a `testpilottest` telemetry ping for each scenario.
-
-* The user clicks on a container name to open a tab in that container
-
-```js
-  {
-    "uuid": <uuid>,
-    "userContextId": <userContextId>,
-    "clickedContainerTabCount": <number-of-tabs-in-the-container>,
-    "event": "open-tab",
-    "eventSource": ["tab-bar"|"pop-up"|"file-menu"]
-  }
-```
-
-* The user clicks "Edit Containers" in the pop-up
-
-```js
-  {
-    "uuid": <uuid>,
-    "event": "edit-containers"
-  }
-```
-
-* The user clicks OK after clicking on a container edit icon in the pop-up
-
-```js
-  {
-    "uuid": <uuid>,
-    "userContextId": <userContextId>,
-    "event": "edit-container"
-  }
-```
-
-* The user clicks OK after clicking on a container delete icon in the pop-up
-
-```js
-  {
-    "uuid": <uuid>,
-    "userContextId": <userContextId>,
-    "event": "delete-container"
-  }
-```
-
-* The user clicks OK after clicking to add a container in the pop-up
-
-```js
-  {
-    "uuid": <uuid>,
-    "event": "add-container"
-  }
-```
-
-* The user clicks the sort button/icon in the pop-up
-
-```js
-  {
-    "uuid": <uuid>,
-    "event": "sort-tabs",
-    "shownContainersCount": <number-of-containers-with-tabs-shown>,
-    "totalContainerTabsCount": <number-of-all-container-tabs>,
-    "totalNonContainerTabsCount": <number-of-all-non-container-tabs>
-  }
-```
-
-* The user clicks "Hide these container tabs" in the popup
-
-```js
-  {
-    "uuid": <uuid>,
-    "userContextId": <userContextId>,
-    "clickedContainerTabCount": <number-of-tabs-in-the-container>,
-    "event": "hide-tabs",
-    "hiddenContainersCount": <number-of-containers-with-tabs-hidden>,
-    "shownContainersCount": <number-of-containers-with-tabs-shown>,
-    "totalContainersCount": <number-of-containers-with-tabs-hidden-or-shown>
-  }
-```
-
-* The user clicks "Show these container tabs" in the popup
-
-```js
-  {
-    "uuid": <uuid>,
-    "userContextId": <userContextId>,
-    "clickedContainerTabCount": <number-of-tabs-in-the-container>,
-    "event": "show-tabs",
-    "hiddenContainersCount": <number-of-containers-with-tabs-hidden>,
-    "shownContainersCount": <number-of-containers-with-tabs-shown>,
-    "totalContainersCount": <number-of-containers-with-tabs-hidden-or-shown>
-  }
-```
-
-* The user clicks "Move tabs to a new window" in the popup
-
-```js
-  {
-    "uuid": <uuid>,
-    "userContextId": <userContextId>,
-    "clickedContainerTabCount": <number-of-tabs-in-the-container>,
-    "event": "move-tabs-to-window"
-  }
-```
-
-* When a user encounters the disabled "move" feature because of incompatible add-ons
-
-```js
-  {
-    "uuid": <uuid>,
-    "event": "incompatible-addons-detected"
-  }
-```
-
-* The user closes a tab
-
-```js
-  {
-    "uuid": <uuid>,
-    "userContextId": <userContextId>,
-    "event": "page-requests-completed-per-tab",
-    "pageRequestCount": <pageRequestCount>
-  }
-```
-
-* The user goes idle
-
-```js
-  {
-    "uuid": <uuid>,
-    "userContextId": <userContextId>,
-    "event": "page-requests-completed-per-activity",
-    "pageRequestCount": <pageRequestCount>
-  }
-```
-
-* The user chooses "Always Open in this Container" context menu option. (Note: We send two separate event names: one for assigning a site to a container, one for removing a site from a container.)
-
-```js
-  {
-    "uuid": <uuid>,
-    "userContextId": <userContextId>,
-    "event": "[added|removed]-container-assignment"
-  }
-```
-
-* Firefox prompts the user to reload a site into a container after the user picked "Always Open in this Container".
-
-```js
-  {
-    "uuid": <uuid>,
-    "userContextId": <userContextId>,
-    "event": "prompt-reload-page-in-container"
-  }
-```
-
-* The user clicks "Take me there" to reload a site into a container after the user picked "Always Open in this Container".
-
-```js
-  {
-    "uuid": <uuid>,
-    "event": "click-to-reload-page-in-container"
-  }
-```
-
-* Firefox automatically reloads a site into a container after the user picked "Always Open in this Container".
-
-```js
-  {
-    "uuid": <uuid>,
-    "userContextId": <userContextId>,
-    "event": "auto-reload-page-in-container"
-  }
-```
-
-### A Redshift schema for the payload:
-
-```lua
-local schema = {
---   column name                    field type   length  attributes   field name
-    {"uuid",                        "VARCHAR",   255,    nil,         "Fields[payload.uuid]"},
-    {"userContextId",               "INTEGER",   255,    nil,         "Fields[payload.userContextId]"},
-    {"clickedContainerTabCount",    "INTEGER",   255,    nil,         "Fields[payload.clickedContainerTabCount]"},
-    {"eventSource",                 "VARCHAR",   255,    nil,         "Fields[payload.eventSource]"},
-    {"event",                       "VARCHAR",   255,    nil,         "Fields[payload.event]"},
-    {"pageRequestCount",            "INTEGER",   255,    nil,         "Fields[payload.pageRequestCount]"}
-    {"hiddenContainersCount",       "INTEGER",   255,    nil,         "Fields[payload.hiddenContainersCount]"},
-    {"shownContainersCount",        "INTEGER",   255,    nil,         "Fields[payload.shownContainersCount]"},
-    {"totalContainersCount",        "INTEGER",   255,    nil,         "Fields[payload.totalContainersCount]"},
-    {"totalContainerTabsCount",     "INTEGER",   255,    nil,         "Fields[payload.totalContainerTabsCount]"},
-    {"totalNonContainerTabsCount",  "INTEGER",   255,    nil,         "Fields[payload.totalNonContainerTabsCount]"}
-}
-```
-
-### Valid data should be enforced on the server side:
-
-* `eventSource` should be one of `tab-bar`, `pop-up`, or `file-menu`.
-
-All Mozilla data is kept by default for 180 days and in accordance with our
-privacy policies.

docs/release.md

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

eslint.config.js

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

package.json

@@ -1,54 +1,55 @@
 {
   "name": "testpilot-containers",
-  "title": "Containers Experiment",
-  "description": "Containers works by isolating cookie jars using separate origin-attributes defined visually by colored ‘Container Tabs’. This add-on is a modified version of the containers feature for Firefox Test Pilot.",
-  "version": "2.3.0",
-  "author": "Andrea Marchesini, Luke Crouch and Jonathan Kingston",
+  "title": "Multi-Account Containers",
+  "description": "Containers helps you keep all the parts of your online life contained in different tabs. Custom labels and color-coded tabs help keep different activities — like online shopping, travel planning, or checking work email — separate.",
+  "version": "8.3.7",
+  "author": "Andrea Marchesini, Luke Crouch, Lesley Norton, Kendall Werts, Maxx Crawford, Jonathan Kingston",
   "bugs": {
-    "url": "https://github.com/mozilla/testpilot-containers/issues"
+    "url": "https://github.com/mozilla/multi-account-containers/issues"
   },
-  "dependencies": {},
   "devDependencies": {
-    "addons-linter": "^0.15.14",
-    "deploy-txp": "^1.0.7",
-    "eslint": "^3.17.1",
-    "eslint-plugin-no-unsanitized": "^2.0.0",
-    "eslint-plugin-promise": "^3.4.0",
-    "htmllint-cli": "^0.0.5",
-    "jpm": "^1.2.2",
+    "@eslint/js": "^9.36.0",
+    "addons-linter": "^5.28.0",
+    "ajv": "^6.6.3",
+    "chai": "^4.2.0",
+    "eslint": "^9.36.0",
+    "eslint-plugin-no-unsanitized": "^4.1.4",
+    "eslint-plugin-promise": "^7.2.1",
+    "globals": "^16.4.0",
+    "htmllint-cli": "0.0.7",
+    "json": ">=10.0.0",
+    "mocha": "^10.1.0",
     "npm-run-all": "^4.0.0",
-    "stylelint": "^7.9.0",
-    "stylelint-config-standard": "^16.0.0",
-    "stylelint-order": "^0.3.0",
-    "testpilot-metrics": "^2.1.0"
+    "nyc": "^15.0.0",
+    "sinon": "^7.5.0",
+    "sinon-chai": "^3.3.0",
+    "stylelint": "^13.5.0",
+    "stylelint-config-standard": "^20.0.0",
+    "stylelint-order": "^4.0.0",
+    "web-ext": "^8.10.0",
+    "webextensions-jsdom": "^1.2.1"
   },
-  "engines": {
-    "firefox": ">=51.0"
-  },
-  "permissions": {
-    "multiprocess": true
-  },
-  "hasEmbeddedWebExtension": true,
-  "homepage": "https://github.com/mozilla/testpilot-containers#readme",
-  "keywords": [
-    "jetpack"
-  ],
+  "homepage": "https://github.com/mozilla/multi-account-containers#readme",
   "license": "MPL-2.0",
   "main": "index.js",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/mozilla/testpilot-containers.git"
+    "url": "git+https://github.com/mozilla/multi-account-containers.git"
   },
   "scripts": {
-    "build": "npm test && jpm xpi",
-    "deploy": "deploy-txp",
+    "build": "web-ext build -s src/",
+    "dev": "npm run remove-locales-github && web-ext run -s src/",
     "lint": "npm-run-all lint:*",
-    "lint:addon": "addons-linter webextension --self-hosted",
-    "lint:css": "stylelint webextension/css/*.css",
-    "lint:html": "htmllint webextension/*.html",
+    "lint:addon": "./bin/addons-linter.sh",
+    "lint:css": "stylelint src/css/*.css",
+    "lint:html": "htmllint *.html",
     "lint:js": "eslint .",
-    "package": "npm run build && mv testpilot-containers.xpi addon.xpi",
-    "test": "npm run lint"
-  },
-  "updateURL": "https://testpilot.firefox.com/files/@testpilot-containers/updates.json"
+    "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",
+    "coverage": "nyc --reporter=html --reporter=text mocha test/**/*.test.js --timeout 60000"
+  }
 }

src/confirm-page.html

@@ -0,0 +1,49 @@
+<html>
+<head>
+  <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>
+<body>
+  <main>
+    <div class="title">
+      <h1 class="title-text" data-i18n-message-id="openThisSiteConfirmation"></h1>
+    </div>
+    <form id="redirect-form">
+      <p data-message-id="youAskedFireFox" data-message-arg="container-name"></p>
+      <div id="redirect-url"></div>
+      <p data-i18n-message-id="wouldYouStillLikeToOpenConfirmation"></p>
+      <br />
+      <br />
+      <label for="never-ask" class="check-label">
+        <input id="never-ask" type="checkbox" />
+        <span data-i18n-message-id="rememberMyDecision"></span>
+      </label>
+      <br />
+      <div class="button-container">
+        <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>
+
+  <script src="js/utils.js"></script>
+  <script src="js/confirm-page.js"></script>
+</body>
+</html>

src/css/confirm-page.css

@@ -0,0 +1,91 @@
+/* General Rules and Resets */
+.title {
+  background-image: none;
+}
+
+main {
+  background: url(/img/onboarding-4.png) no-repeat;
+  background-position: 200px 0;
+  background-size: 120px;
+  margin-inline-start: -350px;
+  padding-inline-start: 350px;
+}
+
+.container-name {
+  font-weight: bold;
+}
+
+button .container-name,
+#current-container-name {
+  font-weight: bold;
+}
+
+@media only screen and (max-width: 900px) {
+  main {
+    background: none;
+  }
+
+  /* for a mid sized window we have enough for this but not our image */
+  .title {
+    background-image: url('chrome://global/skin/icons/info.svg');
+  }
+}
+
+html {
+  box-sizing: border-box;
+  font: message-box;
+}
+
+#redirect-url,
+#redirect-origin {
+  font-weight: bold;
+
+  /* max-inline-size is needed to force this text smaller than the layout at a mid-sized window */
+  max-inline-size: 40rem;
+  word-break: break-all;
+}
+
+#redirect-url {
+  background: #efedf0; /* Grey 20 */
+  border-radius: 2px;
+  line-height: 1.5;
+  padding-block-end: 0.5rem;
+  padding-block-start: 0.5rem;
+  padding-inline-end: 0.5rem;
+  padding-inline-start: 0.5rem;
+}
+
+/* stylelint-disable media-feature-name-no-unknown */
+@media (prefers-color-scheme: dark) {
+  #redirect-url {
+    background: #38383d; /* Grey 70 */
+    color: #eee; /* White 20 */
+  }
+}
+/* stylelint-enable */
+
+#redirect-url img {
+  block-size: 16px;
+  inline-size: 16px;
+  margin-inline-end: 6px;
+  offset-block-start: 3px;
+  position: relative;
+}
+
+dfn {
+  font-style: normal;
+}
+
+#deny,
+#confirm {
+  flex-grow: 1;
+}
+
+.button-container > button {
+  min-inline-size: 240px;
+}
+
+.check-label {
+  align-items: center;
+  display: flex;
+}

src/css/content.css

@@ -0,0 +1,27 @@
+.container-notification {
+  align-items: center;
+  background: #efefef;
+  color: #003f07;
+  display: flex;
+  font: 12px sans-serif;
+  inline-size: 100vw;
+  justify-content: start;
+  offset-block-start: 0;
+  offset-inline-start: 0;
+  padding-block-end: 8px;
+  padding-block-start: 8px;
+  padding-inline-end: 8px;
+  padding-inline-start: 8px;
+  position: fixed;
+  text-align: start;
+  transform: translateY(-100%);
+  transition: transform 0.3s cubic-bezier(0.07, 0.95, 0, 1) 0.3s;
+  z-index: 999999999999;
+}
+
+.container-notification img {
+  block-size: 16px;
+  display: inline-block;
+  inline-size: 16px;
+  margin-inline-end: 3px;
+}

src/css/options.css

@@ -0,0 +1,122 @@
+body {
+  --grey10: #e7e7e7;
+
+  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: 2.5rem;
+}
+
+label {
+  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: #23212a;
+    color: #fff;
+  }
+
+  p {
+    color: rgb(177, 177, 179);
+  }
+}

src/img/Account.svg

@@ -0,0 +1,3 @@
+<!-- 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 id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 160"><defs><style>.cls-1{fill:#6a57a5;}.cls-2{fill:#5a4a9e;}.cls-3{fill:#e7dfff;}</style></defs><title>account</title><path class="cls-1" d="M110,138.89A58.89,58.89,0,1,1,168.89,80,59,59,0,0,1,110,138.89Z"/><path class="cls-2" d="M110,130.27A50.27,50.27,0,1,1,160.27,80,50.33,50.33,0,0,1,110,130.27Z"/><circle class="cls-3" cx="110.39" cy="65.12" r="23.27" transform="translate(-12.01 27.1) rotate(-13.28)"/><path class="cls-3" d="M141.78,92.87c-8.2-9.46-19.58,3.28-31.39,3.28S87.2,83.41,79,92.87a7.83,7.83,0,0,0-.53,9.53,38.43,38.43,0,0,0,63.83,0A7.83,7.83,0,0,0,141.78,92.87Z"/></svg>

src/img/Sync.svg

@@ -0,0 +1,3 @@
+<!-- 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 id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 160"><defs><style>.cls-1{fill:#9f9fad;}.cls-2{fill:#5a4a9e;}.cls-3{fill:#6a57a5;}.cls-4{fill:#8f8f9d;}.cls-5{fill:none;stroke:#80808e;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6px;}.cls-6{fill:#231f20;opacity:0.4;}.cls-7{fill:#ee3389;}.cls-8{fill:#7661aa;}</style></defs><title>Sync</title><path class="cls-1" d="M119.16,122.69v4.81H19.76v-4.81l12.83-3.21h72.15Z"/><rect class="cls-1" x="24.57" y="55.35" width="89.79" height="67.34" rx="3"/><path class="cls-2" d="M79.08,65l-49.7,49.7a1.61,1.61,0,0,0,1.6,1.61h77a1.62,1.62,0,0,0,1.61-1.61V65Z"/><polygon class="cls-3" points="29.38 64.97 29.38 114.67 79.08 64.97 29.38 64.97"/><path class="cls-2" d="M107.94,60.16H31a1.6,1.6,0,0,0-1.6,1.6V65h80.17V61.76A1.61,1.61,0,0,0,107.94,60.16Z"/><path class="cls-4" d="M108.74,121.09H30.18a.81.81,0,0,1,0-1.61h78.56a.81.81,0,1,1,0,1.61Z"/><line class="cls-5" x1="63.61" y1="124.18" x2="74.83" y2="124.18"/><path class="cls-6" d="M114.35,127.35H102.2V71.64a5.53,5.53,0,0,1,5.52-5.53h6.63Z"/><path class="cls-1" d="M200.24,134.72v4.81h-99.4v-4.81l12.82-3.21h72.15Z"/><rect class="cls-1" x="105.65" y="67.38" width="89.79" height="67.34" rx="3"/><path class="cls-2" d="M160.16,77l-49.71,49.7a1.61,1.61,0,0,0,1.61,1.6h77a1.6,1.6,0,0,0,1.6-1.6V77Z"/><polygon class="cls-3" points="110.45 77 110.45 126.7 160.16 77 110.45 77"/><path class="cls-2" d="M189,72.19h-77a1.61,1.61,0,0,0-1.61,1.6V77h80.17V73.79A1.6,1.6,0,0,0,189,72.19Z"/><path class="cls-4" d="M189.82,133.11H111.26a.8.8,0,1,1,0-1.6h78.56a.8.8,0,0,1,0,1.6Z"/><line class="cls-5" x1="144.69" y1="136.2" x2="155.91" y2="136.2"/><path class="cls-7" d="M136.85,50l-3-.55a3,3,0,0,0-3.51,2.37l-.27,1.45c-1.59,8.36-9.86,14.42-19.66,14.42a21,21,0,0,1-15.93-6.89H103a3,3,0,0,0,3-3v-3a3,3,0,0,0-3-3H84.86a3,3,0,0,0-3,3V73.64a3,3,0,0,0,3,3h3a3,3,0,0,0,3-3V69.72a30.8,30.8,0,0,0,19.57,6.87c14.15,0,26.15-9.11,28.54-21.66l.27-1.45A2.94,2.94,0,0,0,136.85,50Z"/><path class="cls-8" d="M84.06,47l3,.54a3.41,3.41,0,0,0,.55,0,3,3,0,0,0,3-2.41l.27-1.45h0c1.59-8.36,9.86-14.42,19.65-14.42a21,21,0,0,1,15.94,6.89H117.9a3,3,0,0,0-3,3v3a3,3,0,0,0,3,3h18.15a3,3,0,0,0,3-3V23.43a3,3,0,0,0-3-3h-3a3,3,0,0,0-3,3v3.92a30.82,30.82,0,0,0-19.58-6.88c-14.14,0-26.14,9.11-28.53,21.67l-.27,1.45A3,3,0,0,0,84.06,47Z"/></svg>

src/img/amo-icon.svg

@@ -0,0 +1,3 @@
+<!-- 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 width="32px" height="33px" viewBox="0 0 32 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs> <linearGradient x1="74.0423237%" y1="18.5882821%" x2="0%" y2="100%" id="linearGradient-1"> <stop stop-color="#00FEFF" offset="0%"/> <stop stop-color="#3D85FF" offset="100%"/> </linearGradient> </defs> <g id="Specs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Header-Copy" transform="translate(-182.000000, -152.000000)" fill="url(#linearGradient-1)"> <path d="M205.58574,176.859518 L205.58574,169.287998 C205.58574,169.287998 205.800116,167.315137 207.086372,167.315137 C208.372629,167.315137 208.265441,169.394639 210.677171,169.394639 C211.909834,169.394639 214,168.754792 214,165.022352 C214,161.289912 211.909834,160.810027 210.677171,160.810027 C208.265441,160.810027 208.372629,162.782888 207.086372,162.782888 C205.800116,162.782888 205.58574,160.756707 205.58574,160.756707 L205.58574,157.664114 C205.58574,156.491061 204.621048,155.531291 203.44198,155.531291 L197.814608,155.531291 C197.814608,155.531291 195.992412,155.211368 195.992412,153.931674 C195.992412,152.65198 198.028985,152.545339 198.028985,150.145914 C198.028985,148.91954 197.332262,147 193.580682,147 C189.829101,147 189.293161,148.91954 189.293161,150.145914 C189.293161,152.545339 191.115357,152.65198 191.115357,153.931674 C191.115357,155.211368 189.293161,155.531291 189.293161,155.531291 L184.148135,155.531291 C182.969067,155.531291 182.004375,156.491061 182.004375,157.664114 L182.004375,161.823118 C182.004375,161.823118 181.789999,165.022352 184.362512,165.022352 C186.023926,165.022352 186.07752,162.836209 188.274874,162.836209 C189.346755,162.836209 190.418635,163.8493 190.418635,166.035443 C190.418635,168.274907 189.346755,169.394639 188.274874,169.394639 C186.131114,169.394639 186.023926,167.208496 184.362512,167.208496 C181.789999,167.208496 182.004375,170.301089 182.004375,170.301089 L182.004375,176.859518 C182.004375,178.032571 182.969067,178.992341 184.148135,178.992341 L191.115357,178.992341 C191.115357,178.992341 194.49178,179.205623 194.49178,176.646236 C194.49178,174.993299 192.348019,174.726696 192.348019,172.540552 C192.348019,171.474141 193.527088,170.141127 195.778036,170.141127 C198.028985,170.141127 199.315241,171.474141 199.315241,172.540552 C199.315241,174.673375 197.225074,174.993299 197.225074,176.646236 C197.225074,179.258944 200.601497,178.992341 200.601497,178.992341 L203.44198,178.992341 C204.621048,178.992341 205.58574,178.032571 205.58574,176.859518 Z" id="Shape-Copy-23" transform="translate(198.000000, 163.000000) rotate(-42.000000) translate(-198.000000, -163.000000) "/> </g> </g> </svg>

src/img/arrow-icon-left-light.svg

@@ -0,0 +1,3 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#ffffff" d="M6.414 8l4.293-4.293a1 1 0 0 0-1.414-1.414l-5 5a1 1 0 0 0 0 1.414l5 5a1 1 0 0 0 1.414-1.414z"></path></svg>

src/img/arrow-icon-left.svg

@@ -0,0 +1,3 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="context-fill" d="M6.414 8l4.293-4.293a1 1 0 0 0-1.414-1.414l-5 5a1 1 0 0 0 0 1.414l5 5a1 1 0 0 0 1.414-1.414z"></path></svg>

src/img/arrow-icon-right-light.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-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/. -->
+<svg width="5px" height="8px" viewBox="0 0 5 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
+    <title>Arrow</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M5.00090934,9.5006316 C4.79840046,9.50099392 4.61567086,9.37916873 4.53812503,9.19209489 C4.4605792,9.00502105 4.5035325,8.78964579 4.64690934,8.6466316 L7.29490934,6.0006316 L4.64690934,3.3546316 C4.45140054,3.1591228 4.45140054,2.8421404 4.64690934,2.6466316 C4.84241814,2.4511228 5.15940054,2.4511228 5.35490934,2.6466316 L8.35490934,5.6466316 C8.44895104,5.74043586 8.50180313,5.86780434 8.50180313,6.0006316 C8.50180313,6.13345886 8.44895104,6.26082734 8.35490934,6.3546316 L5.35490934,9.3546316 C5.26095861,9.44834555 5.13360821,9.5008686 5.00090934,9.5006316 Z" id="path-1"></path>
+    </defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.6">
+        <g id="Icons-/-12-/-Arrowhead-Right-12---Thin" transform="translate(-4.000000, -2.000000)">
+            <rect id="bouding-box" x="0" y="0" width="12" height="12"></rect>
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <g id="Shape" fill-rule="nonzero"></g>
+            <g id="Color-/-Photon-/-Primary---Grey-90-80%" mask="url(#mask-2)" fill="#ffffff" fill-opacity="0.8" fill-rule="evenodd">
+                <rect id="Rectangle" x="0" y="0" width="12" height="12"></rect>
+            </g>
+        </g>
+    </g>
+</svg>

src/img/arrow-icon-right.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-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/. -->
+<svg width="5px" height="8px" viewBox="0 0 5 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
+    <title>Arrow</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M5.00090934,9.5006316 C4.79840046,9.50099392 4.61567086,9.37916873 4.53812503,9.19209489 C4.4605792,9.00502105 4.5035325,8.78964579 4.64690934,8.6466316 L7.29490934,6.0006316 L4.64690934,3.3546316 C4.45140054,3.1591228 4.45140054,2.8421404 4.64690934,2.6466316 C4.84241814,2.4511228 5.15940054,2.4511228 5.35490934,2.6466316 L8.35490934,5.6466316 C8.44895104,5.74043586 8.50180313,5.86780434 8.50180313,6.0006316 C8.50180313,6.13345886 8.44895104,6.26082734 8.35490934,6.3546316 L5.35490934,9.3546316 C5.26095861,9.44834555 5.13360821,9.5008686 5.00090934,9.5006316 Z" id="path-1"></path>
+    </defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.6">
+        <g id="Icons-/-12-/-Arrowhead-Right-12---Thin" transform="translate(-4.000000, -2.000000)">
+            <rect id="bouding-box" x="0" y="0" width="12" height="12"></rect>
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <g id="Shape" fill-rule="nonzero"></g>
+            <g id="Color-/-Photon-/-Primary---Grey-90-80%" mask="url(#mask-2)" fill="#000000" fill-rule="evenodd">
+                <rect id="Rectangle" x="0" y="0" width="12" height="12"></rect>
+            </g>
+        </g>
+    </g>
+</svg>

src/img/arrow-toggle.svg

@@ -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="M8.71054 11.1175L11.3005 13.7075C11.6905 14.0975 12.3205 14.0975 12.7105 13.7075L15.3005 11.1175C15.9305 10.4875 15.4805 9.4075 14.5905 9.4075H9.41054C8.52054 9.4075 8.08054 10.4875 8.71054 11.1175Z" fill="#6D6D6E"/>
+</svg>

src/img/blank-tab.svg

@@ -0,0 +1,5 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path d="M17,12v2a1,1,0,0,1-1,1H2a1,1,0,0,1-1-1V12a1,1,0,0,1,1-1H1.142c2.3,0,2.536-1.773,2.874-4,0.351-2.316.083-4,3.13-4h3.707C13.917,3,13.647,4.684,14,7c0.34,2.228.582,4,2.89,4H16A1,1,0,0,1,17,12Z" fill="white"/>
+</svg>

src/img/close-light.svg

@@ -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="M13.2225 11.9895L17.7594 7.45261C17.9155 7.29095 18.0019 7.07443 18 6.84969C17.998 6.62495 17.9079 6.40997 17.7489 6.25105C17.59 6.09213 17.375 6.00199 17.1503 6.00003C16.9256 5.99808 16.709 6.08447 16.5474 6.24061L12.0105 10.7775L7.47368 6.24061C7.31202 6.08447 7.0955 5.99808 6.87076 6.00003C6.64602 6.00199 6.43104 6.09213 6.27212 6.25105C6.1132 6.40997 6.02305 6.62495 6.0211 6.84969C6.01914 7.07443 6.10554 7.29095 6.26168 7.45261L10.7985 11.9895L6.26168 16.5263C6.17981 16.6054 6.11451 16.7 6.06959 16.8045C6.02467 16.9091 6.00102 17.0216 6.00003 17.1354C5.99904 17.2492 6.02073 17.3621 6.06383 17.4674C6.10693 17.5728 6.17057 17.6685 6.25105 17.7489C6.33153 17.8294 6.42723 17.8931 6.53257 17.9362C6.63791 17.9793 6.75078 18.001 6.86459 18C6.9784 17.999 7.09088 17.9753 7.19545 17.9304C7.30003 17.8855 7.39461 17.8202 7.47368 17.7383L12.0105 13.2015L16.5474 17.7383C16.709 17.8945 16.9256 17.9809 17.1503 17.9789C17.375 17.9769 17.59 17.8868 17.7489 17.7279C17.9079 17.569 17.998 17.354 18 17.1292C18.0019 16.9045 17.9155 16.688 17.7594 16.5263L13.2225 11.9895Z" fill="#ffffff"/>
+</svg>

src/img/close.svg

@@ -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="M13.2225 11.9895L17.7594 7.45261C17.9155 7.29095 18.0019 7.07443 18 6.84969C17.998 6.62495 17.9079 6.40997 17.7489 6.25105C17.59 6.09213 17.375 6.00199 17.1503 6.00003C16.9256 5.99808 16.709 6.08447 16.5474 6.24061L12.0105 10.7775L7.47368 6.24061C7.31202 6.08447 7.0955 5.99808 6.87076 6.00003C6.64602 6.00199 6.43104 6.09213 6.27212 6.25105C6.1132 6.40997 6.02305 6.62495 6.0211 6.84969C6.01914 7.07443 6.10554 7.29095 6.26168 7.45261L10.7985 11.9895L6.26168 16.5263C6.17981 16.6054 6.11451 16.7 6.06959 16.8045C6.02467 16.9091 6.00102 17.0216 6.00003 17.1354C5.99904 17.2492 6.02073 17.3621 6.06383 17.4674C6.10693 17.5728 6.17057 17.6685 6.25105 17.7489C6.33153 17.8294 6.42723 17.8931 6.53257 17.9362C6.63791 17.9793 6.75078 18.001 6.86459 18C6.9784 17.999 7.09088 17.9753 7.19545 17.9304C7.30003 17.8855 7.39461 17.8202 7.47368 17.7383L12.0105 13.2015L16.5474 17.7383C16.709 17.8945 16.9256 17.9809 17.1503 17.9789C17.375 17.9769 17.59 17.8868 17.7489 17.7279C17.9079 17.569 17.998 17.354 18 17.1292C18.0019 16.9045 17.9155 16.688 17.7594 16.5263L13.2225 11.9895Z" fill="black"/>
+</svg>

src/img/container-close-tab.svg

@@ -0,0 +1,5 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 7">
+	<polygon fill="#FFFFFF" points="5.8,0 3.5,2.4 1.2,0 0,1.2 2.4,3.5 0.1,5.8 1.2,7 3.5,4.7 5.8,7 7,5.8 4.7,3.5 7,1.2"/>
+</svg>

src/img/container-delete.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-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/. -->
+<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" style="enable-background:new 0 0 12 12;" xml:space="preserve">
+	<path fill="#FFFFFF" d="M4.6,0.3h2.7c0.1,0,0.2,0.1,0.2,0.2v1H4.4v-1C4.4,0.4,4.5,0.3,4.6,0.3z M1.7,1.5h8.6c0.1,0,0.2,0.1,0.2,0.2
+	l0.2,1.4H1.3l0.2-1.4C1.5,1.6,1.6,1.5,1.7,1.5z M6,11.7H3.2L2.1,3.9H6h3.9l-1.1,7.8H6L6,11.7z"/>
+</svg>

src/img/container-move.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><script xmlns=""/>
+    <defs/>
+    <g id="All" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="hamburger-menu" fill="#858585">
+            <g id="Group" transform="translate(2.000000, 6.000000)">
+                <rect id="Rectangle-path" x="0" y="0" width="26" height="2"/>
+                <rect id="Rectangle-path" x="0" y="8" width="26" height="2"/>
+                <rect id="Rectangle-path" x="0" y="16" width="26" height="2"/>
+            </g>
+        </g>
+    </g>
+</svg>

src/img/container-newtab.svg

@@ -1,4 +1,7 @@
 <?xml version="1.0" encoding="utf-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/. -->
 <!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">

src/img/container-openin-16.svg

@@ -0,0 +1,12 @@
+<!-- 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="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <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>