Flexbox Inspector Improvements

[violasong]

Could improve on container, item, and container-item UIs. Maybe more unification, related to unified layout panel.

Notes from 2019/2/6 critique

Flex Container list of items

• Chevrons feels a bit big, maybe too close together
• User testers didn’t immediately think they were clickable. They just focused on the hover effect. Users had to be told about the functionality.
• The numbers on the left: what do they indicate?
  • The source order of the flex items. Important because you can order them in a specific way.
  • Do icons in front of copy make it more clickable?
  • Numbers in front can indicate a “list”, not necessarily something you can click on
  • 2 UI treatments in the sidebar seem inconsistent, could be causing the problem
  • Does it help if you change how the list item is highlighted? Maybe more like a button instead of full width highlight

Flex-item pane

• Tooltips? That might help a user understand in a non-ui way
• Perhaps a “?” to go to MDN
• A way to visually display a nest, they currently all seem to be on the same level
• Is there value in showing them separately? Might help with clarity

[SebastianZ]

Regarding the order of flex items, I see two (non-exclusive) solutions:

1. Show the order within the page

   This should work similar to the grid areas display and should come with an option to toggle the display via the Layout side panel.

2. Show the order within the Layout side panel

   The display there may be bound to the flex container to give an overview and/or to the individual flex items. If presented for a flex item, there might be additional information shown why it ended up at that position. So the author can reproduce this similar to the shrink and grow information you provide for the flexibility.

I think an important point here is to differentiate between set order, i.e. via the CSS order property (which will often be 0 due to its initial value), and the computed order, i.e. the resulting order (which should give each element a position number starting from 1).

Sebastian