tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

placeholder-message.mjs (2311B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 
      5 import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
      6 import { html } from "chrome://global/content/vendor/lit.all.mjs";
      7 
      8 class PlaceholderMessage extends MozLitElement {
      9  static properties = {
     10    imageSrc: { type: String },
     11    label: { type: String, fluent: true },
     12    description: { type: String, fluent: true },
     13    supportPage: { type: String, attribute: "support-page" },
     14  };
     15 
     16  constructor() {
     17    super();
     18 
     19    /** @type {string} */
     20    this.imageSrc = "";
     21 
     22    /** @type {string} */
     23    this.label = "";
     24 
     25    /** @type {string} */
     26    this.description = "";
     27 
     28    /** @type {string} */
     29    this.supportPage = "";
     30  }
     31 
     32  labelTemplate() {
     33    if (!this.label) {
     34      return "";
     35    }
     36    return html`<div class="label-wrapper">
     37      <span class="label heading-medium" id="label">${this.label}</span>${!this
     38        .description
     39        ? this.supportLinkTemplate()
     40        : ""}
     41    </div>`;
     42  }
     43 
     44  descriptionTemplate() {
     45    if (!this.description) {
     46      return "";
     47    }
     48    return html`<div class="description-wrapper">
     49      <span class="description" id="description"> ${this.description}</span
     50      >${this.supportLinkTemplate()}
     51    </div>`;
     52  }
     53 
     54  supportLinkTemplate() {
     55    if (!this.supportPage) {
     56      return "";
     57    }
     58    return html`<a
     59      is="moz-support-link"
     60      class="support-link"
     61      support-page=${this.supportPage}
     62      part="support-link"
     63      aria-describedby="label description"
     64    ></a>`;
     65  }
     66 
     67  render() {
     68    return html`
     69      <link
     70        rel="stylesheet"
     71        href="chrome://browser/content/preferences/widgets/placeholder-message.css"
     72      />
     73      <link
     74        rel="stylesheet"
     75        href="chrome://global/skin/design-system/text-and-typography.css"
     76      />
     77      <moz-box-item>
     78        <div class="placeholder-container">
     79          <img src=${this.imageSrc} role="presentation" />
     80          <div class="text-container">
     81            ${this.labelTemplate()} ${this.descriptionTemplate()}
     82          </div>
     83        </div>
     84      </moz-box-item>
     85    `;
     86  }
     87 }
     88 customElements.define("placeholder-message", PlaceholderMessage);