🚚 Move tooltip handling back to button

dothq · Feb 4, 2024 · 28ee6ed · 28ee6ed
1 parent faf7c1e
commit 28ee6ed
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 80 deletions.
diff --git a/components/commands/widgets/browser-command-element.js b/components/commands/widgets/browser-command-element.js
@@ -63,29 +63,6 @@ var BrowserCommandElementMixin = (Base) => {
 			}
 		}
 
-		/**
-		 * Computes the tooltip text for this command element
-		 */
-		getTooltipText() {
-			let tooltipText = "";
-
-			const label = this.getAttribute("label");
-			const labelAuxiliary = this.getAttribute("labelauxiliary");
-			const accelerator = this.getAttribute("accelerator");
-
-			if (labelAuxiliary) {
-				tooltipText = labelAuxiliary;
-			} else if (label) {
-				tooltipText = label;
-			}
-
-			if (accelerator) {
-				tooltipText += ` (${accelerator})`;
-			}
-
-			return tooltipText;
-		}
-
 		/**
 		 * Performs the command attached to the element
 		 * @param {Event} [originalEvent]
@@ -198,18 +175,6 @@ var BrowserCommandElementMixin = (Base) => {
 			this.dispatchEvent(evt);
 		}
 
-		/**
-		 * Fired when a popup starts showing in the command element
-		 * @param {Event} event
-		 */
-		_onCommandElementPopupShowing(event) {
-			if (event.target === this.tooltipEl) {
-				if (this.tooltipEl.state == "closed") return;
-
-				this.tooltipEl.label = this.getTooltipText();
-			}
-		}
-
 		connectedCallback() {
 			if (super.connectedCallback) {
 				super.connectedCallback();
@@ -218,14 +183,6 @@ var BrowserCommandElementMixin = (Base) => {
 			if (this.commandId) {
 				this._initCommandSubscription();
 			}
-
-			this.setAttribute("tooltip", "_child");
-			this.prepend(this.tooltipEl);
-
-			this.addEventListener(
-				"popupshowing",
-				this._onCommandElementPopupShowing.bind(this)
-			);
 		}
 
 		attributeChangedCallback(attribute, oldValue, newValue) {
@@ -252,11 +209,6 @@ var BrowserCommandElementMixin = (Base) => {
 			}
 
 			this._destroyCommandSubscription();
-
-			this.removeEventListener(
-				"popupshowing",
-				this._onCommandElementPopupShowing.bind(this)
-			);
 		}
 	};
 

diff --git a/components/menus/content/xul-menugroup.js b/components/menus/content/xul-menugroup.js
@@ -12,18 +12,6 @@
 			);
 		}
 
-		/**
-		 * The menu group's tooltip element
-		 */
-		get groupTooltip() {
-			return /** @type {BrowserTooltip} */ (
-				this.querySelector("tooltip") ||
-					document.createXULElement("tooltip", {
-						is: "browser-tooltip"
-					})
-			);
-		}
-
 		/**
 		 * The menugroup's menuitems
 		 * @type {ReturnType<typeof MozMenuItemBaseMixin<Constructor<XULElement>>>["prototype"][]}
@@ -42,17 +30,6 @@
 			return this.querySelector("[_moz-menuactive='true']");
 		}
 
-		/**
-		 * Updates the menugroup's tooltip text
-		 */
-		_updateTooltipText() {
-			if (this.groupTooltip.state == "closed") return;
-
-			if (this.activeItem) {
-				this.groupTooltip.label = this.activeItem.getTooltipText();
-			}
-		}
-
 		/**
 		 * Fires whenever a mutation occurs within the menugroup
 		 */
