fixes-168, added ability to close a tab individually

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