Add inline image preview to table formatter #1636
Conversation
|
Looks very nice. :) I'd put them in the left column, before the URL. The network panel has icons like that. |
Sure, we can do that. It'll require some reworking of the CSS. Right now we make the URL 40% of the content width so you see most of it. But that's probably nicer. |
|
@paulirish PTAL. Moved the image preview to the left of the URL.
Also removed the flexbox stuff on the tables. |
|
niiiice this looks great |
lighthouse-core/formatters/table.js
Outdated
| @@ -91,6 +94,11 @@ class Table extends Formatter { | |||
| } | |||
|
|
|||
| switch (key) { | |||
| case 'previewUrl': | |||
| if (/^image/.test(result.mimeType)) { | |||
There was a problem hiding this comment.
This feels like we're really doubling down on magic happening in the table formatter/assumptions about other keys that don't seem to have a relationship to the caller. What if preview were an object that containedurl and an optional mimeType? Do we have other use cases for non-image previews yet?
There was a problem hiding this comment.
Good idea. It is a bit magical.
Done.
Do we have other use cases for non-image previews yet?
Not sure yet, but we can certainly add additional ones now :)
| url, | ||
| url: URL.getDisplayName(image.url), | ||
| previewUrl: image.url, | ||
| mimeType: image.mimeType, |
There was a problem hiding this comment.
instead of mimeType you could use resourceType. The difference is that it'll report Image even if a jpg's mimetype was plaintext.
record.resourceType() == Common.resourceTypes.Image;but looking closer...
this would have to be done back in the gatherer. and we're already using mimetype to determine png/jpg anyway... So i guess it's moot in this case. Something to remember for the next one. :)
There was a problem hiding this comment.
Yeah I think a comment like this was made on my 4th network record PR, after this was already done :) Though in this case we specifically needed to check mimetype in the gatherer to avoid GIF/SVG/etc
|
PTAL |
R: @patrickhulce all
This adds image previews to the formatter. Clicking the previews opens the full size version.