1053121 - [10.10] Add vibrancy to the folderpane.

Status: RESOLVED FIXED

(Thunderbird :: Theme, defect)

Description

[Nomis101]

Attachment: Comparison between current TB and 10.10. Finder

There are some UI related things that have changed in 10.10, which you can see e.g. in the Finder, that would be nice to adopt to TB folder pane if running on 10.10.

1. The blue "select" bar in the Finder (like the rest of the UI) is now kind of translucent. This means, the value of the blue depends on the background. If you have a black background, the blue is different from the blue you get if you have a white background. 
In Thunderbird we currently have a stable gradient. This looks a little bit odd if running on 10.10, there should be now gradient any more.
This will need Bug 1051522 to be fixed first.

2. The font has changed to something like Helvetica Neue:
http://www.theverge.com/2014/6/2/5773838/apple-os-x-yosemite-changes-system-font-for-first-time 
I don't know for sure what font Thunderbird is using currently in the folder pane.

3. The background of our folder pane is slighly bluish. It should be slightly grey, like in the Finder.

4. The icons sould also be grayscale instead of the current colored ones.

Comment 1

[Nomis101]

Attachment: Folder pane with 10.10 vibrancy effect

The vibrancy effect is already working. This is with background-color: #F0F0F0 and 
-moz-appearance: -moz-mac-vibrancy-light !important.
I also changed the font to Helvetica Neue (its not the same look as in Finder, because I used font-size: 9pt and font-weight: 300 for this example).

Comment 2

[Josiah Bruner [:jsbruner]]

Attachment: Add vibrancy effects to the sidebars

Here's the patch for adding the vibrancy on all the sidebars. I reorganized some of the compose CSS to make it easier to change the color in the future.

Comment 3

[Nomis101]

Attachment: Imitate 10.10. Finder and Mail

Cool, thanks for the patch. Yesterday I was also playing around with this, to give the folder pane a similar look to the one in Finder/Mail. I currently came up with this WIP. It makes the selected item the same blue and the unfocused one grey. The text should be white (if blue) or grey (if unfocused and grey), but thats currently not working. :-( The patch also currently don't select this changes only for yosemite, because in Mavericks it looks more like the current one.
Any thoughts? So, I give you what I have and you can work with it, if you like. You know this CSS stuff better than me.

Comment 4

[Josiah Bruner [:jsbruner]]

Comment on attachment 8481883 [details] [diff] [review]
Add vibrancy effects to the sidebars

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

I'll do the font and other stuff in a separate patch, but this can be reviewed I think.

Comment 5

[Nomis101]

(In reply to Nomis101 from comment #0)
> Created attachment 8472221 [details]
> Comparison between current TB and 10.10. Finder

By the way, the look of Finder has changed in the final Yosemite version, compared to this screenshot. The "selected color" now is not blue anymore. It now looks more like -moz-mac-vibrancy-dark

Comment 6

[Richard Marti (:Paenglab)]

Comment on attachment 8481883 [details] [diff] [review]
Add vibrancy effects to the sidebars

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

I have no 10.10 to test but it looks good to me.

Only one question: why is the !important needed on the two -moz-appearance: -moz-mac-vibrancy-light !important; ?
I know #folderTree used it already before but I see no reason to use it. r+ with removing it or if it is really needed.

Comment 7

[Josiah Bruner [:jsbruner]]

Attachment: Add vibrancy effects to the sidebars

I forgot to add this to chat, so I made that change here (In addition to removing those couple !importants). Unfortunately -moz-appearance: -moz-mac-vibrancy-light; hides the border, even if you give the border !important.

Therefore, I moved the border to the splitter, which makes sense anyway.

Comment 8

[Richard Marti (:Paenglab)]

Comment on attachment 8507358 [details] [diff] [review]
Add vibrancy effects to the sidebars

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

Code looks good. r+ with the comment addressed.

::: mail/themes/osx/mail/chat.css
@@ +42,4 @@
>    background-image: none;
>    width: 3px;
>    min-width: 3px;
> +  border-left: solid 1px #8B8B8B;

Please use -moz-border-start to be rtl save. When you are on it, please can you also change the border-right of #listPaneBox?

Comment 9

[Josiah Bruner [:jsbruner]]

Attachment: Add vibrancy effects to the sidebars

Alright, I addressed the feedback.

Comment 10

[Patrick Cloke [:clokep]]

https://hg.mozilla.org/comm-central/rev/4838f764c0ce