1054371 - Update tablet toolbar 'back' button to match new UI

Status: RESOLVED FIXED

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

Description

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

Attachment: Screenshot_2014-08-15-09-34-04.png

The back button needs the same stroke as the input bar to match. Mockups coming!

Comment 1

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

Attachment: prev_tab_chrome_refine1.png

Attaching mockup.

The color for the stroke is #B6B6B6, I've used the same thickness for consistencies sake for now. But for the "forward" button it looks really thick. Let's see how it looks in practice? (in the mock here it's a bit thinner [1px vs 2px])

Comment 2

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

^oh, the back icon should be inactive (a lighter grey) in this mock since the user is on the first page and can't go back. Shouldn't be an issue but thought I'd call it out.

Comment 3

[Lucas Rocha (:lucasr)]

Attachment: Part 1: Use solid stroke in back/forward buttons (r=mcomella)

Comment 4

[Lucas Rocha (:lucasr)]

Attachment: Part 2: Only fetch border width once in back/forward buttons (r=mcomella)

Comment 5

[Lucas Rocha (:lucasr)]

Attachment: Part 3: Ged rid of separate paint instance for private mode (r=mcomella)

Comment 6

[Lucas Rocha (:lucasr)]

Attachment: Part 4: Make all members of BackButton/ForwardButton final (r=mcomella)

Comment 7

[Lucas Rocha (:lucasr)]

Attachment: Screenshot

I think the line on the forward button is a bit too strong. But I think it's thin enough though. Maybe this is a matter of using a different color?

Comment 8

[Lucas Rocha (:lucasr)]

Attachment: Screenshot (Private mode)

Picked the stroke color from the images. Looks alright to me.

Comment 9

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

Comment on attachment 8474007 [details]
Screenshot (Private mode)

I agree, this is good for now -  there's been the outstanding issues for the chrome visuals itself in bug 864958 that we should keep in mind in the future.

Comment 10

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

Comment on attachment 8474006 [details]
Screenshot

There also seems to be a gap on top and below the line (so it doesn't actually connect to the top and bottom). 

More specifically for color, let's try #BFBFBF. I don't have another color that lies in that range and I don't want to randomly add a new color to our guides to keep things consistent. So, we could try that for now (since this button isn't as dominant) :)

Comment 11

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

^ sorry for the sequential posts :P but is it me or is this stroke also not on the far right-est of the button? I think I see some color coming in on the right side of it..

Comment 12

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

Comment on attachment 8473999 [details] [diff] [review]
Part 4: Make all members of BackButton/ForwardButton final (r=mcomella)

Review of attachment 8473999 [details] [diff] [review]:
-----------------------------------------------------------------

:D

Comment 13

[Lucas Rocha (:lucasr)]

Attachment: Screenshot

Removed the spacing on top/bottom of forward button and used BFBFBF. Looks good to me. Thoughts?

Comment 14

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

Comment on attachment 8476675 [details]
Screenshot

PLUS! looking good

Comment 15

[Lucas Rocha (:lucasr)]

https://hg.mozilla.org/integration/fx-team/rev/4f7230c80511
https://hg.mozilla.org/integration/fx-team/rev/772202e2424d
https://hg.mozilla.org/integration/fx-team/rev/5a6f622fbc20
https://hg.mozilla.org/integration/fx-team/rev/32dc1b927463

Comment 16

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/4f7230c80511
https://hg.mozilla.org/mozilla-central/rev/772202e2424d
https://hg.mozilla.org/mozilla-central/rev/5a6f622fbc20
https://hg.mozilla.org/mozilla-central/rev/32dc1b927463