This does look awesome indeed! 
If I may make a small suggestion: perhaps is worth it to look into visualising the order property too. (for example, when hovering over the order property)
@Hidde: Awesome, thank you!
@iain.vanderwiel: Appreciate this feedback! I agree that the size change icons need improvement. I’ll give your small arrow idea a try.
@MsAmy: Thanks, that’s a great point about the order property! We’ve discussed showing numbers or subtle arrows to help visualize tab/screen reader order.
Overall this is perfect! Just a few thoughts I had while looking at it:
- What if there are multiple flexboxes on a page? Afaik for the Grid Layout all grids of a page are show. Same for flexboxes?
- What is ‘overlay flexbox’ directly under ‘Flexbox’? I am not sure what an ‘overlay’ flexbox type is? As it’s already under the ‘Flexbox’ accordion: Why adding ‘overlay flexbox’ as extra text, does it add value? I think ‘overlay flexbox’ text could be removed.
- As for the long text. I think these explanations are great, but, well, long
Especially when docking to the side maybe… Maybe hiding them being a (?)icon and only showing them on mouse hover only. The Network tab already has an(?)icon. The icon could also link to the relevant MDN article
@jens.nachtigall Thanks for these great ideas!
- Multiple flexboxes: Yes, eventually I hope we show a dropdown or other type of list of flexboxes, and possibly allow selecting/highlighting multiple a time. It’s a bit more complicated than grid due to larger numbers of flexboxes and a lot of nesting, so this will be determined in a future milestone.
- Yep, it’s totally redundant and confusing—I’m going to get rid of that right now :D. It came from the Grid UI where it made slightly more sense, but is also unnecessary.
- Interesting thought! There is probably something I can also do with icons that represent “set in css” or “unset/auto.” It’s a wall of text right now because we’re not sure what bits of info are the most important— e.g. the pixel amounts probably don’t matter that much, but it seems useful to know that two values are the same because of max clamping…? More research to be done here for sure
- The clarifications of how all the dimensions were arrived at really do solve a big problem!
- I also was somewhat confused by the mention of “overlay flexbox”
- The flex button in between
display: flexsomewhat looks like whether it’s an icon for the devTools. I think I might understand it from the context, but the icon itself doesn’t really tell me anything.
Good work!
@Vinnl Thanks for the feedback! Re: the button, agreed, it’s a placeholder button. The new one will look something like this to match the highlight: 
3 Likes
To echo @MsAmy, a way to present order would be ace. I do accessibility audits, and the developers I am reviewing often do not understand, nor have an easy way to check, how the order property can change the reading versus source order.
I put together a post showing how I would envision it for the CSS Grid inspector, so perhaps it can be useful: adrianroselli.com/2017/11/feature-request-for-firefox-grid-inspector-source-order.html
1 Like
Thanks @aroselli! I’ve seen your post before, and it’s a great idea. In fact, it inspired some concepts for a visual accessibility audit that could also show alt labels, color contrast, etc, overlaid onto the page. I’ll have to post a separate thread about that at some point.
1 Like
Now that sounds exciting (the accessibility audit stuff).
Hey all! I’ve made a bunch of improvements to the visual prototype, which is now 9 pages and includes more Layout panel detail, a flex-grow example, and general polish. I’d love to hear what you think!
The basic version of the Flexbox highlighter is also now available unflagged in Nightly.
@victoria A few thoughts using Nightly, re: tweaks and a bit of confusion. (Not sure if comments should go elsewhere (new thread, etc.), let me know and I’ll move this.)
Screenshot with annotations attached.
1/
In the “Flex Item” info, the selector drop-down is unnecessarily truncated (horizontal w ellipsis), plenty of horizontal whitespace, so it could print the entire selector.
2/
Insufficient vertical spacing makes text unreadable, I’m not sure what is trying to be indicated.
3/
Contradictory wording describing the flexibility is confusing. The attempt at explanations is wonderful though. 
Nightly 65.0a1 (2018-10-27) (64-bit)
OSX 10.12.6
Generally the new layout tools are a great help, thank you to everyone involved!
1 Like
@rmichael Thank you for this feedback! We should definitely fix these issues - I will discuss them with the team!
. It would be even greater if it also handled the overlay when scrolling better:
This should be fine in the latest nightly… is there a publicly available page where you can replicate this issue in the latest nightly?
Ah, so if the flexbox is scrolled inside a div we don’t detect any mopvement when it is scrolled… I’ll create a simpler test case.
Bug logged: https://bugzilla.mozilla.org/show_bug.cgi?id=1511426
Thanks for letting us know about this issue!
Great. Thanks! Guess I could have mentioned that the flex container was scrolling 
it is very good idear!
i am looking some ruler …
like thiese…
Thank you… very very much~:grin: