background color of even rows in search dropdown illegible on dark Ubuntu theme

VERIFIED FIXED in Firefox 4.0b2



8 years ago
7 years ago


(Reporter: dbaron, Unassigned)


Firefox 4.0b2

Firefox Tracking Flags

(Not tracked)



(1 attachment)



8 years ago
On the dark Ubuntu "Ambience" theme (which I believe is the default in 10.04), even rows in the search dropdown are nearly illegible.  I think this means that either:
 * we're misusing system colors, or
 * there's something wrong with the system colors that we're getting
I'm guessing the first is more likely and filing this in Firefox::Search, though I could be wrong.

Steps to reproduce:
 * In Ubuntu 10.04, go to System -> Preferences -> Appearance -> Theme and choose the "Ambiance" theme
 * start Firefox (I'm using a mozilla-central Linux x86-64 nightly, 2010-06-01)
 * type something in the search field that yields search suggestions, like "Mozilla"

Actual results:
 * even rows in the suggestions dropdown have light gray text on a slightly different light gray background, which is basically illegible

Expected results:
 * legible text in both odd and even rows of the dropdown

Comment 1

8 years ago
Created attachment 448612 [details]

Comment 2

8 years ago
So, some brief research into system colors.  The following testcase:

<style type="text/css">
div { background: red; color: red }
<div style="background: -moz-Field; color: -moz-FieldText">
  -moz-FieldText on -moz-Field
<div style="background: -moz-OddTreeRow; color: -moz-FieldText">
  -moz-FieldText on -moz-OddTreeRow
<div style="background: -moz-EvenTreeRow; color: -moz-FieldText">
  -moz-FieldText on -moz-EvenTreeRow

is displayed entirely using dark text on a light background (slightly varying backgrounds), so if those colors were being used (which is the appropriate use of even/odd row colors), it wouldn't be illegible.

The only GTK UI I can find that uses alternating colors (Places -> Home Folder, then View -> List) does seem to match the colors I see in that testcase.

But I don't see any GTK UI with alternating colored rows in dropdowns.  Dropdowns in this theme tend to be uniformly light text on a dark background (unlike tree widgets).
It looks like it's picking up the global odd row rule for multi column tree views from 

Which seems intended for list views in things like the Library and not menus. Maybe an unintended side effect of some other work there?
That rule alone should be fine, given comment 2.
(In reply to comment #4)
> That rule alone should be fine, given comment 2.

Right, if there was a specified even row using the right text color it wouldn't look terrible. But those colors in Ambiance are grey and lighter grey when every other menu is dark brown with beige text.
Comment 2 says that "-moz-FieldText on -moz-OddTreeRow" is not unreadable. The styling for odd rows in the search bar dropdown, as far as I can tell, uses "-moz-FieldText on -moz-OddTreeRow", and yet it is unreadable. So something must be wrong with either comment 2, or my understanding of the styling :)

Whether the text should be alternating at all is a separate question. The fact that it is for this dropdown is probably caused by bug 282127 - the search bar autocomplete dropdown has multiple columns because of the "Suggestions" separator label. We should probably fix that in a separate bug.
It's a little hard to unravel. But it looks to me like it is picking up "color: menutext" from autocomplete.css and then picking up the odd-row styling from tree.css.

The rule just specifies a background color and not a text color so it continues to use menutext which is why it looks unreadable:

treechildren::-moz-tree-row(multicol, odd) {
 background-color: -moz-oddtreerow;

Although I might be looking at that wrong :)

Comment 8

7 years ago
Hmmm.  I just saw bug 566178 during triage; this may be a duplicate of that bug.

Comment 9

7 years ago
Yes, this (comment 0) will be fixed by bug 566178, which I'll check in later today after addressing the last review comment. Sorry for wasting your time, it took a while to satisfy my reviewer.

The bug is that the rules for multi-column odd tree rows in tree.css apply to the search bar autocomplete result popup as well, which is a multi-column tree because it has the label "Suggestions" in the second (comment) column.

The fix is to exclude treechildren with class autocomplete-treebody, see attachment 454671 [details] [diff] [review]:

-treechildren::-moz-tree-row(multicol, odd) {
- background-color: -moz-oddtreerow;
+treechildren:not(.autocomplete-treebody)::-moz-tree-row(multicol, odd) {
+  background-color: -moz-oddtreerow;
-treechildren::-moz-tree-row(selected) {
+treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected) {
   background-color: -moz-cellhighlight;
 treechildren::-moz-tree-row(selected, focus),
-treechildren::-moz-tree-row(multicol, odd, selected, focus) {
+treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, focus) {
   background-color: Highlight;

Please comment in bug 566178 if you consider this the wrong fix.
Last Resolved: 7 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 566178
Duplicate of this bug: 577293
Let's call this "fixed by", rather than a duplicate.
Depends on: 566178
Target Milestone: --- → Firefox 3.7b2

Comment 12

7 years ago
(In reply to comment #1)
> Created an attachment (id=448612) [details]
> screenshot

How did you get a screenshot of the dropdown? I couldn't with the default screenshot app. in 10.04.
Verified fixed with trunk builds on OS X and Linux like Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; en-US; rv:2.0b2pre) Gecko/20100712 Minefield/4.0b2pre
You need to log in before you can comment on or make changes to this bug.