HTML logger should honor line breaks in stack traces

[RikkiGibson]

Description

Stack traces are difficult to read in HTML test results because the page doesn't have the line breaks from the raw stack trace string.

Steps to reproduce

1. Break some tests in Roslyn or really any project
2. Run the tests with any invocation using an HTML logger, such as dotnet test .\src\Compilers\CSharp\Test\Emit --framework netcoreapp3.1 --logger "html".
3. Open the test results HTML file

Let me know if you need me to try and adapt this invocation into the vstest console format somehow.

Expected behavior

The call stack of the failing test uses the line breaks of the original stack trace string. The below image works by wrapping the <span class="error-stack-trace"> in <pre>. I personally don't mind scrolling to the right to see the full call information for each line.

Actual behavior

Call stacks use the automatic line breaks that are normal for HTML instead of the line breaks present in the original stack trace string, making it very difficult to read.

[RikkiGibson]

It would actually be really nice if the HTML logger also respected the line breaks in error messages too, and used a monospaced font, just as the new VS Test Explorer results pane does.

[nohwnd]

@RikkiGibson that definitely looks nicer, but could we have newlines, monospace font, and line wrapping when the text is too long? I think that is the best of the two worlds. Scrolling left and right is very annoying, and @jfleisher is imho working on enabling line wrapping in Test Explorer as well.

Could you try adding this to the class

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

https://stackoverflow.com/questions/248011/how-do-i-wrap-text-in-a-pre-tag

[RikkiGibson]

I tried adding the pre-wrap to the CSS and it now looks like this:

Pretty nice!

I decided to go with just the one white-space: pre-wrap; property because it works in all the currently supported browsers (see the pre-wrap row in the table). If you prefer for me to use all the vendor-specific and legacy properties along with it I am happy to make the change :)

[nohwnd]

I decided to go with just the one white-space: pre-wrap; property because

That is good enough based on the table you provided above. We can always use the more compatible version later.

Pretty nice!

Looks pretty nice to me as well.

[RikkiGibson]

Thank you!