Revert "[dev-overlay] Fix error dialog resizing logic" (#77849)

Reverts #77830

This was breaking the react 18.3 tests, where the toggling stack frames
is not working in 18.3. Possibly broken by the ref related changes.

x-ref:
https://github.com/vercel/next.js/actions/runs/14274082641/job/40015934515

Author: huozhi

packages/next/src/client/components/react-dev-overlay/ui/components/dialog/dialog.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { useOnClickOutside } from '../../hooks/use-on-click-outside'
+import { useMeasureHeight } from '../../hooks/use-measure-height'
 
 export type DialogProps = {
   children?: React.ReactNode
@@ -36,6 +37,9 @@ const Dialog: React.FC<DialogProps> = function Dialog({
       : undefined
   )
 
+  const ref = React.useRef<HTMLDivElement | null>(null)
+  const [height, pristine] = useMeasureHeight(ref)
+
   useOnClickOutside(
     dialogRef.current,
     CSS_SELECTORS_TO_EXCLUDE_ON_CLICK_OUTSIDE,
@@ -98,7 +102,19 @@ const Dialog: React.FC<DialogProps> = function Dialog({
       }}
       {...props}
     >
-      {children}
+      <div
+        ref={dialogResizerRef}
+        data-nextjs-dialog-sizer
+        // [x] Don't animate on initial load
+        // [x] No duplicate elements
+        // [x] Responds to content growth
+        style={{
+          height,
+          transition: pristine ? undefined : 'height 250ms var(--timing-swift)',
+        }}
+      >
+        <div ref={ref}>{children}</div>
+      </div>
     </div>
   )
 }

packages/next/src/client/components/react-dev-overlay/ui/components/dialog/styles.ts

@@ -3,7 +3,7 @@ const styles = `
     --next-dialog-radius: var(--rounded-xl);
     --next-dialog-max-width: 960px;
     --next-dialog-row-padding: 16px;
-    --next-dialog-padding: 12px;
+    --next-dialog-padding-x: 12px;
     --next-dialog-notch-height: 42px;
     --next-dialog-border-width: 1px;
 
@@ -14,7 +14,7 @@ const styles = `
     max-width: var(--next-dialog-max-width);
     margin-right: auto;
     margin-left: auto;
-    scale: 0.97;
+    scale: 0.98;
     opacity: 0;
     transition-property: scale, opacity;
     transition-duration: var(--transition-duration);
@@ -28,7 +28,7 @@ const styles = `
     [data-nextjs-scroll-fader][data-side="top"] {
       left: 1px;
       top: calc(var(--next-dialog-notch-height) + var(--next-dialog-border-width));
-      width: calc(100% - var(--next-dialog-padding));
+      width: calc(100% - var(--next-dialog-padding-x));
       opacity: 0;
     }
   }
@@ -82,7 +82,7 @@ const styles = `
     display: flex;
     flex-direction: column;
     position: relative;
-    padding: var(--next-dialog-padding);
+    padding: 16px var(--next-dialog-padding-x);
   }
 
   [data-nextjs-dialog-content] > [data-nextjs-dialog-header] {

packages/next/src/client/components/react-dev-overlay/ui/components/errors/error-overlay-layout/error-overlay-layout.test.tsx

@@ -24,7 +24,6 @@ const renderTestComponent = () => {
       rendered={true}
       transitionDurationMs={200}
       isTurbopack={false}
-      errorCount={1}
       versionInfo={{
         installed: '15.0.0',
         staleness: 'fresh',

packages/next/src/client/components/react-dev-overlay/ui/components/errors/error-overlay-layout/error-overlay-layout.tsx

@@ -36,7 +36,6 @@ import type { ReadyRuntimeError } from '../../../../utils/get-error-by-type'
 import { EnvironmentNameLabel } from '../environment-name-label/environment-name-label'
 import { useFocusTrap } from '../dev-tools-indicator/utils'
 import { Fader } from '../../fader'
-import { Resizer } from '../../resizer'
 
 export interface ErrorOverlayLayoutProps extends ErrorBaseProps {
   errorMessage: ErrorMessageType
@@ -60,7 +59,6 @@ export function ErrorOverlayLayout({
   errorType,
   children,
   errorCode,
-  errorCount,
   error,
   debugInfo,
   isBuildError,
@@ -85,10 +83,6 @@ export function ErrorOverlayLayout({
     } as React.CSSProperties,
   }
 
-  const [animating, setAnimating] = React.useState(
-    Boolean(transitionDurationMs)
-  )
-
   const faderRef = React.useRef<HTMLDivElement | null>(null)
   const hasFooter = Boolean(footerMessage || errorCode)
   const dialogRef = React.useRef<HTMLDivElement | null>(null)
@@ -101,23 +95,9 @@ export function ErrorOverlayLayout({
     }
   }
 
-  function onTransitionEnd({ propertyName, target }: React.TransitionEvent) {
-    // We can only measure height after the `scale` transition ends,
-    // otherwise we will measure height as a multiple of the animating value
-    // which will give us an incorrect value.
-    if (propertyName === 'scale' && target === dialogRef.current) {
-      setAnimating(false)
-    }
-  }
-
   return (
     <ErrorOverlayOverlay fixed={isBuildError} {...animationProps}>
-      <div
-        data-nextjs-dialog-root
-        onTransitionEnd={onTransitionEnd}
-        ref={dialogRef}
-        {...animationProps}
-      >
+      <div data-nextjs-dialog-root ref={dialogRef} {...animationProps}>
         <ErrorOverlayNav
           runtimeErrors={runtimeErrors}
           activeIdx={activeIdx}
@@ -139,37 +119,30 @@ export function ErrorOverlayLayout({
             )
           }
         >
-          <Resizer
-            ref={dialogResizerRef}
-            measure={!animating}
-            data-nextjs-dialog-sizer
-          >
-            <DialogContent>
-              <ErrorOverlayDialogHeader>
-                <div
-                  className="nextjs__container_errors__error_title"
-                  // allow assertion in tests before error rating is implemented
-                  data-nextjs-error-code={errorCode}
-                >
-                  <span data-nextjs-error-label-group>
-                    <ErrorTypeLabel errorType={errorType} />
-                    {error.environmentName && (
-                      <EnvironmentNameLabel
-                        environmentName={error.environmentName}
-                      />
-                    )}
-                  </span>
-                  <ErrorOverlayToolbar error={error} debugInfo={debugInfo} />
-                </div>
-                <ErrorMessage errorMessage={errorMessage} />
-              </ErrorOverlayDialogHeader>
-
-              <ErrorOverlayDialogBody>{children}</ErrorOverlayDialogBody>
-            </DialogContent>
-          </Resizer>
+          <DialogContent>
+            <ErrorOverlayDialogHeader>
+              <div
+                className="nextjs__container_errors__error_title"
+                // allow assertion in tests before error rating is implemented
+                data-nextjs-error-code={errorCode}
+              >
+                <span data-nextjs-error-label-group>
+                  <ErrorTypeLabel errorType={errorType} />
+                  {error.environmentName && (
+                    <EnvironmentNameLabel
+                      environmentName={error.environmentName}
+                    />
+                  )}
+                </span>
+                <ErrorOverlayToolbar error={error} debugInfo={debugInfo} />
+              </div>
+              <ErrorMessage errorMessage={errorMessage} />
+            </ErrorOverlayDialogHeader>
 
+            <ErrorOverlayDialogBody>{children}</ErrorOverlayDialogBody>
+          </DialogContent>
           <ErrorOverlayBottomStack
-            errorCount={errorCount}
+            errorCount={runtimeErrors?.length ?? 0}
             activeIdx={activeIdx ?? 0}
           />
         </ErrorOverlayDialog>

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

@@ -13,21 +13,18 @@ export interface ErrorBaseProps {
   transitionDurationMs: number
   isTurbopack: boolean
   versionInfo: OverlayState['versionInfo']
-  errorCount: number
 }
 
 export function ErrorOverlay({
   state,
   runtimeErrors,
   isErrorOverlayOpen,
   setIsErrorOverlayOpen,
-  errorCount,
 }: {
   state: OverlayState
   runtimeErrors: ReadyRuntimeError[]
   isErrorOverlayOpen: boolean
   setIsErrorOverlayOpen: (value: boolean) => void
-  errorCount: number
 }) {
   const isTurbopack = !!process.env.TURBOPACK
 
@@ -41,7 +38,6 @@ export function ErrorOverlay({
     transitionDurationMs,
     isTurbopack,
     versionInfo: state.versionInfo,
-    errorCount,
   }
 
   if (state.buildError !== null) {

packages/next/src/client/components/react-dev-overlay/ui/components/resizer/index.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useRef, Suspense } from 'react'
+import { useState, useMemo, useEffect, useRef, Suspense } from 'react'
 import type { DebugInfo } from '../../types'
 import { Overlay } from '../components/overlay'
 import { RuntimeError } from './runtime-error'
@@ -89,6 +89,18 @@ export function Errors({
 }: ErrorsProps) {
   const dialogResizerRef = useRef<HTMLDivElement | null>(null)
 
+  useEffect(() => {
+    // Close the error overlay when pressing escape
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === 'Escape') {
+        onClose()
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [onClose])
+
   const isLoading = useMemo<boolean>(() => {
     return runtimeErrors.length < 1
   }, [runtimeErrors.length])

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

@@ -92,8 +92,9 @@ export const Default: Story = {
           src={imgApp}
           style={{
             width: '100%',
-            height: '100vh',
+            height: '100%',
             objectFit: 'contain',
+            filter: 'invert(1)',
           }}
         />
         <DevOverlay

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

@@ -50,7 +50,6 @@ export function DevOverlay({
               <ErrorOverlay
                 state={state}
                 runtimeErrors={runtimeErrors}
-                errorCount={totalErrorCount}
                 isErrorOverlayOpen={isErrorOverlayOpen}
                 setIsErrorOverlayOpen={setIsErrorOverlayOpen}
               />

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

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react'
+
+export function useMeasureHeight(
+  ref: React.RefObject<HTMLDivElement | null>
+): [number, boolean] {
+  const [pristine, setPristine] = useState<boolean>(true)
+  const [height, setHeight] = useState<number>(0)
+
+  useEffect(() => {
+    const el = ref.current
+
+    if (!el) {
+      return
+    }
+
+    const observer = new ResizeObserver(() => {
+      const { height: h } = el.getBoundingClientRect()
+      setHeight((prevHeight) => {
+        if (prevHeight !== 0) {
+          setPristine(false)
+        }
+        return h
+      })
+    })
+
+    observer.observe(el)
+    return () => {
+      observer.disconnect()
+      setPristine(true)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return [height, pristine]
+}

packages/next/src/client/components/react-dev-overlay/ui/hooks/use-measure-height.ts

@@ -1161,10 +1161,7 @@ describe('ReactRefreshLogBox', () => {
       `)
     }
 
-    // TODO: fix the broken collapsing in callstack
-    if (!isReact18) {
-      await toggleCollapseCallStackFrames(browser)
-    }
+    await toggleCollapseCallStackFrames(browser)
 
     // Expect more than the default amount of frames
     // The default stackTraceLimit results in max 9 [data-nextjs-call-stack-frame] elements