Репликация эффекта действия браузера Google Chrome во всплывающем окне Firefox

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

мертвая ссылка ImageShack удалена

Наведение курсора на значок панели инструментов обеспечивает аккуратный эффект наведения.
Щелчок на значке на панели инструментов показывает приятную анимацию, которая открывает всплывающий html файл.
Всплывающее окно выровнено с нажатой кнопкой.
При нажатии на значок панели инструментов снова исчезает всплывающее окно.

Любые мысли о том, как аппроксимировать этот эффект с расширениями Firefox? Кто-нибудь успешно достиг чего-то подобного этому эффекту?

Спасибо.

Ответ 1

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

Ответ 2

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

yourextname\хром\Содержание\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\кожа\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" чем-то уникальным, лучше всего с вашим именем расширения.