Beiträge von Horstmann

Horstmann

Hier der Block, der sich geändert hat. Geht im Test-Skript von Zeile 30 bis Zeile 50. Alles andere braucht nicht angepasst werden:

JavaScript

        if(bmbMenu) {
			let bmbMenuPopup = document.getElementById('BMB_bookmarksPopup'); 
			if(bmbMenuPopup) {
				bmbMenuPopup.openPopup();
				bmbMenuPopup.hidePopup();
				bmbMenuPopup.setAttribute("hasbeenopened","true");
			}
            bmbMenu.addEventListener('popupshowing', onPopupShowing ); 
		}
        if(bookMenu) {
			let bookMenuPopup = document.getElementById('bookmarksMenuPopup');
			if(bookMenuPopup) {
				bookMenuPopup.openPopup();
				bookMenuPopup.hidePopup();
				bookMenuPopup.setAttribute("hasbeenopened","true");
			}
            bookMenu.addEventListener('popupshowing', onPopupShowing );
		}
        if(persToolBar) {
            persToolBar.addEventListener('popupshowing', onPopupShowing ); 
		}

Alles anzeigen

Leider ein kleines Problem, in diversen Scriptvarianten.

Im ersten Popup vom Lesezeichen Menu Button werden die Zähler zu weit nach rechts gerückt zum Pfeil > hin mit diesem Code, nicht aber mit den älteren Versionen.
Das bei rechtsbündigen Zählern, via zB margin-inline: auto 0;.

Wenn ich Zeilen 4+5 auskommentiere, ist das Problem behoben, weiss aber nicht ob das für die Funktion der Menüleiste gebraucht wird.

Anhang #1 Lesezeichenleiste Popup, #2 Lesezeichen Menu Popup alter Code, #3 Lesezeichen Menu Popup neuer Code.

Horstmann

Zitat von Mira_Belle

Waren meine Erklärungen nicht gut?

Doch, die waren prima.
Denke nur dass die meisten User fertigen Code brauchen, mit wenn dann einfachen optionalen Anpassungen.
Mit ein Hauptgrund weshalb wir bei den Versionen von dir, Mitleser und mir gelandet sind.

Horstmann

Zitat von mkpcxxl

so wie ich es möchte.
Gruß und schönes WE.

Prima!
Ebenfalls schönes WE.

Horstmann

Zitat von mkpcxxl

