Closed Bug 811920 Opened 12 years ago Closed 12 years ago

Message list highlight bar - insufficient contrast when list is blurred

Categories

(Thunderbird :: Mail Window Front End, defect)

16 Branch
x86_64
Linux
defect
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED
Thunderbird 19.0

People

(Reporter: mikeh, Assigned: Paenglab)

References

Details

Attachments

(3 files)

Observed on Ubuntu 12.04LTS

STR:
1. Select an email in the message list
2. Click on the message preview pane to de-focus the message list

Observed behaviour:
Message bar was formerly white-on-orange, but fades to black-on-grey that nearly matches the striping used in the message list, making it nearly impossible to quickly identify which message (e.g. in a thread) is being looked at.

Expected behaviour:
The message highlight bar should remain obviously different from the stripes.
The inactive highlight bar has the same color as on Nautilus. The only solution I'm seeing is to remove the zebra striping like already done on Windows (Nautilus uses also no zebra striping).

Andreas, what do you think about removing the zebra stripes?
Flags: needinfo?(bugs)
The inactive highlight bar has the same color as on Nautilus. The only solution I'm seeing is to remove the zebra striping like already done on Windows (Nautilus uses also no zebra striping).

Andreas, what do you think about removing the zebra stripes?
(In reply to Richard Marti [:Paenglab] from comment #2)
> The inactive highlight bar has the same color as on Nautilus. The only
> solution I'm seeing is to remove the zebra striping like already done on
> Windows (Nautilus uses also no zebra striping).
> 
> Andreas, what do you think about removing the zebra stripes?

I'm good with that.
See also http://www.alistapart.com/articles/zebrastripingdoesithelp/
Flags: needinfo?(bugs)
Attached patch patchSplinter Review
Changing the background-color from -moz-oddtreerow to transparent removes the zebra striping. Removing the three #threadTree > treechildren::-moz-tree-row() rules from mailWindow1.css lets affect the rules from toolkit and the stripes are back again.
Assignee: nobody → richard.marti
Status: NEW → ASSIGNED
Attachment #682752 - Flags: review?(bugs)
Comment on attachment 682752 [details] [diff] [review]
patch

Code looks good!
Attachment #682752 - Flags: review?(bugs) → review+
Keywords: checkin-needed
https://hg.mozilla.org/comm-central/rev/226011df6278
Status: ASSIGNED → RESOLVED
Closed: 12 years ago
Keywords: checkin-needed
Resolution: --- → FIXED
Target Milestone: --- → Thunderbird 19.0
For anyone discovering this bug who may want to override this, the following userChrome.css snippet appears to work:

#threadTree > treechildren::-moz-tree-row(odd) {
  background-color: -moz-oddtreerow !important;
}

I'm assuming that -moz-oddtreerow is not likely to be removed in future versions, since it appears to be used in various other places as well.
But then you need also:

 #threadTree > treechildren::-moz-tree-row(selected) {
   background-color: -moz-cellhighlight !important;
 }

after your rule to see the selected odd row.
Quite right, thanks; my testing hadn't gotten that far.

Is the need for this the result of a later change? The snippet I provided essentially just reverts/overrides the exact change made in the commit from comment 6.
Your !important had overridden the normal rule. Then you need a new rule with !important to override this.
It looks like you also need this one:

#threadTree -> treechildren::-moz-tree-row(selected, focus) {
  background-color: Highlight !important;
}

I don't see any other original-rule snippets for treechildren which affect background-color, so this should be the final needed change.


With that, the total userChrome.css section to revert this change appears to be:

#threadTree > treechildren::-moz-tree-row(odd) {
  background-color: -moz-oddtreerow !important;
} 
#threadTree > treechildren::-moz-tree-row(selected) {
  background-color: -moz-cellhighlight !important;
}
#threadTree -> treechildren::-moz-tree-row(selected, focus) {
  background-color: Highlight !important;
}
Everytime someone says “The only solution I'm seeing …” you should be very sceptical. Here’s another, simpler solution: Just define the color -moz-oddtreerow a little bit lighter. Why not use the same color as Nautilus uses for its zebra striping (#f7f7f7)? – Yes, Richard (#1), Nautilus DOES use zebra striping.

Could we please have our zebra striping back without having to override styles with !important-rules? Until then I simply use …

   #threadTree > treechildren::-moz-tree-row(even) {
     background-color: #f7f7f7; }

… to color the even rows. By the way: The linked article in comment #3 actually states:

“Unfortunately, this study hasn’t given us a clear answer about whether or not to continue applying zebra stripes to tabular data. However, it didn’t give any indication that zebra striping makes things worse, and we do know that it is liked by a number of users, so it certainly doesn’t seem to cause much harm.”
Thank you for pointing out that much simpler solution. Although it does reverse which rows will be dark and which light, the result actually seems to match what was displayed by Thunderbird 2.

I might suggest using '-moz-oddtreerow' instead of '#f7f7f7'; although using the "odd" row color for "even" rows seems like a mismatch, it seems to produce the desired result (or possibly a better one, depending on what color you want) without explicitly hardcoding the color value.


Just as a note, the CSS snippet I provided in comment 12 only works properly when not using tag colors. When a message is tagged with a color, and is selected, and the thread pane is in focus, the color will not be displayed. (Adding 'odd, ' to the second and third selectors limits this effect to just the striped rows.)

This can be avoided by finding the correct "treechildren::-moz-tree-row(lc-*" entry from tagColors.css and copying it into userChrome.css (with "#threadTree -> " prefixed, in the same style as the previously listed snippet rules). For example, for bright orange:

#threadTree -> treechildren::-moz-tree-row(lc-FF9900, selected, focus) {
  background-color: #FF9900 !important;
}

However, as there are 70 such entries, this is an unwieldy solution at best. The suggestion from comment 13 seems to be much better.
Here’s how nautilus solves this problem with Ambiance or Radiance theme: It only shows the zebra striping when the window is focused (see attached image).

Lightning up the unfocused highlight has brought another bug: Now the folder pane in Thunderbird has almost the same background color as the new unfocused highlight. This can be seen in the image attached to this bug report. How can that be solved? Should I open a new bug report?
Yes please open a new bug. This bug is closed with a checked-in patch. For new patches a new bug is needed.
Depends on: 939067
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: