async makeServerList()

in src/js/popup.js [2135:2195]
45 lines of code
2 McCabe index (conditional complexity)

  async makeServerList(mozillaVpnServers = []) {
    const listWrapper = document.getElementById("moz-vpn-server-list");

    mozillaVpnServers.forEach((serverCountry) => {
      const listItemTemplate = document.getElementById("server-list-item");
      const templateClone = listItemTemplate.content.cloneNode(true);
      const serverListItem = templateClone.querySelector(".server-list-item");
      serverListItem.dataset.countryCode = serverCountry.code;

      // Country name
      const serverCountryName = templateClone.querySelector(".server-country-name");
      serverCountryName.textContent = serverCountry.name;

      // Flag
      const serverCountryFlagImage = templateClone.querySelector(".server-country-flag");
      serverCountryFlagImage.src = `../img/flags/${serverCountry.code.toUpperCase()}.png`;

      const cityListVisibilityButton = templateClone.querySelector("button");

      cityListVisibilityButton.addEventListener("click", (e) => {
        const listItem = e.target.parentElement;
        this.toggleCityListVisibility(listItem);
      });

      // Make server city list
      const cityList = templateClone.querySelector("ul");
      const cityListTemplate = document.getElementById("server-city-list-items");

      serverCountry.cities.forEach(city => {
        const cityTemplateClone = cityListTemplate.content.cloneNode(true);

        const cityName = cityTemplateClone.querySelector(".server-city-name");

        // Server city radio inputs
        const radioBtn = cityTemplateClone.querySelector("input");
        radioBtn.dataset.countryCode = serverCountry.code;
        radioBtn.dataset.cityName = city.name;
        radioBtn.name = "server-city";

        const cityListItem = cityTemplateClone.querySelector(".server-city-list-item");
        Utils.addEnterHandler((cityListItem), async(e) => {
          if (e.key === "Enter") {
            radioBtn.checked = true;
          }
          const identity = Logic.currentIdentity();
          const proxy = MozillaVPN.getProxy(
            radioBtn.dataset.countryCode,
            radioBtn.dataset.cityName,
            true,
            mozillaVpnServers
          );
          await proxifiedContainers.set(identity.cookieStoreId, proxy);
        });

        // Set city name
        cityName.textContent = city.name;
        cityList.appendChild(cityTemplateClone);
      });
      listWrapper.appendChild(templateClone);
    });
  },