Das einzige, wenn ich padEnd in padStart ändere (wie von Mira_Belle in #620 beschrieben) ändert sich nichts.
Ich hätte die Symbole doch gerne vor den Zahlen. Die Frage ist wie ?

padEnd ist nur für die Ausrichtung der Zahlen, links- oder rechtsbündig.

Hier noch ein Code mit den Icons links, umgekehrt ist mit dabei, nur auskommentiert.

Feinabstimmung mit background-position, und den Leerzeichen "\xa0" ausserhalb von String(menuCount).padEnd(2, '\xa0') bzw. String(menuitemCount).padStart(3, '\xa0').

Edit: etwas aufgehübscht:

JavaScript

//bookmark_count_basic.uc.js
//Mitte Juli 2025
//Zeigt Anzahl der Lesezeichenordner und Links an in Lesezeichenpopups, Basisversion mit eigenen Icons
//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=1274984#post1274984
//Release =>
//https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1275152#post1275152

(function() {

    if (!window.gBrowser)
        return;

    setTimeout(function() {
        setFunction();
    },50);

    let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));

    function setFunction() {

        const css =`

       .countClass {
            /* Eigene Icons in chrome/icons Ordner benutzen */
            /*
            --bm_icon_image_1: url("${ProfilePath}/YourFolderIcon.svg");
            --bm_icon_image_2: url("${ProfilePath}/YourLinkIcon.svg");
            */
            /* Firefox Icons benutzen */
            --bm_icon_image_1: url("chrome://global/skin/icons/folder.svg");
            --bm_icon_image_2: url("chrome://browser/skin/bookmark-hollow.svg");

            --bm_icon_size: 16px;
            justify-content: space-between;
            }

       .countClass::after {
            content: attr(data-value);
            display: flex;
            align-items: center;
            max-height: var(--bm_icon_size);
            padding-block: 2px 0;              /* Text vertikal ausrichten, optional */
            /*margin-right: -12px;*/            /* Abstand rechts zu Pfeil > , optional */

            font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
            font-size: 12px !important;
            font-weight: 1000 !important;

            -webkit-text-fill-color: blue !important;
            fill: red !important;

            background-image: var(--bm_icon_image_1), var(--bm_icon_image_2);
            background-repeat: no-repeat;
            background-size: var(--bm_icon_size);

            /* Fuer Zahl links, s. JS Code ganz unten */
            /*
            background-position: right 4.33em center, right 0 center;
            padding-left: 8px;
            */

            /* Fuer Zahl rechts */
            background-position: right 5.833em center, right 2.166em center;
            padding-left: 30px;
            }
		`;
        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) {
			let bmbMenuPopup = document.getElementById('BMB_bookmarksPopup');
			if(bmbMenuPopup) {
				bmbMenuPopup.openPopup();
				bmbMenuPopup.hidePopup();
				bmbMenuPopup.setAttribute("hasbeenopened","true");
			  }
            bmbMenu.addEventListener('popupshowing', onPopupShowing );
		  }
		if(bookMenu) {
			let bookMenuPopup = document.getElementById('bookmarksMenuPopup');
			if(bookMenuPopup) {
				bookMenuPopup.openPopup();
				bookMenuPopup.hidePopup();
				bookMenuPopup.setAttribute("hasbeenopened","true");
			  }
            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;
              let bm_label = item.childNodes[1]; //label.menu-iconic-text
              bm_label.classList.add('countClass');

        // Zahl links
        //let strCountOut = String(menuCount).padEnd(2, '\xa0') + "\xa0\xa0\xa0\xa0" + String(menuitemCount).padEnd(3, '\xa0') + "\xa0\xa0\xa0";

        // Zahl rechts
        let strCountOut = String(menuCount).padStart(2, '\xa0') + "\xa0\xa0\xa0\xa0" + String(menuitemCount).padStart(3, '\xa0');

			  bm_label.setAttribute('data-value', strCountOut);

            }, 100);
        }
    }

})();

Alles anzeigen

Horstmann

Zitat von FuchsFan

Zitat von Horstmann

So kann man sie ändern, copy/paste, ganz einfach.

Ich danke dir, jetzt habe auch ich verstanden, dass es nur damit möglich ist.

Nicht unbedingt, da gab's auch schon sowas in der Art:

JavaScript

