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

Author: vzaidman

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;
   }

front_end/panels/console/consoleView.css

@@ -44,6 +44,12 @@
   flex: 1 1 auto;
 }
 
+.console-sidebar-levels-info {
+  margin-left: var(--sys-size-3);
+  width: var(--sys-size-8);
+  height: var(--sys-size-8);
+}
+
 #console-issues-counter {
   margin-top: 0;
 }
@@ -358,10 +364,6 @@
   word-break: break-all;
 }
 
-#console-messages .devtools-link.ignore-list-link {
-  opacity: 60%;
-}
-
 #console-messages .devtools-link:focus-visible {
   background-color: transparent;
 }
@@ -393,28 +395,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)) {