1102956 - Expose offsetLeft, offsetTop, offsetWidth, and offsetHeight on _moz_generated_content_before and _moz_generated_content_after

Status: NEW

(Core :: DOM: Core & HTML, defect, P5)

Description

[Brian Grinstead [:bgrins]]

For bug 1102601 we need to be able to get the offset values of a generated pseudo element.

If I inspect a ::before element in devtools and run console.dir($0) I notice that there is clientWidth/clientHeight/clientLeft/clientTop but the corresponding offset properties are missing.  What would it take to make these properties work on pseudo elements?

Comment 1

[Boris Zbarsky [:bzbarsky]]

offset* are currently on HTMLElement, and these elements are not HTML elements.  I don't think we particularly want to make them HTML elements, because that has annoying implications in terms of interactions with the page....

In general, you should not be using offset* for anything; it's broken in all sorts of ways, starting with an insane definition of "offsetParent".

Comment 2

[Boris Zbarsky [:bzbarsky]]

Reading bug 1102601 it sounds like what you really want is a way to compute "untransformed bounds".  Whatever that means...  Why is this needed?

Comment 3

[Patrick Brosset <:pbro>]

(In reply to Please do not ask for reviews for a bit [:bz] from comment #2)
> Reading bug 1102601 it sounds like what you really want is a way to compute
> "untransformed bounds".  Whatever that means...  Why is this needed?
There's this feature in the devtools that allows you to understand a bit better how an element got transformed (in the CSS transform sense).

To see it in action:
- go to https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms?redirectlocale=en-US&redirectslug=CSS%2FTutorials%2FUsing_CSS_transforms
- open the devtools inspector
- select one of the example element that's transformed on this page
- search in the "Styles" inspector sidebar tab the "transform: ..." property
- hover over the property with your mouse

We draw 2 highlighters on the page: one where the actual element is, and one where it would have been if it wasn't transformed at all.
This helps figuring out what a specific transform did to the element.

Comment 4

[Patrick Brosset <:pbro>]

And so, to achieve this, we need to be able to get the coordinates of the untransformed element.
Offsets have the advantage of doing the job, but that doesn't work for pseudo-element.
Is there a better way of achieving the same result?

Comment 5

[Brian Grinstead [:bgrins]]

And here is the relevant logic that calculates the untransformed position: http://dxr.mozilla.org/mozilla-central/source/toolkit/devtools/LayoutHelpers.jsm#452.

Comment 6

[Brian Grinstead [:bgrins]]

ni? for comment 4

Comment 7

[Boris Zbarsky [:bzbarsky]]

Ah, I see.

roc, do we have (or have proposed) a sane API for this?

Comment 8

[Robert O'Callahan (:roc) (email my personal email if necessary)]

We don't have an API for this. There is a proposed API for this in CSSOM: Element.pseudo(DOMString) to return a PseudoElement representing the pseudo, and PseudoElement implementing GetStyleUtils and GeometryUtils:
http://dev.w3.org/csswg/cssom/#dom-element-pseudo
http://dev.w3.org/csswg/cssom-view/#the-geometryutils-interface
This would be pretty easy to implement.

Comment 9

[Boris Zbarsky [:bzbarsky]]

We already have an API that hands out the actual Element here to devtools code.

The question is how to then get its untransformed position.  I don't see anything on GeometryUtils that solves that problem.

Comment 10

[Firefox Bug Husbandry Bot]

https://bugzilla.mozilla.org/show_bug.cgi?id=1472046

Move all DOM bugs that haven’t been updated in more than 3 years and has no one currently assigned to P5.

If you have questions, please contact :mdaly.