Open Bug 962106 Opened 6 years ago Updated Last year

Progress bar animation refinements

Categories

(Firefox for Android :: Theme and Visual Design, defect)

All
Android
defect
Not set

Tracking

()

Tracking Status
firefox29 --- affected
firefox30 --- affected
firefox31 --- affected

People

(Reporter: ibarlow, Unassigned)

References

(Depends on 2 open bugs)

Details

Back in https://bugzilla.mozilla.org/show_bug.cgi?id=867633#c1 I outlined some animation designs for the progress bar. Now that we have one in Nightly, it would be great to see how much of this we can recreate in the browser. The changes listed below are all in service of making the page load *feel* smoother and faster.

Key changes:
* Animate the progress bar all the way to the end of the screen. Currently it just blinks off half way if it's done earlier. Adding a quick 'shoot across the screen' animation would make this feel more refined and also faster. (See the animations in the above link)
* Fade out the progress bar (quickly) when it's done, instead of just blinking it off.
* Try to smooth out the animation, and keep the progress bar from sitting still for as long as it does currently. In my testing it seems to stall out the most often at around 30% and 70%, sometimes for what feels like several seconds. Even a slow creep a few pixels at a time would be better than a dead stop here.
tracking-fennec: --- → ?
Consider the reload usecase, bullet 1 might cover this but it is worth calling out. The behavior definitely looks different on trunk. The progress bar also shows up when pressing the back button.
OS: Mac OS X → Android
Hardware: x86 → All
(In reply to Ian Barlow (:ibarlow) from comment #0)
> Back in https://bugzilla.mozilla.org/show_bug.cgi?id=867633#c1 I outlined
> some animation designs for the progress bar. Now that we have one in
> Nightly, it would be great to see how much of this we can recreate in the
> browser. The changes listed below are all in service of making the page load
> *feel* smoother and faster.
> 
> Key changes:
> * Animate the progress bar all the way to the end of the screen. Currently
> it just blinks off half way if it's done earlier. Adding a quick 'shoot
> across the screen' animation would make this feel more refined and also
> faster. (See the animations in the above link)
> * Fade out the progress bar (quickly) when it's done, instead of just
> blinking it off.
> * Try to smooth out the animation, and keep the progress bar from sitting
> still for as long as it does currently. In my testing it seems to stall out
> the most often at around 30% and 70%, sometimes for what feels like several
> seconds. Even a slow creep a few pixels at a time would be better than a
> dead stop here.

Animate, fade and "smooth out" animation all can have an impact on the performance. I won't easily regress the performance wins we just picked up. We need to be mindful of how we implement these ideas.
Indeed. Hence the wording of my comment, "it would be great to see how much of this we can recreate in the browser". 

I'd like us to try all of it and see what we break, and then discuss from there what we feel we can keep and what we should cut for performance reasons.
If you switch to a new tab while a page is loading, the progress bar (imo) awkwardly disappears mid-animation - we may want an animation there such as fade out (without affecting page load perf).
Duplicate of this bug: 962836
Assignee: nobody → bnicholson
tracking-fennec: ? → 29+
Status: NEW → ASSIGNED
Depends on: 970719
Depends on: 970720
Depends on: 970721
Removing tracking from here since we're tracking each of these changes individually (see dependencies).
tracking-fennec: 29+ → ---
Assignee: bnicholson → nobody
Status: ASSIGNED → NEW
You need to log in before you can comment on or make changes to this bug.