Skip to content

[devtools] add dialog behavior to panel ui #80355

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.

Sign up for GitHub

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

Merged
merged 5 commits into from
Jun 19, 2025
Merged

[devtools] add dialog behavior to panel ui #80355

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e502a9b
[devtools] add dialog behavior to panel ui
devjiwonchoi Jun 10, 2025
136d718
add style
devjiwonchoi Jun 13, 2025
a44c8a7
open by default
devjiwonchoi Jun 13, 2025
906889a
git revert state
devjiwonchoi Jun 13, 2025
e689a0a
remove unnecessary
devjiwonchoi Jun 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions ...s/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import type { Meta, StoryObj } from '@storybook/react'
import type { OverlayState } from '../../shared'

import { DevToolsPanel } from './devtools-panel'
import { INITIAL_OVERLAY_STATE } from '../../shared'
import { withShadowPortal } from '../../storybook/with-shadow-portal'

const meta: Meta<typeof DevToolsPanel> = {
component: DevToolsPanel,
parameters: {
layout: 'centered',
},
argTypes: {},
decorators: [withShadowPortal],
}

export default meta
type Story = StoryObj<typeof DevToolsPanel>

const state: OverlayState = {
...INITIAL_OVERLAY_STATE,
routerType: 'app',
isErrorOverlayOpen: false,
isDevToolsPanelOpen: true,
}

export const Default: Story = {
args: {
state,
dispatch: () => {},
},
}
60 changes: 55 additions & 5 deletions packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,62 @@
import type { OverlayDispatch, OverlayState } from '../../shared'

import { Dialog, DialogContent, DialogHeader, DialogBody } from '../dialog'
import { Overlay } from '../overlay/overlay'
import { ACTION_DEVTOOLS_PANEL_TOGGLE } from '../../shared'
import { css } from '../../utils/css'

