1296452 - Investigate why there are keyframe animations in the panel opening

Status: RESOLVED INCOMPLETE

(Firefox :: Menus, defect, P4)

Description

[Jared Wein [:jaws] (please needinfo? me)]

From https://bugzilla.mozilla.org/show_bug.cgi?id=1296070#c9,

The rest of the Style flushes seem to be caused by keyframe animations.

3) We need to understand what the keyframe animations are, since, as far as I understand it, the menu is supposed to be scaling up (which shouldn't require extra paints).

Comment 1

[Jared Wein [:jaws] (please needinfo? me)]

I don't see keyframe animations in my local SPS profile. Mike, can you help point out what I should be looking for? I see composites, refresh, vsync, styles, reflows, displaylist, rasterize, and layer transactions.

Comment 2

[Mike Conley (:mconley) (:⚙️)]

Hey jaws,

Here are the steps I used to see the keyframe animations in the profile from bug 1296070 comment 9.

1) Visit https://cleopatra.io/#report=bb1de7cb2d9244369ce19404f3711268e51b8a1f&filter=%5B%7B%22type%22%3A%22RangeSampleFilter%22,%22start%22%3A22600995,%22end%22%3A22609660%7D,%7B%22type%22%3A%22RangeSampleFilter%22,%22start%22%3A22601807,%22end%22%3A22602018%7D%5D&selection=0,23,24,25,26,27,28,1,29,30,31,32,33,34,35,36,37,38,39,40,41,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,57,58,59,57,58,59,57,58,59,60,61,62,63
2) Towards the top of the histograms, in the "Frames" dropdown, choose "GeckoMain".
3) Each of the green blocks describes a styling refresh. If you hover over them with your mouse, they're given numbers. For example, the left-most refresh I see in this profile is "Refresh 61". These green blocks also contain blocks within the refresh, for example, style calculation time, display list update time, rasterization time, compositing, etc.

The Style calculation blocks are dark purple, and are to the left of Display List, which are maroon.

Sometimes sandwiched in between Style and Display List is "Reflow".

Part of the challenge is that sometimes, these items are really really small, and you have to zoom in more with Cleopatra to see them. Anyhow, when you see them, and you hover over them, you get a stack.

For example, looking at Refresh 63 (third refresh in the profile), I'm seeing Styles 68, with a stack that contains:

mozilla::dom::CSSTransition::Tick

and further down the stack:

mozilla::dom::KeyframeEffectReadOnly::NotifyAnimationTimingUpdated

which suggests to me that there's some kind of keyframe animation going on.

I'm not entire sure these style flushes are a problem or not - but I thought that the animations that we used for making the menu appear were all on the compositor, which made me think that style flushes would not be necessary.

Comment 3

[Mike Conley (:mconley) (:⚙️)]

Looking at the profile again, and a new one I just created, I don't think there's an issue here. What I'm seeing here is just the "natural" style re-calculation occurring via the refresh driver:

https://perfht.ml/2ppB3lj