715223 - All highlight / focus colour in Firefox should be the same in every version of Android

Status: RESOLVED WORKSFORME

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

Description

[Patryk Adamczyk [:patryk] UX]

Every highlight should a Firefox specific colour not the Android skin default colour for 2 reasons:
1. Maintain a consistent Firefox identity between platforms
2. There is conflict in highlight colours between android manufacturer skins and android OS colours: ie. On HTC 2.3 devices green is used for some highlights and orange (2.3 default highlight colour) is used in other places.

The highlight used should be a gradient of #ff9500 > #e66000
If a gradient cannot be specified please us #f27a00

Comment 1

[Patryk Adamczyk [:patryk] UX]

This would apply to the following elements:
+ URL Bar focus border
+ List selection
+ Thumbnail selection
+ Tab menu (including "active tab" image)

Comment 2

[Doug Turner (:dougt)]

not sure about this at all!

the highlight color of the browser should be consistent with every other application.  lets not stand out, right?

Comment 3

[Patryk Adamczyk [:patryk] UX]

On Android there is little consistency between the devices. On many devices you'll see atleast 2 colours. For instance: 
+ On ICS devices you'll see ICS blue and Gingerbread Orange. 
+ On skinned devices ie HTC. You'll see HTC green and Gingerbread Orange.
Some higher profile apps like Dolphin browser use a mix of green and native ICS blue.
Twitter uses a custom blue. etc.

I am pushing for a cohesive user experience on firefox properties where it feels like its a premium stand alone app not an assembly of native components, that's why we skinned the app with our own aesthetic and not copied ICS / gingerbread design.

Also since our properties tend to use silver / blues the orange really stands out creating a high visual accordance on what has been clicked / interacted with.  The ICS blue has far too little contrast. Not to mention the orange enforces the firefox brand identity. Also if Android decides to use a blue - silver as a highlight in the next release we'd have to redesign the entire app since it would be invisible against our skin. This would allow use to have some more independence from future Android visual design which changes frequently.

Comment 4

[Sriram Ramasubramanian [:sriram]]

I guess the tabs-menu and thumbnails having a "orange" color would not look good. Since we are using a textured pattern, we can probably use a textured for them as well. The lists can have orange color, so are the urlbar and editbox.

Comment 5

[Sriram Ramasubramanian [:sriram]]

I need newer assets for the URL bar. And the color values for the gradients.

Comment 6

[Eitan Isaacson [:eeejay]]

If we go with our own colors, and ignore the platform, the colors should at least be gettable/settable in about:config, and not hardcoded in the android resources dir. This will allow changing them for accessibility uses via extension, etc.

Comment 7

[Patryk Adamczyk [:patryk] UX]

Attachment: Colour Highlight Spec

Comment 8

[Ian Barlow (:ibarlow)]

Soft blocking nom?

Looks like we have all the UI spec here, but need some help implementing it.

Comment 9

[Henrik]

Please don't do this.

I have only one phone but many applications on that phone, so consistency between applications is more important than consistency with other people's phones (that I'll never see).

To address the arguments in the description:

> 1. Maintain a consistent Firefox identity between platforms

Firefox on my Linux machine obeys the GTK theme. Firefox on Windows obeys the Windows theme. Neither is orange. Making everything orange on Android would therefore not maintain any sort of consistency between platforms.

> 2. There is conflict in highlight colours between android manufacturer skins and android OS colours: ie. On HTC 2.3 devices green is used for some highlights and orange (2.3 default highlight colour) is used in other places.

On my Galaxy S, with the applications I use, this is very rare. The only applications that override the highlight color are Firefox Aurora (recent builds) and the Google Search widget (well, and the text selection in Gmail).

Comment 10

[Sriram Ramasubramanian [:sriram]]

All changed to orange. Fixed by multiple bugs.