From 6c3c6d0e9e540862effa45a3bbf5ff747ac84540 Mon Sep 17 00:00:00 2001
From: groovecoder <luke.crouch@gmail.com>
Date: Wed, 28 Dec 2016 12:45:32 -0600
Subject: [PATCH] fix #12: [un]hide icons in the pop-up UI

---
 webextension/css/popup.css |  6 ++++++
 webextension/js/popup.js   | 30 +++++++++++++++++-------------
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/webextension/css/popup.css b/webextension/css/popup.css
index 36aa297..aed9df4 100644
--- a/webextension/css/popup.css
+++ b/webextension/css/popup.css
@@ -39,6 +39,12 @@ table.unstriped tbody tr {
   height: 32px;
 }
 
+.hideorshow-icon {
+  max-width: 16px;
+  height: 16px;
+  margin: 4px;
+}
+
 .edit-identities {
   background: #DCDBDC;
 }
diff --git a/webextension/js/popup.js b/webextension/js/popup.js
index 49305ec..feb3147 100644
--- a/webextension/js/popup.js
+++ b/webextension/js/popup.js
@@ -3,17 +3,23 @@ const identityState = {
 };
 
 function hideContainer(containerId) {
+  const hideorshowIcon = document.querySelector(`#${containerId}-hideorshow-icon`);
+
+  hideorshowIcon.src = '/img/container-unhide.svg';
   browser.contextualIdentities.hide(containerId);
 }
 
 function showContainer(containerId) {
+  const hideorshowIcon = document.querySelector(`#${containerId}-hideorshow-icon`);
+
+  hideorshowIcon.src = '/img/container-hide.svg';
   browser.contextualIdentities.show(containerId);
 }
 
 browser.contextualIdentities.query({}).then(identites=> {
   const identitiesListElement = document.querySelector('.identities-list');
 
-  identites.forEach(identity => {
+  identites.forEach(identity=> {
     const identityRow = `
     <tr data-identity-cookie-store-id="${identity.cookieStoreId}" >
       <td><div class="userContext-icon"
@@ -21,7 +27,14 @@ browser.contextualIdentities.query({}).then(identites=> {
         data-identity-color="${identity.color}"
       ></div></td>
       <td>${identity.name}</td>
-      <td class="hideorshow" >H/S</td>
+      <td class="hideorshow" >
+        <img
+          data-identity-cookie-store-id="${identity.cookieStoreId}"
+          id="${identity.cookieStoreId}-hideorshow-icon"
+          class="hideorshow-icon"
+          src="/img/container-hide.svg"
+        />
+      </td>
       <td>&gt;</td>
     </tr>`;
 
@@ -33,8 +46,8 @@ browser.contextualIdentities.query({}).then(identites=> {
 
   rows.forEach(row=> {
     row.addEventListener('click', e=> {
-      if (e.target.matches('.hideorshow')) {
-        const containerId = e.target.parentElement.dataset.identityCookieStoreId;
+      if (e.target.matches('.hideorshow-icon')) {
+        const containerId = e.target.dataset.identityCookieStoreId;
 
         if (!(containerId in identityState)) {
           identityState[containerId] = true;
@@ -57,12 +70,3 @@ document.querySelector('#edit-containers-link').addEventListener('click', ()=> {
     window.close();
   });
 });
-
-
-function hideContainer(containerId) {
-  browser.contextualIdentities.hide(containerId);
-}
-
-function showContainer(containerId) {
-  browser.contextualIdentities.show(containerId);
-}