Beiträge von Horstmann

Horstmann

Zitat von grisu2099

Nö, linkes Icon vor/über der Zahl, obwohl laut Einstellung anders rum...

Wie dir schon geschrieben, der letzte Code war Müll, danke für die Hinweise!

Kommt neu...

Horstmann

Zitat von grisu2099

Mir sind sie es in deiner Version aus #432 schon...
Irgendwie klappt das bei mir auch nicht so recht mit der gewünschten Reihenfolge.

Icons rechts verschoben?

Horstmann

Zitat von Mira_Belle

Und das mit dem Trennstrich geht auch im Code ganz am Ende recht einfach!
let strCountOut2 = String(menuitemCount).padStart(3, "/ ");
Könnte man auch irgendwie in die "Weiche" (useStyle) mit einbauen.
Da ein solcher Trennstrich je nach gewünschter Anzeige an anderer Stelle sein müsste.
Und ob so ein Trennstrich überhaupt angezeigt werden soll.

Viele Wege führen nach Rom.

Irgendwann werden die Variablen aber kompliziert; mein altes Script hatte einen flexiblen Trennstrich drin, glaub ich, aber das war auf 2 schon existierende Elemente verteilt.
Mit der String Geschichte hatte ich irgendein Font(?) Problem in diesem Script, erinnere ich mich aber nicht mehr...

So der so, mit deinem String müsste ich das komplette CSS neu schreiben, da können die so Geneigten selber ein bisschen justieren, oder fragen; an sich ist das Ding ja recht einfach aufgebaut.
Wenn die Zähler-Icon Reihenfolge (grisu) zu Icon-Zähler umgekehrt ist, ist es super einfach.

Noch einfacher: eine separate CSS Datei für jede Version, diese in eine Kontroll CSS Datei zur Auswahl importieren, und diese dann in die userChrome.css importieren, ala Aris.
Ob das für diese Kleinigkeit Sinn macht, ist eine andere Frage.

Was ich wirklich gerne hätte, ist das Element nicht als Child von einem der, sondern als eigenständigen Sibling unter den umgebenden Elementen zu haben. Das geht aber weit über meine Kenntnisse hinaus...

Habe aber Spass mit der Übung, und wieder dazugelernt; hoffe es können einige Leute was damit anfangen, und vielen Dank für deine Hilfe und die von allen anderen Beteiligten!

Horstmann

Zitat von Mira_Belle

Etwas Woodoo

Cooool, dankeschön!

Das mit den JS Variablen muss ich mir wirklich mal genauer anschauen, viel eleganter als das nervige CSS /**/ kommentieren.
Aris hat das in seinem CSS immer schlau gemacht mit dem Kommentieren, aber das ist mir etwas zu hoch.
Wenn's nach mir ginge, würde ich eh lieber ein Paket mit komplett separaten JS und CSS Dateien plus Icons machen.
Hmm....

Bis ich das mit dem JS aber hinbekommen habe, hier erstmal meine eigene, quasi finale Version - ausser jemand findet Fehler - mit diversen Optionen.
Inkl. Trennstrichcode speziell für grisu2099 , dessen Variante als Vorlage gedient hat für die jetzt neuen Dimensionsberechnungen (der padding Ansatz).

Das Ganze sollte klappen mit Firefox Icons (Voreinstellung), und wie gehabt optional mit eigenen Icons, ebenfalls wählbar ist die Icon/Zähler Reihenfolge, und manuell die Farben für Text und Icons.
Ich hoffe die Erläuterungen im Script dazu machen Sinn.

JavaScript

//bmcount_2b.uc.js , Korrektur für Firefox 139 Nightly, RC_1b, Variablen
//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 1 =>
//https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1270320#post1270320

