Bug 234376 - Web Inspector: Elements tab DOM tree view reduces deeply-nested nodes to one character wide
Summary: Web Inspector: Elements tab DOM tree view reduces deeply-nested nodes to one ...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: Safari Technology Preview
Hardware: Mac (Apple Silicon) macOS 12
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-12-15 18:20 PST by Michael Bailey
Modified: 2021-12-22 18:20 PST (History)
2 users (show)

See Also:


Attachments
Testcase (3.68 KB, text/html)
2021-12-15 18:20 PST, Michael Bailey
no flags Details
Safari screenshot on a complex web app (809.16 KB, image/png)
2021-12-15 18:22 PST, Michael Bailey
no flags Details
Firefox screenshot on a complex web app (997.58 KB, image/png)
2021-12-15 18:22 PST, Michael Bailey
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Michael Bailey 2021-12-15 18:20:02 PST
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.
Comment 1 Michael Bailey 2021-12-15 18:22:27 PST
Created attachment 447307 [details]
Safari screenshot on a complex web app
Comment 2 Michael Bailey 2021-12-15 18:22:52 PST
Created attachment 447308 [details]
Firefox screenshot on a complex web app
Comment 3 Radar WebKit Bug Importer 2021-12-22 18:20:20 PST
<rdar://problem/86833831>