From 6bf0a5cb5034a7e684dcc3500e841785237ce2dd Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sun, 7 Apr 2024 19:32:43 +0200 Subject: Adding upstream version 1:115.7.0. Signed-off-by: Daniel Baumann --- .../content/unified-toolbar-button.mjs | 240 +++++++++++++++++++++ 1 file changed, 240 insertions(+) create mode 100644 comm/mail/components/unifiedtoolbar/content/unified-toolbar-button.mjs (limited to 'comm/mail/components/unifiedtoolbar/content/unified-toolbar-button.mjs') diff --git a/comm/mail/components/unifiedtoolbar/content/unified-toolbar-button.mjs b/comm/mail/components/unifiedtoolbar/content/unified-toolbar-button.mjs new file mode 100644 index 0000000000..466a83f0c1 --- /dev/null +++ b/comm/mail/components/unifiedtoolbar/content/unified-toolbar-button.mjs @@ -0,0 +1,240 @@ +/* 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/. */ + +//TODO keyboard handling, keyboard + commands + +/* import-globals-from ../../../base/content/globalOverlay.js */ + +/** + * Toolbar button implementation for the unified toolbar. + * Template ID: unifiedToolbarButtonTemplate + * Attributes: + * - command: ID string of the command to execute when the button is pressed. + * - observes: ID of command to observe for disabled state. Defaults to value of + * command attribute. + * - popup: ID of the popup to open when the button is pressed. The popup is + * anchored to the button. Overrides any other click handling. + * - disabled: When set the button is disabled. + * - title: Tooltip to show on the button. + * - label: Label text of the button. Observed for changes. + * - label-id: A fluent ID for the label instead of the label attribute. + * Observed for changes. + * - badge: When set, the value of the attribute is shown as badge. + * - aria-pressed: set to "false" to make the button behave like a toggle. + * Events: + * - buttondisabled: Fired when the button gets disabled while it is keyboard + * navigable. + * - buttonenabled: Fired when the button gets enabled again but isn't marked to + * be keyboard navigable. + */ +export class UnifiedToolbarButton extends HTMLButtonElement { + static get observedAttributes() { + return ["label", "label-id", "disabled"]; + } + + /** + * Container for the button label. + * + * @type {?HTMLSpanElement} + */ + label = null; + + /** + * Name of the command this button follows the disabled (and if it is a toggle + * button the checked) state of. + * + * @type {string?} + */ + observedCommand; + + /** + * The mutation observer observing the command this button follows the state + * of. + * + * @type {MutationObserver?} + */ + #observer = null; + + connectedCallback() { + // We remove the mutation overserver when the element is disconnected, thus + // we have to add it every time the element is connected. + this.observedCommand = + this.getAttribute("observes") || this.getAttribute("command"); + if (this.observedCommand) { + const command = document.getElementById(this.observedCommand); + if (command) { + if (!this.#observer) { + this.#observer = new MutationObserver(this.#handleCommandMutation); + } + const observedAttributes = ["disabled"]; + if (this.hasAttribute("aria-pressed")) { + observedAttributes.push("checked"); + + // Update the pressed state from the command + this.setAttribute( + "aria-pressed", + command.getAttribute("checked") ?? "false" + ); + } + this.#observer.observe(command, { + attributes: true, + attributeFilter: observedAttributes, + }); + } + // Update the disabled state to match the current state of the command. + try { + this.disabled = !getEnabledControllerForCommand(this.observedCommand); + } catch { + this.disabled = true; + } + } + if (this.hasConnected) { + return; + } + this.hasConnected = true; + this.classList.add("unified-toolbar-button", "button"); + + const template = document + .getElementById("unifiedToolbarButtonTemplate") + .content.cloneNode(true); + this.label = template.querySelector("span"); + this.#updateLabel(); + this.appendChild(template); + this.addEventListener("click", event => this.handleClick(event)); + } + + disconnectedCallback() { + if (this.#observer) { + this.#observer.disconnect(); + } + } + + attributeChangedCallback(attribute) { + switch (attribute) { + case "label": + case "label-id": + this.#updateLabel(); + break; + case "disabled": + if (!this.hasConnected) { + return; + } + if (this.disabled && this.tabIndex !== -1) { + this.tabIndex = -1; + this.dispatchEvent(new CustomEvent("buttondisabled")); + } else if (!this.disabled && this.tabIndex === -1) { + this.dispatchEvent(new CustomEvent("buttonenabled")); + } + break; + } + } + + /** + * Default handling for clicks on the button. Shows the associated popup, + * executes the given command and toggles the button state. + * + * @param {MouseEvent} event - Click event. + */ + handleClick(event) { + if (this.hasAttribute("popup")) { + event.preventDefault(); + event.stopPropagation(); + const popup = document.getElementById(this.getAttribute("popup")); + popup.openPopup(this, { + position: "after_start", + triggerEvent: event, + }); + this.setAttribute("aria-pressed", "true"); + const hideListener = () => { + if (popup.state === "open") { + return; + } + this.removeAttribute("aria-pressed"); + popup.removeEventListener("popuphiding", hideListener); + }; + popup.addEventListener("popuphiding", hideListener); + return; + } + if (this.hasAttribute("aria-pressed")) { + const isPressed = this.getAttribute("aria-pressed") === "true"; + this.setAttribute("aria-pressed", (!isPressed).toString()); + } + if (this.hasAttribute("command")) { + const command = this.getAttribute("command"); + let controller = getEnabledControllerForCommand(command); + if (controller) { + event.preventDefault(); + event.stopPropagation(); + controller = controller.wrappedJSObject ?? controller; + controller.doCommand(command, event); + return; + } + const commandElement = document.getElementById(command); + if (!commandElement) { + return; + } + event.preventDefault(); + event.stopPropagation(); + commandElement.doCommand(); + } + } + + /** + * Callback for the mutation observer on the command this button follows. + * + * @param {Mutation[]} mutationList - List of mutations the observer saw. + */ + #handleCommandMutation = mutationList => { + for (const mutation of mutationList) { + if (mutation.type !== "attributes") { + continue; + } + if (mutation.attributeName === "disabled") { + this.disabled = mutation.target.getAttribute("disabled") === "true"; + } else if (mutation.attributeName === "checked") { + this.setAttribute( + "aria-pressed", + mutation.target.getAttribute("checked") + ); + } + } + }; + + /** + * Update the contents of the label from the attributes of this element. + */ + #updateLabel() { + if (!this.label) { + return; + } + if (this.hasAttribute("label")) { + this.label.textContent = this.getAttribute("label"); + return; + } + if (this.hasAttribute("label-id")) { + document.l10n.setAttributes(this.label, this.getAttribute("label-id")); + } + } + + /** + * Badge displayed on the button. To clear the badge, set to empty string or + * nullish value. + * + * @type {string} + */ + set badge(badgeText) { + if (badgeText === "" || badgeText == null) { + this.removeAttribute("badge"); + return; + } + this.setAttribute("badge", badgeText); + } + + get badge() { + return this.getAttribute("badge"); + } +} +customElements.define("unified-toolbar-button", UnifiedToolbarButton, { + extends: "button", +}); -- cgit v1.2.3