(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 = "YourFolderIcon.png"        //  Custom  Folder Icon
    let icon2 = "YourLinkIcon.svg"          //  Custom  Link Icon

    function setFunction() {

        const css =`

     /** Basiseinstellungen **/

     #bmContent {
          display: flex !important;
          margin-inline: auto 0 !important;   /* Counter rechtsbuendig */
          height: var(--bm_icon_size);  /* Layout passt sich Icon Groesse an */
          padding-left: 8px;            /* min. Abstand links Gesamt für enge Popups */

          /* Icons */
          /* Use Custom Icons, comment to disable => */
          /*--bm_icon_image_1: url("${ProfilePath}/${icon1}");*/
          /*--bm_icon_image_2: url("${ProfilePath}/${icon2}");*/

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

          /* Abstand mittig zwischen Counter #1 Counter #2 */
          --bm_margin_left: 8px;

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

          /** Feste Breite der Counter, abhaengig von Anzahl Ziffern/Fontart und Grösse
           -> Icons untereinander auf gleicher Hoehe **/

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

          /* Breite Zähler #1/#2 (hier fuer 2 Ziffern mit Klammern, Systemfont Mac) */
          --bm_width_one: 2.1em;
          --bm_width_two: 2.1em;


          /** Reihenfolge Icons / Ziffern / alle ungewuenschten Varianten kommentieren **/

          /* #1 Icons links / Ziffern rechts => */
          --bm_padding_one: calc(var(--bm_icon_size) + var(--bm_space)) 0;
          --bm_padding_two: calc(var(--bm_icon_size) + var(--bm_space)) 0;
          --bm_bg_position_1: center left;
          --bm_bg_position_2: center left;

          /* #2 Ziffern links / Icons rechts => */
          /*
          --bm_padding_one: 0 calc(var(--bm_icon_size) + var(--bm_space));
          --bm_padding_two: 0 calc(var(--bm_icon_size) + var(--bm_space));
          --bm_bg_position_1: center right;
          --bm_bg_position_2: center right;
          */

          /* #3 Manuelle Anpassung noetig: Ziffern links / Icons rechts + Trennlinie => */
          /* Unten eintragen bei Counter #1, Leerzeichen vor / beachten:
           content: attr(data-value1) "       /"; */
           /*
          --bm_padding_one: 0 0;
          --bm_padding_two: 0 calc(var(--bm_icon_size) + var(--bm_space));
          --bm_bg_position_1: center right 11px;
          --bm_bg_position_2: center right;
          --bm_margin_left: 4px;
          */

          /* #4 Manuelle Anpassung noetig: Icons links / Ziffern rechts + Trennlinie => */
          /* Unten eintragen bei Counter #1, Leerzeichen vor / beachten:
           content: attr(data-value1) " /"; */
          /*
          --bm_width_one: calc(2.1em + 6px);
          --bm_padding_one: calc(var(--bm_icon_size) + var(--bm_space)) 0;
          --bm_padding_two: calc(var(--bm_icon_size) + var(--bm_space)) 0;
          --bm_bg_position_1: center left;
          --bm_bg_position_2: center left;
          --bm_margin_left: 4px;
          */

          /** Reihenfolge Varianten Ende **/
          }

     /** Basiseinstellungen Ende **/


     /** Die Counter **/

     /* 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_one);
          justify-content: end;
          align-items: center;
          background-image: var(--bm_icon_image_1);
          background-position: var(--bm_bg_position_1);
          background-repeat: no-repeat;
          background-size: var(--bm_icon_size) var(--bm_icon_size);
          /*color: hsl(155, 90%, 50%, 1) !important;*/
          /*fill: hsl(255, 70%, 50%, 1) !important;*/     /* Farben Text / svg Icons aendern */
          }

     /* 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_two);
          align-items: center;
          justify-content: end;
          margin-left: var(--bm_margin_left);
          background-image: var(--bm_icon_image_2);
          background-position: var(--bm_bg_position_2);
          background-repeat: no-repeat;
          background-size: var(--bm_icon_size) var(--bm_icon_size);
          /*color: hsl(155, 90%, 50%, 1) !important;*/
          /*fill: hsl(255, 70%, 50%, 1) !important;*/     /* Farben Text / svg Icons aendern */
          }

     /** Optionale Extras **/

     /* Anpassungen bei Zahl = 0 */

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

      /* Verstecken/ Verblassen #2 */
      #bmContent[data-value2="[0]"]::after,
      #bmContent[data-value2="0"]::after,
      #bmContent[data-value2="(0)"]::after {
          /*opacity: 0.5;
          display: none;*/
          color: hsl(0, 0%, 50%, 0.5) !important;
          fill: hsl(0, 0%, 50%, 0.5) !important;     /* Farben Deckkraft statt opacity für Performance Test */
          }

      /** Tool zum Testen der Abstände **/
      /*
      #bmContent {
          outline: 1px solid blue;
          outline-offset: 4px;
          }
      #bmContent::after {
          background-image: var(--bm_icon_image_1),linear-gradient(lightgreen, lightgreen) !important;
          background-color: pink;
          }
      #bmContent::before {
          background-image: var(--bm_icon_image_2),linear-gradient(lightblue, lightblue) !important;
          background-color: khaki;
          }
      */
		`;
        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 bmContent = document.createElement("bmContent");
              bmContent.id = "bmContent";
              bmCounta.appendChild(bmContent);

              //Zähler Optionen, mit, ohne, eckige, runde Klammern

              //let strCountOut1 = "" + menuCount + "";      //  ohne Klammern
              //let strCountOut1 = "(" + menuCount + ")";    //  runde Klammern
              let strCountOut1 = "[" + menuCount + "]";      //  eckige Klammern
              bmContent.setAttribute('data-value1', strCountOut1);

              //let strCountOut2 = "" + menuitemCount + "";      //  ohne Klammern
              //let strCountOut2 = "(" + menuitemCount + ")";    //  runde Klammern
              let strCountOut2 = "[" + menuitemCount + "]";      //  eckige Klammern
              bmContent.setAttribute('data-value2', strCountOut2);

              // Extra class und Attribut parent; optional
                  //if (bmContent.parentElement) {
              //bmContent.parentElement.classList.add('pfeil');
              //bmContent.parentElement.setAttribute('data-value3', strCountOut1 + strCountOut2);
              //}

            }, 100);
        }
    }

})();

Alles anzeigen

Vereinfachte Version, weniger Variablen, nur eine Version für Reihenfolge von Icon zu Zähler:

JavaScript

//bmcount_2c.uc.js , Korrektur für Firefox 139 Nightly, RC_1c, Vereinfacht
//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 1 =>
//https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1270320#post1270320


