feat #303: confirmation page for clearing container storage, added destructive colors

src/js/background/assignManager.js

@@ -575,7 +575,7 @@ window.assignManager = {
     const hostNameTruncated = hostname.replace(/^www\./, ''); // Remove "www." from the hostname
     await browser.browsingData.removeCookies({
       cookieStoreId: cookieStoreId,
-      hostnames: [hostname, hostNameTruncated] // This does not remove cookies from associated domains. To remove all cookies, we have a container storage removal option.
+      hostnames: [hostNameTruncated] // This does not remove cookies from associated domains. To remove all cookies, we have a container storage removal option.
     });
 
     return true;

src/js/background/backgroundLogic.js

@@ -77,8 +77,6 @@ const backgroundLogic = {
 
   // Remove container data (cookies, localStorage and cache)
   async deleteContainerDataOnly(userContextId) {
-    await this._closeTabs(userContextId);
-
     await browser.browsingData.removeCookies({
       cookieStoreId: this.cookieStoreId(userContextId)
     });

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";
@@ -979,23 +980,7 @@ 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)
-
-      const result = await browser.runtime.sendMessage({
-        method: "deleteContainerDataOnly",
-        message: { userContextId }
-      });
-
-      if (result.done === true) {
-        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" : "";
@@ -1019,6 +1004,10 @@ 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, () => {
+      Logic.showPanel(P_CLEAR_CONTAINER_STORAGE, identity);
+    });
     return this.buildOpenTabTable(tabs);
   },
 
@@ -2284,6 +2273,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.
 // ----------------------------------------------------------------------------