in src/js/popup.js [1141:1257]
async prepare() {
Logic.listenToPickerBackButton();
const closeContEl = document.querySelector("#close-container-picker-panel");
if (!this._listenerSet) {
Utils.addEnterHandler(closeContEl, () => {
Logic.showPanel(P_CONTAINERS_LIST);
});
this._listenerSet = true;
}
document.getElementById("picker-title").textContent = browser.i18n.getMessage("manageContainers");
const fragment = document.createDocumentFragment();
const pickedFunction = function (identity) {
Logic.showPanel(P_CONTAINER_EDIT, identity);
};
document.getElementById("new-container-div").innerHTML = Utils.escaped`
<table class="menu">
<tr class="menu-item hover-highlight keyboard-nav" id="new-container" tabindex="0">
<td>
<div class="menu-icon"><img src="/img/new-16.svg" />
</div>
<span class="menu-text">${ browser.i18n.getMessage("newContainer") }</span>
</td>
</tr>
</table>
<hr>
`;
Utils.addEnterHandler(document.querySelector("#new-container"), () => {
Logic.showPanel(P_CONTAINER_EDIT, { name: Logic.generateIdentityName() });
});
const identities = Logic.identities();
for (const identity of identities) {
const tr = document.createElement("tr");
tr.classList.add("menu-item", "hover-highlight", "keyboard-nav");
tr.setAttribute("tabindex", "0");
tr.setAttribute("data-cookie-store-id", identity.cookieStoreId);
const td = document.createElement("td");
td.innerHTML = Utils.escaped`
<div class="menu-icon hover-highlight">
<div class="usercontext-icon"
data-identity-icon="${identity.icon}"
data-identity-color="${identity.color}">
</div>
</div>
<span class="menu-text">${identity.name}</span>
<img alt="" class="flag-img manage-containers-list-flag" src="/img/flags/.png"/>
<span class="move-button">
<img
class="pop-button-image"
src="/img/container-move.svg"
/>
</span>`;
fragment.appendChild(tr);
tr.appendChild(td);
tr.draggable = true;
tr.dataset.containerId = identity.cookieStoreId;
tr.addEventListener("dragstart", (e) => {
e.dataTransfer.setData(CONTAINER_DRAG_DATA_TYPE, identity.cookieStoreId);
});
tr.addEventListener("dragover", (e) => {
if (e.dataTransfer.types.includes(CONTAINER_DRAG_DATA_TYPE)) {
tr.classList.add("drag-over");
e.preventDefault();
}
});
tr.addEventListener("dragenter", (e) => {
if (e.dataTransfer.types.includes(CONTAINER_DRAG_DATA_TYPE)) {
e.preventDefault();
tr.classList.add("drag-over");
}
});
tr.addEventListener("dragleave", (e) => {
if (e.dataTransfer.types.includes(CONTAINER_DRAG_DATA_TYPE)) {
e.preventDefault();
tr.classList.remove("drag-over");
}
});
tr.addEventListener("drop", async (e) => {
e.preventDefault();
const parent = tr.parentNode;
const containerId = e.dataTransfer.getData(CONTAINER_DRAG_DATA_TYPE);
let droppedElement;
parent.childNodes.forEach((node) => {
if (node.dataset.containerId === containerId) {
droppedElement = node;
}
});
if (droppedElement && droppedElement !== tr) {
tr.classList.remove("drag-over");
parent.insertBefore(droppedElement, tr);
await Logic.saveContainerOrder(parent.childNodes);
await Logic.refreshIdentities();
}
});
Utils.addEnterHandler(tr, () => {
pickedFunction(identity);
});
}
const list = document.querySelector("#picker-identities-list");
list.innerHTML = "";
list.appendChild(fragment);
MozillaVPN.handleContainerList(identities);
return Promise.resolve();
}