Version upgrade

Fix bz#1823729 - Listen only for status on tab updated

.github/ISSUE_TEMPLATE/bug.yml

@@ -9,7 +9,7 @@ body:
       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"
+        - label: "I searched for existing reports to see if it hasn't already been reported"
           required: true
   - type: textarea
     id: step_to_reproduce

.gitignore

@@ -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

bin/addons-linter.sh

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

bin/build-addon.sh

@@ -1,4 +1,4 @@
-#!/bin/bash
+#!/bin/env bash
 
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
@@ -23,4 +23,4 @@ if [[ $# -gt 0 ]]; then
   EXTRA_PARAMS="--filename $1"
 fi
 
-$(npm bin)/web-ext build --overwrite-dest $EXTRA_PARAMS || die
+npx web-ext build --overwrite-dest $EXTRA_PARAMS || die

bin/commons.sh

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

package.json

@@ -2,14 +2,14 @@
   "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.1.0",
+  "version": "8.2.0",
   "author": "Andrea Marchesini, Luke Crouch, Lesley Norton, Kendall Werts, Maxx Crawford, Jonathan Kingston",
   "bugs": {
     "url": "https://github.com/mozilla/multi-account-containers/issues"
   },
   "dependencies": {},
   "devDependencies": {
-    "addons-linter": "^3.23.0",
+    "addons-linter": "^5.28.0",
     "ajv": "^6.6.3",
     "chai": "^4.2.0",
     "eslint": "^7.32.0",
@@ -17,7 +17,7 @@
     "eslint-plugin-promise": "^5.2.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 +25,7 @@
     "stylelint": "^13.5.0",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-order": "^4.0.0",
-    "web-ext": "^7.1.1",
+    "web-ext": "^7.5.0",
     "webextensions-jsdom": "^1.2.1"
   },
   "homepage": "https://github.com/mozilla/multi-account-containers#readme",
@@ -36,13 +36,16 @@
     "url": "git+https://github.com/mozilla/multi-account-containers.git"
   },
   "scripts": {
-    "dev": "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",
+    "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",

src/css/options.css

@@ -37,16 +37,6 @@ form {
   margin-block: 4px 8px;
 }
 
-.settings-group-column {
-  display: flex;
-  flex-direction: column;
-}
-
-.settings-group-column label,
-.settings-group-column p {
-  margin-block: 4px 8px;
-}
-
 input[type="checkbox"] {
   margin-inline: 0 8px;
   margin-block: 1px auto;

src/css/popup.css

@@ -107,8 +107,9 @@
   --toggle-on-bg-focus-color: #0060df;
   --toggle-on-border-color: #0060df;
   --toggle-on-handle-bg-color: #fff;
-  --usercontext-bg-hover-color: #e0e0e6;
-  --usercontext-bg-active-color: #e0e0e6;
+  --usercontext-bg-hover-color: #f0f0fa;
+  --usercontext-bg-focus-color: #e0e0e6;
+  --usercontext-bg-active-color: #cfcfd8;
   --moz-vpn-tout-shadow: 0 0 7px 0 #9498a25e;
 }
 
@@ -227,6 +228,7 @@ body {
 
 /* Hack for menu icons to use a light color without affecting container icons */
 [data-theme="light"] img.delete-assignment,
+[data-theme="dark"] img.reset-assignment,
 [data-theme="dark"] .trash-button,
 [data-theme="dark"] img.menu-icon,
 [data-theme="dark"] .menu-icon > img,
@@ -235,6 +237,7 @@ body {
   filter: invert(1);
 }
 
+[data-theme="dark"] img.clear-storage-icon,
 [data-theme="dark"] img.delete-assignment,
 [data-theme="dark"] #edit-sites-assigned .menu-icon,
 [data-theme="dark"] #container-info-table .menu-icon {
@@ -284,9 +287,33 @@ table {
   display: none !important;
 }
 
+.popup-notification-card {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 2s;
+  border-radius: 4px;
+  font-size: 12px;
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  padding-block: 8px;
+  padding-inline: 8px;
+  margin-block: 8px;
+  margin-inline: 8px;
+  inline-size: calc(100vw - 25px);
+  background-color: var(--button-bg-active-color-secondary);
+  z-index: 3;
+}
+
+.is-shown {
+  pointer-events: auto;
+  opacity: 1;
+  transition: opacity 0s;
+}
+
 /* effect borrowed from tabs in firefox, ensure that the element flexes to the full width */
 .truncate-text {
-  inline-size: calc(100vw - 80px);
+  inline-size: calc(100vw - 100px);
   overflow: hidden;
   position: relative;
   white-space: nowrap;
@@ -1504,8 +1531,9 @@ input[type=text] {
   min-block-size: 500px;
 }
 
-.delete-container-panel {
-  min-block-size: 300px;
+.delete-container-panel,
+.clear-container-storage-panel {
+  min-block-size: 500px;
 }
 
 .panel.onboarding,
@@ -1793,12 +1821,14 @@ manage things like container crud */
   margin-inline-end: 0;
 }
 
-.delete-container-confirm {
+.delete-container-confirm,
+.clear-container-storage-confirm {
   padding-inline-end: 20px;
   padding-inline-start: 20px;
 }
 
-.delete-container-confirm-title {
+.delete-container-confirm-title,
+.clear-container-storage-confirm-title {
   color: var(--text-color-primary);
   font-size: var(--font-size-heading);
 }
@@ -1884,15 +1914,25 @@ manage things like container crud */
   margin-inline: auto;
 }
 
+/* When focusing the element add a thin blue highlight to match input fields. This gives a distinction to other selected radio items */
+.radio-choice > .radio-container > [type="radio"]:focus + label {
+  outline: solid 1px var(--input-border-focus-color);
+  -moz-outline-radius: 100%;
+}
+
 .radio-choice > .radio-container > [type="radio"]:checked + label {
   background-color: var(--usercontext-bg-focus-color);
   border-radius: 100%;
 }
 
-/* When focusing the element add a thin blue highlight to match input fields. This gives a distinction to other selected radio items */
-.radio-choice > .radio-container > [type="radio"]:focus + label {
-  outline: solid 1px var(--input-border-focus-color);
-  -moz-outline-radius: 100%;
+.radio-choice > .radio-container > [type="radio"]:checked + label:hover {
+  background-color: var(--usercontext-bg-hover-color);
+  border-radius: 100%;
+}
+
+.radio-choice > .radio-container > [type="radio"]:checked + label:active {
+  background-color: var(--usercontext-bg-active-color);
+  border-radius: 100%;
 }
 
 .edit-container-panel fieldset {
@@ -2162,6 +2202,11 @@ hr {
   text-align: center;
 }
 
+.confirmation-destructive-ok-btn {
+  background-color: var(--button-destructive-bg-color);
+  color: var(--button-destructive-text-color);
+}
+
 .delete-btn {
   background-color: var(--button-destructive-bg-color);
   block-size: 32px;
@@ -2292,7 +2337,8 @@ input {
   font-weight: bolder;
 }
 
-.delete-warning {
+.delete-warning,
+.clear-container-storage-warning {
   padding-block-end: 8px;
   padding-block-start: 8px;
   padding-inline-end: 0;
@@ -2303,7 +2349,8 @@ input {
  * rules grouped together at the beginning of the file
  */
 /* stylelint-disable no-descending-specificity */
-.trash-button {
+.trash-button,
+.reset-button {
   display: inline-block;
   block-size: 20px;
   inline-size: 20px;
@@ -2312,11 +2359,21 @@ input {
   text-align: center;
 }
 
-tr > td > .trash-button {
+.reset-button {
+  margin-inline-end: 12px;
+}
+
+.tooltip-wrapper:hover .site-settings-tooltip {
+  display: block;
+}
+
+tr > td > .trash-button,
+tr > td > .reset-button {
   display: none;
 }
 
-tr:hover > td > .trash-button {
+tr:hover > td > .trash-button,
+tr:hover > td > .reset-button {
   display: block;
 }
 

src/img/multiaccountcontainer-16-dark.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>

src/img/multiaccountcontainer-16.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>

src/img/usercontext.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;
     }

src/js/background/assignManager.js

@@ -165,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) => {
@@ -571,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
@@ -678,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"],
@@ -692,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"],
     });
   },
@@ -764,7 +780,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"],
     });
 

src/js/background/backgroundLogic.js

@@ -14,7 +14,13 @@ const backgroundLogic = {
   NUMBER_OF_KEYBOARD_SHORTCUTS: 10,
   unhideQueue: [],
   init() {
+
     browser.commands.onCommand.addListener(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];
@@ -27,7 +33,20 @@ const backgroundLogic = {
 
     browser.permissions.onAdded.addListener(permissions => this.resetPermissions(permissions));
     browser.permissions.onRemoved.addListener(permissions => this.resetPermissions(permissions));
-    backgroundLogic.setSyncExclusion();
+
+    // Update Translation in Manifest
+    browser.runtime.onInstalled.addListener(this.updateTranslationInManifest);
+    browser.runtime.onStartup.addListener(this.updateTranslationInManifest);
+  },
+
+  updateTranslationInManifest() {
+    for (let index = 0; index < 10; index++) {
+      const ajustedIndex = index + 1; // We want to start from 1 instead of 0 in the UI.
+      browser.commands.update({
+        name: `open_container_${index}`,
+        description: browser.i18n.getMessage("containerShortcut", `${ajustedIndex}`)
+      });
+    }
   },
 
   resetPermissions(permissions) {
@@ -56,6 +75,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;
@@ -124,7 +156,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;
@@ -400,17 +433,6 @@ const backgroundLogic = {
   cookieStoreId(userContextId) {
     if(userContextId === 0) return "firefox-default";
     return `firefox-container-${userContextId}`;
-  },
-
-  async setSyncExclusion() {    
-    // Default container sync exclude regexp to "^tmp\d+$" to prevent
-    // https://github.com/mozilla/multi-account-containers/issues/1675
-    // https://github.com/stoically/temporary-containers/issues/371
-    // for future users of the MAC + TC combination.
-    const { syncExcludeRegExp } = await browser.storage.local.get("syncExcludeRegExp");
-    if (syncExcludeRegExp === undefined) {
-      browser.storage.local.set({syncExcludeRegExp: "^tmp\\d+$"});
-    }
   }
 };
 

src/js/background/messageHandler.js

@@ -23,6 +23,9 @@ const messageHandler = {
       case "deleteContainer":
         response = backgroundLogic.deleteContainer(m.message.userContextId);
         break;
+      case "deleteContainerDataOnly":
+        response = backgroundLogic.deleteContainerDataOnly(m.message.userContextId);
+        break;
       case "createOrUpdateContainer":
         response = backgroundLogic.createOrUpdateContainer(m.message);
         break;
@@ -45,6 +48,9 @@ const messageHandler = {
         // m.url is the assignment to be removed/added
         response = assignManager._setOrRemoveAssignment(m.tabId, m.url, m.userContextId, m.value);
         break;
+      case "resetCookiesForSite":
+        response = assignManager._resetCookiesForSite(m.pageUrl, m.cookieStoreId);
+        break;
       case "sortTabs":
         backgroundLogic.sortTabs();
         break;
@@ -90,10 +96,10 @@ const messageHandler = {
         break;
       case "assignAndReloadInContainer":
         tab = await assignManager.reloadPageInContainer(
-          m.url, 
+          m.url,
           m.currentUserContextId,
-          m.newUserContextId, 
-          m.tabIndex, 
+          m.newUserContextId,
+          m.tabIndex,
           m.active,
           true
         );
@@ -220,7 +226,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"]
+            });
           }
         }
       }

src/js/background/sync.js

@@ -128,15 +128,9 @@ const sync = {
       await sync.checkForListenersMaybeAdd();
 
       async function updateSyncIdentities() {
-        const excludeRegExp = await getExcludeRegExp();
         const identities = await browser.contextualIdentities.query({});
 
         for (const identity of identities) {
-          // skip excluded identities
-          if (excludeRegExpMatchesIdentity(excludeRegExp, identity)) {
-            continue;
-          }
-
           delete identity.colorCode;
           delete identity.iconUrl;
           identity.macAddonUUID = await identityState.lookupMACaddonUUID(identity.cookieStoreId);
@@ -333,7 +327,6 @@ async function restore() {
  */
 async function reconcileIdentities(){
   if (SYNC_DEBUG) console.log("reconcileIdentities");
-  const excludeRegExp = await getExcludeRegExp();
 
   // first delete any from the deleted list
   const deletedIdentityList =
@@ -343,14 +336,6 @@ async function reconcileIdentities(){
     const deletedCookieStoreId = 
       await identityState.lookupCookieStoreId(deletedUUID);
     if (deletedCookieStoreId){
-      if (excludeRegExp) {
-        const deletedIdentity = await identityState.get(deletedCookieStoreId);
-        // skip excluded identities
-        if (excludeRegExpMatchesIdentity(excludeRegExp, deletedIdentity)) {
-          continue;
-        }      
-      }
-
       try{
         await browser.contextualIdentities.remove(deletedCookieStoreId);
       } catch (error) {
@@ -365,11 +350,6 @@ async function reconcileIdentities(){
     await sync.storageArea.getIdentities();
   // find any local dupes created on sync storage and delete from sync storage
   for (const localIdentity of localIdentities) {
-    // skip excluded identities
-    if (excludeRegExpMatchesIdentity(excludeRegExp, localIdentity)) {
-      continue;
-    }
-
     const syncIdentitiesOfName = syncIdentitiesRemoveDupes
       .filter(identity => identity.name === localIdentity.name);
     if (syncIdentitiesOfName.length > 1) {
@@ -383,11 +363,6 @@ async function reconcileIdentities(){
     await sync.storageArea.getIdentities();
   // now compare all containers for matching names.
   for (const syncIdentity of syncIdentities) {
-    // skip excluded identities
-    if (excludeRegExpMatchesIdentity(excludeRegExp, syncIdentity)) {
-      continue;
-    }
-
     if (syncIdentity.macAddonUUID){
       const localMatch = localIdentities.find(
         localIdentity => localIdentity.name === syncIdentity.name
@@ -603,24 +578,3 @@ async function setAssignmentWithUUID(assignedSite, urlKey) {
   }
   throw new Error (`No cookieStoreId found for: ${uuid}, ${urlKey}`);
 }
-
-// Retrieve the sync exclude regexp from local storage.
-async function getExcludeRegExp() {
-  const { syncExcludeRegExp } = await browser.storage.local.get("syncExcludeRegExp");
-  if (syncExcludeRegExp) {
-    return new RegExp(syncExcludeRegExp, "i");
-  } else {
-    return false;
-  }
-}
-
-// Matching the provided exclude regexp against the provided identity and return
-// true if they match.
-function excludeRegExpMatchesIdentity(excludeRegExp, identity) {
-  if (excludeRegExp && identity.name.match(excludeRegExp)) {
-    if (SYNC_DEBUG) console.log(`Exclude regexp matches identity '${identity.name}'`);
-    return true;
-  } else {
-    return false;
-  }
-}

src/js/confirm-page.js

@@ -7,14 +7,16 @@ 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);
+    denySubmit(redirectUrl, currentCookieStoreId);
   });
 
   const container = await browser.contextualIdentities.get(cookieStoreId);
@@ -27,6 +29,7 @@ async function load() {
     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);
@@ -59,6 +62,7 @@ function confirmSubmit(redirectUrl, cookieStoreId) {
     browser.runtime.sendMessage({
       method: "neverAsk",
       neverAsk: true,
+      cookieStoreId: cookieStoreId,
       pageUrl: redirectUrl
     });
   }
@@ -72,8 +76,21 @@ function getCurrentTab() {
   });
 }
 
-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,

src/js/content-script.js

@@ -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);

src/js/options.js

@@ -63,12 +63,10 @@ async function setupOptions() {
   const { syncEnabled } = await browser.storage.local.get("syncEnabled");
   const { replaceTabEnabled } = await browser.storage.local.get("replaceTabEnabled");
   const { currentThemeId } = await browser.storage.local.get("currentThemeId");
-  const { syncExcludeRegExp } = await browser.storage.local.get("syncExcludeRegExp");
 
   document.querySelector("#syncCheck").checked = !!syncEnabled;
   document.querySelector("#replaceTabCheck").checked = !!replaceTabEnabled;
   document.querySelector("#changeTheme").selectedIndex = currentThemeId;
-  document.querySelector("#syncExcludeRegExp").value = syncExcludeRegExp || "";
   setupContainerShortcutSelects();
 }
 
@@ -122,15 +120,10 @@ async function resetPermissionsUi() {
 browser.permissions.onAdded.addListener(resetPermissionsUi);
 browser.permissions.onRemoved.addListener(resetPermissionsUi);
 
-function updateSyncExcludeRegExp(event) {
-  browser.storage.local.set({syncExcludeRegExp: event.target.value});
-}
-
 document.addEventListener("DOMContentLoaded", setupOptions);
 document.querySelector("#syncCheck").addEventListener( "change", enableDisableSync);
 document.querySelector("#replaceTabCheck").addEventListener( "change", enableDisableReplaceTab);
 document.querySelector("#changeTheme").addEventListener( "change", changeTheme);
-document.querySelector("#syncExcludeRegExp").addEventListener( "change", updateSyncExcludeRegExp);
 
 maybeShowPermissionsWarningIcon();
 for (let i=0; i < NUMBER_OF_KEYBOARD_SHORTCUTS; i++) {

src/js/popup.js

@@ -32,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";
@@ -122,6 +123,19 @@ 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;
@@ -211,6 +225,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({
@@ -396,7 +415,11 @@ 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
@@ -406,12 +429,34 @@ const Logic = {
         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;
       }
     }
   },
@@ -640,7 +685,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);
@@ -940,6 +985,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" : "";
@@ -963,6 +1009,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);
   },
 
@@ -1424,11 +1477,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 truncate-text">${site.hostname}</span>
-          <img class="trash-button delete-assignment" src="/img/container-delete.svg" />
+          <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");
@@ -1440,6 +1496,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);
       });
@@ -2215,6 +2285,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.
 // ----------------------------------------------------------------------------
 

src/js/utils.js

@@ -138,6 +138,14 @@ const Utils = {
     });
   },
 
+  resetCookiesForSite(pageUrl, cookieStoreId) {
+    return browser.runtime.sendMessage({ 
+      method: "resetCookiesForSite", 
+      pageUrl,
+      cookieStoreId,
+    });
+  },
+
   async reloadInContainer(url, currentUserContextId, newUserContextId, tabIndex, active) {
     return await browser.runtime.sendMessage({
       method: "reloadInContainer",

src/manifest.json

@@ -1,12 +1,12 @@
 {
   "manifest_version": 2,
   "name": "Firefox Multi-Account Containers",
-  "version": "8.1.0",
+  "version": "8.2.0",
   "incognito": "not_allowed",
   "description": "__MSG_extensionDescription__",
   "icons": {
-    "48": "img/container-site-d-48.png",
-    "96": "img/container-site-d-96.png"
+    "48": "img/multiaccountcontainer-16.svg",
+    "96": "img/multiaccountcontainer-16.svg"
   },
   "homepage_url": "https://github.com/mozilla/multi-account-containers#readme",
   "permissions": [
@@ -26,6 +26,7 @@
   ],
   "optional_permissions": [
     "bookmarks",
+    "browsingData",
     "nativeMessaging",
     "proxy"
   ],
@@ -41,77 +42,85 @@
         "default": "Ctrl+Period",
         "mac": "MacCtrl+Period"
       },
-      "description": "Open containers panel"
+      "description": "__MSG_openContainerPanel__"
+    },
+    "sort_tabs": {
+      "suggested_key": {
+        "default": "Ctrl+Comma",
+        "mac": "MacCtrl+Comma"
+      },
+      "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__"
     }
   },
   "browser_action": {
     "browser_style": true,
     "default_icon": "img/multiaccountcontainer-16.svg",
-    "default_title": "Multi-Account Containers",
+    "default_title": "Firefox Multi-Account Containers",
     "default_popup": "popup.html",
+    "default_area": "navbar",
     "theme_icons": [
       {
-        "light": "img/multiaccountcontainer-16-dark.svg",
+        "light": "img/multiaccountcontainer-16.svg",
         "dark": "img/multiaccountcontainer-16.svg",
         "size": 32
       }
@@ -120,7 +129,7 @@
   "page_action": {
     "browser_style": true,
     "default_icon": "img/container-openin-16.svg",
-    "default_title": "Always open this in a Container",
+    "default_title": "__MSG_alwaysOpenSiteInContainer__",
     "default_popup": "pageActionPopup.html",
     "pinned": false,
     "show_matches": ["*://*/*"]
@@ -144,7 +153,7 @@
   ],
   "default_locale": "en",
   "web_accessible_resources": [
-    "/img/container-site-d-24.png"
+    "/img/multiaccountcontainer-16.svg"
   ],
   "options_ui": {
     "page": "options.html",

src/options.html

@@ -40,7 +40,7 @@
           </div>
         </div>
       </div>
-      <h3 data-i18n-message-id="firefoxAccountsSync"></h3>
+      <h3 data-i18n-message-id="sync"></h3>
       <div class="settings-group">
         <label>
           <input type="checkbox" id="syncCheck">
@@ -48,15 +48,6 @@
         </label>
         <p><em data-i18n-message-id="enableSyncDescription"></em></p>
       </div>
-      <div class="settings-group-column">
-        <label for="syncExcludeRegExp">
-          <span class="bold" data-i18n-message-id="syncExclude"></span>
-        </label>
-        <input id="syncExcludeRegExp"
-          data-i18n-attribute="placeholder"
-          data-i18n-attribute-message-id="syncExcludePlaceholder">
-        <p><em data-i18n-message-id="syncExcludeDescription"></em></p>
-      </div>
 
       <h3 data-i18n-message-id="tabBehavior"></h3>
 

src/pageActionPopup.html

@@ -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">
 

src/popup.html

@@ -1,7 +1,7 @@
 <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>
   <link rel="stylesheet" href="./css/popup.css">
 </head>
@@ -44,7 +44,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 +53,8 @@
 
   <div class="panel onboarding onboarding-panel-7 hide" id="onboarding-panel-7">
     <img class="onboarding-img" alt="" src="/img/Account.svg" />
-    <h3 class="onboarding-title" data-i18n-message-id="onboarding-7-header"></h3>
-    <p data-i18n-message-id="onboarding-7-description"></p>
+    <h3 class="onboarding-title" data-i18n-message-id="onboarding-7-header-2"></h3>
+    <p data-i18n-message-id="onboarding-7-description-2"></p>
     <div class="half-button-wrapper">
       <a href="#" id="no-sign-in" class="half-onboarding-button grey-button keyboard-nav" tabindex="0" data-i18n-message-id="notNow"></a>
       <a href="#" id="sign-in" class="half-onboarding-button keyboard-nav" tabindex="0" data-i18n-message-id="signIn"></a>
@@ -107,7 +107,8 @@
   </div>
 
   <div class="panel menu-panel container-panel hide" id="container-panel">
-    <h3 class="title">Multi-Account Containers</h3>
+    <span class="popup-notification-card"></span>
+    <h3 class="title">Firefox Multi-Account Containers</h3>
     <a href="#" class="info-icon" id="info-icon" tabindex="10">
       <img data-i18n-attribute-message-id="info" data-i18n-attribute="alt" alt="" src="/img/info.svg" / >
     </a>
@@ -209,6 +210,7 @@
 
 
   <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>
@@ -245,6 +247,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">
@@ -267,8 +277,9 @@
 
 
   <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>
@@ -291,6 +302,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>
@@ -381,6 +393,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>
@@ -410,7 +423,23 @@
     </div>
     <div class="panel-footer">
       <a href="#" class="button expanded secondary footer-button cancel-button" data-i18n-message-id="cancel" id="delete-container-cancel-link"></a>
-      <a href="#" class="button expanded primary footer-button" data-i18n-message-id="ok" id="delete-container-ok-link"></a>
+      <a href="#" class="button expanded confirmation-destructive-ok-btn footer-button alert-text" data-i18n-message-id="ok" id="delete-container-ok-link"></a>
+    </div>
+  </div>
+
+  <div class="hide panel clear-container-storage-panel" id="clear-container-storage-panel">
+    <h3 class="title" id="container-clear-storage-title" data-i18n-message-id="default">
+    </h3>
+
+    <button class="btn-return arrow-left controller" id="close-clear-container-storage-panel"></button>
+    <hr>
+    <div class="panel-content clear-container-storage-confirm">
+      <h4 class="clear-container-storage-confirm-title" data-i18n-message-id="clearContainerStoragePanelTitle"></h4>
+      <p class="clear-container-storage-warning" data-i18n-message-id="clearContainerStorageConfirmation"></p>
+    </div>
+    <div class="panel-footer">
+      <a href="#" class="button expanded secondary footer-button cancel-button" data-i18n-message-id="cancel" id="clear-container-storage-cancel-link"></a>
+      <a href="#" class="button expanded confirmation-destructive-ok-btn footer-button alert-text" data-i18n-message-id="ok" id="clear-container-storage-ok-link"></a>
     </div>
   </div>
 

test/features/sync.test.js

@@ -187,50 +187,6 @@ describe("Sync", function() {
       this.syncHelper.lookupIdentityBy(identities, {name: "Mozilla"});
     (mozillaContainer.icon === "pet").should.be.true;
   });
-
-  it("excludeEmptyTest", async function() {
-    await this.syncHelper.stopSyncListeners();
-    await this.syncHelper.setState({}, LOCAL_DATA, TEST_CONTAINERS, []);
-    await this.syncHelper.unsetExcludeRegexp();
-
-    await this.webExt.background.window.sync.runSync();
-
-    // We excluded nothing, so all identities should be part of the sync storage.
-    const identities = await this.syncHelper.getIdentitiesFromSyncStorage();
-    TEST_CONTAINERS.length.should.equal(identities.length);
-  });
-
-  it("excludeOutgoingTest", async function() {
-    await this.syncHelper.stopSyncListeners();
-    await this.syncHelper.setState({}, LOCAL_DATA, TEST_CONTAINERS, []);
-
-    // Our outgoing container is the last test container.
-    const outgoingContainerName = TEST_CONTAINERS.at(-1).name;
-    await this.syncHelper.setExcludeRegexp(`^${outgoingContainerName}$`);
-
-    await this.webExt.background.window.sync.runSync();
-
-    // We excluded an outgoing container, so its identity should not be part of the sync storage.
-    const identities = await this.syncHelper.getIdentitiesFromSyncStorage();
-    this.syncHelper.lookupIdentityBy(identities, {name: outgoingContainerName}).should.be.false;
-  });
-
-  it("excludeIncomingTest", async function() {
-    await this.syncHelper.stopSyncListeners();
-    await this.syncHelper.setState(SYNC_DATA, LOCAL_DATA, TEST_CONTAINERS, []);
-    
-    // Our incoming container is the first that's in the sync storage but not in the local storage
-    const incomingContainerName = Object.values(SYNC_DATA).find((sync_container) =>
-      !TEST_CONTAINERS.find((local_container) => sync_container.name === local_container.name)
-    ).name;
-    await this.syncHelper.setExcludeRegexp(`^${incomingContainerName}$`);
-
-    await this.webExt.background.window.sync.runSync();
-
-    // We excluded an incoming container, so its identity should not be part of the local storage.
-    const identities = await this.webExt.browser.contextualIdentities.query({});
-    this.syncHelper.lookupIdentityBy(identities, {name: incomingContainerName}).should.be.false;
-  });
 });
 
 class SyncTestHelper {
@@ -268,15 +224,7 @@ class SyncTestHelper {
     }
     return;
   }
-
-  async setExcludeRegexp(syncExcludeRegExp) {
-    await this.webExt.browser.storage.local.set({syncExcludeRegExp});
-  }
   
-  async unsetExcludeRegexp() {
-    await this.webExt.browser.storage.local.remove("syncExcludeRegExp");
-  }
-
   async removeAllContainers() {
     const identities = await this.webExt.browser.contextualIdentities.query({});
     for (const identity of identities) {
@@ -284,14 +232,6 @@ class SyncTestHelper {
     }
   }
 
-  async getIdentitiesFromSyncStorage() {
-    const storage = await this.webExt.browser.storage.sync.get();
-    const identities = Object.fromEntries(
-      Object.entries(storage).filter(([key]) => key.startsWith("identity@@"))
-    );
-    return Object.values(identities);
-  }
-
   lookupIdentityBy(identities, options) {
     for (const identity of identities) {
       if (options && options.name) {