1114973 - Provide some support for debugging/inspecting flexbox layouts

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[Patrick Brosset <:pbro>]

Flexbox layouts are cool, but also take a bit of learning to master. The devtools could help understand how flexbox layouts work.

Someone created a uservoice idea about this:
https://ffdevtools.uservoice.com/forums/246087-firefox-developer-tools-ideas/suggestions/6258609-interactive-visualisation-for-flexbox-rules

Here are a couple of online tools that can be used to experiment with flexbox:
http://bennettfeely.com/flexplorer/
http://the-echoplex.net/flexyboxes/
http://demo.agektmr.com/flexbox/

Also see this twitter conversation:
https://twitter.com/patrickbrosset/status/547324594995335168

Comment 1

[Patrick Brosset <:pbro>]

Also: http://razvancaliman.com/flexaxis/

Comment 2

[Patrick Brosset <:pbro>]

Ideas so far:

- highlight the flex-basis space vs. used space,
- display the main and cross axes to know how the justify and align properties apply,
- represent wrap/nowrap.

Comment 3

[Patrick Brosset <:pbro>]

Other ideas (stolen from the Chromedevtools ticker linked in the uservoice idea):

- highlight all flex items and the flex container at the same time (the selector highlighter already kind of does this, but a dedicated way to do this would be nice),
- provide a quick (visual) way to align/center items.

Comment 4

[Dan Mosedale (:dmosedale, :dmose)]

A few thoughts on this are also in https://bugzilla.mozilla.org/show_bug.cgi?id=1106914 (which might just be a DUP of this).

Comment 6

[Sebastian Zartner [:sebo]]

Bug 1181227 describes an inspector/debugger for CSS Grid layouts. As mentioned there I believe both should be unified in a 'CSS Layout Inspector' tool, which allows to switch between the different layout modes.

Sebastian

Comment 7

[Patrick Brosset <:pbro>]

Filter on CLIMBING SHOES

Comment 8

[Patrick Brosset <:pbro>]

We are working on a CSS Grid tool at the moment (bug 1181227), and a part of it is adding a new "Layout" panel in devtools that contains information about the Grid. See the UI spec: https://projects.invisionapp.com/share/3X87NEBYH#/screens/179720294_Grid (scroll down to see the layout panel).
I think we should do the same for flexbox. Have a dedicated section for flexbox that would live in the same Layout panel, and would contain a representation of the flexbox layout with various information about it.

This would be useful especially when associated with a dedicated flexbox highlighter that would show the flex container and items on the page.

I believe the tool should show, for the container and the items, the computed values of justify-content, align-content, align-items, align-self, flex-grow/basis/shrink.
It should also show flex lines, which happen when the container has flex-wrap set to something other than nowrap.
Showing the main and cross axis, and start and end edges seem useful too.

What's hard to understand when it comes to flexbox is what justify-content, align-items, align-content, align-self correspond to, when they apply and when they don't. In particular, how this works when items have a size or flex-grow/shrink defined. So if we can find ways to visually indicate how the remaining space (if any) has been distributed (along both axis) and which property caused this, then that'd be really useful.

I think it might be hard to show everything together at once, so maybe the tool should allow users to switch between the main and cross direction, to only inspect one at a time, and maybe also allow users to "select" the container or any given item to only inspect the properties that apply to them.

Comment 9

[Asif Youssuff]

Looks like Patrick got his wish (in Chromium): https://developer.chrome.com/blog/new-in-devtools-90/#flexbox

Chromium bugs: https://crbug.com/1166710 and https://crbug.com/1175699

Set parity keywords.

Comment 10

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Attachment: An inspiration