async prepare()

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();
  }