1244315 - Highlight DOMRect on page when mouse hover it, just like what we do for a element

Status: NEW

(DevTools :: Console, enhancement, P3)

Description

[Xidorn Quan [:xidorn] UTC+11]

DOMRect represents an area on the page, which could be highlighted when pointer's hovering and DOMRect in the console, just like what we do for elements there.

Functions like Element.getClientRects() return DOMRect.

Comment 1

[Brian Grinstead [:bgrins]]

Good idea.  Matteo, do we have an existing highlighter for DOMRects?

Comment 2

[Patrick Brosset <:pbro>]

We have a RectHighlighter [1] which the perf tool uses to highlight painted rects in the page.
It needs width, height, x, y.
And it can be instantiated with toolbox.highlighterUtils.getHighlighterByType("RectHighlighter"); or something like this.

[1] https://dxr.mozilla.org/mozilla-central/source/devtools/server/actors/highlighters/rect.js

Comment 3

[Julian Descottes [:jdescottes]]

Had an issue while prototyping this : a DOMRect is relative to a viewport, but has no reference to this viewport.

Take "data:text/html,<iframe style='margin:100px' src='data:text/html,<div>test'>"

getBoundingClientRect() for the div will return a rect relative to the iframe's position.
How could the console could keep track of which viewport to use to highlight a DOMRect?

Brian, what do you think?

Comment 4

[Brian Grinstead [:bgrins]]

(In reply to Julian Descottes [:jdescottes] from comment #3)
> Had an issue while prototyping this : a DOMRect is relative to a viewport,
> but has no reference to this viewport.
> 
> Take "data:text/html,<iframe style='margin:100px'
> src='data:text/html,<div>test'>"
> 
> getBoundingClientRect() for the div will return a rect relative to the
> iframe's position.
> How could the console could keep track of which viewport to use to highlight
> a DOMRect?
> 
> Brian, what do you think?

I believe the Object Grip has a reference to the global debug object, at least for functions: https://dxr.mozilla.org/mozilla-central/source/devtools/server/actors/object.js#920.  If we have a reference to that from the actor then maybe the grip's actor ID could be passed in as a parameter to the highlighting function which could then reference it?  Or we could wrap up the window object as a grip and pass it down in the preview.  I haven't tested this at all, but it might be worth checking if hooks.getGlobalDebugObject give you something useful for these objects.

Comment 5

[Patrick Brosset <:pbro>]

Indeed, if there is a way from the object grip to reference the container window, then we could resolve this somehow to the corresponding window.documentElement DOM node (which would have to be turned into a nodeFront (walker.getNodeFromActor could be useful here)), and pass it to rectHighlighter.show.
This function accepts a nodeFront as its first parameter used to know which viewport is the rect supposed to be relative to.

Comment 6

[Julian Descottes [:jdescottes]]

Thanks for the pointers!

In server/actors/object.js, `hooks.getGlobalDebugObject()` always points to the topmost window, even when previewing the DOMRect of an element in an iframe. From the moment we start evaluating the JS to the moment we display the preview, I couldn't find any reference to the desired frame.

The DOMRect is totally agnostic from the element & frame it was generated from.
For this feature to work, I believe we have to modify DOMRect to have a pointer to the frame it is relative to.

Comment 7

[Julian Descottes [:jdescottes]]

Unassigning myself for now.