Replica azioni del browser Google Chrome comparsa EFFECT in un'estensione per Firefox

StackOverflow https://stackoverflow.com/questions/2075697

Domanda

Chrome Browser azioni forniscono davvero un bel effetto pop-up per impostazione predefinita.

morto immagine link ImageShack rimosso

  • passa il mouse sopra l'icona della barra degli strumenti fornisce un effetto hover ordinata.

  • Facendo clic sull'icona barra degli strumenti mostra una bella animazione che apre il file HTML a comparsa.

  • Il popup è allineato con il pulsante premuto.

  • Cliccando nuovamente l'icona della barra degli strumenti svanisce il popup.

Qualche idea su come approssimare questo effetto con le estensioni di Firefox? Qualcuno ha realizzato con successo qualcosa di simile a questo effetto?

Grazie.

È stato utile?

Soluzione 2

Nel caso in cui qualcuno si sta occupando e cercando di scoprire la risposta, in ultima analisi, utilizzando un pannello all'interno del toolbarpalette nel file browser.xul funzionato bene per me.

Altri suggerimenti

Per tutti coloro che sono appena agli inizi con la prima estensione di Firefox come ho fatto qui è un codice di esempio:

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 \ pelle \ toolbar.css
Questo aggiungerà icona nella barra degli strumenti: 

#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: Assicurati di sostituire tutte le stringhe "yourextname" con qualcosa di unico, meglio con il tuo nome estensione

.
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top