Копирование всплывающего эффекта действий браузера Google Chrome в расширении Firefox
-
21-09-2019 - |
Вопрос
Действия браузера Chrome по умолчанию обеспечивают действительно приятный всплывающий эффект.
удалена мертвая ссылка на изображение ImageShack
Наведение курсора мыши на значок панели инструментов обеспечивает аккуратный эффект наведения курсора мыши.
Щелчок по значку на панели инструментов показывает приятную анимацию, которая открывает всплывающий html-файл.
Всплывающее окно выравнивается по нажатию кнопки.
Повторное нажатие на значок панели инструментов приводит к исчезновению всплывающего окна.
Есть какие-нибудь мысли о том, как приблизить этот эффект с помощью расширений Firefox?Кто-нибудь успешно добился чего-то подобного этому эффекту?
Спасибо.
Решение 2
На случай, если кто-нибудь исследует это и пытается найти ответ, в конечном счете, использование панели в toolbarpalette в файле browser.xul хорошо сработало для меня.
Другие советы
Для всех, кто только начинает работать с вашим первым расширением Firefox, как это сделал я, вот пример кода:
ваше текстовое имя\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>
ваше текстовое имя\скин\панель инструментов.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);
}
ваше текстовое имя\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" на что-то уникальное, лучше всего на имя вашего расширения.