802332 - osx panel arrow color looks bad

Status: RESOLVED WONTFIX

(Firefox Graveyard :: SocialAPI, defect)

Description

[Shane Caraveo (:mixedpuppy)]

Attachment: flyoutpanel.png

I thought we had a bug around somewhere on this, but I cannot find it, so here is a new one...

Windows at least has a border area, but there is no margin or border on osx (and maybe linux).  We cannot expect providers to match their design to the (possibly changing at times) color of our arrow.

See attached images

Comment 1

[Shane Caraveo (:mixedpuppy)]

Attachment: statuspanel.png

Comment 3

[Shane Caraveo (:mixedpuppy)]

Attachment: toppadding.png

Comment 4

[Shane Caraveo (:mixedpuppy)]

Attachment: flyoutpadding.png

Comment 5

[Shane Caraveo (:mixedpuppy)]

Attachment: smallpadding.png

Comment 6

[Shane Caraveo (:mixedpuppy)]

I've added images for the various types of padding that we could do to alleviate the arrow issue on osx.

In flyoutpadding.png, attachment 673012 [details], please ignore the weird rounded look at the top and bottom of the padding, it was just a quick hack and not intentional.  It would be a straight line like the image in toppadding.png in attachment 673011 [details].

My preference is really for smallpadding.png in attachment 673014 [details]

Comment 7

[Jared Wein [:jaws] (please needinfo? me)]

I prefer the toppadding and flyoutpadding. I'm not sure how you can get a hard line like you are proposing though, that's just the way that varying border-width works.

Comment 8

[Justin Dolske [:Dolske]]

Random thought: we could also introduce an arrowpanel variant that is identical cross-platform (eg white arrow + background). [Hmm, is that what you're proposing? The screenshots seem to have a white arrow, whereas I have a grey one in Nightly.]

Padding sound like the right approach to problems like like http://cl.ly/image/0q2m1K0v3N3B (where content images are ill-placed by the arrow, making it seem detached/floating). Wonder if this should be implemented in a way that allows providers to override it (ala default HTML document styles)... Could be good for smart designs, but otoh many will get it wrong. :)

Comment 9

[Jennifer Morrow [:Boriss] (UX)]

Thanks for the explorations, Shane.  While Flyoutpadding is a cool idea, I fear that with similar overlapping curved rectangles, the field will look more like a rendering error than a miscolored arrow.

Jared and I talked about some other options, such as hard-coding 1-pixel lines in progressively lighter to appear like a gradient to the content area ( like this http://cl.ly/image/2j0x032t3w0W/Screen%20Shot%202012-10-19%20at%203.50.27%20PM.png ).  However, Jared tells me that this would also misalign content close to the edge (like this http://f.cl.ly/items/1P3f2p3E3X44201z2J2X/Screen%20Shot%202012-10-19%20at%203.52.35%20PM.png ) by as many lines.

Dolske's idea of padding is good, but can we do it without introducing a border on all sides?  If we can, perhaps it's a good temporary solution just for Fiesta.  Sure, not all Fiesta content is white (like grey backgrounds for photos), and this approach wouldn't extend well to other social networks, but for the short-term maybe it's the best way.

Comment 10

[Shane Caraveo (:mixedpuppy)]

@Boriss, we never resolved this really, would be good to do still.  Thoughts?