async function populatePremiumMaskList()

in src/js/other-websites/inpage_menu.js [232:283]
40 lines of code
2 McCabe index (conditional complexity)

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

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

  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 show both the description label (if set) and the full address.
    const listButtonLabel = document.createElement("span");
    listButtonLabel.classList.add("fx-relay-menu-masks-search-result-label");
    const listButtonAddress = document.createElement("span");
    listButtonAddress.classList.add(
      "fx-relay-menu-masks-search-result-address"
    );
    listButtonLabel.textContent = mask.description;
    listButtonAddress.textContent = mask.full_address;
    listButton.appendChild(listButtonLabel);
    listButton.appendChild(listButtonAddress);

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

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

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

  // 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,
  });
}