FXVPN-141 Nits for the serverlist (#60)

Old: 

![old](https://github.com/user-attachments/assets/12be5ea4-211e-4a4d-9ee1-6724423c1aac)

New: 

![new](https://github.com/user-attachments/assets/3dadabed-7983-40ca-afe8-b9bdd87ef856)

src/_locales/en/messages.json

@@ -116,7 +116,7 @@
  "description": "Alt text for the button that opens the Extensions Settings page"
  },
  "searchServer": {
- "message": "Search Server",
+ "message": "Search Location",
  "description": "Placeholder for the Input field Where users can search the Serverlist"
  },
  "titleSubscribeNow": {
@@ -157,5 +157,13 @@
  "btnDownloadNow": {
  "message": "Download now",
  "description": "This is a call to action button to download the VPN."
+ },
+ "defaultLocationHeader": {
+ "message": "Use default Mozilla VPN Location",
+ "description": "Header for useDefaultLocationExplainer"
+ },
+ "useDefaultLocationExplainer": {
+ "message": "This is always the same location as selected in your Mozilla VPN desktop app.",
+ "description": "Explanation of what 'Use default Mozilla VPN Location' means."
  }
 }

src/components/serverlist.js

@@ -6,6 +6,7 @@ import {
  styleMap,
  createRef,
  ref,
+ when,
 } from "../vendor/lit-all.min.js";
 import { ghostButtonStyles, resetSizing } from "./styles.js";
 
@@ -126,6 +127,28 @@ export class ServerList extends LitElement {
  @change=${() => this.requestUpdate()}
  @input=${() => this.requestUpdate()}
  />
+ <label
+ class="default-location-item"
+ @click=${() =>
+ when(this.selectedCity != null, () => {
+ this.dispatchEvent(this.#changeCityEvent(null));
+ })}
+ >
+ <input
+ class="default-location-btn"
+ type="radio"
+ .checked=${this.selectedCity == null}
+ />
+ <span class="defaultCitySection">
+ <span class="default-location-headline"
+ >${tr("defaultLocationHeader")}</span
+ >
+ <span class="default-location-subline">
+ ${tr("useDefaultLocationExplainer")}
+ </span>
+ </span>
+ </label>
+ <hr />
  ${countrylistHolder(filteredList, countryListProvider)}
  `;
  }
@@ -159,21 +182,28 @@ export class ServerList extends LitElement {
  pointer-events: none;
  }
 
+ .default-location-headline,
+ .server-country-name {
+ font-family: var(--font-family);
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 24px;
+ }
+
  .server-country-name {
  padding-block: 0;
  padding-inline-end: 0;
  padding-inline-start: 20px;
- font-family: var(--font-family);
- font-weight: bold;
  pointer-events: none;
  color: var(--text-color-primary);
  }
 
+ .default-location-item,
  .server-city-list-item,
  .server-city-list-visibility-btn {
  display: flex;
  flex-direction: row;
- block-size: 40px;
+
  border-radius: 4px;
  margin-block-start: 4px;
  margin-block-end: 4px;
@@ -182,6 +212,20 @@ export class ServerList extends LitElement {
  inline-size: calc(100% - 16px);
  position: relative;
  }
+ .server-city-list-item,
+ .server-city-list-visibility-btn {
+ block-size: 40px;
+ }
+
+ .default-location-item {
+ padding: 0px 16px;
+ border-bottom: 1px solid var(--border-color);
+ border-radius: 0px;
+ padding-bottom: 16px;
+ }
+ .default-location-item input {
+ margin-right: 16px;
+ }
 
  /* We need to temporarily use !important for this button to make sure the right color applies */
  .server-city-list-visibility-btn {
@@ -200,6 +244,11 @@ export class ServerList extends LitElement {
  inline-size: 24px;
  height: 24px;
  }
+ @media (prefers-color-scheme: dark) {
+ .toggle {
+ filter: invert(1);
+ }
+ }
 
  .opened .toggle {
  transform: rotate(0deg);
@@ -217,6 +266,14 @@ export class ServerList extends LitElement {
  margin-left: 48px;
  }
 
+ .default-location-subline,
+ .server-city-name {
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 21px;
+ opacity: 0.875;
+ }
+
  .opened .server-city-list {
  opacity: 1;
  visibility: visible;
@@ -251,11 +308,11 @@ export class ServerList extends LitElement {
 
  input.search {
  margin-block: 16px;
- padding: 10px 20px 10px 30px;
+ padding: 10px 20px 10px 32px;
  color: var(--text-color-invert);
  width: calc(max(50%, 312px));
  background-image: url("../../assets/img/search-icon.svg");
- background-position: 2.5px 6px;
+ background-position: 5px 6px;
  background-repeat: no-repeat;
  border: 2px solid var(--border-color);
  border-radius: var(--button-border-radius);
@@ -292,7 +349,7 @@ export const cityItem = (city, selectedCity, selectCity) => {
  <input
  class="server-radio-btn"
  type="radio"
- .checked=${city.name === selectedCity.name}
+ .checked=${city.name === selectedCity?.name}
  data-country-code="${city.code}"
  data-city-name="${city.name}"
  />

src/shared/utils.js

@@ -57,7 +57,11 @@ export const Utils = {
  return false;
  }
  },
- nameFor: (countryCode = "de", cityCode = "ber", serverList = []) => {
+ nameFor: (countryCode = "", cityCode = "", serverList = []) => {
+ return Utils.getCity(countryCode, cityCode, serverList)?.name;
+ },
+
+ getCity: (countryCode = "", cityCode = "", serverList = []) => {
  if (!serverList) {
  return "";
  }
@@ -66,6 +70,6 @@ export const Utils = {
  }
  return serverList
  .find((sc) => sc.code === countryCode)
- ?.cities.find((c) => c.code === cityCode)?.name;
+ ?.cities.find((c) => c.code === cityCode);
  },
 };

src/ui/browserAction/popupPage.js

@@ -30,6 +30,7 @@ import "./../../components/titlebar.js";
 import "./../../components/iconbutton.js";
 import { SiteContext } from "../../background/proxyHandler/siteContext.js";
 import {
+ ServerCity,
  ServerCountry,
  VPNState,
 } from "../../background/vpncontroller/states.js";
@@ -59,10 +60,11 @@ export class BrowserActionPopup extends LitElement {
  super();
  this.pageURL = null;
  this._siteContext = null;
- vpnController.state.subscribe((s) => {
- /** @type {VPNState} */
- this.vpnState = s;
- });
+ /** @type {VPNState} */
+ this.vpnState = null;
+ browser.tabs.onUpdated.addListener(() => this.updatePage());
+ browser.tabs.onActivated.addListener(() => this.updatePage());
+ vpnController.state.subscribe((s) => (this.vpnState = s));
  vpnController.servers.subscribe((s) => (this.servers = s));
  proxyHandler.siteContexts.subscribe((s) => {
  this._siteContexts = s;
@@ -207,30 +209,43 @@ export class BrowserActionPopup extends LitElement {
  );
  }
 
- openServerList() {
- const onSelectServerResult = (event) => {
- this.stackView.value?.pop().then(() => {
- this.requestUpdate();
- });
- const city = event?.detail?.city;
- const country = event?.detail?.country;
- if (city) {
- const newSiteContext = new SiteContext({
- cityCode: city.code,
- countryCode: country.code,
- origin: this.pageURL,
- excluded: false,
- });
- this.currentSiteContext = newSiteContext;
- }
- };
+ async openServerList() {
+ let serverListResult = Promise.withResolvers();
+
+ const ctx = this._siteContext;
+ const serverListSelectedCity = Utils.getCity(
+ ctx?.countryCode,
+ ctx?.cityCode,
+ this.servers
+ );
+ console.log(serverListSelectedCity);
  const serverListElement = BrowserActionPopup.createServerList(
+ serverListSelectedCity,
  this.servers,
- onSelectServerResult
+ (e) => serverListResult.resolve(e.detail)
  );
- this.stackView.value?.push(serverListElement).then(() => {
+ // Push onto the Stackview and request an update as the
+ // we read the stackview's top for the titlebar
+ await this.stackView.value?.push(serverListElement);
+ this.requestUpdate();
+
+ const { city, country } = await serverListResult.promise;
+ // We're done with the server list, pop it off the stackview
+ this.stackView.value?.pop().then(() => {
  this.requestUpdate();
  });
+ if (!city) {
+ // Remove the site context
+ this.currentSiteContext = null;
+ return;
+ }
+ const newSiteContext = new SiteContext({
+ cityCode: city.code,
+ countryCode: country.code,
+ origin: this.pageURL,
+ excluded: false,
+ });
+ this.currentSiteContext = newSiteContext;
  }
 
  static sitePreferencesTemplate(
@@ -304,19 +319,23 @@ export class BrowserActionPopup extends LitElement {
  ></mz-iconlink>`;
  }
  /**
- *
+ * @param {ServerCity?} currentCity
  * @param { import("./../../components/serverlist.js").ServerCountryList } list - The ServerList to Render
  * @param {($0: Event)=>{} } onResult - A callback fired when a city or "back" is clicked.
  * - Contains an HTML Event with Optinal
  * - { detail.city : ServerCity }
  * @returns {HTMLElement} - An already rendered Element, ready to put into the DOM
  */
- static createServerList(list = [], onResult = () => {}) {
+ static createServerList(currentCity = null, list = [], onResult = () => {}) {
  const viewElement = document.createElement("section");
  viewElement.dataset.title = "Select Location";
  render(
  html`
- <server-list .serverList=${list} @selectedCityChanged=${onResult}>
+ <server-list
+ .selectedCity=${currentCity}
+ .serverList=${list}
+ @selectedCityChanged=${onResult}
+ >
  </server-list>
  `,
  viewElement

tests/jest/components/serverlist.test.mjs

@@ -235,7 +235,7 @@ describe("Serverlist Templates", () => {
  document.body.append(element);
  // Wait for lit to render to the dom
  await element.requestUpdate();
- const button = element.shadowRoot.querySelector("input[type='radio']");
+ const button = element.shadowRoot.querySelector(".server-radio-btn");
  expect(button.dataset.cityName).not.toBeNull();
  button.click();
 
@@ -259,7 +259,7 @@ describe("Serverlist Templates", () => {
  document.body.append(element);
  // Wait for lit to render to the dom
  await element.requestUpdate();
- const button = element.shadowRoot.querySelector("input[type='radio']");
+ const button = element.shadowRoot.querySelector(".server-radio-btn");
  expect(button.dataset.cityName).not.toBeNull();
  button.click();
 
@@ -271,6 +271,68 @@ describe("Serverlist Templates", () => {
  expect(isOk).toBe(true);
  });
 
+ test("Serverlist element emits a *{city:null}* if default city is selected", async () => {
+ /** @type {ServerList} */
+ const element = document.createElement("server-list");
+ const newCityEmitted = new Promise((res) => {
+ element.addEventListener("selectedCityChanged", (e) => {
+ expect(e.detail.city).toBeNull();
+ res(true);
+ });
+ });
+ element.serverList = testServerList;
+ // Set the active city to the one we will click
+ element.selectedCity = testServerList[0].cities[0];
+ document.body.append(element);
+ // Wait for lit to render to the dom
+ await element.requestUpdate();
+ const button = element.shadowRoot.querySelector(".default-location-btn");
+ button.click();
+
+ const isOk = await Promise.race([
+ newCityEmitted,
+ // Queue a microtask to make sure all events have been processed
+ new Promise((res) => queueMicrotask(() => res(true))),
+ ]);
+ expect(isOk).toBe(true);
+ });
+
+ test("Serverlist element selects 'default city' if none is selected", async () => {
+ /** @type {ServerList} */
+ const element = document.createElement("server-list");
+ element.serverList = testServerList;
+ element.selectedCity = null;
+ document.body.append(element);
+ // Wait for lit to render to the dom
+ await element.requestUpdate();
+ const button = element.shadowRoot.querySelector(".default-location-btn");
+ expect(button.checked).toBe(true);
+ });
+ test("Serverlist element ignores clicks on 'default city' if none is already selected", async () => {
+ /** @type {ServerList} */
+ const element = document.createElement("server-list");
+ element.serverList = testServerList;
+ element.selectedCity = null;
+ document.body.append(element);
+ // Wait for lit to render to the dom
+ await element.requestUpdate();
+ const button = element.shadowRoot.querySelector(".default-location-btn");
+ expect(button.checked).toBe(true);
+
+ const newCityEmitted = new Promise((_, err) => {
+ element.addEventListener("selectedCityChanged", (e) => {
+ err(e.detail.city.name);
+ });
+ });
+ button.click();
+ const isOk = await Promise.race([
+ newCityEmitted,
+ // Queue a microtask to make sure all events have been processed
+ new Promise((res) => queueMicrotask(() => res(true))),
+ ]);
+ expect(isOk).toBe(true);
+ });
+
  test("Serverlist can filter by text input", async () => {
  /** @type {ServerList} */
  const element = document.createElement("server-list");