[devtools] add panel ui placeholder under feature flag

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

@@ -9,7 +9,13 @@ import {
   MENU_CURVE,
   MENU_DURATION_MS,
 } from '../errors/dev-tools-indicator/utils'
-import { ACTION_ERROR_OVERLAY_TOGGLE, STORAGE_KEY_POSITION } from '../../shared'
+import {
+  ACTION_DEVTOOLS_PANEL_TOGGLE,
+  ACTION_ERROR_OVERLAY_TOGGLE,
+  ACTION_ERROR_OVERLAY_CLOSE,
+  STORAGE_KEY_POSITION,
+  ACTION_DEVTOOLS_PANEL_CLOSE,
+} from '../../shared'
 import { getInitialPosition } from '../errors/dev-tools-indicator/dev-tools-info/preferences'
 import { Draggable } from '../errors/dev-tools-indicator/draggable'
 
@@ -34,10 +40,14 @@ export function DevToolsIndicator({
   const [vertical, horizontal] = position.split('-', 2)
 
   const toggleErrorOverlay = () => {
+    dispatch({ type: ACTION_DEVTOOLS_PANEL_CLOSE })
     dispatch({ type: ACTION_ERROR_OVERLAY_TOGGLE })
   }
 
-  const onTriggerClick = () => {}
+  const toggleDevToolsPanel = () => {
+    dispatch({ type: ACTION_ERROR_OVERLAY_CLOSE })
+    dispatch({ type: ACTION_DEVTOOLS_PANEL_TOGGLE })
+  }
 
   return (
     <Toast
@@ -71,7 +81,7 @@ export function DevToolsIndicator({
           data-nextjs-dev-tools-button
           disabled={state.disableDevIndicator}
           issueCount={errorCount}
-          onTriggerClick={onTriggerClick}
+          onTriggerClick={toggleDevToolsPanel}
           toggleErrorOverlay={toggleErrorOverlay}
           isDevBuilding={state.buildingIndicator}
           isDevRendering={state.renderingIndicator}

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

@@ -0,0 +1,12 @@
+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 const DEVTOOLS_PANEL_STYLES = css`
+  [data-nextjs-devtools-panel] {
+    color: black;
+  }
+`

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

@@ -12,6 +12,7 @@ import { DarkTheme } from './styles/dark-theme'
 import { useDevToolsScale } from './components/errors/dev-tools-indicator/dev-tools-info/preferences'
 import type { HydrationErrorState } from '../shared/hydration-error'
 import { DevToolsIndicator as DevToolsIndicatorNew } from './components/devtools-indicator/devtools-indicator'
+import { DevToolsPanel } from './components/devtools-panel/devtools-panel'
 
 export function DevOverlay({
   state,
@@ -38,13 +39,17 @@ export function DevOverlay({
             <>
               {state.showIndicator &&
                 (process.env.__NEXT_DEVTOOL_NEW_PANEL_UI ? (
-                  <DevToolsIndicatorNew
-                    scale={scale}
-                    state={state}
-                    dispatch={dispatch}
-                    errorCount={totalErrorCount}
-                    isBuildError={isBuildError}
-                  />
+                  <>
+                    <DevToolsIndicatorNew
+                      scale={scale}
+                      state={state}
+                      dispatch={dispatch}
+                      errorCount={totalErrorCount}
+                      isBuildError={isBuildError}
+                    />
+
+                    {state.isDevToolsPanelOpen && <DevToolsPanel />}
+                  </>
                 ) : (
                   <DevToolsIndicator
                     scale={scale}

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

@@ -29,6 +29,7 @@ export interface OverlayState {
   debugInfo: DebugInfo
   routerType: 'pages' | 'app'
   isErrorOverlayOpen: boolean
+  isDevToolsPanelOpen: boolean
 }
 export type OverlayDispatch = React.Dispatch<DispatcherEvent>
 
@@ -42,14 +43,20 @@ export const ACTION_UNHANDLED_ERROR = 'unhandled-error'
 export const ACTION_UNHANDLED_REJECTION = 'unhandled-rejection'
 export const ACTION_DEBUG_INFO = 'debug-info'
 export const ACTION_DEV_INDICATOR = 'dev-indicator'
+
 export const ACTION_ERROR_OVERLAY_OPEN = 'error-overlay-open'
 export const ACTION_ERROR_OVERLAY_CLOSE = 'error-overlay-close'
 export const ACTION_ERROR_OVERLAY_TOGGLE = 'error-overlay-toggle'
+
 export const ACTION_BUILDING_INDICATOR_SHOW = 'building-indicator-show'
 export const ACTION_BUILDING_INDICATOR_HIDE = 'building-indicator-hide'
 export const ACTION_RENDERING_INDICATOR_SHOW = 'rendering-indicator-show'
 export const ACTION_RENDERING_INDICATOR_HIDE = 'rendering-indicator-hide'
 
+export const ACTION_DEVTOOLS_PANEL_OPEN = 'dev-tools-panel-open'
+export const ACTION_DEVTOOLS_PANEL_CLOSE = 'dev-tools-panel-close'
+export const ACTION_DEVTOOLS_PANEL_TOGGLE = 'dev-tools-panel-toggle'
+
 export const STORAGE_KEY_THEME = '__nextjs-dev-tools-theme'
 export const STORAGE_KEY_POSITION = '__nextjs-dev-tools-position'
 export const STORAGE_KEY_SCALE = '__nextjs-dev-tools-scale'
@@ -121,6 +128,16 @@ export interface RenderingIndicatorHideAction {
   type: typeof ACTION_RENDERING_INDICATOR_HIDE
 }
 
+export interface DevToolsPanelOpenAction {
+  type: typeof ACTION_DEVTOOLS_PANEL_OPEN
+}
+export interface DevToolsPanelCloseAction {
+  type: typeof ACTION_DEVTOOLS_PANEL_CLOSE
+}
+export interface DevToolsPanelToggleAction {
+  type: typeof ACTION_DEVTOOLS_PANEL_TOGGLE
+}
+
 export type DispatcherEvent =
   | BuildOkAction
   | BuildErrorAction
@@ -139,6 +156,9 @@ export type DispatcherEvent =
   | BuildingIndicatorHideAction
   | RenderingIndicatorShowAction
   | RenderingIndicatorHideAction
+  | DevToolsPanelOpenAction
+  | DevToolsPanelCloseAction
+  | DevToolsPanelToggleAction
 
 const REACT_ERROR_STACK_BOTTOM_FRAME_REGEX =
   // 1st group: v8
@@ -177,6 +197,7 @@ export const INITIAL_OVERLAY_STATE: Omit<
   refreshState: { type: 'idle' },
   versionInfo: { installed: '0.0.0', staleness: 'unknown' },
   debugInfo: { devtoolsFrontendUrl: undefined },
+  isDevToolsPanelOpen: false,
 }
 
 function getInitialState(
@@ -339,6 +360,15 @@ export function useErrorOverlayReducer(
         case ACTION_RENDERING_INDICATOR_HIDE: {
           return { ...state, renderingIndicator: false }
         }
+        case ACTION_DEVTOOLS_PANEL_OPEN: {
+          return { ...state, isDevToolsPanelOpen: true }
+        }
+        case ACTION_DEVTOOLS_PANEL_CLOSE: {
+          return { ...state, isDevToolsPanelOpen: false }
+        }
+        case ACTION_DEVTOOLS_PANEL_TOGGLE: {
+          return { ...state, isDevToolsPanelOpen: !state.isDevToolsPanelOpen }
+        }
         default: {
           return state
         }

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

@@ -24,6 +24,7 @@ import { DEV_TOOLS_INFO_USER_PREFERENCES_STYLES } from '../components/errors/dev
 import { DEV_TOOLS_INFO_RENDER_FILES_STYLES } from '../components/overview/segment-explorer'
 import { FADER_STYLES } from '../components/fader'
 import { RESTART_SERVER_BUTTON_STYLES } from '../components/errors/error-overlay-toolbar/restart-server-button'
+import { DEVTOOLS_PANEL_STYLES } from '../components/devtools-panel/devtools-panel'
 
 export function ComponentStyles() {
   return (
@@ -54,6 +55,7 @@ export function ComponentStyles() {
         ${DEV_TOOLS_INFO_USER_PREFERENCES_STYLES}
         ${DEV_TOOLS_INFO_RENDER_FILES_STYLES}
         ${FADER_STYLES}
+        ${DEVTOOLS_PANEL_STYLES}
       `}
     </style>
   )