Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
import { html } from "chrome://global/content/vendor/lit.all.mjs";
import {
BANDWIDTH,
LINKS,
} from "chrome://browser/content/ipprotection/ipprotection-constants.mjs";
/**
* A custom element that handles the signed out status of IP Protection.
*/
export default class IPProtectionUnauthenticatedContentElement extends MozLitElement {
static shadowRootOptions = {
...MozLitElement.shadowRootOptions,
delegatesFocus: true,
};
constructor() {
super();
}
handleOptIn() {
this.dispatchEvent(
new CustomEvent("IPProtection:OptIn", { bubbles: true, composed: true })
);
}
handleLearnMoreClick(event) {
event.preventDefault();
if (event.target.classList.contains("learn-more-vpn")) {
const win = event.target.ownerGlobal;
win.openWebLinkIn(event.target.href, "tab");
this.dispatchEvent(
new CustomEvent("IPProtection:Close", { bubbles: true, composed: true })
);
}
}
render() {
return html`
<link
rel="stylesheet"
href="chrome://browser/content/ipprotection/ipprotection-content.css"
/>
<div id="unauthenticated-vpn-content">
<img
id="unauthenticated-vpn-img"
alt=""
/>
<h2
id="unauthenticated-vpn-title"
class="vpn-title"
data-l10n-id="unauthenticated-vpn-title"
></h2>
<ul id="unauthenticated-vpn-message" class="vpn-description">
<li
data-l10n-id="unauthenticated-hide-location-message-3"
@click=${this.handleLearnMoreClick}
>
<a
class="learn-more-vpn"
data-l10n-name="learn-more-vpn"
href=${Services.urlFormatter.formatURLPref(
"app.support.baseURL"
) + LINKS.SUPPORT_SLUG}
></a>
</li>
<li
data-l10n-id="unauthenticated-bandwidth-limit-message"
data-l10n-args=${JSON.stringify({ maxUsage: BANDWIDTH.MAX_IN_GB })}
></li>
</ul>
<moz-button
id="unauthenticated-get-started"
class="vpn-button"
data-l10n-id="unauthenticated-get-started"
type="primary"
@click=${this.handleOptIn}
></moz-button>
</div>
`;
}
}
customElements.define(
"ipprotection-unauthenticated",
IPProtectionUnauthenticatedContentElement
);