add delete progress

bulkDeleteConversations.js

@@ -1,21 +1,31 @@
 console.log("bulkDeleteConversations.js loaded");
 
+console.log("bulkDeleteConversations.js loaded");
+
 async function bulkDeleteConversations() {
   const selectedConversations = getSelectedConversations();
 
   if (selectedConversations.length === 0) {
     console.log("No conversations to delete.");
     removeAllCheckboxes();
+    chrome.runtime.sendMessage({ action: "deleteComplete" });
     return;
   }
 
-  console.log("Selected Conversations:", selectedConversations);
+  console.log("Selected Conversations:", selectedConversations.length);
 
   sendEventAsync(selectedConversations.length);
 
-  for (const element of selectedConversations) {
-    await deleteConversation(element);
+  for (let i = 0; i < selectedConversations.length; i++) {
+    await deleteConversation(selectedConversations[i]);
+    const progress = Math.round(((i + 1) / selectedConversations.length) * 100);
+    chrome.runtime.sendMessage({
+      action: "updateProgress",
+      progress: progress,
+    });
   }
+
+  chrome.runtime.sendMessage({ action: "deleteComplete" });
 }
 
 function getSelectedConversations() {

popup.css

@@ -344,3 +344,32 @@ button#bulk-archive {
   color: #fff; /* 完全白色 */
   text-shadow: 0 0 4px rgba(255, 255, 255, 0.5); /* 增强悬停时的光晕效果 */
 }
+
+/* Existing styles for the bulk delete button */
+button#bulk-delete {
+  background-color: #e74c3c;
+  color: white;
+  position: relative;
+  overflow: hidden;
+}
+
+/* New styles for progress bar */
+button#bulk-delete::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.3);
+  transform: translateX(-100%);
+  transition: transform 0.3s ease-out;
+}
+
+button#bulk-delete.progress {
+  cursor: not-allowed;
+}
+
+button#bulk-delete.progress::before {
+  transform: translateX(var(--progress, -100%));
+}

popup.js

@@ -1,14 +1,17 @@
-function loadGlobalsThenExecute(tabId, secondaryScript) {
+function loadGlobalsThenExecute(tabId, secondaryScript, callback) {
   chrome.scripting.executeScript(
     {
       target: { tabId: tabId },
       files: ["globals.js"],
     },
     () => {
-      chrome.scripting.executeScript({
+      chrome.scripting.executeScript(
+        {
           target: { tabId: tabId },
           files: [secondaryScript],
-      });
+        },
+        callback
+      );
     }
   );
 }
@@ -17,12 +20,38 @@ function addButtonListener(buttonId, scriptName) {
   document.getElementById(buttonId).addEventListener("click", () => {
     chrome.tabs.query({ active: true, currentWindow: true }, ([tab]) => {
       if (tab) {
+        if (buttonId === "bulk-delete") {
+          const bulkDeleteButton = document.getElementById("bulk-delete");
+          bulkDeleteButton.disabled = true;
+          bulkDeleteButton.classList.add("progress");
+
+          loadGlobalsThenExecute(tab.id, scriptName);
+        } else {
           loadGlobalsThenExecute(tab.id, scriptName);
         }
+      }
     });
   });
 }
 
+function updateProgressBar(progress) {
+  console.log("Updating progress bar:", progress);
+  const bulkDeleteButton = document.getElementById("bulk-delete");
+  bulkDeleteButton.style.setProperty("--progress", `${progress}%`);
+}
+
+chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
+  console.log("Received message:", request);
+  if (request.action === "updateProgress") {
+    updateProgressBar(request.progress);
+  } else if (request.action === "deleteComplete") {
+    const bulkDeleteButton = document.getElementById("bulk-delete");
+    bulkDeleteButton.disabled = false;
+    bulkDeleteButton.classList.remove("progress");
+    updateProgressBar(0);
+  }
+});
+
 function initializeButtons() {
   addButtonListener("add-checkboxes", "addCheckboxes.js");
   addButtonListener("bulk-delete", "bulkDeleteConversations.js");