From bfdbd8199fba99a9b42c03ac6053fd30abec76da Mon Sep 17 00:00:00 2001
From: shivangikakkar <shivangikakkar15@gmail.com>
Date: Tue, 25 Sep 2018 00:21:46 +0530
Subject: [PATCH] fixes-168, added ability to close a tab individually

---
 src/css/popup.css               | 20 ++++++++++++++++++++
 src/img/container-close-tab.svg | 10 ++++++++++
 src/js/popup.js                 | 27 +++++++++++++++++++++++----
 3 files changed, 53 insertions(+), 4 deletions(-)
 create mode 100644 src/img/container-close-tab.svg

diff --git a/src/css/popup.css b/src/css/popup.css
index af78306..12b7957 100644
--- a/src/css/popup.css
+++ b/src/css/popup.css
@@ -670,6 +670,26 @@ span ~ .panel-header-text {
   opacity: 0.3;
 }
 
+.container-close-tab {
+  width:50%;
+  opacity: 0;
+}
+
+.container-info-tab-row:hover .container-close-tab {
+  opacity: 0.5;
+}
+.container-info-tab-row .container-close-tab:hover {
+  opacity: 1;
+}
+
+.container-info-tab-row:not(.clickable) .container-close-tab{
+  opacity: 0;
+}
+
+.container-info-tab-row:not(.clickable):hover .container-close-tab {
+  opacity: 0.5;
+}
+
 .container-info-has-tabs,
 .container-info-tab-row {
   align-items: center;
diff --git a/src/img/container-close-tab.svg b/src/img/container-close-tab.svg
new file mode 100644
index 0000000..a89606f
--- /dev/null
+++ b/src/img/container-close-tab.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 7 7" style="enable-background:new 0 0 7 7;" xml:space="preserve">
+<g id="Symbols">
+	<g id="close-glyph">
+		<polygon style="fill:#4C4C4C;" points="5.8,0 3.5,2.4 1.2,0 0,1.2 2.4,3.5 0.1,5.8 1.2,7 3.5,4.7 5.8,7 7,5.8 4.7,3.5 7,1.2 		"/>
+	</g>
+</g>
+</svg>
diff --git a/src/js/popup.js b/src/js/popup.js
index a9e3d26..1031e5c 100644
--- a/src/js/popup.js
+++ b/src/js/popup.js
@@ -769,6 +769,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
   },
 
   buildInfoTable(tabs) {
+    const identity = Logic.currentIdentity();
     // For each one, let's create a new line.
     const fragment = document.createDocumentFragment();
     for (let tab of tabs) { // eslint-disable-line prefer-const
@@ -777,9 +778,29 @@ Logic.registerPanel(P_CONTAINER_INFO, {
       tr.classList.add("container-info-tab-row");
       tr.innerHTML = escaped`
         <td></td>
-        <td class="container-info-tab-title truncate-text" title="${tab.url}" >${tab.title}</td>`;
+        <td class="container-info-tab-title truncate-text" title="${tab.url}" >${tab.title}</td>
+        <td><img src="/img/container-close-tab.svg" id="close-tab" class="container-close-tab clickable" /></td>`;
       tr.querySelector("td").appendChild(Utils.createFavIconElement(tab.favIconUrl));
 
+      document.getElementById("container-info-table").appendChild(fragment);
+
+      const closeTab = document.querySelector("#close-tab");
+      closeTab.setAttribute("id", tab.id);
+
+      if(identity.hasHiddenTabs) {
+        closeTab.addEventListener("mouseover",function() {
+          tr.classList.add("clickable");
+        });
+        closeTab.addEventListener("mouseout",function() {
+          tr.classList.remove("clickable");
+        });
+      }
+
+      Logic.addEnterHandler(closeTab, async function(e) {
+        await browser.tabs.remove(Number(e.target.id));
+        window.close();
+      });
+
       // On click, we activate this tab. But only if this tab is active.
       if (!tab.hiddenState) {
         tr.classList.add("clickable");
@@ -788,9 +809,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
           window.close();
         });
       }
-    }
-
-    document.getElementById("container-info-table").appendChild(fragment);
+    } 
   },
 });