async function populateFreeMaskList()

in src/js/other-websites/inpage_menu.js [181:230]

• 34 lines of code
• 3 McCabe index (conditional complexity)

async function populateFreeMaskList(maskList, masks) {
  const list = maskList.querySelector("ul");

  if (masks.length === 0) {
    return;
  }

  const fragment = document.createDocumentFragment();

  masks.forEach((mask) => {
    const listItem = document.createElement("li");
    const listButton = document.createElement("button");

    listButton.tabIndex = 0;

    listButton.dataset.domain = mask.domain;
    listButton.dataset.maskId = mask.id;
    listButton.dataset.mask = mask.full_address;
    listButton.dataset.label = mask.description;

    // The button text for a mask will be either the description label or the full address.
    listButton.textContent = mask.description || mask.full_address;

    listButton.addEventListener("click", fillTargetWithRelayAddress, false);

    listItem.appendChild(listButton);
    fragment.appendChild(listItem);
  });

  list.appendChild(fragment);

  // Remove loading state
  const loadingItem = maskList.querySelector(
    ".fx-relay-menu-masks-list-loading"
  );
  loadingItem.remove();
  list.classList.remove("is-loading");

  maskList.classList.add("is-visible");

  // The free UI has both lists wrapped up in a hidden-by-default element, so this makes it visible too.
  document
    .querySelector(".fx-relay-menu-masks-lists")
    ?.classList.add("is-visible");

  browser.runtime.sendMessage({
    method: "updateIframeHeight",
    height: document.getElementById("fxRelayMenuBody").scrollHeight,
  });
}