Hab jetzt nicht mehr den ganzen Thread mitverfolgt, aber hier mal als Anregung für die Untermenüs im Hamburger-Popup. Dürfte in der Umsetzung einfacher sein, da ja schon von Haus aus eine (wesentlich kürze) Animation vorgesehen ist:
panel#appMenu-popup[type="arrow"]
{
--animation-easing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0) !important;
--panelui-subview-transition-duration: 0.66s !important;
}
hier das komplette CSS für das animierte Öffnen der Menüs.
Nur mal so, reicht hier so auch aus:
#main-menubar > menu > menupopup {
will-change: transform, opacity !important;
opacity: 0 !important;
transform: translateY(-100%) !important;
}
#main-menubar > menu[open] > menupopup {
opacity: 1 !important;
transform: translateY(0) !important;
transition: transform 1.5s ease, opacity 1.5s ease !important;
}
#main-menubar > menu > menupopup {
will-change: transform, opacity !important;
opacity: 0 !important;
transform: translateX(-100%) !important;
}
#main-menubar > menu[open] > menupopup {
opacity: 1 !important;
transform: translateX(0) !important;
transition: transform 1.5s ease, opacity 1.5s ease !important;
} 2002Andreas Das hat aber lange gedauert bis Du hier eingeschritten bist. 
Aber Sören war auch schon da und hat erklärt, warum will-change: transform, opacity !important; nicht genutzt werden soll.
Also:
#main-menubar > menu > menupopup {
opacity: 0 !important;
transform: translateY(-100%) !important;
}
#main-menubar > menu[open] > menupopup {
opacity: 1 !important;
transform: translateY(0) !important;
transition: transform 1.5s ease, opacity 1.5s ease !important;
}
#main-menubar > menu > menupopup {
opacity: 0 !important;
transform: translateX(-100%) !important;
}
#main-menubar > menu[open] > menupopup {
opacity: 1 !important;
transform: translateX(0) !important;
transition: transform 1.5s ease, opacity 1.5s ease !important;
}
Werde ich so gleich mal ausprobieren!
Nur mal so, reicht hier so auch aus:
Werde ich so gleich mal ausprobieren!
Doppelt hält besser; siehe Zeile 12-22.
bis Du hier eingeschritten bist
Werde ich so gleich mal ausprobieren!
Es geht auch einzeln.
So von links nach rechts:
#main-menubar > menu > menupopup {
opacity: 0 !important;
transform: translateY(-100%) !important;
}
#main-menubar > menu[open] > menupopup {
opacity: 1 !important;
transform: translateY(0) !important;
transition: transform 1.5s ease, opacity 1.5s ease !important;
}Und so von oben nach unten:
#main-menubar > menu > menupopup {
opacity: 0 !important;
transform: translateX(-100%) !important;
}
#main-menubar > menu[open] > menupopup {
opacity: 1 !important;
transform: translateX(0) !important;
transition: transform 1.5s ease, opacity 1.5s ease !important;
} Es reicht also einer der Codes aus denke ich.
Werde ich so gleich mal ausprobieren!
Habe ich,
und die Untermenüs funktionieren so nicht!
Aber so:
#main-menubar > menu > menupopup {
opacity: 0 !important;
transform: translateY(-100%) !important;
}
#main-menubar > menu[open] > menupopup {
opacity: 1 !important;
transform: translateY(0) !important;
transition: transform 0.8s ease, opacity 0.3s ease !important;
}
#main-menubar > menu menu > menupopup {
opacity: 0 !important;
transform: translateX(-100%) !important;
}
#main-menubar > menu menu[open] > menupopup {
opacity: 1 !important;
transform: translateX(0) !important;
transition: transform 0.8s ease, opacity 0.3s ease !important;
} Aber Danke für die Vorlage
Ist viel einfacher als:
#file-menu > menupopup, /* Datei */
#edit-menu > menupopup, /* Bearbeiten */
#view-menu > menupopup, /* Ansicht */
#history-menu > menupopup, /* Chronik */
#bookmarksMenu > menupopup, /* Lesezeichen */
#tools-menu > menupopup, /* Extras */
#helpMenu > menupopup /* Hilfe */
{
opacity: 0 !important;
transform: translateY(-100%) !important;
}
#file-menu[open] > menupopup, /* Datei */
#edit-menu[open] > menupopup, /* Bearbeiten */
#view-menu[open] > menupopup, /* Ansicht */
#history-menu[open] > menupopup, /* Chronik */
#bookmarksMenu[open] > menupopup, /* Lesezeichen */
#tools-menu[open] > menupopup, /* Extras */
#helpMenu[open] > menupopup /* Hilfe */
{
opacity: 1 !important;
transform: translateY(0) !important;
transition: transform 0.8s ease, opacity 0.3s ease !important;
}
#file-menu menu > menupopupp, /* Datei */
#edit-menu menu > menupopupp, /* Bearbeiten */
#view-menu menu > menupopup, /* Ansicht */
#history-menu menu > menupopup, /* Chronik */
#bookmarksMenu menu > menupopup, /* Lesezeichen */
#tools-menu menu > menupopup, /* Extras */
#helpMenu menu > menupopup /* Hilfe */
{
opacity: 0 !important;
transform: translateX(-100%) !important;
}
#file-menu menu[open] > menupopup, /* Datei */
#edit-menu menu[open] > menupopup, /* Bearbeiten */
#view-menu menu[open] > menupopup, /* Ansicht */
#history-menu menu[open] > menupopup, /* Chronik */
#bookmarksMenu menu[open] > menupopup, /* Lesezeichen */
#tools-menu menu[open] > menupopup, /* Extras */
#helpMenu menu[open] > menupopup /* Hilfe */
{
margin-left: 6px !important;
opacity: 1 !important;
transform: translateX(0) !important;
transition: transform 0.8s ease, opacity 0.3s ease !important;
}Ach und das Menü "Profile" ist dann ja auch gleich mit dabei.
die Untermenüs funktionieren so nicht!
Ich bin nur von diesem Code von dir mal ausgegangen:
/* Datei */
#file-menu menupopup {
will-change: transform, opacity !important;
opacity: 0 !important;
transform: translateY(-100%) !important;
}
#file-menu[open] menupopup {
opacity: 1 !important;
transform: translateY(0) !important;
transition: transform 0.8s ease, opacity 0.3s ease !important;
}
/* Bearbeiten */
#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 0.8s ease, opacity 0.3s ease !important;
}
/* Ansicht, inkl. Untermenü */
#view-menu > menupopup {
will-change: transform, opacity !important;
opacity: 0 !important;
transform: translateY(-100%) !important;
}
#view-menu[open] > menupopup {
opacity: 1 !important;
transform: translateY(0) !important;
transition: transform 0.8s ease, opacity 0.3s ease !important;
}
#view-menu menu > menupopup {
will-change: transform, opacity !important;
opacity: 0 !important;
transform: translateX(-100%) !important;
}
#view-menu menu[open] > menupopup {
opacity: 1 !important;
transform: translateX(0) !important;
transition: transform 0.8s ease, opacity 0.3s ease !important;
}
/* Chronik */
#history-menu menupopup {
will-change: transform, opacity !important;
opacity: 0 !important;
transform: translateY(-100%) !important;
}
#history-menu[open] menupopup {
opacity: 1 !important;
transform: translateY(0) !important;
transition: transform 0.8s ease, opacity 0.3s ease !important;
}
/* 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;
}
/* Extras */
#tools-menu menupopup {
will-change: transform, opacity !important;
opacity: 0 !important;
transform: translateY(-100%) !important;
}
#tools-menu[open] menupopup {
opacity: 1 !important;
transform: translateY(0) !important;
transition: transform 0.8s ease, opacity 0.3s ease !important;
}
/* Hilfe */
#helpMenu menupopup {
will-change: transform, opacity !important;
opacity: 0 !important;
transform: translateY(-100%) !important;
}
#helpMenu[open] menupopup {
opacity: 1 !important;
transform: translateY(0) !important;
transition: transform 0.8s ease, opacity 0.3s ease !important;
}
/* Ausrichtung der Untermenüs in Ansicht */
#viewToolbarsMenu menupopup {
margin-left: 6px !important;
margin-top: -7px !important;
}
#viewSidebarMenuMenu menupopup {
margin-left: 6px !important;
margin-top: -7px !important;
}
#viewFullZoomMenu menupopup {
margin-left: 6px !important;
margin-top: -7px !important;
}
#pageStyleMenu menupopup {
margin-left: 6px !important;
margin-top: -7px !important;
}Weil den fand ich reichlich lang.
Aber so:
Ist doch wesentlich kürzer dann
das Menü "Profile" ist dann ja auch gleich mit dabei.
So ist es.
Menüleistenbuttons? Was genau ist damit gemeint?
Datei ... Bearbeiten ... Ansicht ... Chronik ... Lesezeichen ... Extras ... Hilfe ?
Hatten wir schon.Code#file-menu #edit-menu #view-menu #history-menu #bookmarksMenu #profiles-menu #tools-menu #helpMenu
Die Idee war eher das alles zu reduzieren, ohne jeden Button/Schaltfläche einzeln zu listen; Andreas hat inzwischen ja teils schon vorgegriffen. 
Grober Testcode, inkl. Grobversuch mit Haupt Popups für Hamburger, Downloadbutton, Extensionbutton, Overflowkram; Menuleiste nicht testbar am Mac, aller anderer älterer Code muss raus:
//Popup Position Finder mit Popup Animationen CSS / universal test 2
//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 > menupopup {
--trans_x: -100%;
}
menu > menupopup.flipper {
--trans_x: 100%;
}
/* --- Hauptmenus --- */
:is(toolbarbutton, menubar > menu) > menupopup {
opacity: 0 !important;
transform: translateY(-100%) !important;
}
:is(toolbarbutton, menubar > menu)[open] > menupopup {
opacity: 1 !important;
transform: translateY(0) !important;
transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out !important;
}
/* --- Untermenus --- */
:is(toolbarbutton, menubar > menu) menu > menupopup {
opacity: 0 !important;
transform: translateX(var(--trans_x)) !important;
}
:is(toolbarbutton, menubar > menu) menu[open] > menupopup {
opacity: 1 !important;
transform: translateX(0) !important;
transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out !important;
}
/* --- Panels test --- */
panel {
outline: 2px solid red;
outline-offset: -2px !important;
}
panel[mainviewshowing] {
outline: 2px solid cyan;
outline-offset: -2px !important;
}
panel {
opacity: 0 !important;
transform: translateY(-100%) !important;
}
panel[panelopen],
#PopupSearchAutoComplete {
/*will-change: transform, opacity !important;
transition-property: transform, opacity !important;
--animation-easing-function: ease-in-out !important;*/
--panelui-subview-transition-duration: 2s !important;
opacity: 1 !important;
transform: translateY(0) !important;
transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out !important;
}
/*
panel:not([mainviewshowing]) {
opacity: 0 !important;
transform: translateY(-100%) !important;
}
panel[panelopen]:not([mainviewshowing]) {
opacity: 1 !important;
transform: translateY(0) !important;
transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out !important;
}
*/
`), null, null);
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
})();Hab jetzt nicht mehr den ganzen Thread mitverfolgt, aber hier mal als Anregung für die Untermenüs im Hamburger-Popup. Dürfte in der Umsetzung einfacher sein, da ja schon von Haus aus eine (wesentlich kürze) Animation vorgesehen ist:
CSSpanel#appMenu-popup[type="arrow"] { --animation-easing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0) !important; --panelui-subview-transition-duration: 0.66s !important; }
Guter Fund, hilft weiter an der Stelle, und in anderen ähnlichen Untermenus auch.
Von der Art gibt es Unmengen im Fx Code, da hatte ich mich noch nicht rangetraut.
Die Idee war eher das alles zu reduzieren, ohne jeden Button/Schaltfläche einzeln zu listen; ...
Stimmt schon, aber ich selber bin an der Stelle "CSS" (wie in #68) und mit dem Skript #43 ausgestiegen.
Damit sind meine Wünsche umgesetzt.
Aus Beitrag #1
Also wenn man über die Einträge der Menüleiste streift, soll das Menü, wenn man auf einem Eintrag verweilt, nach einer gewissen Zeit sich von alleine öffnen.
Jetzt kommt Punkt zwei!
Das Menü soll sich soft von oben nach unten "ausrollen".
Wobei es ja noch weiter ging! Die Untermenüs scrollen ja seitwärts!
Aber ich finde es schön, dass ich den Einen oder Anderen auf "dumme" Ideen gebracht habe,
und dass das Ganze auch auf andere Menüs und Popups ausgeweitet wird.
Mich interessiert halt auch ob was klappt oder nicht nach dem Aufwand, und wie es optimiert werden kann.
Daher ist jedes Feedback von Usern immer ein willkommener Beitrag - ich werd den Code selber eh nicht benutzen - aber natürlich nicht obligatorisch..
Das Script aus #70 funktioniert hier auch, sorgt bei mir aber dafür, dass gespeicherte Suchanfragen nicht mehr aufrufbar sind. Die Suchfelder reagieren nicht mehr auf die Eingabe. Siehe Anhang, einmal mit Script (084442.png) und einmal ohne (084331.png)
Mich interessiert halt auch ob was klappt oder nicht ...
Dito, deshalb lese ich hier weiter uuund probiere aus.
Wenn es Verbesserungen oder doch etwas Cooles gibt, wird, werden diese übernommen,
wie z.B. Andreas Optimierung.
dass gespeicherte Suchanfragen nicht mehr aufrufbar sind
Ja das ist hier auch so. Ist mir eben erst aufgefallen.
Mfg.
Endor
Das Script aus #70 funktioniert hier auch, sorgt bei mir aber dafür, dass gespeicherte Suchanfragen nicht mehr aufrufbar sind. Die Suchfelder reagieren nicht mehr auf die Eingabe.
Danke für die Meldung!
ich habe in #70 das Script grob dafür angepasst, Zeilen 73/74, #PopupSearchAutoComplete ist neu.
Hallo Horstmann .
Ja so funktioniert es hier einwandfrei.
Vielen Dank für die schnelle Anpassung.
Mfg.
Endor
Ja so funktioniert es hier einwandfrei.
Danke !
Keine saubere Lösung, aber die einfachste.
Nur nochmal: speziell die panel Codeteile sind schwer zu kontrollieren und offensichtlich nicht durchgetestet, und das Ganze ist nur ein Test!
Als nächstes kommt noch Einer und will die Suchergebnisse Popups auch umanimiert haben, etc.., ...
Bei mir hat die Änderung nicht geholfen, ist allerdings in einem Linuxsystem, vielleicht macht das dann einen Unterschied.
Also ich muss sagen, dass die Panels bei mir einwandfrei funktionieren (ich meine die Animation) musste nur die Sache mit dem Rahmen ändern, da ich schon welche in meiner userchrome.css hatte.
Das mit den Suchanfragen betrifft mich nicht, da ich keine speichere und auch nichts mit der Suche von Firefox suche.
Gruß
Michael
(mkpcxxl)
P.S.: auch die korrigierte Fassung fuktioniert.
Bei mir hat die Änderung nicht geholfen, ist allerdings in einem Linuxsystem, vielleicht macht das dann einen Unterschied.
Hmm, du könntest das hier noch probieren, als Ersatz für den relevanten Codeteil.
panel:not(#PopupSearchAutoComplete) {
opacity: 0 !important;
transform: translateY(-100%) !important;
}
panel:not(#PopupSearchAutoComplete)[panelopen] {
--panelui-subview-transition-duration: 2s !important;
opacity: 1 !important;
transform: translateY(0) !important;
transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out !important;
}