1014848 - Improve interactions for "toolbar" (activating/deactivating awesome bar)

Status: RESOLVED INVALID

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

Description

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

Attachment: inpurbar_exp5.mov

The goal here is to improve the overall user experience of a very common and typical interaction. If we can add a touch of "whimsy" to this then all the better!

Main things to note: 

This does use new assets that have been divided off into separate bugs. 

The general interaction throws the "tab curve", "tabs tray" icon , "menu" icon, and background matte upwards to create a single background colour for which the input/URL bar and "x" will extend across. 

Instead of just having a curve on the right hand side, the top left corner of the default UI (inactive URL bar) is rounded to complete the visual of a "tab". 

The input bar expands horizontally across with a little bounce at the end.

The "x" pops open from the center with a little bounce at the end.

There is a default "magnifying glass" icon to show the user they can search with the Awesome bar rather than a logo.

Comment 1

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

Attachment: inputbar_states.png

Comment 2

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

Attachment: urlbar_all_9patch.zip

Not dependent on, but nice to keep in mind what Desktop side is doing for Private browsing (https://bugzilla.mozilla.org/show_bug.cgi?id=986635)

Also, here are the 9 patch files for the URL bar part of the toolbar in normal, active, private normal, and private active modes. Will attach the x icon next.

Lucas, I forgot - did you need these in different resolutions?

Comment 3

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

Attachment: icon_x.zip

Attaching 'x' icon for both private and normal mode... MDPI -> XXHDPI (just incase)

Comment 4

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

Attachment: preview_toolbar_states.png

Attaching a preview of what this essentially looks like put next to each other.

Comment 5

[Lucas Rocha (:lucasr)]

(In reply to Anthony Lam (:antlam) from comment #2)
> Created attachment 8433526 [details]
> urlbar_all_9patch.zip
> 
> Not dependent on, but nice to keep in mind what Desktop side is doing for
> Private browsing (https://bugzilla.mozilla.org/show_bug.cgi?id=986635)
> 
> Also, here are the 9 patch files for the URL bar part of the toolbar in
> normal, active, private normal, and private active modes. Will attach the x
> icon next.
> 
> Lucas, I forgot - did you need these in different resolutions?

Yep, at least mdpi, hdpi and xhdpi.

Comment 6

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

Attachment: urlbar_all_9patch.zip

The different DPI's cause for an interesting scaling problem when it comes to the stroke and the corner radius. But, I've flattened it and let's see how this works.

I think we might want to tweak the HDPI assets particularly around the thickness of the stroke, but we'll see.

Comment 7

[Lucas Rocha (:lucasr)]

Before I submit the patches, Anthony, what do you think of this?
https://dl.dropboxusercontent.com/u/1187037/new-toobar-v1.apk

This is for phones only btw. I think the new 'x' button is a bit too contrasty.

Comment 8

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

The colors and the elements look right.. but I do see what you mean, maybe I can give the current 'x' to the active state when the user taps it and create a lighter one for the normal state...

Interaction wise it's still flying to the right for me? Can we try to get it going upwards like in the .mov mock up?

Comment 9

[Lucas Rocha (:lucasr)]

(In reply to Anthony Lam (:antlam) from comment #8)
> The colors and the elements look right.. but I do see what you mean, maybe I
> can give the current 'x' to the active state when the user taps it and
> create a lighter one for the normal state...
> 
> Interaction wise it's still flying to the right for me? Can we try to get it
> going upwards like in the .mov mock up?

Yep, the animation is not there yet. I'm only looking for feedback on the visuals.

Comment 10

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

Attachment: icon_x_normal.zip

Ian also noticed that the spacing on the right of the input bar is a bit small compared to the left of it. Is it equal in the code? 

Also, top left corner rounding! :)

Btw, here is the 'x' on a lighter shade of grey for the normal mode.

Comment 11

[Lucas Rocha (:lucasr)]

Anthony, Ian, what do you think?

Comment 12

[Lucas Rocha (:lucasr)]

Of this: https://dl.dropboxusercontent.com/u/1187037/new-toobar-v2.apk

Comment 13

[Ian Barlow (:ibarlow)]

Looking good. Here are my overall comments http://cl.ly/image/35293C2q2h29

Comment 14

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

Attachment: toolbar_compare1.png

Put these side by side and noticed a couple things but i found mapping over some specs to be distracting. Will work on some later on though :)

Comment 15

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

Attachment: prev_toolbar_states3_specs.png

Adding some basic specs, been sticking these images in my dropbox and pulling it up on my phone to see how they are. Thought you might find these useful!

Comment 16

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

^ sorry! visual side of this should be tracked in bug 1010740 instead. My mistake!

Comment 17

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

Attachment: icon_x.zip

Refined the x a little so it scales better! (just made it a smidge smaller)

Comment 18

[Brad Lassey [:blassey] (use needinfo?)]

filter on [mass-p5]

Comment 19

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

I'm calling it on this one. I think we've made changes elsewhere that affect this bug too much. Will file another as we need.