(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 = "YourFolderIcon.png"        //  Custom  Folder Icon
    let icon2 = "YourLinkIcon.svg"          //  Custom  Link Icon

    function setFunction() {

        const css =`

     /** Basiseinstellungen **/

     #bmContent {
          display: flex !important;
          margin-inline: auto 0 !important; /* Gesamt rechtsbuendig */
          padding-left: 8px;                /* min. Abstand links Alles für enge Popups */
          height: var(--bm_icon_size);      /* Layout passt sich Icon Groesse an, Test */

          /* Icons */
          /* Use Custom Icons, comment to disable => */
          /*--bm_icon_image_1: url("${ProfilePath}/${icon1}");*/
          /*--bm_icon_image_2: url("${ProfilePath}/${icon2}");*/

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

          /* Abstand Mitte zwischen Counter #1 Counter #2 */
          --bm_margin_left: 8px;

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

          /** Feste Breite der Counter, abhaengig von Anzahl Ziffern/Fontart und Grösse
           -> Anpassen bis Icons untereinander auf gleicher Hoehe **/

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

          /* Breite der Zähler #1/#2 (hier fuer je 2 Ziffern mit Klammern, Systemfont Mac) */
          --bm_width_one: 2.1em;
          --bm_width_two: 2.1em;
     }

     /** Basiseinstellungen Ende **/


     /** Die Counter **/

     /* Counter #1 Ordner */
     #bmContent::before {
          content: attr(data-value1);
          display: flex;
          min-width: fit-content;
          width: var(--bm_width_one);
          padding-inline: calc(var(--bm_icon_size) + var(--bm_space)) 0;
          justify-content: end;
          align-items: center;
          background-image: var(--bm_icon_image_1);
          background-position: center left;
          background-repeat: no-repeat;
          background-size: var(--bm_icon_size);
          /*color: hsl(155, 90%, 50%, 1) !important;*/
          /*fill: hsl(255, 70%, 50%, 1) !important;*/     /* Farben Text / svg Icons aendern */
          }

     /* Counter #2 Links */
     #bmContent::after {
          content: attr(data-value2);
          display: flex;
          min-width: fit-content;
          width: var(--bm_width_two);
          padding-inline: calc(var(--bm_icon_size) + var(--bm_space)) 0;
          align-items: center;
          justify-content: end;
          margin-left: var(--bm_margin_left);
          background-image: var(--bm_icon_image_2);
          background-position: center left;
          background-repeat: no-repeat;
          background-size: var(--bm_icon_size);
          }

     /** Optionale Extras **/

     /* Anpassungen bei Zahl = 0 */

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

      /* Verstecken/ Verblassen #2 */
      #bmContent[data-value2="[0]"]::after,
      #bmContent[data-value2="0"]::after,
      #bmContent[data-value2="(0)"]::after {
          /*opacity: 0.5;
          display: none;*/
          color: hsl(0, 0%, 50%, 0.5) !important;
          fill: hsl(0, 0%, 50%, 0.5) !important;     /* Farben Deckkraft statt opacity für Performance Test */
          }

      /** Tool zum Testen der Abstände **/
      /*
      #bmContent {
          outline: 1px solid blue;
          outline-offset: 4px;
          }
      #bmContent::after {
          background-image: var(--bm_icon_image_1),linear-gradient(lightgreen, lightgreen) !important;
          background-color: pink;
          }
      #bmContent::before {
          background-image: var(--bm_icon_image_2),linear-gradient(lightblue, lightblue) !important;
          background-color: khaki;
          }
      */
		`;
        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 bmContent = document.createElement("bmContent");
              bmContent.id = "bmContent";
              bmCounta.appendChild(bmContent);

              //Zähler Optionen, mit, ohne, eckige, runde Klammern

              //let strCountOut1 = "" + menuCount + "";      //  ohne Klammern
              //let strCountOut1 = "(" + menuCount + ")";    //  runde Klammern
              let strCountOut1 = "[" + menuCount + "]";      //  eckige Klammern
              bmContent.setAttribute('data-value1', strCountOut1);

              //let strCountOut2 = "" + menuitemCount + "";      //  ohne Klammern
              //let strCountOut2 = "(" + menuitemCount + ")";    //  runde Klammern
              let strCountOut2 = "[" + menuitemCount + "]";      //  eckige Klammern
              bmContent.setAttribute('data-value2', strCountOut2);

              // Extra class und Attribut parent; optional
                  //if (bmContent.parentElement) {
              //bmContent.parentElement.classList.add('pfeil');
              //bmContent.parentElement.setAttribute('data-value3', strCountOut1 + strCountOut2);
              //}

            }, 100);
        }
    }

})();

Alles anzeigen

Horstmann

Wenn's jetzt noch eine Möglichkeit gäbe, die Reihenfolge von Icon und Zähler einfach umzukehren, ohne neues Script/CSS.

Dank grisu2099 und seinem width/padding Ansatz, evtl. so; die Icons sind hier jetzt auf - hoffentlich noch aktuelle - Fx eigene Icons eingestellt, sollten eigentlich direkt anzeigen ohne Änderungen.

Zeilen 47 bis 52, den gewünschten Codeblock einfach ein/auskommentieren; gerne testen bei Interesse; den Schrägstrich bekommt man da auch noch leicht rein.

JavaScript

//bmcount_2.uc.js RC1, Korrektur für Firefox 139 Nightly  TEST
//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

