8

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 what the button looks like on the navBar

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

Here is what the button looks like in the customization panel (Bookmarks)

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.

brianarpie
  • 344
  • 3
  • 8
  • 1
    I would think try setting `type="menu-button"` and then styling the `dropmarker` with an image. +1 to help you get to 10 so you can add pics – Noitidart Jun 14 '14 at 01:08
  • Perhaps you want a `frame` instead of an `ActionButton`, see https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_frame – Lori Jun 15 '14 at 09:05
  • 1
    User Noitidart is right. Check out code on [this page](http://stackoverflow.com/questions/22192379/link-add-on-sdk-panel-to-toolbar-button) for context. A frame, as suggested by Lori will take up a whole new row. – willlma Jun 15 '14 at 22:07
  • @arpie If the above helped you find an solution, feel free to post your code as an answer. This is definitely a question that's crossed a few minds since FF29's arrival. – willlma Jun 16 '14 at 19:11
  • @arpie Though my comment won't help you when it comes to making a single-icon button in the dropdown menu, I've found the [DOM inpector extension](https://addons.mozilla.org/en-US/firefox/addon/6622) ([docs](https://developer.mozilla.org/en-US/docs/DOM_Inspector)) very helpful when it comes to replicating behavior found in the FF UI. – willlma Jun 16 '14 at 19:17

1 Answers1

2

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 ;)

nmaier
  • 32,336
  • 5
  • 63
  • 78