518685 - Revisit the blue used in Fennec

Status: VERIFIED FIXED

(Firefox for Android Graveyard :: General, defect, P2)

Description

[Madhava Enros [:madhava]]

We use a particular shade of blue in Fennec's
- toggles
- notifications
- button glow
- progress indicators (in download and add-ons)

There's been feedback that this blue is too saturated, especially in larger expanses like notification bars.  There's value to using a common color in all these places, so we should find a more pleasing alternative.  If it's a lighter shade, I'd like to use it for row selection as well in the place of the grey we use now (used to indicated the selected row in the list-box widget, and when you tap on the "see all bookmarks row" in the awesomescreen).

Comment 1

[Madhava Enros [:madhava]]

Trying a less saturated blue.

Row highlighting:
http://mozilla.seanmartell.com/fennec/blue.jpg

Notification bar:
http://mozilla.seanmartell.com/fennec/notification.png

Comment 2

[Madhava Enros [:madhava]]

Trying out toggles with the lighter blue:
http://mozilla.seanmartell.com/fennec/toggle2.jpg

Comment 3

[Sean Martell]

Attachment: On Toggle - 64 - New Blue

Comment 4

[Sean Martell]

The new blue is set to: 8db8d8

Border edges for notification panel set to: 6897bd

Comment 5

[Sean Martell]

Attachment: On Toggle - 36 - New Blue

Comment 6

[Mark Finkle (:mfinkle) (use needinfo?)]

Attachment: patch

* Uses new blue in CSS
* Forces toggle (selected) and notifications (message and button) text color to black
* Uses the new blue toggle images
* Uses new blue in progressmeter
* Fixes padding around buttons in notifications

Comment 7

[Madhava Enros [:madhava]]

just realized we never included this mockup in the bug

Comment 8

[Madhava Enros [:madhava]]

Slightly off-topic, but we should update the checkmark image to being the dark one.

Comment 9

[Madhava Enros [:madhava]]

Attachment: the dark checkmarks mentioned in the last comment

Comment 10

[:Gavin Sharp [email: [e-mail]]]

Comment on attachment 408384 [details] [diff] [review]
patch

>diff --git a/themes/hildon/platform.css b/themes/hildon/platform.css

>+/* notification background is too light for a white caption */
>+notification button {
>+  color: #000 !important;
>+}

There's already a "notification button" selector just a few lines up in this file, put this right after it? (same applies to wince)

>diff --git a/themes/wince/notification.css b/themes/wince/notification.css

> notification .buttons {
>-  padding: 1.1mm;
>+  padding: 1mm; /* core spacing */

we seem to be inconsistent about whether "core spacing" is 1mm or 1.1mm - should we fix that?

Comment 11

[Mark Finkle (:mfinkle) (use needinfo?)]

(In reply to comment #10)

> >+/* notification background is too light for a white caption */
> >+notification button {
> >+  color: #000 !important;
> >+}
> 
> There's already a "notification button" selector just a few lines up in this
> file, put this right after it? (same applies to wince)

Moved

> > notification .buttons {
> >-  padding: 1.1mm;
> >+  padding: 1mm; /* core spacing */
> 
> we seem to be inconsistent about whether "core spacing" is 1mm or 1.1mm -
> should we fix that?

wince is still using 1.1mm as the core spacing. I changed these to 1.1mm to match. We'll address the wince theme as a whole after maemo ships

Comment 12

[Mark Finkle (:mfinkle) (use needinfo?)]

replaced check marks

pushed:
https://hg.mozilla.org/mobile-browser/rev/edf7e4e1be7d

Comment 13

[Aakash Desai [:aakashd]]

verified FIXED on builds:

Mozilla/5.0 (X11; U; Linux armv7l; Nokia N900; en-US; rv:1.9.2b2pre) Gecko/20091028 Namoroka/3.6b2pre Fennec/1.0b5pre

and

Mozilla/5.0 (X11; U; Linux armv6l; Nokia N8xx; en-US; rv:1.9.3a1pre) Gecko/20091028 Namoroka/3.7a1pre Fennec/1.0b5pre