Flexbox Inspector - input wanted

Developer Tools
#1

image
image.png1184×118 42.7 KB

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

This visual prototype has the latest designs.

Highlights:

  • A workflow that will merge our flexbox and grid highlighters with the regular picker overlay
  • A flex container panel with easy navigation to each of its flex items
  • Detailed flex item diagrams which show the basis, shrink/grow, and min/max
  • Sizing tables that explain, step-by-step, how a flex item got its size

An early version of the Flexbox Inspector is currently available in Nightly. Please give it a spin and let us know what you think!

4 Likes
Flexbox Inspector now in Firefox DevEdition/Beta
#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: )

1 Like
#3

Great to hear that - thanks Nicolas!

#4

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

#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:

1 Like
#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)

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

#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
#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:
#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!

#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

#12

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

image
image.png506×554 30.8 KB

3 Likes
#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

1 Like
#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.

1 Like
#15

Now that sounds exciting (the accessibility audit stuff).

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

#18

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

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!

flex-layout-feedback
flex-layout-feedback.png2559×1502 317 KB

1 Like
#19

@rmichael Thank you for this feedback! We should definitely fix these issues - I will discuss them with the team!

#20

Really nice tool :+1:t2:. It would be even greater if it also handled the overlay when scrolling better:

image
image.png1142×658 42.3 KB

#21

This should be fine in the latest nightly… is there a publicly available page where you can replicate this issue in the latest nightly?