143 lines
4.5 KiB
JavaScript
143 lines
4.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/. */
|
|
|
|
const HTML_NS = "http://www.w3.org/1999/xhtml";
|
|
|
|
const lazy = {};
|
|
|
|
ChromeUtils.defineESModuleGetters(lazy, {
|
|
ContextualIdentityService:
|
|
"moz-src:///toolkit/components/contextualidentity/ContextualIdentityService.sys.mjs",
|
|
});
|
|
|
|
/**
|
|
* Renders the contextual identity (container) create/edit form and applies the
|
|
* change to the ContextualIdentityService. Shared between the preferences
|
|
* subdialog and the container-creation panel anchored to the URL bar so that
|
|
* the form markup and the create/update logic live in a single place.
|
|
*
|
|
* @param {Element} host
|
|
* The element the form is appended to.
|
|
* @param {object} [options]
|
|
* @param {?number} [options.userContextId]
|
|
* When set, the form edits the matching container; otherwise it creates one.
|
|
* @param {?object} [options.identity]
|
|
* The initial { name, icon, color } values. Defaults to an empty name and the
|
|
* first available icon and color.
|
|
*/
|
|
export class ContainerEditor {
|
|
constructor(host, { userContextId = null, identity = null } = {}) {
|
|
this.host = host;
|
|
this.document = host.ownerDocument;
|
|
this.userContextId = userContextId;
|
|
this.identity = identity || {
|
|
name: "",
|
|
icon: lazy.ContextualIdentityService.containerIcons[0],
|
|
color: lazy.ContextualIdentityService.containerColors[0],
|
|
};
|
|
}
|
|
|
|
render() {
|
|
let doc = this.document;
|
|
doc.defaultView.MozXULElement.insertFTLIfNeeded(
|
|
"browser/preferences/containers.ftl"
|
|
);
|
|
|
|
this.form = doc.createElementNS(HTML_NS, "form");
|
|
this.form.className = "container-editor";
|
|
|
|
this._name = doc.createElementNS(HTML_NS, "moz-input-text");
|
|
this._name.setAttribute("name", "name");
|
|
doc.l10n.setAttributes(this._name, "containers-name-label2");
|
|
|
|
this._colorPicker = this._createPicker("color", "containers-color-label2");
|
|
this._colorPicker.classList.add("color-swatches");
|
|
|
|
this._iconPicker = this._createPicker("icon", "containers-icon-label2");
|
|
this._iconPicker.classList.add("icon-swatches");
|
|
|
|
this.form.append(this._name, this._colorPicker, this._iconPicker);
|
|
this.host.append(this.form);
|
|
|
|
this._name.value = this.identity.name;
|
|
this._buildSwatches(
|
|
this._colorPicker,
|
|
this.identity.color,
|
|
lazy.ContextualIdentityService.containerColors,
|
|
color => `identity-icon-circle identity-color-${color}`,
|
|
color => lazy.ContextualIdentityService.getContainerColorLabel(color)
|
|
);
|
|
this._buildSwatches(
|
|
this._iconPicker,
|
|
this.identity.icon,
|
|
lazy.ContextualIdentityService.containerIcons,
|
|
icon => `identity-icon-${icon}`,
|
|
icon => lazy.ContextualIdentityService.getContainerIconLabel(icon)
|
|
);
|
|
}
|
|
|
|
_createPicker(pickerName, l10nId) {
|
|
let picker = this.document.createElementNS(HTML_NS, "moz-visual-picker");
|
|
picker.setAttribute("type", "radio");
|
|
picker.setAttribute("name", pickerName);
|
|
picker.classList.add("swatches");
|
|
this.document.l10n.setAttributes(picker, l10nId);
|
|
return picker;
|
|
}
|
|
|
|
_buildSwatches(picker, selected, values, iconClass, getLabel) {
|
|
let doc = this.document;
|
|
for (let value of values) {
|
|
let title = getLabel(value);
|
|
|
|
let item = doc.createElementNS(HTML_NS, "moz-visual-picker-item");
|
|
item.className = "swatch";
|
|
item.value = value;
|
|
item.ariaLabel = title;
|
|
item.title = title;
|
|
|
|
let icon = doc.createElementNS(HTML_NS, "span");
|
|
icon.className = `userContext-icon ${iconClass(value)}`;
|
|
|
|
item.append(icon);
|
|
picker.append(item);
|
|
}
|
|
|
|
picker.value = selected;
|
|
}
|
|
|
|
focus() {
|
|
this._name.focus();
|
|
}
|
|
|
|
get isValid() {
|
|
return !!this._name.value.trim();
|
|
}
|
|
|
|
commit() {
|
|
let formData = new FormData(this.form);
|
|
let containerName = formData.get("name").trim();
|
|
let color = formData.get("color");
|
|
let icon = formData.get("icon");
|
|
|
|
if (!lazy.ContextualIdentityService.getContainerColorCode(color)) {
|
|
throw new Error("Internal error. The color value doesn't match.");
|
|
}
|
|
if (!lazy.ContextualIdentityService.getContainerIconURL(icon)) {
|
|
throw new Error("Internal error. The icon value doesn't match.");
|
|
}
|
|
|
|
if (this.userContextId) {
|
|
lazy.ContextualIdentityService.update(
|
|
this.userContextId,
|
|
containerName,
|
|
icon,
|
|
color
|
|
);
|
|
} else {
|
|
lazy.ContextualIdentityService.create(containerName, icon, color);
|
|
}
|
|
}
|
|
}
|