1414503 - When using a coloured theme, it's obvious that Awesomebar icons pop instantly in and out of view, which is ugly. Perhaps they should animate

Status: RESOLVED INCOMPLETE

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

Description

[Mark]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:58.0) Gecko/20100101 Firefox/58.0
Build ID: 20171103100331

Steps to reproduce:

Choose a gray theme (I tried Mac OSX Light and Linen Light)
The Awesomebar becomes gray with a white cut-out for the URL text
Load any page
The "stop loading" X icon pops instantly into view, instantly changing the size of the white cut-out
When loading is complete the X icon pops out of view and the white cut-out instantly changes size again.
The same is true with the other Awesomebar icons (Reader mode, Open in app, etc)

The sudden change in size of the white cut-out is a bit janky

Perhaps the Awesomebar icons could animate into view, maybe they could slide in from the right i.e. from behind the "tabs" icon?? Then the white cut-out in the Awesomebar would shrink and grow in a smooth fashion

It's not noticeable with the default white theme, and is less noticeable with a pattern theme.

Comment 1

[Jan Henning [:JanH]]

In the old design
- those toolbar icons didn't actually affect the (visual) size of the URL field, as they appeared *inside* its borders
- when the URL field changed its size when transitioning to/from editing mode, that size change was animated

With the new design, initially there wasn't any visible border around the URL field at all, so all animations for it were dropped.
Then along came bug 1389164 and now the URL text has gained a visible border again when using a theme, so I suppose we should indeed start animating any size changes again, and maybe do something about the icons themselves as well.

In addition to the points you mention, this also affects the transition to/from editing mode: The tabs counter and menu button are animated into/out of view, but the background of the URL bar text changes its size immediately, without any animations.

Comment 2

[Mark]

Mmmm, I didn't spot that one. Still some polishing to do!

cheers

Comment 3

[Nevin Chen(Not active on Bugzilla)]

Please help advise. Thanks!

Comment 4

[Jack Lin[:jacklin]]

NI visual designer

Thanks

Comment 5

[Carol Huang [:Carol]]

Attachment: bug_awesomebar.png

I think we could smooth out the awesome bar transition  in  different mode. But one thing I noticed is that on edit mode and browsing mode, the awesome bar wasn't aligned from the left side.(see attachment) maybe we should open a bug for this then figure out the awesome bar growing transition.

Comment 6

[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.