(function() {

    if (!window.gBrowser)
        return;

    setTimeout(function() {
        setFunction();
    },50);

    let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));

    function setFunction() {

        const css =`

       .countClass {
            /*
            --bm_icon_image_1: url("${ProfilePath}/YourFolderIcon.svg");
            --bm_icon_image_2: url("${ProfilePath}/YourLinkIcon.svg");
            */
            
            --bm_icon_image_1: url("chrome://global/skin/icons/folder.svg");
            --bm_icon_image_2: url("chrome://browser/skin/bookmark-hollow.svg");
          }

       .countClass::after {
            content: attr(data-value);
            display: flex;
            align-items: center;
		    font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
		    font-size: 12px !important;
		    font-weight: 1000 !important;

            -webkit-text-fill-color: blue !important;
            fill: red !important;

            background-image: var(--bm_icon_image_1), var(--bm_icon_image_2);
            background-position: right 4.33em center, right 0 center;
            background-repeat: no-repeat;
            background-size: 16px;

            margin-inline: auto 0 !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) {
			let bmbMenuPopup = document.getElementById('BMB_bookmarksPopup');
			if(bmbMenuPopup) {
				bmbMenuPopup.openPopup();
				bmbMenuPopup.hidePopup();
				bmbMenuPopup.setAttribute("hasbeenopened","true");
			}
            bmbMenu.addEventListener('popupshowing', onPopupShowing );
		}
        if(bookMenu) {
			let bookMenuPopup = document.getElementById('bookmarksMenuPopup');
			if(bookMenuPopup) {
				bookMenuPopup.openPopup();
				bookMenuPopup.hidePopup();
				bookMenuPopup.setAttribute("hasbeenopened","true");
			}
            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;

              let label = item.childNodes[1]; //label.menu-iconic-text
              label.classList.add('countClass');

        let strCountOut = String(menuCount).padEnd(2, '\xa0') + "\xa0" + "\xa0" + "\xa0" + "\xa0" + String(menuitemCount).padEnd(3, '\xa0') + "\xa0" + "\xa0" + "\xa0";

			  label.setAttribute('data-value', strCountOut);

            }, 100);
        }
    }

})();

Alles anzeigen

Horstmann

Zitat von Boersenfeger

Zitat: ... in welchem Thread das AutoPopUp.uc.js in der von mir geposteten Version vom 30.6. aus # 612 erstmalig im Forum aufgetaucht ist?

Kannst natürlich auch deine eigene Thread dafür aufmachen, weil das mit diesem Thema absolut gar nichts zu tun hat.

Horstmann

Zitat von Boersenfeger

Ich nutze dazu Autopopup.uc.js

Horstmann

Zitat von Boersenfeger

und dieses Script, es ist das aus #580 angepasst

Also willst du die Zahlen linksbündig haben, nicht wie in dem Script in #580?
Na dann.

Das Script in #580 ist das Ding unten übrigens, nicht der Codeblock oben zur Korrektur des Menüleiste Problems.
Will aber nicht kleinlich sein, Gedankenlesen gehört dazu.

Horstmann

Zitat von Mira_Belle

Zitat von Boersenfeger

Deine Änderung bewirkt leider nichts,

Äh, kann nicht sein! Die Zahlen sind rechtsbündig!

Denke Boersenfeger benutzt nicht die Version aus #580 wie behauptet, sondern irgendeinen alten Code mit linksbündigen Zahlen, wie in seinen Screenshots zu sehen ist.

Ich vermute auch, er hat mit Zahlen Zähler/Counter gemeint, was Zahl + Icon ist, wie du erklärt hast, während Zahlen nur die Zahlen sind.

Horstmann

Zitat von FuchsFan

Brauche ich nicht lesen, weil ich damit schon fertig werde. Wenn du es nicht verstanden haben solltest, es geht nur um das Test-Script von BrokenHeart , wie die Icons dort eingefügt wurden, und wie man diese ändern könnte.

So kann man sie ändern, copy/paste, ganz einfach.

Horstmann

Zitat von FuchsFan

Ich auch, aber die letzte Version von BrokenHeart aus meinem Beitrag #583 läuft prima. Ganz unten sind die Icon eingearbeitet, welche ich, wenn es gehen sollte, austauschen möchte.

Die Icons wie die von der von Andreas in #591 verlinkten Seite klappen nicht?
Falls du eigene Icons meinst, wie svgs, .pngs etc. auf deinem System, dann blätter ein paar 100 Beiträge zurück und lies bis hierher.

Horstmann

Zitat von BrokenHeart

Aber ich habe festgestellt, dass diese neue Version von mir das Hauptproblem, nämlich die nachträgliche Verbreiterung des Popups, nicht wie gehofft behebt . Was ich nicht verstehe, da ja alle Berechnungen vor der Sichtbarkeit des Popups durchgeführt werden .

Hmm, bei meinem Problem damit geht das als Lösung, mit meinem und deinem Script.
Wobei wir verschiedene Fx Versionen und OS zwischen uns haben.

Hättest du mal ein gif dazu - und hast du das Ganze in einem Testprofil, bzw. ohne irgendwelches externes CSS probiert?
Ohne darauf endlos rumreiten zu wollen, nur wenn's passt.

Horstmann

Zitat von BrokenHeart

Den einzigen Unterschied zwischen #1 und #2 sehe ich nur bei einem nachträglichen "Refresh" der unteren Zähler in #2, der ist bei #1 nicht vorhanden und daher sieht es hier etwas besser aus.

Also dieser "Refresh", das Problem habe ich schon länger in meinen Script Versionen, quer durch alle Popups.
Die Zähler werden teils, aber nicht alle, "refreshed" beim erneuten Öffnen des gleichen Popups.
Mit deinem Script gibt es das Problem nicht.

Ich hab mir schon den Wolf gesucht und ewig dagegen angetestet, aber ich befürchte dass mein Code etwas zu grob aufgebaut ist um die ganzen Vorgänge sauber auszuführen.

Ohne aufwendige Tests von dir zu erwarten, fällt dir evtl. auf die Schnelle etwas auf in meinem Code, das dahingehend optimiert werden könnte?
Aber das soll keine neue Baustelle werden, nur falls du oder sonst jemand einen schnellen Tip hätte!
Ich hänge das Gif nochmal an.

Horstmann

Zitat von BrokenHeart

Hier der Block, der sich geändert hat. Geht im Test-Skript von Zeile 30 bis Zeile 50. Alles andere braucht nicht angepasst werden:

Läuft hier nach erstem Testen tip-top, gefühlt etwas sauberer als meine Version!

Horstmann

Update:

Edit: Anpassung für Menüleiste, etwas Code Optimierung.

JavaScript

//bookmark_count.uc.js, RC_5.T Tresterschnaps
//Anfang Juli 2025
//Zeigt Anzahl der Lesezeichenordner und Links an in Lesezeichenpopups
//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.T: Fix Menueleiste Lesezeichen Popup von BrokenHeart
//https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1274978#post1274978

(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) {
      		let bmbMenuPopup = document.getElementById('BMB_bookmarksPopup');
      			if(bmbMenuPopup) {
        				bmbMenuPopup.openPopup();
        				bmbMenuPopup.hidePopup();
        				bmbMenuPopup.setAttribute("hasbeenopened","true");
        			}
            bmbMenu.addEventListener('popupshowing', onPopupShowing );
		    }
        if(bookMenu) {
      		let bookMenuPopup = document.getElementById('bookmarksMenuPopup');
      			if(bookMenuPopup) {
        				bookMenuPopup.openPopup();
        				bookMenuPopup.hidePopup();
                bookMenuPopup.setAttribute("hasbeenopened","true");
      		   	}
            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
              const bmCounta = item.childNodes[1];
              bmCounta.innerHTML = '';
              const bmVario = document.createElement("bmElement");
              bmVario.id = "bmContent";
              bmCounta.appendChild(bmVario);

              //Zaehler Design Optionen =>  ohne/ mit: runde, eckige Klammern
              let strCountOut1, strCountOut2;
              switch (bm_bracket) {
                case 0:
                   strCountOut1 = '' + menuCount + '';
                   strCountOut2 = '' + menuitemCount + '';
                  break;
                case 1:
                   strCountOut1 = '(' + menuCount + ')';
                   strCountOut2 = '(' + menuitemCount + ')';
                  break;
                case 2:
                   strCountOut1 = '[' + menuCount + ']';
                   strCountOut2 = '[' + menuitemCount + ']';
                  break;
              }
              bmVario.setAttribute('data-value1', strCountOut1);
              bmVario.setAttribute('data-value2', strCountOut2);

              // Anpassungen fuer 00, #1 = 0, #2 = 0
              if (menuCount === 0) {
                  bmVario.classList.add('Null_1');
                  }
              if (menuitemCount === 0) {
                  bmVario.classList.add('Null_2');
                  }
              // Verblassen bei Anzeige = 0
              if (bm_opacity_null === 1) {
                  bmVario.classList.add('opacity_Null');
                } else if (bm_opacity_null === 2) {
                     bmVario.classList.add('opacity_Null_B');
                     }
              // 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');
                     }

              // Trennlinie Element
              const 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');
                } else if (trenner === 3 && menuCount === 0) {
                    bmVario.classList.add('trennclass_3');
                } else if (trenner === 1 && menuCount === 0) {
                    bmVario.classList.add('trennclass_1');
                    }

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

            }, 100);
        }
    }
})();

Alles anzeigen

Horstmann

Zitat von Mira_Belle

Oh, Gott. Ja, das "nachladen" der Counter beim ersten Aufruf, egal welcher Lesezeichen, habe ich auch.
Nur geht das so schnell, dass es mich gar nicht stört!
Was die Breite angeht, die habe ich irgendwo festgezurrt, diesen Effekt, "dynamische" Breitenanpassung habe ich gar nicht!

Danke wieder mal für's Testen!

Übrigens: in meinem eigenen, tatsächlich benutzten Hauptprofil ist die Popupbreite für den Lesezeichenmenü Button auch festgemeisselt, es ist mit zusammen einigen anderen Anpassungen mein Hauptnavigator für Lesezeichen - und ich benutze dieses Script für die Zähler nicht in diesem Popup - der Code den wir gerade diskutieren ist bei mir auskommentiert.

Eigentlich benutze ich es nur für die Lesezeichenleiste Popups, und die Lesezeichenleiste benutze ich 2x im Monat, die Menüleiste/Lesezeichen Schaltfläche 2x im Jahr (am Mac geht das Script eh nicht an der Stelle).

Aber es geht um das Prinzip und das Kulturgut, gerade heute ist es wichtig dafür zu kämpfen!

Apropos, #570?

Horstmann

Zitat von Dharkness

Die Breite des Menupopups wird wohl dynamisch der Breite des Inhalts angepasst, deshalb wohl die sichtbare Änderung der Breite, ...

Hmm, das hat noch niemand erwähnt auf den letzten paar Seiten, und schon gar nicht im Detail beschrieben.

Zitat von BrokenHeart

Den einzigen Unterschied zwischen #1 und #2 sehe ich nur bei einem nachträglichen "Refresh" der unteren Zähler in #2, der ist bei #1 nicht vorhanden und daher sieht es hier etwas besser aus.

Das ist ein anderes Problem - Vorschläge willkommen.
Glaube mein Script hat Optimierungsbedarf.

In #1 werden die Zähler mit Verspätung geladen und angezeigt, und das Popup deshalb mit Verspätung in der Breite angepasst -> Ende der westlichen Zivilisation.

Übrigens, #570: geht, oder nada?

Horstmann

Einen hätte ich noch, falls das mal jemand in Windows und/oder Linux testen möchte:
Bin nicht optimistisch, aber falls es geht könnte es den Code verschlanken.

JavaScript

        //#5
        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) {
           bmbMenu.addEventListener('popupshown', onPopupShowing );
           bookMenu.addEventListener('popupshown', onPopupShowing );
           }

        if(persToolBar)
            persToolBar.addEventListener('popupshowing', onPopupShowing );

Alles anzeigen

Horstmann

Zitat von Mitleser

Zitat von Mira_Belle

Kann mir Blondine jemand mit einfachen Sätzen erklären, was dieses Skript tun soll?

Dann kannst Du diese Frage sicherlich beantworten.....

Steht doch eigentlich schon alles hier drin, die horizontale Popup Position wird gelesen via JS und angewendet im CSS.

Horstmann

Zitat von Mitleser

Zitat von Horstmann

Warnung: dieses JS ist modifiziertes AI, konnte sonst nix finden.

Frag doch einfach mal Deine Französin, auf diese Antwort wäre ich gespannt. Sozusagen Ki fragt AI...

ich wollte nur darauf hinweisen, den kleinen AI JS Code hatte ich ausführlich gegenrecherchiert, und verwandte Ergebnisse von stackoverflow etc. waren weitgehend identisch im Codeaufbau- ich brauchte va etwas Hilfe für die spezifische Einbindung in Fx.

Beiträge von Horstmann

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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