tor-browser

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

profiles-theme-card.mjs (2548B)

      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, ifDefined } from "chrome://global/content/vendor/lit.all.mjs";
      7 
      8 /**
      9 * Element used for displaying a theme on the about:editprofile and about:newprofile pages.
     10 */
     11 export class ProfilesThemeCard extends MozLitElement {
     12  static properties = {
     13    theme: { type: Object },
     14    value: { type: String },
     15  };
     16 
     17  static queries = {
     18    backgroundImg: "img",
     19    imgHolder: ".img-holder",
     20  };
     21 
     22  updateThemeImage() {
     23    if (!this.theme) {
     24      return;
     25    }
     26 
     27    if (this.theme.id === "default-theme@mozilla.org") {
     28      // For system theme, we use a special SVG that shows the light/dark wave design
     29      this.backgroundImg.src =
     30        "chrome://browser/content/profiles/assets/system-theme-background.svg";
     31    } else {
     32      let contentColor;
     33      if (!this.theme.contentColor) {
     34        let styles = window.getComputedStyle(document.body);
     35        contentColor = styles.getPropertyValue("background-color");
     36      }
     37 
     38      // For other themes, use the standard SVG with dynamic colors
     39      this.backgroundImg.src =
     40        "chrome://browser/content/profiles/assets/theme-selector-background.svg";
     41      this.backgroundImg.style.fill = this.theme.chromeColor;
     42      this.backgroundImg.style.stroke = this.theme.toolbarColor;
     43      this.imgHolder.style.backgroundColor =
     44        this.theme.contentColor ?? contentColor;
     45    }
     46  }
     47 
     48  updated() {
     49    super.updated();
     50    this.updateThemeImage();
     51  }
     52 
     53  render() {
     54    if (!this.theme) {
     55      return null;
     56    }
     57 
     58    // We're using the theme's `dataL10nId` to serve as a
     59    // unique ID to use with `aria-labelledby`.
     60    return html`<link
     61        rel="stylesheet"
     62        href="chrome://browser/content/profiles/profiles-theme-card.css"
     63      />
     64      <moz-card
     65        class="theme-card"
     66        data-l10n-id=${ifDefined(this.theme.dataL10nTitle)}
     67      >
     68        <div class="theme-content">
     69          <div class="img-holder" aria-hidden="true">
     70            <img alt="" />
     71          </div>
     72          <div
     73            class="theme-name"
     74            id=${this.theme.name}
     75            data-l10n-id=${ifDefined(this.theme.dataL10nId)}
     76          >
     77            ${this.theme.name}
     78          </div>
     79        </div>
     80      </moz-card>`;
     81  }
     82 }
     83 
     84 customElements.define("profiles-theme-card", ProfilesThemeCard);