Bug 26406
| Summary: | Would like Inspector to show what JS caused relayouts/repaints | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Adam Roben (:aroben) <aroben> |
| Component: | Web Inspector (Deprecated) | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED FIXED | ||
| Severity: | Enhancement | CC: | hyatt, pmuellr, sam, timothy |
| Priority: | P2 | Keywords: | InRadar |
| Version: | 528+ (Nightly build) | ||
| Hardware: | All | ||
| OS: | All | ||
Adam Roben (:aroben)
We've seen examples of a site calling element.clientWidth (or similar) inside a loop, making that site slow due to the relayout that each clientWidth call requires. It would be great for the Inspector to indicate what JS caused a relayout (or repaint) so that web developers could find and fix these problems.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Adam Roben (:aroben)
One idea Hyatt, Tim, and I discussed is to show when relayouts/repaints happened on a timeline. Then you could have some way of finding out the JS backtrace that was active at the time of the relayout/repaint (if any).
Adam Roben (:aroben)
If we do put this information into a timeline, it probably makes sense to unify it with the resource-loading timeline in the Resources panel. See bug 26407 for another idea which might warrant extending the resource-loading timeline to show more types of information.
Patrick Mueller
See also Bug 26317 ; the referenced paper discusses general ideas regarding debugging information based on events. It would be useful to see ALL the events fired over a period of time, be able to filter those, etc.
Adam Roben (:aroben)
<rdar://problem/8630435>
Timothy Hatcher
The Timeline panel has this info.