1288986 - Tab loading throbber is still jittering when e10s is on

Status: RESOLVED DUPLICATE of bug 759252

(Firefox :: Tabbed Browser, defect)

Description

[Ting-Yu Chou [:ting] (away)]

The tab loading animation (rounding circle) could be jittering even when e10s is on. I don't really think it requires CPU time.

Comment 1

[Ting-Yu Chou [:ting] (away)]

The APNG (toolkit/themes/shared/icons/loading.png) is painted by FrameAnimator.

Comment 2

[Ting-Yu Chou [:ting] (away)]

Chrome is using SVG for the throbber: https://chromium.googlesource.com/chromium/src/+/master/ui/webui/resources/images/throbber_small.svg

Comment 3

[Ting-Yu Chou [:ting] (away)]

Offline Q&A on IRC:

<ting> Jerry_IRCCloud: does svg animation run on compositor thread?
<birtles> ting: no
<ting> birtles: 3q
<birtles> ting: we layerize the contents, so we don't have to re-render, but we still update the transform on the main thread so it can still suffer jank
<ting> birtles: i see, thanks :)
<birtles> I assume "svg animation" here = "smil animation, e.g. <animate> etc."
<Jerry_IRCCloud> :)
<birtles> If you use CSS Animations/Transitions on SVG content it can run on the compositor
<ting> birtles: mind if I copy these to bugzilla?
<birtles> ting: by all means, feel free to ni me if you need more info
<ting> birtles: just fyi, i'm asking because of bug 1288986
<birtles> ting: oh, the SVG linked to there uses CSS animations so it should be able to run on the compositor
<birtles> if you can inspect that element with DevTools you should be able to tell if it's running on the compositor
<ting> birtles: does that mean DevTools has a filed showing whether the animation is running on the compositor? 
<birtles> ting: yeah, the animation inspector shows a lightning bolt on animations running on the compositor
<birtles> ting: if you expand the animation, it can sometimes tell you why the animation is not running on the compositor 
<birtles> it's not 100% accurate thought (there's a bad bug where if you have a delay it doesn't recognize that it's running on the compositor--we're working on it)
<birtles> *though
<ting> birtles: got it

Comment 4

[Ting-Yu Chou [:ting] (away)]

It seems making the throbber APNG a SVG with CSS Animations/Transitions for rotation is the best choice, which we can offload the work to the compositor thread and add CSS Animations/Transitions code only once.

Stephen, can we make that?

Comment 5

[Ting-Yu Chou [:ting] (away)]

Attachment: poc

Replace the throbber.png with only a frame of it, and apply CSS Animation/Transition to rotate, it runs smooth.

Comment 6

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

I believe this sort of thing was attempted in bug 759252.

It might be worth duping this bug over and revisiting the patch in that bug, since it looks like it landed but got backed out (but the things that prompted the backout are now marked resolved). See https://bugzilla.mozilla.org/show_bug.cgi?id=759252#c57.

Comment 7

[Stephen Horlander [:shorlander]]

I did some experiments around this: http://people.mozilla.org/~shorlander/mockups-interactive/spinner-test/spinner-01-svg.html

What I discovered with this approach is that it looks great on hi-res displays, it looks pretty blurry on normal displays.