From d4fcd061f92374fd5a5baaa20d06e287fc2d8781 Mon Sep 17 00:00:00 2001
From: Tobias Laundal <tobias@laundal.no>
Date: Thu, 16 Nov 2017 19:59:58 +0100
Subject: [PATCH] Add hide/show buttons to main pane in popup

Makes it more effective to hide and show containers.
For the future, this should be fixed to not close the pane when hiding or showing a container, so multiple containers can be toggled with a single visit to the popup, but this has proven hard to do.
---
 webextension/js/popup.js | 35 ++++++++++++++++++++++++++---------
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/webextension/js/popup.js b/webextension/js/popup.js
index 37666c1..2375d4c 100644
--- a/webextension/js/popup.js
+++ b/webextension/js/popup.js
@@ -595,6 +595,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
       const hasTabs = (identity.hasHiddenTabs || identity.hasOpenTabs);
       const tr = document.createElement("tr");
       const context = document.createElement("td");
+      const hide = document.createElement("td");
       const manage = document.createElement("td");
 
       tr.classList.add("container-panel-row");
@@ -615,11 +616,24 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
       context.querySelector(".container-name").textContent = identity.name;
       manage.innerHTML = "<img src='/img/container-arrow.svg' class='show-tabs pop-button-image-small' />";
 
+      hide.classList.add("hide-or-show-tabs", "pop-button");
+      const img = document.createElement("img");
+      img.classList.add("hide-or-show-tabs", "pop-button-image-small");
+      if (identity.hasHiddenTabs) {
+        hide.title = escaped`Show ${identity.name} container`;
+        img.setAttribute("src", CONTAINER_HIDE_SRC);
+      } else {
+        hide.title = escaped`Hide ${identity.name} container`;
+        img.setAttribute("src", CONTAINER_UNHIDE_SRC);
+      }
+      hide.appendChild(img);
+
       fragment.appendChild(tr);
 
       tr.appendChild(context);
 
       if (hasTabs) {
+        tr.appendChild(hide);
         tr.appendChild(manage);
       }
 
@@ -627,16 +641,19 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
         if (e.target.matches(".open-newtab")
             || e.target.parentNode.matches(".open-newtab")
             || e.type === "keydown") {
-          try {
-            browser.tabs.create({
-              cookieStoreId: identity.cookieStoreId
-            });
-            window.close();
-          } catch (e) {
-            window.close();
-          }
-        } else if (hasTabs) {
+          browser.tabs.create({
+            cookieStoreId: identity.cookieStoreId
+          }).then(window.close).catch(window.close);
+        } else if (e.target.matches(".show-tabs")
+                   || e.target.parentNode.matches(".show-tabs")) {
           Logic.showPanel(P_CONTAINER_INFO, identity);
+        } else if (e.target.matches(".hide-or-show-tabs")
+                   || e.target.parentNode.matches(".hide-or-show-tabs")) {
+          browser.runtime.sendMessage({
+            method: identity.hasHiddenTabs ? "showTabs" : "hideTabs",
+            windowId: browser.windows.WINDOW_ID_CURRENT,
+            cookieStoreId: identity.cookieStoreId
+          }).then(window.close).catch(window.close);
         }
       });
     });