709433 - animate awesome bar transition from tab bar to keyboard input

Status: RESOLVED FIXED

(Firefox for Android Graveyard :: General, defect, P4)

Description

[Alex Keybl [:akeybl]]

We should animate the awesome bar from the tab bar UI to the text input view when touched. There is a UI element in common (the title outline), which should make for a cool scaling transition. Right now the lack of transition makes the experience less smooth.

Apologies if this is a dupe of existing UI spec.

Comment 1

[Alex Keybl [:akeybl]]

Attachment: created a crappy gif of what I was thinking

Comment 2

[Alex Keybl [:akeybl]]

In case the attachment doesn't work - https://imgur.com/RrG3F

Comment 3

[Madhava Enros [:madhava]]

This would definitely be something that would be great to see.

Sriram - you had a work-in-progress for something similar, didn't you?

Comment 4

[Alex Keybl [:akeybl]]

(In reply to Alex Keybl [:akeybl] from comment #1)
> Created attachment 581728 [details]
> created a crappy gif of what I was thinking

Not sure if this came across in the gif, but the topbar UI fades out

Comment 5

[Sriram Ramasubramanian [:sriram]]

Does this animation [of fading out] hold good with the new URL bar design?

Comment 6

[Alex Keybl [:akeybl]]

Just to clarify, my proposal was both a combination of scaling the URL bar and fading out the older background.

Comment 7

[Sriram Ramasubramanian [:sriram]]

Attachment: WIP

This WIP does a fade-in / fade-out transition between both.
The fade-in seems to work fine on Nexus. fade-out is laggy.
They both are fine on S2.
Basically the android's version can have different timeouts.
It's better to write our own fade-in / fade-out with a duration that we want -- which will ensure a proper transition.

Comment 8

[Mark Finkle (:mfinkle) (use needinfo?)]

Let's get a build posted so UX can comment and give their r+ first

Comment 9

[Mark Finkle (:mfinkle) (use needinfo?)]

Comment on attachment 591273 [details] [diff] [review]
WIP

waiting for UX

Comment 10

[Ian Barlow (:ibarlow)]

Just tried a build from Sriram, I don't think we're quite there yet, there is some blinking happening in the transition which feels uncomfortable.

Rather than attempt to describe the changes I'd like us to try, I'm going to mock up a more detailed animation and post it here, so we can refer to it and compare to the build.

Will post as soon as I can

Comment 11

[Ian Barlow (:ibarlow)]

Hi Sriram, here's a little movie I made describing what I'd like our urlbar transition to look like: http://dl.dropbox.com/u/2182500/Mozilla/urlbar_animation.mov

Have a look, and let's chat about it in IRC :)

Comment 12

[Madhava Enros [:madhava]]

(In reply to Ian Barlow (:ibarlow) from comment #11)
> Hi Sriram, here's a little movie I made describing what I'd like our urlbar
> transition to look like:
> http://dl.dropbox.com/u/2182500/Mozilla/urlbar_animation.mov
> 
> Have a look, and let's chat about it in IRC :)

This is awesome.

Comment 13

[Ian Barlow (:ibarlow)]

Soft blocking nom?

This is a nice bit of UI polish that would make the awesombar experience feel much nicer.

Comment 14

[Sriram Ramasubramanian [:sriram]]

With the current UI, this is not feasible easily for the following reasons:
1. The AwesomeBar and the GeckoApp are two different activities. Hence the time to load the app, and make the transition consistent cannot be perfect.
2. The AwesomeBar has a dark background for the URL bar, while GeckoApp has a light background. Now fading from light to dark is a big hassle.
3. There is a menu button and a tabs button that needs to be taken care of during transitioning -- basically "inflate them, fade them and hide them", unnecessarily.

With the new UI, this will be easier to do:
1. The background colors of the AwesomeBar and GeckoApp are the same. Hence background transitioning wouldn't be needed.
2. The AwesomeBar can be made into a PopupWindow and shown "over" GeckoApp as a layer. Thereby, it feels like the drop-down for url-bar in desktop. When it is made into a popup, we can just hide the "custom" menu button, tabs-button and animate the increase of the width of the AwesomeBar popup window.

Hence it is better to do it for 2.0, along with the tablet UI -- which gracefully fits into mobile UI too. With the current color scheme and the UI approach of different activities, syncing the transitions aren't going to be easier.

Comment 15

[Ian Barlow (:ibarlow)]

Adding Lucas

Per our conversation in IRC, here is the latest version of this animation http://cl.ly/0g0Z220G0t18

Comment 16

[Ian Barlow (:ibarlow)]

Just a note to Lucas and myself to remember to try reversing this animation when you leave the awesomebar.

Comment 17

[Lucas Rocha (:lucasr)]

Taking this one as I'll work on it for Fx20.

Comment 18

[Lucas Rocha (:lucasr)]

Attachment: Animate toolbar when switching to/from awesome screen

Comment 19

[Lucas Rocha (:lucasr)]

Ian, test build is here:
https://dl.dropbox.com/u/1187037/animated3.apk

The animation will happen on phones and 7" tablets. Please test on both.

Comment 20

[Ian Barlow (:ibarlow)]

Couple things:

I would still like to see what it looks like when we don't fade the page title away as soon as you tap the url bar, and instead leave it up all the way until we flip to the awesomescreen and switch the text to the URL. 

Also, I think we should try unfocusing the url bar as soon as you leave the awesomescreen. So when it shrinks back to normal size we don't keep the orange border on.

Comment 21

[Lucas Rocha (:lucasr)]

Attachment: Animate toolbar when switching to/from awesome screen

Comment 22

[Mark Finkle (:mfinkle) (use needinfo?)]

Comment on attachment 686663 [details] [diff] [review]
Animate toolbar when switching to/from awesome screen

I don't see anything that looks out of line

Comment 23

[Lucas Rocha (:lucasr)]

FYI: I've just noticed that the fake right edge looks broken on pre-Honeycomb devices. Needs investigation. I disabled the animation on these devices for now and filed bug 817524 to track this.

Also noticed that entering awesome screen, rotating device, then exiting awesome screen might cause slightly broken layout in phones running ICS or later (different margins are restored). I filed bug 817526 to track this.

Pushing this patch now to avoid constant merge conflicts. These bugs should be simple to fix anyway.

https://hg.mozilla.org/integration/mozilla-inbound/rev/f306df3468d5

Comment 24

[Ed Morley [:emorley]]

https://hg.mozilla.org/mozilla-central/rev/f306df3468d5