Use details tag in collapsed call stacks (#45907)

Currently the collapsed frameworks uses a `<button>` and React to
show/hide the frames in the error overlay. This change utilizes the
native `<details>` tag instead to achieve the same behaviour.

The default `<details>` arrow is hidden to preserve the same look:

![image](https://user-images.githubusercontent.com/25056922/218769518-fc5ad1ef-fa1a-4d18-8027-adb24b870089.png)

Fixes NEXT-546

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the
feature request has been accepted for implementation before opening a
PR.
- [ ] Related issues linked using `fixes #number`
- [ ]
[e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/GroupedStackFrames.tsx

@@ -12,39 +12,34 @@ function FrameworkGroup({
   stackFrames: StackFramesGroup['stackFrames']
   all: boolean
 }) {
-  const [open, setOpen] = React.useState(false)
-  const toggleOpen = React.useCallback(() => setOpen((v) => !v), [])
-
   return (
     <>
-      <button
-        data-nextjs-call-stack-framework-button
-        data-state={open ? 'open' : 'closed'}
-        onClick={toggleOpen}
-        tabIndex={10} // Match CallStackFrame tabIndex
-      >
-        <svg
-          data-nextjs-call-stack-chevron-icon
-          fill="none"
-          height="20"
-          width="20"
-          shapeRendering="geometricPrecision"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="2"
-          viewBox="0 0 24 24"
+      <details data-nextjs-collapsed-call-stack-details>
+        <summary
+          tabIndex={10} // Match CallStackFrame tabIndex
         >
-          <path d="M9 18l6-6-6-6" />
-        </svg>
-        <FrameworkIcon framework={framework} />
-        {framework === 'react' ? 'React' : 'Next.js'}
-      </button>
-      {open
-        ? stackFrames.map((frame, index) => (
-            <CallStackFrame key={`call-stack-${index}-${all}`} frame={frame} />
-          ))
-        : null}
+          <svg
+            data-nextjs-call-stack-chevron-icon
+            fill="none"
+            height="20"
+            width="20"
+            shapeRendering="geometricPrecision"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
+          >
+            <path d="M9 18l6-6-6-6" />
+          </svg>
+          <FrameworkIcon framework={framework} />
+          {framework === 'react' ? 'React' : 'Next.js'}
+        </summary>
+
+        {stackFrames.map((frame, index) => (
+          <CallStackFrame key={`call-stack-${index}-${all}`} frame={frame} />
+        ))}
+      </details>
     </>
   )
 }

packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/index.tsx

@@ -178,14 +178,6 @@ export const styles = css`
     display: unset;
   }
 
-  [data-nextjs-call-stack-framework-button] {
-    border: none;
-    background: none;
-    display: flex;
-    align-items: center;
-    padding: 0;
-    margin: var(--size-gap-double) 0;
-  }
   [data-nextjs-call-stack-framework-icon] {
     margin-right: var(--size-gap);
   }
@@ -195,10 +187,26 @@ export const styles = css`
   [data-nextjs-call-stack-framework-icon='react'] {
     color: rgb(20, 158, 202);
   }
-  [data-nextjs-call-stack-framework-button][data-state='open']
-    > [data-nextjs-call-stack-chevron-icon] {
+  [data-nextjs-collapsed-call-stack-details][open]
+    [data-nextjs-call-stack-chevron-icon] {
     transform: rotate(90deg);
   }
+  [data-nextjs-collapsed-call-stack-details] summary {
+    display: flex;
+    align-items: center;
+    margin: var(--size-gap-double) 0;
+    list-style: none;
+  }
+  [data-nextjs-collapsed-call-stack-details] summary::-webkit-details-marker {
+    display: none;
+  }
+
+  [data-nextjs-collapsed-call-stack-details] h6 {
+    color: #666;
+  }
+  [data-nextjs-collapsed-call-stack-details] [data-nextjs-call-stack-frame] {
+    margin-bottom: var(--size-gap-double);
+  }
 `
 
 export { RuntimeError }

test/development/acceptance-app/ReactRefreshLogBox.test.ts

@@ -785,18 +785,6 @@ for (const variant of ['default', 'turbo']) {
           .elementByCss('[data-nextjs-data-runtime-error-collapsed-action]')
           .click()
 
-        const collapsedFrameworkGroups = await browser.elementsByCss(
-          "[data-nextjs-call-stack-framework-button][data-state='closed']"
-        )
-        for (const collapsedFrameworkButton of collapsedFrameworkGroups) {
-          // Open the collapsed framework groups, the callstack count should increase with each opened group
-          const callStackCountBeforeGroupOpened = await getCallStackCount()
-          await collapsedFrameworkButton.click()
-          expect(await getCallStackCount()).toBeGreaterThan(
-            callStackCountBeforeGroupOpened
-          )
-        }
-
         // Expect more than the default amount of frames
         // The default stackTraceLimit results in max 9 [data-nextjs-call-stack-frame] elements
         expect(await getCallStackCount()).toBeGreaterThan(9)