581360 - Zebra striping under aero is inconsistent with file manager

Status: RESOLVED FIXED

(Thunderbird :: Folder and Message Lists, defect)

Description

[Andreas Nilsson (:andreasn)]

Attachment: Thunderbird vs File Manager (screenshot)

Comparing the look of the tree view in Thunderbird message pane with that of the Windows file manager, it's clear that the file manager look much nicer.
It would be cool if we could turn off the zebra striping, with bonus points for cooler hover and selection effects.


Further reading on zebra striping: http://www.alistapart.com/articles/zebrastripingdoesithelp/

Comment 1

[Richard Marti (:Paenglab)]

Attachment: mailWindow1.css with the needed changes

Comment 2

[Richard Marti (:Paenglab)]

Attachment: Image needed for the gradient effect

Comment 3

[Richard Marti (:Paenglab)]

Attachment: classic.jar for immediate test

I add the classic.jar for immediate testing. Only exchange it with the existing classic.jar.

Comment 4

[Jim Porter (:squib)]

I don't think the zebra striping actually occurs on any platform's file explorer. Though I do see it in other applications sometimes.

Comment 5

[Richard Marti (:Paenglab)]

Attachment: Patch

Uses now -moz-linear-background instead image for background. Border uses now system colors.

Patch creates now a full mailWindow1-aero.css because I don't know how I can delete an entry with %include mailWindow1.css.

Comment 6

[Richard Marti (:Paenglab)]

Attachment: Patch in action on Win7 with different styles

Comment 7

[Richard Marti (:Paenglab)]

Attachment: More global approach

More global approach also including Addressbook and Account Settings (and everything using messenger.css).

Comment 8

[Andreas Nilsson (:andreasn)]

Attachment: Thunderbird vs File Manager 2 (screenshot)

Great start! 
The background, hover and selection behavior both feel great!
I think we want some different styling on the selections though to match the file manager a bit better.

Comment 9

[Andreas Nilsson (:andreasn)]

So I guess my above comment would be more of a ui-review minus, when you actually asked for a code review :)

Comment 10

[Richard Marti (:Paenglab)]

Attachment: next try

Now only ui-review ;)
The selected colors should be correct now. The selected, focus is a little bit to dark, but I can't make it lighter because the background colors of tagged messages will be to much falsified. The border-color is also not 100% correct because it is defined to match all color schemes. I can apply an almost 100% copy, but then it will match the default color scheme and look in the others odd.

Comment 11

[Andreas Nilsson (:andreasn)]

Much nicer!
Three small nitpicks left (and those will be the last, I promise):
* Could there be a small inner border to the selections?
* If a selection is inactive it should be gray
* And perhaps a slight gradient on the hover ones.

Comment 12

[Andreas Nilsson (:andreasn)]

for the inner border, I think -moz-box-shadow should work

Comment 13

[Richard Marti (:Paenglab)]

Attachment: Some nits addressed

(In reply to comment #11)
> Three small nitpicks left (and those will be the last, I promise):
> * Could there be a small inner border to the selections?

-moz-box-shadow don't work with treechildren. I used now a 2px border but this makes it taller.

> * If a selection is inactive it should be gray

This works with listitems but again not satisfying with treechildren. The definition I tried:

  listitem[selected="true"]:-moz-window-inactive,
  tree:-moz-window-inactive treechildren::-moz-tree-row(selected),
  tree:-moz-window-inactive treechildren::-moz-tree-row(dummy, selected) {
    background-color: ThreeDShadow;
    -moz-border-top-colors: ThreeDDarkShadow rgba(255,255,255,.4) !important;
    -moz-border-right-colors: ThreeDDarkShadow rgba(255,255,255,.4) !important;
    -moz-border-left-colors: ThreeDDarkShadow rgba(255,255,255,.4) !important;
    -moz-border-bottom-colors: ThreeDDarkShadow rgba(255,255,255,.6) !important;
  }

> * And perhaps a slight gradient on the hover ones.

It was already a gradient, but too slight :)

Comment 14

[Andreas Nilsson (:andreasn)]

Looks good!
The hover effect seems to be visible when running Windows classic theme too (and looking at other apps, they don't seems to do that). So it's probably good to place that inside the (-moz-windows-default-theme) media too.

File Explorer also seems to give some transparency to the hover effects borders, but I didn't manage to figure out how to do that properly. Only fix if you figure out how to do that.

ui-r+ with the first one fixed (second would be a bonus).

Comment 15

[Richard Marti (:Paenglab)]

Attachment: Patch for review

(In reply to comment #14)
> Looks good!
> The hover effect seems to be visible when running Windows classic theme too
> (and looking at other apps, they don't seems to do that). So it's probably good
> to place that inside the (-moz-windows-default-theme) media too.

If you meant the border, I put it now inside the (-moz-windows-default-theme).

> File Explorer also seems to give some transparency to the hover effects
> borders, but I didn't manage to figure out how to do that properly. Only fix if
> you figure out how to do that.

I see no transparency on hover, but probably this would not work with treechildren. Box-shadow also not worked.

> ui-r+ with the first one fixed (second would be a bonus).

I set ui-r+ now.

To whom can I give the r?

Comment 16

[Richard Marti (:Paenglab)]

Attachment: Patch

I found a glitch in the ruleactionitem dropdown.

I'm giving the r? to Blake. If it's wrong, please change to the right.

Comment 17

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

Comment on attachment 464011 [details] [diff] [review]
Patch

After some puzzling out of whether nested selectors were allowed (they are, if the outer one is a media selector), the code looks good to me.

Thanks,
Blake.

Comment 18

[Mark Banner (:standard8)]

Checked in: http://hg.mozilla.org/comm-central/rev/879f28fa2176

Comment 19

[Thomas Stache]

Attachment: Screenshot: Comparison of Shredder with patch and Windows Explorer

I don't know - for me it's not looking satisfying. Andreas, is this fixed as you envisioned?

The screenshot shows what I see, left to right are:
Message list with focus, without focus, and Windows Explorer without focus. The border is way too dark, I'd guess the committed patch pulls the Windows Classic selection color - which would be in error...

In comment #11 Andreas also specified that inactive/unfocussed selections should be gray, which is not what I see in today's nightly (Gecko/20100816 Shredder/3.2a1pre)

Comment 20

[Richard Marti (:Paenglab)]

(In reply to comment #19)
> The border is way too dark, I'd guess the committed patch pulls the Windows
> Classic selection color - which would be in error...

The border is made with Highlight. It uses also the system color. If treechildren would support border-image, I'd have implemented a -moz-linear-gradient to lighten this. If you have a better system color this should be easily be applied.

> In comment #11 Andreas also specified that inactive/unfocussed selections
> should be gray, which is not what I see in today's nightly (Gecko/20100816
> Shredder/3.2a1pre)

As I wrote in comment #13 I tried it not satisfying. The treechildrens sometime leave in active or unfocused state but seldom in inactive state. So this has annoyed me more then the unfocused state.