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 = ` -