[DevTools] Don't highlight on timeline (#34861)
I find it very frustrating that the highlight covers up the content that I'm trying to review when stepping through the timeline. It also triggered on keyboard navigation due to the focus which was annoying. We could highlight something in the rects instead potentially.
Sebastian Markbåge committed
Oct 15, 2025 at 13:43 UTC
0fbb9b368393a85c728806e16630712bdafdd6b1
2 files changed
+6
-19
packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.js
+2
-2
@@ -31,9 +31,9 @@ export default function SuspenseScrubber({
31
max: number,
32
value: number,
33
highlight: number,
34
- onBlur: () => void,
34
+ onBlur?: () => void,
35
onChange: (index: number) => void,
36
- onFocus: () => void,
36
+ onFocus?: () => void,
37
onHoverSegment: (index: number) => void,
38
onHoverLeave: () => void,
39
}): React$Node {
packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
+4
-17
@@ -11,7 +11,7 @@ import * as React from 'react';
11
import {useContext, useEffect} from 'react';
12
import {BridgeContext} from '../context';
13
import {TreeDispatcherContext} from '../Components/TreeContext';
14
-import {useHighlightHostInstance, useScrollToHostInstance} from '../hooks';
14
+import {useScrollToHostInstance} from '../hooks';
15
import {
16
SuspenseTreeDispatcherContext,
17
SuspenseTreeStateContext,
@@ -25,8 +25,6 @@ function SuspenseTimelineInput() {
25
const bridge = useContext(BridgeContext);
26
const treeDispatch = useContext(TreeDispatcherContext);
27
const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext);
28
- const {highlightHostInstance, clearHighlightHostInstance} =
29
- useHighlightHostInstance();
28
const scrollToHostInstance = useScrollToHostInstance();
29
30
const {timeline, timelineIndex, hoveredTimelineIndex, playing, autoScroll} =
@@ -37,7 +35,6 @@ function SuspenseTimelineInput() {
35
36
function switchSuspenseNode(nextTimelineIndex: number) {
37
const nextSelectedSuspenseID = timeline[nextTimelineIndex];
40
- highlightHostInstance(nextSelectedSuspenseID);
38
treeDispatch({
39
type: 'SELECT_ELEMENT_BY_ID',
40
payload: nextSelectedSuspenseID,
@@ -52,23 +49,14 @@ function SuspenseTimelineInput() {
49
switchSuspenseNode(pendingTimelineIndex);
50
}
51
55
- function handleBlur() {
56
- clearHighlightHostInstance();
57
- }
58
-
52
function handleFocus() {
53
switchSuspenseNode(timelineIndex);
54
}
55
56
function handleHoverSegment(hoveredValue: number) {
64
- const suspenseID = timeline[hoveredValue];
65
- if (suspenseID === undefined) {
66
- throw new Error(
67
- `Suspense node not found for value ${hoveredValue} in timeline.`,
68
- );
69
- }
70
- highlightHostInstance(suspenseID);
57
+ // TODO: Consider highlighting the rect instead.
58
}
59
+ function handleUnhoverSegment() {}
60
61
function skipPrevious() {
62
const nextSelectedSuspenseID = timeline[timelineIndex - 1];
@@ -180,11 +168,10 @@ function SuspenseTimelineInput() {
168
max={max}
169
value={timelineIndex}
170
highlight={hoveredTimelineIndex}
183
- onBlur={handleBlur}
171
onChange={handleChange}
172
onFocus={handleFocus}
173
onHoverSegment={handleHoverSegment}
187
- onHoverLeave={clearHighlightHostInstance}
174
+ onHoverLeave={handleUnhoverSegment}
175
/>
176
</div>
177
</>