Display information related to the box-sizing property in the Layout inspector tab

NEW
Unassigned

Status

enhancement
P3
normal
4 years ago
Last year

People

(Reporter: pbro, Unassigned)

Tracking

(Blocks 2 bugs)

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

Reporter

Description

4 years ago
This is definitely a must in the box-model tab, and in fact, the box dimensions that are shown top left in the tab should probably take this into account.

Part of meta bug 1150496.
Reporter

Updated

4 years ago
Blocks: 1150496
Reporter

Comment 1

4 years ago
I think there are 3 pieces of information we can show in the box-model tab for this:

1 - Outline the region that is currently used for box-sizing differently. Right now, the 4 regions are separated by 1px dotted outlines, maybe we could make the one that has the box-sizing thicker and more visible in general.
2 - The "CSS size" should be displayed somewhere
3 - The bounding box size should be displayed somewhere

We already do (3), but on its own, it's kind of confusing. I think (1) and (2) would make it clear how the box was sized.
Depends on: 1174821
Reporter

Updated

4 years ago
Depends on: 1175040
Reporter

Comment 2

4 years ago
I started a couple of months ago to work on this, but now don't have time anymore. I might restart later, but in the meantime, let me attach an early WIP patch so if anyone wants to continue from here there's already something.
Box-model tab enhancements. P3/enhancement.

Inspector bug triage. Filter on CLIMBING SHOES.
Severity: normal → enhancement
Priority: -- → P3

Updated

3 years ago
Blocks: 1292051
The box-sizing property is already displayed in the Layout side panel.

What's missing are the pieces of comment 1.

Sebastian
Summary: Display the box-sizing property in the Box-Model inspector tab → Display information related to the box-sizing property in the Layout inspector tab

Updated

Last year
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.