[Webkit-unassigned] [Bug 271924] New: Web Inspector: Node having a long list of class names take up too much (vertical) space in DOM tree view

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=271924

            Bug ID: 271924
           Summary: Web Inspector: Node having a long list of class names
                    take up too much (vertical) space in DOM tree view
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: All
                OS: All
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Web Inspector
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: qianlangchen at apple.com
                CC: inspector-bugzilla-changes at group.apple.com

Created attachment 470676

  --> https://bugs.webkit.org/attachment.cgi?id=470676&action=review

Screenshot demo: Safari doesn't show nodes with long class list well

In the Elements tab's DOM tree view, if a node has a very long attribute (usually that's the case with the `class` attribute's value, a long list of class names), it can potentially take up a huge amount of space and obscure viewing the DOM tree's structure.

To see this problem in action, go to https://fullarmorfilms.com/ and open the inspector's Elements tab.

Perhaps we can introduce a visual option to "fold" the attribute value in some way, potentially by adding a "show all" button somehow? We can focus on the class attribute since that's what tends to get long.

   - Firefox already has this folding strategy for long attribute values. It doesn't have a "show all" button, but you can always double-click to edit and view the full text anyway, which seems fine.

This sort of folding + "show all" button pattern can also be used to tackle https://webkit.org/b/270992 (Console truncates long string outputs).

   - Chrome and Firefox both already do this in the inspector's console to display long texts.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20240330/8aa581b2/attachment.htm>