| Summary: | Web Inspector: Elements tab DOM tree view reduces deeply-nested nodes to one character wide | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Michael Bailey <bugzilla> | ||||||||
| Component: | Web Inspector | Assignee: | Nobody <webkit-unassigned> | ||||||||
| Status: | NEW --- | ||||||||||
| Severity: | Normal | CC: | inspector-bugzilla-changes, webkit-bug-importer | ||||||||
| Priority: | P2 | Keywords: | InRadar | ||||||||
| Version: | Safari Technology Preview | ||||||||||
| Hardware: | Mac (Apple Silicon) | ||||||||||
| OS: | macOS 12 | ||||||||||
| Attachments: |
|
||||||||||
Created attachment 447307 [details]
Safari screenshot on a complex web app
Created attachment 447308 [details]
Firefox screenshot on a complex web app
|
Created attachment 447306 [details] Testcase Web Inspector's DOM tree prefers wrapping text rather than allowing horizontal scrolling. This is fine on simple pages, but on pages with deeply-nested DOM hierarchies (unfortunately common these days), the available width for nodes shrinks until they are one character wide. By comparison, Firefox's DOM inspector appears to enforce the same maximum width on each DOM node, and still allows horizontal scrolling for the tree as a whole. which is much more legible. STR: 1. On the attached test case, open Web Inspector and inspect the node that says "Inspect me" (using the default undocked Web Inspector width). Expected: The maximum width for each DOM node should be the same, regardless of depth, and the DOM tree view should scroll horizontally to accommodate deep hierarchies. Actual: As the DOM tree gets deeper, the maximum width for nodes at each level of depth gets narrower until they are one character wide.