Last Comment Bug 811920 - Message list highlight bar - insufficient contrast when list is blurred
: Message list highlight bar - insufficient contrast when list is blurred
Status: RESOLVED FIXED
:
Product: Thunderbird
Classification: Client Software
Component: Mail Window Front End (show other bugs)
: 16 Branch
: x86_64 Linux
: -- normal (vote)
: Thunderbird 19.0
Assigned To: Richard Marti (:Paenglab)
:
Mentors:
: 835146 (view as bug list)
Depends on: 939067
Blocks:
  Show dependency treegraph
 
Reported: 2012-11-14 14:45 PST by Mike Habicher [:mikeh] (high bugzilla latency)
Modified: 2013-11-15 03:00 PST (History)
6 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---


Attachments
Screenshot with nearly invisible highlight bar (318.39 KB, image/png)
2012-11-14 14:45 PST, Mike Habicher [:mikeh] (high bugzilla latency)
no flags Details
patch (922 bytes, patch)
2012-11-17 06:54 PST, Richard Marti (:Paenglab)
bugs: review+
Details | Diff | Splinter Review
How Nautilus solves the highlight-zebra-contrast-problem (133.69 KB, image/jpeg)
2013-11-15 01:36 PST, Gerhard Großmann
no flags Details

Description Mike Habicher [:mikeh] (high bugzilla latency) 2012-11-14 14:45:15 PST
Created attachment 681715 [details]
Screenshot with nearly invisible highlight bar

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.
Comment 1 Richard Marti (:Paenglab) 2012-11-15 08:11:23 PST
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?
Comment 2 Richard Marti (:Paenglab) 2012-11-15 08:11:23 PST
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?
Comment 3 Andreas Nilsson (:andreasn) 2012-11-16 16:19:59 PST
(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/
Comment 4 Richard Marti (:Paenglab) 2012-11-17 06:54:51 PST
Created attachment 682752 [details] [diff] [review]
patch

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.
Comment 5 Andreas Nilsson (:andreasn) 2012-11-19 09:50:25 PST
Comment on attachment 682752 [details] [diff] [review]
patch

Code looks good!
Comment 6 Mike Conley (:mconley) - (Needinfo me!) 2012-11-19 11:22:51 PST
https://hg.mozilla.org/comm-central/rev/226011df6278
Comment 7 Richard Marti (:Paenglab) 2013-01-29 01:15:22 PST
*** Bug 835146 has been marked as a duplicate of this bug. ***
Comment 8 Andrew Buehler 2013-09-18 06:42:01 PDT
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.
Comment 9 Richard Marti (:Paenglab) 2013-09-18 06:48:49 PDT
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.
Comment 10 Andrew Buehler 2013-09-18 06:52:42 PDT
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.
Comment 11 Richard Marti (:Paenglab) 2013-09-18 06:56:02 PDT
Your !important had overridden the normal rule. Then you need a new rule with !important to override this.
Comment 12 Andrew Buehler 2013-09-18 07:36:23 PDT
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;
}
Comment 13 Gerhard Großmann 2013-10-25 10:37:40 PDT
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.”
Comment 14 Andrew Buehler 2013-11-02 04:26:45 PDT
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.
Comment 15 Gerhard Großmann 2013-11-15 01:36:30 PST
Created attachment 832819 [details]
How Nautilus solves the highlight-zebra-contrast-problem

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?
Comment 16 Richard Marti (:Paenglab) 2013-11-15 02:16:22 PST
Yes please open a new bug. This bug is closed with a checked-in patch. For new patches a new bug is needed.

Note You need to log in before you can comment on or make changes to this bug.