Right now the widgets have an static margin of: margin: 1px 2px 1px 2px; Then the elements don't show properly vertically-aligned, at least not in OSX nor Linux. There's more space below the widget than above it. I attach an screenshot from OSX

Remove our styling, and instead use Firefox's styles for toolbarbutton. This resolves vertical alignment, as well as the problem noted on my blog [1] where moving Jetpack widgets to the tab bar makes that bar shorter (happens to add-on bar too). Confirmed this solves both of the above problems with image widgets as well as web content.

[1] https://autonome.wordpress.com/2010/12/04/firefox-plugins-and-jetpack-widgets/#comment-844

In OSX still looks bad, not to say worse... http://img138.imageshack.us/img138/3713/screenshot20101205at330.png

Comment on attachment 495374 [details] [diff] [review] v1 - use moz default styling It looks worse for me too, as the widgets acquire a button-like border on Mac and Windows, whereas on Linux too much padding is added above and below them. The standard theming might be ok for simple clickable widgets whose content is an image, but it doesn't work for dynamic widgets and those that are non-clickable (or whose content handles its own clicks, not to mention mouseovers and mouseouts). We're better off defining a consistent padding around the widgets and letting them determine their appearance by styling their content.

Comment on attachment 495374 [details] [diff] [review] v1 - use moz default styling Erm, I meant to actually r- this due to the funky appearance it creates.

(In reply to comment #4) > It looks worse for me too, as the widgets acquire a button-like border on Mac > and Windows, whereas on Linux too much padding is added above and below them. The button-styling is being removed in the default Firefox css in Firefox 4 (but 598920). Wrt to the padding on Linux: In my tests, after applying the default styling, our widgets are perfectly centered in both the add-on bar and other toolbars, while also no longer affecting their height. Can you give an example? Maybe the icon is being scaled incorrectly? > The standard theming might be ok for simple clickable widgets whose content is > an image, but it doesn't work for dynamic widgets and those that are > non-clickable (or whose content handles its own clicks, not to mention > mouseovers and mouseouts). How does it not work? Can you explain further? In my testing it's working correctly for these kinds of widgets. > We're better off defining a consistent padding around the widgets and letting > them determine their appearance by styling their content. I disagree. It's a terrible challenge, as this bug and the current widget css shows. Instead of putting that challenge on the shoulders of developers, we need to have widgets look as well as can be by default, while allowing developers the ability to change the default. The default toolbarbutton styling in Firefox 4 is designed to do this. If there's a problem with it, we need to fix it instead of working around it.

(In reply to comment #6) > > We're better off defining a consistent padding around the widgets and letting > > them determine their appearance by styling their content. > > I disagree. It's a terrible challenge, as this bug and the current widget css > shows. Instead of putting that challenge on the shoulders of developers, we > need to have widgets look as well as can be by default, while allowing > developers the ability to change the default. Clarification, because it almost sounds like we're saying the same thing here :) If Jetpack widgets are not centered correctly without styling changes in the widget, then we're either not using the right default classes, or there's a Firefox bug, or we're not constructing our toolbarbutton/items correctly. We shouldn't have to position our items manually. Doing so leads to a trifecta of (re)positioning: default, then us, then add-on = mess.

Also, the reason I took out the TODO about css styling of the widget is because the widgets shouldn't need to style their XUL appearance, only the css that's applied to their content.

There are a bunch of change since landed on trunk for default toolbar styling. We need to see if this is still a valid bug.

Tested on OSX and Ubuntu with the testcase from Bug 627889 and seems to be fixed.

So the status of this bug is that some widgets are correctly aligned verticaly. Cases that still doesn't work are: - widgets with only simple text in content (for ex: {content: "10"}) - custom html content smaller than 16px (for ex: {content: '<div style="width:10px; height: 10px; background: black;"></div>'}) But images and contents bigger than 16px seems to be fixed by resolution of bug 626728

(automatic reprioritization of 1.0 bugs)

(Pushing all open bugs to the --- milestone for the new triage system)

still a problem in latest sdk.

When Australis lands widget will be deprecated so we won't be working on this.