1921594 - Better support <picture>: do not lie to the developer about the image being used

Status: RESOLVED DUPLICATE of bug 1064715

(DevTools :: Inspector, defect)

Description

[Julien Wajsberg [:julienw]]

Attachment: picture.html

The support for <picture> isn't great:

• When inspecting, the wrong image is selected: despite the avif image is used, as can be verified in the Medias tab in the page information (ctrl I), the <img> element is selected in the inspector. Moreover the src part is underlined, which seems to imply that this is the source used, but this isn't true.
• When hovering the <source> elements, the image isn't displayed like it is with <img> elements, but it should.

As a reminder, <picture> makes it possible to select different images depending on the browser (support) or the context (with the media attribute).

Comment 1

[Julian Descottes [:jdescottes]]

The underline here is not meant to indicate that the image is selected, it's just to indicate that you can preview the image by hovering the link. However we get why it's confusing as we use this pattern in other UIs in devtools. So let's try to add underlines for the source element srcset values.

Highlighting the selected source is potentially already covered by another bug under Bug 1687033, I need to check.

Comment 2

[Julian Descottes [:jdescottes]]

When inspecting, the wrong image is selected: despite the avif image is used, as can be verified in the Medias tab in the page information (ctrl I), the <img> element is selected in the inspector. Moreover the src part is underlined, which seems to imply that this is the source used, but this isn't true.

I imagine you refer to the fact that the image tag is selected when you inspect either with right click inspect or with pick node.
However this is mostly correct. Per MDN https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture:

The selected image is then presented in the space occupied by the <img> element.

So it wouldn't make sense to select any other element, as they aren't really "displayed" in the page. They just impact the source of the image.

Showing the selected source/url is already covered by Bug 1260230.
And enabling the preview for srcset is covered by Bug 1064715.

Closing as duplicate of Bug 1064715. Let's see if we can fix this.

Comment 3

[Julien Wajsberg [:julienw]]

Thanks for the explanation, makes sense, I wasn't aware of the specifics.
I was very confused when I worked with <picture> on saturday, it would be great to make this less confusing for our users :-)
Thanks!