Closed Bug 954056 Opened 8 years ago Closed 8 years ago

Use Glass on Aero (Windows Vista and 7)

Categories

(Instantbird :: Other, enhancement)

x86
Windows Vista
enhancement
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: benediktp, Assigned: benediktp)

References

Details

(Whiteboard: [0.3-wanted-beta])

Attachments

(10 files, 11 obsolete files)

29.79 KB, image/png
Details
8.81 KB, patch
florian
: review+
Details | Diff | Splinter Review
299.85 KB, image/png
Details
38.93 KB, image/jpeg
Details
27.90 KB, image/png
Details
38.78 KB, image/png
Details
34.29 KB, image/png
Details
50.04 KB, image/png
Details
53.91 KB, image/png
Details
52.23 KB, image/png
Details
*** 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
Whiteboard: [0.3-nice-to-have]
Attached image Glass look on Buddy list (obsolete) —
*** 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;
}
*** 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.
*** 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..
Depends on: 954040
Depends on: 954205
*** 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
*** 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 ***
Attached image Account Manager - Glass - Screenshot (obsolete) —
*** 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 ***
*** 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 ***
Attached image Conversation Window - Glass - Screenshot (obsolete) —
*** 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 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 ***
Attachment #8352381 - Attachment description: Account Manager - Glass - Screenshot → Conversation Window - Glass - Screenshot
Attached patch Contact List - Glass - Patch v1 (obsolete) — Splinter Review
*** 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 ***
Attached image Contact List - Glass - Screenshot (obsolete) —
*** 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 ***
*** 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).
Summary: Maybe Instantbird could look nicer using Glass on Windows Vista and 7 → Use Glass on Aero (Windows Vista and 7)
*** 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 !
Whiteboard: [0.3-nice-to-have] → [0.3-wanted-beta]
*** 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 ***
*** 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 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 ***
Attachment #8352378 - Attachment is obsolete: true
Assignee: nobody → benediktp
Status: NEW → ASSIGNED
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 ***
Attachment #8352379 - Attachment is obsolete: true
*** 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.
Attached patch Complete Patch v1 (obsolete) — Splinter Review
*** 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.
Attachment #8352404 - Flags: review?(florian)
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 ***
Attachment #8352311 - Attachment is obsolete: true
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 ***
Attachment #8352380 - Attachment is obsolete: true
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 ***
Attachment #8352381 - Attachment is obsolete: true
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 ***
Attachment #8352382 - Attachment is obsolete: true
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 ***
Attachment #8352383 - Attachment is obsolete: true
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 ***
Attachment #8352392 - Attachment is obsolete: true
*** 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.
*** 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 <benediktp@ymail.com>

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! :)
*** 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).
Attached patch Complete Patch v2 (obsolete) — Splinter Review
*** Original post on bio 620 as attmnt 671 at 2011-05-31 06:50:00 UTC ***

New patch changed according to review comments.
Attachment #8352414 - Flags: review?(florian)
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 ***
Attachment #8352404 - Attachment is obsolete: true
Attachment #8352404 - Flags: review?(florian)
*** 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 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.
Attachment #8352415 - Attachment is obsolete: true
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.
Attachment #8352414 - Flags: review?(florian) → review-
Attached patch Patch v3Splinter Review
*** 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!
Attachment #8352416 - Flags: review?(florian)
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 ***
Attachment #8352414 - Attachment is obsolete: true
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.
Attachment #8352416 - Flags: review?(florian) → review+
*** 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 ***
*** 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
Attached image 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).
Blocks: 954252
Blocks: 954253
Blocks: 954254
*** 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!
Status: ASSIGNED → RESOLVED
Closed: 8 years ago
Resolution: --- → FIXED
Target Milestone: --- → 0.3b1
Attached image Ibglasscontactlist.png
Mic's mockup from the wiki in comment 4.
You need to log in before you can comment on or make changes to this bug.