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

Horstmann

Zitat von Mira_Belle

Vorschlag.

Coool! Dankeschön.

PS: Ab Fx 139 sollte das alte Script nicht mehr funktionieren, und evtl. kommen dann Anfragen und weitere Kommentare; bis dahin lasse ich meine letzte Version wie sie ist - danach kommt dein Code mit rein.

Mira_Belle

Zitat von Horstmann

PS: Ab Fx 139 sollte das alte Script nicht mehr funktionieren, und evtl. kommen dann Anfragen und weitere Kommentare; ...

Nach Belieben veränder, zerpflücken und anpassen, funktioniert in der Nightly.

JavaScript

// BookmarkCount.uc.js

/* ******************************************************************************************************************* */
/* Author BrokenHeart               => https://www.camp-firefox.de/forum/thema/136572/?postID=1229536#post1229536 **** */
/* Correction from BrokenHeart      => https://www.camp-firefox.de/forum/thema/136572/?postID=1229696#post1229696 **** */
/* Extension from Sören Henschel    => https://www.camp-firefox.de/forum/thema/136572/?postID=1229555#post1229555 **** */
/* Customized by Mira inspired by grisu2099     ********************************************************************** */
/* Source                           => https://www.camp-firefox.de/forum/thema/136572/?postID=1229875#post1229883 **** */
/* Customized by Mira inspired by Horstmann     ********************************************************************** */
/* Source                           => https://www.camp-firefox.de/forum/thema/136572/?postID=1229993#post1229993 **** */
/* Adjustments for 139 and customized by Mira inspired by Horstmann     ********************************************** */
/* Source                           => https://www.camp-firefox.de/forum/thema/136572/?postID=1270254#post1270254 **** */
/* ******************************************************************************************************************* */
/* Version 1.01                     => https://www.camp-firefox.de/forum/thema/136572/?postID=1230128#post1230128 **** */
/* Version 1.02                     => https://www.camp-firefox.de/forum/thema/136572/?postID=1230334#post1230334 **** */
/* Version 1.03a                    => https://www.camp-firefox.de/forum/thema/136572/?postID=1270258#post1270258 **** */
/* ******************************************************************************************************************* */
/* Custom Counter in the Bookmarks for folders and links ************************************************************* */
/* ******************************************************************************************************************* */

