Skip to content

[DevTools] Separate breadcrumbs with » #35705

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
eps1lon merged 4 commits into from
Feb 5, 2026
+110 −78
Merged

[DevTools] Separate breadcrumbs with » #35705

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d069652
explicit ternary
eps1lon Feb 5, 2026
268b245
Outline flat list UI
eps1lon Feb 5, 2026
b52380c
Decouple flatlist measurement from children hierarchy
eps1lon Feb 5, 2026
dec687f
[DevTools] Separate breadcrumbs with `»`
eps1lon Feb 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,14 @@
overflow-x: auto;
}

.OwnerStackFlatListContainer {
display: inline-flex;
}

.OwnerStackFlatListSeparator {
user-select: none;
}

.VRule {
flex: 0 0 auto;
height: 20px;
Expand Down
88 changes: 56 additions & 32 deletions packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,54 @@ function dialogReducer(state: State, action: Action) {
}
}

type OwnerStackFlatListProps = {
owners: Array<SerializedElement>,
selectedIndex: number,
selectOwner: SelectOwner,
setElementsTotalWidth: (width: number) => void,
};

function OwnerStackFlatList({
owners,
selectedIndex,
selectOwner,
setElementsTotalWidth,
}: OwnerStackFlatListProps): React.Node {
const containerRef = useRef<HTMLDivElement | null>(null);
useLayoutEffect(() => {
const container = containerRef.current;
if (container === null) {
return;
}

const ResizeObserver = container.ownerDocument.defaultView.ResizeObserver;
const observer = new ResizeObserver(entries => {
const entry = entries[0];
setElementsTotalWidth(entry.contentRect.width);
});

observer.observe(container);
return observer.disconnect.bind(observer);
}, []);

return (
<div className={styles.OwnerStackFlatListContainer} ref={containerRef}>
{owners.map((owner, index) => (
<Fragment key={index}>
<ElementView
owner={owner}
isSelected={index === selectedIndex}
selectOwner={selectOwner}
/>
{index < owners.length - 1 && (
<span className={styles.OwnerStackFlatListSeparator}>»</span>
)}
</Fragment>
))}
</div>
);
}

