From 962cd623b83eab2f2a602057f443ce1f2c98c5c0 Mon Sep 17 00:00:00 2001
From: groovecoder <luke.crouch@gmail.com>
Date: Tue, 10 Jan 2017 13:22:07 -0600
Subject: [PATCH] for #55: edit-containers-panel with live list

---
 webextension/css/popup.css |  4 ++--
 webextension/js/popup.js   | 48 +++++++++++++++++++++++++++++++++++++-
 webextension/popup.html    | 10 ++++----
 3 files changed, 55 insertions(+), 7 deletions(-)

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 = `
+        <td>
+          <div class="userContext-icon"
+            data-identity-icon="${identity.image}"
+            data-identity-color="${identity.color}">
+          </div>
+        </td>
+        <td>${identity.name}</td>
+        <td class="edit-container">
+          <img
+            title="Edit ${identity.name} container"
+            data-identity-cookie-store-id="${identity.userContextId}"
+            id="edit-${identity.userContextId}-container-icon"
+            src="/img/container-edit.svg"
+            class="icon edit-container-icon" />
+        </td>
+        <td class="remove-container" >
+          <img
+            title="Remove ${identity.name} container"
+            data-identity-cookie-store-id="${identity.userContextId}"
+            id="delete-${identity.userContextId}-container-icon"
+            class="icon delete-container-icon"
+            src="/img/container-delete.svg"
+          />
+        </td>
+        <td>&gt;</td>`;
+
+      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 @@
         <a id="edit-containers-link">Edit Containers</a>
       </div>
       <div class="small-2 columns add-container">
-        &plus;
+        <a id="add-container-link">
+          <img alt="Create new container icon" title="Create new container" src="/img/container-add.svg" class="icon" />
+        </a>
       </div>
     </div>
   </div>
 
 
-  <div class="panel edit-panel hide" id="edit-panel">
+  <div class="panel edit-containers-panel hide" id="edit-containers-panel">
     <div class="row panel-header">
       <div class="small-12 columns">
         <h3 class="panel-header-text">Edit Containers</h3>
       </div>
     </div>
     <table class="unstriped hover">
-      <tbody class="edit-identities-list"></tbody>
+      <tbody id="edit-identities-list"></tbody>
     </table>
-    <div class="row panel-footer edit-panel-footer">
+    <div class="row panel-footer edit-containers-panel-footer">
       <a id="exit-edit-mode-link">&lt; Exit Edit Mode</a>
     </div>
   </div>