1052481 - [Search] Visual Refinements for Rocket Bar

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::System::Browser Chrome, defect)

Description

[Eric Pang [:epang] UX]

Hi,

The collapsed rocket bar needs some visual refinements.

1. Input field width and height needs to be updated to spec
2. Input text should be italic (also check colour) 
3. The ellipses are too close to the edge of the input field, can we add 5rem padding to the right?

Link to spec: https://mozilla.box.com/s/y6ubtn3364pvcmoxgis7

Thanks!

Comment 1

[Eric Pang [:epang] UX]

(In reply to Eric Pang [:epang] from comment #0)
> Hi,
> 
> The collapsed rocket bar needs some visual refinements.
> 
> 1. Input field width and height needs to be updated to spec
> 2. Input text should be italic (also check colour) 
> 3. The ellipses are too close to the edge of the input field, can we add
> 5rem padding to the right?
> 
> Link to spec: https://mozilla.box.com/s/y6ubtn3364pvcmoxgis7
> 
> Thanks!

correction to # 3 The ellipses are too close to the edge of the input field, can we add 5rem padding to the right?

It should be 1 rem, not 5 (there should be 1 rem on both sides of the input box)

Comment 2

[Kevin Grandon :kgrandon]

Due to the animated nature of the rocketbar, it's going to be very difficult to consider these modifications along with the ones from bug 1052492 separately. Due to this, I'm going to combine them into this bug, and try to get a single set of requirements for the rocketbar. We may have to compromise here a bit in order to keep the nice animation.

Comment 4

[Kevin Grandon :kgrandon]

> 2. Div line should be #000000 at 5% opacity

This was implemented already, but I've modified it to fit the spec'd position and size.

> 3. The ellipses are too close to the edge of the input field, can we add 1rem padding to the right?

Implemented in patch.

> 2. Input text should be italic (also check colour) 

Implemented already.


This leaves the following remaining items:

Collapsed:
1. Input field width and height needs to be updated to spec

Expanded:
1. The input field should have a light and right padding (inside) of 1.6 rem
2. Height of the Rocket bar - should be 3.4 rem (HVGA) and 5.1 (Flame)
3. The back/forward buttons are vertically aligned with the RB

Comment 5

[Kevin Grandon :kgrandon]

Attachment: Github pull request

Comment 6

[Kevin Grandon :kgrandon]

> 3. The back/forward buttons are vertically aligned with the RB

This is implemented in the latest patch.

Comment 7

[Kevin Grandon :kgrandon]

This leaves the following remaining items:

Collapsed:
1. Input field width and height needs to be updated to spec

Expanded:
1. The input field should have a light and right padding (inside) of 1.6 rem
2. Height of the Rocket bar - should be 3.4 rem (HVGA) and 5.1 (Flame)

Comment 8

[Kevin Grandon :kgrandon]

Comment on attachment 8479440 [details] [review]
Github pull request

Eric - could you give this an initial pass and see what the biggest issues are with the rocketbar? Most of the colors and layout should be correct now, but the width and height will take some iteration. This is tricky because in order to have a smooth collapsing animation we are a bit limited on what we can currently do to the rocketbar dimensions. 

We have bug 1054778 filed to make it so we can fine-tune the rocketbar sizing and animation. If we can get all of the other visual aspects covered here, I'd like to close this and use bug 1054778 to handle the sizing issues.

Comment 9

[Kevin Grandon :kgrandon]

Comment on attachment 8479440 [details] [review]
Github pull request

Hey Chris - would you be available for a quick visual review of this? Thanks!

Comment 10

[Chris Lord [:cwiiis]]

(In reply to Kevin Grandon :kgrandon from comment #9)
> Comment on attachment 8479440 [details] [review]
> Github pull request
> 
> Hey Chris - would you be available for a quick visual review of this? Thanks!

Something I've noticed which is a bit odd, the active state of the back button is bigger than the normal state. This isn't weird by itself, but the forward button doesn't match this, so I guess one of these is a mistake? Similarly, the refresh button active state is bigger than the normal state, as is the stop button and overflow menu button, so I guess the forward button is the mistake? This may be a pre-existing bug, I've never looked closely before.

(Another?) pre-existing bug, the network indicator and battery icons shift slightly in the collapsed state vs. the expanded state.

The text gets ellipsised correctly in this pull request, which I guess is the major change.

Comment 11

[Chris Lord [:cwiiis]]

Comment on attachment 8479440 [details] [review]
Github pull request

This is an improvement and I don't immediately spot any regressions testing it out.

Comment 12

[Kevin Grandon :kgrandon]

(In reply to Chris Lord [:cwiiis] from comment #10)
> Something I've noticed which is a bit odd, the active state of the back
> button is bigger than the normal state. This isn't weird by itself, but the
> forward button doesn't match this, so I guess one of these is a mistake?
> Similarly, the refresh button active state is bigger than the normal state,
> as is the stop button and overflow menu button, so I guess the forward
> button is the mistake? This may be a pre-existing bug, I've never looked
> closely before.

I think it's pre-existing, but I will check and make a fix if it's trivial, thanks.

Comment 13

[Kevin Grandon :kgrandon]

(In reply to Kevin Grandon :kgrandon from comment #12)
> (In reply to Chris Lord [:cwiiis] from comment #10)
> > Something I've noticed which is a bit odd, the active state of the back
> > button is bigger than the normal state. This isn't weird by itself, but the
> > forward button doesn't match this, so I guess one of these is a mistake?
> > Similarly, the refresh button active state is bigger than the normal state,
> > as is the stop button and overflow menu button, so I guess the forward
> > button is the mistake? This may be a pre-existing bug, I've never looked
> > closely before.

I tried to reproduce this, but was unable to see it on a device. Maybe file a new bug and we'll track this for after FL polish if it's an issue?

Comment 14

[Eric Pang [:epang] UX]

Comment on attachment 8479440 [details] [review]
Github pull request

Hey Kevin, this looks good as long as the sizing changes are still addressed in the other bug.  There's a few visual dependencies on the sizing such as the icon prioritization and ambient notification indicator. Thanks!

Comment 15

[Kevin Grandon :kgrandon]

Master: https://github.com/mozilla-b2g/gaia/commit/4185f79e5798b5ef5d553a2c9d71197980a6370c