385175 - quota display not readable on Windows Classic theme

Status: RESOLVED FIXED

(Thunderbird :: Theme, defect)

Description

[Tobias]

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.

Comment 1

[Adam Guthrie]

I'm sure this breaks if you use a high-contrast theme, as well.

Comment 2

[Magnus Melin [:mkmelin]]

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/>

Comment 3

[Adam Guthrie]

Magnus, that patch only fixed the new mail alert issue; it didn't touch the quota display.

Comment 4

[Magnus Melin [:mkmelin]]

Ah, yes you're right.

Comment 5

[Magnus Melin [:mkmelin]]

Tobias, do you have a screenshot of that?

Comment 6

[Ben Bucksch (:BenB)]

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.

Comment 7

[Ben Bucksch (:BenB)]

eh, I meant bug 360591 comment 4 (and bug 278096).

Comment 8

[Ben Bucksch (:BenB)]

Other solutions are possible as well of course.

Comment 9

[Tuukka Tolvanen (sp3000)]

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

Comment 10

[a1536783]

Attachment: IMAP quota warning with bad contrast in status bar of TB3.

Comment 11

[a1536783]

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

Comment 12

[a1536783]

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

Comment 13

[Ludovic Hirlimann [:Usul]]

Mass move to the new theme component.

Comment 14

[Richard Marti (:Paenglab)]

Attachment: Comparison Quota with text-shadow

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.

Comment 15

[Blake Winton (: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.

Comment 16

[Richard Marti (:Paenglab)]

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?

Comment 17

[Blake Winton (:bwinton) (:☕️)]

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.

Comment 18

[Ben Bucksch (:BenB)]

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.

Comment 19

[Richard Marti (:Paenglab)]

Yes I came to the same conclusion. I'll attach a patch later today.

Comment 20

[Richard Marti (:Paenglab)]

Attachment: Make the quota always non-native

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.

Comment 21

[Richard Marti (:Paenglab)]

Attachment: Quota with patch under Win7 (the others are looking similar)

Comment 22

[Ben Bucksch (:BenB)]

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

Comment 23

[Richard Marti (:Paenglab)]

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

[Blake Winton (:bwinton) (:☕️)]

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.

Comment 25

[David Bolter [:davidb] (NeedInfo me for attention)]

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.

Comment 26

[Richard Marti (:Paenglab)]

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

Comment 27

[Ben Bucksch (:BenB)]

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.

Comment 28

[Richard Marti (:Paenglab)]

Attachment: Make the quota fully non-native

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.

Comment 29

[Blake Winton (: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.

Comment 30

[Richard Marti (:Paenglab)]

Attachment: Quota with different opacity's

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.

Comment 31

[Ben Bucksch (:BenB)]

bwinton, great idea. Looks good to me.
Please do it only for Windows classic theme, though.

Comment 32

[Blake Winton (:bwinton) (:☕️)]

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.

Comment 33

[Richard Marti (:Paenglab)]

Attachment: Quota patch

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.

Comment 34

[Blake Winton (: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.

Comment 35

[Ben Bucksch (:BenB)]

+  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 36

[Blake Winton (:bwinton) (:☕️)]

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.

Comment 37

[Richard Marti (:Paenglab)]

Attachment: Quota patch for check-in

Patch for check-in with the change from LimeGreen to #88AAFF.
r+ and ui-r+ from Blake trough IRC

Comment 38

[Mark Banner (:standard8)]

Checked in: http://hg.mozilla.org/comm-central/rev/6b7bd9c1ac6c