1378259 - [feature] Access to the position of the selected box with regards to the parent and the viewport

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[Karl Dubost💡 :karlcow]

Sometimes it is useful to know how the box are positioned to each other. 

When selecting a box, I might want to know how far it is positioned from the box boundaries of the nesting parent (example: the top is 23px from the top of the nesting parent, and it's -14px left of the nesting parent.)

And sometimes I want to know how the box is positioned with regards to the viewport boundaries.

(even when the elements are in position: relative)

Comment 1

[Patrick Brosset <:pbro>]

This sounds interesting. Let's try to detail this a bit more.
I wrote an article about various ways to measure things in DevTools a while ago: https://medium.com/@patrickbrosset/measuring-elements-and-distances-in-firefox-devtools-1d6c57bc1f3f
Would any of this help you? In particular I'm thinking of the "measuring tool" (which you need to first enable from the settings panel).

Also, the box-model diagram (in the computed tab) now shows the top/right/bottom/left values when they exist. 
But it sounds like you want something a bit more flexible like the measuring tool, but maybe something that is aware of elements' boundaries and gives you precises distances?

Comment 2

[Karl Dubost💡 :karlcow]

Attachment: measuring stuff

Hey Patrick, Thanks for the link in the article plenty of good stuff.

In this screenshot, I decided to give a try with the measuring tool. It could partially indeed answer my needs.

In this markup taken on your blog post. 

span
  button
    22

I might want to know the distances in between the button box and the span box. For example to understand the effect of a padding, the room available, etc. but it might be very hard to compute that.

The ruler tool that you demonstrate could solve this if there was a possibility to magnify the region I want to measure so you can make a precise measurement.


(note: the red lines come from something I do very often for debugging layout issues. I wrote about it in http://www.otsukare.info/2016/10/05/debugging-css )