mkpcxxl Danke für den Tipp mit dem Autopopup_Menus.uc.js
Habe es für mich ergänzt, damit auch "mein" Appmenü damit funktioniert.
Einfach klasse. Drüberfahren und die Menüs öffnen sich von alleine.
Ach und noch etwas
Ich hatte lediglich die Idee.
Der gebührende Dank geht an Horstmann,
der hatte die Ideen zur Umsetzung in Code
Ich habe nur getestet und die CSS-Fragmente zusammen gesetzt.
Bedankt Euch also nicht bei mir, sondern bei Horstmann
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! 
Sensationell, schön wie das jetzt funzt. Danke danke danke.
Habe jetzt noch das Script von RE: [Script] [Nightly] Autopopup für Lesezeichenleiste funktioniert nicht mehr... benutzt, damit die Ordner in meiner Lesezeichensymbolleiste auch wie bei der Menülesite bei Mousehover öffnen.
Gruß
Michael
(mkpcxxl)
Die Positionierung funktioniert ab dem zweiten Öffnen eines Popups.
Moin, das könnte an popupshown statt popupshowing liegen.
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;
}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.
(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%;
}
#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-in-out, opacity 0.9s ease-in-out !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-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.
will-change scheint tatsächlich unnötig zu sein
will-change ist nie „nötig“. Die Eigenschaft dient lediglich als ein Hinweis an den Browser, damit dieser Performance-Optimierungen anwenden kann. Man kann damit aber auch schnell einen gegenteiligen Effekt erzielen, wenn man es falsch oder zu viel einsetzt. Generell lautet die Empfehlung, das nur einzusetzen, wenn es bereits Performance-Probleme gibt, und nicht einfach generell auf Elemente, nur weil sich diese verändern.
Ich habe da mal was zusammengeschustert!
Hast du gut gemacht.
Nur als Hinweis, wenn du es noch mit einarbeiten möchtest. Im Menü Datei gibt es noch den Eintrag "Neuer Tab in Umgebung" (mit Pfeil dahinter), deshalb habe ich in Zeile 25 das noch hinzugefügt
#menu_newUserContext menupopup, /* Neuer Tab in Umgebung */
Im Script Appmenu habe ich noch einige Submenüs, und damit die dann auch angesprochen werden der zusätzliche Block.
#AMpopup menu.menu-iconic menupopup {
opacity: 0 !important;
transform: translateX(-100%) !important;
}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);
})();Hast du gut gemacht.
Was?
Die ganze Arbeit hatte doch Horstmann
Was?
Die ganze Arbeit hatte doch Horstmann
Du hast ja nur dabei gestanden.
Sodele, mal was zum Testen für geneigte User, basierend auf dem Script von Mitleser
Das hast du gut gemacht.
Habe es nur noch für das ExtraConfigMenu-Script erweitert. Mitleser hat gute Vorarbeit geleistet. Zum Testen ein nettes Spielzeug. Danke!
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.
Coole Sache, funktioniert richtig gut und ich bin Stolz darauf eine faule Socke zu sein...
Danke dafür
Gruß
Michael
(mkpcxxl)
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!
Hallo Horstmann .
Dein Script funktioniert bestens.
Große Klasse!!!!
Vielen Dank.
Mfg.
Endor
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.
Hallo Horstmann .
Danke. Ja das Script möchte ich gern hochladen.
Link zu #51
Frage, kann man das Popup der Hamburger Schaltfläche, des #nav-bar-overflow-button,
der Unifiedextensionsschaltfläche, der Alletabsschaltfläche in der Tableise usw.
auch damit eventuell ansprechen? Weil dann wäre es komplett.
Mfg.
Endor
Frage, kann man das Popup der Hamburger Schaltfläche, des #nav-bar-overflow-button,
der Unifiedextensionsschaltfläche, der Alletabsschaltfläche in der Tableise usw.
auch damit eventuell ansprechen? Weil dann wäre es komplett.
Mfg.
Endor
Danke für den Upload!
Und ja, man kann das erweitern, und die Frage nach einer universellen Anpassung habe ich befürchtet.
Ich weiss über die diversen Popups gerade soviel, und habe soviel Zeit damit verbracht die Dinger einzeln umzubauen in der Vergangenheit, dass ich für diesen Zweck lieber die Finger davon lasse.
Ausserdem hab ich das Ganze quasi blind geschrieben - nicht nur auf Mac, sondern auch auf 115esr.
Zum einen müsste man die jeweiligen "Hauptmenu" Popups raussuchen und die Animation anpassen, das deckt eine gewisse Spannbreite an Popupdesigns ab, ist aber machbar und kein Drama mit reinem CSS.
Die Submenus mit der horizontalen Animation sind erstmal auch nicht so schwierig - aber für die automatische rechts/links Anpassung müsste man auch den Javascript Teil anpassen, und das ganze dann wieder sauber verschachteln im CSS.
Was die potentiellen Auswirkungen auf andere Popups betrifft, Kontext etc., ist nochmal ein anderes Thema.
Oder man sucht die existierenden FX Animation mal durch, evtl. kann man die ja überschreiben wo vorhanden - und zugänglich.
Wenn jemand weiter daran basteln möchte, evtl. kann sowas als mehr generell gefasster Anfang dienen, könnte zumindest für die Basis-Button Popups klappen, und dafür evtl. sogar den ganzen Code von oben ersetzen:
//Popup Position Finder mit Popup Animationen CSS / universal test 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 > menupopup {
--trans_x: -100%;
}
menu > menupopup.flipper {
--trans_x: 100%;
}
/* --- Hauptmenus --- */
toolbarbutton > menupopup {
opacity: 0 !important;
transform: translateY(-100%) !important;
}
toolbarbutton[open] > menupopup {
opacity: 1 !important;
transform: translateY(0) !important;
transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out !important;
}
/* --- Untermenus --- */
toolbarbutton menu > menupopup {
opacity: 0 !important;
transform: translateX(var(--trans_x)) !important;
/*margin-top: -7px !important;*/
/*margin-inline: 16px !important;*/
}
toolbarbutton 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);
})();Hallo Horstmann
Obiges Script funktioniert hier in der Menüleiste überhaupt nicht.
Lesezeichenleiste geht es prima, und auch bei einzelnen Schaltflächen von Scripten.
Da tut sich nichts. Das aus #51 hingegen einwandfrei.
Habe mir da noch ein paar Schaltflächen von Scripten hinzugefügt.
Alles funktioniert. Es fehlen mir nur die Hamburger Schaltfläche- bzw. das Popup
usw. Trotzdem vielen Dank für Deine Mühe.
Mfg.
Endor
