From 4407c243298b13f8c57f7df65a42e5f6d5856004 Mon Sep 17 00:00:00 2001
From: windingwind <33902321+windingwind@users.noreply.github.com>
Date: Fri, 29 Mar 2024 21:18:20 +0800
Subject: [PATCH] Support tooltiptext on ItemPane custom section head buttons

Fix ItemPane custom section head button event listener
Update ItemPaneManager document
---
 chrome/content/zotero/elements/itemPaneSection.js | 13 ++++++++-----
 chrome/content/zotero/xpcom/itemPaneManager.js    |  5 ++++-
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/chrome/content/zotero/elements/itemPaneSection.js b/chrome/content/zotero/elements/itemPaneSection.js
index 0908187756..4876284d5a 100644
--- a/chrome/content/zotero/elements/itemPaneSection.js
+++ b/chrome/content/zotero/elements/itemPaneSection.js
@@ -176,18 +176,21 @@ class ItemPaneSectionElementBase extends XULElementBase {
 
 			let styles = [];
 			for (let type of Object.keys(this._sectionButtons)) {
-				let { icon, darkIcon, onClick } = this._sectionButtons[type];
+				let { icon, darkIcon, l10nID, onClick } = this._sectionButtons[type];
 				if (!darkIcon) {
 					darkIcon = icon;
 				}
 				let listener = (event) => {
-					let props = this._assembleProps(this._getHookProps());
-					props.event = event;
+					let props = this._assembleProps(
+						this._getHookProps(),
+						{ event },
+					);
 					onClick(props);
 				};
 				this._section.addEventListener(type, listener);
 				this._sectionListeners.push({ type, listener });
 				let button = this._section.querySelector(`.${type}`);
+				button.dataset.l10nId = l10nID;
 				button.style = `--custom-button-icon-light: url('${icon}'); --custom-button-icon-dark: url('${darkIcon}');`;
 			}
 
@@ -234,7 +237,7 @@ class ItemPaneSectionElementBase extends XULElementBase {
 		}
 
 		registerSectionButton(options) {
-			let { type, icon, darkIcon, onClick } = options;
+			let { type, icon, darkIcon, l10nID, onClick } = options;
 			if (!darkIcon) {
 				darkIcon = icon;
 			}
@@ -243,7 +246,7 @@ class ItemPaneSectionElementBase extends XULElementBase {
 				return;
 			}
 			this._sectionButtons[type.replace(/[^a-zA-Z0-9-_]/g, "-")] = {
-				icon, darkIcon, onClick
+				icon, darkIcon, l10nID, onClick
 			};
 		}
 
diff --git a/chrome/content/zotero/xpcom/itemPaneManager.js b/chrome/content/zotero/xpcom/itemPaneManager.js
index 89664e692c..25783281e1 100644
--- a/chrome/content/zotero/xpcom/itemPaneManager.js
+++ b/chrome/content/zotero/xpcom/itemPaneManager.js
@@ -31,11 +31,14 @@
  * @property {string} [darkIcon] - Icon URI in dark mode. If not set, use `icon`
  * @typedef SectionL10n
  * @type {object}
- * @property {string} l10nID - data-l10n-id for localization
+ * @property {string} l10nID - data-l10n-id for localization of section header label
  * @property {string} [l10nArgs] - data-l10n-args for localization
  * @typedef SectionButton
  * @type {object}
  * @property {string} type - Button type, must be valid DOMString and without ","
+ * @property {string} icon - Icon URI
+ * @property {string} [darkIcon] - Icon URI in dark mode. If not set, use `icon`
+ * @property {string} [l10nID] - data-l10n-id for localization of button tooltiptext
  * @property {(props: SectionEventHookArgs) => void} onClick - Button click callback
  * @typedef SectionBasicHookArgs
  * @type {object}