864894 - Badge for new-messages looks weird in background windows

Status: VERIFIED FIXED

(Firefox Graveyard :: SocialAPI, defect)

Description

[Justin Dolske [:Dolske]]

Attachment: Screenshot

Screenshot attached -- I've got 2 waiting Facebook notifications (red "2"). When the Firefox window is in the background, the badge is made semitransparent. This looks like of weird, because it allows the icon underneath to bleed through.

I think this actually just want to become a desaturated red. The icons achieve a desaturated effect via transparency, because the toolbar underneath is grey. That doesn't quite work here.

Comment 1

[Shane Caraveo (:mixedpuppy)]

Attachment: stylefix.png

The badge is at the same z-index as the image, yet overlays the image partially.  Somehow, opacity placed on the image is then also being placed on the badge.  When I change the z-index, the badge no longer inherits the opacity from the icon.  Problem is, it just doesn't look right.  I tried a number of things and finally gave up on using opacity and trying to make the button otherwise look inactive.

Comment 2

[Jennifer Morrow [:Boriss] (UX)]

Attachment: Mockup: Notification number less transparent, matching box stroke color

(In reply to Justin Dolske [:Dolske] from comment #0)
> I think this actually just want to become a desaturated red.

You're right - the reason for red is to imply "this is important!" and the reason for desaturating background windows is to imply "this isn't so important."  To do red and desaturation is pretty bizarro.  The desaturation is a good fix - but on attachment 741016 [details] the number of messages is too desaturated to be readable.  Let's instead reduce the saturation to match the decreased saturation on the outside of the button itself (on OSX, that's #c4c4c4).  That means the number would match the border of the button, and the frame of the notification would match the division color (it nearly does already).

Comment 3

[Shane Caraveo (:mixedpuppy)]

Attachment: stylefix.patch

fixed inactive state for badge

Comment 4

[Shane Caraveo (:mixedpuppy)]

Attachment: stylefix.png

image with fixed style for badge on inactive window

Comment 5

[:Felipe Gomes (needinfo for replies!)]

Comment on attachment 741437 [details] [diff] [review]
stylefix.patch

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

Looks good. I remember :-moz-window-inactive had problems with applying quick enough (i.e. the window frame would get its inactive state but the buttons and other things would lag behind updating to inactive). I don't see this happening to the toolbars buttons anymore so I'm guessing it's no longer a problem. Do you see anythin weird like that when the badge changes state?

Comment 6

[Shane Caraveo (:mixedpuppy)]

(In reply to :Felipe Gomes from comment #5)
> Comment on attachment 741437 [details] [diff] [review]
> stylefix.patch
> 
> Review of attachment 741437 [details] [diff] [review]:
> -----------------------------------------------------------------
> 
> Looks good. I remember :-moz-window-inactive had problems with applying
> quick enough (i.e. the window frame would get its inactive state but the
> buttons and other things would lag behind updating to inactive). I don't see
> this happening to the toolbars buttons anymore so I'm guessing it's no
> longer a problem. Do you see anythin weird like that when the badge changes
> state?

I hadn't noticed anything.  :-moz-window-inactive is being used for other toolbar styling as well.

Comment 7

[Shane Caraveo (:mixedpuppy)]

https://hg.mozilla.org/integration/mozilla-inbound/rev/db6188d1abe6

Comment 8

[Shane Caraveo (:mixedpuppy)]

Comment on attachment 741437 [details] [diff] [review]
stylefix.patch

[Approval Request Comment]
Bug caused by (feature/regressing bug #): 862567
User impact if declined: ugly styling of badge on inactive windows
Testing completed (on m-c, etc.): manually on m-c
Risk to taking this patch (and alternatives if risky): low
String or IDL/UUID changes made by this patch: none

Comment 9

[Alex Keybl [:akeybl]]

Uplift blocked on ui-review

Comment 10

[Shane Caraveo (:mixedpuppy)]

there we go.

Comment 11

[Ed Morley [:emorley]]

https://hg.mozilla.org/mozilla-central/rev/db6188d1abe6

Comment 12

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-aurora/rev/0e75423a1191

Comment 13

[u279076]

I'm currently blocked on verifying this fixed due to bug 866205.

Comment 14

[Shane Caraveo (:mixedpuppy)]

(In reply to Anthony Hughes, Mozilla QA (:ashughes) from comment #13)
> I'm currently blocked on verifying this fixed due to bug 866205.

You can verify this (more easily with fx23) using the demo provider at 

http://mixedpuppy.github.io/socialapi-demo/

Comment 15

[u279076]

Verified fixed in Firefox 23.0a1 and 22.0a2 2013-05-03 using the demo provider.