Open Bug 1415410 Opened 6 years ago Updated 1 year ago

Add source order visualization to grid inspector

Categories

(DevTools :: Inspector: Layout, enhancement, P3)

enhancement

Tracking

(Not tracked)

People

(Reporter: aroselli, Unassigned)

References

(Blocks 1 open bug)

Details

Attachments

(3 files)

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.89 Safari/537.36

Steps to reproduce:

1. Visit a page using named regions in CSS grid: https://s.codepen.io/aardrian/debug/wrYjRP
2. Inspect the grid container.
3. From the Inspector, choose the Layout tab.
4. Examine the grid elements.


Actual results:

The grid layout inspector does a great job of showing me the named regions, column and row spans, line numbers, and gutters. This is awesome. But I have a feature request.


Expected results:

This is a feature request.

I would like an option to show the source order / reading order in the layout view. I have written my ideas in a blog post (which I am happy to paste in full here):
http://adrianroselli.com/2017/11/feature-request-for-firefox-grid-inspector-source-order.html

I have also made a (terrible) example image that shows what I am thinking. Essentially, use numbers and arrows to show a developer how the source order appears under the layout, and as a result in what order a screen reader or keyboard-only user will experience the content.

I think there is value in bringing this to other layout methods, but I am limiting this report to CSS grid.
There is a similar issue, though it is different than this one since it is asking for an audit feature: https://bugzilla.mozilla.org/show_bug.cgi?id=1415363
Blocks: dt-grid
Component: Untriaged → Developer Tools: Inspector
Priority: -- → P3
I made a couple better quality images. This is one of them. It shows the counters in the center of each grid area, with arrows connecting them to show reading order.
I made a couple better quality images. This is one of them. It shows the counters in the corner of each grid area, with arrows connecting them to show reading order. It also shows one that is most likely breaking reading order by highlighting it in yellow.
Severity: normal → enhancement
Status: UNCONFIRMED → NEW
Ever confirmed: true
Product: Firefox → DevTools

I created a bookmarklet that acts as both a proof of concept and a stop-gap until this feature is natively implemented in browsers and/or testing tools: http://adrianroselli.com/2019/04/reading-order-bookmarklet.html

Yura: I was wondering if this feature would tie into any of your plans for the Accessibility Inspector.

Flags: needinfo?(yzenevich)

We were definitely considering tab/focus order visualization in the near future, similar to a11y insights, though I understand this is for all content. It's relevant for grid/flex/etc like floats so can be done in general enough way. If we could think of a meaningful way of visualizing content order (especially on massive pages) from the UX perspective, I could consider taking it on too. Adrian, I'll check out your link, though it seems like the website is offline right now.

Flags: needinfo?(yzenevich) → needinfo?(victoria)

Database server upgrade at my host. Poorly timed, but my site is back now. To gather both of my blog posts…

Original request:
http://adrianroselli.com/2017/11/feature-request-for-firefox-grid-inspector-source-order.html

Prototype:
http://adrianroselli.com/2019/04/reading-order-bookmarklet.html

I made a video that played at Smashing Conference NYC to try to garner broader community support: https://adrianroselli.com/2019/10/smashing-web-we-want-video-pitch.html

It is also on YouTube: https://www.youtube.com/watch?v=UjXCAuWuXdk

Microsoft's Edge DevTools team has added this feature to Chromium and it will be in Edge 86:
https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/experimental-features#enable-source-order-viewer

Thanks Adrian, that's awesome!

This bug is related to Yura's recent work on displaying tabbing order.

Flags: needinfo?(victoria)
Component: Inspector → Inspector: Layout
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.