Script funktioniert
Prima, danke für die Rückmeldung! 
Ich habe den Header mal genauer geschrieben, falls du das hochladen möchtest; nur den Link zum Posting #51 schafft mein Mac gerade nicht sauber, wohl zu viele Leer/Sonderzeichen, falls du den noch hinzufügen möchtest. 
Die ganze Arbeit
Danke!
Aber ich seh das ja als Mannschaftssport, und deine Beiträge und die wichtige Korrektur von Mitleser für mein kleines JS haben das Ganze um die Kurve gebracht.
Hoffe das Ganze funktioniert auch noch nach weiterem Benutzen oder Testen, Popups sind etwas temperamentvoll und sehr komplex geregelt in Fx, ist halt schon eine ernsthafte App.
Den CSS Code könnte man sicher mit Nesting und parent IDs deutlich straffen, aber lieber einfach anfangen. 
Coole Sache, funktioniert richtig gut und ich bin Stolz darauf eine faule Socke zu sein...
Danke für's Testen!
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.
//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);
})();Beispiel Lesezeichenpopups:
Läuft! Das will-change habe ich auskommentiert; ohne läuft es auf meinem Recher einfach besser. Nette Spielerei, mal sehn' wie lange es hält.
Danke für's Testen, und das Einpflegen in ein Script.
will-change scheint tatsächlich unnötig zu sein, irgendwann in meinem Testverlauf hat das mal einen Unterschied gemacht.
Die Positionierung funktioniert ab dem zweiten Öffnen eines Popups.
Moin, das könnte an popupshown statt popupshowing liegen.
Unglaublich, das scheint zu klappen, Danke!!! 
Ich habe mir den Wolf gesucht, und es ist so einfach, wie findest du nur immer diese Lösungen?
Also, das angepasste Script, für jeden der/die es testen möchte:
//popup position finder
//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');
}
});
})();Im CSS wird Folgendes hinzugefügt, wie in #37 schon benutzt:
menu > menupopup {
--trans_x: -100%;
}
menu > menupopup.flipper {
--trans_x: 100%;
} X:
Die Einträge für transform: translateX(0) !important; bleiben genau so;
Die Einträge für transform: translateX(-100%) !important; werden geändert zu transform: translateX(var(--trans_x)) !important; .
Y:
transform: translateY(... wird nicht verändert.
Beispiel Lesezeichenpopups:
menu > menupopup {
--trans_x: -100%;
}
menu > menupopup.flipper {
--trans_x: 100%;
}
#PlacesToolbar .bookmark-item > menupopup {
will-change: transform, opacity !important;
opacity: 0 !important;
transform: translateY(-100%) !important;
}
#PlacesToolbar .bookmark-item[open] > menupopup {
opacity: 1 !important;
transform: translateY(0) !important;
transition: transform 0.9s ease, opacity 1.9s ease !important;
}
#PlacesToolbar .bookmark-item menu > menupopup {
will-change: transform, opacity !important;
opacity: 0 !important;
/* transform: translateX(-100%) !important; */
transform: translateX(var(--trans_x)) !important;
}
#PlacesToolbar .bookmark-item menu[open] > menupopup {
opacity: 1 !important;
transform: translateX(0) !important;
transition: transform 0.9s ease, opacity 1.9s ease !important;
}Hat etwas gedauert, denke wir können das noch hier reinquetschen?
Damit werden alle Lesezeichen Menus von oben nach unten animiert; der zweite, auskommentierte Teil wäre dann eine Änderung nur für Submenus, und links nach rechts öffnen, Zeit-Werte anpassen nach Belieben.
translateX(100%) wäre dann wieder rechts nach links.
Könnte klappen:
#PlacesToolbar .bookmark-item > menupopup {
will-change: transform, opacity !important;
opacity: 0 !important;
transform: translateY(-100%) !important;
}
#PlacesToolbar .bookmark-item[open] > menupopup {
opacity: 1 !important;
transform: translateY(0) !important;
transition: transform 0.9s ease, opacity 1.9s ease !important;
}
/*
#PlacesToolbar .bookmark-item menu > menupopup {
will-change: transform, opacity !important;
opacity: 0 !important;
transform: translateX(-100%) !important;
}
#PlacesToolbar .bookmark-item menu[open] > menupopup {
opacity: 1 !important;
transform: translateX(0) !important;
transition: transform 0.9s ease, opacity 1.9s ease !important;
}
*/Für die Submenus könnte man stattdessen auch eine andere horizontale Transformation benutzen:
#PlacesToolbar .bookmark-item menu > menupopup {
will-change: transform, opacity !important;
opacity: 0 !important;
transform: scaleX(0) !important;
}
#PlacesToolbar .bookmark-item menu[open] > menupopup {
opacity: 1 !important;
transform: scaleX(100%) !important;
transition: transform 0.9s ease, opacity 1.9s ease !important;
}
der hatte
Immer gerne, prima das es klappt soweit!
So geht es!
Schweet!
Komplett könnte sowas klappen; weitere IDs wie für app menu oder wie das Teufelszeug heisst in Windows könnte man einpflegen.
Das lässt sich bestimmt auch weiter kürzen, aber wie erwähnt ohne Zugriff auf die Menüleiste am Mac ist das das Ende hier.
Bitte mal kurz antesten.
/* --- Flexible Popup Position ??? fuer zusaetzliches Javascript --- */
menu > menupopup {
--trans_x: -100%;
}
menu > menupopup.flipper {
--trans_x: 100%;
}
/* --- Hauptmenu --- */
:is(
#file-menu,
#edit-menu,
#view-menu ,
#history-menu,
#bookmarksMenu,
#tools-menu,
#helpMenu) > menupopup {
will-change: transform, opacity !important;
opacity: 0 !important;
transform: translateY(-100%) !important;
}
:is(#file-menu,
#edit-menu,
#view-menu ,
#history-menu,
#bookmarksMenu,
#tools-menu,
#helpMenu)[open] > menupopup {
opacity: 1 !important;
transform: translateY(0) !important;
transition: transform 0.8s ease, opacity 0.3s ease !important;
}
/* --- Untermenus --- */
:is(#file-menu,
#edit-menu,
#view-menu ,
#history-menu,
#bookmarksMenu,
#tools-menu,
#helpMenu) menu > menupopup {
will-change: transform, opacity !important;
opacity: 0 !important;
transform: translateX(var(--trans_x)) !important;
}
:is(#file-menu,
#edit-menu,
#view-menu ,
#history-menu,
#bookmarksMenu,
#tools-menu,
#helpMenu) menu[open] > menupopup {
opacity: 1 !important;
transform: translateX(0) !important;
transition: transform 0.8s ease, opacity 0.3s ease !important;
}Aber, und evtl. können die Javascript Leute hier was dazu beitragen:
Popups öffnen sich je nach Position im Monitor/Browserfenster mal rechts, mal links vom übergeordneten Popup Fenster, je nachdem wo Platz ist.
Mit dem obigen CSS funktioniert die horizontale Animation nur von links nach rechts, idealerweise würde die Animation die Richtung wechseln, basiert auf der horizontalen Position des Popups.
Was nicht so einfach ist, weil nur das Hauptpopup eine via CSS zugänglich definierte Position hat; s. hier oder hier.
Der CSS Code oben hat eine Provision für den Fall, basierend auf diesem sehr groben JS Script (ohne das Script funktioniert der CSS Code ganz normal).
Die Positionierung funktioniert manchmal, oft aber nicht.
Edit: Die Positionierung funktioniert ab dem zweiten Öffnen eines Popups.
Warnung: dieses JS ist modifiziertes AI, konnte sonst nix finden.
//popup position finder
//pop_position.uc.js
(function () {
if (!window.gBrowser) return;
document.addEventListener("popupshown", 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;
if (flippedH) {
popup.classList.add('flipper');
};
});
})();Probier mal #bookmarksMenu menupopup ==> #bookmarksMenu > menupopup
Also so:
/* Lesezeichen */
#bookmarksMenu > menupopup {
will-change: transform, opacity !important;
opacity: 0 !important;
transform: translateY(-100%) !important;
}
#bookmarksMenu[open] menupopup {
opacity: 1 !important;
transform: translateY(0) !important;
transition: transform 0.8s ease, opacity 0.3s ease !important;
}
/* ----------------------------------------------------------------------- */
#bookmarksMenu menu > menupopup {
will-change: transform, opacity !important;
opacity: 0 !important;
transform: translateX(-100%) !important;
}
#bookmarksMenu menu[open] > menupopup {
opacity: 1 !important;
transform: translateX(0) !important;
transition: transform 0.8s ease, opacity 0.3s ease !important;
}
/* ----------------------------------------------------------------------- */Bis auf Ansicht und die Lesezeichen haben die anderen Menüs keine solchen Untermenüs.
Chronik -> Kürzlich geschlossene Fenster/Tabs
Extras -> Browser-Werkzeuge
Mal auf das #bookmarksMenu warten; wenn das klappt mach ich einen Komplettvorschlag.
So ist es schon besser und dass die Untermenüs eben auch von links nach rechts aufscrollen.
Aber nur bei den Untermenus von #view-menu, ist das so gewollt?
Aaaaalso:
Mal nur für eines komplett, das alte CSS dafür erstmal entfernen; es wird nur die ID für das Hauptmenü Bearbeiten benutzt.
Die ersten beiden Codeblöcke sind für das erste Popup, was wir schon hatten, aber mit > ; die letzten beiden Codeblöcke sind für die Untermenüs.
#edit-menu > menupopup {
will-change: transform, opacity !important;
opacity: 0 !important;
transform: translateY(-100%) !important;
}
#edit-menu[open] > menupopup {
opacity: 1 !important;
transform: translateY(0) !important;
transition: transform 1.5s ease, opacity 1.5s ease !important;
}
#edit-menu menu > menupopup {
will-change: transform, opacity !important;
opacity: 0 !important;
transform: translateX(-100%) !important;
}
#edit-menu menu[open] > menupopup {
opacity: 1 !important;
transform: translateX(0) !important;
transition: transform 1.5s ease, opacity 1.5s ease !important;
} Werde noch einmal nach Horsmann's Anregung auf die Suche nach den richtigen Parametern der Selektoren gehen.
Mal schnell, wieder für's Lesezeichenmenü.
Wichtig das > zu setzen für den Hauptbutton (hier Zeile 1 + 7), um die erste Animation auf das Hauptpopup einzugrenzen; das solltest du dann für alle machen.
Allerdings öffnen sich die Popups immer von links nach rechts - was für die Menüleiste ok sein könnte - muss ich nochmal anschauen.
translateX(100%) würde dann von rechts nach links gehen.
#bookmarks-menu-button > menupopup {
will-change: transform, opacity !important;
opacity: 0 !important;
transform: translateY(-100%) !important;
}
#bookmarks-menu-button[open] > menupopup {
opacity: 1 !important;
transform: translateY(0) !important;
transition: transform 1.5s ease, opacity 1.5s ease !important;
}
#bookmarks-menu-button menu > menupopup {
will-change: transform, opacity !important;
opacity: 0 !important;
transform: translateX(-100%) !important;
}
#bookmarks-menu-button menu[open] > menupopup {
opacity: 1 !important;
transform: translateX(0) !important;
transition: transform 1.5s ease, opacity 1.5s ease !important;
} Hmm, sowas als Ansatz?
#bookmarks-menu-button wäre dann mit dem entsprechenden Menüleistenbutton zu ersetzen.
Weiter komm ich mit Raten aber nun nicht mehr.
#bookmarks-menu-button menupopup{
will-change: transform, opacity !important;
opacity: 0 !important;
transform: translateY(-100%) !important;
}
#bookmarks-menu-button[open] menupopup {
opacity: 1 !important;
transform: translateY(0) !important;
transition: transform 1.5s ease, opacity 1.5s ease !important;
}CSS#menu_HelpPopup { will-change: transform, opacity !important; opacity: 0 !important; transform: translateY(-100%) !important; } #menu_HelpPopup[animate="open"] { opacity: 1 !important; transform: translateY(0) !important; transition: transform 1.5s ease, opacity 1.5s ease !important; }Das Menü erscheint erst gar nicht!
So ist es auch bei allen anderen Menüs.
Dann schau evtl. mal in den Browserwerkzeugen - in html und CSS - nach anderen Attributen für open; evtl. [panelopen="true"], [panelopen], [open], [open="true"] oder so; irgendein Attribut dafür sollte es ja geben, [animate="open"] funktioniert offensichtlich nicht.
Das Attribut kann auch am übergeordneten Button hängen, etc..
Wie gesagt komm ich da leider nicht dran.
Also, es gibt doch eine Menüleiste, darin die Einträge,
Datei, Bearbeiten, Ansicht, Chronik, Lesezeichen, "Profile", Extras und Hilfe.
Wie von BrokenHeart besser erklärt - am Mac gibt es keine Zugriff via Firefox Manipulationen auf diese Menüleiste, die ist festgezimmert durch das macOS, meines Wissens nach.
Es gibt auch noch viele weitere Stylingelemente die OS abhängig sind; manche kann man austricksen, manche nicht.
Für deinen Zweck könntest du evtl. mal das Lesezeichenmenü Dingens antesten - wie ebenfalls von Brokenheart erläutert - und falls das was ist so etwas mit deinen menubar menus IDs testen =>
:is(#AMpopup,
#menu_FilePopup,
#menu_EditPopup,
#menu_viewPopup,
#historyMenuPopup,
#bookmarksMenuPopup,
#menu_ToolsPopup,
#menu_HelpPopup) {
will-change: transform, opacity !important;
opacity: 0 !important;
transform: translateY(-100%) !important;
}Etcetera für die weiteren Codeblöcke, falls es überhaupt funktioniert.
Für meinen Geschmack allerdings etwas zu viel Transparenz, ...
Für meinen Geschmack auch, aber es gibt 1001 Wege für Animation - und sogar das ist etwas anders geregelt im Mac Firefox.
Auf dem Mac ist das alles etwas anders, und an die Menüleiste komm ich nicht ran; aber ich hab mal was mit dem Lesezeichenmenü probiert, für das ganze Fenster:
#BMB_bookmarksPopup {
will-change: transform, opacity !important;
opacity: 0 !important;
transform: translateY(-100%) !important;
}
#BMB_bookmarksPopup[animate="open"] {
opacity: 1 !important;
transform: translateY(0) !important;
transition: transform 1.5s ease, opacity 1.5s ease !important;
}Ich weiss nicht was genau du vorhast, aber in deinem letzten Script von #7 scheinst du nur menuitem anzusprechen, es gibt da aber auch noch menu und wohl irgendwelche Separatoren in dem Fenster.
Also evtl. auch sowas:
#BMB_bookmarksPopup {
will-change: transform, opacity !important;
opacity: 0 !important;
transform: translateY(-100%) !important;
}
#BMB_bookmarksPopup[animate="open"] {
opacity: 1 !important;
transform: translateY(0) !important;
transition: transform 1.5s ease, opacity 1.5s ease !important;
}
#BMB_bookmarksPopup > :is(menuseparator, menuitem, menu) {
will-change: transform, opacity !important;
opacity: 0 !important;
transform: translateY(-100vh) !important;
}
#BMB_bookmarksPopup[animate="open"] > :is(menuseparator, menuitem, menu) {
opacity: 1 !important;
transform: translateY(0) !important;
transition-delay: 1.5s !important;
transition: transform 1.5s ease, opacity 2.5s ease-in !important;
}background-image: linear-gradient(#ddecab 1%, transparent 50%, #ddecab 99%) !important;
...passt perfekt! ..... Viele Wege führen zum Ziel...
Amen dazu, und prima dass es passt!
Habe ich bei Github aktualisiert.
Dankeschön!
Wenn mich ein Thema fesselt, fessel ich das Thema!
Sehr interessante Redewendung, gefällt mir.
Ist die original so aus deinem Gehirn getropft oder ist das ein (bekanntes?) Zitat von irgendwoher. Google findet jedenfalls, abgesehen von der KI-Antwort, nichts Vergleichbares. Bitte um ehrliche Antwort...
Hmm, das ist komplett meins, denn ich hab ja diese Sprachgewalt!
Nur ein kleines Wortspiel, aber danke für die Blumen.
Bei Verläufen fange ich generell mit harten Übergängen an, um zu wissen was wo plaziert ist.
Spiel mal diese Varianten durch, vielleicht hilft das.
.tabbrowser-tab .tab-background {
/*
background-image: radial-gradient(circle, transparent 25%, #ddecab 85%) !important;
background-image: radial-gradient( transparent 25%, #ddecab 85%) !important;
background-image: linear-gradient(#ddecab 1%, transparent 50%, #ddecab 99%) !important;
background-image: linear-gradient(#ddecab 1%, transparent 1% 50%, #ddecab 50% 99%) !important;
background-image: radial-gradient( transparent 25%, #ddecab 25% 85%) !important;
*/
background-image: radial-gradient(circle, transparent 25%, #ddecab 25% 85%) !important;
}Brauchst Du was Neues? Ich hätte da eventuell was!
(Ich habe einen Wunsch)
Wenn mich ein Thema fesselt, fessel ich das Thema! 
Wenn du einen Thread erstellst, und ich kann mit meinen - wirklich bescheidenen Mitteln aushelfen - mach ich das natürlich gerne.