954056 - Use Glass on Aero (Windows Vista and 7)

Status: RESOLVED FIXED

(Instantbird Graveyard :: Other, enhancement)

Description

[Benedikt Pfeifer]

*** Original post on bio 620 at 2010-12-11 23:46:00 UTC ***

Maybe we could use Glass on the menubar / status switcher on the buddy list or the background tabs and tab bar on the conversation windows on Windows Vista and 7? 

MDC suggests this could be as easy as setting "-moz-appearance: -moz-win-glass" on the elements in question?

See https://developer.mozilla.org/en/CSS/-moz-appearance

Comment 1

[Benedikt Pfeifer]

Attachment: Glass look on Buddy list

*** Original post on bio 620 as attmnt 569 at 2011-03-22 18:57:00 UTC ***

You only get the glass appearance when you unset the background color or make it partially transparent at least. Here's the bit changed in |blist.css| to achieve the look shown in the attachment:

#blistWindow,
#mainToolbox,
#buddylistbox {
  background-color: rgba(255, 255, 255, 00.2) !important;
  -moz-appearance: -moz-win-borderless-glass !important;
}

Comment 2

[Instantbot]

*** Original post on bio 620 by Paul [sabret00the] <sabret00the AT yahoo.co.uk> at 2011-03-22 19:54:36 UTC ***

That's too much glass. It becomes hard to read, that's exactly why Mozilla adopted the "Windows blue" for it's in-Content UI and toolbars. I think we should go for that colour.

Comment 3

[Benedikt Pfeifer]

*** Original post on bio 620 at 2011-05-16 13:51:57 UTC ***

Comment from Florian on this:

