fix(ui): scope the tree's instant hover to a row's action bar

Reaching a new row skipped the show delay whenever a hover was already
up, which native never does for a list: its zero-delay window is gated
on a per-delegate `instantHover` flag, and the only three places that set
it are a notebook cell toolbar and two inline widgets, never a list or a
tree.

The delay now returns for every new target, and the exception follows the
precedent instead of ignoring it: a dense cluster of targets keeps the
instant handoff, which for a tree means one row's action bar. Measured in
Chrome: first hover 518ms, row to row 511ms, label to a button 513ms,
button to button 19ms.

Author: EhabY

packages/ui/README.md

@@ -157,10 +157,11 @@ styling.
 
 Labels hover with the node's text value, so truncated rows stay readable.
 Set `tooltip` for richer content or `null` to opt out. One bubble serves the
-whole tree, as in the native list: an invisible anchor moves to the label
-under the pointer, and once it is showing it follows to the next row without
-waiting again. Ctrl+K Ctrl+I opens the focused row's hover with no delay at
-all, and moving the focus closes it.
+whole tree, as in the native list: an invisible anchor moves to whatever the
+pointer reaches. Each new target waits out the show delay, except within a
+row's action bar, where crossing between buttons is instant, the exception
+native grants a dense cluster of targets. Ctrl+K Ctrl+I opens the focused
+row's hover with no delay at all, and moving the focus closes it.
 
 ## Overlays
 
@@ -189,9 +190,8 @@ or `null` for a button that stays quiet.
 
 `HoverDelegateScope` hands every `Tooltip` inside it to one shared bubble
 instead of a bubble each, the way a VS Code list serves its rows and their
-action bars from a single hover widget. `Tree` uses it, so the bubble crosses
-from a row's label to its action buttons and between those buttons with no
-second delay.
+action bars from a single hover widget. `Tree` uses it, which is also what
+lets one place decide when a hover is instant rather than delayed.
 
 Overlay content is portalled to `body`, inherits webview typography from
 there, and shares the `.ui-overlay` base for stacking, border, shadow,

packages/ui/src/components/Tree/TreeHover.tsx

@@ -22,6 +22,9 @@ const GRACE_MS = 100;
 /** Native drops the delay to zero for a hover hidden this recently. */
 const INSTANT_MS = 200;
 
+/** It grants that only to dense clusters of targets, such as an action bar. */
+const DENSE_CLUSTER = ".ui-tree-item__action";
+
 /** How the keyboard chord reaches the hover. */
 export type TreeHoverControl = RefObject<HoverDelegate | undefined>;
 
@@ -35,8 +38,9 @@ interface Shown extends HoverTarget {
 /**
  * One hover for the whole tree, like the native list's shared widget. Rows and
  * anything inside them report the element under the pointer and an invisible
- * anchor moves to it, so the bubble crosses from a label to an action bar
- * button without waiting out a second delay.
+ * anchor moves to it. Reaching a new row waits out the show delay as it does
+ * natively; crossing an action bar's buttons is instant, the exception native
+ * grants a dense cluster.
  */
 export function TreeHover({
 	children,
@@ -51,6 +55,7 @@ export function TreeHover({
 	const [shown, setShown] = useState<Shown>();
 	const openRef = useRef(false);
 	const hiddenAtRef = useRef(0);
+	const clusterRef = useRef<Element | null>(null);
 	const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
 
 	const hide = useCallback((): void => {
@@ -67,6 +72,7 @@ export function TreeHover({
 			const bounds = tree.getBoundingClientRect();
 			const rect = target.element.getBoundingClientRect();
 			openRef.current = true;
+			clusterRef.current = target.element.closest(DENSE_CLUSTER);
 			setShown({
 				...target,
 				top: rect.top - bounds.top,
@@ -82,13 +88,19 @@ export function TreeHover({
 	const setTarget = useCallback<HoverDelegate>(
 		(target, immediate = false) => {
 			clearTimeout(timerRef.current);
-			const instant =
-				immediate ||
-				openRef.current ||
-				Date.now() - hiddenAtRef.current < INSTANT_MS;
-			if (!target?.content) timerRef.current = setTimeout(hide, GRACE_MS);
-			else if (instant) show(target);
-			else timerRef.current = setTimeout(() => show(target), delay);
+			if (!target?.content) {
+				timerRef.current = setTimeout(hide, GRACE_MS);
+				return;
+			}
+			const cluster = target.element.closest(DENSE_CLUSTER);
+			const recent =
+				openRef.current || Date.now() - hiddenAtRef.current < INSTANT_MS;
+			if (immediate || (recent && cluster && cluster === clusterRef.current)) {
+				show(target);
+				return;
+			}
+			hide();
+			timerRef.current = setTimeout(() => show(target), delay);
 		},
 		[delay, hide, show],
 	);

test/webview/ui/tree.rows.test.tsx

@@ -71,34 +71,44 @@ describe("Tree rows", () => {
 		await userEvent.hover(label("Quiet"));
 		expect(screen.queryByRole("tooltip")).toBeNull();
 	});
-	it("hands the same hover to a row's action bar", async () => {
+	it("waits for a new target but crosses an action bar at once", async () => {
 		render(
-			<TooltipProvider delayDuration={0}>
+			<TooltipProvider delayDuration={60}>
 				<Tree
 					aria-label="Handoff"
-					selectedItemId="row"
 					nodes={[
 						{
 							id: "row",
 							label: "Workspace",
-							action: <IconButton icon="play" label="Start workspace" />,
+							action: (
+								<>
+									<IconButton icon="play" label="Start workspace" />
+									<IconButton icon="gear" label="Workspace settings" />
+								</>
+							),
 						},
 					]}
 				/>
 			</TooltipProvider>,
 		);
-		const row = treeItem("Workspace");
-		fireEvent.click(row);
-		await userEvent.hover(
-			row.getElementsByClassName("ui-tree-item__content")[0],
-		);
+		const label = treeItem("Workspace").getElementsByClassName(
+			"ui-tree-item__content",
+		)[0];
+		fireEvent.pointerEnter(label);
 		expect(await screen.findByRole("tooltip")).toHaveTextContent("Workspace");
-		// The bubble is already up, so the action swaps in without a new delay.
+		// A different kind of target, so the bubble hides and waits again.
 		fireEvent.pointerEnter(
 			screen.getByRole("button", { name: "Start workspace" }),
 		);
-		expect(screen.getAllByRole("tooltip")).toHaveLength(1);
-		expect(screen.getByRole("tooltip")).toHaveTextContent("Start workspace");
+		expect(screen.queryByRole("tooltip")).toBeNull();
+		expect(await screen.findByRole("tooltip")).toHaveTextContent(
+			"Start workspace",
+		);
+		// The same action bar is dense enough to skip the delay.
+		fireEvent.pointerEnter(
+			screen.getByRole("button", { name: "Workspace settings" }),
+		);
+		expect(screen.getByRole("tooltip")).toHaveTextContent("Workspace settings");
 	});
 	it("treats an empty children array as an expandable branch", () => {
 		const onExpandedIdsChange = vi.fn();