@@ -63,15 +40,6 @@
 		}
 
 		connectedCallback() {
-			this.setAttribute("tooltip", "_child");
-
-			this.prepend(this.groupTooltip);
-
-			this.groupTooltip.addEventListener(
-				"popupshowing",
-				this._updateTooltipText.bind(this)
-			);
-
 			this.mutationObserver.observe(this, {
 				subtree: true,
 				childList: true

diff --git a/components/widgets/content/browser-button.js b/components/widgets/content/browser-button.js
@@ -29,6 +29,7 @@ class BrowserButton extends BrowserContextualMixin(HTMLButtonElement) {
 	 * @typedef {Object} BrowserButtonElements
 	 * @property {HTMLSpanElement} label - The buttons's label
 	 * @property {BrowserIcon} icon - The button's icon
+	 * @property {BrowserTooltip} tooltip - The button's tooltip
 	 *
 	 * @returns {BrowserButtonElements}
 	 */
@@ -48,6 +49,12 @@ class BrowserButton extends BrowserContextualMixin(HTMLButtonElement) {
 						class: "browser-button-icon",
 						name: this.getAttribute("icon") || ""
 					})
+			),
+			tooltip: /** @type {BrowserTooltip} */ (
+				this.querySelector("tooltip") ||
+					document.createXULElement("tooltip", {
+						is: "browser-tooltip"
+					})
 			)
 		};
 	}
@@ -100,6 +107,8 @@ class BrowserButton extends BrowserContextualMixin(HTMLButtonElement) {
 
 		this.setAttribute("label", newLabel);
 		this.elements.label.textContent = newLabel;
+
+		this._updateTooltipText();
 	}
 
 	/**
@@ -116,6 +125,8 @@ class BrowserButton extends BrowserContextualMixin(HTMLButtonElement) {
 		if (newLabelAuxiliary == this.labelAuxiliary) return;
 
 		this.setAttribute("labelauxiliary", newLabelAuxiliary);
+
+		this._updateTooltipText();
 	}
 
 	/**
@@ -163,6 +174,8 @@ class BrowserButton extends BrowserContextualMixin(HTMLButtonElement) {
 	 */
 	set accelerator(newAccelerator) {
 		this.setAttribute("accelerator", newAccelerator);
+
+		this._updateTooltipText();
 	}
 
 	/**
@@ -212,13 +225,58 @@ class BrowserButton extends BrowserContextualMixin(HTMLButtonElement) {
 		);
 	}
 
+	/**
+	 * Computes the tooltip text for this button
+	 */
+	getTooltipText() {
+		let tooltipText = "";
+
+		const label = this.getAttribute("label");
+		const labelAuxiliary = this.getAttribute("labelauxiliary");
+		const accelerator = this.getAttribute("accelerator");
+
+		if (labelAuxiliary) {
+			tooltipText = labelAuxiliary;
+		} else if (label) {
+			tooltipText = label;
+		}
+
+		if (accelerator) {
+			tooltipText += ` (${accelerator})`;
+		}
+
+		return tooltipText;
+	}
+
+	/**
+	 * Updates the button's tooltip text
+	 */
+	_updateTooltipText() {
+		if (this.elements.tooltip.state == "closed") return;
+
+		this.elements.tooltip.label = this.getTooltipText();
+	}
+
+	/**
+	 * Fired when a popup starts showing in the button
+	 * @param {Event} event
+	 */
+	_onPopupShowing(event) {
+		if (event.target === this.elements.tooltip) {
+			this._updateTooltipText();
+		}
+	}
+
 	connectedCallback() {
 		this.classList.add("browser-button");
 		this.classList.toggle(
 			/** @type {any} */ (this).buttonId,
 			"buttonId" in this
 		);
 
+		this.setAttribute("tooltip", "_child");
+		this.prepend(this.elements.tooltip);
+
 		this.appendChild(
 			html(
 				"div",
@@ -237,6 +295,8 @@ class BrowserButton extends BrowserContextualMixin(HTMLButtonElement) {
 			this._handleBrowserButtonEvent.bind(this)
 		);
 
+		this.addEventListener("popupshowing", this._onPopupShowing.bind(this));
+
 		this.resizeObserver.observe(this);
 	}
 
@@ -249,6 +309,10 @@ class BrowserButton extends BrowserContextualMixin(HTMLButtonElement) {
 			"focusout",
 			this._handleBrowserButtonEvent.bind(this)
 		);
+		this.removeEventListener(
+			"popupshowing",
+			this._onPopupShowing.bind(this)
+		);
 
 		this.resizeObserver.disconnect();
 	}