feat #303: Container storage deletion and confirmation popup

src/css/popup.css

@@ -237,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 {
@@ -286,6 +287,28 @@ table {
   display: none !important;
 }
 
+.popup-notification-card {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 2s;
+  border-radius: 4px;
+  font-size: 12px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 8px;
+  margin: 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 - 100px);

src/js/background/assignManager.js

@@ -581,6 +581,8 @@ window.assignManager = {
       const cookieUrl = `${cookie.secure ? "https" : "http"}://${domain}${cookie.path}`;
       await browser.cookies.remove({ url: cookieUrl, name: cookie.name, storeId: cookie.storeId });   
     }
+
+    return true; // Success
   },
 
   async _setOrRemoveAssignment(tabId, pageUrl, userContextId, remove) {

src/js/background/backgroundLogic.js

@@ -75,6 +75,21 @@ const backgroundLogic = {
     return extensionInfo;
   },
 
+  // Remove container data (cookies, localStorage and cache)
+  async deleteContainerDataOnly(userContextId) {
+    await this._closeTabs(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 @@ 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;

src/js/popup.js

@@ -122,6 +122,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");
+      }, 1000);
+    });
+  },
+
   async showAchievementOrContainersListPanel() {
     // Do we need to show an achievement panel?
     let showAchievements = false;
@@ -966,6 +979,20 @@ Logic.registerPanel(P_CONTAINER_INFO, {
       Utils.alwaysOpenInContainer(identity);
       window.close();
     });
+
+    const deleteData = document.querySelector("#delete-data-info-panel");
+    Utils.addEnterHandler(deleteData, async () => {
+      const userContextId = Utils.userContextId(identity.cookieStoreId)
+
+      await browser.runtime.sendMessage({
+        method: "deleteContainerDataOnly",
+        message: { userContextId }
+      });
+      
+      Logic.notify({messageId: "storageWasClearedConfirmation", placeholders: [identity.name]});
+      this.prepare();
+    });
+
     // 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" : "";
@@ -1473,7 +1500,12 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
         Utils.addEnterHandler(resetButton, async () => {
           const pageUrl = `https://${site.hostname}`;
           const cookieStoreId = Logic.currentCookieStoreId();
-          Utils.resetCookiesForSite(pageUrl, cookieStoreId);
+          const result = await Utils.resetCookiesForSite(pageUrl, cookieStoreId);
+          if (result === true) {
+            Logic.notify({messageId: "cookieResetSuccess", placeholders: []});
+          } else {
+            Logic.notify({messageId: "cookiesCouldNotBeReset", placeholders: []});
+          }
         });
         trElement.classList.add("menu-item", "hover-highlight", "keyboard-nav");
         tableElement.appendChild(trElement);

src/manifest.json

@@ -13,6 +13,7 @@
     "<all_urls>",
     "activeTab",
     "cookies",
+    "browsingData",
     "contextMenus",
     "contextualIdentities",
     "history",

src/popup.html

@@ -107,6 +107,7 @@
   </div>
 
   <div class="panel menu-panel container-panel hide" id="container-panel">
+    <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" / >
@@ -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,16 @@
             </span>
         </td>
       </tr>
+      <tr class="menu-item hover-highlight keyboard-nav" id="delete-data" tabindex="0">
+        <td>
+          <img class="menu-icon clear-storage-icon" alt="" src="img/container-delete.svg" />
+          <span class="menu-text" id="delete-data-info-panel" data-i18n-message-id="clearContainerStorage">
+            Delete data
+          </span>
+            <span class="menu-arrow">
+            </span>
+        </td>
+      </tr>
     </table>
     <hr>
     <div class="sub-header-wrapper">
@@ -267,6 +279,7 @@
 
 
   <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">
       Firefox Multi-Account Containers
     </h3>
@@ -291,6 +304,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 +395,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>