Closed Bug 1139569 Opened 5 years ago Closed 5 years ago

Animation slowed down when element is expanded in markup view

Categories

(DevTools :: Inspector, defect)

defect
Not set

Tracking

(firefox39 fixed)

RESOLVED FIXED
Firefox 39
Tracking Status
firefox39 --- fixed

People

(Reporter: bgrins, Assigned: bgrins)

References

()

Details

Attachments

(3 files)

STR: 

Open http://maxwellito.github.io/vivus/#polaroid
Let the animation finish, then press "Replay" to see the current speed.
Open devtools and inspect the #polaroid SVG element
Press "Replay".  It may be a bit slower, but not too much.
Alt+Click to expand all the children of #polaroid
Press "Replay".  Things are very slow now.

This actually seems much better with e10s so that leads me to believe that it's the markup view frontend causing jank.  We should profile this and improve perf.

It's possible that simply highlighting only the attribute that changed rather than the whole element could improve things, which would be killing two birds with one stone.
Profile that shows what is taking a lot of time.  If you invert call tree you can see that _createAttribute is calling template() for every attribute and it is very slow.
Screenshot of profile
Blocks: 1139644
This greatly limits the number of DOM manipulations per mutation and gets rid of the jank on the testcase.  Running some timings for the update() function this appears to take it down from ~4-10ms to ~0-2ms.

Try push: https://treeherder.mozilla.org/#/jobs?repo=try&revision=8b62d0514498
Assignee: nobody → bgrinstead
Status: NEW → ASSIGNED
Attachment #8572939 - Flags: review?(mratcliffe)
OS: Mac OS X → All
Hardware: x86 → All
Thanks for making that change Brian, this part was always a bit weird to work with.
I was experimenting with re-writing the markup-view recently (with react) and was testing it on sites that mutate a lot of attributes very rapidly, to animate elements via script. I ended up implementing an attribute refresh loop with a rather slow timeout (200ms or so). This helped a lot avoiding the inspector from slowing down the page, and I didn't feel this was visible to the user.
Comment on attachment 8572939 [details] [diff] [review]
markup-attributes-perf.patch

Review of attachment 8572939 [details] [diff] [review]:
-----------------------------------------------------------------

I had a patch somewhere that used a similar approach and think it is the best we can do for the moment... at least until we rewrite the tool.

When we land this bug 1080884 will also be fixed.
Attachment #8572939 - Flags: review?(mratcliffe) → review+
Blocks: 1080884
Keywords: checkin-needed
https://hg.mozilla.org/mozilla-central/rev/1a99e0788665
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Whiteboard: [fixed-in-fx-team]
Target Milestone: --- → Firefox 39
See Also: → 1145914
Depends on: 1147128
No longer blocks: 1139644
Duplicate of this bug: 1090890
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.