diff --git a/webextension/js/popup.js b/webextension/js/popup.js index 85d4858..767efb5 100644 --- a/webextension/js/popup.js +++ b/webextension/js/popup.js @@ -3,31 +3,37 @@ const CONTAINER_HIDE_SRC = '/img/container-hide.svg'; const CONTAINER_UNHIDE_SRC = '/img/container-unhide.svg'; function showOrHideContainerTabs(userContextId, hasHiddenTabs) { - return new Promise((resolve, reject) => { - const hideorshowIcon = document.querySelector(`#uci-${userContextId}-hideorshow-icon`); - - browser.runtime.sendMessage({ - method: hasHiddenTabs ? 'showTabs' : 'hideTabs', + // Let's show/hide the tabs + return browser.runtime.sendMessage({ + method: hasHiddenTabs ? 'showTabs' : 'hideTabs', + userContextId: userContextId + }) + // We need to retrieve the new identity configuration in order to choose the + // correct icon. + .then(() => { + return browser.runtime.sendMessage({ + method: 'getIdentity', userContextId: userContextId - }).then(() => { - return browser.runtime.sendMessage({ - method: 'getIdentity', - userContextId: userContextId - }); - }).then((identity) => { - if (!identity.hasHiddenTabs && !identity.hasOpenTabs) { - hideorshowIcon.style.display = "none"; - } else { - hideorshowIcon.style.display = ""; - } + }); + }) + // Let's update the icon. + .then((identity) => { + let hideorshowIcon = document.querySelector(`#uci-${identity.userContextId}-hideorshow-icon`); + if (!identity.hasHiddenTabs && !identity.hasOpenTabs) { + hideorshowIcon.style.display = "none"; + } else { + hideorshowIcon.style.display = ""; + } - hideorshowIcon.src = hasHiddenTabs ? CONTAINER_HIDE_SRC : CONTAINER_UNHIDE_SRC; - }).then(resolve); + hideorshowIcon.src = hasHiddenTabs ? CONTAINER_HIDE_SRC : CONTAINER_UNHIDE_SRC; + + // The new identity is returned. + return identity; }); } if (localStorage.getItem('onboarded2')) { - for (const element of document.querySelectorAll('.onboarding')) { + for (let element of document.querySelectorAll('.onboarding')) { element.classList.add('hide'); } document.querySelector('#container-panel').classList.remove('hide'); @@ -39,32 +45,34 @@ if (localStorage.getItem('onboarded2')) { document.querySelector('#container-panel').classList.add('hide'); } -document.querySelector('#onboarding-next-button').addEventListener('click', ()=> { +document.querySelector('#onboarding-next-button').addEventListener('click', () => { localStorage.setItem('onboarded1', true); document.querySelector('.onboarding-panel-2').classList.remove('hide'); document.querySelector('.onboarding-panel-1').classList.add('hide'); document.querySelector('#container-panel').classList.add('hide'); }); -document.querySelector('#onboarding-done-button').addEventListener('click', ()=> { +document.querySelector('#onboarding-done-button').addEventListener('click', () => { localStorage.setItem('onboarded2', true); document.querySelector('.onboarding-panel-1').classList.add('hide'); document.querySelector('.onboarding-panel-2').classList.add('hide'); document.querySelector('#container-panel').classList.remove('hide'); }); -browser.runtime.sendMessage({method: 'queryIdentities'}).then(identities=> { - const identitiesListElement = document.querySelector('.identities-list'); +browser.runtime.sendMessage({method: 'queryIdentities'}).then(identities => { + let fragment = document.createDocumentFragment(); - identities.forEach(identity=> { + identities.forEach(identity => { let hideOrShowIconSrc = CONTAINER_HIDE_SRC; if (identity.hasHiddenTabs) { hideOrShowIconSrc = CONTAINER_UNHIDE_SRC; } - const identityRow = ` - + let tr = document.createElement('tr'); + fragment.appendChild(tr); + tr.setAttribute('data-identity-cookie-store-id', identity.userContextId); + tr.innerHTML = `
{ src="${hideOrShowIconSrc}" /> - > - `; - - identitiesListElement.innerHTML += identityRow; + >`; // No tabs, no icon. if (!identity.hasHiddenTabs && !identity.hasOpenTabs) { - const hideorshowIcon = document.querySelector(`#uci-${identity.userContextId}-hideorshow-icon`); + let hideorshowIcon = fragment.querySelector(`#uci-${identity.userContextId}-hideorshow-icon`); hideorshowIcon.style.display = "none"; } - }); - - const rows = identitiesListElement.querySelectorAll('tr'); - - rows.forEach(row=> { - row.addEventListener('click', e=> { - const userContextId = e.target.parentElement.parentElement.dataset.identityCookieStoreId; + tr.addEventListener('click', e => { if (e.target.matches('.hideorshow-icon')) { - browser.runtime.sendMessage({ - method: 'getIdentity', - userContextId - }).then(identity=> { - showOrHideContainerTabs(userContextId, identity.hasHiddenTabs); + showOrHideContainerTabs(identity.userContextId, + identity.hasHiddenTabs).then(i => { + identity = i }); } else if (e.target.matches('.newtab-icon')) { - showOrHideContainerTabs(userContextId, true).then(() => { + showOrHideContainerTabs(identity.userContextId, true).then(() => { browser.runtime.sendMessage({ method: 'openTab', - userContextId: userContextId}) - .then(() => { + userContextId: identity.userContextId, + }).then(() => { window.close(); }); }); } }); }); + + document.querySelector('.identities-list').appendChild(fragment); }); -document.querySelector('#edit-containers-link').addEventListener('click', ()=> { +document.querySelector('#edit-containers-link').addEventListener('click', () => { browser.runtime.sendMessage({ method: 'openTab', url: "about:preferences#containers" - }).then(()=> { + }).then(() => { window.close(); }); }); -document.querySelector('#sort-containers-link').addEventListener('click', ()=> { +document.querySelector('#sort-containers-link').addEventListener('click', () => { browser.runtime.sendMessage({ method: 'sortTabs' - }).then(()=> { + }).then(() => { window.close(); }); });