async prepare()

in src/js/popup.js [802:892]


  async prepare() {
    const fragment = document.createDocumentFragment();
    const identities = Logic.identities();

    for (const identity of identities) {
      const tr = document.createElement("tr");
      tr.classList.add("menu-item", "hover-highlight", "keyboard-nav", "keyboard-right-arrow-override");
      tr.setAttribute("tabindex", "0");
      tr.setAttribute("data-cookie-store-id", identity.cookieStoreId);
      const td = document.createElement("td");
      const openTabs = identity.numberOfOpenTabs || "" ;

      // TODO get UX and content decision on how to message and block clicks to containers with Mozilla VPN proxy configs
      // when Mozilla VPN app is disconnected.

      td.innerHTML = Utils.escaped`
        <div data-moz-proxy-warning="" class="menu-item-name">
          <div class="menu-icon">

            <div class="usercontext-icon"
              data-identity-icon="${identity.icon}"
              data-identity-color="${identity.color}">
            </div>
          </div>
          <span class="menu-text">${identity.name}</span>
        </div>
        <span class="menu-right-float">
          <img alt="" class="always-open-in-flag flag-img" src="/img/flags/.png"/>
          <span class="container-count">${openTabs}</span>
          <span class="menu-arrow">
            <img alt="Container Info" src="/img/arrow-icon-right.svg" />
          </span>

        </span>`;



      fragment.appendChild(tr);

      tr.appendChild(td);

      const openInThisContainer = tr.querySelector(".menu-item-name");
      Utils.addEnterHandler(openInThisContainer, (e) => {
        e.preventDefault();
        if (openInThisContainer.dataset.mozProxyWarning === "proxy-unavailable") {
          return;
        }
        try {
          browser.tabs.create({
            cookieStoreId: identity.cookieStoreId
          });
          window.close();
        } catch (e) {
          window.close();
        }
      });

      Utils.addEnterOnlyHandler(tr, () => {
        try {
          browser.tabs.create({
            cookieStoreId: identity.cookieStoreId
          });
          window.close();
        } catch (e) {
          window.close();
        }
      });

      // Select only the ">" from the container list
      const showPanelButton = tr.querySelector(".menu-right-float");

      Utils.addEnterHandler(showPanelButton, () => {
        Logic.showPanel(P_CONTAINER_INFO, identity);
      });
    }

    const list = document.querySelector("#identities-list");

    list.innerHTML = "";
    list.appendChild(fragment);

    document.addEventListener("keydown", Logic.keyboardNavListener);
    document.addEventListener("keydown", Logic.shortcutListener);
    document.addEventListener("input", Logic.filterContainerList);

    MozillaVPN.handleContainerList(identities);

    // reset path
    this._previousPanelPath = [];
    return Promise.resolve();
  },