[dev-overlay]: add preference panel (#76522)

Adds user preferences for:

- Toggling theme (localstorage)
- Position (localstorage)
- Hiding the overlay (existing dev session heuristic)



https://github.com/user-attachments/assets/0f08ce66-4107-4751-80d3-a42d3315966a


![CleanShot 2025-02-25 at 17 59
11@2x](https://github.com/user-attachments/assets/e65fdfb0-23b3-4c47-b8af-f55dd60e7b95)

![CleanShot 2025-02-25 at 17 59
15@2x](https://github.com/user-attachments/assets/86d33590-18f7-44f6-acd2-9639c098476a)

Author: ztanner

packages/next/src/client/components/react-dev-overlay/shared.ts

@@ -38,6 +38,9 @@ export const ACTION_UNHANDLED_REJECTION = 'unhandled-rejection'
 export const ACTION_DEBUG_INFO = 'debug-info'
 export const ACTION_DEV_INDICATOR = 'dev-indicator'
 
+export const STORAGE_KEY_THEME = '__nextjs-dev-tools-theme'
+export const STORAGE_KEY_POSITION = '__nextjs-dev-tools-position'
+
 interface StaticIndicatorAction {
   type: typeof ACTION_STATIC_INDICATOR
   staticIndicator: boolean

packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-indicator.stories.tsx

@@ -9,13 +9,7 @@ const meta: Meta<typeof DevToolsIndicator> = {
   parameters: {
     layout: 'centered',
   },
-  argTypes: {
-    position: {
-      control: 'select',
-      options: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
-      defaultValue: 'bottom-left',
-    },
-  },
+  argTypes: {},
   decorators: [
     withShadowPortal,
     // Test for high z-index

packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-indicator.tsx

@@ -1,5 +1,5 @@
 import type { Dispatch, SetStateAction } from 'react'
-import type { OverlayState } from '../../../../shared'
+import { STORAGE_KEY_POSITION, type OverlayState } from '../../../../shared'
 
 import { useState, useEffect, useRef, createContext, useContext } from 'react'
 import { Toast } from '../../toast'
@@ -9,7 +9,8 @@ import { useIsDevRendering } from '../../../../utils/dev-indicator/dev-render-in
 import { useDelayedRender } from '../../../hooks/use-delayed-render'
 import { TurbopackInfo } from './dev-tools-info/turbopack-info'
 import { RouteInfo } from './dev-tools-info/route-info'
-import { StopIcon } from '../../../icons/stop-icon'
+import GearIcon from '../../../icons/gear-icon'
+import { UserPreferences } from './dev-tools-info/user-preferences'
 
 // TODO: add E2E tests to cover different scenarios
 
@@ -18,23 +19,20 @@ const INDICATOR_POSITION =
     .__NEXT_DEV_INDICATOR_POSITION as typeof window.__NEXT_DEV_INDICATOR_POSITION) ||
   'bottom-left'
 
-type DevToolsIndicatorPosition = typeof INDICATOR_POSITION
+export type DevToolsIndicatorPosition = typeof INDICATOR_POSITION
 
 export function DevToolsIndicator({
   state,
   errorCount,
   isBuildError,
   setIsErrorOverlayOpen,
-  position = INDICATOR_POSITION,
 }: {
   state: OverlayState
   errorCount: number
   isBuildError: boolean
   setIsErrorOverlayOpen: (
     isErrorOverlayOpen: boolean | ((prev: boolean) => boolean)
   ) => void
-  // Technically this prop isn't needed, but useful for testing.
-  position?: DevToolsIndicatorPosition
 }) {
   const [isDevToolsIndicatorVisible, setIsDevToolsIndicatorVisible] =
     useState(true)
@@ -53,7 +51,6 @@ export function DevToolsIndicator({
       }}
       setIsErrorOverlayOpen={setIsErrorOverlayOpen}
       isTurbopack={!!process.env.TURBOPACK}
-      position={position}
       disabled={state.disableDevIndicator || !isDevToolsIndicatorVisible}
       isBuildError={isBuildError}
     />
@@ -73,13 +70,25 @@ interface C {
 
 const Context = createContext({} as C)
 
+function getInitialPosition() {
+  if (
+    typeof localStorage !== 'undefined' &&
+    localStorage.getItem(STORAGE_KEY_POSITION)
+  ) {
+    return localStorage.getItem(
+      STORAGE_KEY_POSITION
+    ) as DevToolsIndicatorPosition
+  }
+
+  return INDICATOR_POSITION
+}
+
 function DevToolsPopover({
   routerType,
   disabled,
   issueCount,
   isStaticRoute,
   isTurbopack,
-  position,
   isBuildError,
   hide,
   setIsErrorOverlayOpen,
@@ -90,7 +99,6 @@ function DevToolsPopover({
   isStaticRoute: boolean
   semver: string | undefined
   isTurbopack: boolean
-  position: DevToolsIndicatorPosition
   isBuildError: boolean
   hide: () => void
   setIsErrorOverlayOpen: (
@@ -103,10 +111,14 @@ function DevToolsPopover({
   const triggerTurbopackRef = useRef<HTMLButtonElement | null>(null)
   const routeInfoRef = useRef<HTMLElement>(null)
   const triggerRouteInfoRef = useRef<HTMLButtonElement | null>(null)
+  const preferencesRef = useRef<HTMLElement>(null)
+  const triggerPreferencesRef = useRef<HTMLButtonElement | null>(null)
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [isTurbopackInfoOpen, setIsTurbopackInfoOpen] = useState(false)
   const [isRouteInfoOpen, setIsRouteInfoOpen] = useState(false)
+  const [isPreferencesOpen, setIsPreferencesOpen] = useState(false)
   const [selectedIndex, setSelectedIndex] = useState(-1)
+  const [position, setPosition] = useState(getInitialPosition())
 
   // This hook lets us do an exit animation before unmounting the component
   const { mounted: menuMounted, rendered: menuRendered } = useDelayedRender(
@@ -128,6 +140,11 @@ function DevToolsPopover({
       enterDelay: 0,
       exitDelay: ANIMATE_OUT_DURATION_MS,
     })
+  const { mounted: preferencesMounted, rendered: preferencesRendered } =
+    useDelayedRender(isPreferencesOpen, {
+      enterDelay: 0,
+      exitDelay: ANIMATE_OUT_DURATION_MS,
+    })
 
   // Features to make the menu accessible
   useFocusTrap(menuRef, triggerRef, isMenuOpen)
@@ -146,7 +163,13 @@ function DevToolsPopover({
     isRouteInfoOpen,
     closeRouteInfo
   )
-
+  useFocusTrap(preferencesRef, triggerPreferencesRef, isPreferencesOpen)
+  useClickOutside(
+    preferencesRef,
+    triggerPreferencesRef,
+    isPreferencesOpen,
+    closePreferences
+  )
   function select(index: number | 'first' | 'last') {
     if (index === 'first') {
       const all = menuRef.current?.querySelectorAll('[role="menuitem"]')
@@ -254,6 +277,15 @@ function DevToolsPopover({
     setIsRouteInfoOpen(false)
   }
 
+  function closePreferences() {
+    setIsPreferencesOpen(false)
+  }
+
+  function handleHideDevtools() {
+    closePreferences()
+    hide()
+  }
+
   const [vertical, horizontal] = position.split('-', 2)
 
   return (
@@ -316,6 +348,21 @@ function DevToolsPopover({
         />
       )}
 
+      {preferencesMounted && (
+        <UserPreferences
+          ref={preferencesRef}
+          isOpen={isPreferencesOpen}
+          hide={handleHideDevtools}
+          setPosition={setPosition}
+          position={position}
+          style={{
+            [vertical]: 'calc(100% + 8px)',
+            [horizontal]: 0,
+          }}
+          data-rendered={preferencesRendered}
+        />
+      )}
+
       {menuMounted && (
         <div
           ref={menuRef}
@@ -381,11 +428,10 @@ function DevToolsPopover({
 
             <div className="dev-tools-indicator-footer">
               <MenuItem
-                data-hide-dev-tools
-                title="Hide Dev Tools for the current server session or a day."
-                label="Hide for Dev Session"
-                value={<StopIcon />}
-                onClick={hide}
+                data-preferences
+                label="Preferences"
+                value={<GearIcon />}
+                onClick={() => setIsPreferencesOpen(true)}
                 index={isTurbopack ? 2 : 3}
               />
             </div>

packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/dev-tools-info.tsx

@@ -8,34 +8,40 @@ export function DevToolsInfo({
 }: {
   title: string
   children: React.ReactNode
-  learnMoreLink: string
-  setIsOpen: (isOpen: boolean) => void
-  setPreviousOpen: (isOpen: boolean) => void
+  learnMoreLink?: string
+  setIsOpen?: (isOpen: boolean) => void
+  setPreviousOpen?: (isOpen: boolean) => void
 }) {
+  const hasActionButtons = Boolean(
+    learnMoreLink && setIsOpen && setPreviousOpen
+  )
+
   return (
     <div data-info-popover {...props}>
       <div className="dev-tools-info-container">
         <h1 className="dev-tools-info-title">{title}</h1>
         {children}
-        <div className="dev-tools-info-button-container">
-          <button
-            className="dev-tools-info-close-button"
-            onClick={() => {
-              setIsOpen(false)
-              setPreviousOpen(true)
-            }}
-          >
-            Close
-          </button>
-          <a
-            className="dev-tools-info-learn-more-button"
-            href={learnMoreLink}
-            target="_blank"
-            rel="noreferrer noopener"
-          >
-            Learn More
-          </a>
-        </div>
+        {hasActionButtons && (
+          <div className="dev-tools-info-button-container">
+            <button
+              className="dev-tools-info-close-button"
+              onClick={() => {
+                setIsOpen?.(false)
+                setPreviousOpen?.(true)
+              }}
+            >
+              Close
+            </button>
+            <a
+              className="dev-tools-info-learn-more-button"
+              href={learnMoreLink}
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              Learn More
+            </a>
+          </div>
+        )}
       </div>
     </div>
   )
@@ -69,14 +75,14 @@ export const DEV_TOOLS_INFO_STYLES = `
   }
 
   .dev-tools-info-container {
-    padding: 6px;
+    padding: 12px;
   }
 
   .dev-tools-info-title {
     padding: 8px 6px;
     color: var(--color-gray-1000);
-    font-size: var(--size-14);
-    font-weight: 500;
+    font-size: var(--size-16);
+    font-weight: 600;
     line-height: var(--size-20);
     margin: 0;
   }

packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/route-info.tsx

@@ -146,7 +146,4 @@ export function RouteInfo({
   )
 }
 
-export const DEV_TOOLS_INFO_ROUTE_INFO_STYLES = `
-  .dev-tools-info-link {
-  }
-`
+export const DEV_TOOLS_INFO_ROUTE_INFO_STYLES = ``