[DevTools] Add Play/Pause and Skip Controls to the Timeline #34620
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
the
React Core Team
sebmarkbage
force-pushed
the
playbutton
branch
from
ed18b6b to
f6e1fdb
Compare
sebmarkbage
commented
Sep 28, 2025
| // 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); |
There was a problem hiding this comment.
I also fixed this issue so that you can see everything in the last step and so that going from first to second step actually does something.
eps1lon
approved these changes
Sep 28, 2025
Allow rapid clicks
Pause it as soon as something is selected. If we restart at the end then loop around to the beginning.
This uses an effect event since we're not reacting to changes in the timeline after the timeline index has changed. Otherwise we'd infinite loop.
The first selection will be the root. We can't show anything suspended for that. The next one should be one step after that. This lets you see the final state by going to the end of the timeline.
sebmarkbage
force-pushed
the
playbutton
branch
from
a7c0c06 to
010bb76
Compare
sebmarkbage
added a commit
that referenced
this pull request
Sep 29, 2025
Stacked on #34620. This will let us use different color for different segments of the timeline. Since we're modeling discrete steps (sometimes just a couple), a scrubber with a handle that you have to move is quite annoying and misleading. Doesn't show you how many steps there are. Therefore I went with a design that highlights each segment as its own step and you can click to jump to a step. This is still backed by an input range for accessibility and keyboard controls. <img width="1213" height="434" alt="Screenshot 2025-09-27 at 4 50 21 PM" src="https://github.com/user-attachments/assets/2c81753d-1b66-4434-8b1d-0a163fa22ab3" /> <img width="1213" height="430" alt="Screenshot 2025-09-27 at 4 50 45 PM" src="https://github.com/user-attachments/assets/07983978-a8f6-46ed-8c51-6ec96487af66" /> https://github.com/user-attachments/assets/bc725f01-f0b5-40a8-bbb5-24cc4e84e86d
EugeneChoi4
pushed a commit
to EugeneChoi4/react
that referenced
this pull request
Sep 29, 2025
…#34620) Stacked on facebook#34625. This is a nice way to step through the timeline and simulate the visuals on screen as you do it. It's also convenient to step through one at a time, especially with the forwards button. However, the secondary purpose of this is that it helps anchor the UI visually as something like a timeline like in a video so that the timeline itself becomes more identifiable. https://github.com/user-attachments/assets/cb367c8e-9efb-4a00-a58e-4579be20beb8
EugeneChoi4
pushed a commit
to EugeneChoi4/react
that referenced
this pull request
Sep 29, 2025
Stacked on facebook#34620. This will let us use different color for different segments of the timeline. Since we're modeling discrete steps (sometimes just a couple), a scrubber with a handle that you have to move is quite annoying and misleading. Doesn't show you how many steps there are. Therefore I went with a design that highlights each segment as its own step and you can click to jump to a step. This is still backed by an input range for accessibility and keyboard controls. <img width="1213" height="434" alt="Screenshot 2025-09-27 at 4 50 21 PM" src="https://github.com/user-attachments/assets/2c81753d-1b66-4434-8b1d-0a163fa22ab3" /> <img width="1213" height="430" alt="Screenshot 2025-09-27 at 4 50 45 PM" src="https://github.com/user-attachments/assets/07983978-a8f6-46ed-8c51-6ec96487af66" /> https://github.com/user-attachments/assets/bc725f01-f0b5-40a8-bbb5-24cc4e84e86d
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Stacked on #34625.
This is a nice way to step through the timeline and simulate the visuals on screen as you do it. It's also convenient to step through one at a time, especially with the forwards button.
However, the secondary purpose of this is that it helps anchor the UI visually as something like a timeline like in a video so that the timeline itself becomes more identifiable.
playbutton.mov