[devtools] port devtools scale to dispatcher

Author: devjiwonchoi

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/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
   indicatorPosition: 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_INDICATOR_POSITION = 'devtools-indicator-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'
@@ -150,6 +160,11 @@ export interface DevToolsIndicatorPositionAction {
   indicatorPosition: Corners
 }
 
+export interface DevToolsScaleAction {
+  type: typeof ACTION_DEVTOOLS_SCALE
+  scale: number
+}
+
 export type DispatcherEvent =
   | BuildOkAction
   | BuildErrorAction
@@ -172,6 +187,7 @@ export type DispatcherEvent =
   | DevToolsPanelCloseAction
   | DevToolsPanelToggleAction
   | DevToolsIndicatorPositionAction
+  | DevToolsScaleAction
 
 const REACT_ERROR_STACK_BOTTOM_FRAME_REGEX =
   // 1st group: v8
@@ -212,8 +228,12 @@ export const INITIAL_OVERLAY_STATE: Omit<
   debugInfo: { devtoolsFrontendUrl: undefined },
   isDevToolsPanelOpen: false,
   indicatorPosition:
-    (localStorage.getItem(STORAGE_KEY_POSITION) as DevToolsIndicatorPosition) ??
+    (localStorage.getItem(STORAGE_KEY_POSITION) as Corners) ??
     'bottom-left',
+  scale:
+    localStorage.getItem(STORAGE_KEY_SCALE)
+      ? Number(localStorage.getItem(STORAGE_KEY_SCALE))
+      : NEXT_DEV_TOOLS_SCALE.Medium,
 }
 
 function getInitialState(
@@ -388,6 +408,9 @@ export function useErrorOverlayReducer(
         case ACTION_DEVTOOLS_INDICATOR_POSITION: {
           return { ...state, indicatorPosition: action.indicatorPosition }
         }
+        case ACTION_DEVTOOLS_SCALE: {
+          return { ...state, scale: action.scale }
+        }
         default: {
           return state
         }