(function() {

  if (!window.gBrowser)
      return;

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

  //Custom icons in profile/chrome/icons folder
  let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
  let icon1 = "folder-fat.svg";                     //  Custom  Folder Icon
  let icon2 = "bookmark-hollow.svg";                //  Custom  Link Icon              
  let icon3 = "arrow-right.svg";                    //  Custom  Arrow Icon

  // Custom settings
  let bm_font_size = 12; 
  let cs_font_weight = 700;
  let bm_icon_size = 16;

  // NEU: Schriftfarbe getrennt definieren
  //let cs_font_color_1 = "#FFA500";                 // Farbe für Folder-Zähler (links)
  //let cs_font_color_2 = "#00FFFF";                 // Farbe für Link-Zähler (rechts)
  let cs_font_color_1 = "#FFD700";                 // Farbe für Folder-Zähler (links)
  let cs_font_color_2 = "#FFD700";                 // Farbe für Link-Zähler (rechts)

  // NEU: Symbolfarber getrennt definieren 
  //let cs_icon_color_1 = "#5fe575";                 // Farbe für "Ordner", 1.Symbol
  //let cs_icon_color_2 = "#fbf328";                 // Farbe für "Link", 2.Symbol
  //let cs_icon_color_3 = "#bbf700";                 // Farbe für den Pfeil
  let cs_icon_color_1 = "#C0C0C0";                 // Farbe für "Ordner", 1.Symbol
  let cs_icon_color_2 = "#C0C0C0";                 // Farbe für "Link", 2.Symbol
  let cs_icon_color_3 = "#C0C0C0";                 // Farbe für den Pfeil


  // Calculated settings
  let cs_font_size = `${bm_font_size}px`;
  let cs_icon_size = `${bm_icon_size}px`;
  let cs_width_one = `calc(${bm_icon_size}px + 1.4em)`;
  let cs_width_uno = `calc(${bm_icon_size}px)`;
  let cs_width_two = `calc(${bm_icon_size}px + 1.4em)`;
  let cs_width_due = `calc(${bm_icon_size}px)`;

  //let useStyle1 = true; // <- HIER Weiche setzen: true = Variante 1, false = Variante 2
  let useStyle = 1; // <- HIER Weiche setzen:  0 = Symbole hinter den Zählern, 1 = Symbole vor den Zählern

  // Symbole vor den Zählern
  let css_one = `

    /* Counter #1 Folder */
    #bmContent::before {
      content: attr(data-value1) !important;
      width: ${cs_width_one} !important;
      align-items: center !important;
      display: flex !important;
      justify-content: end !important;
      /*margin-inline: 16px 4px;         */               /* min. Abstand links für enge Popups, rechts zum 2ten Counter */

      margin-left: 16px !important;                       /* Abstand links minimum für schmale Popus  CHANGE  */
      margin-right: -1px !important;                      /* Abstand Icon "Ordner" bis zum "Zähler" */ 

      background-image: url("${ProfilePath}/${icon1}")!important;
      background-position: center right calc(${cs_width_one} - ${cs_icon_size}) !important;
      background-repeat: no-repeat !important;
      background-size: ${cs_icon_size} ${cs_icon_size} !important;     
      color: ${cs_font_color_1} !important;               /* Farbe der 1. Zahl */
      fill: ${cs_icon_color_1} !important;                /* Farbe des 1. Symbols */
    }

    /* Counter #2 Links */
    #bmContent::after {
      content: attr(data-value2) !important;
      width: ${cs_width_two} !important;
      align-items: center !important;
      display: flex !important;
      justify-content: end !important;
      /*margin-inline: -2px;*/

      margin-left: 4px !important;                          /* Abstand "Zähler 1" zum Icon2 */
      margin-right: -1px !important;                        /* Abstand Icon "Links" bis zum "Zähler" */


      background-image: url("${ProfilePath}/${icon2}") !important;
      background-position: center right calc(${cs_width_two} - ${cs_icon_size}) !important;
      background-repeat: no-repeat !important;
      background-size: ${cs_icon_size} ${cs_icon_size} !important;            
      color: ${cs_font_color_2} !important;                 /* Farbe der 2. Zahl */
      fill: ${cs_icon_color_2} !important;                  /* Farbe des 2. Symbols */
    }
  `;

  // Symbole hinter den Zählern
  let css_two = `

    /* Counter #1 Folder */
    #bmContent::before {
      content: attr(data-value1) !important;
      width: ${cs_width_one} !important;
      align-items: center !important;
      display: flex !important;
      justify-content: end !important;
      background-image: url("${ProfilePath}/${icon1}")!important;
      background-position: center right calc(${cs_width_uno} - ${cs_icon_size}) !important;
      background-repeat: no-repeat !important;
      background-size: ${cs_icon_size} ${cs_icon_size} !important;     
      color: ${cs_font_color_1} !important;                 /* Farbe der 1. Zahl */
      fill: ${cs_icon_color_1} !important;                  /* Farbe des 1. Symbols */
      padding: 2px 20px 0px 10px !important;                /* top | right | bottom | left */
      /*margin-inline: 0px -10px; */

      margin-left: 16px !important;                         /* Abstand links minimum für schmale Popus  CHANGE  */
      margin-right: 12px !important;                        /* Abstand Icon "Ordner" bis zum "Zähler" */ 

    }

  	#bmContent::after {
			content: attr(data-value2) !important;
      width: ${cs_width_two} !important;
      align-items: center !important;
      display: flex !important;
      justify-content: end !important;
      /*justify-content: flex-end; */
      background-image: url("${ProfilePath}/${icon2}")!important;
      background-position: center right calc(${cs_width_due} - ${cs_icon_size}) !important;
      background-repeat: no-repeat !important;
      background-size: ${cs_icon_size} ${cs_icon_size} !important;            
      color: ${cs_font_color_2} !important;                 /* Farbe der 2. Zahl */
      fill: ${cs_icon_color_2} !important;                  /* Farbe des 2. Symbols */
			padding: 2px 22px 0 0 !important;                     /* top | right | bottom | left */

      margin-left: -14px !important;                        /* Abstand "Zähler 1" zum Icon2 */
      margin-right: -1px !important;                        /* Abstand Icon "Links" bis zum "Zähler" */

		}
  `;

  function setFunction() {

    const css =`

      /* Counter rechtsbuendig */
      #bmContent {
        display: flex !important;
        margin-inline: auto 0 !important;
        font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
        font-size: ${cs_font_size} !important;
        font-weight: ${cs_font_weight} !important;
        height: ${cs_icon_size} !important;
      }

      /* Dynamisch gewählter before-Block */
      ${useStyle ? css_one : css_two}

      /* Pfeil */
      menupopup > menu::after {
        content: "" !important;
        background-image: url("${ProfilePath}/${icon3}")!important;
        height: ${cs_icon_size} !important;
        height: ${cs_icon_size} !important;
        fill: ${cs_icon_color_3} !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;

          // Neues Element für Zaehler
          let bmCounta = item.childNodes[1];
            if (!bmCounta) return;                            // Falls undefiniert
          bmCounta.innerHTML = ""
          let bmContent = document.createElement("bmContent");
          bmContent.id = "bmContent";
          bmCounta.appendChild(bmContent);

          //let strCountOut1 = " " + menuCount + " ";         //  Has no brackets
          //let strCountOut1 = "(" + menuCount + ")";         //  Has round brackets
          //let strCountOut1 = "[" + menuCount + "]";         //  Has square brackets
          let strCountOut1 = String(menuCount).padEnd(2, " ");
          bmContent.setAttribute('data-value1', strCountOut1);

          //let strCountOut2 = " " + menuitemCount + " ";      //  Has no brackets
          //let strCountOut2 = "(" + menuitemCount + ")";      //  Has round brackets
          //let strCountOut2 = "[" + menuitemCount + "]";      //  Has square brackets
    //      let strCountOut2 = String(menuitemCount).padEnd(2, " ");
    //      bmContent.setAttribute('data-value2', strCountOut2);

          let strCountOut2 = (useStyle === 0) 
            ? String(menuitemCount).padStart(4, "/  ")
            : String(menuitemCount).padEnd(2, " ");
          bmContent.setAttribute('data-value2', strCountOut2);
          
        }, 100);
    }
  }
})();

Alles anzeigen

Mitleser

Geht denn das in FF 139?+:

EDIT: Quelltext geändert am 19.05.25 02:19 Uhr

JavaScript

// JavaScript Document
// M_NumOfBookmfold+Bookm_light.uc.js

// Fork of @BrokenHeart's code from https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1269879#post1269879

// Das Script erstellt einen Zusatz zu Menüeinträgen in Bookmark-Ordner-Dropdowns. 
// Der Zusatz besteht aus der Anzahl der beinhaltenden Ordner sowie aus der Anzahl der beinhaltenden Lesezeichen. Als trennendes Element zwischen Ordner und Lesezeichen wird ein Ordnersymbol als Icon eingefügt.
// Die Anzeige für Ordner oder Bookmarks ist für maximal 2-stellige Werte ausgelegt.
// Sollte kein Ordner sowie kein Lesezeichen vorhanden sein (der Ordner ist leer), erscheint ein Trashsymbol (als Aufforderung zur Löschung des leeren Ordners) und das  Pfeil-Symbol (Twisty) wird ausgeblendet.

(function() {

    if (!window.gBrowser)
        return;
    
setTimeout(function() {
	setFunction();
},50);

function setFunction() {
const
// ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
       iconFold = '16SWfolder-10_moz.svg',
     iconFoldOv = '16SWfolder-12_moz.svg',
      iconTrash = '16_Trash-03_moz.svg',      
   iconFillFold = '#b0b0b0',
 iconFillFoldOv = 'currentColor',
  iconFillTrash = '#f02228',
iconFillTrashOv = 'currentColor',
        fontCol = '#b0b0b0', 
      fontColOv = 'currentColor',

     iconPath = '/chrome/icons/',
// ■■ END UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■   
   curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir))
//const end 
const css =`
		 	 .countClass {
				justify-content: space-between !important;
			 }
             .countClass::after {
                content: attr(data-value); 
                color: ${fontCol};
				padding-right: 3px;
				background-image: url('${curProfDir}${iconPath}${iconFold}');
				fill: ${iconFillFold};
				background-repeat: no-repeat;
				background-size: 13px 13px;
				background-position: right 22px center;
				margin-right: -17px !important;
             }
menu:hover > .countClass::after {
				color: ${fontColOv};
				fill: ${iconFillFoldOv};
             }              
			 .countClass[data-value^='\xa0']::after {
				background-image: none;
			 }
menu:hover > .countClass:not([data-value^='\xa0'])::after {
				background-image: url('${curProfDir}${iconPath}${iconFoldOv}');
             }
             .countClass[data-value$='\xa0'][data-value^='\xa0'] ~ .menu-right image  {
            	fill-opacity: 1 !important;
				list-style-image: url('${curProfDir}${iconPath}${iconTrash}');
				fill: ${iconFillTrash};
				height: 13px;
				width: 13px;
				scale: 1.07;
				margin-right: 11px !important;
             }
menu:hover > .countClass[data-value$='\xa0'][data-value^='\xa0'] ~ .menu-right image  {
            	fill: ${iconFillTrashOv};
             }
         `;
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);
//----
const bmbMenu = document.getElementById('bookmarks-menu-button');
const bookMenu = document.getElementById('bookmarksMenu');
const 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) {
        
const 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]; //[1]links [3]rechts
     
              label.classList.add('countClass');

			  let menuDiv = '\xa0\xa0\xa0';
			  
			  if (menuCount == 0) {
			    menuDiv = '\xa0\xa0';
			    menuCount ='\xa0';
			  }
			  
			  if (menuitemCount == 0) {
			    menuitemCount ='\xa0';
			  }
		  
			  if (menuCount > 0 && menuitemCount == 0) {
				menuitemCount ='0';
			  }

			  if (menuCount > 0 && menuitemCount == '0') {
				menuitemCount =  '\xa0‒';
			  }
 
			  let strCountOut = String(menuCount).padStart(2,'') + menuDiv + String(menuitemCount).padStart(2,'\xa0');

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

Alles anzeigen

Horstmann

Zitat von Mira_Belle

Zitat von Horstmann

PS: Ab Fx 139 sollte das alte Script nicht mehr funktionieren, und evtl. kommen dann Anfragen und weitere Kommentare; ...

Nach Belieben veränder, zerpflücken und anpassen, funktioniert in der Nightly.

Wenn der Fx Release auf 139 wechselt, dann könnten die Rückfragen kommen; unsere neueren Versionen aus den letzten Wochen - seit grisu's Nachfrage für 139 Nightly - passen dann aber hoffentlich noch.

Horstmann

Zitat von Mitleser

Geht denn das in FF 139?+:

Das müsste mal jemand kurz testen der einfacheren Zugang zur Nightly hat, aber zumindest .menu-right gibt es wohl nicht mehr.

Mitleser

Zitat von Horstmann

aber zumindest .menu-right gibt es wohl nicht mehr.

Danke, das meine ich hier auch schon mal gelesen zu haben. Na ja, ist ja bisher nur der Twisty. Es gibt viel zu tun, warten wirs ab.

Horstmann

Ich weiß nicht was es ist, aber von diesem kleinen Script komm ich einfach nicht weg...
Schuld hat grisu2099 , mit seiner Reihenfolge und dem verdammten Schrägstrich-Trenner!

Danke nochmal an ihn für die Tips, und natürlich an Mira_Belle für die unermüdliche Hilfe mit dem Code.

JavaScript

//bmcount.uc.js, RC_3
//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 3 =>
//https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1272545#post1272545

//Danke an Mira_Belle für die JS Variablen, Grisu fuer viele Tips, und an alle Beteiligten und Tester!

//Eigenes Icon erwartet in Profilordner/chrome/icons , icons Ordner falls noetig erstellen
//Eigenes Icon, Name eintragen unten in ==> let icon1/2 = yourIcon...

//Basis Anpassungen =>
//Zaehler (Counter) #A anpassen (nur falls nötig), #B Reihenfolge waehlen, #C Feinabstimmung

(function() {

    if (!window.gBrowser)
        return;

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

    //Eigene Icons festlegen, falls vorhanden
    let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
    let icon1 = "YourFolderIcon.svg";        //  Custom  Folder Icon
    let icon2 = "YourLinkIcon.svg";          //  Custom  Link Icon

    // Variablen zur Auswahl der Klammern
    let bracket = 0; // 0 für "ohne Klammern", 1 für "runde Klammern", 2 für "eckige Klammern"

    // Variablen zur Auswahl der Trennlinie
    let trenner = 2; // 0 ohne Trennlinie, 1  mit Trennlinie, 2 mit Trennlinie nur bei Zähler #1 > 0

    function setFunction() {
        const css =`

       /*** Basiseinstellungen ***/

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

       /** Counter gesamt **/

       #bmContent {

       /** Gesamt **/

            display: flex !important;
            margin-left: auto !important;         /* Gesamt rechtsbuendig */
            margin-right: -8px !important;        /* Abstand rechts zu Pfeil > ist evtl. OS abhaengig */
            height: var(--bm_icon_size);          /* Layout passt sich Icon Groesse an */
            padding-left: 8px;                    /* min. Abstand links Gesamt für enge Popups */
            /* font */
            /*font-size: 12px !important;*/       /* font-size optional */
            /*font-weight: 200 !important;*/      /* font-weight optional */
            /* font-family: Aenderungen nicht empfohlen, um Standardfont zu behalten */

       /** Icons Varianten / ungewuenschte Varianten auskommentieren!!! **/

            /* Use Firefox Icons => */
            --bm_icon_image_1: url("chrome://global/skin/icons/folder.svg");
            --bm_icon_image_2: url("chrome://browser/skin/bookmark-hollow.svg");

            /* Eigene Icons, falls Icons existieren im icons Ordner => */
       /*   --bm_icon_image_1: url("${ProfilePath}/${icon1}");
            --bm_icon_image_2: url("${ProfilePath}/${icon2}");
            */

       /** #B: Reihenfolge Varianten Icons / Ziffern / ungewuenschte Variante auskommentieren!!! **/

            /* #1 Icons links / Ziffern rechts */
            --bm_padding_inline: calc(var(--bm_icon_size) + var(--bm_space)) 0;
            --bm_bg_position: center left;
            /**/

            /* #2 Ziffern links / Icons rechts */
     /*     --bm_padding_inline: 0 calc(var(--bm_icon_size) + var(--bm_space));
            --bm_bg_position: center right;
            */

       /** #C: Abstaende / Groessen Counter = Basisanpassungen **/

            /* Abstand mittig zwischen Counter #1 <=> Counter #2 */
            --bm_margin_mid: 16px;

            /* Groesse Icons = 16px Firefox Standard */
            --bm_icon_size: 16px;

            /* Abstand zwischen Icon und Ziffer */
            --bm_space: 3px;
       }

       /*** Basiseinstellungen Ende ***/


       /** Trennlinie Abstand Mitte **/
       #bmContent.trennclass {
         --bm_divider_A: calc(var(--bm_margin_mid)/2);
         /* Feinabstimmung Trennlinie, fuer Position Mitte */
         --bm_divider_B: 0px;
       }

       /** Counters **/

       /* 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: end;
            margin-right: calc(var(--bm_divider_A, 0px) + var(--bm_divider_B, 0px)) ;
            background-image: var(--bm_icon_image_1);
            background-position: var(--bm_bg_position);
            background-repeat: no-repeat;
            background-size: var(--bm_icon_size);
            /* Farben Text / svg Icons aendern => */
            /*color: hsl(155, 90%, 50%, 1) !important;*/
            /*fill: hsl(255, 70%, 50%, 1) !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: end;
            margin-left: calc(var(--bm_margin_mid) - var(--bm_divider_A, 0px));
            background-image: var(--bm_icon_image_2);
            background-position: var(--bm_bg_position);
            background-repeat: no-repeat;
            background-size: var(--bm_icon_size);
            /* Farben Text / svg Icons aendern => */
            /*color: hsl(155, 90%, 50%, 1) !important;*/
            /*fill: hsl(255, 70%, 50%, 1) !important;*/
            }


       /** Optionale Extras **/

       /** Anpassungen bei Zahl = 0 **/

        /* Verstecken / Verblassen #1 */
        #bmContent:is(
        [data-value1="[0]"],
        [data-value1="0"],
        [data-value1="(0)"])::before {
            /*opacity: 0.2;*/
            display: none;
            }

        /* Verstecken / Verblassen #2 */
        #bmContent:is(
        [data-value2="[0]"],
        [data-value2="0"],
        [data-value2="(0)"])::after {
            opacity: 0.5;
            }

        /* Verstecken Icon bei bei beides = 0 */
          .pfeil:is([data-value3="[0][0]"],
          [data-value3="00"],
          [data-value3="(0)(0)"]) #bmContent::after {
            /*opacity: 0;*/
            background-image: none;
            /*content: "X";*/
            }

        /* Pfeil rechts > bei beides = 0 */
        .pfeil:is([data-value3="[0][0]"],
        [data-value3="00"],
        [data-value3="(0)(0)"]) :where(.menu-right, menu::after) {
            fill: hsl(0, 100%, 50%, 1) !important;
            /*opacity: 0;*/
            }
		`;
        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 => mit/ohne, runde, eckige Klammern
              //let strCountOut1, strCountOut2;

              if (bracket === 0) {
                  strCountOut1 = "" + menuCount + "";
                  strCountOut2 = "" + menuitemCount + "";
              } else if (bracket === 1) {
                  strCountOut1 = "(" + menuCount + ")";
                  strCountOut2 = "(" + menuitemCount + ")";
              } else if (bracket === 2) {
                  strCountOut1 = "[" + menuCount + "]";
                  strCountOut2 = "[" + menuitemCount + "]";
              }

              bmVario.setAttribute('data-value1', strCountOut1);
              bmVario.setAttribute('data-value2', strCountOut2);

              // Trennlinie
              if (trenner === 1) {
                   bmVario.insertAdjacentText('beforeend', '/');}

              else if (trenner === 2 && menuCount !== 0) {
                   bmVario.insertAdjacentText('beforeend', '/');
                 };

              if (bmVario.innerHTML !== '') {
                   bmVario.classList.add('trennclass');
              };

              // Extra class und Attribut ganzes menu
              item.classList.add('pfeil');
              item.setAttribute('data-value3', strCountOut1 + strCountOut2);

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

Alles anzeigen

icons.zip

Mira_Belle

Sehr schöne Spielerei.
Das Skript lädt ja gerade zu dazu ein.

Farbspiele sind keine Herausforderung, weder bei den Symbolen,
wenn es sich um anpassbare SVG handelt, noch bei der Schriftfarbe.

Auch Größe und Schriftdicke sollten für Dich absolut kein Problem sein.

Aber, ich habe da noch was!
Ich habe gesehen, dass Du in einem Ordner über 180 Lesezeichen hast.
Also ich finde mach ja schon nicht mehr zurecht, wenn da mehr als 10 drin sind.

Wie wäre es, einen Schwellenwert zu definieren, darf natürlich der Nutzer selbst festlegen,
ab dem der Zählwert nicht mehr "normal" angezeigt wird, sondern FETT und ROT?
Wobei auch das Fett und die Schriftfarbe vom Nutzer "eingestellt" werden sollte.

Ich mein' ja nur, damit Dir am Ende nicht langweilig wird.

Horstmann

Zitat von Mira_Belle

Aber, ich habe da noch was!
Ich habe gesehen, dass Du in einem Ordner über 180 Lesezeichen hast.
Wie wäre es, einen Schwellenwert zu definieren, darf natürlich der Nutzer selbst festlegen,
ab dem der Zählwert nicht mehr "normal" angezeigt wird, sondern FETT und ROT?
Wobei auch das Fett und die Schriftfarbe vom Nutzer "eingestellt" werden sollte.
Ich mein' ja nur, damit Dir am Ende nicht langweilig wird.

Das ist nur ein Testprofil mit Testordnern/Links, um diverse Szenarien abzudecken.

Im übrigen: Gähn... (nur für Links > 99).

JavaScript

//bmcount.uc.js, RC_3b
//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 3b =>
//https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1272561#post1272561

//Danke an Mira_Belle für die JS Variablen, Grisu fuer viele Tips, und an alle Beteiligten und Tester!

//Eigenes Icon erwartet in Profilordner/chrome/icons , icons Ordner falls noetig erstellen
//Eigenes Icon, Name eintragen unten in ==> let icon1/2 = yourIcon...

//Basis Anpassungen =>
//Zaehler (Counter) #A anpassen (nur falls nötig), #B Reihenfolge waehlen, #C Feinabstimmung

(function() {

    if (!window.gBrowser)
        return;

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

    //Eigene Icons festlegen, falls vorhanden
    let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
    let icon1 = "YourFolderIcon.svg";        //  Custom  Folder Icon
    let icon2 = "YourLinkIcon.svg";          //  Custom  Link Icon

    // Variablen zur Auswahl der Klammern
    let bracket = 0; // 0 für "ohne Klammern", 1 für "runde Klammern", 2 für "eckige Klammern"

    // Variablen zur Auswahl der Trennlinie
    let trenner = 2; // 0 ohne Trennlinie, 1  mit Trennlinie, 2 mit Trennlinie nur bei Zähler #1 > 0

    function setFunction() {
        const css =`

       /*** Basiseinstellungen ***/

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

       /** Counter gesamt **/

       #bmContent {

       /** Gesamt **/

            display: flex !important;
            margin-left: auto !important;         /* Gesamt rechtsbuendig */
            margin-right: -8px !important;        /* Abstand rechts zu Pfeil > ist evtl. OS abhaengig */
            height: var(--bm_icon_size);          /* Layout passt sich Icon Groesse an */
            padding-left: 8px;                    /* min. Abstand links Gesamt für enge Popups */
            /* font */
            /*font-size: 12px !important;*/       /* font-size optional */
            /*font-weight: 200 !important;*/      /* font-weight optional */
            /* font-family: Aenderungen nicht empfohlen, um Standardfont zu behalten */

       /** Icons Varianten / ungewuenschte Varianten auskommentieren!!! **/

            /* Use Firefox Icons => */
            --bm_icon_image_1: url("chrome://global/skin/icons/folder.svg");
            --bm_icon_image_2: url("chrome://browser/skin/bookmark-hollow.svg");

            /* Eigene Icons, falls Icons existieren im icons Ordner => */
       /*   --bm_icon_image_1: url("${ProfilePath}/${icon1}");
            --bm_icon_image_2: url("${ProfilePath}/${icon2}");
            */

       /** #B: Reihenfolge Varianten Icons / Ziffern / ungewuenschte Variante auskommentieren!!! **/

            /* #1 Icons links / Ziffern rechts */
            --bm_padding_inline: calc(var(--bm_icon_size) + var(--bm_space)) 0;
            --bm_bg_position: center left;
            /**/

            /* #2 Ziffern links / Icons rechts */
     /*     --bm_padding_inline: 0 calc(var(--bm_icon_size) + var(--bm_space));
            --bm_bg_position: center right;
            */

       /** #C: Abstaende / Groessen Counter = Basisanpassungen **/

            /* Abstand mittig zwischen Counter #1 <=> Counter #2 */
            --bm_margin_mid: 16px;

            /* Groesse Icons = 16px Firefox Standard */
            --bm_icon_size: 16px;

            /* Abstand zwischen Icon und Ziffer */
            --bm_space: 3px;
       }

       /*** Basiseinstellungen Ende ***/


       /** Trennlinie Abstand Mitte **/
       #bmContent.trennclass {
         --bm_divider_A: calc(var(--bm_margin_mid)/2);
         /* Feinabstimmung Trennlinie, fuer Position Mitte */
         --bm_divider_B: 0px;
       }

       /** Counters **/

       /* 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: end;
            margin-right: calc(var(--bm_divider_A, 0px) + var(--bm_divider_B, 0px)) ;
            background-image: var(--bm_icon_image_1);
            background-position: var(--bm_bg_position);
            background-repeat: no-repeat;
            background-size: var(--bm_icon_size);
            /* Farben Text / svg Icons aendern => */
            /*color: hsl(155, 90%, 50%, 1) !important;*/
            /*fill: hsl(255, 70%, 50%, 1) !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: end;
            margin-left: calc(var(--bm_margin_mid) - var(--bm_divider_A, 0px));
            background-image: var(--bm_icon_image_2);
            background-position: var(--bm_bg_position);
            background-repeat: no-repeat;
            background-size: var(--bm_icon_size);
            /* Farben Text / svg Icons aendern => */
            /*color: hsl(155, 90%, 50%, 1) !important;*/
            /*fill: hsl(255, 70%, 50%, 1) !important;*/
            }


       /** Optionale Extras **/

       /** Anpassungen bei Zahl Links > 99 **/
       #bmContent.dreier::after {
         color: hsl(0, 90%, 50%, 1) !important;
         fill: hsl(0, 90%, 50%, 1) !important;
         font-weight: 800 !important;
       }

       /** Anpassungen bei Zahl = 0 **/

        /* Verstecken / Verblassen #1 */
        #bmContent:is(
        [data-value1="[0]"],
        [data-value1="0"],
        [data-value1="(0)"])::before {
            /*opacity: 0.2;*/
            display: none;
            }

        /* Verstecken / Verblassen #2 */
        #bmContent:is(
        [data-value2="[0]"],
        [data-value2="0"],
        [data-value2="(0)"])::after {
            opacity: 0.5;
            }

        /* Verstecken Icon bei bei beides = 0 */
          .pfeil:is([data-value3="[0][0]"],
          [data-value3="00"],
          [data-value3="(0)(0)"]) #bmContent::after {
            /*opacity: 0;*/
            background-image: none;
            /*content: "X";*/
            }

        /* Pfeil rechts > bei beides = 0 */
        .pfeil:is([data-value3="[0][0]"],
        [data-value3="00"],
        [data-value3="(0)(0)"]) :where(.menu-right, menu::after) {
            fill: hsl(0, 100%, 50%, 1) !important;
            /*opacity: 0;*/
            }
		`;
        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 => mit/ohne, runde, eckige Klammern
              //let strCountOut1, strCountOut2;

              if (bracket === 0) {
                  strCountOut1 = "" + menuCount + "";
                  strCountOut2 = "" + menuitemCount + "";
              } else if (bracket === 1) {
                  strCountOut1 = "(" + menuCount + ")";
                  strCountOut2 = "(" + menuitemCount + ")";
              } else if (bracket === 2) {
                  strCountOut1 = "[" + menuCount + "]";
                  strCountOut2 = "[" + menuitemCount + "]";
              }

              bmVario.setAttribute('data-value1', strCountOut1);
              bmVario.setAttribute('data-value2', strCountOut2);

              // Trennlinie
              if (trenner === 1) {
                   bmVario.insertAdjacentText('beforeend', '/');}

              else if (trenner === 2 && menuCount !== 0) {
                   bmVario.insertAdjacentText('beforeend', '/');
                 };

              if (bmVario.innerHTML !== '') {
                   bmVario.classList.add('trennclass');
              };

              if (menuitemCount > 99) {
                   bmVario.classList.add('dreier');
                 };

              // Extra class und Attribut ganzes menu
              item.classList.add('pfeil');
              item.setAttribute('data-value3', strCountOut1 + strCountOut2);

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

Alles anzeigen

Mira_Belle

Horstmann Mit "Freundin"?

Aber wenn Du jetzt JavaScript-Profi bist, kann ich mich ja immer an Dich wenden.

Och, habe gerade gesehen, dass Du das über CSS realisiert hast. Schade.
Mit JS geht es doch auch, nur schöner, wie ich finde.

Horstmann

Zitat von Mira_Belle

Horstmann Mit "Freundin"?
Aber wenn Du jetzt JavaScript-Profi bist, kann ich mich ja immer an Dich wenden.

Kein KI war involviert, und definitiv keine JS Expertise - nur mein übliches Rumgehacke bis es zu passen scheint.