Suche Lösung per CSS oder JS damit sich die Menüs "soft" öffnen.

Horstmann

Zitat von Mira_Belle

mkpcxxl oder Endor
Bezüglich der Lesezeichenleiste hoffe ich ja, dass jemand einen Thread aufmacht.

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:

CSS

#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;  
}  
*/

Alles anzeigen

Für die Submenus könnte man stattdessen auch eine andere horizontale Transformation benutzen:

CSS

#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;  
}

Alles anzeigen

Zitat von Mira_Belle

der hatte

Immer gerne, prima das es klappt soweit!

mkpcxxl

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)

Mitleser

Zitat von Horstmann

Die Positionierung funktioniert ab dem zweiten Öffnen eines Popups.

Moin, das könnte an popupshown statt popupshowing liegen.

Horstmann

Zitat von Mitleser

Zitat von Horstmann

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:

JavaScript

//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');
          }
    });
})();

Alles anzeigen

Im CSS wird Folgendes hinzugefügt, wie in #37 schon benutzt:

CSS

 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:

CSS

 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;  
}

Alles anzeigen

Mitleser

Zitat von Horstmann

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.

JavaScript

(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);    
    
})();

Alles anzeigen

Horstmann

Zitat von Mitleser

Zitat von Horstmann

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.

Sören Hentzschel

Zitat von Horstmann

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.

FuchsFan

Zitat von Mira_Belle

Ich habe da mal was zusammengeschustert!

Mira_Belle

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.

CSS

#AMpopup menu.menu-iconic menupopup {
	opacity: 0 !important;  
    transform: translateX(-100%) !important;  
}

Horstmann

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

Mira_Belle

Zitat von FuchsFan

Hast du gut gemacht.

Was?
Die ganze Arbeit hatte doch Horstmann

FuchsFan

Zitat von Mira_Belle

Was?
Die ganze Arbeit hatte doch Horstmann

Du hast ja nur dabei gestanden.

Zitat von Horstmann

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!

mkpcxxl

Zitat von Horstmann

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)

Horstmann

Zitat von Mira_Belle

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.

Zitat von mkpcxxl

Coole Sache, funktioniert richtig gut und ich bin Stolz darauf eine faule Socke zu sein...

Danke für's Testen!

Endor

Hallo Horstmann .
Dein Script funktioniert bestens.
Große Klasse!!!!
Vielen Dank.
Mfg.
Endor

Horstmann

Zitat von 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.

Endor

Hallo Horstmann .
Danke. Ja das Script möchte ich gern hochladen.
Link zu #51

Beitrag

RE: Suche Lösung per CSS oder JS damit sich die Menüs "soft" öffnen.

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.

(Quelltext, 117 Zeilen)

Horstmann

2. Juli 2025 um 21:10

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

Horstmann

Zitat von 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:

JavaScript

//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);

})();

Alles anzeigen

Endor

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

Horstmann

Zitat von Endor

Obiges Script funktioniert hier in der Menüleiste überhaupt nicht.
Lesezeichenleiste geht es prima, und auch bei einzelnen Schaltflächen von Scripten.
.....
Alles funktioniert. Es fehlen mir nur die Hamburger Schaltfläche- bzw. das Popup
usw.

Ahhh, ok, dann vergessen wir das schnell wieder.

Die Menüleiste Button IDs in Windows könnte jemand rauszufinden, evtl. #menubar-items etc. oder sowas (unmöglich am Mac zu testen) und zu toolbarbutton mit einfügen, aber man kann auch einfach die Liste weiterbenutzen.

Auf die Schnelle würde mir noch sowas einfallen für den Rest, ist aber sehr grob, deckt die Untermenus nicht ab für Hamburger etc., und müsste gründlich getestet werden:

CSS

panel {
    opacity: 0 !important;
    transform: translateY(-100%) !important;
}

panel[panelopen] {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out !important;
}

Mira_Belle

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

Das sind, inkl. "Profile", jene Selektoren.

Und das Hamburgermenü.

Suche Lösung per CSS oder JS damit sich die Menüs "soft" öffnen.

RE: Suche Lösung per CSS oder JS damit sich die Menüs "soft" öffnen.

Ähnliche Themen

"Neues", altes Appmenu. Update, und bräuchte Hilfe!

Div. Skripte funktionieren im aktuellem Nightly nicht mehr