From f33a4b321613685f509c5aea34f1a39dd0c458f6 Mon Sep 17 00:00:00 2001
From: "Sebastian \"Sebbie\" Silbermann" <sebastian.silbermann@vercel.com>
Date: Sat, 8 Mar 2025 12:18:57 +0100
Subject: [PATCH] [dev-overlay] Dim ignore-listed callstack frames when shown
 (#76862)

---
 .../call-stack-frame/call-stack-frame.tsx     | 24 ++++++++-----------
 .../errors/call-stack/call-stack.tsx          |  2 +-
 test/lib/next-test-utils.ts                   |  2 +-
 3 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/packages/next/src/client/components/react-dev-overlay/ui/components/call-stack-frame/call-stack-frame.tsx b/packages/next/src/client/components/react-dev-overlay/ui/components/call-stack-frame/call-stack-frame.tsx
index 0cec358a48dde..ef8b89783772e 100644
--- a/packages/next/src/client/components/react-dev-overlay/ui/components/call-stack-frame/call-stack-frame.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/ui/components/call-stack-frame/call-stack-frame.tsx
@@ -8,8 +8,7 @@ import { useOpenInEditor } from '../../utils/use-open-in-editor'
 
 export const CallStackFrame: React.FC<{
   frame: OriginalStackFrame
-  index: number
-}> = function CallStackFrame({ frame, index }) {
+}> = function CallStackFrame({ frame }) {
   // TODO: ability to expand resolved frames
 
   const f: StackFrame = frame.originalStackFrame ?? frame.sourceStackFrame
@@ -39,17 +38,10 @@ export const CallStackFrame: React.FC<{
   return (
     <div
       data-nextjs-call-stack-frame
-      data-nextjs-call-stack-frame-ignored={!hasSource}
-      style={
-        {
-          '--index': index,
-        } as React.CSSProperties
-      }
+      data-nextjs-call-stack-frame-no-source={!hasSource}
+      data-nextjs-call-stack-frame-ignored={frame.ignored}
     >
-      <div
-        data-nextjs-frame-expanded={!frame.ignored}
-        className="call-stack-frame-method-name"
-      >
+      <div className="call-stack-frame-method-name">
         <HotlinkedText text={formattedMethod} />
         {hasSource && (
           <button onClick={open} className="open-in-editor-button">
@@ -77,17 +69,21 @@ export const CallStackFrame: React.FC<{
 }
 
 export const CALL_STACK_FRAME_STYLES = `
-  [data-nextjs-call-stack-frame-ignored] {
+  [data-nextjs-call-stack-frame-no-source] {
     padding: 6px 8px;
     margin-bottom: 4px;
 
     border-radius: var(--rounded-lg);
   }
 
-  [data-nextjs-call-stack-frame-ignored]:last-child {
+  [data-nextjs-call-stack-frame-no-source]:last-child {
     margin-bottom: 0;
   }
 
+  [data-nextjs-call-stack-frame-ignored="true"] {
+    opacity: 0.6;
+  }
+
   [data-nextjs-call-stack-frame] {
     user-select: text;
     display: block;
diff --git a/packages/next/src/client/components/react-dev-overlay/ui/components/errors/call-stack/call-stack.tsx b/packages/next/src/client/components/react-dev-overlay/ui/components/errors/call-stack/call-stack.tsx
index 02b11fdf49e99..1c7a56f387e8e 100644
--- a/packages/next/src/client/components/react-dev-overlay/ui/components/errors/call-stack/call-stack.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/ui/components/errors/call-stack/call-stack.tsx
@@ -62,7 +62,7 @@ export function CallStack({ frames, dialogResizerRef }: CallStackProps) {
       </div>
       {frames.map((frame, frameIndex) => {
         return !frame.ignored || isIgnoreListOpen ? (
-          <CallStackFrame key={frameIndex} frame={frame} index={frameIndex} />
+          <CallStackFrame key={frameIndex} frame={frame} />
         ) : null
       })}
     </div>
diff --git a/test/lib/next-test-utils.ts b/test/lib/next-test-utils.ts
index ab00e0a9eb876..84b0a914d8873 100644
--- a/test/lib/next-test-utils.ts
+++ b/test/lib/next-test-utils.ts
@@ -1676,7 +1676,7 @@ export async function getStackFramesContent(browser) {
   const stackFramesContent = (
     await Promise.all(
       stackFrameElements.map(async (frame) => {
-        const functionNameEl = await frame.$('[data-nextjs-frame-expanded]')
+        const functionNameEl = await frame.$('.call-stack-frame-method-name')
         const sourceEl = await frame.$('[data-has-source="true"]')
         const functionName = functionNameEl
           ? await functionNameEl.innerText()