[devtools] port devtools scale to dispatcher

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

@@ -1,6 +1,5 @@
 import type { CSSProperties } from 'react'
 import type { OverlayState, OverlayDispatch } from '../../shared'
-import type { DevToolsScale } from '../errors/dev-tools-indicator/dev-tools-info/preferences'
 
 import { useState } from 'react'
 import { NextLogo } from './next-logo'
@@ -26,13 +25,11 @@ export function DevToolsIndicator({
   dispatch,
   errorCount,
   isBuildError,
-  scale,
 }: {
   state: OverlayState
   dispatch: OverlayDispatch
   errorCount: number
   isBuildError: boolean
-  scale: DevToolsScale
 }) {
   const [open, setOpen] = useState(false)
 
@@ -89,7 +86,7 @@ export function DevToolsIndicator({
           isDevBuilding={state.buildingIndicator}
           isDevRendering={state.renderingIndicator}
           isBuildError={isBuildError}
-          scale={scale}
+          scale={state.scale}
         />
       </Draggable>
     </Toast>

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

@@ -62,6 +62,7 @@ const state: OverlayState = {
   // TODO: This will be handled on the next stack——with proper story.
   isDevToolsPanelOpen: false,
   devToolsPosition: 'bottom-left',
+  scale: 1,
 }
 
 export const StaticRoute: Story = {

packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/preferences.ts

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import {
+  NEXT_DEV_TOOLS_SCALE,
   STORAGE_KEY_POSITION,
   STORAGE_KEY_SCALE,
   STORAGE_KEY_THEME,
@@ -26,14 +27,6 @@ export function getInitialPosition() {
 
 //////////////////////////////////////////////////////////////////////////////////////
 
-const BASE_SIZE = 16
-
-export const NEXT_DEV_TOOLS_SCALE = {
-  Small: BASE_SIZE / 14,
-  Medium: BASE_SIZE / 16,
-  Large: BASE_SIZE / 18,
-} as const
-
 export type DevToolsScale =
   (typeof NEXT_DEV_TOOLS_SCALE)[keyof typeof NEXT_DEV_TOOLS_SCALE]
 

packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.tsx

@@ -1,15 +1,18 @@
 import { useState, type HTMLProps } from 'react'
 import { css } from '../../../../utils/css'
 import EyeIcon from '../../../../icons/eye-icon'
-import { STORAGE_KEY_POSITION, STORAGE_KEY_THEME } from '../../../../shared'
+import {
+  NEXT_DEV_TOOLS_SCALE,
+  STORAGE_KEY_POSITION,
+  STORAGE_KEY_THEME,
+} from '../../../../shared'
 import LightIcon from '../../../../icons/light-icon'
 import DarkIcon from '../../../../icons/dark-icon'
 import SystemIcon from '../../../../icons/system-icon'
 import type { DevToolsInfoPropsCore } from './dev-tools-info'
 import { DevToolsInfo } from './dev-tools-info'
 import {
   getInitialTheme,
-  NEXT_DEV_TOOLS_SCALE,
   type DevToolsIndicatorPosition,
   type DevToolsScale,
 } from './preferences'

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

@@ -13,6 +13,7 @@ import {
   ACTION_ERROR_OVERLAY_CLOSE,
   ACTION_ERROR_OVERLAY_OPEN,
   ACTION_ERROR_OVERLAY_TOGGLE,
+  NEXT_DEV_TOOLS_SCALE,
 } from './shared'
 
 const meta: Meta<typeof DevOverlay> = {
@@ -99,6 +100,7 @@ const initialState: OverlayState = {
   isErrorOverlayOpen: false,
   isDevToolsPanelOpen: false,
   devToolsPosition: 'bottom-left',
+  scale: NEXT_DEV_TOOLS_SCALE.Medium,
 }
 
 function useOverlayReducer() {

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

@@ -41,7 +41,6 @@ export function DevOverlay({
                 (process.env.__NEXT_DEVTOOL_NEW_PANEL_UI ? (
                   <>
                     <DevToolsIndicatorNew
-                      scale={scale}
                       state={state}
                       dispatch={dispatch}
                       errorCount={totalErrorCount}

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

@@ -10,6 +10,14 @@ import { isConsoleError } from '../shared/console-error'
 
 export type Corners = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
 
+const BASE_SIZE = 16
+
+export const NEXT_DEV_TOOLS_SCALE = {
+  Small: BASE_SIZE / 14,
+  Medium: BASE_SIZE / 16,
+  Large: BASE_SIZE / 18,
+}
+
 type FastRefreshState =
   /** No refresh in progress. */
   | { type: 'idle' }
@@ -33,6 +41,7 @@ export interface OverlayState {
   isErrorOverlayOpen: boolean
   isDevToolsPanelOpen: boolean
   devToolsPosition: Corners
+  scale: number
 }
 export type OverlayDispatch = React.Dispatch<DispatcherEvent>
 
@@ -61,6 +70,7 @@ export const ACTION_DEVTOOLS_PANEL_CLOSE = 'devtools-panel-close'
 export const ACTION_DEVTOOLS_PANEL_TOGGLE = 'devtools-panel-toggle'
 
 export const ACTION_DEVTOOLS_POSITION = 'devtools-position'
+export const ACTION_DEVTOOLS_SCALE = 'devtools-scale'
 
 export const STORAGE_KEY_THEME = '__nextjs-dev-tools-theme'
 export const STORAGE_KEY_POSITION = '__nextjs-dev-tools-position'
@@ -148,6 +158,11 @@ export interface DevToolsIndicatorPositionAction {
   devToolsPosition: Corners
 }
 
+export interface DevToolsScaleAction {
+  type: typeof ACTION_DEVTOOLS_SCALE
+  scale: number
+}
+
 export type DispatcherEvent =
   | BuildOkAction
   | BuildErrorAction
@@ -170,6 +185,7 @@ export type DispatcherEvent =
   | DevToolsPanelCloseAction
   | DevToolsPanelToggleAction
   | DevToolsIndicatorPositionAction
+  | DevToolsScaleAction
 
 const REACT_ERROR_STACK_BOTTOM_FRAME_REGEX =
   // 1st group: v8
@@ -210,6 +226,7 @@ export const INITIAL_OVERLAY_STATE: Omit<
   debugInfo: { devtoolsFrontendUrl: undefined },
   isDevToolsPanelOpen: false,
   devToolsPosition: 'bottom-left',
+  scale: NEXT_DEV_TOOLS_SCALE.Medium,
 }
 
 function getInitialState(
@@ -384,6 +401,9 @@ export function useErrorOverlayReducer(
         case ACTION_DEVTOOLS_POSITION: {
           return { ...state, devToolsPosition: action.devToolsPosition }
         }
+        case ACTION_DEVTOOLS_SCALE: {
+          return { ...state, scale: action.scale }
+        }
         default: {
           return state
         }