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
import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
import { html } from "chrome://global/content/vendor/lit.all.mjs";
class PlaceholderMessage extends MozLitElement {
static properties = {
imageSrc: { type: String },
label: { type: String, fluent: true },
description: { type: String, fluent: true },
supportPage: { type: String, attribute: "support-page" },
};
constructor() {
super();
/** @type {string} */
this.imageSrc = "";
/** @type {string} */
this.label = "";
/** @type {string} */
this.description = "";
/** @type {string} */
this.supportPage = "";
}
labelTemplate() {
if (!this.label) {
return "";
}
return html`<div class="label-wrapper">
<span class="label heading-medium" id="label">${this.label}</span>${!this
.description
? this.supportLinkTemplate()
: ""}
</div>`;
}
descriptionTemplate() {
if (!this.description) {
return "";
}
return html`<div class="description-wrapper">
<span class="description" id="description"> ${this.description}</span
>${this.supportLinkTemplate()}
</div>`;
}
supportLinkTemplate() {
if (!this.supportPage) {
return "";
}
return html`<a
is="moz-support-link"
class="support-link"
support-page=${this.supportPage}
part="support-link"
aria-describedby="label description"
></a>`;
}
render() {
return html`
<link
rel="stylesheet"
href="chrome://browser/content/preferences/widgets/placeholder-message.css"
/>
<link
rel="stylesheet"
href="chrome://global/skin/design-system/text-and-typography.css"
/>
<moz-box-item>
<div class="placeholder-container">
<img src=${this.imageSrc} role="presentation" />
<div class="text-container">
${this.labelTemplate()} ${this.descriptionTemplate()}
</div>
</div>
</moz-box-item>
`;
}
}
customElements.define("placeholder-message", PlaceholderMessage);