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

fix #12: [un]hide icons in the pop-up UI

Browse source
This commit is contained in:
groovecoder 2016-12-28 12:45:32 -06:00
parent 4a04aa5f2e
commit 6c3c6d0e9e
2 changed files with 23 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
webextension/css/popup.css
View file

@ -39,6 +39,12 @@ table.unstriped tbody tr {
height: 32px; height: 32px;
} }
.hideorshow-icon {
max-width: 16px;
height: 16px;
margin: 4px;
}
.edit-identities { .edit-identities {
background: #DCDBDC; background: #DCDBDC;
} }

30
webextension/js/popup.js
View file

@ -3,17 +3,23 @@ const identityState = {
}; };
function hideContainer(containerId) { function hideContainer(containerId) {
const hideorshowIcon = document.querySelector(`#${containerId}-hideorshow-icon`);
hideorshowIcon.src = '/img/container-unhide.svg';
browser.contextualIdentities.hide(containerId); browser.contextualIdentities.hide(containerId);
} }
function showContainer(containerId) { function showContainer(containerId) {
const hideorshowIcon = document.querySelector(`#${containerId}-hideorshow-icon`);
hideorshowIcon.src = '/img/container-hide.svg';
browser.contextualIdentities.show(containerId); browser.contextualIdentities.show(containerId);
} }
browser.contextualIdentities.query({}).then(identites=> { browser.contextualIdentities.query({}).then(identites=> {
const identitiesListElement = document.querySelector('.identities-list'); const identitiesListElement = document.querySelector('.identities-list');
identites.forEach(identity => { identites.forEach(identity=> {
const identityRow = ` const identityRow = `
<tr data-identity-cookie-store-id="${identity.cookieStoreId}" > <tr data-identity-cookie-store-id="${identity.cookieStoreId}" >
<td><div class="userContext-icon" <td><div class="userContext-icon"
@ -21,7 +27,14 @@ browser.contextualIdentities.query({}).then(identites=> {
data-identity-color="${identity.color}" data-identity-color="${identity.color}"
></div></td> ></div></td>
<td>${identity.name}</td> <td>${identity.name}</td>
<td class="hideorshow" >H/S</td> <td class="hideorshow" >
<img
data-identity-cookie-store-id="${identity.cookieStoreId}"
id="${identity.cookieStoreId}-hideorshow-icon"
class="hideorshow-icon"
src="/img/container-hide.svg"
/>
</td>
<td>&gt;</td> <td>&gt;</td>
</tr>`; </tr>`;
@ -33,8 +46,8 @@ browser.contextualIdentities.query({}).then(identites=> {
rows.forEach(row=> { rows.forEach(row=> {
row.addEventListener('click', e=> { row.addEventListener('click', e=> {
if (e.target.matches('.hideorshow')) { if (e.target.matches('.hideorshow-icon')) {
const containerId = e.target.parentElement.dataset.identityCookieStoreId; const containerId = e.target.dataset.identityCookieStoreId;
if (!(containerId in identityState)) { if (!(containerId in identityState)) {
identityState[containerId] = true; identityState[containerId] = true;
@ -57,12 +70,3 @@ document.querySelector('#edit-containers-link').addEventListener('click', ()=> {
window.close(); window.close();
}); });
}); });
function hideContainer(containerId) {
browser.contextualIdentities.hide(containerId);
}
function showContainer(containerId) {
browser.contextualIdentities.show(containerId);
}