Support tooltiptext on ItemPane custom section head buttons

Fix ItemPane custom section head button event listener
Update ItemPaneManager document
This commit is contained in:
windingwind 2024-03-29 21:18:20 +08:00 committed by Dan Stillman
parent 849ffe0133
commit 4407c24329
2 changed files with 12 additions and 6 deletions

View file

@ -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
};
}

View file

@ -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}