Open Bug 1705947 Opened 3 years ago Updated 3 years ago

Highlight currently used image of image-set()

Categories

(DevTools :: Inspector: Rules, enhancement)

enhancement

Tracking

(Not tracked)

UNCONFIRMED

People

(Reporter: jsnkuhn, Unassigned)

References

(Blocks 1 open bug)

Details

(Keywords: dev-doc-needed)

Attachments

(1 file)

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.

Blocks: image-set

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.

Component: Untriaged → General
Product: Firefox → DevTools

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

Blocks: 1687033
Component: General → Inspector: Rules
Keywords: dev-doc-needed
OS: Unspecified → All
Hardware: Unspecified → All
See Also: → 1260230
Summary: extend image-set() dev tools → Highlight currently used image of image-set()
Version: Firefox 89 → unspecified

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.

See Also: → 1706448

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?

You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: