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";
/**
* Custom element that implements the state UI for the status card.
*/
export default class IPProtectionStatusBox extends MozLitElement {
static queries = {
titleEl: "#title",
descriptionEl: "#description",
};
static shadowRootOptions = {
...MozLitElement.shadowRootOptions,
delegatesFocus: true,
};
static properties = {
headerL10nId: { type: String },
descriptionL10nId: { type: String },
descriptionL10nArgs: { type: String },
type: { type: String },
};
constructor() {
super();
this.keyListener = this.#keyListener.bind(this);
}
connectedCallback() {
super.connectedCallback();
this.addEventListener("keydown", this.keyListener, { capture: true });
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener("keydown", this.keyListener, { capture: true });
}
focus() {
this.connectionButtonEl?.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;
}
}
}
render() {
return html`
<link
rel="stylesheet"
href="chrome://browser/content/ipprotection/ipprotection-status-box.css"
/>
<div id="content-container" class=${this.type}>
<span id="header">
<h1 id="title" data-l10n-id=${this.headerL10nId}></h1>
<slot name="icon"></slot>
</span>
<div id="content">
${this.descriptionL10nId
? html`<span
id="description"
data-l10n-id=${this.descriptionL10nId}
data-l10n-args=${this.descriptionL10nArgs}
></span>`
: null}
<slot name="bandwidth"></slot>
<div id="location">
<slot name="location-icon"></slot>
<slot name="location"></slot>
</div>
</div>
<slot name="action"></slot>
<slot name="content"></slot>
</div>
`;
}
}
customElements.define("ipprotection-status-box", IPProtectionStatusBox);