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

RESOLVED INVALID

Status

()

defect
P5
normal
RESOLVED INVALID
5 years ago
3 years ago

People

(Reporter: antlam, Unassigned)

Tracking

(Blocks 2 bugs, {meta})

unspecified
x86
Android
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(fennec+)

Details

Attachments

(7 attachments, 3 obsolete attachments)

(Reporter)

Description

5 years ago
Posted video 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.
(Reporter)

Comment 1

5 years ago
Posted image inputbar_states.png
(Reporter)

Updated

5 years ago
Depends on: 1010739, 1010740, 1010741
tracking-fennec: --- → ?
tracking-fennec: ? → +
(Reporter)

Comment 2

5 years ago
Posted file urlbar_all_9patch.zip (obsolete) —
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?
Flags: needinfo?(lucasr.at.mozilla)
(Reporter)

Comment 3

5 years ago
Posted file icon_x.zip (obsolete) —
Attaching 'x' icon for both private and normal mode... MDPI -> XXHDPI (just incase)
(Reporter)

Comment 4

5 years ago
Attaching a preview of what this essentially looks like put next to each other.
(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.
Flags: needinfo?(lucasr.at.mozilla)
(Reporter)

Comment 6

5 years ago
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.
Attachment #8433526 - Attachment is obsolete: true
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.
Flags: needinfo?(alam)
(Reporter)

Comment 8

5 years ago
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?
Flags: needinfo?(alam)
(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.
(Reporter)

Comment 10

5 years ago
Posted file icon_x_normal.zip (obsolete) —
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.
Anthony, Ian, what do you think?
Flags: needinfo?(ibarlow)
Flags: needinfo?(alam)
Looking good. Here are my overall comments http://cl.ly/image/35293C2q2h29
Flags: needinfo?(ibarlow)
(Reporter)

Comment 14

5 years ago
Posted image 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 :)
Flags: needinfo?(alam)
(Reporter)

Comment 15

5 years ago
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!
(Reporter)

Comment 16

5 years ago
^ sorry! visual side of this should be tracked in bug 1010740 instead. My mistake!
(Reporter)

Comment 17

5 years ago
Posted file icon_x.zip
Refined the x a little so it scales better! (just made it a smidge smaller)
Attachment #8433534 - Attachment is obsolete: true
Attachment #8440035 - Attachment is obsolete: true
(Reporter)

Updated

5 years ago
Keywords: meta
Blocks: new-toolbar-v2
No longer blocks: new-toolbar-v1
filter on [mass-p5]
Priority: -- → P5
(Reporter)

Updated

3 years ago
Status: NEW → RESOLVED
Last Resolved: 3 years ago
Resolution: --- → INVALID
(Reporter)

Comment 19

3 years ago
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.
You need to log in before you can comment on or make changes to this bug.