[dev-overlay] do not close overlay when click indicator elements

[devjiwonchoi]

Why?

1. When clicking the indicator, since closing the overlay was mousedown, it had a blink of the overlay to be closed and then open again.
2. When the overlay is opened, clicking the indicator elements closes the overlay.

How?

1. Use mouseup and touchend event listeners to prevent hiding the overlay when clicking outside the overlay.
2. Added excludes array of attributes to exclude from click outside handler.

Before

CleanShot.2025-01-29.at.04.25.11.mp4

After

CleanShot.2025-01-29.at.04.23.37.mp4

Closes https://linear.app/vercel/issue/NDX-701/dont-close-overlay-when-on-click-indicator

[devjiwonchoi]

• [dev-overlay] do not close overlay when click indicator elements #75406 👈 (View in Graphite)
• [dev-overlay] fix: do not open error overlay when click indicator #75404
• [DevOverlay] Display Correct Number of Errors on Indicator #75395
• canary

This stack of pull requests is managed by Graphite. Learn more about stacking.

[ijjk]

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 01-29-_dev-overlay_do_not_close_overlay_when_click_indicator_elements	Change
buildDuration	29.5s	18.1s	N/A
buildDurationCached	17s	14.1s	N/A
nodeModulesSize	392 MB	392 MB	⚠️ +6.11 kB
nextStartRea..uration (ms)	476ms	484ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js 01-29-_dev-overlay_do_not_close_overlay_when_click_indicator_elements	Change
5306-HASH.js gzip	54 kB	53.9 kB	N/A
8276.HASH.js gzip	169 B	168 B	N/A
8377-HASH.js gzip	5.46 kB	5.46 kB	N/A
bccd1874-HASH.js gzip	52.9 kB	52.9 kB	✓
framework-HASH.js gzip	57.5 kB	57.5 kB	N/A
main-app-HASH.js gzip	240 B	242 B	N/A
main-HASH.js gzip	34.5 kB	34.4 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.71 kB	N/A
Overall change	52.9 kB	52.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 01-29-_dev-overlay_do_not_close_overlay_when_click_indicator_elements	Change
polyfills-HASH.js gzip	39.4 kB	39.4 kB	✓
Overall change	39.4 kB	39.4 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js 01-29-_dev-overlay_do_not_close_overlay_when_click_indicator_elements	Change
_app-HASH.js gzip	193 B	193 B	✓
_error-HASH.js gzip	193 B	193 B	✓
amp-HASH.js gzip	512 B	510 B	N/A
css-HASH.js gzip	343 B	342 B	N/A
dynamic-HASH.js gzip	1.84 kB	1.84 kB	✓
edge-ssr-HASH.js gzip	265 B	265 B	✓
head-HASH.js gzip	363 B	362 B	N/A
hooks-HASH.js gzip	393 B	392 B	N/A
image-HASH.js gzip	4.59 kB	4.58 kB	N/A
index-HASH.js gzip	268 B	268 B	✓
link-HASH.js gzip	2.35 kB	2.35 kB	N/A
routerDirect..HASH.js gzip	328 B	328 B	✓
script-HASH.js gzip	397 B	397 B	✓
withRouter-HASH.js gzip	323 B	326 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	3.59 kB	3.59 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js 01-29-_dev-overlay_do_not_close_overlay_when_click_indicator_elements	Change
_buildManifest.js gzip	748 B	747 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js 01-29-_dev-overlay_do_not_close_overlay_when_click_indicator_elements	Change
index.html gzip	523 B	523 B	✓
link.html gzip	537 B	538 B	N/A
withRouter.html gzip	518 B	519 B	N/A
Overall change	523 B	523 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js 01-29-_dev-overlay_do_not_close_overlay_when_click_indicator_elements	Change
edge-ssr.js gzip	129 kB	129 kB	N/A
page.js gzip	210 kB	210 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js 01-29-_dev-overlay_do_not_close_overlay_when_click_indicator_elements	Change
middleware-b..fest.js gzip	670 B	664 B	N/A
middleware-r..fest.js gzip	155 B	156 B	N/A
middleware.js gzip	31.3 kB	31.3 kB	N/A
edge-runtime..pack.js gzip	844 B	844 B	✓
Overall change	844 B	844 B	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js 01-29-_dev-overlay_do_not_close_overlay_when_click_indicator_elements	Change
app-page-exp...dev.js gzip	386 kB	386 kB	N/A
app-page-exp..prod.js gzip	131 kB	131 kB	✓
app-page-tur..prod.js gzip	144 kB	144 kB	✓
app-page-tur..prod.js gzip	140 kB	140 kB	✓
app-page.run...dev.js gzip	373 kB	373 kB	N/A
app-page.run..prod.js gzip	128 kB	128 kB	✓
app-route-ex...dev.js gzip	39.4 kB	39.4 kB	✓
app-route-ex..prod.js gzip	25 kB	25 kB	✓
app-route-tu..prod.js gzip	25 kB	25 kB	✓
app-route-tu..prod.js gzip	24.8 kB	24.8 kB	✓
app-route.ru...dev.js gzip	41 kB	41 kB	✓
app-route.ru..prod.js gzip	24.8 kB	24.8 kB	✓
dist_client_...dev.js gzip	326 B	326 B	✓
dist_client_...dev.js gzip	318 B	318 B	✓
pages-api-tu..prod.js gzip	8.81 kB	8.81 kB	✓
pages-api.ru...dev.js gzip	11.5 kB	11.5 kB	✓
pages-api.ru..prod.js gzip	8.8 kB	8.8 kB	✓
pages-turbo...prod.js gzip	21.6 kB	21.6 kB	✓
pages.runtim...dev.js gzip	31.3 kB	31.3 kB	N/A
pages.runtim..prod.js gzip	21.6 kB	21.6 kB	✓
server.runti..prod.js gzip	73.7 kB	73.7 kB	✓
Overall change	870 kB	870 kB	✓

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 01-29-_dev-overlay_do_not_close_overlay_when_click_indicator_elements	Change
0.pack gzip	2.1 MB	2.1 MB	⚠️ +1.5 kB
index.pack gzip	74.4 kB	76.4 kB	⚠️ +1.96 kB
Overall change	2.18 MB	2.18 MB	⚠️ +3.46 kB

Diff details

Diff for main-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js

failed to diff

Diff for app-page.runtime.dev.js

failed to diff

Diff for pages.runtime.dev.js

Diff too large to display

Commit: b420245

[gaojude]

Approve with nits