(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 = "YourFolderIcon.png"        //  Custom  Folder Icon
    let icon2 = "YourLinkIcon.svg"          //  Custom  Link Icon

    function setFunction() {

        const css =`

     /** Basiseinstellungen **/

     #bmContent {
          display: flex !important;
          margin-inline: auto 0 !important;   /* Counter rechtsbuendig */
          height: var(--bm_icon_size);

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

          /* min. Abstand links Alles für enge Popups, rechts 1ter zu 2tem Counter */
          --bm_margin-inline: 16px 8px;

          /** Feste Breite der Counter, abhaengig von Anzahl Ziffern/Fontart und Grösse -> Icons untereinander auf gleicher Hoehe **/
          /* Fontbreite (hier fuer 2 Ziffern mit Klammern, Systemfont Mac) */
          --bm_width_one: 2.1em;
          --bm_width_two: 2.1em;

          /* Abstand zwischen Icon und Ziffern */
          --bm_space_one: 2px;
          --bm_space_two: 2px;


          /**** Reihenfolge Icon / Ziffern ****/
          /* Icon links / Ziffern rechts => */

          --bm_padding_one: calc(var(--bm_icon_size) + var(--bm_space_one)) 0;
          --bm_padding_two: calc(var(--bm_icon_size) + var(--bm_space_two)) 0;
          --bm_bg_position: center left;

          /** Icon rechts / Ziffern links => **/

          /*--bm_padding_one: 0 calc(var(--bm_icon_size) + var(--bm_space_one));
          --bm_padding_two: 0 calc(var(--bm_icon_size) + var(--bm_space_two));
          --bm_bg_position: center right;*/


          /** Icons **/
          /** Use Custom Icons, comment to disable => **/
          /*--bm_icon_image_1: url("${ProfilePath}/${icon1}");*/
          /*--bm_icon_image_2: url("${ProfilePath}/${icon2}");*/

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

     /** Basiseinstellungen Ende **/


     /* Counter #1 Folder */
     #bmContent::before {
          content: attr(data-value1);
          display: flex;
          width: var(--bm_width_one);
          /*width: calc(var(--bm_icon_size) + 2px);*/
          padding-inline: var(--bm_padding_one);
          justify-content: end;
          align-items: center;
          margin-inline: var(--bm_margin-inline);
          background-image: var(--bm_icon_image_1);
          background-position: var(--bm_bg_position);
          background-repeat: no-repeat;
          background-size: var(--bm_icon_size) var(--bm_icon_size);
          /*color: purple !important;*/
          /*fill: rgba(255, 150, 68, 1.0) !important;*/      /* Farben Text / svg Icons aendern */
          /*outline: 1px solid purple !important;*/

          }

     /* Counter #2 Links */
     #bmContent::after {
          content: attr(data-value2);
          display: flex;
          width: var(--bm_width_two);
          padding-inline: var(--bm_padding_two);
          align-items: center;
          justify-content: end;
          background-image: var(--bm_icon_image_2);
          background-position: var(--bm_bg_position);
          background-repeat: no-repeat;
          background-size: var(--bm_icon_size) var(--bm_icon_size);
          /*color: purple !important;*/
          /*fill: rgba(255, 150, 68, 1.0) !important;*/      /* Farben Text / svg Icons aendern */
          /*outline: 1px solid orange !important;*/

          }

     /** Optionale Extras **/

     /* Adjust/hide if count = 0 */

      /* Hide/Dim #1 icon + counter if Count = 0 */
      #bmContent[data-value1="[0]"]::before,
      #bmContent[data-value1="0"]::before,
      #bmContent[data-value1="(0)"]::before {
          opacity: 0.2;
          }

     /* Dim #2 icon + counter if Count = 0 */
      #bmContent[data-value2="[0]"]::after,
      #bmContent[data-value2="0"]::after,
      #bmContent[data-value2="(0)"]::after {
          opacity: 0.5;
          }

		`;

        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 bmContent = document.createElement("bmContent");
              bmContent.id = "bmContent";
              bmCounta.appendChild(bmContent);


        //Zähler Optionen, mit, ohne eckige, runde Klammern

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

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

        // Extra class und Attribut parent; va für 0 + 0
        if (bmContent.parentElement) {
          bmContent.parentElement.classList.add('pfeil');
          bmContent.parentElement.setAttribute('data-value3', strCountOut1 + strCountOut2);
        }
            }, 100);
        }
    }

})();

Alles anzeigen

Horstmann

Zitat von grisu2099

Ich habe mir aus den zahlreichen "Horstmannschen Varianten" diese Version zusammengestrickt, die für meinen Geschmack perfekt paßt. Änderungen habe ich hauptsächlich im CSS-Bereich vorgenommen, im Abstände etc. anzupassen.
Getestet und angepaßt zur Verwendung in Nightly 139!

Schlaue Sache mit dem padding, notiert!

Horstmann

Zitat von Mira_Belle

Für mich ist es jetzt perfekt!

Man beachte bitte die kleine Fehlerkorrektur in Zeile 125.
Ganz toll finde ich, dass ich nun wieder SVG nutzen kann, die eben nicht auf 16px*16px fest genagelt sind,
sondern eben auch solche, die viel größer sind!
Hier nun meine finale Abwandlung!
Funktioniert in der Nightly.

Super, hört sich prima an, und danke für's testen und die Tips!

(Was war denn die Fehlerkorrektur, und in welchem Script?)

Horstmann

Zitat von Mira_Belle

Ich habe auch so meine Probleme.
1. Die Grafiken lassen sich nicht mehr einzeln ansprechen, damit man z.B. unterschiedliche Farben wählen kann.
Das andere Problem konnte ich lösen. Die Variablen

Danke für den Test!

Die letzte Version hat die beiden Icons wieder aufgeteilt auf die beiden Pseudoelemente, aber diesmal als bg-image statt content, sollten also einzeln ansprechbar sein.
Die Position ist dann jeweils auch anzupassen, ist aber letztlich einfacher zu handhaben; background-position für beide wird jetzt von center right Xpx gemessen.

Im Prinzip den background-image code von #bmContent einfach in die after/before Pseudos verschieben, aber eben nur für jeweils ein Icon.

Bis auf die Icons kannste auch einfach die CSS Variablen benutzen, deine machen ja eigentlich das gleiche.

Den String würd ich selber ja rauswerfen; das padEnd ist quasi schon im CSS eingebaut und alle Abstände damit einstellbar.

Zitat von grisu2099

Mit der neuen Version sieht das besser aus.

Prima, danke wieder für den Test!
Gut zu hören dass es auch in Nightly fluppt.

Horstmann

Zitat von grisu2099

Komisch, hier klappt das (in der Nightly)...

Aber nur die Zahl 0 wird gedimmt, nicht das dazugehörige Icon, oder?

Danke Schlafrhythmus Schwankung (wesentliche Änderungen Zeile 40-80) :

JavaScript

//bmcount testa neu G sauber Sibling TEST no multi Pfeil targeted brackets TEST background images TEST 2
// 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

