[DevOverlay] Add Toolbar #74555

devjiwonchoi · 2025-01-06T16:11:45Z

This PR added style for Toolbar buttons, and moved files to Errors/error-overlay-toolbar.

Will follow up with TBD:

Replace the Node.js button with the "Debugging" Icon
Add Docs Button?

Light

Dark

Closes NDX-601
Closes NDX-602

devjiwonchoi · 2025-01-06T16:12:09Z

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

ijjk · 2025-01-06T16:20:47Z

Tests Passed

ijjk · 2025-01-06T16:23:53Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 01-07-_devoverlay_add_tool_buttons	Change
buildDuration	23.6s	21.4s	N/A
buildDurationCached	20s	17.3s	N/A
nodeModulesSize	417 MB	417 MB	⚠️ +66.3 kB
nextStartRea..uration (ms)	549ms	536ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js 01-07-_devoverlay_add_tool_buttons	Change
1187-HASH.js gzip	52.6 kB	52.6 kB	N/A
8276.HASH.js gzip	169 B	168 B	N/A
8377-HASH.js gzip	5.44 kB	5.44 kB	N/A
bccd1874-HASH.js gzip	52.9 kB	52.9 kB	N/A
framework-HASH.js gzip	57.5 kB	57.5 kB	N/A
main-app-HASH.js gzip	232 B	236 B	N/A
main-HASH.js gzip	34.1 kB	34.1 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.71 kB	N/A
Overall change	0 B	0 B	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 01-07-_devoverlay_add_tool_buttons	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-07-_devoverlay_add_tool_buttons	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.57 kB	4.57 kB	N/A
index-HASH.js gzip	268 B	268 B	✓
link-HASH.js gzip	2.35 kB	2.34 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-07-_devoverlay_add_tool_buttons	Change
_buildManifest.js gzip	749 B	747 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js 01-07-_devoverlay_add_tool_buttons	Change
index.html gzip	524 B	522 B	N/A
link.html gzip	539 B	536 B	N/A
withRouter.html gzip	520 B	519 B	N/A
Overall change	0 B	0 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js 01-07-_devoverlay_add_tool_buttons	Change
edge-ssr.js gzip	128 kB	128 kB	N/A
page.js gzip	206 kB	206 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js 01-07-_devoverlay_add_tool_buttons	Change
middleware-b..fest.js gzip	671 B	667 B	N/A
middleware-r..fest.js gzip	155 B	156 B	N/A
middleware.js gzip	31.2 kB	31.2 kB	N/A
edge-runtime..pack.js gzip	844 B	844 B	✓
Overall change	844 B	844 B	✓

Next Runtimes Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 01-07-_devoverlay_add_tool_buttons	Change
274-experime...dev.js gzip	322 B	322 B	✓
274.runtime.dev.js gzip	314 B	314 B	✓
app-page-exp...dev.js gzip	363 kB	364 kB	⚠️ +300 B
app-page-exp..prod.js gzip	129 kB	129 kB	✓
app-page-tur..prod.js gzip	142 kB	142 kB	✓
app-page-tur..prod.js gzip	138 kB	138 kB	✓
app-page.run...dev.js gzip	352 kB	352 kB	⚠️ +285 B
app-page.run..prod.js gzip	125 kB	125 kB	✓
app-route-ex...dev.js gzip	37.5 kB	37.5 kB	✓
app-route-ex..prod.js gzip	25.5 kB	25.5 kB	✓
app-route-tu..prod.js gzip	25.5 kB	25.5 kB	✓
app-route-tu..prod.js gzip	25.4 kB	25.4 kB	✓
app-route.ru...dev.js gzip	39.2 kB	39.2 kB	✓
app-route.ru..prod.js gzip	25.4 kB	25.4 kB	✓
pages-api-tu..prod.js gzip	9.69 kB	9.69 kB	✓
pages-api.ru...dev.js gzip	11.6 kB	11.6 kB	✓
pages-api.ru..prod.js gzip	9.68 kB	9.68 kB	✓
pages-turbo...prod.js gzip	21.7 kB	21.7 kB	✓
pages.runtim...dev.js gzip	27.5 kB	27.5 kB	✓
pages.runtim..prod.js gzip	21.7 kB	21.7 kB	✓
server.runti..prod.js gzip	916 kB	916 kB	✓
Overall change	2.45 MB	2.45 MB	⚠️ +585 B

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 01-07-_devoverlay_add_tool_buttons	Change
0.pack gzip	2.08 MB	2.08 MB	⚠️ +1.42 kB
index.pack gzip	74.6 kB	75.1 kB	⚠️ +560 B
Overall change	2.16 MB	2.16 MB	⚠️ +1.98 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

Commit: e05f918

...ts/react-dev-overlay/_experimental/internal/components/ToolButtonsGroup/ToolButtonsGroup.tsx

huozhi · 2025-01-06T17:40:37Z

...ts/react-dev-overlay/_experimental/internal/components/ToolButtonsGroup/ToolButtonsGroup.tsx

