feat #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,
@@ -287,7 +288,7 @@ table {
 
 /* 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;
@@ -2314,7 +2315,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 +2325,21 @@ input {
   text-align: center;
 }
 
-tr > td > .trash-button {
+.reset-button {
+  margin-right: 8px;
+}
+
+.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

@@ -571,6 +571,18 @@ window.assignManager = {
     return true;
   },
 
+  async _resetCookiesForSite(pageUrl, cookieStoreId) {
+    const url = new URL(pageUrl);
+    // Remove 'www.' from the domain value
+    const domain = url.hostname.replace(/^www\./, ''); 
+    const cookies = await browser.cookies.getAll({domain: domain, storeId: cookieStoreId});
+    for (const cookie of cookies) {
+        const domain = cookie.domain.startsWith('.') ? cookie.domain.slice(1) : cookie.domain;
+        const cookieUrl = `${cookie.secure ? 'https' : 'http'}://${domain}${cookie.path}`;
+        await browser.cookies.remove({ url: cookieUrl, name: cookie.name, storeId: cookie.storeId });   
+    }
+  },
+
   async _setOrRemoveAssignment(tabId, pageUrl, userContextId, remove) {
     let actionName;
     // https://github.com/mozilla/testpilot-containers/issues/626

src/js/background/messageHandler.js

@@ -45,6 +45,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;

src/js/popup.js

@@ -1450,11 +1450,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("resetSiteCookiesTooltipInfo");
+        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 +1469,12 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
           delete assignments[siteKey];
           this.showAssignedContainers(assignments);
         });
+        const resetButton = trElement.querySelector(".reset-button");
+        Utils.addEnterHandler(resetButton, async () => {
+          const pageUrl = `https://${site.hostname}`
+          const cookieStoreId = Logic.currentCookieStoreId()
+          Utils.resetCookiesForSite(pageUrl, cookieStoreId);
+        });
         trElement.classList.add("menu-item", "hover-highlight", "keyboard-nav");
         tableElement.appendChild(trElement);
       });

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/popup.html

@@ -390,7 +390,7 @@ <h3 class="title" id="edit-assignments-title" data-i18n-message-id="default"></h
         <tr class="menu-item hover-highlight" tabindex="0">
           <td>
             <div class="favicon"><img class="menu-icon" src="https://www.mozilla.org/favicon.ico" /></div>
-            <span class="menu-text truncate-text">www.mozillllllllllllllllllllllllllllla.org</span>
+            <span class="menu-text truncate-text">www.mozillllllllllllllllllllllllllllllllllllla.org</span>
             <img class="trash-button" src="/img/container-delete.svg" />
           </td>
         </tr>