premium: async()

in src/js/other-websites/inpage_menu.js [496:652]
100 lines of code
10 McCabe index (conditional complexity)

    premium: async () => {
      const fxRelayMenuBody = document.getElementById("fxRelayMenuBody");

      const signedInContentFree = document.querySelector(
        ".fx-content-signed-in-free"
      );

      const signedInContentPremium = document.querySelector(
        ".fx-content-signed-in-premium"
      );

      // User is signed in/premium: Remove the free section from DOM so there are no hidden/screen readable-elements available
      signedInContentPremium?.classList.remove("is-hidden");
      signedInContentFree?.remove();

      // Resize iframe
      browser.runtime.sendMessage({
        method: "updateIframeHeight",
        height: fxRelayMenuBody.scrollHeight,
      });

      // Check if user may have custom domain masks
      const { premiumSubdomainSet } = await browser.storage.local.get(
        "premiumSubdomainSet"
      );

      // API Note: If a user has not registered a subdomain yet, its default stored/queried value is "None";
      const isPremiumSubdomainSet = premiumSubdomainSet !== "None";

      // Get masks, including subdomain/custom masks if available
      masks = await getMasks({
        fetchCustomMasks: isPremiumSubdomainSet,
      });

      // Request the active tab from the background script and parse the `document.location.hostname`
      const currentPageHostName = await browser.runtime.sendMessage({
        method: "getCurrentPageHostname",
      });

      // See if any masks are assosiated with the current site.
      // If so, we'll end up building two discrete mask lists:
      // 1. Just masks for that specific website
      // 2. All masks (including ones from the previous list)
      const userHasMasksForCurrentWebsite =
        checkIfAnyMasksWereGeneratedOnCurrentWebsite(
          masks,
          currentPageHostName
        ) || haveMasksBeenUsedOnCurrentSite(masks, currentPageHostName);

      // If there are no masks assosiated with the current site, remove that list entirely.
      if (!userHasMasksForCurrentWebsite) {
        document
          .querySelector(".fx-relay-menu-masks-list-this-website")
          .remove();
      }

      const maskLists = document.querySelectorAll(".fx-relay-menu-masks-list");

      // Now we can set the toggle buttons between the two lists.
      if (userHasMasksForCurrentWebsite) {
        fxRelayMenuBody.classList.add(".fx-relay-mask-list-toggle-height");

        const filterMenu = document.querySelector(
          ".fx-relay-menu-filter-active-site"
        );
        filterMenu.classList.add("is-visible");

        const filterMenuButtons = filterMenu.querySelectorAll("button");

        filterMenuButtons.forEach((button) => {
          const stringId = button.dataset.stringId;
          button.textContent = browser.i18n.getMessage(stringId);

          // TODO: Move this function elsewhere

          button.addEventListener("click", async (event) => {
            await buildContent.components.setMaskListButton(
              event.target,
              maskLists,
              filterMenuButtons
            );
          });
        });
      }

      maskLists?.forEach(async (maskList) => {
        // Check if the list we're currently building is "From this website". This logic will be used throughout the function
        const buildFilteredMaskList = maskList.classList.contains(
          "fx-relay-menu-masks-list-this-website"
        );

        const filteredMasks = buildFilteredMaskList
          ? masks.filter(
              (mask) =>
                mask.generated_for === currentPageHostName ||
                hasMaskBeenUsedOnCurrentSite(mask, currentPageHostName)
            )
          : masks;

        // Process the masks list based on how many masks there are:
        // If there is none, we'll only show the "Generate new mask" button
        // If there's less than five, we'll show all of them
        // If there's MORE than five, we'll show all of them and show the search/filter bar
        if (filteredMasks.length === 0) {
          if (buildFilteredMaskList) {
            // We only want to remove the the search field if there's NO masks.
            return;
          }

          buildContent.components.search.remove();
        } else {
          // Built out each list
          await populatePremiumMaskList(maskList, filteredMasks);
        }
      });

      // Set the first available list to visible.
      // If there's "From this website" masks, it will show that list first.
      document
        .querySelector(".fx-relay-menu-masks-list")
        ?.classList.add("is-visible");

      // Set Generate Mask button
      await buildContent.components.generateMaskButton();

      fxRelayMenuBody.classList.remove("is-loading");

      // Check if search has been removed. If not, init it!
      const search = document.querySelector(".fx-relay-menu-masks-search");
      if (search) {
        await buildContent.components.search.init();
        const filterSearchForm = document.querySelector(
          ".fx-relay-menu-masks-search-form"
        );

        // If the visible list has enough masks to show the search bar, focus on it
        // Note that the buildContent.components.search function also runs the updateIframeHeight event.
        if (filterSearchForm.classList.contains("is-visible")) {
          await buildContent.components.search.initResultsCountAndFocusOnInput();
          return;
        }
      }

      const generateAliasBtn = document.querySelector(
        ".fx-relay-menu-generate-alias-btn"
      );

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

      // Focus on "Generate New Alias" button
      generateAliasBtn.focus();

      return;
    },