@@ -9,7 +10,7 @@ type ToolButtonsGroupProps = {

 export function ToolButtonsGroup({ error, debugInfo }: ToolButtonsGroupProps) {
  return (
-    <span>
+    <span className="tool-buttons-group">


we could name it as "utility button", feels more intuitive

Sounds good, one more idea: how about "ErrorOverlayToolbar"?

yea that works, I was only thinking the class name should be renamed. can follow up others later

ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Jan 6, 2025

devjiwonchoi mentioned this pull request Jan 6, 2025

[DevOverlay] Add error message #74541

Merged

devjiwonchoi mentioned this pull request Jan 6, 2025

[DevOverlay] Add error type label #74543

Merged

devjiwonchoi marked this pull request as ready for review January 6, 2025 16:21

devjiwonchoi requested review from huozhi, eps1lon and gaojude January 6, 2025 16:22

devjiwonchoi changed the title ~~[DevOverlay] Add tool buttons~~ [DevOverlay] Add Tool Buttons Group Jan 6, 2025

huozhi reviewed Jan 6, 2025

View reviewed changes

devjiwonchoi mentioned this pull request Jan 6, 2025

[DevOverlay] Add Docs Link Button #74560

Merged

devjiwonchoi force-pushed the 01-06-_devoverlay_add_error_type_label branch 2 times, most recently from 6f1194a to 66002f6 Compare January 6, 2025 18:52

devjiwonchoi force-pushed the 01-07-_devoverlay_add_tool_buttons branch from 4c32e87 to 96079b9 Compare January 6, 2025 18:52

devjiwonchoi changed the base branch from 01-06-_devoverlay_add_error_type_label to graphite-base/74555 January 6, 2025 19:11

devjiwonchoi force-pushed the graphite-base/74555 branch from 66002f6 to 571aafe Compare January 6, 2025 19:11

devjiwonchoi force-pushed the 01-07-_devoverlay_add_tool_buttons branch from 96079b9 to 030d785 Compare January 6, 2025 19:11

devjiwonchoi changed the base branch from graphite-base/74555 to canary January 6, 2025 19:12

devjiwonchoi force-pushed the 01-07-_devoverlay_add_tool_buttons branch from 030d785 to 4aef44c Compare January 6, 2025 19:12

devjiwonchoi added 6 commits January 7, 2025 18:50

[DevOverlay] Add tool buttons

1a6ffb2

separate files

3409fc4

use classname

e4cb002

name as stack trace

077b294

add stories

f083fdd

not hover when disabled

b5cbb56

devjiwonchoi force-pushed the 01-07-_devoverlay_add_tool_buttons branch from 4aef44c to b5cbb56 Compare January 7, 2025 09:51

name to error-overlay-toolbar

e05f918

devjiwonchoi requested a review from huozhi January 7, 2025 10:39

devjiwonchoi changed the title ~~[DevOverlay] Add Tool Buttons Group~~ [DevOverlay] Add Toolbar Jan 7, 2025

This was referenced Jan 7, 2025

[DevOverlay] Floating Header and Bottom Stacks #74581

Merged

[DevOverlay] Add Pagination #74583

Merged

huozhi approved these changes Jan 7, 2025

View reviewed changes

devjiwonchoi merged commit 19caa18 into canary Jan 7, 2025
135 checks passed

devjiwonchoi deleted the 01-07-_devoverlay_add_tool_buttons branch January 7, 2025 15:22

github-actions bot added the locked label Jan 23, 2025

github-actions bot locked as resolved and limited conversation to collaborators Jan 23, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DevOverlay] Add Toolbar #74555

[DevOverlay] Add Toolbar #74555

devjiwonchoi commented Jan 6, 2025 •

edited

Loading

devjiwonchoi commented Jan 6, 2025 •

edited

Loading

ijjk commented Jan 6, 2025 •

edited

Loading

ijjk commented Jan 6, 2025 •

edited

Loading

huozhi Jan 6, 2025

devjiwonchoi Jan 7, 2025

huozhi Jan 7, 2025

[DevOverlay] Add Toolbar #74555

[DevOverlay] Add Toolbar #74555

Conversation

devjiwonchoi commented Jan 6, 2025 • edited Loading

Light

Dark

devjiwonchoi commented Jan 6, 2025 • edited Loading

ijjk commented Jan 6, 2025 • edited Loading

Tests Passed

ijjk commented Jan 6, 2025 • edited Loading

Stats from current PR

huozhi Jan 6, 2025

Choose a reason for hiding this comment

devjiwonchoi Jan 7, 2025

Choose a reason for hiding this comment

huozhi Jan 7, 2025

Choose a reason for hiding this comment

devjiwonchoi commented Jan 6, 2025 •

edited

Loading

devjiwonchoi commented Jan 6, 2025 •

edited

Loading

ijjk commented Jan 6, 2025 •

edited

Loading

ijjk commented Jan 6, 2025 •

edited

Loading