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";
window.MozXULElement.insertFTLIfNeeded("browser/preferences/preferences.ftl");
/**
* @typedef {object} EngineInfo
* @property {string} iconSrc - The icon URL for the engine.
* @property {string} l10nId - The localization ID for the engine.
*/
/**
* @type {Record<string, EngineInfo>}
*/
const engineTypeToMetadata = {
bookmarks: {
iconSrc: "chrome://browser/skin/bookmark-hollow.svg",
l10nId: "sync-currently-syncing-bookmarks",
},
history: {
iconSrc: "chrome://browser/skin/history.svg",
l10nId: "sync-currently-syncing-history",
},
tabs: {
iconSrc: "chrome://browser/skin/tabs.svg",
l10nId: "sync-currently-syncing-tabs",
},
passwords: {
iconSrc: "chrome://browser/skin/login.svg",
l10nId: "sync-currently-syncing-passwords",
},
addresses: {
iconSrc: "chrome://browser/skin/notification-icons/geo.svg",
l10nId: "sync-currently-syncing-addresses",
},
payments: {
iconSrc: "chrome://browser/skin/payment-methods-16.svg",
l10nId: "sync-currently-syncing-payment-methods",
},
addons: {
iconSrc: "chrome://mozapps/skin/extensions/extension.svg",
l10nId: "sync-currently-syncing-addons",
},
settings: {
iconSrc: "chrome://global/skin/icons/settings.svg",
l10nId: "sync-currently-syncing-settings",
},
};
/**
* A custom element that displays synced engines in Sync settings section.
*
* @tagname sync-engines-list
* @property {string[]} engines - Array of engine types to display.
* Options: bookmarks, history, tabs, passwords, addresses, payments, addons, settings.
*/
class SyncEnginesList extends MozLitElement {
static properties = {
engines: { type: Array },
};
constructor() {
super();
/** @type {string[]} */
this.engines = [];
}
/**
* @param {string} type
*/
engineTemplate(type) {
let metadata = engineTypeToMetadata[type];
if (!metadata) {
return null;
}
return html`
<div class="sync-engine">
<img src=${metadata.iconSrc} role="presentation" />
<label data-l10n-id=${metadata.l10nId}></label>
</div>
`;
}
syncedEnginesTemplate() {
return html`<moz-box-item>
<div class="engines-list-wrapper">
<span
id="heading"
data-l10n-id="sync-syncing-across-devices-heading-2"
></span>
<div class="engines-list-container">
${this.engines.map(type => this.engineTemplate(type))}
</div>
</div>
</moz-box-item>`;
}
emptyStateTemplate() {
return html`<placeholder-message
data-l10n-id="sync-syncing-across-devices-empty-state"
imageSrc="chrome://global/skin/illustrations/security-error.svg"
></placeholder-message>`;
}
render() {
return html`
<link
rel="stylesheet"
href="chrome://browser/content/preferences/widgets/sync-engines-list.css"
/>
${this.engines.length
? this.syncedEnginesTemplate()
: this.emptyStateTemplate()}
`;
}
}
customElements.define("sync-engines-list", SyncEnginesList);