Bug 234376

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:

Razvan Caliman <rcaliman>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

inspector-bugzilla-changes, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari Technology Preview

Hardware:

Mac (Apple Silicon)

OS:

macOS 12

Attachments:

Description	Flags
Testcase	none
Safari screenshot on a complex web app	none
Firefox screenshot on a complex web app	none
Screenshot: Before	none
Screenshot: After	none

Michael Bailey

Reported 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.

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
Screenshot: Before (499.36 KB, image/png) 2024-10-25 14:26 PDT, Razvan Caliman	no flags	Details
Screenshot: After (537.49 KB, image/png) 2024-10-25 14:26 PDT, Razvan Caliman	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Michael Bailey

Comment 1 2021-12-15 18:22:27 PST

Created attachment 447307 [details] Safari screenshot on a complex web app

Michael Bailey

Comment 2 2021-12-15 18:22:52 PST

Created attachment 447308 [details] Firefox screenshot on a complex web app

Radar WebKit Bug Importer

Comment 3 2021-12-22 18:20:20 PST

<rdar://problem/86833831>

Razvan Caliman

Comment 4 2024-10-25 14:17:21 PDT

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

Razvan Caliman

Comment 5 2024-10-25 14:26:24 PDT

Created attachment 473051 [details] Screenshot: Before

Razvan Caliman

Comment 6 2024-10-25 14:26:39 PDT

Created attachment 473052 [details] Screenshot: After

EWS

Comment 7 2024-11-05 09:42:36 PST

Committed 286163@main (c0cef41981cc): <https://commits.webkit.org/286163@main> Reviewed commits have been landed. Closing PR #35738 and removing active labels.

EWS

Comment 8 2024-11-21 06:59:53 PST

Committed 283286.515@safari-7620-branch (2f45443a540c): <https://commits.webkit.org/283286.515@safari-7620-branch> Reviewed commits have been landed. Closing PR #2318 and removing active labels.

Michael Bailey

Comment 9 2024-11-24 13:34:30 PST

Much more usable in STP 208. Thanks!

Note You need to log in before you can comment on or make changes to this bug.