1150506 - Add a way to measure distances in the box-model inspector tab

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[Patrick Brosset <:pbro>]

Part of meta bug 1150496.

Allow to quickly calculate the distance between any 2 box-model regions.
Say you want to know how much the content + horizontal padding amounts to. 

Clicking on any region could start a sort of measuring tool, and clicking again on another region would give the distance between these 2 boxes, annotated with an arrow and label, kind of like a blueprint.

Comment 1

[Sebastian Zartner [:sebo]]

I believe there is only a need for measuring the sizes starting from the content box, so e.g. content + padding, but not for e.g. border + margin.

Patrick, what's the use case for measuring only parts of the box model?

A better approach for this, IMO, would be to display the cumulated size within the highlighter or somewhere besides the box model on hover. So, hovering the margin box would calculate the width and height of content + padding + border + margin and display them.

Sebastian

Comment 2

[Patrick Brosset <:pbro>]

(In reply to Sebastian Zartner [:sebo] from comment #1) 
> A better approach for this, IMO, would be to display the cumulated size
> within the highlighter or somewhere besides the box model on hover. So,
> hovering the margin box would calculate the width and height of content +
> padding + border + margin and display them.
That sounds pretty good! Thanks Sebastian.

Comment 3

[Sebastian Zartner [:sebo]]

Attachment: Total size including margin

Technical drawings use some measuring areas to display sizes. Here's a mockup showing how this could look like applied to the box model when hovering the margin area.

Sebastian