(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 = "YourFolderIcon.png"        //  Custom  Folder Icon
    let icon2 = "YourLinkIcon.svg"          //  Custom  Link Icon

    function setFunction() {

        const css =`

    /* Counter rechtsbuendig */
     #bmContent {
          display: flex !important;
          margin-inline: auto 0 !important;
     }

     /* If Icons/text uebergross center content vertically / optional */
     /*
     menu.menu-iconic.bookmark-item .pfeil {
          align-items: center;
          outline: 1px solid red;
          outline-offset: 2px;
          }
      */

     /** Alternative Icons separat, TEST2!!! **/

     /* Feste Breite der Counter abhaengig von Anzahl/Grösse Ziffern -> Icons untereinander auf gleicher Hoehe */
     /* --bm_width = Icon Grösse 16px Standard + Fontbreite + Abstand Icon zu Zahl */
     /* --bm_icon_size = Icon Grösse anders als 16px Firefox Standard --> Abstand Icon zu Zahl in --bm_width_one anpassen */

     #bmContent {
          --bm_width_one: calc(var(--bm_icon_size) + 2.1em + 2px);
          --bm_width_two: calc(var(--bm_icon_size) + 2.1em + 2px);
          --bm_icon_size: 16px;
          height: var(--bm_icon_size);
          /*outline: 1px solid orange;
          outline-offset: 1px;*/
          }

     /* Counter #1 Folder */
     #bmContent::before {
          content: attr(data-value1);
          display: flex;
          width: var(--bm_width_one);
          justify-content: end;
          align-items: center;
          margin-inline: 16px 8px;   /* min. Abstand links für enge Popups, rechts zum 2ten Counter */
          background-image: url("${ProfilePath}/${icon1}")!important;
          background-position: center right calc(var(--bm_width_one) - var(--bm_icon_size));
          background-repeat: no-repeat;
          background-size: var(--bm_icon_size) var(--bm_icon_size);
          /*outline: 1px solid lightgreen;*/
          }

     /* Counter #2 Links */
     #bmContent::after {
          content: attr(data-value2);
          display: flex;
          width: var(--bm_width_two);
          align-items: center;
          justify-content: end;
          background-image: url("${ProfilePath}/${icon2}") !important;
          background-position: center right calc(var(--bm_width_two) - var(--bm_icon_size));
          background-repeat: no-repeat;
          background-size: var(--bm_icon_size) var(--bm_icon_size);
          /*outline: 1px solid lightblue;*/
          }


     /** Adjust/hide if count = 0 **/

      /* Hide/Dim #1 icon + counter if Count = 0 */
      #bmContent[data-value1="[0]"]::before,
      #bmContent[data-value1="0"]::before,
      #bmContent[data-value1="(0)"]::before {
          opacity: 0.2;
          }

     /* Dim #2 icon + counter if Count = 0 */
      #bmContent[data-value2="[0]"]::after,
      #bmContent[data-value2="0"]::after,
      #bmContent[data-value2="(0)"]::after {
          opacity: 0.5;
          }

     /* Hide empty Popup */
     menu.menu-iconic.bookmark-item menupopup[emptyplacesresult="true"] {
          display: none !important;
          }

      /* Arrow before empty Popup */
      .pfeil[data-value3="[0][0]"] ~ .menu-right image,
      .pfeil[data-value3="00"] ~ .menu-right image,
      .pfeil[data-value3="(0)(0)"] ~ .menu-right image {
          fill: rgba(255, 150, 68, 1.0) !important;
          }

		`;

        const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
        const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
        sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

        let bmbMenu = document.getElementById('bookmarks-menu-button');
        let bookMenu = document.getElementById('bookmarksMenu');
        let persToolBar = document.getElementById('PersonalToolbar');

        if(bmbMenu)
            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];
              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
        bmContent.setAttribute('data-value1', strCountOut1);

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

        // Attribut parent va für 0 + 0
        if (bmContent.parentElement) {
          bmContent.parentElement.classList.add('pfeil');
          bmContent.parentElement.setAttribute('data-value3', strCountOut1 + strCountOut2);
        }
            }, 100);
        }
    }

})();

Alles anzeigen

Horstmann

Mist; das dimmen oder entfernen bei Anzahl 0 funktioniert nicht mehr für die Icons mit der neuen Version; also wieder ran...

Horstmann

Zitat von grisu2099

Zitat von Horstmann

Ich hoffe da sind nicht wieder dumme copy/paste Fehler drin.

Leider doch - Zeile 42. Da hast du 2x icon1 verwendet...

Uuunglaublich..... Danke, geändert....

Horstmann

Zitat von Mira_Belle

Ok, ich bin ungeduldig!
Aber wenn DAS klappt, werde ich mein Problem mit den Grafikgrößen wieder los!
Denn ich habe die original SVG nur in width="1344" height="1339" vorliegen.
Bisher arbeite ich mit einer "Notlösung".

Zitat von grisu2099

Ich möchte spielen...

Puuuh, der Druck...

Hier mal was zum Antesten; mit den Variablen hab ich mal langsam gemacht, das kann man noch weiter automatisieren.
Wenn man die Abstände regulieren möchte, dann momentan manuell; ich hoffe die Anmerkungen machen Sinn, bzw. habt ihr das bestimmt sowieso schon rausgefunden.

Beim Ändern der Icongrösse (--bm_icon_size) Variable kann alles mögliche passieren, hab ich nur grob ausprobiert; das ist halt immer etwas spannend in Firefox.
Hoffe das klappt mit den grossen .svgs von Mira auch, eigentlich sollte background-size das erledigen.

Abgesehen von Zeile 41-57 ist das Script identisch zum alten; Icons die gleichen etc..
Ich hoffe da sind nicht wieder dumme copy/paste Fehler drin.

Kritik und Fehlermeldungen wie immer willkommen; wenn soweit würde ich das die Tage dann mal sauber machen und "offiziell" einstellen.

CSS

//bmcount testa neu G sauber Sibling TEST no multi Pfeil targeted brackets TEST background images TEST
// 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

(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 = "YourFolderIcon.png"        //  Custom  Folder Icon
    let icon2 = "YourLinkIcon.svg"          //  Custom  Link Icon

    function setFunction() {

        const css =`

    /* Counter rechtsbuendig */
     #bmContent {
          display: flex !important;
          margin-inline: auto 0 !important;
     }

     /** Alternative Icons separat, TEST!!! **/

     /* Feste Breite der Counter abhaengig von Anzahl/Grösse Ziffern -> Icons untereinander auf gleicher Hoehe */
     /* --bm_width = Icon Grösse 16px Standard + Fontbreite + Abstand Icon zu Zahl */
     /* --bm_icon_size = Icon Grösse anders als 16px Firefox Standard --> Abstand Icon zu Zahl in --bm_width_one anpassen */

     #bmContent {
          --bm_width_one: calc(var(--bm_icon_size) + 2.1em + 2px);
          --bm_width_two: calc(var(--bm_icon_size) + 2.1em + 2px);
          --bm_icon_size: 16px;
          }

          #bmContent {
               background-image: url("${ProfilePath}/${icon1}"), url("${ProfilePath}/${icon2}") !important;
               background-position: center left calc(var(--bm_icon_size)),
                                    center right calc(var(--bm_width_two) - var(--bm_icon_size));
               background-repeat: no-repeat;
               background-size: var(--bm_icon_size) var(--bm_icon_size);
               height: var(--bm_icon_size);
               }

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

          /* Counter #2 Links */
          #bmContent::after {
               content: attr(data-value2);
               width: var(--bm_width_two);
               align-items: center;
               display: flex;
               justify-content: end;
               }

     /** Adjust/hide if count = 0 **/

      /* Hide/Dim #1 folder counter if Count = 0 */
      #bmContent[data-value1="[0]"]::before,
      #bmContent[data-value1="0"]::before,
      #bmContent[data-value1="(0)"]::before {
         opacity: 0.2;
       }

     /* Dim #2 icon counter if Count = 0 */
      #bmContent[data-value2="[0]"]::after,
      #bmContent[data-value2="0"]::after,
      #bmContent[data-value2="(0)"]::after {
         opacity: 0.5;
       }

     /* Hide empty Popup */
     menu.menu-iconic.bookmark-item menupopup[emptyplacesresult="true"] {
        display: none !important;
        }

      /* Arrow before empty Popup */
      .pfeil[data-value3="[0][0]"] ~ .menu-right image,
      .pfeil[data-value3="00"] ~ .menu-right image,
      .pfeil[data-value3="(0)(0)"] ~ .menu-right image {
          fill: rgba(255, 150, 68, 1.0) !important;
          }

		`;

        const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
        const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
        sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

        let bmbMenu = document.getElementById('bookmarks-menu-button');
        let bookMenu = document.getElementById('bookmarksMenu');
        let persToolBar = document.getElementById('PersonalToolbar');

        if(bmbMenu)
            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];
              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
        bmContent.setAttribute('data-value1', strCountOut1);

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

        // Attribut parent va für 0 + 0
        if (bmContent.parentElement) {
          bmContent.parentElement.classList.add('pfeil');
          bmContent.parentElement.setAttribute('data-value3', strCountOut1 + strCountOut2);
        }
            }, 100);
        }
    }

})();

Alles anzeigen

Horstmann

Zitat von grisu2099

Zitat von Horstmann

für den Pfeil habe ich eine Lösung gefunden,

Von welchem Pfeil redest du? Ich sehe/verstehe das "Problem" nicht...

Der Pfeil bzw. Chevron ganz rechts, der zum Unterordner zeigt.

Den wollte ich unbedingt umfärben/stylen können, wenn beide Zähler auf 0 stehen.

Horstmann

Zitat von Mira_Belle

Dharkness Hast Du außer den Symbolen noch etwas ......
AH, Hostmann ist da ein kleiner Fauxpas unterlaufen!
Ersetze mal...
Aktiviere nun Deine gewünschte Anzeige.

Arrrghhhh!!!

Sorry Leute, hab ich oben geändert, danke für's Testen und den Hinweis!

Horstmann

Zitat von Mira_Belle

Naja, Du hast da so einige Funktionen eingebaut,
die ich z.B. gar nicht bräuchte.
Somit würde der css-Teil um einiges kompakter werden.

Wenn dir das CSS aufwendig vorkommt, dann hast du die früheren Versionen nicht mehr in Erinnerung.

Ich habe jetzt mal das Ganze überarbeitet; das JS geht wieder zurück zu dem was du auch benutzt für das neue Element, für den Pfeil habe ich eine Lösung gefunden, und es sind Varianten für Zahlen mit oder ohne Klammern eingebaut.

Ich würde dir ja gerne entgegenkommen was die String Geschichte angeht, aber das hat auch Einfluss auf das Layout/CSS, daher würde das dann zu verwirrend werden.
Ich hätte auch noch eine CSS Test-Variante mit den Icons separat zu den Zahlen als background-image , falls du damit spielen willst.

Also hier dann was zum Testen für alle Interessierten; Icons wie üblich im chrome/icons Ordner abzulegen, oder halt selber anpassen.

JavaScript

//bmcount testa neu G sauber Sibling TEST no multi Pfeil targeted brackets TEST
// 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

(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 = "YourFolderIcon.png"        //  Custom  Folder Icon
    let icon2 = "YourLinkIcon.svg"          //  Custom  Link Icon

    function setFunction() {

        const css =`

    /* Counter rechtsbuendig */
     #bmContent {
          display: flex !important;
          margin-inline: auto 0 !important;
     }

     /* Feste Breite der Counter abhaengig von Anzahl/Grösse Ziffern -> Icons untereinander auf gleicher Hoehe */
     /* --bm_width = Icon Grösse 16px Standard + Fontbreite + Abstand Icon zu Zahl */

     #bmContent {
          --bm_width_one: calc(var(--bm_icon_size) + 2.1em + 2px);
          --bm_width_two: calc(var(--bm_icon_size) + 2.1em + 2px);
          --bm_icon_size: 16px;
          }

     /* Counter #1 Folder */
     #bmContent::before {
          content: url("${ProfilePath}/${icon1}")
                   /*url("chrome://global/skin/icons/folder.svg")*/
                   attr(data-value1);
          width: var(--bm_width_one);
          justify-content: space-between;
          align-items: center;
          display: flex;
          margin-inline: 16px 8px;   /* min. Abstand links für enge Popups, rechts zum 2ten Counter */
          }

     /* Counter #2 Links */
     #bmContent::after {
          content: url("${ProfilePath}/${icon2}")
                   /*url("chrome://browser/skin/bookmark-hollow.svg")*/
                   attr(data-value2);
          width: var(--bm_width_two);
          align-items: center;
          display: flex;
          justify-content: space-between;
          }


     /** Adjust/hide if count = 0 , hier mit square brackets **/

      /* Hide/Dim #1 icon counter if Count = 0 */
      #bmContent[data-value1="[0]"]::before,
      #bmContent[data-value1="0"]::before,
      #bmContent[data-value1="(0)"]::before {
         opacity: 0.2;
       }

     /* Dim #2 icon counter if Count = 0 */
      #bmContent[data-value2="[0]"]::after,
      #bmContent[data-value2="0"]::after,
      #bmContent[data-value2="(0)"]::after {
         opacity: 0.5;
       }

     /* Hide empty Popup */
     menu.menu-iconic.bookmark-item menupopup[emptyplacesresult="true"] {
        display: none !important;
        }

      /* Arrow before empty Popup */
      .pfeil[data-value3="[0][0]"] ~ .menu-right image,
      .pfeil[data-value3="00"] ~ .menu-right image,
      .pfeil[data-value3="(0)(0)"] ~ .menu-right image {
          fill: rgba(255, 150, 68, 1.0) !important;
          }

		`;

        const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
        const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
        sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

        let bmbMenu = document.getElementById('bookmarks-menu-button');
        let bookMenu = document.getElementById('bookmarksMenu');
        let persToolBar = document.getElementById('PersonalToolbar');

        if(bmbMenu)
            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];
              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
        bmContent.setAttribute('data-value1', strCountOut1);

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

        // Attribut parent va für 0 + 0
        if (bmContent.parentElement) {
          bmContent.parentElement.classList.add('pfeil');
          bmContent.parentElement.setAttribute('data-value3', strCountOut1 + strCountOut2);
        }
            }, 100);
        }
    }

})();

Alles anzeigen

icons.zip

Horstmann

Zitat von Mira_Belle

css ist schon was Feines, wenn man es versteht!

Das Script ist aber ein bisschen Pfusch, vielleicht schaut sich das einer unserer JS Experten ja mal an.

Und das CSS in Zeile 73 ist auch nicht gut, da muss ich wohl nochmal bei; das war der einzige Grund warum das neue Element über die etwas verkorkste Test2 Methode (Zeile 130) reingewürgt wurde; hab halt doch zu wenig Ahnung...

Horstmann

So, damit arbeite ich im Moment.

Das ist nur auf meine Bedürfnisse zugeschnitten; wie gesagt gibt es da Vieles was man sich selber anpassen kann; justierbare Variablen habe ich diesmal kaum benutzt, das scheint nicht oft gefragt zu sein.

Vielen Dank nochmal an alle Mitwirkenden, und besonders an BrokenHeart für den Code auf dem alles hier aufgebaut ist.

Kritik und Vorschläge wie immer willkommen; Icons im Anhang, oder eben Eigene benutzen.

Die Einbindung vom neuen Element #bmContent als Sibling Element ist etwas grob, (Zeile 130+), und ich habe nur einen ebenfalls groben CSS Hack gefunden (Zeile 28+ ) um das Ding nicht dauernd neu und zusätzlich aufgebaut zu bekommen; das geht sicher besser; wollte das aber an der Stelle haben.

JavaScript

//bmcount testa neu F2 Sibling TEST!
// 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

(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 = "YourFolderIcon.png"    //  Custom  Folder Icon
    let icon2 = "YourLinkIcon.svg"          //  Custom  Link Icon

    function setFunction() {

        const css =`

     #bmContent {
          display: flex !important;
          margin-inline: auto 0 !important;
     }

     /* Poor fix to avoid multiple counters */
     #bmContent ~ #bmContent {
          display: none !important;
     }

     #bmContent::before {
          content: url("${ProfilePath}/${icon1}")
                   /*url("chrome://global/skin/icons/folder.svg")*/
                   attr(data-value1);
          width: calc(18px + 2.1em); /* Feste Breite rechter Counter für 2 Ziffern -> Icons auf gleicher Höhe */
          justify-content: space-between;
          align-items: center;
          display: flex;
          margin-inline: 16px 8px;   /* Abstand links für enge Popups, rechts zum 2ten Counter */
          /*outline: 1px solid orange;*/
          }

     #bmContent::after {
          content: url("${ProfilePath}/${icon2}")
                   /*url("chrome://browser/skin/bookmark-hollow.svg")*/
                   attr(data-value2);
          width: calc(18px + 2.1em); /* Feste Breite rechter Counter für 2 Ziffern -> Icons auf gleicher Höhe */
          align-items: center;
          display: flex;
          justify-content: space-between;
          /*outline: 1px solid lightblue;*/
          }

     /** Adjust/hide if count = 0 **/

      /* Hide #1 icon counter if Count = 0 */
      #bmContent[data-value1="[0]"]::before {
         opacity: 0;
       }

     /* Dim #2 icon counter if Count = 0 */
      #bmContent[data-value2="[0]"]::after {
         opacity: 0.5;
       }

     /* Hide empty Popup */
     menu.menu-iconic.bookmark-item menupopup[emptyplacesresult="true"] {
        display: none !important;
        }

      /* Arrow before empty Popup */
      #bmContent:is([data-value1="[0]"][data-value2="[0]"]) ~ .menu-right image {
        fill: rgba(255, 150, 68, 1.0) !important;
        }

		`;

        const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
        const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
        sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

        let bmbMenu = document.getElementById('bookmarks-menu-button');
        let bookMenu = document.getElementById('bookmarksMenu');
        let persToolBar = document.getElementById('PersonalToolbar');

        if(bmbMenu)
            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;

              //test alt gut, aber Element -> Child
              //let bmCounta = item.childNodes[1];
              //bmCounta.innerHTML = ""
              //let bmContent = document.createElement("bmContent");
              //bmContent.id = "bmContent";
              //bmCounta.appendChild(bmContent);

              //test2 geht, Element -> Sibling, aber multiple Anzeigen bei Neuöffnung
              let bmCounta = item.childNodes[1];
              let bmContent = document.createElement("bmContent");
              bmContent.id = "bmContent";
              bmCounta.insertAdjacentElement("afterend", bmContent);

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

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

            }, 100);
        }
    }

})();

Alles anzeigen

icons.zip

Horstmann

Zitat von Mira_Belle

Apropos String Dingens, habe gerade eben geschaut, was Du da meinen könntest.
Denn ich ging wohl von was anderem aus!
Und was soll ich sagen? Ich verstehe nur Bahnhof und weiß somit gar nicht, was genau Du meinst!
Kannst Du die Zeilen im Code benennen, um die es geht?

Ich meinte Zeilen 128 und 131, zB let strCountOut1 = menuCount; .

Horstmann

Zitat von Mira_Belle

Zitat von Horstmann

Wobei du in deinem Code immer noch Strings (?) benutzt für die beiden Counter, in der Richtung werd ich wohl nicht basteln.

Ich habe es einfach anders nicht hinbekommen!

Hmm; schwer zu sagen ohne den nicht funktionierenden Code zu sehen.
Das String Dingens (Fachbegriff) hatte ich geändert, weil es mit Fonts etc. ein Problem gab; was genau hab ich vergessen, steht aber irgendwo in diesem Thread.

Der untere Teil nach /** Adjust/hide if count = 0 **/ im CSS ist nur zum Spielen, ich benutze das eigentlich um Alles mit Counter = 0 auszublenden oder hervorzuheben, einfach löschen wenn du keine Verwendung dafür hast.

Und - das ist ein Test, kein fertiger Code!
Das neue Element sollte besser anders eingebunden werden, statt als child von einem anderen nicht klar definierten/plazierten child vom bookmark item - denkt sich dieser Ahnungslose - aber da müssten Experten bei.

JavaScript

//bmcount testa neu D TEST! für Mira
// basiert auf Sript von BrokenHeart
//https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1269879#post1269879

(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 = "Test_3.svg"    //  Custom  Folder Icon
    let icon2 = "bookmark-hollow.svg"          //  Custom  Link Icon
    //let icon1 = "YourFolderIcon.png"    //  Custom  Folder Icon
    //let icon2 = "YourLinkIcon.svg"          //  Custom  Link Icon

    let cs_font_size = 14
    let cs_font_weight = 900
    let cs_font_color = "#FFD700"
    let cs_icon_color = "#C0C0C0"

    function setFunction() {

        const css =`

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

                #bmContent::before {
                     content: url("${ProfilePath}/${icon1}") " "
                              attr(data-value1);
                     fill: ${cs_icon_color};
                     color: ${cs_font_color};
                     align-items: center;
                     display: flex;
                     justify-content: space-between;
                     width: calc(12px + 2.1em); /* Feste Breite rechter Counter für 2 Ziffern ->  Icons auf gleicher Höhe */
                     margin-inline: 16px 8px;   /* Abstand links für enge Popups, rechts zum 2ten Counter */
        			      }

                #bmContent::after {
                     content: url("${ProfilePath}/${icon2}") " "
                              attr(data-value2);
                     fill: ${cs_icon_color};
                     width: calc(12px + 2.1em); /* Feste Breite rechter Counter für 2 Ziffern ->  Icons auf gleicher Höhe */
                     color: ${cs_font_color};
                     align-items: center;
                     display: flex;
                     justify-content: space-between;
        			       }

/** Adjust/hide if count = 0 **/

 /* #1 icon counter if Count = 0 */
 #bmContent[data-value1="0"]::before {
  opacity: 0.3;
  color: red !important;
  fill: red !important;
  }

 #bmContent[data-value2="0"]::after {
  opacity: 0.5;
  fill: cyan !important;
  color: cyan !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;

              let bmCounta = item.childNodes[1];
              bmCounta.innerHTML = ""
              let bmContent = document.createElement("bmContent");
              bmContent.id = "bmContent";
              bmCounta.appendChild(bmContent);

        let strCountOut1 = menuCount;
        bmContent.setAttribute('data-value1', strCountOut1);

        let strCountOut2 = menuitemCount;
        bmContent.setAttribute('data-value2', strCountOut2);

            }, 100);
        }
    }

})();

Alles anzeigen

Horstmann

Zitat von Mira_Belle

Ist eigentlich gar keine Hexerei!
Genau so verhält es sich eben auch bei Werten!
Ist in der Deklaration schon eine Einheit angegeben, es ging hier um px,
muss sie nicht in den Code => size: ${size} !important;.
Ist sie nicht angegeben, dann eben doch! size: ${size}px !important;
Und weil ich Variablen mag und sie so manches viel einfacher machen,
benutze ich sie, wo ich nur kann,
auch in css nutze ich sie, aber da sieht es etwas anders aus!!

Ah, danke!

In CSS bin ich ja Variablenfanatiker, aber diese spezielle Art der Einbindung im JS muss ich mir erst noch anschauen.

Im nächsten Schritt könnten wir auch noch die Icons komplett herauslösen, dann kann man alles einzeln hin und herschieben und stylen; wichtig ist erstmal dass das neue Element (hoffentlich) zu klappen scheint.

Wobei du in deinem Code immer noch Strings (?) benutzt für die beiden Counter, in der Richtung werd ich wohl nicht basteln.

Beiträge von Horstmann

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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