Closed Bug 848707 Opened 8 years ago Closed 8 years ago

Neutralize UI selection colour


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

Not set



Firefox 22


(Reporter: ibarlow, Assigned: sriram)


(Depends on 1 open bug)



(3 files, 2 obsolete files)

Attached image visual sample
It's time to kill the bright orange gradient. It seemed like a good idea at the time, but in practice we may have overdone it a bit. We should still keep orange as an accent colour in our UI, but our general purpose select colour should be more neutral. 

Wherever we currently show the orange gradient selection, let's switch to 
Focus: #000000 with 10% opacity
Select/Touch: #000000 with 20% opacity. 

Areas we need to change
* Title bar elements (tab button, bookmark/refresh/menu icons)
* Tab tray title bar elements
* All menus
* Awesomebar lists
* Tab lists
* About:home thumbnails

Things we are *not* changing 
(these are the areas where we use orange as an accent)
* Orange URL bar outline
* Current page tab thumbnail outline
* Tab section indicator

Sample screenshot below, using doorhangers and context menus as an example.
Attached patch Part 1: Highlight color (obsolete) — Splinter Review
This changes the highlight color from a gradient to a solid 10% black.
On dark background, this will be 10% white (UX approved).
Attachment #724537 - Flags: review?(mark.finkle)
Attached patch Part 2: Focused color (obsolete) — Splinter Review
This changes the focused color for the buttons (we are truly accessible now!)
Attachment #724539 - Flags: review?(mark.finkle)
An unwanted Makefile edit could have burnt few trees. Reverted back.
Attachment #724556 - Flags: review?(mark.finkle)
Attachment #724537 - Attachment is obsolete: true
Attachment #724537 - Flags: review?(mark.finkle)
Menu had a wrong "default" state color. Fixed.
Attachment #724539 - Attachment is obsolete: true
Attachment #724539 - Flags: review?(mark.finkle)
Attachment #724557 - Flags: review?(mark.finkle)
Depends on: 850814
Note: We changed from a solid gradient to a translucent color. This depends on the color/image below to show the translucent color over it. From my testing, I didn't see any regression in this approach (as this is how Android does things). There is 1% chance that this might fail in Tabs and/or Menu button as we draw the curves ourselves. Please watch out for regressions and tag it to this bug.
Attachment #724556 - Flags: review?(mark.finkle) → review+
Attachment #724557 - Flags: review?(mark.finkle) → review+
(In reply to Sriram Ramasubramanian [:sriram] from comment #5)
> There is 1% chance that this might fail

[citation needed] ;)
Assignee: nobody → sriram
Closed: 8 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 22
Depends on: 852237
Depends on: 852968
You need to log in before you can comment on or make changes to this bug.