export default function OwnerStack(): React.Node {
const read = useContext(OwnersListContext);
const {ownerID} = useContext(TreeStateContext);
Expand Down Expand Up @@ -135,32 +183,10 @@ export default function OwnerStack(): React.Node {

const selectedOwner = owners[selectedIndex];

useLayoutEffect(() => {
// If we're already overflowing, then we don't need to re-measure items.
// That's because once the owners stack is open, it can only get larger (by drilling in).
// A totally new stack can only be reached by exiting this mode and re-entering it.
if (elementsBarRef.current === null || isOverflowing) {
Comment on lines -139 to -142
Copy link
Collaborator Author

@eps1lon eps1lon Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need the isOverflow check anymore since we don't have the resize observe connected when we're overlfow.

return () => {};
}

let totalWidth = 0;
for (let i = 0; i < owners.length; i++) {
const element = elementsBarRef.current.children[i];
const computedStyle = getComputedStyle(element);

totalWidth +=
element.offsetWidth +
parseInt(computedStyle.marginLeft, 10) +
parseInt(computedStyle.marginRight, 10);
}

setElementsTotalWidth(totalWidth);
}, [elementsBarRef, isOverflowing, owners.length]);

return (
<div className={styles.OwnerStack}>
<div className={styles.Bar} ref={elementsBarRef}>
{isOverflowing && (
{isOverflowing ? (
<Fragment>
<ElementsDropdown
owners={owners}
Expand All @@ -180,16 +206,14 @@ export default function OwnerStack(): React.Node {
/>
)}
</Fragment>
) : (
<OwnerStackFlatList
owners={owners}
selectedIndex={selectedIndex}
selectOwner={selectOwner}
setElementsTotalWidth={setElementsTotalWidth}
/>
)}
{!isOverflowing &&
owners.map((owner, index) => (
<ElementView
key={index}
owner={owner}
isSelected={index === selectedIndex}
selectOwner={selectOwner}
/>
))}
</div>
<div className={styles.VRule} />
<Button onClick={() => selectOwner(null)} title="Back to tree view">
Expand Down
4 changes: 4 additions & 0 deletions packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@
display: inline;
}

.SuspenseBreadcrumbsListItemSeparator {
user-select: none;
}

.SuspenseBreadcrumbsListItem[aria-current="true"] .SuspenseBreadcrumbsButton {
color: var(--color-button-active);
}
Expand Down
88 changes: 42 additions & 46 deletions packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import type {SuspenseNode} from 'react-devtools-shared/src/frontend/types';
import typeof {SyntheticMouseEvent} from 'react-dom-bindings/src/events/SyntheticEvent';

import * as React from 'react';
import {useContext, useLayoutEffect, useRef, useState} from 'react';
import {Fragment, useContext, useLayoutEffect, useRef, useState} from 'react';
import Button from '../Button';
import ButtonIcon from '../ButtonIcon';
import Tooltip from '../Components/reach-ui/tooltip';
Expand Down Expand Up @@ -40,20 +40,40 @@ type SuspenseBreadcrumbsFlatListProps = {
scrollIntoView?: boolean,
) => void,
onItemPointerLeave: (event: SyntheticMouseEvent) => void,
setElementsTotalWidth: (width: number) => void,
};

function SuspenseBreadcrumbsFlatList({
onItemClick,
onItemPointerEnter,
onItemPointerLeave,
setElementsTotalWidth,
}: SuspenseBreadcrumbsFlatListProps): React$Node {
const store = useContext(StoreContext);
const {activityID} = useContext(TreeStateContext);
const {selectedSuspenseID, lineage, roots} = useContext(
SuspenseTreeStateContext,
);

const containerRef = useRef<HTMLDivElement | null>(null);
useLayoutEffect(() => {
const container = containerRef.current;
if (container === null) {
return;
}

const ResizeObserver = container.ownerDocument.defaultView.ResizeObserver;
const observer = new ResizeObserver(entries => {
const entry = entries[0];
setElementsTotalWidth(entry.contentRect.width);
});

observer.observe(container);
return observer.disconnect.bind(observer);
}, []);

return (
<ol className={styles.SuspenseBreadcrumbsList}>
<ol className={styles.SuspenseBreadcrumbsList} ref={containerRef}>
{lineage === null ? null : lineage.length === 0 ? (
// We selected the root. This means that we're currently viewing the Transition
// that rendered the whole screen. In laymans terms this is really "Initial Paint" .
Expand All @@ -79,19 +99,25 @@ function SuspenseBreadcrumbsFlatList({
const node = store.getSuspenseByID(id);

return (
<li
key={id}
className={styles.SuspenseBreadcrumbsListItem}
aria-current={selectedSuspenseID === id}
onPointerEnter={onItemPointerEnter.bind(null, id, false)}
onPointerLeave={onItemPointerLeave}>
<button
className={styles.SuspenseBreadcrumbsButton}
onClick={onItemClick.bind(null, id)}
type="button">
{node === null ? 'Unknown' : node.name || 'Unknown'}
</button>
</li>
<Fragment key={id}>
<li
className={styles.SuspenseBreadcrumbsListItem}
aria-current={selectedSuspenseID === id}
onPointerEnter={onItemPointerEnter.bind(null, id, false)}
onPointerLeave={onItemPointerLeave}>
<button
className={styles.SuspenseBreadcrumbsButton}
onClick={onItemClick.bind(null, id)}
type="button">
{node === null ? 'Unknown' : node.name || 'Unknown'}
</button>
</li>
{index < lineage.length - 1 && (
<span className={styles.SuspenseBreadcrumbsListItemSeparator}>
»
</span>
)}
</Fragment>
);
})
)}
Expand Down Expand Up @@ -271,37 +297,6 @@ export default function SuspenseBreadcrumbs(): React$Node {
const containerRef = useRef<HTMLDivElement | null>(null);
const isOverflowing = useIsOverflowing(containerRef, elementsTotalWidth);

useLayoutEffect(() => {
const container = containerRef.current;

if (
container === null ||
// We want to measure the size of the flat list only when it's being used.
isOverflowing
) {
return;
}

const ResizeObserver = container.ownerDocument.defaultView.ResizeObserver;
const observer = new ResizeObserver(() => {
let totalWidth = 0;
for (let i = 0; i < container.children.length; i++) {
const element = container.children[i];
const computedStyle = getComputedStyle(element);

totalWidth +=
element.offsetWidth +
parseInt(computedStyle.marginLeft, 10) +
parseInt(computedStyle.marginRight, 10);
}
setElementsTotalWidth(totalWidth);
});

observer.observe(container);

return observer.disconnect.bind(observer);
}, [containerRef, isOverflowing]);

return (
<div className={styles.SuspenseBreadcrumbsContainer} ref={containerRef}>
{isOverflowing ? (
Expand All @@ -315,6 +310,7 @@ export default function SuspenseBreadcrumbs(): React$Node {
onItemClick={handleClick}
onItemPointerEnter={highlightHostInstance}
onItemPointerLeave={clearHighlightHostInstance}
setElementsTotalWidth={setElementsTotalWidth}
/>
)}
</div>
Expand Down
Loading