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   

Description Adam Roben (:aroben) 2009-06-15 08:49:11 PDT
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.
Comment 1 Adam Roben (:aroben) 2009-06-15 08:49:56 PDT
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).
Comment 2 Adam Roben (:aroben) 2009-06-15 08:55:37 PDT
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.
Comment 3 Patrick Mueller 2009-06-22 10:57:27 PDT
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.
Comment 4 Adam Roben (:aroben) 2010-11-04 07:53:21 PDT
<rdar://problem/8630435>
Comment 5 Timothy Hatcher 2010-11-04 14:51:10 PDT
The Timeline panel has this info.