Sodele, mal was zum Testen für geneigte User, basierend auf dem Script von Mitleser , für die faulen Socken die alles in Einem brauchen.![]()
Die optionalen Submenu Abstände (margins) sind vorhanden aber noch auskommentiert, benutzen nach Wunsch; die Idee ist dass die hier im Thread erwähnten Anpassungen in einem Aufguss funktionieren sollten. ![]()
Bitte alles andere CSS oder Scripts von zuvor deaktivieren, sonst gibt's Überschneidungen.
JavaScript
//Popup Position Finder mit Popup Animationen CSS / RC 1
//popup_position.uc.js
(function () {
if (!window.gBrowser) return;
document.addEventListener("popupshowing", function (e) {
let popup = e.target;
if (popup.localName !== "menupopup") return;
let anchor = popup.anchorNode;
if (!anchor || typeof anchor.screenX === "undefined") return;
let flippedH = popup.screenX < anchor.screenX;
popup.classList.remove('flipper');
if (flippedH) {
popup.classList.add('flipper');
}
});
const sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);
const uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`
/*** --- Menu Popup Animation Anpassung Menuleiste, Lesezeichenmenu, Lesezeichenleiste --- ***/
menu > menupopup {
--trans_x: -100%;
}
menu > menupopup.flipper {
--trans_x: 100%;
}
/* --- Hauptmenus --- */
:is(
#file-menu,
#edit-menu,
#view-menu,
#history-menu,
#bookmarksMenu,
#tools-menu,
#helpMenu,
#AppMenuButton,
#bookmarks-menu-button) > menupopup {
opacity: 0 !important;
transform: translateY(-100%) !important;
}
:is(#file-menu,
#edit-menu,
#view-menu,
#history-menu,
#bookmarksMenu,
#tools-menu,
#helpMenu,
#AppMenuButton,
#bookmarks-menu-button)[open] > menupopup {
opacity: 1 !important;
transform: translateY(0) !important;
transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out !important;
}
/* --- Untermenus --- */
:is(#file-menu,
#edit-menu,
#view-menu,
#history-menu,
#bookmarksMenu,
#tools-menu,
#helpMenu,
#AppMenuButton,
#bookmarks-menu-button) menu > menupopup {
opacity: 0 !important;
transform: translateX(var(--trans_x)) !important;
/*margin-top: -7px !important;*/
/*margin-inline: 16px !important;*/
}
:is(#file-menu,
#edit-menu,
#view-menu,
#history-menu,
#bookmarksMenu,
#tools-menu,
#helpMenu,
#AppMenuButton,
#bookmarks-menu-button) menu[open] > menupopup {
opacity: 1 !important;
transform: translateX(0) !important;
transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out !important;
}
/* --- Lesezeichenleiste --- */
#PlacesToolbar .bookmark-item > menupopup {
opacity: 0 !important;
transform: translateY(-100%) !important;
}
#PlacesToolbar .bookmark-item[open] > menupopup {
opacity: 1 !important;
transform: translateY(0) !important;
transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out !important;
}
/* --- Lesezeichenleiste Untermenus --- */
#PlacesToolbar .bookmark-item menu > menupopup {
opacity: 0 !important;
transform: translateX(var(--trans_x)) !important;
/*margin-top: -7px !important;*/
/*margin-inline: 16px !important;*/
}
#PlacesToolbar .bookmark-item menu[open] > menupopup {
opacity: 1 !important;
transform: translateX(0) !important;
transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out !important;
}
`), null, null);
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
})();
Alles anzeigen