From 54768ac82e65e8507609912a361a87a44666506f Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 23 Oct 2024 23:33:25 +0200
Subject: [PATCH] Remove the bottom collapse button in dev overlay (#71658)

---
 .../internal/container/RuntimeError/index.tsx | 57 ++++---------------
 .../acceptance-app/ReactRefreshLogBox.test.ts | 24 --------
 2 files changed, 12 insertions(+), 69 deletions(-)

diff --git a/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/index.tsx b/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/index.tsx
index 2d6710524a3f8..6f0a0e1e22f6a 100644
--- a/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/index.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/index.tsx
@@ -33,30 +33,18 @@ export function RuntimeError({ error }: RuntimeErrorProps) {
       }
     }, [error.frames])
 
-  const [all, setAll] = React.useState(firstFrame == null)
-
-  const {
-    canShowMore,
-    leadingFramesGroupedByFramework,
-    stackFramesGroupedByFramework,
-  } = React.useMemo(() => {
-    const leadingFrames = allLeadingFrames.filter((f) => f.expanded || all)
-    const visibleCallStackFrames = allCallStackFrames.filter(
-      (f) => f.expanded || all
-    )
-
-    return {
-      canShowMore:
-        allCallStackFrames.length !== visibleCallStackFrames.length ||
-        (all && firstFrame != null),
-
-      stackFramesGroupedByFramework:
-        groupStackFramesByFramework(allCallStackFrames),
-
-      leadingFramesGroupedByFramework:
-        groupStackFramesByFramework(leadingFrames),
-    }
-  }, [all, allCallStackFrames, allLeadingFrames, firstFrame])
+  const { leadingFramesGroupedByFramework, stackFramesGroupedByFramework } =
+    React.useMemo(() => {
+      const leadingFrames = allLeadingFrames.filter((f) => f.expanded)
+
+      return {
+        stackFramesGroupedByFramework:
+          groupStackFramesByFramework(allCallStackFrames),
+
+        leadingFramesGroupedByFramework:
+          groupStackFramesByFramework(leadingFrames),
+      }
+    }, [allCallStackFrames, allLeadingFrames])
 
   return (
     <React.Fragment>
@@ -82,32 +70,11 @@ export function RuntimeError({ error }: RuntimeErrorProps) {
           />
         </React.Fragment>
       ) : undefined}
-      {canShowMore ? (
-        <React.Fragment>
-          <button
-            tabIndex={10}
-            data-nextjs-data-runtime-error-collapsed-action
-            type="button"
-            onClick={() => setAll(!all)}
-          >
-            {all ? 'Hide' : 'Show'} collapsed frames
-          </button>
-        </React.Fragment>
-      ) : undefined}
     </React.Fragment>
   )
 }
 
 export const styles = css`
-  button[data-nextjs-data-runtime-error-collapsed-action] {
-    background: none;
-    border: none;
-    padding: 0;
-    font-size: var(--size-font-small);
-    line-height: var(--size-font-bigger);
-    color: var(--color-accents-3);
-  }
-
   [data-nextjs-call-stack-frame]:not(:last-child),
   [data-nextjs-component-stack-frame]:not(:last-child) {
     margin-bottom: var(--size-gap-double);
diff --git a/test/development/acceptance-app/ReactRefreshLogBox.test.ts b/test/development/acceptance-app/ReactRefreshLogBox.test.ts
index a15c58df37be3..8bac1777ebed2 100644
--- a/test/development/acceptance-app/ReactRefreshLogBox.test.ts
+++ b/test/development/acceptance-app/ReactRefreshLogBox.test.ts
@@ -803,12 +803,6 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
       expect(source).toContain('app/page.js')
       expect(source).toContain(`throw new Error('Client error')`)
 
-      await expect(
-        browser.hasElementByCssSelector(
-          '[data-nextjs-data-runtime-error-collapsed-action]'
-        )
-      ).resolves.toEqual(false)
-
       const stackFrameElements = await browser.elementsByCss(
         '[data-nextjs-call-stack-frame]'
       )
@@ -844,12 +838,6 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
       expect(source).toContain('app/page.js')
       expect(source).toContain(`throw new Error('Server error')`)
 
-      await expect(
-        browser.hasElementByCssSelector(
-          '[data-nextjs-data-runtime-error-collapsed-action]'
-        )
-      ).resolves.toEqual(false)
-
       const stackFrameElements = await browser.elementsByCss(
         '[data-nextjs-call-stack-frame]'
       )
@@ -893,12 +881,6 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
         `throw new Error("This is an error from an anonymous function")`
       )
 
-      await expect(
-        browser.hasElementByCssSelector(
-          '[data-nextjs-data-runtime-error-collapsed-action]'
-        )
-      ).resolves.toEqual(false)
-
       const stackFrameElements = await browser.elementsByCss(
         '[data-nextjs-call-stack-frame]'
       )
@@ -963,12 +945,6 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
       expect(source).toContain('app/page.js')
       expect(source).toContain(`new URL("/", "invalid")`)
 
-      await expect(
-        browser.hasElementByCssSelector(
-          '[data-nextjs-data-runtime-error-collapsed-action]'
-        )
-      ).resolves.toEqual(false)
-
       const stackFrameElements = await browser.elementsByCss(
         '[data-nextjs-call-stack-frame]'
       )