1105541 - Fine-tune Lightweight theme colors on new tablet

Status: VERIFIED FIXED

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

Description

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

Issues I noticed after bug 1085771 lands:
  * The plus button in the tab strip is light and clashes with light themes
  * The grey text on the unselected tabs clashes with just about everything 
  * (?) Back/forward button state when pressed/focused/etc. might look terrible
  * Pressed tab color in tab strip looks too dark on light themes

Comment 1

[Lucas Rocha (:lucasr)]

Mike, do you think this is v1 material?

Comment 2

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

As long as I can get bug 1085771 to land soon, then yes, I think this is v1 material - it'll look pretty amateur if we don't get at least a dark/light swap working.

Comment 4

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

Attachment: Part 1 - Dark theme w/ light text color

I wonder if we shouldn't also change the icon colors (about:home favicon, close button, dividers) to a lighter color - maybe after bug 1105546.

Note that we do mischaracterize (imo) some light themes as dark and vice versa, which makes this backfire sometimes.

Comment 5

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

Attachment: Part 1: Use a light text color for tab titles with a dark LWT on new tablet

Comment 6

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

Attachment: Part 2 - Dark theme w/ alpha pressed state

Comment 7

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

Attachment: Part 2 - Light theme w/ alpha pressed state

Comment 8

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

Attachment: Part 2: Add alpha to pressed state of tabs with LWT on new tablet

Comment 9

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

Attachment: Part 3 - Light theme, dark add tab button

Comment 10

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

Anthony, let me know if you have any objections to the screenshots in this bug.

Comment 11

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

Attachment: Part 3: Change add tab button to a dark color on light themes on new tablet

The added assets are trimaged.

To create the new assets, I ran:

 convert tab_new.png -background #5F6368 -alpha shape <out-file>

where #5F6368 comes from the color I found for drawable-xhdpi/close.png.

Comment 12

[Martyn Haigh (:mhaigh)]

Comment on attachment 8535323 [details] [diff] [review]
Part 3: Change add tab button to a dark color on light themes on new tablet

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

Looks good to me

Comment 13

[Martyn Haigh (:mhaigh)]

Comment on attachment 8535218 [details] [diff] [review]
Part 2: Add alpha to pressed state of tabs with LWT on new tablet

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

All good.

Comment 14

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

(In reply to Michael Comella (:mcomella) from comment #10)
> Anthony, let me know if you have any objections to the screenshots in this
> bug.

Looks good to me. What opacity value are we using BTW? Just so we could reuse some of those numbers later if we need.

Comment 15

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

(In reply to Anthony Lam (:antlam) from comment #14)
> Looks good to me. What opacity value are we using BTW? Just so we could
> reuse some of those numbers later if we need.

For the pressed tabs, 170 / 255.

Comment 16

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

https://hg.mozilla.org/integration/fx-team/rev/f57690535a49
https://hg.mozilla.org/integration/fx-team/rev/6ecba299e659
https://hg.mozilla.org/integration/fx-team/rev/96e778e6b268

Comment 17

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

Comment on attachment 8535197 [details] [diff] [review]
Part 1: Use a light text color for tab titles with a dark LWT on new tablet

This request applies to parts 1-3, uplift dependency on bug 1085771.

Approval Request Comment
[Feature/regressing bug #]: New tablet release
[User impact if declined]:
  New tablet UI will look unpolished w/ lightweight themes enabled.

[Describe test coverage new/current, TBPL]: None
[Risks and why]: 
  We only touch lightweight theme code so somewhere along the line we could mess up the way lightweight themes work.

[String/UUID change made/needed]: None

Comment 18

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/f57690535a49
https://hg.mozilla.org/mozilla-central/rev/6ecba299e659
https://hg.mozilla.org/mozilla-central/rev/96e778e6b268

Comment 19

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-aurora/rev/52dfbfd086d0
https://hg.mozilla.org/releases/mozilla-aurora/rev/cd9788ebebcc
https://hg.mozilla.org/releases/mozilla-aurora/rev/64c6aa56aa22

Comment 20

[Cristina Madaras, QA [:CristinaM]]

Verified as fixed in
Firefox for Android 37.0a1 (2014-12-18)
Firefox for Android 36.0a2 (2014-12-18)

Device: Asus Transformer Pad TF300T (Android 4.2.1)

Comment 21

[u421692]

Attachment: device-2014-12-18-142642.png

I can still see the behavior described in Bug 1110157, but only if you tap on the already selected tab; is this intended?

Comment 22

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

(In reply to Mihai Pop from comment #21)
> I can still see the behavior described in Bug 1110157, but only if you tap
> on the already selected tab; is this intended?

While I'm not sure I directly consulted :antlam on this one, yes, it is intended.