diff --git a/webextension/css/popup.css b/webextension/css/popup.css index 9f4a8e0..0d15dbe 100644 --- a/webextension/css/popup.css +++ b/webextension/css/popup.css @@ -175,12 +175,12 @@ table { cursor: pointer; } -.edit-panel-footer { +.edit-containers-panel-footer { background: #248aeb; color: #ffffff; justify-content: center; } -.edit-panel-footer a { +.edit-containers-panel-footer a { color: #ffffff; } diff --git a/webextension/js/popup.js b/webextension/js/popup.js index 05ce0cd..ec9aec5 100644 --- a/webextension/js/popup.js +++ b/webextension/js/popup.js @@ -128,7 +128,53 @@ browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => { }); document.querySelector("#edit-containers-link").addEventListener("click", () => { - showPanel("#edit-panel"); + browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => { + let fragment = document.createDocumentFragment(); + + identities.forEach(identity => { + let tr = document.createElement("tr"); + fragment.appendChild(tr); + tr.setAttribute("data-identity-cookie-store-id", identity.userContextId); + tr.innerHTML = ` + +
+
+ + ${identity.name} + + + + + + + >`; + + tr.addEventListener("click", e => { + if (e.target.matches(".edit-container-icon")) { + console.log(`clicked to edit ${identity.userContextId} container`); + } else if (e.target.matches(".delete-container-icon")) { + console.log(`clicked to delete ${identity.userContextId} container`); + } + }); + }); + + document.querySelector("#edit-identities-list").innerHTML = ""; + document.querySelector("#edit-identities-list").appendChild(fragment); + }); + showPanel("#edit-containers-panel"); }); document.querySelector("#exit-edit-mode-link").addEventListener("click", () => { diff --git a/webextension/popup.html b/webextension/popup.html index b03efd2..cef9633 100644 --- a/webextension/popup.html +++ b/webextension/popup.html @@ -41,22 +41,24 @@ Edit Containers
- + + + Create new container icon +
-
+

Edit Containers

- +
-