Attached is an icon that looks more like the flexbox overlay itself and hopefully represents a more common case for flexboxes

Hey Victoria, The SVGs for this Flexbox icon is a bit hard to work with. Can you provide an SVG that is similarly formatted like in Bug 1465649.

I was able to get the code looking a lot simpler after opening in Illustrator and deleting excess layers. Let me know if this still has issues.

I'll do this one, and try to rebase bug 1490491 afterwards.

I handwrote the SVG to save a few more bytes, and I'm getting this result. It looks alright, except in the case where we click the icon and the icon+label group gets a focusring, which uses a dotted style. Since we have a dotted style in the icon itself, it can look a bit messy. Should we try a different style for the outer rectangle, for instance a solid stroke at 50% opacity?

Tried a solid line at 50% opacity and it's not much better (and loses the metaphor of the flexbox overlay which uses dashes for the parent). Also tried using dashes rather than dots (dashoffset of "2 1" or "3 1") but couldn't make it work with the 13x11 dimensions. Leaving it as is for now. Maybe the solution is in using :-moz-focusring instead of :focus styles for focus rings on property names and values? (And pushing for the standardized :focus-visible in Firefox too.)

Pushed by pbrosset@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/a871d40e8802 Use more accurate flexbox icon in inspector; r=pbro

I've been meaning to file a tools-wide bug re: showing button focus rings only when tabbed to via keyboard, and not for mouse clicks -- I think that would be a good solution here as well. (The Debugger team started to do this for their stepping buttons.) A bit of a tangent: The toggled on status is kind of hard to see, so I've also been working on a white-on-blue style for when these types of buttons are toggled on, though it starts to get weirdly similar to the markup view badges. (General improvement of focus rings on keyboard nav is still on my todo list for later, as I'd like to abolish the dotted line look everywhere :D but I'm hoping for now we could just be a bit more selective about when these focus rings show up.)