Replicating Google Chrome Browser Actions popup Effect in a Firefox Extension

Question

Chrome Browser Actions provide a really nice popup effect by default.

dead ImageShack image link removed

• Hovering over the toolbar icon provides a neat hover effect.

• Clicking the toolbar icon shows a nice animation that opens the popup html file.

• The popup is aligned with the button that is pressed.

• Clicking the toolbar icon again fades out the popup.

Any thoughts on how to approximate this effect with Firefox extensions? Has anybody successfully achieved something similar to this effect?

Thanks.

Gerhan

I've published a Jetpack module which brings the chrome.browserAction API and appearance to Firefox, see this answer for a demo. – Rooks

Answer 1

In case anybody is researching this and trying to find out the answer, ultimately using a panel within the toolbarpalette in the browser.xul file worked well for me.

Gerhan

I was trying to find an answer to this question. Compared to Chrome, Firefox extensions seem like a big pain. – Gablet

Thanks Chris. For those of us getting started with FF, can you show some demo code? Cheers. – Dickey

Answer 2

For everyone who is just starting with your first Firefox extension like I did here is an example code:

yourextname\chrome\content\browser.xul

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://yourextname/skin/toolbar.css" type="text/css"?>

<overlay id="yourextname_overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <popupset>
        <menupopup id="yourextname_menu_popup">
            <menuitem label="Website" oncommand="gBrowser.selectedTab = gBrowser.addTab('http://www.your-website.com/');" />
            <menuseparator />
            <menuitem label="Options" oncommand="window.open('chrome://yourextname/content/options.xul', 'Options', 'dialog,chrome,modal,titlebar,toolbar,centerscreen=yes');" />
        </menupopup>

        <panel id="yourextname_popup" noautohide="false" noautofocus="true">
            <label control="vvvname" value="Name:"/><textbox id="vvvname"/>
        </panel>
    </popupset>

    <toolbarpalette id="BrowserToolbarPalette">
        <toolbarbutton id="yourextname_toolbar_button" class="toolbarbutton-1" context="yourextname_menu_popup" oncommand="document.getElementById('yourextname_popup').openPopup(document.getElementById('yourextname_toolbar_button'), 'after_start', 0, 0, false, false);" label="button name" tooltiptext="tooltip" />
    </toolbarpalette>
</overlay>

---

yourextname\skin\toolbar.css
This will add icon to the toolbar button:

#yourextname_toolbar_button {
    list-style-image:url(chrome://yourextname/skin/icon_024.png);
}

toolbar[iconsize="small"] #yourextname_toolbar_button {
    list-style-image:url(chrome://yourextname/skin/icon_016.png);
}

---

yourextname\chrome.manifest

content yourextname chrome/content/
overlay chrome://browser/content/browser.xul chrome://yourextname/content/overlay.xul

skin    yourextname classic/1.0 skin/
style   chrome://global/content/customizeToolbar.xul chrome://yourextname/skin/toolbar.css

---

NOTE: Make sure you replace all "yourextname" strings with something unique, best with your extension name.

Kerby