Skip to content

[DevTools] More robust resize handling #34036

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

Conversation

eps1lon
Copy link
Collaborator

@eps1lon eps1lon commented Jul 29, 2025

Follow-up to #18046
Best reviewed without whitespace changes

Switches to Pointer Events for the resize handling in the Components tab. Pointer events are supported in all evergreen browsers and iOS 13. The main motivation is that this fixes a disorienting horizontal scroll when you resized.
It also fixes various other edge cases where you get stuck in resize mode even though you actually considered the interaction cancelled because pointers can actually escape the window without a pointerup.
With pointer capture we also get a consistent cursor even if you you quickly resize or move the cursor outside the window.

Before:

CleanShot.2025-07-29.at.11.00.30.mp4

After:

CleanShot.2025-07-29.at.11.12.17.mp4

I verified all interactions in the Chrome extension as well.

I included drive-by fixes which are also scrolling related:

  1. Disabled text selection of the tree
    You could only select the keys and entering text selection mode entered scroll mode which I found confusing
    Before:

    CleanShot.2025-07-29.at.11.06.03.mp4
  2. Prevent scroll+resize mode
    The resize bar overlapped with the Component tree scroll container. If you clicked right on the edge, you scrolled the tree while resized. I found that confusing and it's likely not intended. Otherwise we should fully overlap the bar and tree so that you don't have to aim at a 2px overlap.
    Before:

    CleanShot.2025-07-29.at.11.07.45.mp4
  3. Minimum width of left column to avoid double scrollbars
    Before:
    CleanShot 2025-07-29 at 11 02 06@2x
    After:

@github-actions github-actions bot added the React Core Team Opened by a member of the React Core Team label Jul 29, 2025
@eps1lon eps1lon force-pushed the sebbie/07-29-_devtools_more_robust_resize_handling branch 3 times, most recently from db75993 to 85ca13d Compare July 29, 2025 09:29
@react-sizebot
Copy link

react-sizebot commented Jul 29, 2025

Comparing: 9c9136b...0e2ec08

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.js = 6.68 kB 6.68 kB = 1.83 kB 1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 530.70 kB 530.70 kB = 93.70 kB 93.70 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.69 kB 6.69 kB = 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js = 655.25 kB 655.25 kB = 115.40 kB 115.40 kB
facebook-www/ReactDOM-prod.classic.js = 675.13 kB 675.13 kB = 118.75 kB 118.75 kB
facebook-www/ReactDOM-prod.modern.js = 665.56 kB 665.56 kB = 117.12 kB 117.11 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 0e2ec08

@eps1lon eps1lon requested a review from hoxyq July 29, 2025 09:43
@eps1lon eps1lon marked this pull request as ready for review July 29, 2025 09:43
Copy link
Contributor

@hoxyq hoxyq left a comment

Choose a reason for hiding this comment

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

Looks fantastic, thank you.

@eps1lon eps1lon force-pushed the sebbie/07-29-_devtools_more_robust_resize_handling branch from 85ca13d to f386a7f Compare July 29, 2025 15:25
@eps1lon eps1lon force-pushed the sebbie/07-29-_devtools_more_robust_resize_handling branch from f386a7f to 0e2ec08 Compare July 29, 2025 15:37
@eps1lon eps1lon merged commit b1cbb48 into facebook:main Jul 29, 2025
241 checks passed
@eps1lon eps1lon deleted the sebbie/07-29-_devtools_more_robust_resize_handling branch July 29, 2025 15:45
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.

4 participants