89873fdff1
Refactor the setting-group and setting-control a little to support passing in the Preferences.getSetting function rather pulling it off of window. Add basic Storybook stories for setting-group and setting-control. Differential Revision: https://phabricator.services.mozilla.com/D241130
85 lines
2.5 KiB
JavaScript
85 lines
2.5 KiB
JavaScript
/* 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
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
|
|
import { html, ifDefined } from "chrome://global/content/vendor/lit.all.mjs";
|
|
import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
|
|
|
|
export class SettingGroup extends MozLitElement {
|
|
static properties = {
|
|
config: { type: Object },
|
|
groupId: { type: String },
|
|
// getSetting should be Preferences.getSetting from preferencesBindings.js
|
|
getSetting: { type: Function },
|
|
};
|
|
|
|
createRenderRoot() {
|
|
return this;
|
|
}
|
|
|
|
itemTemplate(item) {
|
|
let setting = this.getSetting(item.id);
|
|
if (!setting.visible) {
|
|
return "";
|
|
}
|
|
return html`<setting-control
|
|
.setting=${setting}
|
|
.config=${item}
|
|
></setting-control>`;
|
|
}
|
|
|
|
xulCheckboxTemplate(item, setting) {
|
|
let result = document.createDocumentFragment();
|
|
let checkbox = document.createXULElement("checkbox");
|
|
checkbox.id = item.id;
|
|
document.l10n.setAttributes(checkbox, item.l10nId);
|
|
if (item.subcategory) {
|
|
checkbox.setAttribute("subcategory", item.subcategory);
|
|
}
|
|
checkbox.addEventListener("command", e =>
|
|
setting.userChange(e.target.checked)
|
|
);
|
|
checkbox.checked = setting.value;
|
|
if (item.supportPage) {
|
|
let container = document.createXULElement("hbox");
|
|
container.setAttribute("align", "center");
|
|
let supportLink = document.createElement("a", { is: "moz-support-link" });
|
|
supportLink.supportPage = item.supportPage;
|
|
checkbox.classList.add("tail-with-learn-more");
|
|
container.append(checkbox, supportLink);
|
|
result.append(container);
|
|
} else {
|
|
result.append(checkbox);
|
|
}
|
|
return result;
|
|
}
|
|
|
|
xulItemTemplate(item) {
|
|
let setting = this.getSetting(item.id);
|
|
if (!setting.visible) {
|
|
return "";
|
|
}
|
|
switch (item.control) {
|
|
case "checkbox":
|
|
default:
|
|
return this.xulCheckboxTemplate(item, setting);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
if (!this.config) {
|
|
return "";
|
|
}
|
|
if (
|
|
window.IS_STORYBOOK ||
|
|
Services.prefs.getBoolPref("settings.revamp.design", false)
|
|
) {
|
|
return html`<moz-fieldset data-l10n-id=${ifDefined(this.config.l10nId)}
|
|
>${this.config.items.map(item => this.itemTemplate(item))}</moz-fieldset
|
|
>`;
|
|
}
|
|
return this.config.items.map(item => this.xulItemTemplate(item));
|
|
}
|
|
}
|
|
customElements.define("setting-group", SettingGroup);
|