fix(ui): align tree visuals with VS Code

Author: EhabY

packages/ui/README.md

@@ -124,9 +124,24 @@ that mirror native sticky-scroll preferences must read
 `workbench.tree.stickyScrollMaxItemCount` in the extension host and send the
 values to the webview.
 
-The flat projection in `treeModel.ts` derives order, visibility, hierarchy, and
-type navigation from `nodes` and `expandedIds`; collapsed descendants do not
-render. The component is not virtualized.
+```mermaid
+flowchart LR
+  accTitle: Tree architecture
+  accDescr: Data and input flow through the pure Tree modules into the React and DOM adapter.
+
+  Props[Nodes and controlled props] --> Model[treeModel.ts]
+  Events[Pointer and keyboard events] --> Policy[treePolicy.ts]
+  Policy --> Commands[Tree commands]
+  Model --> Transition[treeTransition.ts]
+  Commands --> Transition
+  Transition --> Adapter[useTreeAdapter.ts]
+  Adapter --> Rows[Tree.tsx and TreeRow.tsx]
+  Adapter --> Sticky[StickyScroll.tsx]
+```
+
+The model, policy, and transitions stay pure. The adapter owns React and DOM
+integration. The flat visible model supports future windowing, but the Tree is
+not currently virtualized.
 
 Rows are 22px tall and keep the VS Code twistie gutter. For Explorer-style file
 trees whose branches have no icons, `variant="explorer"` aligns leaf icons with

packages/ui/src/components/Tree/Tree.css

@@ -3,6 +3,7 @@
 	--ui-tree-row-height: 22px;
 	width: 100%;
 	min-width: 0;
+	outline: 0;
 }
 
 .ui-tree-item {
@@ -27,13 +28,21 @@
 	top: 0;
 	z-index: 100;
 	height: 0;
+	outline: 0;
 }
 
 .ui-tree-sticky__rows {
 	position: absolute;
 	inset-inline: 0;
 	overflow: hidden;
-	box-shadow: var(--ui-tree-sticky-shadow) 0 6px 6px -6px;
+}
+
+.ui-tree-sticky__shadow {
+	position: absolute;
+	inset-inline: 0;
+	height: 3px;
+	box-shadow: var(--ui-tree-sticky-shadow) 0 6px 6px -6px inset;
+	pointer-events: none;
 }
 
 .ui-tree-sticky__rows > .ui-tree-item {

packages/ui/src/components/Tree/sticky/StickyScroll.tsx

@@ -72,6 +72,7 @@ export function StickyScroll({
 	const pinnedRows = state.ids
 		.map((id) => rowsById.get(id))
 		.filter((row) => row !== undefined);
+	const pinnedHeight = pinnedRows.length * ROW_HEIGHT_PX + state.pushOffset;
 	const [requestedIndex, setRequestedIndex] = useState(0);
 	const focusedIndex = Math.max(
 		0,
@@ -148,31 +149,35 @@ export function StickyScroll({
 			}}
 		>
 			{pinnedRows.length > 0 ? (
-				<div
-					className="ui-tree-sticky__rows"
-					style={{
-						height: pinnedRows.length * ROW_HEIGHT_PX + state.pushOffset,
-					}}
-				>
-					{pinnedRows.map((row, index) => (
-						<TreeRow
-							key={row.node.id}
-							row={row}
-							focused={index === focusedIndex}
-							actionsEnabled={index === focusedIndex && !row.node.disabled}
-							style={{
-								top:
-									index * ROW_HEIGHT_PX +
-									(index === pinnedRows.length - 1 ? state.pushOffset : 0),
-								zIndex: pinnedRows.length - index,
-							}}
-							onClick={(event, twistie) => {
-								if (!adapter.isSelectionGesture(event)) reveal(row, index);
-								adapter.onPointer(row, event, twistie, "sticky");
-							}}
-						/>
-					))}
-				</div>
+				<>
+					<div
+						className="ui-tree-sticky__rows"
+						style={{ height: pinnedHeight }}
+					>
+						{pinnedRows.map((row, index) => (
+							<TreeRow
+								key={row.node.id}
+								row={row}
+								focused={index === focusedIndex}
+								actionsEnabled={index === focusedIndex && !row.node.disabled}
+								style={{
+									top:
+										index * ROW_HEIGHT_PX +
+										(index === pinnedRows.length - 1 ? state.pushOffset : 0),
+									zIndex: pinnedRows.length - index,
+								}}
+								onClick={(event, twistie) => {
+									if (!adapter.isSelectionGesture(event)) reveal(row, index);
+									adapter.onPointer(row, event, twistie, "sticky");
+								}}
+							/>
+						))}
+					</div>
+					<div
+						className="ui-tree-sticky__shadow"
+						style={{ top: pinnedHeight }}
+					/>
+				</>
 			) : null}
 		</div>
 	);

packages/ui/src/vscode-parity.stories.tsx

@@ -9,6 +9,7 @@ import {
 	VscodeToolbarButton,
 } from "@vscode-elements/react-elements";
 import { useState } from "react";
+import { expect, waitFor } from "storybook/test";
 
 import { Button } from "./components/Button/Button";
 import {
@@ -184,11 +185,13 @@ const MenuParity = (): React.JSX.Element => (
 		style={{
 			display: "grid",
 			gridTemplateColumns: "220px 220px",
-			gap: "16px",
+			gap: "8px 16px",
 			alignItems: "start",
 			fontSize: "13px",
 		}}
 	>
+		<strong>Ours</strong>
+		<strong>VS Code Elements</strong>
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild>
 				<Button variant="secondary">Menu</Button>
@@ -230,5 +233,15 @@ export const Menu: Story = {
 	render: () => <MenuParity />,
 	play: async ({ canvasElement }) => {
 		await openMenu(canvasElement, "Menu");
+		const reference = canvasElement.querySelector("vscode-context-menu");
+		await expect(reference).not.toBeNull();
+		// Opening our portalled menu clicks outside the reference menu. Reopen
+		// it after that click so Pixel always captures both implementations.
+		reference?.setAttribute("show", "");
+		await waitFor(() =>
+			expect(
+				reference?.shadowRoot?.querySelector(".context-menu"),
+			).not.toBeNull(),
+		);
 	},
 };