Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Inspected elements within iframes are highlighted incorrectly #443

Closed
suchipi opened this issue Oct 19, 2016 · 6 comments · Fixed by #552
Closed

Inspected elements within iframes are highlighted incorrectly #443

suchipi opened this issue Oct 19, 2016 · 6 comments · Fixed by #552

Comments

@suchipi
Copy link
Contributor

suchipi commented Oct 19, 2016

If you hover over an element that lives within an iframe whose position is not the upper-left corner of the parent page, then the blue/green/orange highlight that is drawn over that element to indicate which you are hovering over is not drawn in the right location (iframe offset not accounted for).

Here I am hovering over the "Hello" button:

Here's a link to the page where the screenshot was taken

@gaearon
Copy link
Contributor

gaearon commented Feb 15, 2017

Happy to take a fix for this. Would you like to submit one?

@suchipi
Copy link
Contributor Author

suchipi commented Feb 15, 2017

I could tackle it this weekend. Could you point me in the right direction? I'm not at all familiar with the devtools codebase, but would love to learn more.

@gaearon
Copy link
Contributor

gaearon commented Feb 15, 2017

I don't know it that well either. I would start with looking at the plain shell and reproducing the issue in it.

I'm also not sure if this is even a DevTools issue at all, or just a Chrome issue. I'm not sure how highlighting is implemented.

@suchipi
Copy link
Contributor Author

suchipi commented Feb 15, 2017

Chrome's inspector highlights elements in iframes correctly, and the coloring is slightly different when highlighting in the React Devtools, so it's probably reimplemented.

I'll start from there. Thanks

@gaearon
Copy link
Contributor

gaearon commented Feb 15, 2017

You'll likely want to hunt for getClientBoundingRect() calls or something like this.

@suchipi
Copy link
Contributor Author

suchipi commented Feb 18, 2017

I have opened a PR that fixes this issue. If you could review it, I would appreciate it.

suchipi added a commit to suchipi/react-devtools that referenced this issue Feb 22, 2017
gaearon pushed a commit that referenced this issue Feb 24, 2017
…ithin iframe(s) (#552)

* Add test app that nests iframes

* Check intermediate iframes when calculating Overlay rect (#443)

* Reuse reference to iframe node

* Move nested frames examples to sink
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
2 participants