Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Replicating Google Chrome Browser Actions popup Effect in a Firefox Extension

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.

like image 988
CPrimer Avatar asked Jan 16 '10 00:01

CPrimer


2 Answers

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.

like image 160
Igor Jerosimić Avatar answered Nov 16 '22 04:11

Igor Jerosimić


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.

like image 26
CPrimer Avatar answered Nov 16 '22 02:11

CPrimer