From c42e144f567746b074e7c5a92d983dee82427203 Mon Sep 17 00:00:00 2001
From: Abe Jellinek <jellinek@berkeley.edu>
Date: Fri, 9 May 2025 01:00:43 -0400
Subject: [PATCH] Make XULElementBase into a mixin to reduce code duplication
 (#5270)

---
 chrome/content/zotero/elements/base.js        | 86 +++++++++++--------
 .../content/zotero/elements/tabsMenuPanel.js  | 37 +-------
 2 files changed, 52 insertions(+), 71 deletions(-)

diff --git a/chrome/content/zotero/elements/base.js b/chrome/content/zotero/elements/base.js
index dd9ec6d76d..78ae15ca9c 100644
--- a/chrome/content/zotero/elements/base.js
+++ b/chrome/content/zotero/elements/base.js
@@ -23,47 +23,63 @@
     ***** END LICENSE BLOCK *****
 */
 
-class XULElementBase extends XULElement {
-	initialized = false;
-	
-	/**
-	 * @return {DocumentFragment | null}
-	 */
-	get content() {
-		return null;
-	}
+/**
+ * Add utility functions to XULElement or a subclass.
+ * @param {{ new(): XULElement }} Class
+ */
+function XULElementMixin(Class) {
+	return class extends Class {
+		initialized = false;
 
-	init() {}
-
-	destroy() {}
-
-	connectedCallback() {
-		let content = this.content;
-		if (content) {
-			content = document.importNode(content, true);
-			this.append(content);
+		/**
+		 * @return {DocumentFragment | null}
+		 */
+		get content() {
+			return null;
 		}
 
-		MozXULElement.insertFTLIfNeeded("branding/brand.ftl");
-		MozXULElement.insertFTLIfNeeded("zotero.ftl");
-		if (document.l10n && this.shadowRoot) {
-			document.l10n.connectRoot(this.shadowRoot);
+		init() {}
+
+		destroy() {}
+
+		connectedCallback() {
+			if (typeof super.connectedCallback === 'function') {
+				super.connectedCallback();
+			}
+			
+			let content = this.content;
+			if (content) {
+				content = document.importNode(content, true);
+				this.append(content);
+			}
+
+			MozXULElement.insertFTLIfNeeded("branding/brand.ftl");
+			MozXULElement.insertFTLIfNeeded("zotero.ftl");
+			if (document.l10n && this.shadowRoot) {
+				document.l10n.connectRoot(this.shadowRoot);
+			}
+
+			window.addEventListener("unload", this._handleWindowUnload);
+
+			this.initialized = true;
+			this.init();
 		}
 
-		window.addEventListener("unload", this._handleWindowUnload);
+		disconnectedCallback() {
+			if (typeof super.disconnectedCallback === 'function') {
+				super.disconnectedCallback();
+			}
 
-		this.initialized = true;
-		this.init();
-	}
+			this.replaceChildren();
+			this.destroy();
+			window.removeEventListener("unload", this._handleWindowUnload);
+			this.initialized = false;
+		}
 
-	disconnectedCallback() {
-		this.replaceChildren();
-		this.destroy();
-		window.removeEventListener("unload", this._handleWindowUnload);
-		this.initialized = false;
-	}
-
-	_handleWindowUnload = () => {
-		this.disconnectedCallback();
+		_handleWindowUnload = () => {
+			this.disconnectedCallback();
+		};
 	};
 }
+
+var XULElementBase = XULElementMixin(XULElement);
diff --git a/chrome/content/zotero/elements/tabsMenuPanel.js b/chrome/content/zotero/elements/tabsMenuPanel.js
index b96714fa5f..a52dedc668 100644
--- a/chrome/content/zotero/elements/tabsMenuPanel.js
+++ b/chrome/content/zotero/elements/tabsMenuPanel.js
@@ -30,7 +30,7 @@
 		delete document.createXULElement("panel");
 	}
 	const XULPanelElement = customElements.get("panel");
-	class TabsMenuPanel extends XULPanelElement {
+	class TabsMenuPanel extends XULElementMixin(XULPanelElement) {
 		content = MozXULElement.parseXULToFragment(`
 		<vbox id="zotero-tabs-menu-wrapper" class="focus-states-target">
 			<html:input id="zotero-tabs-menu-filter"
@@ -89,36 +89,6 @@
 			this.openPopup(elem, "after_start", -20, -2, false, false);
 		}
 
-		// From XULElementBase
-		connectedCallback() {
-			super.connectedCallback();
-			let content = this.content;
-			if (content) {
-				content = document.importNode(content, true);
-				this.append(content);
-			}
-
-			MozXULElement.insertFTLIfNeeded("branding/brand.ftl");
-			MozXULElement.insertFTLIfNeeded("zotero.ftl");
-			if (document.l10n && this.shadowRoot) {
-				document.l10n.connectRoot(this.shadowRoot);
-			}
-
-			window.addEventListener("unload", this._handleWindowUnload);
-
-			this.initialized = true;
-			this.init();
-		}
-
-		// From XULElementBase
-		disconnectedCallback() {
-			super.disconnectedCallback();
-			this.replaceChildren();
-			this.destroy();
-			window.removeEventListener("unload", this._handleWindowUnload);
-			this.initialized = false;
-		}
-
 		/**
 		 * Create the list of opened tabs in tabs menu.
 		 */
@@ -374,11 +344,6 @@
 			this._filterInput.focus();
 		}
 
-		// From XULElementBase
-		_handleWindowUnload = () => {
-			this.disconnectedCallback();
-		};
-
 		_handleShowing = (event) => {
 			if (event.originalTarget !== this) return;