How to create a button with dropdown effect using xul?

1
votes

I have to create an extension for firefox which has a dropdown menu . The look of the button is similar to firebug.Here is the code:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://sendtoie/skin/overlay.css" type="text/css"?>
<!DOCTYPE overlay SYSTEM "chrome://sendtoie/locale/sendtoie.dtd">
<overlay id="sendtoie-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="overlay.js"/>


<toolbarpalette id="BrowserToolbarPalette">
<menulist id="sendtoie-toolbar-button">
<menupopup>
<menuitem label="check"  oncommand="ButtonCommand();"/>
<menuitem label="list1"  oncommand="com2();" />
</menupopup>
</menulist>
</toolbarpalette>

</overlay>

This code create a dropdown menu with a text and icon, but when I right click on the firefox toolbar->go to Customize -> Select "Only icons" in "Show"option, the text "check" remains and also I cannot drag this extension to the "Customize" drop box. How can I get a behaviour similar to Firebug extension?

1
firefoxfirefox-addonxul

1 Answers

1
votes

A toolbar button should always be a <toolbarbutton>, see https://developer.mozilla.org/en/XUL/toolbarbutton for documentation on it. You can use type="menu" or type="menu-button" to show a drop-down menu:

<toolbarbutton id="sendtoie-toolbar-button" type="menu" label="My button">
<menupopup>
<menuitem label="check"  oncommand="ButtonCommand();"/>
<menuitem label="list1"  oncommand="com2();" />
</menupopup>
</toolbarbutton>