Closed Bug 864894 Opened 7 years ago Closed 7 years ago

Badge for new-messages looks weird in background windows

Categories

(Firefox Graveyard :: SocialAPI, defect)

x86
macOS
defect
Not set

Tracking

(firefox22 verified, firefox23 verified)

VERIFIED FIXED
Firefox 23
Tracking Status
firefox22 --- verified
firefox23 --- verified

People

(Reporter: Dolske, Assigned: mixedpuppy)

References

Details

Attachments

(4 files, 1 obsolete file)

Attached image 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.
Blocks: 862567
Attached image stylefix.png (obsolete) —
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.
(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).
Attached patch stylefix.patchSplinter Review
fixed inactive state for badge
Assignee: nobody → mixedpuppy
Attachment #741437 - Flags: review?(jaws)
Attached image stylefix.png
image with fixed style for badge on inactive window
Attachment #741016 - Attachment is obsolete: true
Attachment #741439 - Flags: ui-review?(jboriss)
Attachment #741437 - Flags: review?(jaws) → review?(felipc)
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?
Attachment #741437 - Flags: review?(felipc) → review+
(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 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
Attachment #741437 - Flags: approval-mozilla-aurora?
Uplift blocked on ui-review
Flags: needinfo?(jboriss)
Attachment #741439 - Flags: ui-review?(jboriss) → ui-review+
there we go.
Flags: needinfo?(jboriss)
https://hg.mozilla.org/mozilla-central/rev/db6188d1abe6
Status: NEW → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 23
Attachment #741437 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
I'm currently blocked on verifying this fixed due to bug 866205.
(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/
Verified fixed in Firefox 23.0a1 and 22.0a2 2013-05-03 using the demo provider.
Status: RESOLVED → VERIFIED
Product: Firefox → Firefox Graveyard
You need to log in before you can comment on or make changes to this bug.