setRemainingMaskCount: async()

in src/js/popup/popup.js [663:699]


          setRemainingMaskCount: async () => {
            const { masks, maxNumAliases } = await popup.panel.masks.utilities.getRemainingAliases();
            const numRemaining = maxNumAliases - masks.length;
            const masksAvailable = document.querySelector(".fx-relay-masks-available-count");
            const masksLimitReached = document.querySelector(".fx-relay-masks-limit-upgrade-string");
            const limitReachedToast = document.querySelector(".fx-relay-masks-limit-upgrade");

            masksAvailable.textContent = browser.i18n.getMessage("popupFreeMasksAvailable", [numRemaining, maxNumAliases]);
            masksLimitReached.textContent = browser.i18n.getMessage("popupFreeMasksLimitReached", [maxNumAliases]);

            const generateRandomMask = document.querySelector(".js-generate-random-mask");
            
            if (masks.length === 0) {
              generateRandomMask.classList.remove("is-hidden");
              return;
            }
            
            if (numRemaining <= 0) {
              // No masks remaining
              limitReachedToast.classList.remove("is-hidden");
              masksAvailable.classList.add("is-hidden");
              
              // Hide Generate Button
              generateRandomMask.classList.add("is-hidden");

              // Show Upgrade Button
              const getUnlimitedMasksBtn = document.querySelector(".fx-relay-mask-upgrade-button");
              getUnlimitedMasksBtn.classList.remove("is-hidden");
              getUnlimitedMasksBtn.focus();

            } else {
              // Show Masks Count/Generate Button
              masksAvailable.classList.remove("is-hidden");
              generateRandomMask.classList.remove("is-hidden");
              generateRandomMask.focus();
            }
          }