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

Status: VERIFIED FIXED

(Firefox :: Search, defect)

Description

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

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

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Attachment: screenshot

Comment 2

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

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

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

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).

Comment 3

[Stephen Horlander [:shorlander]]

It looks like it's picking up the global odd row rule for multi column tree views from http://mxr.mozilla.org/mozilla-central/source/toolkit/themes/gnomestripe/global/tree.css#79. 

Which seems intended for list views in things like the Library and not menus. Maybe an unintended side effect of some other work there?

Comment 4

[:Gavin Sharp [email: [e-mail]]]

That rule alone should be fine, given comment 2.

Comment 5

[Stephen Horlander [:shorlander]]

(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 6

[:Gavin Sharp [email: [e-mail]]]

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.

Comment 7

[Stephen Horlander [:shorlander]]

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

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

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

Comment 9

[Steffen Wilberg]

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::-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.

Comment 11

[:Gavin Sharp [email: [e-mail]]]

Let's call this "fixed by", rather than a duplicate.

Comment 12

[Navneeth]

(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.

Comment 13

[Henrik Skupin [:whimboo][⌚️UTC+1]]

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