Closed Bug 385175 Opened 14 years ago Closed 9 years ago

quota display not readable on Windows Classic theme

Categories

(Thunderbird :: Theme, defect)

x86
All
defect
Not set
minor

Tracking

(Not tracked)

RESOLVED FIXED
Thunderbird 9.0

People

(Reporter: registrations, Assigned: Paenglab)

References

Details

Attachments

(5 files, 3 obsolete files)

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4
Build Identifier: 2.0.0.4 (20070604)

I want to have the current quota usage displayed. With the "Windows Classic" theme I'm using, the display is very hard to read (black on dark blue).

Reproducible: Always

Steps to Reproduce:
1. set display scheme to "Windows Classic"
2. start thunderbird
3. optionally change quota display options so the bar will show
Actual Results:  
The percentage (e.g. 52%) is shown in black on a dark blue progress bar and thus not readable.

Expected Results:  
Text and background color with enough contrast so it can be read.

The "Windows Classic" theme, with it's Windows 2000 like appearance is preferred by lots of people I know (doesn't look like candy as the "Windows XP" theme).
This is the first time I have problems with readability using this theme.
Summary: quota display not readable → quota display not readable on Windows Classic theme
Version: unspecified → 2.0
I'm sure this breaks if you use a high-contrast theme, as well.
Status: UNCONFIRMED → NEW
Ever confirmed: true
I think the high-contrast issue was fixed by bug 382299. Maybe it fixed this too? Can you try a trunk build?
<http://ftp.mozilla.org/pub/mozilla.org/thunderbird/nightly/latest-trunk/>
Magnus, that patch only fixed the new mail alert issue; it didn't touch the quota display.
Ah, yes you're right.
Tobias, do you have a screenshot of that?
Blocks: 278096
This is exactly why I originally created the shadow on the meter, see screenshot in 278096, but it was removed by bug 360591, see the screenshot 'before vs. v2' and bug 360561 comment 4.
Other solutions are possible as well of course.
solutions to not having theme color support for text in progress bar:
 a) shadow text, but that looks always a bit out of place imo :\ and poorly
    readable on red at least (third row left in attachment 245578 [details],
    maybe fixable by tweaking the red a bit lighter or something)
     + optionally force different foreground/background to avoid the fuzzy
       effect top left in the same attachment
 b) always use custom background color that has midrange lightness so it fits
    with likely foreground colors
     + optionally always use black foreground to prevent unlikely foreground
       colors messing up
Problem still exists in Thunderbird 3.0.3:
Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.9.1.8) Gecko/20100227 Thunderbird/3.0.3
The key in the configuration that defines an integer in percent to show this information in the status bar is:
mail.quota.mainwindow_threshold.show
Mass move to the new theme component.
Component: Mail Window Front End → Theme
QA Contact: front-end → theme
With adding:

#quotaLabel:-moz-system-metric(windows-classic) {
  text-shadow: 0 0 1px ThreeDHighlight, 0 0 1px ThreeDHighlight;
}

the text would be better readable. Unfortunately this rule does also apply to high contrast themes and here the text looks blurry but also without text-shadow its not always readable. I don't know any other selector which only affects classic without the high contrast themes (but with contrast white it's better than before ;) ).

Blake what do you mean, should I do a patch like this? I don't know of a other solution which works also on the grey empty background.
Attachment #552053 - Flags: feedback?(bwinton)
Comment on attachment 552053 [details]
Comparison Quota with text-shadow

I think I would prefer to see something like the top-middle/top-right/middle-middle/middle-right, where the background colour of the progress bar is light enough (or dark enough) to work with light-coloured (or dark-coloured) text.

Thanks,
Blake.
Attachment #552053 - Flags: feedback?(bwinton) → feedback-
I was unclear and I should gave more information about the image.

The top line shows the actual colors for normal quota, warning and critical.
The second line shows the tree states with text-shadow applied. And the bottom line shows the normal quota with different high contrast themes with text-shadow.

Blake, please can you recheck the image with the new info's?
Sure!

…

Okay, I still don't think the text-shadow adds much to the readability, and would rather see the blue of the normal quota lightened enough to let us read the text.

(I guess the text-shadow doesn't _harm_ the readability too much, but it also doesn't fix the problem of the normal quota being unreadable to me.  ;)

Thanks,
Blake.
I would just not use the OS theme and simply fix the colors for background to light blue or green / orange / red (like now, just lighter color for normal) and text to black.
Yes I came to the same conclusion. I'll attach a patch later today.
Attached patch Make the quota always non-native (obsolete) — Splinter Review
I checked also Linux and Mac and the change from native to non-native looked weird. Under Mac the quota was almost not visible and never changed to orange or red.

If the appearance is to flat, I can add gradient if desired.
Assignee: nobody → richard.marti
Status: NEW → ASSIGNED
Attachment #554380 - Flags: ui-review?(bwinton)
Attachment #554380 - Flags: review?(bwinton)
OS: Windows XP → All
> -  -moz-appearance: none;

Why are you removing this? I think this prevents the progress meter from being native, and we'd want that to be non-native.

Psychologically, I do *not* want to give the impression that 50% quota use is all right. The statement should be neutral. Can you make the green a lot more light, almost white, e.g. color #d7ffcc, or make it even light blue, e.g. #d7daff?

Note that we also need to either
1) set the non-bar background to white or grey
   - but that would look ugly in many common color schemes, because the
   background doesn't match the native grey
2) - accept that dark color schemes have the % number not readable
   when under 80%
3) find a way in CSS to set the color only if the background would be dark,
   but use transparent/native, if the background is light.
   - Not sure that's possible.

I vote for 2).
(In reply to Ben Bucksch (:BenB) from comment #22)
> > -  -moz-appearance: none;
> 
> Why are you removing this? I think this prevents the progress meter from
> being native, and we'd want that to be non-native.

Because it is already set with #quotaPanel .progress-bar and this is not needed a second time.

> Psychologically, I do *not* want to give the impression that 50% quota use
> is all right. The statement should be neutral. Can you make the green a lot
> more light, almost white, e.g. color #d7ffcc, or make it even light blue,
> e.g. #d7daff?

The native progress-bars on Windows are green except the classic themes. I'll try with a lighter green. Maybe I'm also waiting for the ui-r of Blake.

> Note that we also need to either
> 1) set the non-bar background to white or grey
>    - but that would look ugly in many common color schemes, because the
>    background doesn't match the native grey
> 2) - accept that dark color schemes have the % number not readable
>    when under 80%
> 3) find a way in CSS to set the color only if the background would be dark,
>    but use transparent/native, if the background is light.
>    - Not sure that's possible.
> 
> I vote for 2).

Me too. The text color isn't hard coded so it can change depending of the theme (see attachment 552053 [details] bottom line) and then it is not such a big problem. When I'm using green as background color then then the high contrast theme with green text has some readability problems. But it exists also a high contrast theme with blue text, then the problem would exist with blue background.

Note: The % values in the image are only made by me with DOM Inspector. I have no account where I can play with quota's. I don't know when the quota changes to warning or critical.
Comment on attachment 554380 [details] [diff] [review]
Make the quota always non-native

The Orange and Green are a little hard to read in high-contrast mode with yellow or white text.  And the Green is really hard to read in high-contrast mode with green text.  So, I'm going to have to say ui-r-, but the code seems okay, so at least you get an r=me…

(Screenshots available on request.)

