Flexbox Inspector - input wanted


(Victoria Wang) #1

Hi all! I’ve been working with the team on a new Flexbox tool inspired by our Grid Inspector.

Please view this 6-page visual prototype and let me know what you think!

Highlights:

  • A workflow that merges our flexbox and grid highlighters with the regular picker overlay
  • Ability to toggle persistence of our highlighters from within the page
  • Select a flex item to view a detailed highlighter specific to the item
  • Layout panel explains how the flex item got its size, e.g. which sizing values are based on the automatic content size vs flex-related CSS

A basic version of the flexbox highlighter is currently available in Nightly under a flag — you can give it a try by going to about:config and setting devtools.flexboxinspector.enabled to true.


(Nicolas Chevobbe) #2

I really love the explanations on why an element is positioned that way and why it take this width and height (and I don’t mind it being a wall of text for now :slight_smile: )


(Victoria Wang) #3

Great to hear that - thanks Nicolas!


(Hidde de Vries) #4

I like this a lot, it will definitely make flexbox development easier!


(Iain van der Wiel) #5

This looks awesome! Especially the explanations of how flexbox properties make elements line up in a certain way with the directional arrow, and how an element got its current size.

The only thing that I’d like to see a bit clearer is how the size change is communicated to the developer. Now it’s done with the ‘< < <’ icons, though I’m not quite sure if that’s the best way to indicate that. Maybe a small arrow that starts at the initial border pointing to the current border?

Overall, I feel this will really make debugging flexbox layout way easier! :raised_hands:


(Amy) #6

This does look awesome indeed! :purple_heart:

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)


(Victoria Wang) #7

@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.


(Jens Nachtigall) #8

Overall this is perfect! Just a few thoughts I had while looking at it:

  1. What if there are multiple flexboxes on a page? Afaik for the Grid Layout all grids of a page are show. Same for flexboxes?
  2. 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.
  3. As for the long text. I think these explanations are great, but, well, long :slight_smile: 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

(Victoria Wang) #9

@jens.nachtigall Thanks for these great ideas!

  1. 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.
  2. 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.
  3. 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 :slight_smile:

(Vincent) #10
  • 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: flex somewhat 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!


(Victoria Wang) #11

@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: image


(Victoria Wang) #12

Made a few changes to the mockups, including this latest iteration of the flex item sidebar:


(Adrian Roselli) #13

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


(Victoria Wang) #14

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.


(Adrian Roselli) #15

Now that sounds exciting (the accessibility audit stuff).


(Victoria Wang) #17

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.