1470379 - [meta] Ship the first simple version of the flexbox highlighter (M1)

Status: RESOLVED FIXED

(DevTools :: Inspector, enhancement, P2)

Description

[Patrick Brosset <:pbro>]

The global flexbox tool is being tracked in bug 1409965, but there is too much scope there for shipping purposes.

The goal for this reduced meta bug is to only track the few things we will ship in a first version of the flexbox inspector tool. So, a minimal but very polished feature set that will likely only be enabled in nightly to start with, until we add more user value.

So, this is milestone 1 so to speak.

Comment 1

[Patrick Brosset <:pbro>]

I made this one depend only on the bugs part of the scope agreed so far for M1:
- simple highlighter for containers, lines and items
- rule-view and markup badge toggles
- flexbox inspector sidebar

These still remain to be defined properly so there will likely be other bugs to be filed. But the important part I think is the lack of support for the following 2 features in M1:
- sizing
- alignment

Those are, in themselves, much bigger and will be tracked in other iterations of the tool.

Comment 2

[Patrick Brosset <:pbro>]

Martin: does this correspond to our latest discussion? Can we clearly define and capture this M1 scope in the PRD doc?

Comment 3

[Martin Balfanz [:mbalfanz]]

Yes, that is what we discussed.

Additionally we want to do some style adjustments to be consistent with the grid highlighter.  Also, we should re-evaluate the sidebar, but once 1472566 lands it will be more useful.

I will try to capture everything in the PRD.

Comment 4

[Daniel Holbert [:dholbert]]

Should we close out this meta-bug like we did for the other one (bug 1478396 comment 2)?  Looks like we've got 2 remaining open bugs blocking this one, neither of which seem especially bad, and I think this will be riding the trains.

Comment 5

[Patrick Brosset <:pbro>]

Thanks Daniel, I meant to do this the other day but forgot. 
Done now.

Comment 6

[Sebastian Zartner [:sebo]]

[Why is this notable]: It adds an important tool for web authors allowing to investigate Flexbox layout.
[Affects Firefox for Android]: no
[Suggested wording]: In addition to the earlier introduced Grid Inspector, there is now a Flexbox Inspector.
[Links (documentation, blog post, etc)]:
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts (should be linked to from "Flexbox Inspector")
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts (should be linked to from "Grid Inspector")

Sebastian

Comment 7

[Irene Smith]

Martin,

I implemented the suggestions you gave me for the page. Please read it again and let me know if I missed anything!

Examine Flexbox layouts

Comment 8

[Martin Balfanz [:mbalfanz]]

If you hover over the word flex in the HTML pane, it will display an overlay of the flext container and its objects.

There is a typo flext.

Also, this part of the feature is experimental. It's controlled by the devtools.inspector.flexboxHighlighter.combine flag, which is set to true in Nightly and Beta/DevEdition, but false in release. We should make this clear or remove the sentence if we mainly target our release audience.

Otherwise looks good.

Comment 9

[Irene Smith]

(In reply to Martin Balfanz [:mbalfanz] from comment #8)

If you hover over the word flex in the HTML pane, it will display an overlay of the flext container and its objects.

There is a typo flext.

Also, this part of the feature is experimental. It's controlled by the devtools.inspector.flexboxHighlighter.combine flag, which is set to true in Nightly and Beta/DevEdition, but false in release. We should make this clear or remove the sentence if we mainly target our release audience.

Otherwise looks good.

Once again, thanks for the prompt review.

As we discussed, the sentence about hovering over the word flex to display the overlay has been removed since it is off by default in the released version.