export function DevToolsPanel() {
// TODO: Remove style; It is to indicate faster in the browser.
return <div data-nextjs-devtools-panel>DevToolsPanel</div>
export function DevToolsPanel({
// eslint-disable-next-line @typescript-eslint/no-unused-vars
state,
dispatch,
}: {
state: OverlayState
dispatch: OverlayDispatch
}) {
const onClose = () => {
dispatch({ type: ACTION_DEVTOOLS_PANEL_TOGGLE })
Copy link
Member

Choose a reason for hiding this comment

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

Can we only pass the onClose prop to DevtoolPanel? This can be more headless instead of bound with dispatch. We can group the dispatch actions on the top and pass them down as separate props instead of passing the dispatch itself which might lead to abuse in the future

Copy link
Member Author

Choose a reason for hiding this comment

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

I think passing the dispatcher to DevToolsPanel is reasonable because it is feature-flagged above.

// created outside of feature flag
const onClose = () => {}

process.env.__NEXT_DEVTOOL_NEW_PANEL_UI &&
<DevToolsPanel onClose={onClose} />

But for layers under (e.g. Settings), agreed to pass the scoped action, not the whole dispatch.

}

return (
<Overlay data-nextjs-devtools-panel-overlay>
<Dialog
data-nextjs-devtools-panel-dialog
aria-labelledby="nextjs__container_dev_tools_panel_label"
aria-describedby="nextjs__container_dev_tools_panel_desc"
onClose={onClose}
>
<DialogContent>
<DialogHeader></DialogHeader>
<DialogBody></DialogBody>
</DialogContent>
</Dialog>
</Overlay>
)
}

export const DEVTOOLS_PANEL_STYLES = css`
[data-nextjs-devtools-panel] {
color: black;
[data-nextjs-devtools-panel-overlay] {
padding: initial;
top: 10vh;
}

[data-nextjs-devtools-panel-dialog] {
-webkit-font-smoothing: antialiased;
display: flex;
flex-direction: column;
background: var(--color-background-100);
background-clip: padding-box;
border: 1px solid var(--color-gray-400);
border-radius: var(--rounded-xl);
box-shadow: var(--shadow-lg);
position: relative;
overflow-y: auto;

/* TODO: Remove once the content is filled. */
min-width: 800px;
min-height: 500px;

/* This is handled from dialog/styles.ts */
max-width: var(--next-dialog-max-width);
}
`
17 changes: 10 additions & 7 deletions packages/next/src/next-devtools/dev-overlay/components/dialog/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
const styles = `
import { css } from '../../utils/css'

export const styles = css`
[data-nextjs-dialog-root] {
--next-dialog-radius: var(--rounded-xl);
--next-dialog-max-width: 960px;
Expand All @@ -25,9 +27,11 @@ const styles = `
scale: 1;
}

[data-nextjs-scroll-fader][data-side="top"] {
[data-nextjs-scroll-fader][data-side='top'] {
left: 1px;
top: calc(var(--next-dialog-notch-height) + var(--next-dialog-border-width));
top: calc(
var(--next-dialog-notch-height) + var(--next-dialog-border-width)
);
width: calc(100% - var(--next-dialog-padding));
opacity: 0;
}
Expand All @@ -37,7 +41,8 @@ const styles = `
outline: 0;
}

[data-nextjs-dialog], [data-nextjs-dialog] * {
[data-nextjs-dialog],
[data-nextjs-dialog] * {
&::-webkit-scrollbar {
width: 6px;
height: 6px;
Expand All @@ -53,7 +58,7 @@ const styles = `
border-radius: 0 0 1rem 1rem;
background-color: var(--color-background-100);
}

&::-webkit-scrollbar-thumb {
border-radius: 1rem;
background-color: var(--color-gray-500);
Expand Down Expand Up @@ -123,5 +128,3 @@ const styles = `
}
}
`

export { styles }
42 changes: 39 additions & 3 deletions packages/next/src/next-devtools/dev-overlay/dev-overlay.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import imgApp from './app.png'
import { useReducer } from 'react'
import { DevOverlay } from './dev-overlay'
import {
ACTION_DEVTOOLS_PANEL_TOGGLE,
ACTION_ERROR_OVERLAY_CLOSE,
ACTION_ERROR_OVERLAY_OPEN,
ACTION_ERROR_OVERLAY_TOGGLE,
Expand Down Expand Up @@ -93,8 +94,7 @@ const initialState: OverlayState = {
installed: '15.2.0',
staleness: 'fresh',
},
isErrorOverlayOpen: true,
// TODO: This will be handled on the next stack——with proper story.
isErrorOverlayOpen: false,
isDevToolsPanelOpen: false,
}

Expand All @@ -111,11 +111,13 @@ function useOverlayReducer() {
case ACTION_ERROR_OVERLAY_TOGGLE: {
return { ...state, isErrorOverlayOpen: !state.isErrorOverlayOpen }
}
case ACTION_DEVTOOLS_PANEL_TOGGLE: {
return { ...state, isDevToolsPanelOpen: !state.isDevToolsPanelOpen }
}
default: {
return state
}
}
return state
},
initialState
)
Expand Down Expand Up @@ -150,3 +152,37 @@ export const Default: Story = {
)
},
}

export const WithPanel: Story = {
beforeEach: () => {
process.env.__NEXT_DEVTOOL_NEW_PANEL_UI = 'true'
Copy link
Member

Choose a reason for hiding this comment

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

Does that work? I thought process.env.* values would be replaced at build time.

Copy link
Member Author

Choose a reason for hiding this comment

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

process.env.* values would be replaced at build time.

Yeah it does seem to work, what is it replaced with at build time?

Copy link
Member

Choose a reason for hiding this comment

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

It's probably somewhere else we declare a global process.env. Otherwise this shouldn't work since process is not defined in browsers.


// clean up callback function
return () => {
delete process.env.__NEXT_DEVTOOL_NEW_PANEL_UI
}
},
render: function DevOverlayStory() {
const [state, dispatch] = useOverlayReducer()
return (
<>
<img
src={imgApp}
style={{
width: '100%',
height: '100vh',
objectFit: 'contain',
}}
/>
<DevOverlay
state={state}
dispatch={dispatch}
getSquashedHydrationErrorDetails={
// Testing like App Router where we no longer quash hydration errors
getNoSquashedHydrationErrorDetails
}
/>
</>
)
},
}
4 changes: 3 additions & 1 deletion packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,9 @@ export function DevOverlay({
isBuildError={isBuildError}
/>

{state.isDevToolsPanelOpen && <DevToolsPanel />}
{state.isDevToolsPanelOpen && (
<DevToolsPanel state={state} dispatch={dispatch} />
)}
</>
) : (
<DevToolsIndicator
Expand Down
Loading