Bug 296753 – Web Inspector: DOM element previews in Object Tree outlines show newlines and indentation

• Component: Web Inspector
• Status: RESOLVED FIXED

[Razvan Caliman]

Created attachment 476237 [details]
test case

Elements in HTML that have newlines or indentation in their values show up verbatim in previews in ObjectTree outlines.

This looks bad when showing a NodeList (return of `document.querySelectorAll()`) or an Array of elements in the Console.

Steps to reproduce:
- open the attached test case
- in the Console, run `document.querySelectorAll('body')`

Result:
The messy newlines and indentation from the markup shows up in the element preview of the NodeList. 
After expanding the preview, formatted node is shown.

This occurs in the Console because `white-space: pre-wrap` is inherited by descendants of the console message.

```
.console-message-body {
   white-space: pre-wrap;
}
```

[Radar WebKit Bug Importer]

<rdar://problem/157225532>

[Razvan Caliman]

Created attachment 476238 [details]
Screenshot of issue - Console

[Razvan Caliman]

Pull request: https://github.com/WebKit/WebKit/pull/48909

[EWS]

Committed 298626@main (406af9d4a917): <https://commits.webkit.org/298626@main>

Reviewed commits have been landed. Closing PR #48909 and removing active labels.