diff --git a/src/css/popup.css b/src/css/popup.css index 6f9e64a..f2423a3 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; --inactive-opacity: 0.3; } @@ -267,7 +268,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 { @@ -659,7 +660,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: calc(var(--column-panel-inline-size) - 58px); } #container-info-hideorshow { @@ -676,6 +681,21 @@ span ~ .panel-header-text { opacity: 0.3; } +.container-close-tab { + 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, .container-info-tab-row { align-items: center; @@ -702,10 +722,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/img/container-close-tab.svg b/src/img/container-close-tab.svg new file mode 100644 index 0000000..a36fa01 --- /dev/null +++ b/src/img/container-close-tab.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/js/popup.js b/src/js/popup.js index 9005ff3..7593bea 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -805,20 +805,44 @@ Logic.registerPanel(P_CONTAINER_INFO, { tr.classList.add("container-info-tab-row"); tr.innerHTML = escaped` - ${tab.title}`; +
${tab.title}
`; tr.querySelector("td").appendChild(Utils.createFavIconElement(tab.favIconUrl)); - + document.getElementById("container-info-table").appendChild(fragment); + // 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; + 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 + 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 () { await browser.tabs.update(tab.id, {active: true}); window.close(); }); - } - } - document.getElementById("container-info-table").appendChild(fragment); + const closeTab = document.getElementById(tab.id); + if (closeTab) { + Logic.addEnterHandler(closeTab, async function(e) { + await browser.tabs.remove(Number(e.target.id)); + window.close(); + }); + } + } + } }, });