Last Comment Bug 785951 - remove padding from social panels
: remove padding from social panels
Status: RESOLVED FIXED
[Fx17][qa-]
:
Product: Firefox
Classification: Client Software
Component: SocialAPI (show other bugs)
: Trunk
: All All
: -- normal (vote)
: Firefox 18
Assigned To: Shane Caraveo (:mixedpuppy)
:
:
Mentors:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2012-08-27 10:50 PDT by Shane Caraveo (:mixedpuppy)
Modified: 2012-10-17 16:37 PDT (History)
5 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---
fixed


Attachments
panel.png (23.58 KB, image/png)
2012-08-27 10:50 PDT, Shane Caraveo (:mixedpuppy)
no flags Details
no padding.patch (2.17 KB, patch)
2012-08-31 16:12 PDT, Shane Caraveo (:mixedpuppy)
dao+bmo: review-
Details | Diff | Splinter Review
no padding.patch (4.59 KB, patch)
2012-09-04 13:36 PDT, Shane Caraveo (:mixedpuppy)
no flags Details | Diff | Splinter Review
no padding.patch (4.66 KB, patch)
2012-09-06 16:14 PDT, Shane Caraveo (:mixedpuppy)
felipc: review+
dao+bmo: review+
gavin.sharp: approval‑mozilla‑aurora+
Details | Diff | Splinter Review

Description Shane Caraveo (:mixedpuppy) 2012-08-27 10:50:53 PDT
Created attachment 655644 [details]
panel.png

We need to consider if we want to customize the panel styling in any way, for both status panels and the flyout panels.  Right now we use the standard css for the panels.  IMO the primary issue is the margin.
Comment 1 Jared Wein [:jaws] (please needinfo? me) 2012-08-27 12:48:06 PDT
I don't think this is an issue. Providers can customize their styling to either match the background color, or place a border around their content.

I would vote for RESO-WONTFIX.
Comment 2 Jennifer Morrow [:Boriss] (UX) 2012-08-31 13:53:29 PDT
The default here should really be Firefox's styling for regular arrow notification panels, such as you'd see in permission notification and the Edit this Bookmark panel.  We get some benefits by keeping the panel consistent - it's a visual assurance to that the notification, while it contains social network information, is in fact from Firefox and can be trusted.  I'm not sure I see the need to customize it, especially in v1.

(In reply to Shane Caraveo (:mixedpuppy) from comment #0)
> IMO the primary issue is the margin.

Is your concern that the margin around the panel may be too large for a provider's content?
Comment 3 Shane Caraveo (:mixedpuppy) 2012-08-31 14:04:13 PDT
(In reply to Jennifer Morrow [:Boriss] (Firefox UX) from comment #2)

> (In reply to Shane Caraveo (:mixedpuppy) from comment #0)
> > IMO the primary issue is the margin.
> 
> Is your concern that the margin around the panel may be too large for a
> provider's content?

Your initial designs did not have a margin. If the wide margin is ok, this can be closed.
Comment 4 Jennifer Morrow [:Boriss] (UX) 2012-08-31 14:40:08 PDT
(In reply to Shane Caraveo (:mixedpuppy) from comment #3)
> (In reply to Jennifer Morrow [:Boriss] (Firefox UX) from comment #2)
> 
> > (In reply to Shane Caraveo (:mixedpuppy) from comment #0)
> > > IMO the primary issue is the margin.
> > 
> > Is your concern that the margin around the panel may be too large for a
> > provider's content?
> 
> Your initial designs did not have a margin. If the wide margin is ok, this
> can be closed.

I just double-checked, and you're very right.  Attachments like the first one on Bug 771826 do have a smaller margin than our standard panels - in fact it's just 10 pixels!  Thanks for noticing - let's indeed customize the styling to decrease the margin here.
Comment 5 Jennifer Morrow [:Boriss] (UX) 2012-08-31 16:08:56 PDT
Shane & I synced up on IRC.  While it's not strictly consistent with other arrow panel notifications, we're going to have essentially no margin on the arrow panel, but with a small buffer margin in the direction of the arrow (at the top for menu panels and at the right for overlays) so that the panel's content does not interfere with the arrow.

What we get with this approach is a wide range of freedom in rendering content.  Social networks can always add a margin on a panel, but they can't remove one.  The margin-less approach lets them decide which layout is best for their individual content.  For instance, if a network wants to create a panel that behaves more like a menu with list items, a margin would not look as good as it does in the Firefox static content panels (like permission dialogs) that it was originally designed for for.  This is the safest approach and one that gives social networks the flexibility their content will need.
Comment 6 Shane Caraveo (:mixedpuppy) 2012-08-31 16:12:57 PDT
Created attachment 657476 [details] [diff] [review]
no padding.patch

per conversations with Borris, we're going no-padding
Comment 7 Dão Gottwald [:dao] 2012-09-01 04:55:13 PDT
Comment on attachment 657476 [details] [diff] [review]
no padding.patch

>+#social-notification-panel .panel-arrowcontent {

Use the child selector.

>+#social-notification-box iframe {

This iframe should probably have an id or class.
Comment 8 Shane Caraveo (:mixedpuppy) 2012-09-04 13:36:49 PDT
Created attachment 658208 [details] [diff] [review]
no padding.patch
Comment 9 :Felipe Gomes (needinfo me!) 2012-09-06 15:48:44 PDT
Comment on attachment 658208 [details] [diff] [review]
no padding.patch

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

the border-radius value is different on each platform, and that number is also prone to go out of sync. I tested and if you set the border-radius to inherit on both the box#social-notification-box and the iframe, it should work
Comment 10 Shane Caraveo (:mixedpuppy) 2012-09-06 16:14:52 PDT
Created attachment 659035 [details] [diff] [review]
no padding.patch
Comment 11 :Felipe Gomes (needinfo me!) 2012-09-07 04:23:09 PDT
https://hg.mozilla.org/integration/mozilla-inbound/rev/e0b1ba698e11
Comment 12 Shane Caraveo (:mixedpuppy) 2012-09-07 09:29:51 PDT
Comment on attachment 659035 [details] [diff] [review]
no padding.patch

[Approval Request Comment]
correct styling for panels in social
Comment 13 Ryan VanderMeulen [:RyanVM] 2012-09-07 16:52:15 PDT
https://hg.mozilla.org/mozilla-central/rev/e0b1ba698e11
Comment 14 :Gavin Sharp [email: gavin@gavinsharp.com] 2012-09-25 11:40:23 PDT
https://hg.mozilla.org/releases/mozilla-aurora/rev/11477e0712a0
Comment 15 Anthony Hughes (:ashughes) [GFX][QA][Mentor] 2012-10-17 16:37:54 PDT
Flagging [qa-] as I don't think this needs QA verification. Please correct me if I am wrong.

Note You need to log in before you can comment on or make changes to this bug.