#303: Reset cookies in site manager

src/css/popup.css

@@ -228,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,
@@ -236,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 {
@@ -285,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;
@@ -1505,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,
@@ -1794,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);
 }
@@ -2173,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;
@@ -2303,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;
@@ -2314,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;
@@ -2323,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/js/background/assignManager.js

@@ -119,7 +119,7 @@
           }
           const site = siteConfigs[urlKey];
           // In hindsight we should have stored this
           // TODO file a follow up to clean the storage onLoad
           site.hostname = urlKey.replace(/^siteContainerMap@@_/, "");
           sites[urlKey] = site;
         }
@@ -571,6 +571,16 @@
     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

src/js/background/backgroundLogic.js

@@ -75,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;

src/js/background/messageHandler.js

@@ -23,6 +23,9 @@
       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 @@
         // 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;
@@ -58,7 +64,7 @@
         });
         break;
       case "checkIncompatibleAddons":
         // TODO
         break;
       case "moveTabsToWindow":
         response = backgroundLogic.moveTabsToWindow({

src/js/popup.js

@@ -32,6 +32,7 @@
 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 @@
 
   },
 
+  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;
@@ -823,7 +837,7 @@
 
       td.innerHTML = Utils.escaped`
         <div data-moz-proxy-warning="" class="menu-item-name">
           <div class="menu-icon">
 
             <div class="usercontext-icon"
               data-identity-icon="${identity.icon}"
@@ -966,6 +980,7 @@
       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" : "";
@@ -989,6 +1004,13 @@
     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);
   },
 
@@ -1450,11 +1472,14 @@
         /* 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");
@@ -1466,6 +1491,20 @@
           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);
       });
@@ -2241,6 +2280,47 @@
   }
 });
 
+// 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

@@ -5,7 +5,7 @@
 // eslint-disable-next-line
 const CONTAINER_ORDER_STORAGE_KEY = "container-order";
 
 // TODO use export here instead of globals
 const Utils = {
 
   createFavIconElement(url) {
@@ -138,6 +138,14 @@
     });
   },
 
+  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

@@ -26,6 +26,7 @@
   ],
   "optional_permissions": [
     "bookmarks",
+    "browsingData",
     "nativeMessaging",
     "proxy"
   ],