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 1/7] 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);
+    } 
   },
 });
 

From 1ea04587d9d252d616b8d9e6b66f0454bb4b152f Mon Sep 17 00:00:00 2001
From: shivangikakkar <shivangikakkar15@gmail.com>
Date: Tue, 25 Sep 2018 17:47:17 +0530
Subject: [PATCH 2/7] resolves lint errors

---
 src/css/popup.css | 4 ++--
 src/js/popup.js   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/css/popup.css b/src/css/popup.css
index 12b7957..f3a02a5 100644
--- a/src/css/popup.css
+++ b/src/css/popup.css
@@ -671,18 +671,18 @@ span ~ .panel-header-text {
 }
 
 .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{
+.container-info-tab-row:not(.clickable) .container-close-tab {
   opacity: 0;
 }
 
diff --git a/src/js/popup.js b/src/js/popup.js
index 1031e5c..d35bf55 100644
--- a/src/js/popup.js
+++ b/src/js/popup.js
@@ -779,7 +779,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
       tr.innerHTML = escaped`
         <td></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>`;
+        <td><img src="/img/container-close-tab.svg" style="width:50%;" id="close-tab" class="container-close-tab clickable" /></td>`;
       tr.querySelector("td").appendChild(Utils.createFavIconElement(tab.favIconUrl));
 
       document.getElementById("container-info-table").appendChild(fragment);

From c15eee22c68cf4ab32c1e82295a8832b5432c2b1 Mon Sep 17 00:00:00 2001
From: shivangikakkar <shivangikakkar15@gmail.com>
Date: Sun, 21 Oct 2018 23:24:18 +0530
Subject: [PATCH 3/7] implemented remove individual tabs just for visible state

---
 src/css/popup.css |  7 ++-----
 src/js/popup.js   | 12 +-----------
 2 files changed, 3 insertions(+), 16 deletions(-)

diff --git a/src/css/popup.css b/src/css/popup.css
index f3a02a5..052b9d4 100644
--- a/src/css/popup.css
+++ b/src/css/popup.css
@@ -682,12 +682,9 @@ span ~ .panel-header-text {
   opacity: 1;
 }
 
-.container-info-tab-row:not(.clickable) .container-close-tab {
-  opacity: 0;
-}
-
+.container-info-tab-row:not(.clickable) .container-close-tab,
 .container-info-tab-row:not(.clickable):hover .container-close-tab {
-  opacity: 0.5;
+  opacity: 0;
 }
 
 .container-info-has-tabs,
diff --git a/src/js/popup.js b/src/js/popup.js
index d35bf55..2decbf2 100644
--- a/src/js/popup.js
+++ b/src/js/popup.js
@@ -769,7 +769,6 @@ 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
@@ -779,7 +778,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
       tr.innerHTML = escaped`
         <td></td>
         <td class="container-info-tab-title truncate-text" title="${tab.url}" >${tab.title}</td>
-        <td><img src="/img/container-close-tab.svg" style="width:50%;" id="close-tab" class="container-close-tab clickable" /></td>`;
+        <td><img src="/img/container-close-tab.svg" style="width:50%;" id="close-tab" class="container-close-tab" /></td>`;
       tr.querySelector("td").appendChild(Utils.createFavIconElement(tab.favIconUrl));
 
       document.getElementById("container-info-table").appendChild(fragment);
@@ -787,15 +786,6 @@ Logic.registerPanel(P_CONTAINER_INFO, {
       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();

From abc4e0cdcf8cf70a8799a24c737d11d9467330ee Mon Sep 17 00:00:00 2001
From: shivangikakkar <shivangikakkar15@gmail.com>
Date: Tue, 23 Oct 2018 15:13:41 +0530
Subject: [PATCH 4/7] review changes

---
 src/css/popup.css               |  5 -----
 src/img/container-close-tab.svg | 13 +++----------
 src/js/popup.js                 | 17 +++++++++--------
 3 files changed, 12 insertions(+), 23 deletions(-)

diff --git a/src/css/popup.css b/src/css/popup.css
index 052b9d4..8c15192 100644
--- a/src/css/popup.css
+++ b/src/css/popup.css
@@ -682,11 +682,6 @@ span ~ .panel-header-text {
   opacity: 1;
 }
 
-.container-info-tab-row:not(.clickable) .container-close-tab,
-.container-info-tab-row:not(.clickable):hover .container-close-tab {
-  opacity: 0;
-}
-
 .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
index a89606f..ad72e2a 100644
--- a/src/img/container-close-tab.svg
+++ b/src/img/container-close-tab.svg
@@ -1,10 +1,3 @@
-<?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>
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 7 7">
+	<polygon 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"/>
+</svg>
\ No newline at end of file
diff --git a/src/js/popup.js b/src/js/popup.js
index 2decbf2..9ea0565 100644
--- a/src/js/popup.js
+++ b/src/js/popup.js
@@ -778,18 +778,15 @@ Logic.registerPanel(P_CONTAINER_INFO, {
       tr.innerHTML = escaped`
         <td></td>
         <td class="container-info-tab-title truncate-text" title="${tab.url}" >${tab.title}</td>
-        <td><img src="/img/container-close-tab.svg" style="width:50%;" id="close-tab" class="container-close-tab" /></td>`;
+        <td><img src="/img/container-close-tab.svg" width="50%" id="${tab.id}" class="container-close-tab" /></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);
-
-      Logic.addEnterHandler(closeTab, async function(e) {
-        await browser.tabs.remove(Number(e.target.id));
-        window.close();
-      });
+      const closeTab = document.getElementById(tab.id);
+      if(tab.hiddenState) {
+        closeTab.remove();
+      }
 
       // On click, we activate this tab. But only if this tab is active.
       if (!tab.hiddenState) {
@@ -798,6 +795,10 @@ Logic.registerPanel(P_CONTAINER_INFO, {
           await browser.tabs.update(tab.id, {active: true});
           window.close();
         });
+        Logic.addEnterHandler(closeTab, async function(e) {
+          await browser.tabs.remove(Number(e.target.id));
+          window.close();
+        });
       }
     } 
   },

From 8af4c36fd014d2a5612e13ada0339d6f903ea442 Mon Sep 17 00:00:00 2001
From: shivangikakkar <shivangikakkar15@gmail.com>
Date: Mon, 29 Oct 2018 16:32:10 +0530
Subject: [PATCH 5/7] removing inline css

---
 src/css/popup.css | 1 +
 src/js/popup.js   | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/css/popup.css b/src/css/popup.css
index 8c15192..1542bce 100644
--- a/src/css/popup.css
+++ b/src/css/popup.css
@@ -671,6 +671,7 @@ span ~ .panel-header-text {
 }
 
 .container-close-tab {
+  inline-size: 50%;
   opacity: 0;
 }
 
diff --git a/src/js/popup.js b/src/js/popup.js
index 9ea0565..ec3ffd0 100644
--- a/src/js/popup.js
+++ b/src/js/popup.js
@@ -778,7 +778,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
       tr.innerHTML = escaped`
         <td></td>
         <td class="container-info-tab-title truncate-text" title="${tab.url}" >${tab.title}</td>
-        <td><img src="/img/container-close-tab.svg" width="50%" id="${tab.id}" class="container-close-tab" /></td>`;
+        <td><img src="/img/container-close-tab.svg" id="${tab.id}" class="container-close-tab" /></td>`;
       tr.querySelector("td").appendChild(Utils.createFavIconElement(tab.favIconUrl));
 
       document.getElementById("container-info-table").appendChild(fragment);

From db0dba66b2ba974af2ee14a673ba423161bb1f1f Mon Sep 17 00:00:00 2001
From: shivangikakkar <shivangikakkar15@gmail.com>
Date: Fri, 11 Jan 2019 04:06:08 +0900
Subject: [PATCH 6/7] dynamically added close image icon in the title column

---
 src/css/popup.css               | 12 +++++++---
 src/img/container-close-tab.svg |  2 +-
 src/js/popup.js                 | 40 ++++++++++++++++++++++-----------
 3 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/src/css/popup.css b/src/css/popup.css
index 1542bce..485e2a6 100644
--- a/src/css/popup.css
+++ b/src/css/popup.css
@@ -653,7 +653,11 @@ span ~ .panel-header-text {
 
 /* Container info list */
 .container-info-tab-title {
-  flex: 1;
+  display: flex;
+}
+
+.container-info-tab-row:hover .container-info-tab-title .truncate-text {
+  inline-size: 184px;
 }
 
 #container-info-hideorshow {
@@ -671,16 +675,18 @@ span ~ .panel-header-text {
 }
 
 .container-close-tab {
-  inline-size: 50%;
-  opacity: 0;
+  transform: scale(0.7);
+  visibility: collapse;
 }
 
 .container-info-tab-row:hover .container-close-tab {
   opacity: 0.5;
+  visibility: visible;
 }
 
 .container-info-tab-row .container-close-tab:hover {
   opacity: 1;
+  visibility: visible;
 }
 
 .container-info-has-tabs,
diff --git a/src/img/container-close-tab.svg b/src/img/container-close-tab.svg
index ad72e2a..a36fa01 100644
--- a/src/img/container-close-tab.svg
+++ b/src/img/container-close-tab.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 7 7">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 7">
 	<polygon 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"/>
 </svg>
\ No newline at end of file
diff --git a/src/js/popup.js b/src/js/popup.js
index ec3ffd0..1604407 100644
--- a/src/js/popup.js
+++ b/src/js/popup.js
@@ -777,28 +777,42 @@ 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><img src="/img/container-close-tab.svg" id="${tab.id}" class="container-close-tab" /></td>`;
+        <td class="container-info-tab-title truncate-text" title="${tab.url}" ><div class="container-tab-title">${tab.title}</div></td>`;
       tr.querySelector("td").appendChild(Utils.createFavIconElement(tab.favIconUrl));
-
       document.getElementById("container-info-table").appendChild(fragment);
-
-      const closeTab = document.getElementById(tab.id);
-      if(tab.hiddenState) {
-        closeTab.remove();
-      }
-
+      
       // On click, we activate this tab. But only if this tab is active.
       if (!tab.hiddenState) {
+        const closeImage = document.createElement("img");
+        closeImage.src="/img/container-close-tab.svg";
+        closeImage.className = "container-close-tab";
+        closeImage.title="Close tab";
+        closeImage.id = tab.id;
+        tr.querySelector(".container-info-tab-title").appendChild(closeImage);
+
+        // On hover, we add truncate-text class to add close-tab-image after tab title truncates
+        tr.addEventListener("mouseover", () => {
+          tr.querySelector(".container-info-tab-title").classList.remove("truncate-text");
+          tr.querySelector(".container-tab-title").classList.add("truncate-text");
+        });
+        tr.addEventListener("mouseout", () => {
+          tr.querySelector(".container-info-tab-title").classList.add("truncate-text");
+          tr.querySelector(".container-tab-title").classList.remove("truncate-text");
+        });
+
         tr.classList.add("clickable");
         Logic.addEnterHandler(tr, async function () {
           await browser.tabs.update(tab.id, {active: true});
           window.close();
         });
-        Logic.addEnterHandler(closeTab, async function(e) {
-          await browser.tabs.remove(Number(e.target.id));
-          window.close();
-        });
+
+        const closeTab = document.getElementById(tab.id);
+        if (closeTab) {
+          Logic.addEnterHandler(closeTab, async function(e) {
+            await browser.tabs.remove(Number(e.target.id));
+            window.close();
+          });
+        }
       }
     } 
   },

From 6d7086d541500894876362b2deae0d59f49b3b7b Mon Sep 17 00:00:00 2001
From: shivangikakkar <shivangikakkar15@gmail.com>
Date: Fri, 11 Jan 2019 09:25:00 +0900
Subject: [PATCH 7/7] added functions and cosmetic changes

---
 src/css/popup.css |  9 +++------
 src/js/popup.js   | 22 +++++++++++-----------
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/src/css/popup.css b/src/css/popup.css
index 485e2a6..beede2c 100644
--- a/src/css/popup.css
+++ b/src/css/popup.css
@@ -45,6 +45,7 @@ body {
   --small-text-size: 0.833rem; /* 10px */
   --small-radius: 3px;
   --icon-button-size: calc(calc(var(--block-line-separation-size) * 2) + 1.66rem); /* 20px */
+  --column-panel-inline-size: 268px;
 }
 
 @media (min-resolution: 1dppx) {
@@ -266,7 +267,7 @@ table {
 .column-panel-content {
   display: flex;
   flex-direction: column;
-  inline-size: 268px;
+  inline-size: var(--column-panel-inline-size);
 }
 
 .column-panel-content .panel-footer {
@@ -657,7 +658,7 @@ span ~ .panel-header-text {
 }
 
 .container-info-tab-row:hover .container-info-tab-title .truncate-text {
-  inline-size: 184px;
+  inline-size: calc(var(--column-panel-inline-size) - 58px);
 }
 
 #container-info-hideorshow {
@@ -715,10 +716,6 @@ span ~ .panel-header-text {
   margin-inline-end: 0;
 }
 
-.container-info-tab-row td {
-  max-inline-size: 200px;
-}
-
 .container-info-list {
   display: flex;
   flex-direction: column;
diff --git a/src/js/popup.js b/src/js/popup.js
index 1604407..f9690de 100644
--- a/src/js/popup.js
+++ b/src/js/popup.js
@@ -784,21 +784,21 @@ Logic.registerPanel(P_CONTAINER_INFO, {
       // On click, we activate this tab. But only if this tab is active.
       if (!tab.hiddenState) {
         const closeImage = document.createElement("img");
-        closeImage.src="/img/container-close-tab.svg";
+        closeImage.src = "/img/container-close-tab.svg";
         closeImage.className = "container-close-tab";
-        closeImage.title="Close tab";
+        closeImage.title = "Close tab";
         closeImage.id = tab.id;
-        tr.querySelector(".container-info-tab-title").appendChild(closeImage);
+        const tabTitle = tr.querySelector(".container-info-tab-title");
+        tabTitle.appendChild(closeImage);
 
         // On hover, we add truncate-text class to add close-tab-image after tab title truncates
-        tr.addEventListener("mouseover", () => {
-          tr.querySelector(".container-info-tab-title").classList.remove("truncate-text");
-          tr.querySelector(".container-tab-title").classList.add("truncate-text");
-        });
-        tr.addEventListener("mouseout", () => {
-          tr.querySelector(".container-info-tab-title").classList.add("truncate-text");
-          tr.querySelector(".container-tab-title").classList.remove("truncate-text");
-        });
+        const tabTitleHoverEvent = () => {
+          tabTitle.classList.toggle("truncate-text");
+          tr.querySelector(".container-tab-title").classList.toggle("truncate-text");
+        };
+
+        tr.addEventListener("mouseover", tabTitleHoverEvent);
+        tr.addEventListener("mouseout", tabTitleHoverEvent);
 
         tr.classList.add("clickable");
         Logic.addEnterHandler(tr, async function () {