1. Nachrichten
  2. Forum
    1. Unerledigte Themen
    2. Forenregeln
  3. Spenden
  • Anmelden
  • Registrieren
  • Suche
Alles
  • Alles
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche
  1. camp-firefox.de
  2. Horstmann

Beiträge von Horstmann

  • Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

    • Horstmann
    • 4. Juli 2025 um 13:29
    Zitat von grisu2099
    Zitat von Horstmann

    welche 3 Einträge zuerst geladen werden?

    Immer die obersten... ;)

    Mac hier, junger Mann, Mac! ;)
    Das Popup sieht in Windows anders aus, andere Inhalte.

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

    • Horstmann
    • 4. Juli 2025 um 13:00
    Zitat von 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.., ... ;)

  • Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

    • Horstmann
    • 4. Juli 2025 um 12:55
    Zitat von Endor

    Es tritt hier nur bei Schaltfläche Lesezeichen in der Menüleiste auf.
    Wenn ich warte werden die fehlenden später nachgeladen.
    Mfg.
    Endor

    Danke; Menüleiste ist hier am Mac nicht testbar, da fällt mir leider nichts zu ein.

    Das um teils Sekunden verspätete Auftauchen hatte ich in einigen wenigen Fällen in alten Versionen, aber dann waren alle Einträge betroffen.

    Erstmal bin ich aber beruhigt; wenn es in der Lesezeichenleiste und der Schaltfläche Lesezeichenmenü normal funktioniert, ist wohl kein generelles Problem da. :)

    Falls du das aktuellste Script benutzt, und die Verblassenfunktion aktiv hast, probier mal let bm_opacity_null = 0;, und/oder let trenner = 1; oder let trenner = 3; zu setzen, und schauen ob es besser ist.

    Und könntest du bitte einen Screenshot vom Menüleisten Popup machen, und zeigen oder beschreiben welche 3 Einträge zuerst geladen werden? Ich hätte da einen Verdacht.:/

  • Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

    • Horstmann
    • 4. Juli 2025 um 10:59
    Zitat von Endor

    Hallo Mira_Belle .
    Ich kann das Verhalten bestätigen.
    Verhält sich hier genau so wie von Dir beschrieben.
    Mfg.
    Endor

    Hmm, ich habe diverse Varianten bei mir getestet, auch das von Mira, keine Probleme. :/

    Wenn du mal das vorhergegangene Script von #492 probierst, gibt es das gleiche Problem, dass erst beim zweiten Laden alle Anzeigen sichtbar sind?
    Obwohl dir das bestimmt schnell aufgefallen wäre.

    Eins könntet ihr noch testen, wenn das Problem auftritt: das Popup mit nur 3 Einträgen offenlassen für ein paar Sekunden, schauen ob der Rest lädt.

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

    • Horstmann
    • 4. Juli 2025 um 10:38
    Zitat von saobento

    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.

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

    • Horstmann
    • 4. Juli 2025 um 00:34
    Zitat von Mira_Belle

    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.

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

  • Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

    • Horstmann
    • 4. Juli 2025 um 00:19
    Zitat von Mira_Belle

    Ist es nur bei mir so, dass beim Öffnen erst einmal nur bei den oberen drei "Einträgen" die "Werte" angezeigt werden
    und erst beim zweiten Mal öffnen, dann bei allen Ordner?

    Kann ich nicht nachvollziehen; kannste mal das Script mit deinen benutzten Einstellungen einstellen, am besten auch noch die Icons?

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

    • Horstmann
    • 3. Juli 2025 um 23:07
    Zitat von 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

    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:

    JavaScript
    //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);
    
    })();
    Alles anzeigen

    Zitat von BrokenHeart

    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:

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

    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.

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

    • Horstmann
    • 3. Juli 2025 um 20:46
    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. :whistling:

    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;
    }
  • Suche Lösung per CSS oder JS damit sich die Menüs "soft" öffnen.

    • Horstmann
    • 3. Juli 2025 um 15:21
    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.8)
    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
  • Suche Lösung per CSS oder JS damit sich die Menüs "soft" öffnen.

    • Horstmann
    • 3. Juli 2025 um 12:30
    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. :/

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

    • Horstmann
    • 2. Juli 2025 um 22:48
    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! :)

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

    • Horstmann
    • 2. Juli 2025 um 21:10

    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
  • Suche Lösung per CSS oder JS damit sich die Menüs "soft" öffnen.

    • Horstmann
    • 2. Juli 2025 um 17:58
    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.

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

    • Horstmann
    • 2. Juli 2025 um 15:20
    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!!! :thumbup:
    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
  • Suche Lösung per CSS oder JS damit sich die Menüs "soft" öffnen.

    • Horstmann
    • 2. Juli 2025 um 09:57
    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! :)

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

    • Horstmann
    • 1. Juli 2025 um 19:33
    Zitat von Mira_Belle

    So geht es!

    Schweet! :):thumbup:

    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.

    CSS
    /*  ---  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;  
    }
    Alles anzeigen

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

    JavaScript
    //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');
          };
        });
    
    })();
    Alles anzeigen
  • Suche Lösung per CSS oder JS damit sich die Menüs "soft" öffnen.

    • Horstmann
    • 1. Juli 2025 um 17:13

    Probier mal #bookmarksMenu menupopup ==> #bookmarksMenu > menupopup

    Also so:

    CSS
    /* 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;  
    }
    /* ----------------------------------------------------------------------- */
    Alles anzeigen

    Zitat von grisu2099
    Zitat von Mira_Belle

    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.

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

    • Horstmann
    • 1. Juli 2025 um 16:52
    Zitat von Mira_Belle


    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?:/

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

    • Horstmann
    • 1. Juli 2025 um 10:38

    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.

    CSS
    #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;  
    } 
    Alles anzeigen

Unterstütze uns!

Jährlich (2025)

91,4 %

91,4% (594,17 von 650 EUR)

Jetzt spenden
  1. Kontakt
  2. Datenschutz
  3. Impressum
Community-Software: WoltLab Suite™
Mastodon