Open Bug 1150504 Opened 9 years ago Updated 2 years ago

Display the box-model for line-boxes for inline elements in the Box-Model inspector tab

Categories

(DevTools :: Inspector, enhancement, P3)

enhancement

Tracking

(Not tracked)

People

(Reporter: pbro, Unassigned)

References

(Blocks 1 open bug)

Details

Part of meta bug 1150496.

The box-model tab should display the type of box (display property).
And for inline elements, to be really correct, we should display one box-model per line box.
This would take a lot more room, and may be weird when editing properties, but we have scrollbars anyway, so room shouldn't be an issue, and editing the margin on the first box could in fact edit the margin-inline-start for example.
There could also be a way to switch the box-decoration-break attribute.
Blocks: 1150496
Box-model tab enhancements. P3/enhancement.

Inspector bug triage. Filter on CLIMBING SHOES.
Severity: normal → enhancement
Priority: -- → P3
Does line-boxes means flexbox?
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

Helen have provided UI spec in bug 1150496 which shows a visual inline boxes within a larger box context. What steps need to make it happen? Any server/actor work need to be done first?
Flags: needinfo?(pbrosset)
(In reply to Fred Lin [:gasolin] from comment #2)
> Does line-boxes means flexbox?
> https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/
> Using_CSS_flexible_boxes
No, this isn't about flexbox.

See the definition here: https://www.w3.org/TR/REC-CSS2/visuren.html#inline-formatting
And a short article I wrote about it: https://hacks.mozilla.org/2015/03/understanding-inline-box-model/

tl;dr; inline elements may be split over several lines, and all of these lines have a margin, border and padding. So the idea for this bug was, if an element was split over several lines, that the "box-model" view in the inspector sidebar would represent all of these lines and their margins, borders and padding.

This would be useful especially when using the box-decoration-break CSS property.
This would help understand that margin always applies to all line boxes, but padding and border left/right only apply to the first/last line boxes, unless you do box-decoration-break:clone.

Right now, our "box-model" view in the inspector doesn't really reflect the reality when there is more than 1 line box.

Of course, we'd have to be careful about what we show exactly, if the element wraps over 100 lines, we shouldn't show 100 boxes. Especially because the 98 lines in between the first and last will have the same margin, padding and border. So maybe we could show only the first line box, 1 line in between, and the last line box.
Also, it wouldn't be hard to do, because we already use getBoxQuads on the server to highlight elements, and it returns exactly the information we need for this (one quad per line box). So we'd have to adapt the getLayout actor method to return info for each of the line boxes when there is more than 1.

Happy to talk more about this over video if needed. I think this needs more UI/UX work before we can implement anything.
Flags: needinfo?(pbrosset)
Thanks for explanation. If we want implement all kinds of box-model view, I think flexbox might get the priority since it gets more and more traction. As bug 940275 comment 73, even Inspector's toolbox itself is mixed with flexbox and normal flow, where surfacing the engine's final decision is super valuable.
Product: Firefox → DevTools
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.