[dev-overlay] Dim ignore-listed callstack frames when shown (#76862)

Author: eps1lon

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;

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>

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()