feat #303: confirmation page for clearing container storage, added de…

…structive colors

src/css/popup.css

@@ -294,10 +294,12 @@ table {
   border-radius: 4px;
   font-size: 12px;
   position: absolute;
-  top: 0;
-  left: 0;
-  padding: 8px;
-  margin: 8px;
+  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;
@@ -1529,8 +1531,8 @@ 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,
@@ -1818,12 +1820,12 @@ 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);
 }
@@ -2197,6 +2199,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;
@@ -2327,7 +2334,7 @@ input {
   font-weight: bolder;
 }
 
-.delete-warning {
+.delete-warning, .clear-container-storage-warning {
   padding-block-end: 8px;
   padding-block-start: 8px;
   padding-inline-end: 0;
@@ -2349,7 +2356,7 @@ input {
 }
 
 .reset-button {
-  margin-right: 8px;
+  margin-inline-end: 12px;
 }
 
 .tooltip-wrapper:hover .site-settings-tooltip {

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

src/popup.html

@@ -247,12 +247,10 @@ <h3 class="title" id="container-info-title" data-i18n-attribute-message-id="pers
             </span>
         </td>
       </tr>
-      <tr class="menu-item hover-highlight keyboard-nav" id="delete-data" tabindex="0">
+      <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="delete-data-info-panel" data-i18n-message-id="clearContainerStorage">
-            Delete data
-          </span>
+          <span class="menu-text" id="clear-container-storage-info" data-i18n-message-id="clearContainerStorage"></span>
             <span class="menu-arrow">
             </span>
         </td>
@@ -425,7 +423,23 @@ <h4 class="delete-container-confirm-title" data-i18n-message-id="removeThisConta
     </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>