Use platform colors for the find bar

Assigned to



10 years ago
a year ago


(Reporter: faaborg, Assigned: faaborg, NeedInfo)


({polish, uiwanted})

polish, uiwanted
Dependency tree / graph
Bug Flags:
firefox-backlog +
blocking-firefox3 -
wanted-firefox3 +

Firefox Tracking Flags

(Not tracked)


(Whiteboard: [polish-easy][polish-visual][polish-p3] p=0)


(1 attachment)



10 years ago
The various colors currently used by the find bar should be modified to visually integrate on each platform.  These colors include

-Red applied to the text field in the find bar when the search phrase does not match text on the page.
-Yellow when highlighting all instances of a phrase
-Green for the selected phrase
Flags: blocking-firefox3?


10 years ago
Blocks: 405605
Got suggestions? Same as the ones used in bug 423740, bug 423741, bug 423742 and bug 423744?
Flags: wanted-firefox3+
Flags: blocking-firefox3?
Flags: blocking-firefox3-

Comment 2

10 years ago
this bug is eligible for bug 462081
Keywords: polish
Whiteboard: [polish-easy][polish-visual]


10 years ago
Whiteboard: [polish-easy][polish-visual] → [polish-easy][polish-visual][polish-high-visibility]
what needs to be done here, red is used for non-matching phrases, yellow not used (although the text is highlighted in yellow), "green for the selected phrase" - ? if I understand this correctly it's done already.
The colors are currently hardcoded in the various findbar.css files. Ideally we would use system colors, but I'm not sure whether there are appropriate system colors available on all platforms.
Or at least fix the hardcoded colors to match native ones more closely, as comment 1 implies. Someone would need to make a list of changes needed.

Comment 6

10 years ago
Yeah, I'm not referring to colors that we extract from the OS as much as the palette of colors that the designers used when creating the OS theme, or copying colors from other parts of the OS theme that are not possible to extract.  For instance, the three XP Luna themes use a strict color palette:,MSDN.10).gif

In terms of my longer term vision of how we should deal with colors: Ideally we should try to centralize all of our hard coded colors to a single location.  Then when a new OS comes out, like Windows 7 or OS X 10.6, we can just quickly update the hard coded colors to the color palette being used by the new OS.  We would also want to tie using this centralized list of colors to better OS theme detection than what is currently available.
(In reply to comment #6)
> For instance, the three XP Luna themes use a strict color palette:

Here's the same for Tango:

Note that other colors are allowed for tango icons, but they generally should be based on those on the base palette.

Comment 8

10 years ago
I should add that unfortunately Vista and OS X don't have published color palettes (of if they do, please post links!) so in those cases you have to go to the work of trying to find a precedent for the use of particular colors in the surrounding OS.
If someone gets me a list of colors, I'll be happy to get this patched.

Comment 10

10 years ago
Briefly assigning to myself to get all the colors figured out.
Assignee: nobody → faaborg

Comment 11

10 years ago
uiwanted: specify exact colors
Keywords: uiwanted


10 years ago
Blocks: 466740
Created attachment 350134 [details]
proposed colors

Red: #dc0000 - same red as in the error icon (only slightly lighter)
Green: #4e9a06 - not too dark, but still makes the white text readable
Yellow: #fce94f - same yellow as in the highlight icon

I'm quite happy about the current yellow as well though.
This bug's priority relative to the set of other polish bugs is:
P3 - Polish issue that is in a secondary interface, occasionally encountered, or is not easily identifiable.
Whiteboard: [polish-easy][polish-visual][polish-high-visibility] → [polish-easy][polish-visual][polish-p3]


7 years ago
Attachment #350134 - Attachment description: propsed colors → proposed colors


4 years ago
Blocks: 950073
Whiteboard: [polish-easy][polish-visual][polish-p3] → [polish-easy][polish-visual][polish-p3] [feature] p=0


4 years ago
No longer blocks: 950073
Flags: firefox-backlog+
Whiteboard: [polish-easy][polish-visual][polish-p3] [feature] p=0 → [polish-easy][polish-visual][polish-p3] p=0

Comment 14

3 years ago
Michael, can you provide a list of per-platform colors here based on chameleon?
Flags: needinfo?(mmaslaney)
No hardcoded red color will work for Linux and Windows. Yes, Windows do have themes. There are even accessibility high-contrast themes, both light and dark. Same in GNOME. You can have red background of your UI (or some nearly red colour on which the red text is unreadable).

There is not official way to theme OS X so hardcode away.

Comment 16

3 years ago
(In reply to Michal 'hramrach' Suchanek from comment #15)
> No hardcoded red color will work for Linux and Windows.

Unless, of course, you hardcode the foreground color as well, which would be perfectly legitimate here if there are no exposed color constants that we can rely on to be theme-specific implementations.

The problem so far is that the single set of suggested colors is that - a single set. The bug's title and comment #0 suggests we want different things on different platforms. Either way, Michael I expect already has or can make a color palette that would work here.


3 years ago
No longer depends on: 425598

Comment 17

2 years ago
Redirecting this needinfo to Stephen.
Flags: needinfo?(mmaslaney) → needinfo?(shorlander)
hm, it seems that yellow changed to purple and the foreground is also hardcoded to some color that is visible on the hardcoded background. This makes the thing generally more or less workable.

The purple hardly fits into any theme, however. Also if somebody uses high-contrast theme because they cannot read lower contrast text you might have made the highlighted text unreadable for them.

You can probably figure out which system color is used for this purpose if you find an application that highlights all occurences of a searched phrase and is part of the OS. Unfortunately, neither notepad nor gnotepad have this feature. Infernal Exploder highlights search occurences with yellow background and black text. Not sure if this is some theme color or just something random.

You can also craft a theme that has each color different so you can easily identify which theme color was used in an application.
I will look into this, but I am not sure that chasing platform convention is the right thing to do here
You need to log in before you can comment on or make changes to this bug.