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

NEW
Unassigned

Status

()

Core
DOM
3 years ago
3 years ago

People

(Reporter: bgrins, Unassigned)

Tracking

(Blocks: 1 bug)

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

3 years ago
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?
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".
Reading bug 1102601 it sounds like what you really want is a way to compute "untransformed bounds".  Whatever that means...  Why is this needed?
(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.
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?
(Reporter)

Comment 5

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

Comment 6

3 years ago
ni? for comment 4
Flags: needinfo?(bzbarsky)
Ah, I see.

roc, do we have (or have proposed) a sane API for this?
Flags: needinfo?(bzbarsky) → needinfo?(roc)
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.
Flags: needinfo?(roc)
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.
You need to log in before you can comment on or make changes to this bug.