- {treeListDisabled ? null : (
-
-
-
- )}
- {treeListDisabled ? null : (
-
+
+
+
+ {treeListDisabled ? null : (
-
- )}
-
-
-
-
-
-
+ className={styles.ResizeBarWrapper}
+ hidden={inspectedElementHidden}>
+
+
+
+
+
+
+
+
+
);
}
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.css
index 33441bcf34c00..77bb01c5fa32b 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.css
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.css
@@ -1,5 +1,4 @@
.SuspenseTimelineContainer {
- width: 100%;
display: flex;
flex-direction: row;
padding: 0.25rem;
@@ -10,11 +9,6 @@
display: flex;
flex-direction: column;
flex-grow: 1;
- /*
- * `overflow: auto` will add scrollbars but the input will not actually grow beyond visible content.
- * `overflow: hidden` will constrain the input to its visible content.
- */
- overflow: hidden;
}
.SuspenseTimelineRootSwitcher {
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
index 51b2b9e9a065a..d618bfcea63b3 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
@@ -8,7 +8,7 @@
*/
import * as React from 'react';
-import {useContext, useLayoutEffect, useRef} from 'react';
+import {useContext, useEffect} from 'react';
import {BridgeContext, StoreContext} from '../context';
import {TreeDispatcherContext} from '../Components/TreeContext';
import {useHighlightHostInstance} from '../hooks';
@@ -17,10 +17,9 @@ import {
SuspenseTreeStateContext,
} from './SuspenseTreeContext';
import styles from './SuspenseTimeline.css';
-import typeof {
- SyntheticEvent,
- SyntheticPointerEvent,
-} from 'react-dom-bindings/src/events/SyntheticEvent';
+import SuspenseScrubber from './SuspenseScrubber';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
function SuspenseTimelineInput() {
const bridge = useContext(BridgeContext);
@@ -34,31 +33,9 @@ function SuspenseTimelineInput() {
selectedRootID: rootID,
timeline,
timelineIndex,
+ playing,
} = useContext(SuspenseTreeStateContext);
- const inputRef = useRef
(null);
- const inputBBox = useRef(null);
- useLayoutEffect(() => {
- if (timeline.length === 0) {
- return;
- }
-
- const input = inputRef.current;
- if (input === null) {
- throw new Error('Expected an input HTML element to be present.');
- }
-
- inputBBox.current = input.getBoundingClientRect();
- const observer = new ResizeObserver(entries => {
- inputBBox.current = input.getBoundingClientRect();
- });
- observer.observe(input);
- return () => {
- inputBBox.current = null;
- observer.disconnect();
- };
- }, [timeline.length]);
-
const min = 0;
const max = timeline.length > 0 ? timeline.length - 1 : 0;
@@ -97,7 +74,65 @@ function SuspenseTimelineInput() {
});
}
- function handleChange(event: SyntheticEvent) {
+ function handleChange(pendingTimelineIndex: number) {
+ switchSuspenseNode(pendingTimelineIndex);
+ }
+
+ function handleBlur() {
+ clearHighlightHostInstance();
+ }
+
+ function handleFocus() {
+ switchSuspenseNode(timelineIndex);
+ }
+
+ function handleHoverSegment(hoveredValue: number) {
+ const suspenseID = timeline[hoveredValue];
+ if (suspenseID === undefined) {
+ throw new Error(
+ `Suspense node not found for value ${hoveredValue} in timeline.`,
+ );
+ }
+ highlightHostInstance(suspenseID);
+ }
+
+ function skipPrevious() {
+ const nextSelectedSuspenseID = timeline[timelineIndex - 1];
+ highlightHostInstance(nextSelectedSuspenseID);
+ treeDispatch({
+ type: 'SELECT_ELEMENT_BY_ID',
+ payload: nextSelectedSuspenseID,
+ });
+ suspenseTreeDispatch({
+ type: 'SUSPENSE_SKIP_TIMELINE_INDEX',
+ payload: false,
+ });
+ }
+
+ function skipForward() {
+ const nextSelectedSuspenseID = timeline[timelineIndex + 1];
+ highlightHostInstance(nextSelectedSuspenseID);
+ treeDispatch({
+ type: 'SELECT_ELEMENT_BY_ID',
+ payload: nextSelectedSuspenseID,
+ });
+ suspenseTreeDispatch({
+ type: 'SUSPENSE_SKIP_TIMELINE_INDEX',
+ payload: true,
+ });
+ }
+
+ function togglePlaying() {
+ suspenseTreeDispatch({
+ type: 'SUSPENSE_PLAY_PAUSE',
+ payload: 'toggle',
+ });
+ }
+
+ // TODO: useEffectEvent here once it's supported in all versions DevTools supports.
+ // For now we just exclude it from deps since we don't lint those anyway.
+ function changeTimelineIndex(newIndex: number) {
+ // Synchronize timeline index with what is resuspended.
if (rootID === null) {
return;
}
@@ -108,67 +143,70 @@ function SuspenseTimelineInput() {
);
return;
}
-
- const pendingTimelineIndex = +event.currentTarget.value;
- const suspendedSet = timeline.slice(pendingTimelineIndex);
-
+ // We suspend everything after the current selection. The root isn't showing
+ // anything suspended in the root. The step after that should have one less
+ // thing suspended. I.e. the first suspense boundary should be unsuspended
+ // when it's selected. This also lets you show everything in the last step.
+ const suspendedSet = timeline.slice(timelineIndex + 1);
bridge.send('overrideSuspenseMilestone', {
rendererID,
rootID,
suspendedSet,
});
-
- switchSuspenseNode(pendingTimelineIndex);
- }
-
- function handleBlur() {
- clearHighlightHostInstance();
}
- function handleFocus() {
- switchSuspenseNode(timelineIndex);
- }
-
- function handlePointerMove(event: SyntheticPointerEvent) {
- const bbox = inputBBox.current;
- if (bbox === null) {
- throw new Error('Bounding box of slider is unknown.');
- }
+ useEffect(() => {
+ changeTimelineIndex(timelineIndex);
+ }, [timelineIndex]);
- const hoveredValue = Math.max(
- min,
- Math.min(
- Math.round(
- min + ((event.clientX - bbox.left) / bbox.width) * (max - min),
- ),
- max,
- ),
- );
- const suspenseID = timeline[hoveredValue];
- if (suspenseID === undefined) {
- throw new Error(
- `Suspense node not found for value ${hoveredValue} in timeline when on ${event.clientX} in bounding box ${JSON.stringify(bbox)}.`,
- );
+ useEffect(() => {
+ if (!playing) {
+ return undefined;
}
- highlightHostInstance(suspenseID);
- }
+ // While playing, advance one step every second.
+ const PLAY_SPEED_INTERVAL = 1000;
+ const timer = setInterval(() => {
+ suspenseTreeDispatch({
+ type: 'SUSPENSE_PLAY_TICK',
+ });
+ }, PLAY_SPEED_INTERVAL);
+ return () => {
+ clearInterval(timer);
+ };
+ }, [playing]);
return (
<>
- {timelineIndex}/{max}
-
-
+
+
+
+
+
+
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js
index 3f0c5fd41ae2b..d97b88952e5ae 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js
@@ -32,6 +32,7 @@ export type SuspenseTreeState = {
timeline: $ReadOnlyArray
,
timelineIndex: number | -1,
uniqueSuspendersOnly: boolean,
+ playing: boolean,
};
type ACTION_SUSPENSE_TREE_MUTATION = {
@@ -60,12 +61,27 @@ type ACTION_SUSPENSE_SET_TIMELINE_INDEX = {
type: 'SUSPENSE_SET_TIMELINE_INDEX',
payload: number,
};
+type ACTION_SUSPENSE_SKIP_TIMELINE_INDEX = {
+ type: 'SUSPENSE_SKIP_TIMELINE_INDEX',
+ payload: boolean,
+};
+type ACTION_SUSPENSE_PLAY_PAUSE = {
+ type: 'SUSPENSE_PLAY_PAUSE',
+ payload: 'toggle' | 'play' | 'pause',
+};
+type ACTION_SUSPENSE_PLAY_TICK = {
+ type: 'SUSPENSE_PLAY_TICK',
+};
+
export type SuspenseTreeAction =
| ACTION_SUSPENSE_TREE_MUTATION
| ACTION_SET_SUSPENSE_LINEAGE
| ACTION_SELECT_SUSPENSE_BY_ID
| ACTION_SET_SUSPENSE_TIMELINE
- | ACTION_SUSPENSE_SET_TIMELINE_INDEX;
+ | ACTION_SUSPENSE_SET_TIMELINE_INDEX
+ | ACTION_SUSPENSE_SKIP_TIMELINE_INDEX
+ | ACTION_SUSPENSE_PLAY_PAUSE
+ | ACTION_SUSPENSE_PLAY_TICK;
export type SuspenseTreeDispatch = (action: SuspenseTreeAction) => void;
const SuspenseTreeStateContext: ReactContext =
@@ -107,6 +123,7 @@ function getInitialState(store: Store): SuspenseTreeState {
timeline: [],
timelineIndex: -1,
uniqueSuspendersOnly,
+ playing: false,
};
} else {
const timeline = store.getSuspendableDocumentOrderSuspense(
@@ -128,6 +145,7 @@ function getInitialState(store: Store): SuspenseTreeState {
timeline,
timelineIndex,
uniqueSuspendersOnly,
+ playing: false,
};
}
@@ -234,6 +252,7 @@ function SuspenseTreeContextController({children}: Props): React.Node {
...state,
selectedSuspenseID,
selectedRootID,
+ playing: false, // pause
};
}
case 'SET_SUSPENSE_LINEAGE': {
@@ -247,6 +266,7 @@ function SuspenseTreeContextController({children}: Props): React.Node {
lineage,
selectedSuspenseID: suspenseID,
selectedRootID,
+ playing: false, // pause
};
}
case 'SET_SUSPENSE_TIMELINE': {
@@ -302,6 +322,79 @@ function SuspenseTreeContextController({children}: Props): React.Node {
lineage: nextLineage,
selectedSuspenseID: nextSelectedSuspenseID,
timelineIndex: nextTimelineIndex,
+ playing: false, // pause
+ };
+ }
+ case 'SUSPENSE_SKIP_TIMELINE_INDEX': {
+ const direction = action.payload;
+ const nextTimelineIndex =
+ state.timelineIndex + (direction ? 1 : -1);
+ if (
+ nextTimelineIndex < 0 ||
+ nextTimelineIndex > state.timeline.length - 1
+ ) {
+ return state;
+ }
+ const nextSelectedSuspenseID = state.timeline[nextTimelineIndex];
+ const nextLineage = store.getSuspenseLineage(
+ nextSelectedSuspenseID,
+ );
+ return {
+ ...state,
+ lineage: nextLineage,
+ selectedSuspenseID: nextSelectedSuspenseID,
+ timelineIndex: nextTimelineIndex,
+ playing: false, // pause
+ };
+ }
+ case 'SUSPENSE_PLAY_PAUSE': {
+ const mode = action.payload;
+
+ let nextTimelineIndex = state.timelineIndex;
+ let nextSelectedSuspenseID = state.selectedSuspenseID;
+ let nextLineage = state.lineage;
+
+ if (
+ !state.playing &&
+ mode !== 'pause' &&
+ nextTimelineIndex === state.timeline.length - 1
+ ) {
+ // If we're restarting at the end. Then loop around and start again from the beginning.
+ nextTimelineIndex = 0;
+ nextSelectedSuspenseID = state.timeline[nextTimelineIndex];
+ nextLineage = store.getSuspenseLineage(nextSelectedSuspenseID);
+ }
+
+ return {
+ ...state,
+ lineage: nextLineage,
+ selectedSuspenseID: nextSelectedSuspenseID,
+ timelineIndex: nextTimelineIndex,
+ playing: mode === 'toggle' ? !state.playing : mode === 'play',
+ };
+ }
+ case 'SUSPENSE_PLAY_TICK': {
+ if (!state.playing) {
+ // We stopped but haven't yet cleaned up the callback. Noop.
+ return state;
+ }
+ // Advance time
+ const nextTimelineIndex = state.timelineIndex + 1;
+ if (nextTimelineIndex > state.timeline.length - 1) {
+ return state;
+ }
+ const nextSelectedSuspenseID = state.timeline[nextTimelineIndex];
+ const nextLineage = store.getSuspenseLineage(
+ nextSelectedSuspenseID,
+ );
+ // Stop once we reach the end.
+ const nextPlaying = nextTimelineIndex < state.timeline.length - 1;
+ return {
+ ...state,
+ lineage: nextLineage,
+ selectedSuspenseID: nextSelectedSuspenseID,
+ timelineIndex: nextTimelineIndex,
+ playing: nextPlaying,
};
}
default: