1260230 - Highlight currently used source with responsive images

Status: NEW

(DevTools :: Inspector, enhancement, P2)

Description

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

With responsive images, a single <img> can have multiple sources defined that activated for different layouts, such as:

<picture>
  <source media="(min-width: 40em)"
    srcset="big.jpg 1x, big-hd.jpg 2x">
  <source 
    srcset="small.jpg 1x, small-hd.jpg 2x">
  <img src="fallback.jpg" alt="">
</picture>

or:

<img src="small.jpg"
     srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
     sizes="(min-width: 36em) 33.3vw, 100vw"
     alt="A rad wolf">

The markup view should highlight the source that is being used to drive the currently displayed image.  It should update in real time when you resize the window.

Comment 1

[Patrick Brosset <:pbro>]

See also bug 1064715 which is about providing image preview tooltips and contextual menu items for those.
Bug 1064715 comment 7 also says we should highlight which source was used, but I think it's better to keep these 2 separate bugs.

Comment 2

[Meteor0ID]

Got me running around in circles today trying to debug an <picture> element. Using the inspector, selecting the element jumps to the <img> element. I aasumed that means the <source> elements were skipped.

Besides highlighting the currently used source, the inspector should also jump to that source when the picture element is being inspected.

And finally, the width being shown as 0 on the source elements is adding to the confusion. That may thechnicly be correct (following the spec), but sure drives me 
(and probably others) crazy believing the element isn't being shown, cause it's width is clearly 0. There might be some way to hint that there is width being applied to the source / srcset from somewhere else.

Comment 3

[miriam]

The current state of responsive image debugging is pretty rough all around. There’s no way to easily see what’s happening without an inspector, and no real inspector tools around it. Chrome does show currentSrc, but in a flaky tooltip without much detail – and the interaction with caching is not at all clear. I think a good dev tool would make a big impact on the feature use. The comment above makes sense regarding picture, working with srcset, I think a tool could:

• Show the current active image source
• Show dimensions of both the source image and the image in layout
• Show the current active size in sizes
• Clarify if an image is being used from cache, and what image would be used otherwise (maybe with toggling)
• Respond dynamically to resizing