tor-browser

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

sync-engines-list.mjs (3412B)

      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 window.MozXULElement.insertFTLIfNeeded("browser/preferences/preferences.ftl");
      9 
     10 /**
     11 * @typedef {object} EngineInfo
     12 * @property {string} iconSrc - The icon URL for the engine.
     13 * @property {string} l10nId - The localization ID for the engine.
     14 */
     15 
     16 /**
     17 * @type {Record<string, EngineInfo>}
     18 */
     19 const engineTypeToMetadata = {
     20  bookmarks: {
     21    iconSrc: "chrome://browser/skin/bookmark-hollow.svg",
     22    l10nId: "sync-currently-syncing-bookmarks",
     23  },
     24  history: {
     25    iconSrc: "chrome://browser/skin/history.svg",
     26    l10nId: "sync-currently-syncing-history",
     27  },
     28  tabs: {
     29    iconSrc: "chrome://browser/skin/tabs.svg",
     30    l10nId: "sync-currently-syncing-tabs",
     31  },
     32  passwords: {
     33    iconSrc: "chrome://browser/skin/login.svg",
     34    l10nId: "sync-currently-syncing-passwords",
     35  },
     36  addresses: {
     37    iconSrc: "chrome://browser/skin/notification-icons/geo.svg",
     38    l10nId: "sync-currently-syncing-addresses",
     39  },
     40  payments: {
     41    iconSrc: "chrome://browser/skin/payment-methods-16.svg",
     42    l10nId: "sync-currently-syncing-payment-methods",
     43  },
     44  addons: {
     45    iconSrc: "chrome://mozapps/skin/extensions/extension.svg",
     46    l10nId: "sync-currently-syncing-addons",
     47  },
     48  settings: {
     49    iconSrc: "chrome://global/skin/icons/settings.svg",
     50    l10nId: "sync-currently-syncing-settings",
     51  },
     52 };
     53 
     54 /**
     55 * A custom element that displays synced engines in Sync settings section.
     56 *
     57 * @tagname sync-engines-list
     58 * @property {string[]} engines - Array of engine types to display.
     59 *   Options: bookmarks, history, tabs, passwords, addresses, payments, addons, settings.
     60 */
     61 class SyncEnginesList extends MozLitElement {
     62  static properties = {
     63    engines: { type: Array },
     64  };
     65 
     66  constructor() {
     67    super();
     68 
     69    /** @type {string[]} */
     70    this.engines = [];
     71  }
     72 
     73  /**
     74   * @param {string} type
     75   */
     76  engineTemplate(type) {
     77    let metadata = engineTypeToMetadata[type];
     78    if (!metadata) {
     79      return null;
     80    }
     81 
     82    return html`
     83      <div class="sync-engine">
     84        <img src=${metadata.iconSrc} role="presentation" />
     85        <label data-l10n-id=${metadata.l10nId}></label>
     86      </div>
     87    `;
     88  }
     89 
     90  syncedEnginesTemplate() {
     91    return html`<moz-box-item>
     92      <div class="engines-list-wrapper">
     93        <span
     94          id="heading"
     95          data-l10n-id="sync-syncing-across-devices-heading-2"
     96        ></span>
     97        <div class="engines-list-container">
     98          ${this.engines.map(type => this.engineTemplate(type))}
     99        </div>
    100      </div>
    101    </moz-box-item>`;
    102  }
    103 
    104  emptyStateTemplate() {
    105    return html`<placeholder-message
    106      data-l10n-id="sync-syncing-across-devices-empty-state"
    107      imageSrc="chrome://global/skin/illustrations/security-error.svg"
    108    ></placeholder-message>`;
    109  }
    110 
    111  render() {
    112    return html`
    113      <link
    114        rel="stylesheet"
    115        href="chrome://browser/content/preferences/widgets/sync-engines-list.css"
    116      />
    117      ${this.engines.length
    118        ? this.syncedEnginesTemplate()
    119        : this.emptyStateTemplate()}
    120    `;
    121  }
    122 }
    123 customElements.define("sync-engines-list", SyncEnginesList);