[devtools] add panel ui placeholder under feature flag

devjiwonchoi · devjiwonchoi · commit 060ae1894694 · 2025-06-12T00:44:15.000+02:00
diff --git a/packages/next/src/next-devtools/dev-overlay/components/dev-tools-panel/dev-tools-panel.tsx b/packages/next/src/next-devtools/dev-overlay/components/dev-tools-panel/dev-tools-panel.tsx
@@ -0,0 +1,6 @@
+export function DevToolsPanel() {
+  // TODO: Remove style; It is to indicate faster in the browser.
+  return <div style={{ color: 'black' }}>DevToolsPanel</div>
+}
+
+export const DEV_TOOLS_PANEL_STYLES = ``
diff --git a/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-indicator.tsx b/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-indicator.tsx
@@ -2,6 +2,7 @@ import type { CSSProperties, Dispatch, SetStateAction } from 'react'
 import {
   ACTION_ERROR_OVERLAY_OPEN,
   ACTION_ERROR_OVERLAY_TOGGLE,
+  ACTION_DEV_TOOLS_PANEL_TOGGLE,
   STORAGE_KEY_POSITION,
   type OverlayDispatch,
   type OverlayState,
@@ -234,6 +235,11 @@ function DevToolsPopover({
   }
 
   function onTriggerClick() {
+    if (process.env.__NEXT_DEVTOOL_NEW_PANEL_UI) {
+      dispatch({ type: ACTION_DEV_TOOLS_PANEL_TOGGLE })
+      return
+    }
+
     if (open === OVERLAYS.Root) {
       setOpen(null)
     } else {
@@ -305,124 +311,130 @@ function DevToolsPopover({
         />
       </Draggable>
 
-      {/* Route Info */}
-      <RouteInfo
-        isOpen={isRouteInfoOpen}
-        close={closeToRootMenu}
-        triggerRef={triggerRef}
-        style={popover}
-        routerType={routerType}
-        routeType={isStaticRoute ? 'Static' : 'Dynamic'}
-      />
-
-      {/* Turbopack Info */}
-      <TurbopackInfo
-        isOpen={isTurbopackInfoOpen}
-        close={closeToRootMenu}
-        triggerRef={triggerRef}
-        style={popover}
-      />
-
-      {/* Preferences */}
-      <UserPreferences
-        isOpen={isPreferencesOpen}
-        close={closeToRootMenu}
-        triggerRef={triggerRef}
-        style={popover}
-        hide={handleHideDevtools}
-        setPosition={setPosition}
-        position={position}
-        scale={scale}
-        setScale={setScale}
-      />
-
-      {/* Page Segment Explorer */}
-      {process.env.__NEXT_DEVTOOL_SEGMENT_EXPLORER ? (
-        <SegmentsExplorer
-          isOpen={isSegmentExplorerOpen}
-          close={closeToRootMenu}
-          triggerRef={triggerRef}
-          style={popover}
-        />
-      ) : null}
-
-      {/* Dropdown Menu */}
-      {menuMounted && (
-        <div
-          ref={menuRef}
-          id="nextjs-dev-tools-menu"
-          role="menu"
-          dir="ltr"
-          aria-orientation="vertical"
-          aria-label="Next.js Dev Tools Items"
-          tabIndex={-1}
-          className="dev-tools-indicator-menu"
-          onKeyDown={onMenuKeydown}
-          data-rendered={menuRendered}
-          style={popover}
-        >
-          <Context.Provider
-            value={{
-              closeMenu,
-              selectedIndex,
-              setSelectedIndex,
-            }}
-          >
-            <div className="dev-tools-indicator-inner">
-              {issueCount > 0 && (
-                <MenuItem
-                  title={`${issueCount} ${issueCount === 1 ? 'issue' : 'issues'} found. Click to view details in the dev overlay.`}
-                  index={0}
-                  label="Issues"
-                  value={<IssueCount>{issueCount}</IssueCount>}
-                  onClick={openErrorOverlay}
-                />
-              )}
-              <MenuItem
-                title={`Current route is ${isStaticRoute ? 'static' : 'dynamic'}.`}
-                label="Route"
-                index={1}
-                value={isStaticRoute ? 'Static' : 'Dynamic'}
-                onClick={() => setOpen(OVERLAYS.Route)}
-                data-nextjs-route-type={isStaticRoute ? 'static' : 'dynamic'}
-              />
-              {isTurbopack ? (
-                <MenuItem
-                  title="Turbopack is enabled."
-                  label="Turbopack"
-                  value="Enabled"
-                />
-              ) : (
-                <MenuItem
-                  index={2}
-                  title="Learn about Turbopack and how to enable it in your application."
-                  label="Try Turbopack"
-                  value={<ChevronRight />}
-                  onClick={() => setOpen(OVERLAYS.Turbo)}
-                />
-              )}
-            </div>
-
-            <div className="dev-tools-indicator-footer">
-              <MenuItem
-                data-preferences
-                label="Preferences"
-                value={<GearIcon />}
-                onClick={() => setOpen(OVERLAYS.Preferences)}
-                index={isTurbopack ? 2 : 3}
-              />
-              {process.env.__NEXT_DEVTOOL_SEGMENT_EXPLORER ? (
-                <MenuItem
-                  data-segment-explorer
-                  label="Segment Explorer"
-                  value={<ChevronRight />}
-                  onClick={() => setOpen(OVERLAYS.SegmentExplorer)}
-                  index={isTurbopack ? 3 : 4}
-                />
-              ) : null}
+      {process.env.__NEXT_DEVTOOL_NEW_PANEL_UI ? null : (
+        <>
+          {/* Route Info */}
+          <RouteInfo
+            isOpen={isRouteInfoOpen}
+            close={closeToRootMenu}
+            triggerRef={triggerRef}
+            style={popover}
+            routerType={routerType}
+            routeType={isStaticRoute ? 'Static' : 'Dynamic'}
+          />
+
+          {/* Turbopack Info */}
+          <TurbopackInfo
+            isOpen={isTurbopackInfoOpen}
+            close={closeToRootMenu}
+            triggerRef={triggerRef}
+            style={popover}
+          />
+
+          {/* Preferences */}
+          <UserPreferences
+            isOpen={isPreferencesOpen}
+            close={closeToRootMenu}
+            triggerRef={triggerRef}
+            style={popover}
+            hide={handleHideDevtools}
+            setPosition={setPosition}
+            position={position}
+            scale={scale}
+            setScale={setScale}
+          />
+
+          {/* Page Segment Explorer */}
+          {process.env.__NEXT_DEVTOOL_SEGMENT_EXPLORER ? (
+            <SegmentsExplorer
+              isOpen={isSegmentExplorerOpen}
+              close={closeToRootMenu}
+              triggerRef={triggerRef}
+              style={popover}
+            />
+          ) : null}
+
+          {/* Dropdown Menu */}
+          {menuMounted && (
+            <div
+              ref={menuRef}
+              id="nextjs-dev-tools-menu"
+              role="menu"
+              dir="ltr"
+              aria-orientation="vertical"
+              aria-label="Next.js Dev Tools Items"
+              tabIndex={-1}
+              className="dev-tools-indicator-menu"
+              onKeyDown={onMenuKeydown}
+              data-rendered={menuRendered}
+              style={popover}
+            >
+              <Context.Provider
+                value={{
+                  closeMenu,
+                  selectedIndex,
+                  setSelectedIndex,
+                }}
+              >
+                <div className="dev-tools-indicator-inner">
+                  {issueCount > 0 && (
+                    <MenuItem
+                      title={`${issueCount} ${issueCount === 1 ? 'issue' : 'issues'} found. Click to view details in the dev overlay.`}
+                      index={0}
+                      label="Issues"
+                      value={<IssueCount>{issueCount}</IssueCount>}
+                      onClick={openErrorOverlay}
+                    />
+                  )}
+                  <MenuItem
+                    title={`Current route is ${isStaticRoute ? 'static' : 'dynamic'}.`}
+                    label="Route"
+                    index={1}
+                    value={isStaticRoute ? 'Static' : 'Dynamic'}
+                    onClick={() => setOpen(OVERLAYS.Route)}
+                    data-nextjs-route-type={
+                      isStaticRoute ? 'static' : 'dynamic'
+                    }
+                  />
+                  {isTurbopack ? (
+                    <MenuItem
+                      title="Turbopack is enabled."
+                      label="Turbopack"
+                      value="Enabled"
+                    />
+                  ) : (
+                    <MenuItem
+                      index={2}
+                      title="Learn about Turbopack and how to enable it in your application."
+                      label="Try Turbopack"
+                      value={<ChevronRight />}
+                      onClick={() => setOpen(OVERLAYS.Turbo)}
+                    />
+                  )}
+                </div>
+
+                <div className="dev-tools-indicator-footer">
+                  <MenuItem
+                    data-preferences
+                    label="Preferences"
+                    value={<GearIcon />}
+                    onClick={() => setOpen(OVERLAYS.Preferences)}
+                    index={isTurbopack ? 2 : 3}
+                  />
+                  {process.env.__NEXT_DEVTOOL_SEGMENT_EXPLORER ? (
+                    <MenuItem
+                      data-segment-explorer
+                      label="Segment Explorer"
+                      value={<ChevronRight />}
+                      onClick={() => setOpen(OVERLAYS.SegmentExplorer)}
+                      index={isTurbopack ? 3 : 4}
+                    />
+                  ) : null}
+                </div>
+              </Context.Provider>
             </div>
-          </Context.Provider>
-        </div>
+          )}
+        </>
       )}
     </Toast>
   )
diff --git a/packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx b/packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx
@@ -11,6 +11,7 @@ import { RenderError } from './container/runtime-error/render-error'
 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 { DevToolsPanel } from './components/dev-tools-panel/dev-tools-panel'
 
 export function DevOverlay({
   state,
@@ -46,6 +47,8 @@ export function DevOverlay({
                 />
               )}
 
+              {state.isDevToolsPanelOpen && <DevToolsPanel />}
+
               <ErrorOverlay
                 state={state}
                 dispatch={dispatch}
diff --git a/packages/next/src/next-devtools/dev-overlay/shared.ts b/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>
 
@@ -49,6 +50,7 @@ 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_DEV_TOOLS_PANEL_TOGGLE = 'dev-tools-panel-toggle'
 
 export const STORAGE_KEY_THEME = '__nextjs-dev-tools-theme'
 export const STORAGE_KEY_POSITION = '__nextjs-dev-tools-position'
@@ -121,6 +123,10 @@ export interface RenderingIndicatorHideAction {
   type: typeof ACTION_RENDERING_INDICATOR_HIDE
 }
 
+export interface DevToolsPanelToggleAction {
+  type: typeof ACTION_DEV_TOOLS_PANEL_TOGGLE
+}
+
 export type DispatcherEvent =
   | BuildOkAction
   | BuildErrorAction
@@ -139,6 +145,7 @@ export type DispatcherEvent =
   | BuildingIndicatorHideAction
   | RenderingIndicatorShowAction
   | RenderingIndicatorHideAction
+  | DevToolsPanelToggleAction
 
 const REACT_ERROR_STACK_BOTTOM_FRAME_REGEX =
   // 1st group: v8
@@ -177,6 +184,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 +347,9 @@ export function useErrorOverlayReducer(
         case ACTION_RENDERING_INDICATOR_HIDE: {
           return { ...state, renderingIndicator: false }
         }
+        case ACTION_DEV_TOOLS_PANEL_TOGGLE: {
+          return { ...state, isDevToolsPanelOpen: !state.isDevToolsPanelOpen }
+        }
         default: {
           return state
         }
diff --git a/packages/next/src/next-devtools/dev-overlay/styles/component-styles.tsx b/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 { DEV_TOOLS_PANEL_STYLES } from '../components/dev-tools-panel/dev-tools-panel'
 
 export function ComponentStyles() {
   return (
@@ -53,6 +54,7 @@ export function ComponentStyles() {
         ${DEV_TOOLS_INFO_ROUTE_INFO_STYLES}
         ${DEV_TOOLS_INFO_USER_PREFERENCES_STYLES}
         ${DEV_TOOLS_INFO_RENDER_FILES_STYLES}
+        ${DEV_TOOLS_PANEL_STYLES}
         ${FADER_STYLES}
       `}
     </style>
