Skip to content
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.

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

[DevTools] feat[Tree]: set initial scroll offset when inspected element index is set #31968

Merged

Conversation

hoxyq
Copy link
Contributor

@hoxyq hoxyq commented Jan 3, 2025

Stacked on #31956. See commit on top.

Use initialScrollOffset prop for FixedSizeList from react-window. This happens when user selects an element in built-in Elements panel in DevTools, and then opens Components panel from React DevTools - elements will be synced and corresponding React Element will be pre-selected, we just have to scroll to its position now.

Copy link

vercel bot commented Jan 3, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-compiler-playground ❌ Failed (Inspect) Jan 7, 2025 2:03pm

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Jan 3, 2025
@hoxyq hoxyq force-pushed the react-devtools/set-initial-scroll-offset branch from cb831db to ecb8df4 Compare January 7, 2025 14:03
@hoxyq hoxyq marked this pull request as ready for review January 7, 2025 14:05
@hoxyq hoxyq force-pushed the react-devtools/set-initial-scroll-offset branch from ecb8df4 to 2d39c73 Compare January 9, 2025 18:15
@hoxyq hoxyq merged commit f2813ee into facebook:main Jan 9, 2025
186 checks passed
@hoxyq hoxyq deleted the react-devtools/set-initial-scroll-offset branch January 9, 2025 18:21
hoxyq added a commit that referenced this pull request Jan 9, 2025
Stacked on #31968. See commit on
top.

Fixes an issue with bank tree view, when we are scrolling to an item
while syncing user DOM selection. This should only have an effect on
browser extension. Added events with `extension` prefix will only be
emitted in browser extension implementation, for other implementations
`useExtensionComponentsPanelVisibility` will return constant `true`
value.

Before:


https://github.com/user-attachments/assets/82667c16-d495-4346-af0a-7ed22ff89cfc


After:


https://github.com/user-attachments/assets/a5d223fd-0328-44f0-af68-5c3863f1efee
github-actions bot pushed a commit to code/lib-react that referenced this pull request Jan 9, 2025
…nt index is set (facebook#31968)

Stacked on facebook#31956. See [commit on
top](facebook@ecb8df4).

Use `initialScrollOffset` prop for `FixedSizeList` from `react-window`.
This happens when user selects an element in built-in Elements panel in
DevTools, and then opens Components panel from React DevTools - elements
will be synced and corresponding React Element will be pre-selected, we
just have to scroll to its position now.

DiffTrain build for [f2813ee](facebook@f2813ee)
github-actions bot pushed a commit to code/lib-react that referenced this pull request Jan 9, 2025
…nt index is set (facebook#31968)

Stacked on facebook#31956. See [commit on
top](facebook@ecb8df4).

Use `initialScrollOffset` prop for `FixedSizeList` from `react-window`.
This happens when user selects an element in built-in Elements panel in
DevTools, and then opens Components panel from React DevTools - elements
will be synced and corresponding React Element will be pre-selected, we
just have to scroll to its position now.

DiffTrain build for [f2813ee](facebook@f2813ee)
hoxyq added a commit that referenced this pull request Jan 16, 2025
List of changes in this release:

* fix[DevTools]: fix HostComponent naming in filters for Native
([hoxyq](https://github.com/hoxyq) in
[#32086](#32086))
* Fix copy functionality in Firefox ([V3RON](https://github.com/V3RON)
in [#32077](#32077))
* chore[DevTools]: don't use batchedUpdate
([hoxyq](https://github.com/hoxyq) in
[#32074](#32074))
* Prevent crash when starting consecutive profiling sessions
([V3RON](https://github.com/V3RON) in
[#32066](#32066))
* fix[DevTools/Tree]: only scroll to item when panel is visible
([hoxyq](https://github.com/hoxyq) in
[#32018](#32018))
* feat[Tree]: set initial scroll offset when inspected element index is
set ([hoxyq](https://github.com/hoxyq) in
[#31968](#31968))
* DevTools: merge element fields in TreeStateContext
([hoxyq](https://github.com/hoxyq) in
[#31956](#31956))
* DevTools: fix initial host instance selection
([hoxyq](https://github.com/hoxyq) in
[#31892](#31892))
* chore[DevTools/Tree]: don't pre-select root element and remove unused
code ([hoxyq](https://github.com/hoxyq) in
[#32015](#32015))
* chore[DevTools/TraceUpdates]: display names by default
([hoxyq](https://github.com/hoxyq) in
[#32019](#32019))
* Add ViewTransitionComponent to Stacks and DevTools
([sebmarkbage](https://github.com/sebmarkbage) in
[#32034](#32034))
* Add <ViewTransition> Component
([sebmarkbage](https://github.com/sebmarkbage) in
[#31975](#31975))
* chore[react-devtools-shell]: disable warnings in dev server overlay
([hoxyq](https://github.com/hoxyq) in
[#32005](#32005))
* DevTools: fork FastRefresh test for <18 versions of React
([hoxyq](https://github.com/hoxyq) in
[#31893](#31893))
* Show component names while highlighting renders
([piotrski](https://github.com/piotrski) in
[#31577](#31577))
* allow non-coercible objects in formatConsoleArgumentsToSingleString
([henryqdineen](https://github.com/henryqdineen) in
[#31444](#31444))
* Remove enableRefAsProp feature flag
([kassens](https://github.com/kassens) in
[#30346](#30346))
* [flow] Eliminate usage of more than 1-arg `React.AbstractComponent` in
React codebase ([SamChou19815](https://github.com/SamChou19815) in
[#31314](#31314))
* Audit try/finally around console patching
([sebmarkbage](https://github.com/sebmarkbage) in
[#31286](#31286))
* tests[react-devtools]: added tests for Compiler integration
([hoxyq](https://github.com/hoxyq) in
[#31241](#31241))
* Add Bridge types for Fusebox
([EdmondChuiHW](https://github.com/EdmondChuiHW) in
[#31274](#31274))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants