Репликация всплывающего эффекта «Действия браузера Google Chrome» в расширении Firefox - PullRequest
Новая
       25

Репликация всплывающего эффекта «Действия браузера Google Chrome» в расширении Firefox

11 голосов
/ 16 января 2010

Действия браузера Chrome обеспечивают действительно хороший всплывающий эффект по умолчанию.

мертвая ссылка на изображение ImageShack удалена

  • Наведите указатель мыши на значок на панели инструментов, чтобы получить эффект аккуратного наведения.

  • Если щелкнуть значок панели инструментов, отобразится приятная анимация, открывающая всплывающий HTML-файл.

  • Всплывающее окно выравнивается по нажатой кнопке.

  • Если снова щелкнуть значок на панели инструментов, всплывающее окно исчезнет.

Есть мысли о том, как приблизить этот эффект с помощью расширений Firefox? Кто-нибудь успешно добился чего-то похожего на этот эффект?

Спасибо.

Ответы [ 2 ]

7 голосов
/ 25 мая 2011

Для всех, кто только начинает работать с вашим первым расширением Firefox, как я, вот пример кода:

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 Это добавит значок к кнопке панели инструментов: 

#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

ПРИМЕЧАНИЕ. Обязательно заменитевсе строки "yourextname" с чем-то уникальным, лучше всего с вашим именем расширения.

4 голосов
/ 27 января 2010

В случае, если кто-то исследует это и пытается найти ответ, в конечном счете, использование панели внутри toolbarpalette в файле browser.xul хорошо для меня.

...