dynamically added close image icon in the title column

Author: ShivangiKakkar

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,

src/img/container-close-tab.svg

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