"I think we will want to use the Instantbird button to get rid of the menubar, and then use glass for the status selector, and maybe the status bar. Probably not for the contact list itself."
(see http://log.bezut.info/instantbird/110516/#m177)

I'll mark it as dependent on the Instantbird button for now..

Comment 4

[Benedikt Pfeifer]

*** Original post on bio 620 at 2011-05-20 15:46:48 UTC ***

Talking about this image:
https://wiki.instantbird.org/File:Ibglasscontactlist.png


17:40	flo	Mic2: by the way, I think the lighter area should also be behind the icon
17:40	Mic2	ok
17:41	flo	reduce the margin at the right, so that the right end of the lighter area is aligned with the right border of the list
17:41	flo	and either put some margin between the lighter area and the list, or completely remove it and remove the bottom rounded corners
17:42	flo	(that's just some ideas/suggestions of course. It's what I would try to do if I played with the code myself)
17:43	Mic2	IU
17:44	flo	and if I remember correctly, you wanted to add some shadow behind the menus so that they look more or less like the word "Conta..." in the title bar
17:44	Mic2	I've already played with the padding since the labels sat right at the border of the light box

Comment 5

[Benedikt Pfeifer]

Attachment: Account Manager - Glass - Patch v1

*** Original post on bio 620 as attmnt 635 at 2011-05-21 18:36:00 UTC was without comment, so any subsequent comment numbers will be shifted ***

Comment 6

[Benedikt Pfeifer]

Attachment: Account Manager - Glass - Screenshot

*** Original post on bio 620 as attmnt 636 at 2011-05-21 18:36:00 UTC was without comment, so any subsequent comment numbers will be shifted ***

Comment 7

[Benedikt Pfeifer]

Attachment: Conversation Window - Glass - Patch v1

*** Original post on bio 620 as attmnt 637 at 2011-05-21 18:37:00 UTC was without comment, so any subsequent comment numbers will be shifted ***

Comment 8

[Benedikt Pfeifer]

Attachment: Conversation Window - Glass - Screenshot

*** Original post on bio 620 as attmnt 638 at 2011-05-21 18:37:00 UTC was without comment, so any subsequent comment numbers will be shifted ***

Comment 9

[Benedikt Pfeifer]

Comment on attachment 8352381 [details]
Conversation Window - Glass - Screenshot

*** Original change on bio 620 attmnt 638 at 2011-05-21 18:38:26 UTC was without comment, so any subsequent comment numbers will be shifted ***

Comment 10

[Benedikt Pfeifer]

Attachment: Contact List - Glass - Patch v1

*** Original post on bio 620 as attmnt 639 at 2011-05-21 18:39:00 UTC was without comment, so any subsequent comment numbers will be shifted ***

Comment 11

[Benedikt Pfeifer]

Attachment: Contact List - Glass - Screenshot

*** Original post on bio 620 as attmnt 640 at 2011-05-21 18:39:00 UTC was without comment, so any subsequent comment numbers will be shifted ***

Comment 12

[Benedikt Pfeifer]

*** Original post on bio 620 at 2011-05-21 18:41:22 UTC ***

All styles apply only when full Aero is available (not on classic Windows themes and neither on Aero Basic).

Comment 13

[Quentin Raynaud]

*** Original post on bio 620 at 2011-05-22 07:37:45 UTC ***

This is great work !

If I can make only one comment, it is that the white of the buddy list doesn't fit well with the other colors. But it's only a detail. Apart from that, really a good change...

A last word : well done !

Comment 14

[Benedikt Pfeifer]

Attachment: Account Manager - Glass - Patch v2

*** Original post on bio 620 as attmnt 649 at 2011-05-24 11:13:00 UTC was without comment, so any subsequent comment numbers will be shifted ***

Comment 15

[Benedikt Pfeifer]

Attachment: Account Manager - Glass - Screenshot v2

*** Original post on bio 620 as attmnt 650 at 2011-05-24 11:13:00 UTC was without comment, so any subsequent comment numbers will be shifted ***

Comment 16

[Benedikt Pfeifer]

Comment on attachment 8352378 [details] [diff] [review]
Account Manager - Glass - Patch v1

*** Original change on bio 620 attmnt 635 at 2011-05-24 11:13:09 UTC was without comment, so any subsequent comment numbers will be shifted ***

Comment 17

[Benedikt Pfeifer]

Comment on attachment 8352379 [details]
Account Manager - Glass - Screenshot

*** Original change on bio 620 attmnt 636 at 2011-05-24 11:13:48 UTC was without comment, so any subsequent comment numbers will be shifted ***

Comment 18

[Benedikt Pfeifer]

*** Original post on bio 620 at 2011-05-24 11:47:03 UTC ***

> http://log.bezut.info/instantbird/110523/#m96

> 10:06:45 <flo> it's possible some of your changes would be good on Aero Basic too ;)
> 10:07:03 <flo> the rounded corners for example

Unfortunately they don't. There's a bit of light grey window background outside the rounded corners and it's not possible to set a color matching the window frame (css color "WindowFrame" is dark grey here). Looks bad.

Comment 19

[Benedikt Pfeifer]

Attachment: Complete Patch v1

*** Original post on bio 620 as attmnt 661 at 2011-05-29 00:16:00 UTC ***

Since I can't compile, the complete move from my development environment into the repository is untested so far. I hope I did everything right.

Comment 20

[Benedikt Pfeifer]

Comment on attachment 8352311 [details]
Glass look on Buddy list

*** Original change on bio 620 attmnt 569 at 2011-05-29 00:16:45 UTC was without comment, so any subsequent comment numbers will be shifted ***

Comment 21

[Benedikt Pfeifer]

Comment on attachment 8352380 [details] [diff] [review]
Conversation Window - Glass - Patch v1

*** Original change on bio 620 attmnt 637 at 2011-05-29 00:16:45 UTC was without comment, so any subsequent comment numbers will be shifted ***

Comment 22

[Benedikt Pfeifer]

Comment on attachment 8352381 [details]
Conversation Window - Glass - Screenshot

*** Original change on bio 620 attmnt 638 at 2011-05-29 00:16:45 UTC was without comment, so any subsequent comment numbers will be shifted ***

Comment 23

[Benedikt Pfeifer]

Comment on attachment 8352382 [details] [diff] [review]
Contact List - Glass - Patch v1

*** Original change on bio 620 attmnt 639 at 2011-05-29 00:16:45 UTC was without comment, so any subsequent comment numbers will be shifted ***

Comment 24

[Benedikt Pfeifer]

Comment on attachment 8352383 [details]
Contact List - Glass - Screenshot

*** Original change on bio 620 attmnt 640 at 2011-05-29 00:16:45 UTC was without comment, so any subsequent comment numbers will be shifted ***

Comment 25

[Benedikt Pfeifer]

Comment on attachment 8352392 [details] [diff] [review]
Account Manager - Glass - Patch v2

*** Original change on bio 620 attmnt 649 at 2011-05-29 00:16:45 UTC was without comment, so any subsequent comment numbers will be shifted ***

Comment 26

[Benedikt Pfeifer]

*** Original post on bio 620 at 2011-05-29 15:36:52 UTC ***

(In reply to comment #15)
> > http://log.bezut.info/instantbird/110523/#m96
> 
> > 10:06:45 <flo> it's possible some of your changes would be good on Aero Basic too ;)
> > 10:07:03 <flo> the rounded corners for example
> 
> Unfortunately they don't. There's a bit of light grey window background outside
> the rounded corners and it's not possible to set a color matching the window
> frame (css color "WindowFrame" is dark grey here). Looks bad.

I worked around this with hardcoded color values that I found on tabbrowser-aero.css.

The Aero Basic look is now the same as Aero minus the Glass effects.

Comment 27

[Florian Quèze [:florian]]

*** Original post on bio 620 at 2011-05-29 16:53:01 UTC ***

Comment on attachment 8352404 [details] [diff] [review] (bio-attmnt 661)
Complete Patch v1

Not a full review yet, but I guess early feedback is welcome.

>diff -r 1b90f5e6e4cf instantbird/themes/accounts-aero.css
>--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
>+++ b/instantbird/themes/accounts-aero.css	Sun May 29 02:10:09 2011 +0200
>@@ -0,0 +1,39 @@
>+%define WINSTRIPE_AERO
>+%include accounts.css
>+%undef WINSTRIPE_AERO

Are the WINSTRIPE_AERO defines used anywhere? In tabbrowser-aero.css, it exists because it's used inside tabbrowser.css.

>+/* This should apply to both full Aero and Aero Basic as well. */
>+@media all and (-moz-windows-theme: aero) {

Are you trying to avoid all the other themes (Windows Classic?) or should the following rules always be applied on Vista/Seven?

>diff -r 1b90f5e6e4cf instantbird/themes/accounts.css
>--- a/instantbird/themes/accounts.css	Thu May 26 19:41:11 2011 +0200
>+++ b/instantbird/themes/accounts.css	Sun May 29 02:10:09 2011 +0200
>@@ -20,6 +20,7 @@
>  * the Initial Developer. All Rights Reserved.
>  *
>  * Contributor(s):
>+ *  Benedikt Pfeifer <[e-mail]>

Nit: If you don't want clokep to credit himself for fixing the indent of the contributor list of the files you touched, maybe you should follow the guideline ("Contributor names should be indented two spaces from the "Contributors:" line." http://www.mozilla.org/MPL/boilerplate-1.1/).
And only one space between the name and the <email> part please :).

>diff -r 1b90f5e6e4cf instantbird/themes/blist-aero.css

>+    background-color: rgb(185,209,234);
Nit: space after each coma.


I haven't fully reviewed the patch yet, but it looks very promising! :)

Comment 28

[Florian Quèze [:florian]]

*** Original post on bio 620 at 2011-05-30 09:54:07 UTC ***

Comment on attachment 8352404 [details] [diff] [review] (bio-attmnt 661)
Complete Patch v1

>diff -r 1b90f5e6e4cf instantbird/themes/accounts-aero.css

>+  #accountsDesk {

>+    padding-top:5px;

Another nit: missing space between ':' and '5px'.


>diff -r 1b90f5e6e4cf instantbird/themes/conversation.css

>@@ -42,6 +43,11 @@
> .conv-bottom, .conv-nicklist {
>   margin: 0 0;
> }
>+%ifdef XP_WIN
>+.conv-bottom {
>+  border-top: 1px solid rgba(0, 0, 0, 0.25);
>+}
>+%endif
> 
> .conv-top {
>   min-height: 115px;
>@@ -68,7 +74,11 @@
> %else
>   background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
> %endif
>+%ifndef XP_WIN
>   border-bottom: 1px solid ThreeDShadow;
>+%else
>+  border-bottom: none;
>+%endif
> %endif
> }
> 
>@@ -245,7 +255,13 @@
> .conv-messages {
>   min-width: 150px;
> %ifndef XP_MACOSX
>+%ifndef XP_WIN
>   border-bottom: solid 1px GrayText;
>+%else
>+  border: 1px solid rgba(0, 0, 0, 0.25);
>+  border-left: none;
>+  border-right: none !important;
>+%endif
> %endif
> }
> 
>@@ -369,3 +385,8 @@
>   background: #e8e8e8;
> }
> %endif
>+%ifdef XP_WIN
>+.splitter.conv-chat {
>+  border-left: 1px solid rgba(0, 0, 0, 0.25);
>+}
>+%end

Can you explain the goal of these changes (which will apply on XP too)?

Looks good otherwise (though I haven't actually tested it, just read the patch).

Comment 29

[Benedikt Pfeifer]

Attachment: Complete Patch v2

*** Original post on bio 620 as attmnt 671 at 2011-05-31 06:50:00 UTC ***

New patch changed according to review comments.

Comment 30

[Benedikt Pfeifer]

Comment on attachment 8352404 [details] [diff] [review]
Complete Patch v1

*** Original change on bio 620 attmnt 661 at 2011-05-31 06:50:39 UTC was without comment, so any subsequent comment numbers will be shifted ***

Comment 31

[Benedikt Pfeifer]

Attachment: Look of conversation borders on Aero and Classic theme (v2)

*** Original post on bio 620 as attmnt 672 at 2011-05-31 06:54:00 UTC ***

The attachment shows the look of the conversation borders using the Windows Aero and the Windows Classic theme.

The latest patch applies the new border look to "conv-bottom" only when on Aero bye the way.

Comment 32

[Benedikt Pfeifer]

Comment on attachment 8352415 [details]
Look of conversation borders on Aero and Classic theme (v2)

*** Original change on bio 620 attmnt 672 at 2011-05-31 10:35:04 UTC ***

Not showing what it should.

Comment 33

[Florian Quèze [:florian]]

Comment on attachment 8352414 [details] [diff] [review]
Complete Patch v2

*** Original change on bio 620 attmnt 671 at 2011-05-31 12:38:50 UTC ***

I've tried only the parts that have an effect on XP as it's the only Windows system on which I can test right now.

>diff -r 1b90f5e6e4cf instantbird/themes/conversation-aero.css

>+  /* Missing border over the input box*/

Add a space before '*/'. And maybe reference the bug where this was discussed (Bug 954052 (bio 616)), as I still think this is not the expected behavior, but a Mozilla bug. (+ you can get credit for resolving that bug too :))

>diff -r 1b90f5e6e4cf instantbird/themes/conversation.css

>+%ifdef XP_WIN
>+.splitter.conv-chat {
>+  border-left: 1px solid rgba(0, 0, 0, 0.25);
>+}
>+%end

end -> endif

I still don't fully understand all the changes made to this file, but I've tried this on XP and the only problem I noticed is also visible on the latest screenshot you attached: the left border added to the vertical splitter makes it appear smaller than the horizontal splitter at the bottom of the conversation, and the grippy touches the right side of the splitter.

This is easy to fix by adding this:
+%ifdef XP_WIN
+grippy {
+  margin: 0 1px;
+}
+%endif

>diff -r 1b90f5e6e4cf instantbird/themes/jar.mn
>--- a/instantbird/themes/jar.mn	Thu May 26 19:41:11 2011 +0200
>+++ b/instantbird/themes/jar.mn	Tue May 31 08:44:49 2011 +0200
>@@ -107,7 +107,7 @@
> #endif
> #ifdef XP_WIN
> 	skin/classic/aero/instantbird/account.css
>-*	skin/classic/aero/instantbird/accounts.css
>+*	skin/classic/aero/instantbird/accounts-aero.css

This change isn't right. After the change, the line should be like this:
*	skin/classic/aero/instantbird/accounts.css	(accounts-aero.css)

Same comment for the other 3 -aero files of course.

Looks good otherwise, even though I haven't been able to test on Win7.

Comment 34

[Benedikt Pfeifer]

Attachment: Patch v3

*** Original post on bio 620 as attmnt 673 at 2011-05-31 16:21:00 UTC ***

Patrick, could you build with this patch applied to see if it works properly? Thanks!

Comment 35

[Benedikt Pfeifer]

Comment on attachment 8352414 [details] [diff] [review]
Complete Patch v2

*** Original change on bio 620 attmnt 671 at 2011-05-31 16:21:45 UTC was without comment, so any subsequent comment numbers will be shifted ***

Comment 36

[Florian Quèze [:florian]]

Comment on attachment 8352416 [details] [diff] [review]
Patch v3

*** Original change on bio 620 attmnt 673 at 2011-05-31 20:53:06 UTC ***

Looks good, r=me if clokep confirms this builds and works fine on Windows 7.

Comment 37

[Patrick Cloke [:clokep]]

Attachment: Screenshot of patch v3 (compiled on Win 7)

*** Original post on bio 620 as attmnt 677 at 2011-05-31 21:36:00 UTC was without comment, so any subsequent comment numbers will be shifted ***

Comment 38

[Florian Quèze [:florian]]

*** Original post on bio 620 at 2011-05-31 22:49:58 UTC ***

Comment on attachment 8352416 [details] [diff] [review] (bio-attmnt 673)
Patch v3

https://hg.instantbird.org/instantbird/rev/97a9f46c57db

Comment 39

[Quentin Raynaud]

Attachment: Legibility issue

*** Original post on bio 620 as attmnt 678 at 2011-06-01 09:46:00 UTC ***

On the contact list, we have a little issue : the menu titles are nearly impossible to read when the window has no focus. I suppose we should make those more black.

A good idea might be to reduce the transparency a little too (it might help everything to be a little more readable).

Comment 40

[Florian Quèze [:florian]]

*** Original post on bio 620 at 2011-06-01 22:59:35 UTC ***

The work tracked here has landed and the 3 known regressions/desired improvements have been filed as separate bugs blocking this one, so let's resolve this as FIXED!

Comment 41

[Patrick Cloke [:clokep]]

Attachment: Ibglasscontactlist.png

Mic's mockup from the wiki in comment 4.

Comment 42

[Patrick Cloke [:clokep]]

Attachment: IbGlassContactList2.png

Comment 43

[Patrick Cloke [:clokep]]

Attachment: IbGlassContactList3.png

Comment 44

[Patrick Cloke [:clokep]]

Attachment: IbGlassContactList4.png

Comment 45

[Patrick Cloke [:clokep]]

Attachment: IbGlassContactList5.png

Comment 46

[Patrick Cloke [:clokep]]

Attachment: IbConvWindowGlass.png