Bug 224693

Summary:

Web Inspector: Graphics Tab: card with list of saved recordings needs visual adjustments

Product:

WebKit

Reporter:

BJ Burg <bburg>

Component:

Web Inspector

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

bburg, inspector-bugzilla-changes, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

WebKit Local Build

Hardware:

All

OS:

All

Attachments:

Description	Flags
[SCREENSHOT] graphics recording card list	none

Description BJ Burg 2021-04-16 14:38:12 PDT

STEPS TO REPRODUCE:

1. Create a canvas recording on acko.net
2. Navigate away from acko.net, go to the Graphics overview.

=> Saved Recordings card could use some visual attention

Summary of visual issues:

1. The heading does not match other heading font size & weight
2. The card is too tall, it should only overflow if its contents require it to.
3. Indentation is strange, I would have expected the icon to appear aligned under the heading.
4. The recording icon is black when Web Inspector is using dark theme.


A bigger issue, which I will file separately, is that there's no way to preview the recording without opening it. If we saved a screenshot of the last non-empty frame, it would be very helpful (either shown inline or in a hover popover).

Comment 1 Radar WebKit Bug Importer 2021-04-16 14:38:24 PDT

<rdar://problem/76779036>

Comment 2 BJ Burg 2021-04-16 14:38:50 PDT

Created attachment 426276 [details]
[SCREENSHOT] graphics recording card list