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

Let's use a DocumentFragment instead innerHTML

Browse source
This commit is contained in:
baku 2017-01-09 18:34:57 +00:00
parent e7e4537418
commit 0c9ae0e6bd
1 changed files with 49 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

99
webextension/js/popup.js
View file

@ -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 = `
<tr data-identity-cookie-store-id="${identity.userContextId}" >
let tr = document.createElement('tr');
fragment.appendChild(tr);
tr.setAttribute('data-identity-cookie-store-id', identity.userContextId);
tr.innerHTML = `
<td>
<div class="userContext-icon"
data-identity-icon="${identity.image}"
@ -87,58 +95,49 @@ browser.runtime.sendMessage({method: 'queryIdentities'}).then(identities=> {
src="${hideOrShowIconSrc}"
/>
</td>
<td>&gt;</td>
</tr>`;
identitiesListElement.innerHTML += identityRow;
<td>&gt;</td>`;
// 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();
});
});