Content-Length: 684736 | pFad | http://github.com/vercel/next.js/commit/eade7d27078e35b243b01253fe96df0b19f153bf

8E [devtools] add panel ui placeholder under feature flag (#80354) · vercel/next.js@eade7d2 · GitHub
Skip to content

Commit eade7d2

Browse files
devjiwonchoidevjiwonchoi
authored
[devtools] add panel ui placeholder under feature flag (#80354)
This PR adds a placeholder for the DevTools panel UI under the feature flag, focusing on the interaction with the dispatcher.
1 parent 7320248 commit eade7d2

File tree

7 files changed

+73
-10
lines changed

7 files changed

+73
-10
lines changed

‎packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,13 @@ import {
99
MENU_CURVE,
1010
MENU_DURATION_MS,
1111
} from '../errors/dev-tools-indicator/utils'
12-
import { ACTION_ERROR_OVERLAY_TOGGLE, STORAGE_KEY_POSITION } from '../../shared'
12+
import {
13+
ACTION_DEVTOOLS_PANEL_TOGGLE,
14+
ACTION_ERROR_OVERLAY_TOGGLE,
15+
ACTION_ERROR_OVERLAY_CLOSE,
16+
STORAGE_KEY_POSITION,
17+
ACTION_DEVTOOLS_PANEL_CLOSE,
18+
} from '../../shared'
1319
import { getInitialPosition } from '../errors/dev-tools-indicator/dev-tools-info/preferences'
1420
import { Draggable } from '../errors/dev-tools-indicator/draggable'
1521

@@ -34,10 +40,14 @@ export function DevToolsIndicator({
3440
const [vertical, horizontal] = position.split('-', 2)
3541

3642
const toggleErrorOverlay = () => {
43+
dispatch({ type: ACTION_DEVTOOLS_PANEL_CLOSE })
3744
dispatch({ type: ACTION_ERROR_OVERLAY_TOGGLE })
3845
}
3946

40-
const onTriggerClick = () => {}
47+
const toggleDevToolsPanel = () => {
48+
dispatch({ type: ACTION_ERROR_OVERLAY_CLOSE })
49+
dispatch({ type: ACTION_DEVTOOLS_PANEL_TOGGLE })
50+
}
4151

4252
return (
4353
<Toast
@@ -71,7 +81,7 @@ export function DevToolsIndicator({
7181
data-nextjs-dev-tools-button
7282
disabled={state.disableDevIndicator}
7383
issueCount={errorCount}
74-
onTriggerClick={onTriggerClick}
84+
onTriggerClick={toggleDevToolsPanel}
7585
toggleErrorOverlay={toggleErrorOverlay}
7686
isDevBuilding={state.buildingIndicator}
7787
isDevRendering={state.renderingIndicator}

‎packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { css } from '../../utils/css'
2+
3+
export function DevToolsPanel() {
4+
// TODO: Remove style; It is to indicate faster in the browser.
5+
return <div data-nextjs-devtools-panel>DevToolsPanel</div>
6+
}
7+
8+
export const DEVTOOLS_PANEL_STYLES = css`
9+
[data-nextjs-devtools-panel] {
10+
color: black;
11+
}
12+
`

‎packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-indicator.stories.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,8 @@ const state: OverlayState = {
5959
staticIndicator: true,
6060
debugInfo: { devtoolsFrontendUrl: undefined },
6161
isErrorOverlayOpen: false,
62+
// TODO: This will be handled on the next stack——with proper story.
63+
isDevToolsPanelOpen: false,
6264
}
6365

6466
export const StaticRoute: Story = {

‎packages/next/src/next-devtools/dev-overlay/dev-overlay.stories.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,8 @@ const initialState: OverlayState = {
9494
staleness: 'fresh',
9595
},
9696
isErrorOverlayOpen: true,
97+
// TODO: This will be handled on the next stack——with proper story.
98+
isDevToolsPanelOpen: false,
9799
}
98100

99101
function useOverlayReducer() {

‎packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { DarkTheme } from './styles/dark-theme'
1212
import { useDevToolsScale } from './components/errors/dev-tools-indicator/dev-tools-info/preferences'
1313
import type { HydrationErrorState } from '../shared/hydration-error'
1414
import { DevToolsIndicator as DevToolsIndicatorNew } from './components/devtools-indicator/devtools-indicator'
15+
import { DevToolsPanel } from './components/devtools-panel/devtools-panel'
1516

1617
export function DevOverlay({
1718
state,
@@ -38,13 +39,17 @@ export function DevOverlay({
3839
<>
3940
{state.showIndicator &&
4041
(process.env.__NEXT_DEVTOOL_NEW_PANEL_UI ? (
41-
<DevToolsIndicatorNew
42-
scale={scale}
43-
state={state}
44-
dispatch={dispatch}
45-
errorCount={totalErrorCount}
46-
isBuildError={isBuildError}
47-
/>
42+
<>
43+
<DevToolsIndicatorNew
44+
scale={scale}
45+
state={state}
46+
dispatch={dispatch}
47+
errorCount={totalErrorCount}
48+
isBuildError={isBuildError}
49+
/>
50+
51+
{state.isDevToolsPanelOpen && <DevToolsPanel />}
52+
</>
4853
) : (
4954
<DevToolsIndicator
5055
scale={scale}

‎packages/next/src/next-devtools/dev-overlay/shared.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export interface OverlayState {
2929
debugInfo: DebugInfo
3030
routerType: 'pages' | 'app'
3131
isErrorOverlayOpen: boolean
32+
isDevToolsPanelOpen: boolean
3233
}
3334
export type OverlayDispatch = React.Dispatch<DispatcherEvent>
3435

@@ -42,14 +43,20 @@ export const ACTION_UNHANDLED_ERROR = 'unhandled-error'
4243
export const ACTION_UNHANDLED_REJECTION = 'unhandled-rejection'
4344
export const ACTION_DEBUG_INFO = 'debug-info'
4445
export const ACTION_DEV_INDICATOR = 'dev-indicator'
46+
4547
export const ACTION_ERROR_OVERLAY_OPEN = 'error-overlay-open'
4648
export const ACTION_ERROR_OVERLAY_CLOSE = 'error-overlay-close'
4749
export const ACTION_ERROR_OVERLAY_TOGGLE = 'error-overlay-toggle'
50+
4851
export const ACTION_BUILDING_INDICATOR_SHOW = 'building-indicator-show'
4952
export const ACTION_BUILDING_INDICATOR_HIDE = 'building-indicator-hide'
5053
export const ACTION_RENDERING_INDICATOR_SHOW = 'rendering-indicator-show'
5154
export const ACTION_RENDERING_INDICATOR_HIDE = 'rendering-indicator-hide'
5255

56+
export const ACTION_DEVTOOLS_PANEL_OPEN = 'devtools-panel-open'
57+
export const ACTION_DEVTOOLS_PANEL_CLOSE = 'devtools-panel-close'
58+
export const ACTION_DEVTOOLS_PANEL_TOGGLE = 'devtools-panel-toggle'
59+
5360
export const STORAGE_KEY_THEME = '__nextjs-dev-tools-theme'
5461
export const STORAGE_KEY_POSITION = '__nextjs-dev-tools-position'
5562
export const STORAGE_KEY_SCALE = '__nextjs-dev-tools-scale'
@@ -121,6 +128,16 @@ export interface RenderingIndicatorHideAction {
121128
type: typeof ACTION_RENDERING_INDICATOR_HIDE
122129
}
123130

131+
export interface DevToolsPanelOpenAction {
132+
type: typeof ACTION_DEVTOOLS_PANEL_OPEN
133+
}
134+
export interface DevToolsPanelCloseAction {
135+
type: typeof ACTION_DEVTOOLS_PANEL_CLOSE
136+
}
137+
export interface DevToolsPanelToggleAction {
138+
type: typeof ACTION_DEVTOOLS_PANEL_TOGGLE
139+
}
140+
124141
export type DispatcherEvent =
125142
| BuildOkAction
126143
| BuildErrorAction
@@ -139,6 +156,9 @@ export type DispatcherEvent =
139156
| BuildingIndicatorHideAction
140157
| RenderingIndicatorShowAction
141158
| RenderingIndicatorHideAction
159+
| DevToolsPanelOpenAction
160+
| DevToolsPanelCloseAction
161+
| DevToolsPanelToggleAction
142162

143163
const REACT_ERROR_STACK_BOTTOM_FRAME_REGEX =
144164
// 1st group: v8
@@ -177,6 +197,7 @@ export const INITIAL_OVERLAY_STATE: Omit<
177197
refreshState: { type: 'idle' },
178198
versionInfo: { installed: '0.0.0', staleness: 'unknown' },
179199
debugInfo: { devtoolsFrontendUrl: undefined },
200+
isDevToolsPanelOpen: false,
180201
}
181202

182203
function getInitialState(
@@ -339,6 +360,15 @@ export function useErrorOverlayReducer(
339360
case ACTION_RENDERING_INDICATOR_HIDE: {
340361
return { ...state, renderingIndicator: false }
341362
}
363+
case ACTION_DEVTOOLS_PANEL_OPEN: {
364+
return { ...state, isDevToolsPanelOpen: true }
365+
}
366+
case ACTION_DEVTOOLS_PANEL_CLOSE: {
367+
return { ...state, isDevToolsPanelOpen: false }
368+
}
369+
case ACTION_DEVTOOLS_PANEL_TOGGLE: {
370+
return { ...state, isDevToolsPanelOpen: !state.isDevToolsPanelOpen }
371+
}
342372
default: {
343373
return state
344374
}

‎packages/next/src/next-devtools/dev-overlay/styles/component-styles.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { DEV_TOOLS_INFO_USER_PREFERENCES_STYLES } from '../components/errors/dev
2424
import { DEV_TOOLS_INFO_RENDER_FILES_STYLES } from '../components/overview/segment-explorer'
2525
import { FADER_STYLES } from '../components/fader'
2626
import { RESTART_SERVER_BUTTON_STYLES } from '../components/errors/error-overlay-toolbar/restart-server-button'
27+
import { DEVTOOLS_PANEL_STYLES } from '../components/devtools-panel/devtools-panel'
2728

2829
export function ComponentStyles() {
2930
return (
@@ -54,6 +55,7 @@ export function ComponentStyles() {
5455
${DEV_TOOLS_INFO_USER_PREFERENCES_STYLES}
5556
${DEV_TOOLS_INFO_RENDER_FILES_STYLES}
5657
${FADER_STYLES}
58+
${DEVTOOLS_PANEL_STYLES}
5759
`}
5860
</style>
5961
)

0 commit comments

Comments
 (0)








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: http://github.com/vercel/next.js/commit/eade7d27078e35b243b01253fe96df0b19f153bf

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy