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

FuchsFan

Zitat von Mira_Belle

Du hast das mit den Pfeilen doch selbst verursacht!!!

Neeeeeeee, damit hat es funktioniert.

Zitat von Mira_Belle

Es sollte dann so aussehen:

Damit werden die Pfeile wieder in allen Menüs gezeigt. Nicht gut!!!

Zitat von Horstmann

Zitat von Mira_Belle

Lösche mal alles "unter" /* Pfeil */
und ersetze es einfach NUR durch menupopup > menu::after {

Ohne jetzt meine Nigthly Maschine anzuwerfen, und auf dem Mac ist es sowieso nochmal anders: würde das nicht auch andere Pfeile ausserhalb der Bookmark Popups betreffen, zB Kontextmenus, wie etwas bei Rechtsklick auf Tabs?
Also evtl. sowas wie .bookmark-item::after, oder .bookmark-item menu::after ?
Was wir hier schon mal diskutiert hatten, glaub ich.
Aber egal, den Wust an Code von FF für die ganzen Details brauchts wohl nicht, va wenn man alle Bookmarks Pfeile ohne Beschränkung ansprechen will, da haste recht.

.bookmark-item::after , damit funktioniert es. Danke!

Nun fehlt nur noch in Miras Script, dass die Zahlen bei den Ordnern rechtsbündig sind. Wie machen?

Mira_Belle

Sorry, habe es irgendwie falsch verstanden!

Ändere ganz unten let strCountOut1 = String(menuCount).padEnd(2, " ");

in let strCountOut1 = String(menuCount).padStart(2, " ");.

FuchsFan

Zitat von Mira_Belle

Ändere ganz unten let strCountOut1 = String(menuCount).padEnd(2, " ");
in let strCountOut1 = String(menuCount).padStart(2, " ");.

Perfekt! Danke!

Horstmann

Ein Versuch für eine angepasste Version für omar1979 , wie hier angefragt.

Das sollte funktionieren, indem nur die Icons in Zeilen 25-27 eingetragen werden, sofern sie in chrome/icons sind.
Die Ziffern sind rechtsbündig, was sich ändern ließe, und der Font(family) ist Standard.

JavaScript

//bmcount.uc.js, RC_4
//Ende Mai 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 4 =>
//https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1272829#post1272829
//JS Hilfe von Mira_Belle
//Omar Version

(function() {

    if (!window.gBrowser)
        return;

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

    //Einstellungen Javascript =>

    //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 icon1 = 'YourFolderIcon.svg';        //  Custom  Folder Icon
    let icon2 = 'YourLinkIcon.svg';          //  Custom  Link Icon
    let iconPfeil = 'YourLinkIcon.svg';      //  Custom  Pfeil Icon

    //Variablen zur Auswahl der Icons; kein Auto Fallback falls eigenes Icon nicht vorhanden
    let icon_folder = 1    // Ordner: 0 Firefox Fallback Icon / 1 eigenes Icon
    let icon_link = 1      // Links: 0 Firefox Fallback Icon / 1 eigenes Icon

    //Variablen zur Auswahl der Klammern
    let bracket = 0;       //  0 keine Klammern, 1 runde Klammern, 2 eckige Klammern
    //Variablen zur Auswahl der Reihenfolge
    let order = 0;         //  0 Icons links Ziffern rechts / 1 Ziffern links Icons rechts
    //Variablen zur Auswahl der Farben
    let bm_colors = 1;     //  0 Standardfarben, 1 eigene Farben benutzen

    //Variablen zur Auswahl der Trennlinie
    // 0 ohne Trennlinie
    // 1 ohne Trennlinie + Zaehler #1 = 0 + Icon #2 wird versteckt
    // 2 mit Trennlinie
    // 3 mit Trennlinie nur bei Zaehler #1 > 0 + Zaehler #1 = 0 + Icon #2 wird versteckt
    let trenner = 0;
    // Trennlinie Inhalt, beliebiges Textzeichen
    let trennzeichen = '|';

    //Spielerei Trennlinie Inhalt, experimentell, nur so
    //let trennzeichen = '<img src="chrome://browser/skin/bookmark-hollow.svg" alt="/" />';  // Bild
    //let trennzeichen = '<div id="trenn_div" style="background:linear-gradient(to right, lightblue, orange); height: 16px; width: 40px;" ></div>'; // Element

    function setFunction() {
        const css =`

       /*
       Einstellungen CSS =>
       #A Zaehler (Counter) anpassen (nur falls noetig),
       #B Feinabstimmung allgemein,
       #C Feinabstimmung Zentrierung Trennlinie,
       #D eigene Farben anpassen
       */

       /*** 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.4em;
          --bm_width_two: 1.4em;

       /* B */
       /** Abstaende / Groessen fuer die Counter = Basisanpassungen **/

          /* Abstand mittig zwischen Counter #1 <=> Counter #2 / wird x2 benutzt */
          --bm_margin_mid: 6px;

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

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

       /* C */
       /** Trennlinie Feinabstimmung Zentrierung Mitte / Standard = 0px **/
       #bmContent.trennclass {
          color: var(--trenn_color, initial);
          --bm_divider: 0px;
          }

       /* D */
       /* Farben Text / svg! Icons aendern , anpassen nach Belieben */
       /* HSL Farben: https://www.w3schools.com/css/css_colors_hsl.asp */
       /* Ordner Icon, Zahl / Links Icon, Zahl / Trennlinie */
       #bmContent.bm_my_colors {
          --folder_fill:  #c0c0c0;
          --folder_color: yellow;
          --link_fill:    var(--folder_fill);
          --link_color:   var(--folder_color);
          --trenn_color:  var(--folder_color);
          }

       /** Pfeil rechts eigenes Icon **/
       menu.bookmark-item::after {
             background-image:  url("${ProfilePath}/${iconPfeil}") !important;
             fill-opacity: 1 !important;
             }

       /** Counter gesamt **/
       #bmContent {
            display: flex !important;
            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 */
            /*font-family:  Consolas, "Lucida Console", "Courier New", monospace !important; */
            font-size: 12px !important;       /* font-size */
            font-weight: 900 !important;      /* font-weight */
            }

       /*** 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}/${icon1}");
            --bm_icon_image_2: url("${ProfilePath}/${icon2}");
            }
       /* Firefox Icons Fallback */
       #bmContent:is(.icon_fallback_folder, icon_fallback_link) {
            --bm_icon_image_1: url("chrome://global/skin/icons/folder.svg");
            --bm_icon_image_2: url("chrome://browser/skin/bookmark-hollow.svg");
            }
       /** Trennlinie Extras **/
       /* 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";*/
            background-image: linear-gradient(transparent, transparent);
            }

       /** 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, initial) !important;
            fill: var(--folder_fill, initial) !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, initial) !important;
            fill: var(--link_fill, initial) !important;
            }

       /*** Feste Werte Ende ***/


       /** Optionale Extras **/

       /* Text vertikal ausrichten */
       /*
       #bmContent::after,
       #bmContent::before {
          outline: 1px solid red;
          padding-top: 3px;
          }
          */


       /** Anpassungen bei Zahl = 0 **/

       /* Verblassen fuer #1 , #2 , Alles = 0 */
       /*
       #bmContent.Null_1:not(.Null_2)::before,
       #bmContent.Null_2:not(.Null_1)::after,
       #bmContent.Null_1.Null_2 {
            opacity: 0.5;
            }
            */

       /* Pfeil rechts > bei Beidem = 0 , optional */
       /*
       menu.bookmark-item.bm_chevron_00 .menu-right,
       menu.bookmark-item.bm_chevron_00::after {
            fill: hsl(30, 100%, 50%, 1) !important;
            fill-opacity: 1 !important;
            }
            */

       /** Pfeil rechts Farbe allgemein, optional **/
       /*
       menu.bookmark-item .menu-right,
       menu.bookmark-item::after {
             fill: hsl(210, 100%, 50%, 1) !important;
             fill-opacity: 1 !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 newbarMenu = document.getElementById('fp-statusbar-1');
        let bmbMenu = document.getElementById('bookmarks-menu-button');
        let bookMenu = document.getElementById('bookmarksMenu');
        let persToolBar = document.getElementById('PersonalToolbar');

        if(newbarMenu)
            newbarMenu.addEventListener('popupshowing', onPopupShowing );
        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 (bracket === 0) {
                  strCountOut1 = '' + menuCount + '';
                  strCountOut2 = '' + menuitemCount + '';
                  }
              if (bracket === 1) {
                  strCountOut1 = '(' + menuCount + ')';
                  strCountOut2 = '(' + menuitemCount + ')';
                  }
              if (bracket === 2) {
                  strCountOut1 = '[' + menuCount + ']';
                  strCountOut2 = '[' + menuitemCount + ']';
                  }
              bmVario.setAttribute('data-value1', strCountOut1);
              bmVario.setAttribute('data-value2', strCountOut2);

              // Trennlinie
              if (trenner === 2 || trenner === 3 && menuCount !== 0) {
                   bmVario.insertAdjacentHTML('beforeend', 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, #1 = 0, #2 = 0
              if (menuCount === 0 && menuitemCount === 0) {
                   item.classList.add('bm_chevron_00');
                   } else {
                        item.classList.remove('bm_chevron_00');
                        }

              if (menuCount === 0) {
                   bmVario.classList.add('Null_1');
                   }
              if (menuitemCount === 0) {
                   bmVario.classList.add('Null_2');
              }

              // Reihenfolge Varianten Icons / Ziffern
              if (order === 1) {
                  bmVario.classList.add('order_2');
              }

              // Icons Auswahl
              if (icon_folder === 0) {
                  bmVario.classList.add('icon_fallback_folder');
                  }
              if (icon_link === 0) {
                  bmVario.classList.add('icon_fallback_link');
              }

              // Farben Auswahl
              if (bm_colors === 1) {
                  bmVario.classList.add('bm_my_colors');
                  }

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

Alles anzeigen

omar1979

Zitat von Horstmann

Ein Versuch für eine angepasste Version für omar1979 , wie hier angefragt.
Das sollte funktionieren, indem nur die Icons in Zeilen 25-27 eingetragen werden, sofern sie in chrome/icons sind.
Die Ziffern sind rechtsbündig, was sich ändern ließe, und der Font(family) ist Standard.

ok danke für das Script, aber es wird nur hier angezeigt:

Dafür hier leider nicht nicht:

Mira_Belle

Also bei mir funktioniert es! Eventuell musst Du das Menü ein zweites Mal aufrufen.

Und setze Mal ein 01_ vor den Skriptnamen!
Also z.B. 01_bmcount.uc.js damit das Skript als allererstes geladen wird.

Horstmann

Zitat von omar1979

ok danke für das Script, aber es wird nur hier angezeigt
Dafür hier leider nicht nicht:

Ist das eine eigene Leiste?

Ich wusste doch da war noch was, wir hatten dein Script ja extra dafür angepasst!
Ausgehend von deinem Script, habe ich deine Leiste eingefügt in Zeile 257 und 262/263; probier bitte den neuen Code von oben #485 komplett statt dem alten.

omar1979

Zitat von Horstmann

Ist das eine eigene Leiste?
Ich wusste doch da war noch was, wir hatten dein Script ja extra dafür angepasst!
Ausgehend von deinem Script, habe ich deine Leiste eingefügt in Zeile 257 und 262/263; probier bitte den neuen Code von oben #485 komplett statt dem alten.

ja damals hat aborix glaub ich das script speziell gemacht, dass man es ausserhalb von lesezeichen-symbolleiste auf andere zusatzleisten benützen kann. ist mir jetzt in den sinn gekommen.

omar1979

Vielen Dank allen, speziell dir Horstmann

Mit deinem Script in #485 und dem von aborix zeigt es alles so, wie es soll.

Und hier noch die Code, zum anzeigen der Ordner und Links zuoberst im Popups (PS: Die Funktionierte)

JavaScript

//Fügt in den Lesezeichen Ordner ganz oben die Anzahl von Links und Ordner hinzu.
(function() {

  if (!window.gBrowser)
    return;

  function setFunction() {
    PlacesViewBase.prototype._mayAddCommandsItems =
    function PVB__mayAddCommandsItems(aPopup) {
      let hasMultipleURIs = false;
      let menuitemCount = 0;
      let menuCount = 0;
      if (aPopup._placesNode.childCount > 0) {
        for (let item of aPopup.children) {
          if (item._placesNode) {
            if (item.localName == 'menuitem') {
              menuitemCount++;
            } else if (item.localName == 'menu') {
              menuCount++;
            }
          }
        }
        if (menuitemCount > 0 || menuCount > 0) {
          hasMultipleURIs = true;
        }
      }
      if (!hasMultipleURIs)  {
        aPopup.setAttribute("nofooterpopup", "true");
        if (aPopup._endOptOpenAllInTabs) {
          aPopup.removeChild(aPopup._endOptOpenAllInTabs);
          aPopup._endOptOpenAllInTabs = null;
          aPopup.removeChild(aPopup._endOptSeparator);
          aPopup._endOptSeparator = null;
        }
        return;
      }

      aPopup.removeAttribute("nofooterpopup");
      if (!aPopup._endOptOpenAllInTabs) {
        aPopup._endOptSeparator = document.createXULElement("menuseparator");
        aPopup._endOptSeparator.className = "bookmarks-actions-menuseparator";
        aPopup.insertBefore(aPopup._endOptSeparator, aPopup.firstChild);
        aPopup._endOptOpenAllInTabs = document.createXULElement("menuitem");
        aPopup._endOptOpenAllInTabs.className = "openintabs-menuitem";
        if (this.options?.extraClasses?.entry) {
          aPopup._endOptOpenAllInTabs.classList.add(
            this.options.extraClasses.entry
          );
        }
        aPopup._endOptOpenAllInTabs.setAttribute(
          "oncommand",
          "PlacesUIUtils.openMultipleLinksInTabs(this.parentNode._placesNode, event, " +
            "PlacesUIUtils.getViewForNode(this));"
        );
        aPopup._endOptOpenAllInTabs.setAttribute(
          "onclick",
          "checkForMiddleClick(this, event); event.stopPropagation();"
        );
        aPopup.insertBefore(aPopup._endOptOpenAllInTabs, aPopup.firstChild);
      }


      let label = menuCount + " Ordner";
        label += " / " + menuitemCount + " Link"
        if (menuitemCount != 1) {
          label += "s";
        }

        if (menuitemCount == 1) {
          label += " -> Link in Tab öffnen."
        } else if (menuitemCount > 1) {
          label += " -> Links in Tabs öffnen."
        }

      aPopup._endOptOpenAllInTabs.setAttribute("label", label);
    }
  }

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

Alles anzeigen

Horstmann

Zitat von omar1979

ja damals hat aborix glaub ich das script speziell gemacht, dass man es ausserhalb von lesezeichen-symbolleiste auf andere zusatzleisten benützen kann. ist mir jetzt in den sinn gekommen.

Um den Dreh rum.
Ist so lange her, ich hab mich erst jetzt daran erinnert...

~~Und, klappt es jetzt, mit dem angepassten Script von #485?~~
Edit, Post hat sich überschnitten.

Zitat von omar1979

Mit deinem Script in #485 und dem von aborix zeigt es alles so, wie es soll.

omar1979

Zitat von Horstmann

Um den Dreh rum.
Ist so lange her, ich hab mich erst jetzt daran erinnert...
Und, klappt es jetzt, mit dem angepassten Script von #485?

Jupp Danke. Siehe mein Beitrag, dass sich mit deins überquert hat.

Horstmann

Hatte hier deutliche Probleme mit der opacity Performance, wo und falls benutzt.
Daher ein Update, plus noch ein paar kleinere Änderungen.

Wie zuvor, das Script sollte in dieser Konfiguration ohne Modifikationen, und ohne eigene Icons haben zu müssen funktionieren.
Optionale Einstellungen gibt es wie gehabt.

Nachtrag: RC5b mit filter: opacity(x); statt opacity: x; scheint Performance Probleme zu lösen.

JavaScript

//bookmark_count.uc.js, RC_5b
//Anfang Juni 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 5b =>
//https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1273433#post1273433

(function() {

    if (!window.gBrowser)
        return;

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

    //Einstellungen Javascript =>

    //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 icon1 = 'YourFolderIcon.svg';        //  Custom  Folder Icon
    let icon2 = 'YourLinkIcon.svg';          //  Custom  Link Icon

    //Variablen zur Auswahl der Icons; kein Auto Fallback falls eigenes Icon nicht vorhanden
    let icon_folder = 0;    // Ordner: 0 Firefox Fallback Icon / 1 eigenes Icon
    let icon_link = 0;      // Links: 0 Firefox Fallback Icon / 1 eigenes Icon

    //Variablen zur Auswahl der Klammern
    let bracket = 0;       //  0 keine Klammern, 1 runde Klammern, 2 eckige Klammern
    //Variablen zur Auswahl der Reihenfolge
    let 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

    //Variablen zur Auswahl der Trennlinie
    // 0 ohne Trennlinie
    // 1 ohne Trennlinie + Zaehler #1 = 0 + Icon #2 wird versteckt
    // 2 mit Trennlinie
    // 3 mit Trennlinie nur bei Zaehler #1 > 0 + Zaehler #1 = 0 + Icon #2 wird versteckt
    let trenner = 2;
    // Trennlinie Inhalt, beliebiges Textzeichen
    let trennzeichen = '|';

    function setFunction() {
        const css =`

       /*
       Einstellungen CSS , OPTIONAL =>
       #A Zaehler (Counter) anpassen,
       #B Feinabstimmung allgemein,
       #C Feinabstimmung Zentrierung Trennlinie,
       #D Eigene Farben anpassen
       #E Optionale Extras anpassen
       */

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

       /* Feinabstimmung Zentrierung Mitte / Standard = 0px */
       #bmContent.trennclass {
          --bm_divider: 0px;
          }
       /* Fuer 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: 2px;              /* ausrichten vertikal, optional */
          color: var(--trenn_color, initial);
          }

       /* D */
       /* Farben Text / 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);
          }

       /** Counter gesamt **/
       #bmContent {
            display: flex !important;
            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 */
            }

       /*** 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}/${icon1}");
            --bm_icon_image_2: url("${ProfilePath}/${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");
            }
       /** Trennlinie Extras **/
       /* 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";*/
            background-image: linear-gradient(transparent, transparent);
            }

       /** 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, initial) !important;
            fill: var(--folder_fill, initial) !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, initial) !important;
            fill: var(--link_fill, initial) !important;
            }

       /*** Feste Werte Ende ***/


       /* E */
       /** Optionale Extras **/

       /* Text vertikal ausrichten */
       /*
       #bmContent::after,
       #bmContent::before {
            padding-top: 3px;
            }
            */

       /** Anpassungen bei Zahl = 0 **/

       /* Verblassen fuer #1 , #2 , Alles = 0 */
       #bmContent:is(.Null_1:not(.Null_2), .Null_1.Null_2)::before,
       #bmContent:is(.Null_2:not(.Null_1), .Null_1.Null_2)::after,
       #bmContent:is(.Null_1:not(.Null_2), .Null_1.Null_2) #trennID {
            filter: opacity(50%);
            }

       /* Pfeil rechts > bei Beidem = 0 */
       menu.bookmark-item.bm_chevron_00 > .menu-right,
       menu.bookmark-item.bm_chevron_00::after {
            fill: hsl(30, 100%, 50%, 1) !important;
            fill-opacity: 1 !important;
            }

       /** Pfeil rechts Farbe allgemein **/
       /*
       menu.bookmark-item .menu-right,
       menu.bookmark-item::after {
             fill: hsl(210, 100%, 50%, 1) !important;
             fill-opacity: 1 !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 (bracket === 0) {
                  strCountOut1 = '' + menuCount + '';
                  strCountOut2 = '' + menuitemCount + '';
                  }
              if (bracket === 1) {
                  strCountOut1 = '(' + menuCount + ')';
                  strCountOut2 = '(' + menuitemCount + ')';
                  }
              if (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";

              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, #1 = 0, #2 = 0
              if (menuCount === 0 && menuitemCount === 0) {
                   item.classList.add('bm_chevron_00');
                   } else {
                        item.classList.remove('bm_chevron_00');
                        }
              if (menuCount === 0) {
                   bmVario.classList.add('Null_1');
                   }
              if (menuitemCount === 0) {
                   bmVario.classList.add('Null_2');
              }

              // Reihenfolge Varianten Icons / Ziffern
              if (order === 1) {
                  bmVario.classList.add('order_2');
              }

              // Icons Auswahl
              if (icon_folder === 0) {
                  bmVario.classList.add('icon_fallback_folder');
                  }
              if (icon_link === 0) {
                  bmVario.classList.add('icon_fallback_link');
              }

              // Farben Auswahl
              if (bm_colors === 1) {
                  bmVario.classList.add('bm_my_colors');
                  }

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

Alles anzeigen

Endor

Hallo Horstmann .
Danke für Dein Script. Funktioniert sehr gut. Nur eine Frage
wo im Script kann ich die Farbe des Textes der Ordneranzahl ändern.

Habe es hier probiert, Absatz D ab Zeile 109, da wirkt es nur für die Lesezeichen.

Code

       /* D */
       /* Farben Text / 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(0, 100%, 50%, 1));
          --folder_color: hsl(0, 100%, 50%, 1));
          --link_fill:    hsl(0, 100%, 50%, 1);
          --link_color:   hsl(0, 100%, 50%, 1);
          --trenn_color:  hsl(250, 60%, 30%, 1);
          }

Alles anzeigen

Mfg.
Endor

Horstmann

Zitat von Endor

Nur eine Frage
wo im Script kann ich die Farbe des Textes der Ordneranzahl ändern.

Habe es hier probiert, Absatz D ab Zeile 109, da wirkt es nur für die Lesezeichen.

Code

       /* D */
       /* Farben Text / 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(0, 100%, 50%, 1));
          --folder_color: hsl(0, 100%, 50%, 1));
          --link_fill:    hsl(0, 100%, 50%, 1);
          --link_color:   hsl(0, 100%, 50%, 1);
          --trenn_color:  hsl(250, 60%, 30%, 1);

Bei --folder_fill und --folder_color hast du zwei )) Klammern am Ende des HSL Codes, sollte nur eine sein jeweils.

Oder schreib einfach red statt hsl(0, 100%, 50%, 1), HSL ist nicht nötig, mag ich selber nur lieber.

Endor

Klammer weg und nun geht es auch.
Es lag also an den Tomaten auf meinen Augen....
Vielen Dank für Deine Hilfe Horstmann .
Tolles Script. Darf ich das bei mir auf Github hoch laden?
Mfg.
Endor

Horstmann

Zitat von Endor

Klammer weg und nun geht es auch.
Darf ich das bei mir auf Github hoch laden?

Darfst du?
Wenn du etwas für gut genug hältst, lad hoch!

Bei der Gelegenheit, und weil es nicht für selbstverständlich gehalten werden sollte: herzlichen Dank für deine unermüdlichen Bemühungen; was du in deiner Repo zusammen gestellt hast und unterhältst, ist nicht nur für mich seit Jahren eine unbezahlbare Quelle!

Endor

Hallo Horstmann.
Vielen Dank!

Habe Deine Version nun hoch geladen.

userChrome.js/Firefox 139/bookmark_count.uc.js at master · Endor8/userChrome.js

Skripte für die Firefox-Erweiterung userChromeJS. Contribute to Endor8/userChrome.js development by creating an account on GitHub.

github.com

Vielen Dank nochmals.
Mfg.
Endor

Horstmann

Auf lautstarkes Verlangen der schweigenden Mehrheit - ein Update!

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

Mira_Belle

Horstmann Das Ding lässt Dir einfach keine Ruh', was?

Brauchst Du was Neues? Ich hätte da eventuell was!
(Ich habe einen Wunsch)

Horstmann

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.