1221369 - Improve animation of Home panels when a user taps the URL bar

Status: RESOLVED INCOMPLETE

(Firefox for Android Graveyard :: Awesomescreen, defect, P2)

Description

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Similar to bug 1014848 but this is just about the way the home panels and page header comes in as the keyboard and toolbar do their own thing.

I've noticed some pretty bad "flashing" that occurs when I tap the URL bar when I'm on a website. This doesn't occur of course if I'm already in about:home. But when our users are on any give website, this tends to happen quite a bit.

I've been exploring ways to make this interaction feel better. The end goal is to find ways in which we can help our users notice the Home panels that show up behind the keyboard, and to make fennec feel like a higher quality product. I'd like to make this everyday interaction feel more "intentional".

Comment 1

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: mov_url_activate_bounce_short.mov

Leaving this here as a WIP, would love to see this in an actual build if anyone's interested. :)

Comment 3

[Andrzej Hunt :ahunt]

Attachment: Video of animation with keyboard being activated before the animation starts

I've started playing around with this. The animation is quite janky, and I need to figure out how to deal with that (we'll probably want to tune the parameters later, but they're good enough for testing).

The main issue is we have no insight into and control of the keyboard animation. I seem to get better behaviour if we we delay activating the keyboard until after we start the homepager animation (which is different from the preview) - I'll attach a separate video demoing that.

(Note: the animation changes in the URL bar should probably be ignored, my initial approach touched all animations, which isn't in any way necessary.)

I created the video on an N4, it's possible faster devices will look better. It might be worth doing some profiling to figure out if we're doing large amounts of unnecessary work somewhere.

Comment 4

[Andrzej Hunt :ahunt]

Attachment: Video of keyboard being activated after starting the homepager animation

This is what this would look like if we activate the keyboard later. This seems less janky to me.

Comment 5

[Andrzej Hunt :ahunt]

Note: I'll still be doing more experimentation, this is just a proof of concept showing that this should be possible.

Comment 6

[Andrzej Hunt :ahunt]

Attachment: MozReview Request: WIP: Bug 1221369 - Better HomePager animations

Review commit: https://reviewboard.mozilla.org/r/43941/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/43941/

Comment 7

[Andrzej Hunt :ahunt]

It turns out the jankiness was caused by confusion around HW/SW layers, with that fixed the animations are quite smooth on the N4. Still some tweaking required, but this is almost usable.

Comment 8

[Andrzej Hunt :ahunt]

Comment on attachment 8737394 [details]
MozReview Request: WIP: Bug 1221369 - Better HomePager animations

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/43941/diff/1-2/

Comment 9

[bull500]

hello 
Can this be bumped up?  
Its quite in your face and can be easily perceived creating a bad impression of slowness especially since its the main screen/interaction area.

Comment 10

[Wesley Huang [:wesley_huang] (EPM) (NI me)]

set to P1 per input from taipei UX folks.

Comment 11

[BMO Automation]

We have completed our launch of our new Firefox on Android. The development of the new versions use GitHub for issue tracking. If the bug report still reproduces in a current version of [Firefox on Android nightly](https://play.google.com/store/apps/details?id=org.mozilla.fenix) an issue can be reported at the [Fenix GitHub project](https://github.com/mozilla-mobile/fenix/). If you want to discuss your report please use [Mozilla's chat](https://wiki.mozilla.org/Matrix#Connect_to_Matrix) server https://chat.mozilla.org and join the [#fenix](https://chat.mozilla.org/#/room/#fenix:mozilla.org) channel.