rowan/multi-account-containers
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixes-168, added ability to close a tab individually

Browse source
This commit is contained in:
shivangikakkar 2018-09-25 00:21:46 +05:30
parent 99db192792
commit bfdbd8199f
3 changed files with 53 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/css/popup.css
View file

@ -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;

10
src/img/container-close-tab.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 527 B

25
src/js/popup.js
View file

@ -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");
@ -789,8 +810,6 @@ Logic.registerPanel(P_CONTAINER_INFO, {
});
}
}
document.getElementById("container-info-table").appendChild(fragment);
},
});