Closed Bug 1058323 Opened 6 years ago Closed 6 years ago

Update gaia-progress component to use gif

Categories

(Firefox OS Graveyard :: Gaia, defect)

x86
macOS
defect
Not set

Tracking

(Not tracked)

RESOLVED WONTFIX

People

(Reporter: kgrandon, Assigned: kgrandon)

References

Details

Attachments

(1 file)

Using a CSS transition appears to have slowed down loading time significantly, let's try using a gif instead.
Attached file Github pull request
The old keyframe animation seemed to have quite a performance hit, so let's try using a gif instead. Guillaume or Wilson - could one of you guys review this one? Thanks!
Attachment #8478704 - Flags: review?(wilsonpage)
Attachment #8478704 - Flags: review?(gmarty)
(In reply to Kevin Grandon :kgrandon from comment #1)
> Created attachment 8478704 [details] [review]
> Github pull request
> 
> The old keyframe animation seemed to have quite a performance hit, so let's
> try using a gif instead. Guillaume or Wilson - could one of you guys review
> this one? Thanks!

For themeability requirements I don't think we can use a hardcoded gif. The color needs to be able to be changed by CSS. Do we know why original animation was unperformant?
Attachment #8478704 - Flags: review?(wilsonpage)
(In reply to Wilson Page [:wilsonpage] from comment #2)
> For themeability requirements I don't think we can use a hardcoded gif. The
> color needs to be able to be changed by CSS. Do we know why original
> animation was unperformant?

My guess is that gifs just perform better than CSS animations in this case. We'd need to profile extensively to find out why. We should try to do this, but we're running out of time this release. Worst case it seems like we might have to be able to specify gifs per theme.
(In reply to Kevin Grandon :kgrandon from comment #3)
> (In reply to Wilson Page [:wilsonpage] from comment #2)
> > For themeability requirements I don't think we can use a hardcoded gif. The
> > color needs to be able to be changed by CSS. Do we know why original
> > animation was unperformant?
> 
> My guess is that gifs just perform better than CSS animations in this case.
> We'd need to profile extensively to find out why. We should try to do this,
> but we're running out of time this release. Worst case it seems like we
> might have to be able to specify gifs per theme.

For themes to be *really* powerful, they need to be as decoupled as possible from the apps/components that they style. Declaring assets for individual components doesn't scale. We need to be using more agnostic 'specced' variables like 'highlight-color' and have components/apps use these variables when defined.

I would argue that if implemented well, a CSS animation should outperform an animated gif. IIRC animated gifs require constant painting, whereas CSS animations can be animated via the compositor.
Oh I agree that it's possible, but I guess these gifs don't paint every frame? It needs more investigation, but I'm not sure if we have time in 2.1 to pull it off. If you want to profile and figure out what's going on be my guest, otherwise I'll help look into this further in 2.2.
Agreed. Have you proven switching to gifs solves the problem, or is this just an experiment?
(In reply to Wilson Page [:wilsonpage] from comment #6)
> Agreed. Have you proven switching to gifs solves the problem, or is this
> just an experiment?

We need to profile deeper, but a gif will currently perform better. My guess is that it's potentially due to the repeating gradient, but we should profile and verify this in the future.
Attachment #8478704 - Flags: review?(gmarty)
We've landed a reduced keyframe animation in bug 1052503. Let's try that for now instead.
Status: ASSIGNED → RESOLVED
Closed: 6 years ago
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.