sal/containerSite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace confirm dialogs with inline confirmation bars in popup

Browse Source
This commit is contained in:
sal
2026-03-04 22:58:19 -06:00
parent 0435d06bbc
commit e7007bef89
2 changed files with 76 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
popup/popup.css
View File

@@ -21,6 +21,12 @@ h1 { padding: 10px 12px 6px; font-size: 15px; font-weight: 600; border-bottom: 1
.regen:hover { border-color: #888; color: #ddd; }
.del { background: none; border: none; color: #664444; font-size: 15px; cursor: pointer; flex-shrink: 0; padding: 0 2px; line-height: 1; }
.del:hover { color: #ff613d; }
.confirm-bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: #2a1a1a; border-bottom: 1px solid #663333; }
.confirm-msg { flex: 1; font-size: 11px; color: #ffaa88; }
.confirm-yes { background: #663333; border: 1px solid #884444; color: #ff613d; border-radius: 4px; padding: 2px 8px; font-size: 11px; cursor: pointer; }
.confirm-yes:hover { background: #884444; color: #ff8866; }
.confirm-no { background: none; border: 1px solid #555; color: #aaa; border-radius: 4px; padding: 2px 8px; font-size: 11px; cursor: pointer; }
.confirm-no:hover { border-color: #888; color: #ddd; }
.actions { padding: 8px 12px; border-top: 1px solid #333; }
#regen-all { width: 100%; padding: 6px; background: #333; border: 1px solid #555; color: #ccc; border-radius: 4px; cursor: pointer; font-size: 12px; }
#regen-all:hover { background: #444; color: #fff; }

87
popup/popup.js
View File

@@ -79,15 +79,43 @@ async function loadContainers() {
del.className = "del";
del.textContent = "\u00D7";
del.title = "Delete container";
del.addEventListener("click", async () => {
if (!confirm(`Delete container "${c.name}"? This removes all cookies and data for this site.`)) return;
await browser.runtime.sendMessage({
type: "deleteContainer",
cookieStoreId: c.cookieStoreId
del.addEventListener("click", () => {
// Show inline confirmation
const existing = row.nextElementSibling;
if (existing && existing.classList.contains("confirm-bar")) {
existing.remove();
return;
}
// Remove any open panels
if (existing && existing.classList.contains("vector-panel")) existing.remove();
const bar = document.createElement("div");
bar.className = "confirm-bar";
const msg = document.createElement("span");
msg.className = "confirm-msg";
msg.textContent = `Delete "${c.name}"?`;
bar.appendChild(msg);
const yes = document.createElement("button");
yes.className = "confirm-yes";
yes.textContent = "Delete";
yes.addEventListener("click", async () => {
await browser.runtime.sendMessage({
type: "deleteContainer",
cookieStoreId: c.cookieStoreId
});
bar.remove();
row.remove();
});
const panel = row.nextElementSibling;
if (panel && panel.classList.contains("vector-panel")) panel.remove();
row.remove();
bar.appendChild(yes);
const no = document.createElement("button");
no.className = "confirm-no";
no.textContent = "Cancel";
no.addEventListener("click", () => bar.remove());
bar.appendChild(no);
row.after(bar);
});
row.appendChild(del);
@@ -184,15 +212,40 @@ document.getElementById("prune").addEventListener("click", async (e) => {
}, 1200);
});
document.getElementById("reset").addEventListener("click", async (e) => {
if (!confirm("Remove all ContainSite containers and data? You will need to log in to all sites again.")) return;
e.target.textContent = "Resetting...";
await browser.runtime.sendMessage({ type: "resetAll" });
e.target.textContent = "Done!";
setTimeout(() => {
e.target.textContent = "Reset All";
loadContainers();
}, 1200);
document.getElementById("reset").addEventListener("click", (e) => {
const actions = e.target.closest(".actions");
const existing = actions.querySelector(".confirm-bar");
if (existing) { existing.remove(); return; }
const bar = document.createElement("div");
bar.className = "confirm-bar";
const msg = document.createElement("span");
msg.className = "confirm-msg";
msg.textContent = "Remove all containers and data?";
bar.appendChild(msg);
const yes = document.createElement("button");
yes.className = "confirm-yes";
yes.textContent = "Reset";
yes.addEventListener("click", async () => {
bar.remove();
e.target.textContent = "Resetting...";
await browser.runtime.sendMessage({ type: "resetAll" });
e.target.textContent = "Done!";
setTimeout(() => {
e.target.textContent = "Reset All";
loadContainers();
}, 1200);
});
bar.appendChild(yes);
const no = document.createElement("button");
no.className = "confirm-no";
no.textContent = "Cancel";
no.addEventListener("click", () => bar.remove());
bar.appendChild(no);
actions.appendChild(bar);
});
document.getElementById("search").addEventListener("input", (e) => {