diff --git a/chrome/content/zotero/components/tabBar.jsx b/chrome/content/zotero/components/tabBar.jsx index bda855cd86..1c1eeff13f 100644 --- a/chrome/content/zotero/components/tabBar.jsx +++ b/chrome/content/zotero/components/tabBar.jsx @@ -36,15 +36,15 @@ const TabBar = forwardRef(function (props, ref) { const mouseMoveWaitUntil = useRef(0); useEffect(() => { - window.addEventListener('mouseup', handleMouseUp); + window.addEventListener('mouseup', handleWindowMouseUp); return () => { - window.removeEventListener('mouseup', handleMouseUp); + window.removeEventListener('mouseup', handleWindowMouseUp); }; }, []); useImperativeHandle(ref, () => ({ setTabs })); - function handleMouseDown(event, id, index) { + function handleTabMouseDown(event, id, index) { if (event.target.closest('.tab-close')) { return; } @@ -55,7 +55,7 @@ const TabBar = forwardRef(function (props, ref) { event.stopPropagation(); } - function handleMouseMove(event) { + function handleTabBarMouseMove(event) { if (!draggingID.current || mouseMoveWaitUntil.current > Date.now()) { return; } @@ -91,7 +91,7 @@ const TabBar = forwardRef(function (props, ref) { mouseMoveWaitUntil.current = Date.now() + 100; } - function handleMouseUp(event) { + function handleWindowMouseUp(event) { draggingID.current = null; event.stopPropagation(); } @@ -100,16 +100,27 @@ const TabBar = forwardRef(function (props, ref) { props.onTabClose(id); event.stopPropagation(); } + + function handleTabMouseMove(title) { + // Fix `title` not working for HTML-in-XUL. Using `mousemove` ensures we restart the tooltip + // after just a small movement even when the active tab has changed under the cursor, which + // matches behavior in Firefox. + window.Zotero_Tooltip.start(title); + } + + function handleTabBarMouseOut() { + // Hide any possibly open `title` tooltips when mousing out of any tab or the tab bar as a + // whole. `mouseout` bubbles up from element you moved out of, so it covers both cases. + window.Zotero_Tooltip.stop(); + } function renderTab({ id, title, selected }, index) { return (
window.Zotero_Tooltip.start(title)} - onMouseOut={() => window.Zotero_Tooltip.stop()} - onMouseDown={(event) => handleMouseDown(event, id, index)} + onMouseMove={() => handleTabMouseMove(title)} + onMouseDown={(event) => handleTabMouseDown(event, id, index)} >
{title}
+
{tabs.map((tab, index) => renderTab(tab, index))}
); diff --git a/chrome/content/zotero/tabs.js b/chrome/content/zotero/tabs.js index e566d987b2..1251df334c 100644 --- a/chrome/content/zotero/tabs.js +++ b/chrome/content/zotero/tabs.js @@ -66,6 +66,8 @@ var Zotero_Tabs = new function () { var { tab } = this._getTab(this._selectedID); document.title = (tab.title.length ? tab.title + ' - ' : '') + 'Zotero'; this._updateTabBar(); + // Hide any tab `title` tooltips that might be open + window.Zotero_Tooltip.stop(); }; this.init = function () {