Highlight currently used image of image-set()
Categories
(DevTools :: Inspector: Rules, enhancement)
Tracking
(Not tracked)
People
(Reporter: jsnkuhn, Unassigned)
References
(Blocks 1 open bug)
Details
(Keywords: dev-doc-needed)
Attachments
(1 file)
(deleted),
image/png
|
Details |
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:87.0) Gecko/20100101 Firefox/87.0
Steps to reproduce:
Opened dev tools to trouble shoot an image-set() issue
Actual results:
got no indication which image from the set is being used
Expected results:
would be nice if dev-tools could indicate which image from the image-set()
is getting used. Or I guess more consistent with the way dev-tools tends to work might be crossing out set options that the browser discards. Might also be nice to indicate to developers why an image from the set discarded. IE is an image not used because of a resolution issue or a mime type issue.
Comment 1•3 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'DevTools::General' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.
Comment 2•3 years ago
|
||
I think, instead of crossing out the images that are not used, the one that is used should be highlighted like it's done for the used font of an element.
Though I agree there should be some indication for why that image was chosen and whether there are any issues with the other image sources.
Sebastian
just noticed that with background-image
the image path inside the url()
function becomes a link and sends to the image in a new tab. This is not the case with image-set()
urls.
where in devtools can you see the list of fonts with the used font in bold? Having trouble finding this.
Updated•3 years ago
|
Comment 5•3 years ago
|
||
For linking the URLs I've now created bug 1706448 because that can be implemented separately from the highlighting part.
where in devtools can you see the list of fonts with the used font in bold? Having trouble finding this.
Actually, they are underlined, which is conflicting with the underlining we'd want for linked URLs. So they should get some different highlighting like making them bold or italic. (And the used fonts should probably get updated as well to get a consistent UX.)
Sebastian
ahh, gottcha. I thought you were referring to the @font-face rule showing which font file type was being used. Pretty sure that info is not available anywhere in dev-tools?
I was wrong. You can get at what font format is being used in the fonts panel (hiding under the All Fonts on Page
toggle). It shows which font format is being used but puts the entire @font-face declaration in one line under another toggle. No matter how wide I make the screen I can't see all of it :-(
FYI, Chrome's current devtools implementation in the styles panel for this requires that you hover over the links inside the image-set. Hovering the image link for the chosen image option shows the image and related info in a dialog. Hovering over the non used image option link shows nothing. This is better than nothing I guess but it would be nice to have something in FF that shows which image option is selected without having to interact with the links.
If the URLs are going to be linked and therefore underlined. I don't know that Using an underline to show which image option is chosen is going to work. Would need some other styling option?
Description
•