1102601 - Wrong original position highlight for transformed ::before pseudo-element.

Status: NEW

(DevTools :: Inspector, defect, P3)

Description

[Tomasz Kołodziejski [:tomasz]]

Attachment: test.html

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:33.0) Gecko/20100101 Firefox/33.0
Build ID: 20141115160330

Steps to reproduce:

1. select ::before (by the way, I cannot right click it and inspect for some reason, I have to click its parent)
2. hover transform


Actual results:

The original posistion is a point in top-left corner of the viewport.


Expected results:

It should where I see it with the inverse transform applied.

Comment 1

[Tomasz Kołodziejski [:tomasz]]

I'm ccing you Brian because you seemed interested when I told you about this bug. However, I'm not entirely sure if it's the one I was experiencing before (most likely not).

Comment 2

[Brian Grinstead [:bgrins]]

(In reply to Tomasz Kołodziejski [:tomasz] from comment #0)
> Created attachment 8526416 [details]
> test.html
> 
> User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:33.0) Gecko/20100101
> Firefox/33.0
> Build ID: 20141115160330
> 
> Steps to reproduce:
> 
> 1. select ::before (by the way, I cannot right click it and inspect for some
> reason, I have to click its parent)

That's pretty much the same issue as Bug 920142 (the dom events we are listening for fire on the content element, not the anonymous :before / :after elements).

> 2. hover transform
> 
> 
> Actual results:
> 
> The original posistion is a point in top-left corner of the viewport.
> 
> 
> Expected results:
> 
> It should where I see it with the inverse transform applied.

This looks like it may be trying to get the coords of the <_moz_generated_content_before> element.  The fix may be as simple as calling CssLogic.getBindingElementAndPseudo(node) and using the content element instead. cc: pbrosset

Comment 3

[Brian Grinstead [:bgrins]]

Patrick, any idea what's going on here?  I have some speculation in Comment 2

Comment 4

[Patrick Brosset <:pbro>]

LayoutHelpers.getNodeBounds(node) is used to calculate the bounds of the un-transformed node. And indeed, as Brian said, we're trying to use it here on the <_moz_generated_content_before> element, which returns NaN for each coordinate.
This comes from the fact that we're accessing the node's offsetLeft and offsetTop properties, and it turns out they're undefined for pseudo elements. I don't know why, but they just are. They aren't undefined on Chrome though.
Using the node returned by CssLogic.getBindingElementAndPseudo(node) is definitely a solution, but it might not always give the expected result. The pseudo-element isn't necessarily at offset 0 with respect to its parent.
So either we find out why offsets are undefined and try and fix that. Or we find another solution to calculate the untransformed bounds for transformed elements.

Comment 5

[Julian Descottes [:jdescottes]]

Inspector bug triage. Filter on CLIMBING SHOES.

Issue still occurs on FF45. P3 for now, to be reviewed.