141 lines
4.8 KiB
JavaScript
141 lines
4.8 KiB
JavaScript
/* global browser, window, document, localStorage */
|
|
const CONTAINER_HIDE_SRC = "/img/container-hide.svg";
|
|
const CONTAINER_UNHIDE_SRC = "/img/container-unhide.svg";
|
|
|
|
function showOrHideContainerTabs(userContextId, hasHiddenTabs) {
|
|
// 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
|
|
});
|
|
})
|
|
// 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;
|
|
|
|
// The new identity is returned.
|
|
return identity;
|
|
});
|
|
}
|
|
|
|
if (localStorage.getItem("onboarded2")) {
|
|
for (let element of document.querySelectorAll(".onboarding")) {
|
|
element.classList.add("hide");
|
|
}
|
|
document.querySelector("#container-panel").classList.remove("hide");
|
|
} else if (localStorage.getItem("onboarded1")) {
|
|
document.querySelector(".onboarding-panel-1").classList.add("hide");
|
|
document.querySelector("#container-panel").classList.add("hide");
|
|
} else {
|
|
document.querySelector(".onboarding-panel-2").classList.add("hide");
|
|
document.querySelector("#container-panel").classList.add("hide");
|
|
}
|
|
|
|
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", () => {
|
|
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 => {
|
|
let fragment = document.createDocumentFragment();
|
|
|
|
identities.forEach(identity => {
|
|
let hideOrShowIconSrc = CONTAINER_HIDE_SRC;
|
|
|
|
if (identity.hasHiddenTabs) {
|
|
hideOrShowIconSrc = CONTAINER_UNHIDE_SRC;
|
|
}
|
|
|
|
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}"
|
|
data-identity-color="${identity.color}">
|
|
</div>
|
|
</td>
|
|
<td>${identity.name}</td>
|
|
<td class="newtab">
|
|
<img
|
|
title="Open a new ${identity.name} container tab"
|
|
src="/img/container-add.svg"
|
|
class="icon newtab-icon" />
|
|
</td>
|
|
<td class="hideorshow" >
|
|
<img
|
|
title="Hide or show ${identity.name} container tabs"
|
|
data-identity-cookie-store-id="${identity.userContextId}"
|
|
id="uci-${identity.userContextId}-hideorshow-icon"
|
|
class="icon hideorshow-icon"
|
|
src="${hideOrShowIconSrc}"
|
|
/>
|
|
</td>
|
|
<td>></td>`;
|
|
|
|
// No tabs, no icon.
|
|
if (!identity.hasHiddenTabs && !identity.hasOpenTabs) {
|
|
let hideorshowIcon = fragment.querySelector(`#uci-${identity.userContextId}-hideorshow-icon`);
|
|
hideorshowIcon.style.display = "none";
|
|
}
|
|
|
|
tr.addEventListener("click", e => {
|
|
if (e.target.matches(".hideorshow-icon")) {
|
|
showOrHideContainerTabs(identity.userContextId,
|
|
identity.hasHiddenTabs).then(i => { identity = i; });
|
|
} else if (e.target.matches(".newtab-icon")) {
|
|
showOrHideContainerTabs(identity.userContextId, true).then(() => {
|
|
browser.runtime.sendMessage({
|
|
method: "openTab",
|
|
userContextId: identity.userContextId,
|
|
}).then(() => {
|
|
window.close();
|
|
});
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
document.querySelector(".identities-list").appendChild(fragment);
|
|
});
|
|
|
|
document.querySelector("#edit-containers-link").addEventListener("click", () => {
|
|
browser.runtime.sendMessage({
|
|
method: "openTab",
|
|
url: "about:preferences#containers"
|
|
}).then(() => {
|
|
window.close();
|
|
});
|
|
});
|
|
|
|
document.querySelector("#sort-containers-link").addEventListener("click", () => {
|
|
browser.runtime.sendMessage({
|
|
method: "sortTabs"
|
|
}).then(() => {
|
|
window.close();
|
|
});
|
|
});
|