ction-status-box component in Bug 2008854
  handleOnOffButtonClick() {
    let isEnabled = !this._toggleEnabled;

    if (isEnabled) {
      this.dispatchEvent(
        new CustomEvent(this.TOGGLE_ON_EVENT, {
          bubbles: true,
          composed: true,
        })
      );
    } else {
      this.dispatchEvent(
        new CustomEvent(this.TOGGLE_OFF_EVENT, {
          bubbles: true,
          composed: true,
        })
      );
    }

    this._toggleEnabled = isEnabled;
  }

  focus() {
    this.connectionToggleEl?.focus();
  }

  #keyListener(event) {
    let keyCode = event.code;
    switch (keyCode) {
      case "ArrowUp":
      // Intentional fall-through
      case "ArrowDown": {
        event.stopPropagation();
        event.preventDefault();

        let direction =
          keyCode == "ArrowDown"
            ? Services.focus.MOVEFOCUS_FORWARD
            : Services.focus.MOVEFOCUS_BACKWARD;
        Services.focus.moveFocus(
          window,
          null,
          direction,
          Services.focus.FLAG_BYKEY
        );
        break;
      }
    }
  }

  updated(changedProperties) {
    super.updated(changedProperties);

    // If the toggle state isn't set, do so now and let it
    // match the protection state.
    if (!changedProperties.has("_toggleEnabled")) {
      this._toggleEnabled = this.protectionEnabled;
    }

    if (!this.protectionEnabled && this._toggleEnabled) {
      // After pressing the toggle, if somehow protection was turned off
      // (eg. error thrown), unset the toggle.
      this._toggleEnabled = false;
    }
  }

  cardContentTemplate() {
    const statusCardL10nId = this.protectionEnabled
      ? "ipprotection-connection-status-on"
      : "ipprotection-connection-status-off";
    const toggleL10nId = this.protectionEnabled
      ? "ipprotection-toggle-active"
      : "ipprotection-toggle-inactive";
    const toggleButtonType = this.protectionEnabled ? "secondary" : "primary";
    const toggleButtonL10nId = this.protectionEnabled
      ? "ipprotection-button-turn-vpn-off"
      : "ipprotection-button-turn-vpn-on";

    const siteSettingsTemplate = this.protectionEnabled
      ? this.siteSettingsTemplate()
      : null;

    return html` <link
        rel="stylesheet"
        href="chrome://browser/content/ipprotection/ipprotection-status-card.css"
      />
      <moz-box-group class="vpn-status-group">
        <moz-box-item
          id="status-card"
          class=${classMap({
            "is-enabled": this.protectionEnabled,
          })}
          layout="default"
          data-l10n-id=${statusCardL10nId}
          .description=${this.cardDescriptionTemplate()}
        >
          <moz-toggle
            id="connection-toggle"
            data-l10n-id=${toggleL10nId}
            @click=${this.handleToggleConnect}
            ?pressed=${this._toggleEnabled}
            slot="actions"
          ></moz-toggle>
        </moz-box-item>
        ${siteSettingsTemplate}
      </moz-box-group>
      <moz-button
        type=${toggleButtonType}
        id="connection-toggle-button"
        data-l10n-id=${toggleButtonL10nId}
        @click=${this.handleOnOffButtonClick}
        hidden
      >
      </moz-button>`;
  }

  siteSettingsTemplate() {
    // TODO: Once we're able to detect the current site and its exception status, show
    // ipprotection-site-settings-control (Bug 1997412).
    if (!this.siteData?.siteName) {
      return null;
    }

    return html` <moz-box-item
      id="site-settings"
      class=${classMap({
        "is-enabled": this.protectionEnabled,
      })}
    >
      <ipprotection-site-settings-control
        .site=${this.siteData.siteName}
        .exceptionEnabled=${this.siteData.isException}
        class="slotted"
      ></ipprotection-site-settings-control>
    </moz-box-item>`;
  }

  cardDescriptionTemplate() {
    // To work around mox-box-item description elements being hard to reach because of the shadowDOM,
    // let's use a lit stylemap to apply style changes directly.
    let labelStyles = styleMap({
      display: "flex",
      gap: "var(--space-small)",
    });
    let imgStyles = styleMap({
      "-moz-context-properties": "fill",
      fill: "currentColor",
    });

    return this.location
      ? html`
          <div id="vpn-details">
            <div id="location-label" style=${labelStyles}>
              <span>${this.location.name}</span>
              <img
                src="chrome://global/skin/icons/info.svg"
                data-l10n-id="ipprotection-location-title"
                style=${imgStyles}
              />
            </div>
          </div>
        `
      : null;
  }

  render() {
    let content = this.cardContentTemplate();
    return html`${content}`;
  }
}

customElements.define("ipprotection-status-card", IPProtectionStatusCard);
PK