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

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

    • Horstmann
    • 1. Juli 2025 um 09:28
    Zitat von Mira_Belle

    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.

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

    • Horstmann
    • 30. Juni 2025 um 22:10

    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.

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

    • Horstmann
    • 30. Juni 2025 um 21:35
    Zitat von Mira_Belle
    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;  
    }
    Alles anzeigen

    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.

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

    • Horstmann
    • 30. Juni 2025 um 18:57
    Zitat von Mira_Belle

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

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

    Etcetera für die weiteren Codeblöcke, falls es überhaupt funktioniert.


    Zitat von BrokenHeart

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

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

    • Horstmann
    • 30. Juni 2025 um 11:36

    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:

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

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

    CSS
    #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;  
    }
    Alles anzeigen
  • „Tab neu laden per Doppelklick“ auf den Tabreiter funktioniert nicht mehr

    • Horstmann
    • 29. Juni 2025 um 19:38
    Zitat von moonson
    Zitat von Mira_Belle

    background-image: linear-gradient(#ddecab 1%, transparent 50%, #ddecab 99%) !important;

    ...passt perfekt! ..... Viele Wege führen zum Ziel... ;):thumbup:

    Amen dazu, und prima dass es passt! :)

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

    • Horstmann
    • 29. Juni 2025 um 19:36
    Zitat von Endor

    Habe ich bei Github aktualisiert.

    Dankeschön! :):thumbup:

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

    • Horstmann
    • 29. Juni 2025 um 17:40
    Zitat von BrokenHeart
    Zitat von Horstmann

    Wenn mich ein Thema fesselt, fessel ich das Thema! ^^

    Sehr interessante Redewendung, gefällt mir. :thumbup:

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

  • „Tab neu laden per Doppelklick“ auf den Tabreiter funktioniert nicht mehr

    • Horstmann
    • 29. Juni 2025 um 17:34

    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.

    CSS
    .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;
    }
    Alles anzeigen
  • Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

    • Horstmann
    • 29. Juni 2025 um 16:01
    Zitat von Mira_Belle

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

  • „Tab neu laden per Doppelklick“ auf den Tabreiter funktioniert nicht mehr

    • Horstmann
    • 29. Juni 2025 um 15:46
    Zitat von Mira_Belle

    background-image: radial-gradient(circle, transparent 25%, #ddecab 85%) !important;

    oder

    background-image: linear-gradient(#ddecab 1%, transparent 50%, #ddecab 99%) !important;

    sollten am ehesten deinem "alten" Beispiel entsprechen.

    Bei einem länglichen Element, weshalb circle für den radial-gradient erzwingen, und wieso linear-gradient, was nur quasi bleeding erzeugt, falls der Verlauf soft ist? :/

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

    • Horstmann
    • 29. Juni 2025 um 14:53

    Auf lautstarkes Verlangen der schweigenden Mehrheit - ein Update! :whistling:

    Alle eigenen Einstellungen/Anpassungen vom früheren Script können übernommen werden, nur das Verblassen bei 0 ist neu geregelt.
    Ein paar Fehler sind korrigiert worden, und die Standard-Farben sollten besser mit Themes funktionieren.
    Wie zuvor, sind in der Basiseinstellung keine eigenen Icons oder sonstige Anpassungen nötig.

    JavaScript
    //bookmark_count.uc.js, RC_5 Rudolf
    //Ende Juni 2025
    //Zeigt Anzahl der Lesezeichenordner und Links an in Lesezeichenpopups
    //RC_5 R: Verblassen bei 0 leichter einstellbar, Fehlerkorrekturen, Standardfarben sollten sich jetzt an Themes anpassen, Aufraeumen
    //basiert auf Script von BrokenHeart =>
    //https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1269879#post1269879
    //Release Candidate 5.R =>
    //https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1274447#post1274447
    
    (function() {
        if (!window.gBrowser)
            return;
        setTimeout(function() {
            setFunction();
        },50);
    
        //Einstellungen Javascript =>
        //Nach Script Aenderungen Neustart mit Start-Cache loeschen => about:support
    
        //Eigenes Icon erwartet in Profilordner/chrome/icons, icons Ordner falls noetig erstellen
        //Eigene Icons eintragen, falls vorhanden
        let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
        let bm_icon1 = 'YourFolderIcon.svg';        //  Custom  Folder Icon
        let bm_icon2 = 'YourLinkIcon.svg';          //  Custom  Link Icon
        //Variablen zur Auswahl der Icons; kein Auto Fallback falls eigenes Icon nicht vorhanden
        let bm_icon_folder = 0;      //  Ordner: 0 Firefox Fallback Icon / 1 eigenes Icon
        let bm_icon_link = 0;        //  Links:  0 Firefox Fallback Icon / 1 eigenes Icon
    
        //Variablen zur Auswahl der Klammern
        let bm_bracket = 0;           //  0 keine Klammern / 1 runde Klammern / 2 eckige Klammern
        //Variablen zur Auswahl der Reihenfolge
        let bm_order = 0;             //  0 Icons links Ziffern rechts / 1 Ziffern links Icons rechts
    
        //Variablen zur Auswahl der Farben
        let bm_colors = 0;            //  0 Standardfarben / 1 eigene Farben benutzen
    
        //Verblassen bei Zahl = 0
        let bm_opacity_null = 1;      //  0 kein Verblassen / 1 Verblassen Zahl, Icon, Trennlinie / 2 Verblassen nur Zahl
    
        //Variablen zur Auswahl der Trennlinie
        //  0 ohne Trennlinie
        //  1 ohne Trennlinie / Zaehler #1 = 0 => Zaehler #1 + Icon #2 wird versteckt
        //  2 mit Trennlinie
        //  3 mit Trennlinie nur bei Zaehler #1 > 0 / Zaehler #1 = 0 => Zaehler #1 + Icon #2 wird versteckt
        let trenner = 2;
        //  Trennlinie Inhalt, beliebige Textzeichen
        let trennzeichen = '|';
    
        function setFunction() {
            const css =`
    
           /*
           Einstellungen CSS , OPTIONAL =>
           #A Zaehler (Counter) anpassen,
           #B Feinabstimmung allgemein,
           #C Feinabstimmung Zentrierung Trennlinie,
           #D Eigene Farben, Verblassen,
           #E Allgemeines,
           #F Optionale Extras.
           */
    
           /*** User Einstellungen ***/
    
           /* ------ A ------ */
    
           /** Feste Breite der beiden Counter, abhaengig von Anzahl Ziffern, AUTO Anpassung für mit/ohne Klammern.
              Falls noetig => Werte erhoehen NUR bis Icons untereinander auf gleicher Hoehe sind **/
    
           /* Beispiel: 2 Ziffern plus Klammern, Systemfont Mac */
           #bmContent:is(
           [data-value1^='['],
           [data-value1^='(']) {
              --bm_width_one: 2.1em;
              --bm_width_two: 2.1em;
              }
           /* Beispiel: 2 Ziffern ohne Klammern, Systemfont Mac */
           #bmContent {
              --bm_width_one: 1.3em;
              --bm_width_two: 1.3em;
    
           /* ------ B ------ */
    
           /** Abstaende / Groessen fuer die Counter = Basisanpassungen **/
    
              /* Abstand mittig zwischen Counter #1 <=> Counter #2 / wird x2 benutzt */
              --bm_margin_mid: 8px;
    
              /* Groesse Icons = 16px Firefox Standard */
              --bm_icon_size: 16px;
    
              /* Abstand zwischen Icon und Ziffer */
              --bm_space: 4px;
              }
    
           /* ------ C ------ */
    
           /** Trennlinie , fuer trenner = 2/3 **/
    
           /* Feinabstimmung Zentrierung Mitte / Standard = 0px */
           #bmContent.trennclass {
              --bm_divider: 0px;
              }
           /* Fuer Reihenfolge/ Order = 1 */
           #bmContent.trennclass.order_2 {
              --bm_divider: 0.3em;
              }
           /* Element Trennlinie allgemein */
           #trennID {
              display: flex;
              align-items: center;
              font-size: calc(1em - 1px);        /* Hoehe, optional */
              padding-bottom: 1px;               /* ausrichten vertikal, optional */
              color: var(--trenn_color, currentColor);
              }
    
           /* ------ D ------ */
    
           /* Eigene Farben, fuer bm_colors = 1 */
           /* Farben Text / kompatible svg Icons aendern , anpassen nach Belieben */
           /* Info: HSL Farben: https://www.w3schools.com/css/css_colors_hsl.asp */
           /* Ordner Icon, Zahl / Links Icon, Zahl / Trennlinie */
           #bmContent.bm_my_colors {
              --folder_fill:  hsl(190, 60%, 20%, 1);
              --folder_color: hsl(190, 20%, 30%, 1);
              --link_fill:    hsl(35, 100%, 20%, 1);
              --link_color:   hsl(35, 60%, 30%, 1);
              --trenn_color:  hsl(250, 60%, 30%, 1);
              }
    
           /* Grad des Verblassens bei Zahl = 0, fuer bm_opacity_null = 1/2 */
           #bmContent {
              --bm_opacity: 50%;
              }
    
           /* ------ E ------ */
    
           /** Counter gesamt **/
    
           #bmContent {
              display: flex !important;
              -moz-context-properties: fill, fill-opacity;
              margin-left: auto !important;         /* Gesamt rechtsbuendig */
              /*margin-right: -8px !important;*/    /* Abstand rechts zu Pfeil > ist evtl. OS abhaengig, optional */
              height: var(--bm_icon_size);          /* Layout passt sich Icon Groesse an */
              padding-left: 8px;                    /* min. Abstand links Gesamt für enge Popups */
    
           /* Font Aenderungen , optional */
              /* font-family: Aenderungen nicht empfohlen => einheitlichen Standardfont behalten */
              /*font-size: 12px !important;*/       /* font-size */
              /*font-weight: 200 !important;*/      /* font-weight */
              }
    
           /* ------ F ------ */
    
           /** Optionale Extras **/
    
           /* Text vertikal ausrichten */
           /*
           #bmContent::after,
           #bmContent::before {
              padding-top: 3px;
              }
              */
    
           /* Pfeil rechts > bei Beidem = 0 */
           .bookmark-item.bm_chevron_00 > .menu-right,
           .bookmark-item.bm_chevron_00::after {
              fill: hsl(30, 100%, 50%, 1) !important;
              fill-opacity: 0.7 !important;
              }
    
           /* Hide empty Popup */
           .bookmark-item.bm_chevron_00 > menupopup[emptyplacesresult] {
              display: none !important;
              }
    
           /** Pfeil rechts > allgemein **/
           /*
           menu.bookmark-item .menu-right,
           menu.bookmark-item::after {
               fill: hsl(210, 100%, 50%, 1) !important;
               fill-opacity: 1 !important;
               }
               */
    
           /*** User Einstellungen Ende ***/
    
    
           /*** Feste Werte ***/
    
           /** Reihenfolge Varianten Icons / Ziffern **/
           /* order 0: Icons links / Ziffern rechts */
           #bmContent {
                --bm_padding_inline: calc(var(--bm_icon_size) + var(--bm_space)) 0;
                --bm_bg_position: center left;
                }
           /* order 1: Ziffern links / Icons rechts */
           #bmContent.order_2 {
                --bm_padding_inline: 0 calc(var(--bm_icon_size) + var(--bm_space));
                --bm_bg_position: center right;
                }
    
           /** Icons Varianten **/
           /* Eigene Icons, falls Icons existieren im icons Ordner */
           #bmContent {
                --bm_icon_image_1: url("${ProfilePath}/${bm_icon1}");
                --bm_icon_image_2: url("${ProfilePath}/${bm_icon2}");
                }
           /* Firefox Icons Fallback */
           #bmContent.icon_fallback_folder {
                --bm_icon_image_1: url("chrome://global/skin/icons/folder.svg");
                }
           #bmContent.icon_fallback_link {
                --bm_icon_image_2: url("chrome://browser/skin/bookmark-hollow.svg");
                }
    
           /** Anpassungen bei Zahl = 0 **/
           /* Verstecken #1 automatisch bei Trennlinie 1/3 , beides = 0 */
           #bmContent:is(.trennclass_1, .trennclass_3)::before {
                display: none !important;
                }
           /* Verstecken Icon #2 , Trennlinie 1/3 , beides = 0 */
           #bmContent.Null_1.Null_2:is(.trennclass_1, .trennclass_3)::after {
                /*content: "X";*/             /* eigener Inhalt */
                background-image: linear-gradient(transparent, transparent);
                }
           /* Verblassen Icon + Zahl, fuer #1 , #2 , Alles Zahl = 0 */
           #bmContent.opacity_Null:is(.Null_1:not(.Null_2), .Null_1.Null_2)::before,
           #bmContent.opacity_Null:is(.Null_2:not(.Null_1), .Null_1.Null_2)::after,
           #bmContent.opacity_Null:is(.Null_1, .Null_2) #trennID {
                filter: opacity(var(--bm_opacity));
                }
           /* Verblassen nur Zahl */
           #bmContent.opacity_Null_B:is(.Null_1:not(.Null_2), .Null_1.Null_2)::before {
                -webkit-text-fill-color: color-mix(in srgb, var(--folder_color, currentColor) var(--bm_opacity), transparent) !important;
                }
           #bmContent.opacity_Null_B:is(.Null_2:not(.Null_1), .Null_1.Null_2)::after {
                -webkit-text-fill-color: color-mix(in srgb, var(--link_color, currentColor) var(--bm_opacity), transparent) !important;
                }
    
           /** Counters (Zaehler) **/
           /* Counter #1 Ordner */
           #bmContent::before {
                content: attr(data-value1);
                display: flex;
                min-width: fit-content;
                width: var(--bm_width_one);
                padding-inline: var(--bm_padding_inline);
                align-items: center;
                justify-content: flex-end;
                margin-right: var(--bm_margin_mid);
                background-image: var(--bm_icon_image_1);
                background-position: var(--bm_bg_position);
                background-repeat: no-repeat;
                background-size: var(--bm_icon_size);
                color: var(--folder_color, currentColor) !important;
                fill: var(--folder_fill, currentColor) !important;
                }
           /* Counter #2 Links */
           #bmContent::after {
                content: attr(data-value2);
                display: flex;
                min-width: fit-content;
                width: var(--bm_width_two);
                padding-inline: var(--bm_padding_inline);
                align-items: center;
                justify-content: flex-end;
                margin-left: calc(var(--bm_margin_mid) - var(--bm_divider, 0px));
                background-image: var(--bm_icon_image_2);
                background-position: var(--bm_bg_position);
                background-repeat: no-repeat;
                background-size: var(--bm_icon_size);
                color: var(--link_color, currentColor) !important;
                fill: var(--link_fill, currentColor) !important;
                }
    		`;
            const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
            const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
            sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
    
            let bmbMenu = document.getElementById('bookmarks-menu-button');
            let bookMenu = document.getElementById('bookmarksMenu');
            let persToolBar = document.getElementById('PersonalToolbar');
            if(bmbMenu)
                bmbMenu.addEventListener('popupshowing', onPopupShowing );
            if(bookMenu)-
                bookMenu.addEventListener('popupshowing', onPopupShowing );
            if(persToolBar)
                persToolBar.addEventListener('popupshowing', onPopupShowing );
        }
        function onPopupShowing(aEvent) {
            let popup = aEvent.originalTarget;
            for (let item of popup.children) {
                if (item.localName != 'menu' || item.id?.startsWith('history'))
                    continue;
                setTimeout(() => {
                  let itemPopup = item.menupopup;
    			        itemPopup.hidden = true;
    			        itemPopup.collapsed = true;
                  itemPopup.openPopup();
                  itemPopup.hidePopup();
                  let menuitemCount = 0;
                  let menuCount = 0;
                  for (let subitem of itemPopup.children) {
                    if (subitem.classList.contains('bookmark-item') && !subitem.disabled && !subitem.hidden) {
                      if (subitem.localName == 'menuitem') {
                        menuitemCount++;
                      } else if (subitem.localName == 'menu') {
                        menuCount++;
                      }
                    }
                  }
    			        itemPopup.hidden = false;
    			        itemPopup.collapsed = false;
                  //Eigenes Element für Zaehler
                  let bmCounta = item.childNodes[1];
                  bmCounta.innerHTML = '';
                  let bmVario = document.createElement("bmElement");
                  bmVario.id = "bmContent";
                  bmCounta.appendChild(bmVario);
                  //Zaehler Design Optionen =>  ohne/ mit: runde, eckige Klammern
                  if (bm_bracket === 0) {
                      strCountOut1 = '' + menuCount + '';
                      strCountOut2 = '' + menuitemCount + '';
                      }
                  if (bm_bracket === 1) {
                      strCountOut1 = '(' + menuCount + ')';
                      strCountOut2 = '(' + menuitemCount + ')';
                      }
                  if (bm_bracket === 2) {
                      strCountOut1 = '[' + menuCount + ']';
                      strCountOut2 = '[' + menuitemCount + ']';
                      }
                  bmVario.setAttribute('data-value1', strCountOut1);
                  bmVario.setAttribute('data-value2', strCountOut2);
                  // Trennlinie Element
                  let trennelementVario = document.createElement("trennelement");
                  trennelementVario.id = "trennID";
                  // Trennlinie Varianten
                  if (trenner === 2 || trenner === 3 && menuCount !== 0) {
                      bmVario.appendChild(trennelementVario);
                      trennelementVario.textContent = trennzeichen;
                      bmVario.classList.add('trennclass');
                      }
                  if (trenner === 3 && menuCount === 0) {
                      bmVario.classList.add('trennclass_3');
                      }
                  if (trenner === 1 && menuCount === 0) {
                      bmVario.classList.add('trennclass_1');
                      }
                  // Extra class item / ganzes menu fuer 00
                  if (menuCount === 0 && menuitemCount === 0) {
                      item.classList.add('bm_chevron_00');
                      } else {
                         item.classList.remove('bm_chevron_00');
                         }
                  // Anpassungen fuer 00, #1 = 0, #2 = 0
                  if (menuCount === 0) {
                      bmVario.classList.add('Null_1');
                      }
                  if (menuitemCount === 0) {
                      bmVario.classList.add('Null_2');
                      }
                  // Reihenfolge Varianten Icons / Ziffern
                  if (bm_order === 1) {
                      bmVario.classList.add('order_2');
                      }
                  // Icons Auswahl
                  if (bm_icon_folder === 0) {
                      bmVario.classList.add('icon_fallback_folder');
                      }
                  if (bm_icon_link === 0) {
                      bmVario.classList.add('icon_fallback_link');
                      }
                  // Farben Auswahl
                  if (bm_colors === 1) {
                      bmVario.classList.add('bm_my_colors');
                      }
                  // Verblassen bei Anzeige = 0
                  if (bm_opacity_null === 1) {
                      bmVario.classList.add('opacity_Null');
                      }
                  if (bm_opacity_null === 2) {
                       bmVario.classList.add('opacity_Null_B');
                       }
                }, 100);
            }
        }
    })();
    Alles anzeigen

Unterstütze uns!

Jährlich (2025)

104,5 %

104,5% (679,10 von 650 EUR)

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