Bug 222057 - Web Inspector: Truncate long node display names in Grid Overlay list
Summary: Web Inspector: Truncate long node display names in Grid Overlay list
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Razvan Caliman
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-02-17 11:12 PST by Razvan Caliman
Modified: 2021-02-19 10:54 PST (History)
5 users (show)

See Also:


Attachments
Screenshot of grid overlay list with long node display names (125.23 KB, image/jpeg)
2021-02-17 11:12 PST, Razvan Caliman
no flags Details
Reduced sample case with truncation working (1.75 KB, text/html)
2021-02-17 11:15 PST, Razvan Caliman
no flags Details
=WIP (830 bytes, patch)
2021-02-17 11:19 PST, Razvan Caliman
no flags Details | Formatted Diff | Diff
Patch (5.64 KB, patch)
2021-02-18 08:22 PST, Razvan Caliman
no flags Details | Formatted Diff | Diff
Patch (5.64 KB, patch)
2021-02-18 11:22 PST, Razvan Caliman
no flags Details | Formatted Diff | Diff
Patch (5.59 KB, patch)
2021-02-19 07:46 PST, Razvan Caliman
no flags Details | Formatted Diff | Diff
Patch (5.58 KB, patch)
2021-02-19 09:43 PST, Razvan Caliman
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Razvan Caliman 2021-02-17 11:12:42 PST
Created attachment 420676 [details]
Screenshot of grid overlay list with long node display names

See attached screenshot.

When node display names are too long (ex: long CSS class name), color swatches are pushed off screen.
Comment 1 Razvan Caliman 2021-02-17 11:15:12 PST
Created attachment 420678 [details]
Reduced sample case with truncation working

Basic sample using the same markup from Web Inspector but with applied minimal CSS to achieve truncation.
Comment 2 Razvan Caliman 2021-02-17 11:19:07 PST
Created attachment 420681 [details]
=WIP

WIP perplexigly not working in Web Inspector UI despite using the same CSS as the basic sample attached
Comment 3 Razvan Caliman 2021-02-18 08:22:21 PST
Created attachment 420829 [details]
Patch
Comment 4 BJ Burg 2021-02-18 09:35:29 PST
Comment on attachment 420829 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=420829&action=review

r=me with class name fix

> Source/WebInspectorUI/UserInterface/Views/CSSGridSection.css:38
> +.css-grid-section .node-overlay-list__item-container {

Please replace __ with -, we don't use underscores in class names in this codebase.
Comment 5 Razvan Caliman 2021-02-18 11:22:46 PST
Created attachment 420857 [details]
Patch

Carry over R+
Comment 6 EWS 2021-02-18 12:38:38 PST
The 'validate-changelog' command is currently deprecated due to believed non-use; if it forms part of your workflow, please comment on https://bugs.webkit.org/show_bug.cgi?id=221991 and please include the command you ran, even if others have already mentioned it
ChangeLog entry in Source/WebInspectorUI/ChangeLog contains OOPS!.
Comment 7 Razvan Caliman 2021-02-19 07:46:02 PST
Created attachment 420965 [details]
Patch

Carry over R+; retry EWS bots with rebased patch
Comment 8 EWS 2021-02-19 09:39:26 PST
ChangeLog entry in Source/WebInspectorUI/ChangeLog contains OOPS!.
Comment 9 Razvan Caliman 2021-02-19 09:43:14 PST
Created attachment 420983 [details]
Patch

Carry over R+; update changelog with name of reviewer
Comment 10 EWS 2021-02-19 10:53:46 PST
Committed r273148: <https://commits.webkit.org/r273148>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 420983 [details].
Comment 11 Radar WebKit Bug Importer 2021-02-19 10:54:17 PST
<rdar://problem/74529013>