From 87b91d6dc7614953264e9f3829109ab807ca5a97 Mon Sep 17 00:00:00 2001
From: Vitali Zaidman <vzaidman@gmail.com>
Date: Mon, 4 Aug 2025 16:20:10 +0100
Subject: [PATCH] prevent stack trace entries in console UI from being inline
 so a new line is always added between them and other printed elements

---
 front_end/panels/console/ConsoleViewMessage.ts |  4 ++--
 front_end/panels/console/consoleView.css       | 17 +++++++++++------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/front_end/panels/console/ConsoleViewMessage.ts b/front_end/panels/console/ConsoleViewMessage.ts
index 30081ad4048f..b723c53260d0 100644
--- a/front_end/panels/console/ConsoleViewMessage.ts
+++ b/front_end/panels/console/ConsoleViewMessage.ts
@@ -989,7 +989,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     // The Exceptiondetails include script IDs for stack frames, which allows more accurate
     // linking.
     const formatErrorStack =
-        async(errorObj: SDK.RemoteObject.RemoteObject, includeCausedByPrefix = false): Promise<void> => {
+        async(errorObj: SDK.RemoteObject.RemoteObject, includeCausedByPrefix: boolean): Promise<void> => {
       const error = SDK.RemoteObject.RemoteError.objectAsError(errorObj);
       const [details, cause] = await Promise.all([error.exceptionDetails(), error.cause()]);
       let errorElement = this.tryFormatAsError(error.errorStack, details);
@@ -1015,7 +1015,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       }
     };
 
-    this.#formatErrorStackPromiseForTest = formatErrorStack(output);
+    this.#formatErrorStackPromiseForTest = formatErrorStack(output, /* includeCausedByPrefix */ false);
 
     return result;
   }
diff --git a/front_end/panels/console/consoleView.css b/front_end/panels/console/consoleView.css
index 965c99e98512..19576bc7b49e 100644
--- a/front_end/panels/console/consoleView.css
+++ b/front_end/panels/console/consoleView.css
@@ -393,20 +393,25 @@
     word-break: break-all;
   }
 
-  .formatted-stack-frame:has(.ignore-list-link) {
-    display: var(--display-ignored-formatted-stack-frame);
-    opacity: 60%;
+  .formatted-stack-frame {
+    display: var(--display-formatted-stack-frame-default);
 
-    /* Subsequent builtin stack frames are also treated as ignored */
-    & + .formatted-builtin-stack-frame {
+    &:has(.ignore-list-link) {
       display: var(--display-ignored-formatted-stack-frame);
       opacity: 60%;
+
+      /* Subsequent builtin stack frames are also treated as ignored */
+      & + .formatted-builtin-stack-frame {
+        display: var(--display-ignored-formatted-stack-frame);
+        opacity: 60%;
+      }
     }
   }
 }
 
 .console-message-stack-trace-wrapper {
   --override-display-stack-preview-toggle-link: none;
+  --display-formatted-stack-frame-default: block;
 
   flex: 1 1 auto;
   display: flex;
@@ -414,7 +419,7 @@
   align-items: stretch;
 
   &:has(div > .stack-preview-container.show-hidden-rows) {
-    --display-ignored-formatted-stack-frame: inherit;
+    --display-ignored-formatted-stack-frame: var(--display-formatted-stack-frame-default);
   }
 
   &:has(.formatted-stack-frame .ignore-list-link):has(.formatted-stack-frame .devtools-link:not(.ignore-list-link)) {