Closed Bug 848707 Opened 7 years ago Closed 7 years ago

Neutralize UI selection colour

Categories

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

x86
macOS
defect
Not set

Tracking

()

RESOLVED FIXED
Firefox 22

People

(Reporter: ibarlow, Assigned: sriram)

References

(Depends on 1 open bug)

Details

Attachments

(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] ;)
https://hg.mozilla.org/mozilla-central/rev/b0a6d63bdec6
https://hg.mozilla.org/mozilla-central/rev/67d0bd22fe14
Assignee: nobody → sriram
Status: NEW → RESOLVED
Closed: 7 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.