Thanks,
Blake.
Attachment #554380 - Flags: ui-review?(bwinton)
Attachment #554380 - Flags: ui-review-
Attachment #554380 - Flags: review?(bwinton)
Attachment #554380 - Flags: review+
In Windows high contrast mode, background images are turned off (for IE and FF at least). This is by recommendation. In this case it could be argued that the gradient is like a background image and that the important information is the actual foreground number. It won't please everyone but a reasonable strategy is to just remove the gradients for Windows HCM.
(In reply to Blake Winton (:bwinton - Thunderbird UX) from comment #24)
> Comment on attachment 554380 [details] [diff] [review]
> Make the quota always non-native
> 
> The Orange and Green are a little hard to read in high-contrast mode with
> yellow or white text.  And the Green is really hard to read in high-contrast
> mode with green text.  So, I'm going to have to say ui-r-, but the code
> seems okay, so at least you get an r=me…

That's the problem. With a darker green the yellow text would be better readable, but on classic theme with black text almost unreadable. This would happen with almost every color on one of the themes :(

(In reply to David Bolter [:davidb] from comment #25)
> In Windows high contrast mode, background images are turned off (for IE and
> FF at least). This is by recommendation. In this case it could be argued
> that the gradient is like a background image and that the important
> information is the actual foreground number. It won't please everyone but a
> reasonable strategy is to just remove the gradients for Windows HCM.

I tried to give a background image instead of a background color. But the image was also shown in high-contrast theme :(

I will try to show no quota bar and for the warning and critical state color the quota meter border in orange or red. Then the percentage text would be always on the correct background.
Richard, you can just set the text color fixed to black, and the normal (non-bar) background to some light color, see comment 18 and 22. In other words, make all of text foreground, normal background, and the 3 colored bar backgrounds each a fixed color not based on the native Windows skin.

> I will try to show no quota bar

Please keep the bar in Windows classic theme. It's intentionally a visual progress meter. We want to visualize the quota use.
Attached patch Make the quota fully non-native (obsolete) — Splinter Review
Quota panel after Ben's proposal with fixed background- and text color. This makes the quota looking always the same no matter what theme is used.

The negative aspect could be on high-contrast themes persons with visual diseases could have problems with this colors. But also with the actual colors always one or the other theme has this problem.
Attachment #554380 - Attachment is obsolete: true
Attachment #556247 - Flags: ui-review?(bwinton)
Attachment #556247 - Flags: review?(bwinton)
Comment on attachment 556247 [details] [diff] [review]
Make the quota fully non-native

I think that's the opposite of the way we want to go, as the quota isn't any more readable in high-contrast mode, and sticks out like a sore thumb.

I did a quick test where I added "opacity: 0.5" to "#quotaPanel .progress-bar" just for the qute theme, and it seemed to be a lot closer to what I think the final result of this should be.  Would you mind submitting a patch that tried something like that?  (I didn't test to see what the best opacity was, so feel free to try various values to find the nicest.  Or post screenshots of the various values and ask me which I like best.  ;)

(If you go that route, please leave a comment as to why it's only Qute that gets the partial transparency.)

Thanks,
Blake.
Attachment #556247 - Flags: ui-review?(bwinton)
Attachment #556247 - Flags: ui-review-
Attachment #556247 - Flags: review?(bwinton)
This image shows the quotas with different opacity's.
The first column is classic (the other default themes would look like this).
The second column is classic with alert=warning.
The third column is high contrast with green text.
The fourth column is high contrast with green text with alert=warning.
The last column is high contrast with yellow text with alert=warning.

I think opacity: .5 is a good compromise. lesser opacity makes the bar colors pale and more opacity makes the text harder to read on high contrast themes.
Attachment #557309 - Flags: feedback?(bwinton)
bwinton, great idea. Looks good to me.
Please do it only for Windows classic theme, though.
Comment on attachment 557309 [details]
Quota with different opacity's

.3 seems too pale in normal mode.
.7 seems too hard to read in high-contrast.

I think .5 gets my vote, unless it makes the red of 90% end up pink.  ;)

Thanks,
Blake.
Attachment #557309 - Flags: feedback?(bwinton) → feedback+
Attached patch Quota patch (obsolete) — Splinter Review
This patch adds "opacity: .5" to "#quotaPanel .progress-bar". For the critical state (red bar) I've set a opacity of .6 to be more red.

Under Windows I leaved the #quotaPanel as it is but the .progress-bar appearance is always non-native. This because under Win7 the native progress-bar has always a brilliance animation which can distract the user.

Under Linux and Mac everything is non-native because under Ubuntu Linux the #quotaPanel has rounded ends and the bar not. Under Mac I remember the colored bars weren't never show in native mode.
Attachment #556247 - Attachment is obsolete: true
Attachment #557573 - Flags: ui-review?(bwinton)
Attachment #557573 - Flags: review?(bwinton)
Comment on attachment 557573 [details] [diff] [review]
Quota patch

Review of attachment 557573 [details] [diff] [review]:
-----------------------------------------------------------------

I don't see any problems with the code, so I'm going to give this an r+, but I want a little more time to play with it than I currently have, so the ui-r will have to wait until tomorrow, I'm afraid.
Attachment #557573 - Flags: review?(bwinton) → review+
+  background-color: LimeGreen;

see Comment 22:
> Psychologically, I do *not* want to give the impression that 50% quota use
> is all right. The statement should be neutral. Can you make the green a lot
> more light, almost white, e.g. color #d7ffcc, or make it even light blue,
> e.g. #d7daff?
Comment on attachment 557573 [details] [diff] [review]
Quota patch

I wouldn't block the landing of this patch on finding a less green colour, particularly given the differing interpretations of colours in different cultures (which I believe we also aren't handling in this bug).

But if you wanted to find a pleasing blue, I think I would probably be okay with that, too.

Thanks,
Blake.
Attachment #557573 - Flags: ui-review?(bwinton) → ui-review+
Patch for check-in with the change from LimeGreen to #88AAFF.
r+ and ui-r+ from Blake trough IRC
Attachment #557573 - Attachment is obsolete: true
Attachment #557921 - Flags: ui-review+
Attachment #557921 - Flags: review+
Keywords: checkin-needed
Checked in: http://hg.mozilla.org/comm-central/rev/6b7bd9c1ac6c
Status: ASSIGNED → RESOLVED
Closed: 9 years ago
Keywords: checkin-needed
Resolution: --- → FIXED
Target Milestone: --- → Thunderbird 9.0
You need to log in before you can comment on or make changes to this bug.