Closed Bug 581360 Opened 10 years ago Closed 10 years ago

Zebra striping under aero is inconsistent with file manager

Categories

(Thunderbird :: Folder and Message Lists, defect)

x86
Windows Vista
defect
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED
Thunderbird 3.3a1

People

(Reporter: andreasn, Assigned: Paenglab)

References

Details

(Keywords: ux-consistency)

Attachments

(8 files, 5 obsolete files)

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/
Keywords: ux-consistency
I add the classic.jar for immediate testing. Only exchange it with the existing classic.jar.
I don't think the zebra striping actually occurs on any platform's file explorer. Though I do see it in other applications sometimes.
Attached patch Patch (obsolete) — Splinter Review
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.
Attachment #460124 - Flags: review?(nisses.mail)
Attached patch More global approach (obsolete) — Splinter Review
More global approach also including Addressbook and Account Settings (and everything using messenger.css).
Assignee: nobody → richard.marti
Attachment #460124 - Attachment is obsolete: true
Status: NEW → ASSIGNED
Attachment #461889 - Flags: review?(nisses.mail)
Attachment #460124 - Flags: review?(nisses.mail)
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.
So I guess my above comment would be more of a ui-review minus, when you actually asked for a code review :)
Attached file next try (obsolete) —
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.
Attachment #461889 - Attachment is obsolete: true
Attachment #462178 - Flags: ui-review?(nisses.mail)
Attachment #461889 - Flags: review?(nisses.mail)
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.
for the inner border, I think -moz-box-shadow should work
Attached file Some nits addressed (obsolete) —
(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 :)
Attachment #462178 - Attachment is obsolete: true
Attachment #462523 - Flags: ui-review?(nisses.mail)
Attachment #462178 - Flags: ui-review?(nisses.mail)
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).
Attached patch Patch for review (obsolete) — Splinter 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?
Attachment #462523 - Attachment is obsolete: true
Attachment #462867 - Flags: ui-review+
Attachment #462523 - Flags: ui-review?(nisses.mail)
Attached patch PatchSplinter Review
I found a glitch in the ruleactionitem dropdown.

I'm giving the r? to Blake. If it's wrong, please change to the right.
Attachment #462867 - Attachment is obsolete: true
Attachment #464011 - Flags: review?(bwinton)
Attachment #462867 - Attachment is patch: true
Attachment #462867 - Attachment mime type: application/octet-stream → text/plain
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.
Attachment #464011 - Flags: review?(bwinton) → review+
Keywords: checkin-needed
Checked in: http://hg.mozilla.org/comm-central/rev/879f28fa2176
Status: ASSIGNED → RESOLVED
Closed: 10 years ago
Keywords: checkin-needed
Resolution: --- → FIXED
Target Milestone: --- → Thunderbird 3.2a1
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)
(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.
Depends on: 587989
You need to log in before you can comment on or make changes to this bug.