From 5b7e01dff6597a25679638ee46083b7eb1feea61 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 18 May 2021 13:31:19 +0100 Subject: [PATCH 1/3] Rename tab event handlers to clarify target --- chrome/content/zotero/components/tabBar.jsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/chrome/content/zotero/components/tabBar.jsx b/chrome/content/zotero/components/tabBar.jsx index bda855cd86..12bfe76bbe 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(); } @@ -109,7 +109,7 @@ const TabBar = forwardRef(function (props, ref) { /* Fix 'title' not working for HTML-in-XUL */ onMouseOver={() => window.Zotero_Tooltip.start(title)} onMouseOut={() => window.Zotero_Tooltip.stop()} - onMouseDown={(event) => handleMouseDown(event, id, index)} + onMouseDown={(event) => handleTabMouseDown(event, id, index)} >
{title}
+
{tabs.map((tab, index) => renderTab(tab, index))}
); From b27ac6649eae1c8ee133b10c0cb9e4504367c8f1 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 17 May 2021 16:58:13 +0100 Subject: [PATCH 2/3] Hide tab title tooltips whenever the tab bar changes This hides tooltips (such as the tab title tooltip) whenever the tab bar state changes, such as when adding or removing a tab, to ensure we don't leave any tooltips behind that no longer match reality. Fixes https://github.com/zotero/zotero/issues/2060 --- chrome/content/zotero/tabs.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/chrome/content/zotero/tabs.js b/chrome/content/zotero/tabs.js index e566d987b2..84b931f697 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 () { From d3d2212a0fc5e3cdbbe003c20c4ffca3caab3cf9 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 18 May 2021 14:23:46 +0100 Subject: [PATCH 3/3] Start tab title tooltips on mousemove By changing to `mousemove` to start the tab title tooltip, the behavior matches applications like Firefox more closely: you can always get the latest tooltip back after changing state by nudging the mouse (without having to exit and re-enter anything). --- chrome/content/zotero/components/tabBar.jsx | 24 +++++++++++++++++---- chrome/content/zotero/tabs.js | 2 +- 2 files changed, 21 insertions(+), 5 deletions(-) diff --git a/chrome/content/zotero/components/tabBar.jsx b/chrome/content/zotero/components/tabBar.jsx index 12bfe76bbe..1c1eeff13f 100644 --- a/chrome/content/zotero/components/tabBar.jsx +++ b/chrome/content/zotero/components/tabBar.jsx @@ -100,15 +100,26 @@ 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()} + onMouseMove={() => handleTabMouseMove(title)} onMouseDown={(event) => handleTabMouseDown(event, id, index)} >
{title}
@@ -123,7 +134,12 @@ const TabBar = forwardRef(function (props, ref) { } return ( -
+
{tabs.map((tab, index) => renderTab(tab, index))}
); diff --git a/chrome/content/zotero/tabs.js b/chrome/content/zotero/tabs.js index 84b931f697..1251df334c 100644 --- a/chrome/content/zotero/tabs.js +++ b/chrome/content/zotero/tabs.js @@ -66,7 +66,7 @@ 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 + // Hide any tab `title` tooltips that might be open window.Zotero_Tooltip.stop(); };