Beiträge von Horstmann

Horstmann

Zitat von Mira_Belle

Deine Symbole sind vom Firefox. Ich nehme an, die sind 16*16.
Ich habe eigene Symbole genommen, welche erheblich großer sind.
Warum auch immer, werden diese aber nicht auf die erforderliche Größe skaliert.

Icons werden in Fx skaliert, wenn die Grösse entweder im .svg Code oder im CSS Code festgelegt ist, manchmal in beidem, manchmal werden sie (auch) begrenzt via übergeordnete Objekte, etc..
Was wann wo und wie der Fall ist - kommt drauf an.

Wenn's nicht passt, einfach mal die Browser-Werkzeuge bemühen (Icon -> width/height: auto? ); es gibt nicht eine einzige Regel die für alle UI Bereiche benutzt wird.
Deshalb kann man sich zB mit vielen Buttons zu Tode ärgern, wenn man nicht den diversen Fx Codes folgt.

Horstmann

Ein grosser Unterschied wäre noch die Möglichkeit, separate CSS Dateien live editieren und speichern zu können in den Browser Werkzeugen, und auch sofort ein Ergebnis zu sehen.

Damit kann man über mehrere verbundene CSS Dateien parallel arbeiten, idealerweise mit einer zentralen Kontroll CSS plus darin importierten CSS Dateien für grössere Varianten, und dabei alle Styling Elemente aufeinander abstimmen ohne Restarts etc..

Ausserdem fällt damit ein Menge zusätzlicher Code weg im JS, das ganze Dateipfad Gedöns und die Einbindung von CSS allgemein, was bei Fx Code Veränderungen das eventuelle Troubleshooting weiter kompliziert.

Horstmann

Zitat von Mira_Belle

Mh, was sind die Vor- bzw. Nachteile, wenn man das meiste davon direkt in JavaScript umsetzt?

Was mich angeht, manche Sachen kann ich einfach nicht...

Horstmann

Zitat von grisu2099

Man könnte die "Nuller" auch einfach ausblenden...

Mach ich doch auch in den Codebeispielen, für den ersten Ordner Zähler - aber wenn ein Ordner keine Lesezeichen drin hat, aber Ordner - dann will ich den Ziffern Zähler nur verblasst haben!

Etwas anal, ich weiss, aber einfach kann jeder.
Den aktuellen Code habe ich übrigens auch angepasst, um wahlweise einen oder beide 0 Zähler mit display: none ausblenden zu können, wie du es bei dir gemacht hast, ohne weitere Änderungen, also flexibler als vorher.
So zumindest der Plan, bin schon ganz verunsichert nach meinen ganzen Pannen.

Zitat von Sören Hentzschel

Dass der Unterschied für dich wahrnehmbar ist, finde ich ein wenig überraschend in Anbetracht dessen, um wie wenige Elemente es eigentlich geht. Aber grundsätzlich ist es nicht überaschend, dass opacity langsamer ist, weil sich das auf sämtliche Eigenschaften auswirkt und das andere eben nur auf color und fill. Außerdem verändert opacity nicht nur die Deckkraft für das Element selbst, sondern auch für sämtliche Kindelemente. Das ist also mit wesentlich mehr Arbeit für den Browser verbunden.

Bin auch überrascht, aber es passiert deutlich merkbar nur bei vielen Einträgen mit opacity in einem einzelnen Popup.

In diesem Fall ist das mein - wenig realistischer - Test Setup im Testprofil, der teils Dutzende Lesezeichenordner mit keinen Ordnern und/oder keinen Lesezeichen drinnen hat; also eine Menge Pseudoelemente mit opacity < 1.

Deine Erklärung macht auch Sinn; ich kenne es aus mehreren (Render) Anwendungen, daß Transparenz teils massive Leistungseinbrüche mit sich bringen kann, wenn sie nicht sehr gezielt/lokalisiert eingesetzt wird.

Horstmann

So liebe Leute,

In #432 hätten wir jetzt den aktuellen Code, wieder in der Hoffnung daß sich keine Fehler eingeschlichen haben .

Es gibt einen Code mit einem Satz von Varianten für die Icon - Zähler Reihenfolge, je mit und ohne Trennstrich.
Ich hätte da auch noch eine weiter automatisierte Version mit Variablen die selbständig die Trennlinie inkl. Abständen einbauen, aber dann blickt keiner mehr durch.

Dann gibt es den einfacheren Code den ich selber benutze, mit einer festgelegten Icon - Zähler Reihenfolge; wer etwas den Überblick hat, sollte sich aus dem kompletten Code bedienen können, um seine eigenen Reihenfolgen und Trennstriche in eine vereinfachte Version einzubauen.
Oder einfach fragen.

Vielen Dank nochmals an alle Beteiligten!

PS:
Ein Hinweis noch: bei den Extra Einstellungen für den Fall daß ein Zähler auf 0 steht - will ich unbedingt - konnte ich bei mir einen Performance Unterschied feststellen zw. opacity und fill bzw. color mit reduzierter Deckkraft im Farbcode.

ZB ist opacity: 0.5 deutlicher langsamer als etwa color: hsl(0, 0%, 50%, 0.5) !important; und fill: hsl(0, 0%, 50%, 0.5) !important;.
Das macht sich uU nicht bei jedem bemerkbar, evtl. nur bei vielen 0 Einträgen, und man braucht in dem speziellen Fall auch ein .svg Icon mit der korrekten fill Definition im Code, etc..

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

Beiträge von Horstmann

Skripte funktionieren nicht mehr

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