prevent stack trace entries in console UI from being inline so a new line is always added between them and other printed elements (#198)

vzaidman · web-flow · commit e87564a24cf2 · 2025-08-06T12:11:08.000+01:00
diff --git 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
@@ -393,28 +393,33 @@
     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;
   flex-direction: column;
   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)) {
