Firefox Extension Addon SDK combine multiple 'Action Buttons'

Question

I want to combine two 'Action Buttons' into one, the same way Firefox currently does with their Bookmarks addon, notice it is treated as one button in the 'Customize...' options.

Here is a screenshot of of the entire button on the navBar.

Here is a screenshot of the button 'Bookmarks' in the 'Customize' gui.

I have reviewed the SDK documentation carefully and there is no explicit way of doing this. It seems that this will require manipulation of the sdk/ui library itself. I appreciate any information or insight that leads me to a solution for this problem. Thank you.

Click here for action button api reference.

Answer 1

I was hesitant to answer this at first, but as there is nobody else apparently with a better answer, here is my "non-answer" answer now:

The ActionButton API does not support this at this time.

But all is not lost. You can implement this directly using the new CustomizableUI APIs plus a bit of XUL and CSS, but this is uncharted territory in general. Here be dragons; you have been warned.

If you look into the sources for the default buttons you'll find that there are different ways used to implement buttons like this in general:

• The Bookmark button is essentially a "normal" <toolbarbutton type="menu-button"> with some custom styles for .toolbarbutton-menubutton-dropmarker (box holding the drop down marker) and/or .dropmarker-icon (the <image> in .toolbarbutton-menubutton-dropmarker holding the actual drop down icon). When the button is on a toolbar, the dropdown marker image will be set to that "list" icon instead of the default down-arrow icon, while when in the palette or "hamburger" menu, the whole thing will be hidden. Of course, there is also some additional code that will fixup the default action of the button and/or drop-down marker.
• The Zoom controls on the other hand seem to be actually three-buttons in a special container again with some custom styles in what appears to be re-usable classes mostly (set via updateCombinedWidgetStyle). See CustomizeableWidgets e.g. on MXR.

I'd suggest you read up on how to use CustomizableUI, and of course read the code and CSS rules of the built-in widgets. Poking the Chrome Window DOM with the DOM Inspector add-on also may help, e.g. to figure out faster which CSS rules are at play and where they come from ;) Also the actual file history/changesets might be helpful.

Also, it might be a good idea to ask the SDK team to support such combined buttons in the ActionButton SDK (or create a patch for that yourself ;)