Closed Bug 1470379 Opened 6 years ago Closed 6 years ago

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

Categories

(DevTools :: Inspector, enhancement, P2)

Product:
DevTools
Component:
Inspector
Type:
enhancement

Tracking

(relnote-firefox 65+)

Status:
RESOLVED FIXED
Milestone:
Firefox 65
Tracking Flags:
Tracking Status
relnote-firefox --- 65+

People

(Reporter: pbro, Unassigned)

References

(Blocks 1 open bug)

Details

(Keywords: dev-doc-complete, meta)

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.
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.
Depends on: 1470380
Martin: does this correspond to our latest discussion? Can we clearly define and capture this M1 scope in the PRD doc?
Flags: needinfo?(mbalfanz)
Summary: [meta] Ship the first simple version of the flexbox inspector → [meta] Ship the first simple version of the flexbox inspector (M1)
Depends on: 1472561
Depends on: 1472566
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.
Flags: needinfo?(mbalfanz)
Depends on: 1473061
Depends on: 1474358
Depends on: 1474364
Depends on: 1476395
Depends on: 1471460
Depends on: 1471764
Depends on: 1476491
Depends on: 1477856
Depends on: 1478481
No longer depends on: 1476395
Depends on: 1486797
Depends on: 1488883
Depends on: 1488885
No longer depends on: 1488885
No longer depends on: 1488883
Depends on: 1489333
Depends on: 1490101
No longer depends on: 1490101
Depends on: 1493020
Summary: [meta] Ship the first simple version of the flexbox inspector (M1) → [meta] Ship the first simple version of the flexbox highlighter (M1)
No longer depends on: 1493020
Depends on: 1494804
Depends on: 1497312
No longer depends on: 1497312
Depends on: 1499630
Depends on: 1501226
Depends on: 1503175
No longer depends on: 1503175
Depends on: 1503219
Depends on: 1504743
Depends on: 1507719
Depends on: 1507720
Depends on: 1507728
Depends on: 1507733
Depends on: 1507741
Depends on: 1507752
Depends on: 1497312
No longer depends on: 1504743
Depends on: 1509004
Depends on: 1509104
Depends on: 1509457
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.
Flags: needinfo?(pbrosset)
No longer depends on: 1509104
No longer depends on: 1503219
Thanks Daniel, I meant to do this the other day but forgot. Done now.
Status: NEW → RESOLVED
Closed: 6 years ago
Flags: needinfo?(pbrosset)
Resolution: --- → FIXED
Target Milestone: --- → Firefox 65
[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
relnote-firefox: --- → ?

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

Flags: needinfo?(mbalfanz)
Keywords: dev-doc-needed → dev-doc-complete

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.

Flags: needinfo?(mbalfanz)

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

You need to log in before you can comment on or make changes to this bug.