Replican acciones navegador Google Chrome emergente EFFECT en una extensión de Firefox

Question

Chrome acciones de navegador proporcionan un muy buen efecto emergente por defecto.

muertos enlace de imagen ImageShack eliminado

• Al pasar por encima del icono de la barra proporciona un efecto de vuelo estacionario ordenada.

• Al hacer clic en el icono de la barra de herramientas muestra una bonita animación que abre el archivo HTML emergente.

• La ventana emergente está alineado con el botón que se presiona.

• Al hacer clic en el icono de la barra de herramientas de nuevo se desvanece la ventana emergente.

¿Alguna idea sobre cómo aproximarse a este efecto con las extensiones de Firefox? nadie ha logrado con éxito algo similar a este efecto?

Gracias.

Answer 1

En caso de que alguien está investigando este y tratando de encontrar la respuesta, en última instancia, el uso de un panel dentro de la toolbarpalette en el archivo browser.xul funcionado bien para mí.

Answer 2

Para todo el mundo que está empezando con su primera extensión para Firefox como lo hice aquí es un código de ejemplo:

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 \ la piel \ toolbar.css
Esto añadirá icono a la barra de herramientas:

#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

---

NOTA: Asegúrese de reemplazar todas las cadenas "yourextname" con algo único, el mejor con su nombre de extensión

.