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

Dharkness

Zitat von Mira_Belle

Man bist Du ungeduldig.

Aber ja doch.

Jetzt noch den Text rechtsbündig ausrichten und das ganze wäre perfekt, siehst Du da eine Möglichkeit?

grisu2099

Zitat von Dharkness

Jetzt noch den Text rechtsbündig ausrichten und das ganze wäre perfekt, siehst Du da eine Möglichkeit?

Wenn du damit leben kannst, daß die Zahlen vor den Icons sind, kannst du ja mal diese Version testen:

JavaScript

// BookmarkCount.uc.js

/* ******************************************************************************************************************* */
/* Author BrokenHeart               => https://www.camp-firefox.de/forum/thema/136572/?postID=1229536#post1229536 **** */
/* Correction from BrokenHeart      => https://www.camp-firefox.de/forum/thema/136572/?postID=1229696#post1229696 **** */
/* Extension from Sören Henschel    => https://www.camp-firefox.de/forum/thema/136572/?postID=1229555#post1229555 **** */
/* Customized by Mira inspired by grisu2099     ********************************************************************** */
/* Source                           => https://www.camp-firefox.de/forum/thema/136572/?postID=1229875#post1229883 **** */
/* Customized by Mira inspired by Horstmann     ********************************************************************** */
/* Source                           => https://www.camp-firefox.de/forum/thema/136572/?postID=1229993#post1229993 **** */
/* ******************************************************************************************************************* */
/* Finaly Source                    => https://www.camp-firefox.de/forum/thema/136572/?postID=1230128#post1230128 **** */
/* ******************************************************************************************************************* */
/* Custom Counter in the Bookmarks for folders and links ************************************************************* */
/* ******************************************************************************************************************* */

(function() {

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

    let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
    let icon1 = "Ordner.png"
    let icon2 = "Lesezeichen.png"

    function setFunction() {

        const css =`
            .countClass1::before {
                content: attr(data-value1) !important;
                font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
                font-size: 12px !important;
                font-weight: 900 !important;
                color: lightgreen !important;
                width: 15px !important;
                padding: 0 !important;
                margin-top: 2px !important;
                margin-right: 4px !important;
            }
        
            .countClass1::after {
                content: "/";
                background-image: url(${profilePath}/${icon1}); 
                background-repeat: no-repeat;
                background-size: 16px;
                background-position: 0 1px;
                color: lightgreen !important; 
                text-align: right !important;
                margin-left: 0 !important;
                margin-right: 4px !important;
                margin-bottom: 2px !important;
                height: 16px;
                width: 26px;
            }
            .countClass1 label {
                margin-inline: 0px !important;
            }

            .countClass2::before {
                content: attr(data-value2);
                font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
                font-size: 12px !important;
                font-weight: 900 !important;
                color: lightgreen !important;
                width: 25px !important;
                padding: 0 !important;
            }

            .countClass2::after {
                content: "";
                background-image: url(${profilePath}/${icon2});
                background-repeat: no-repeat;
                background-size: 16px;
                background-position: center;
                margin-right: 4px !important;
                margin-left: -1px !important;
                height: 16px;
                width: 16px;
            }

            .countClass2 image {
                order: 1;                       Pfeil hinter dem "Wert" der Links
                padding-left: 4px !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 label1 = item.childNodes[3];
  
              label1.classList.add('countClass1');
              let strCountOut1 = String(menuCount).padStart(2, '\xa0');
              label1.setAttribute('data-value1', strCountOut1);

              let label2 = item.childNodes[4];
  
              label2.classList.add('countClass2');
              let strCountOut2 = String(menuitemCount).padStart(3, '\xa0');
              label2.setAttribute('data-value2', strCountOut2);

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

Alles anzeigen

Horstmann

Zitat von Mira_Belle

Sooo,
nach einigen Anregungen und weiterem Code eine weitere neue Version des Skriptes.

Ich habe nun auch mit so einigen Fonts unter Windows 10 herumexperimentiert,
habe dabei auch festgestellt, dass so mancher Font quasi hochgestellt wird.
Darum, bzw., welcher Wert es genau ist um den Font dann mittig zu bekommen,
kümmere ich mich noch.
Eventuell weiß es ja auch schon jemand, ich brauch’ aber jetzt erst einmal 'ne Pause.

Alles anzeigen

Dankeschön, und erhol dich gut.

Dann sehen wir doch ähnliche Probleme, seltsam mit diesen Fonts...

Nur weil ich auch in der Gegend unterwegs bin, hier ein weiterer Versuch meinerseits; die Fonts Einstellung oben muss man sich evtl. anpassen oder ergänzen, je nach OS.

Die Icons sind hier wieder von Firefox, und wie die Farben/Outlines/Hintergründe NUR zum einfacheren Testen gedacht, damit man (hoffentlich) das Script ansonsten nicht bearbeiten muss vor dem testen.

Die Abstände passen für meinen Geschmack, sind aber voll anpassbar.

Negative Margins versuche ich immer zu vermeiden, weil man dann oft zum einen ein anderweitiges Problem nur kaschiert, und zum anderen anfängt Elemente übereinander zu schieben.

Was nach meiner - sehr beschränkten Erfahrung - nur klappt wenn man entweder Glück hat, oder den Rest sauber anpasst.

Hier ist es aber denk ich unnötig.

TEST:

JavaScript

// JavaScript Document
// BookmarkCount.uc.js - modified #xx TEST
// Author BrokenHeart
// Modified by Mira / Horstmann
// Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229536#post1229536
// Endor Repository Link Source https://github.com/Endor8/userChrome.js/blob/master/Firefox%20115/BookmarkCount.uc.js



(function() {

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


    //Custom icons in profile/chrome/icons folder, code shared by Mira

    let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
    let icon1 = "folder3neuFat2b.png"   // flower.png
    let icon2 = "faviconfull.svg"

    function setFunction() {

        const css =`


            /**  Basics  **/

            /* Font Size / font weight counter , disable to use default  / fonts list */
            :root {
                --counter_fontsize: 11px;   
                /*--counter_fontweight: 800;*/     
                --counter_fonts: "Droid Sans Mono", "SF Mono", "Andale Mono", monospace;   
                /*--counter_fonts: Consolas, "Lucida Console", "Courier New", monospace;*/   
            }

            /* Fix container content vertical centering for first / folder counter */ 
            hbox.menu-accel-container.countClass1 {
                align-items: center !important;
            }

            /* Disable default left margin */ 
            .countClass1 label {
                margin-inline: 0px !important;
            }

            /* Folder counter box distance left / right */
            hbox.menu-accel-container.countClass1 {
                margin-left: 16px !important;                  /* minimum distance to left */ 
                margin-right: 4px !important;       /* distance to Items / links counter box */ 
            }

            /****  folder counter box  ****/

            /* Icon */
            .countClass1::before {
                content: "";
                /*background-image: url(${profilePath}/${icon1});*/         /*  Custom icon  */
                background-image: url("chrome://global/skin/icons/folder.svg");
                background-repeat: no-repeat;
                background-size: 14px;                                                            /* icon size */
                background-position: center;
                margin-right: 4px !important;                            /* distance icon -> counter */
                height: 16px;
                width: 16px;
                /*fill: #c0c0c0;*/         /* .svg icon colour / opacity if usable */
                fill-opacity: 1;
            }

            /* Counter */
            .countClass1::after {
                content: attr(data-value1) !important;
                font-family:  var(--counter_fonts) !important;
                font-size: var(--counter_fontsize) !important;
                font-weight: var(--counter_fontweight) !important;
                color: red !important;                                                  /*  Text 1 colour */
            }


            /****  Items / links counter box  ****/

            /* Icon */
            .countClass2::before {
                content: "";
                /*background-image: url(${profilePath}/${icon2});*/      /*  Custom icon  */
                background-image: url("chrome://browser/skin/bookmark-hollow.svg");
                background-repeat: no-repeat;
                background-size: 14px;                                                         /* icon size */
                background-position: center;
                margin-right: 4px !important;                         /* distance icon -> counter */
                height: 16px;
                width: 16px;
                /*fill: #c0c0c0;*/         /* .svg icon colour / opacity if usable */
                fill-opacity: 1;
            }

            /* Counter */
            .countClass2::after {
                content: attr(data-value2);
                font-family:  var(--counter_fonts) !important;
                font-size: var(--counter_fontsize) !important;
                font-weight: var(--counter_fontweight) !important;
                color: red !important;                                                 /* Text 2 colour */
                margin-right: 4px !important;                               /* distance to arrow */
            }

            /* Arrow right */
            /* Move arrow to the right */
            .countClass2 image {
                order: 1;        
            }


           /** Extra stuff  **/

           /*  Some fonts not centered Fix, optional, experimental  */
           /* .countClass1::after, .countClass2::after {
                height: var(--counter_fontsize) !important;                  
            }*/


            /*  Outline only for testing  */ 
            menu.menu-iconic.bookmark-item {
                 outline: 1px solid orange !important;
                 outline-offset: -8px !important;
            }

            /*  Background only for testing  */ 
            .countClass1::after, .countClass2::after {
                 outline: 1px solid green !important;
                 outline-offset: -1px !important;
                 background-color: lightblue;
            }

        `;

        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;
              
              // Folder counter, 2 digits
              let label1 = item.childNodes[3];
              label1.classList.add('countClass1');
              let strCountOut1 = String(menuCount).padEnd(2,  '\xa0');
              label1.setAttribute('data-value1', strCountOut1);

              // Links counter, 3 digits
              let label2 = item.childNodes[4];
              label2.classList.add('countClass2');
              let strCountOut2 = String(menuitemCount).padEnd(3, '\xa0');
              label2.setAttribute('data-value2', strCountOut2);

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

Alles anzeigen

omar1979

Zitat von Mira_Belle

Wenn Du interessiert bist an diesem Skript, dann nutze doch bitte erst einmal das aus #230.
Alle Versionen danach sind erst einmal nur zum Testen und div. Fehler ausmerzen.
Denn es scheint wohl so, dass sich das Skript unter Mac anders verhält als unter Windows.
Dem wollen wir, Horstmann und ich auf dem Grund gehen.

Danke für die Info. Ich wusste leider nicht, welches das passt. Habe nur die Bilder angeschaut und so getestet.

Dharkness

Zitat von grisu2099

Wenn du damit leben kannst, daß die Icons vor den Icons sind, kannst du ja mal diese Version testen:

Wenn Du mir erzählst, wie man den Schrägstrich zwischen Ordner und Bookmarks entfernt, könnte ich möglicherweise damit zurechtkommen.

grisu2099

Zeile 45

Horstmann

Zitat von grisu2099

Zitat von Dharkness

Jetzt noch den Text rechtsbündig ausrichten und das ganze wäre perfekt, siehst Du da eine Möglichkeit?

Wenn du damit leben kannst, daß die Zahlen vor den Icons sind, kannst du ja mal diese Version testen:

Aber wieso, die Zahlen rechtsbündig geht doch genauso gut mit den Zahlen nach den Icons?

grisu2099

Ja, aber die Version mit den Zahlen vorne habe ich vorrätig...

Dharkness

Zitat von Horstmann

Aber wieso, die Zahlen rechtsbündig geht doch genauso gut mit den Zahlen nach den Icons?

Und wie, wenn man das ↓ als Basis nimmt?

JavaScript

// BookmarkCount.uc.js

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

(function() {

    if (!window.gBrowser) return;

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

    let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
    let icon1 = "folder-4s.png"
    let icon2 = "Bildschirm-3.png"

    function setFunction() {

        const css =`
            .countClass1::before {
                content: "";
                background-image: url(${profilePath}/${icon1});
                background-repeat: no-repeat;
                background-size: 16px;                  /* icon size */
                background-position: center;
                margin-left: 16px !important;           /* Abstand links minimum für schmale Popus  CHANGE  */
                margin-right: -1px !important;          /* Abstand bis zum "Wert" der Ordner */
                height: 16px;
                width: 16px;
            }

            /* Default FX left margin ist 16px !! -->  CHANGE  */

            .countClass1 label {
                margin-inline: 0px !important;
            }
            /* Ordner container Inhalt zentriert -->  CHANGE  */

            hbox.menu-accel-container.countClass1 {
                align-items: center !important;

            }
            .countClass1::after {
                content: attr(data-value1) !important;
                font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
                font-size: 12px !important;
                font-weight: 900 !important;
                color: #D2534C !important;
                height: 14px;                           /* height = font size Text zentriert CHANGE  */
                width: 15px !important;                 /* Platzhalter für Anzahl der Stellen */
                padding-left: 4px !important;           /* height = font size Text zentriert CHANGE  */
                margin-right: -4px !important;          /* Abstand zum Symbol rechts */

            /*    background-color: lightblue; */           /* TEST */
            }
            .countClass2::before {
                content: "";
                background-image: url(${profilePath}/${icon2});
                background-repeat: no-repeat;
                background-size: 16px;                  /* icon size */
                background-position: center;
                margin-left: 4px !important;            /* Abstand bis zum Icon der Links */
                margin-right: -1px !important;           /* Abstand bis zum "Wert" der Links */
                height: 16px;
                width: 16px;
                fill: #c0c0c0;
                fill-opacity: 1;
            }
            .countClass2::after {
                content: attr(data-value2);
                font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
                font-size: 12px !important;
                font-weight: 900 !important;
                color: #D2534C !important;
                height: 14px;                           /* height = font size Text zentriert CHANGE  */
                width: 15px !important;                 /* Platzhalter für Anzahl der Stellen (25px für 3 Stellen) */
                padding-left: 4px !important;           /* height = font size Text zentriert CHANGE  */
                margin-right: -1px !important;          /* Abstand zum Pfeil recht */
                /* background-color: lightblue; */          /* TEST */
            }
            .countClass2 image {
                order: 1;                               /* Pfeil hinter dem "Wert" der Links */
            }
        `;

        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;
              item.style.color = '#c0c0c0';

              let label1 = item.childNodes[3];

              label1.classList.add('countClass1');
//              let strCountOut1 = String(menuCount).padEnd(2) + '\xa0';     // padEnd2 => zwei Stellen, plus Abstand
              let strCountOut1 = + menuCount + '\xa0'
              label1.setAttribute('data-value1', strCountOut1);

              let label2 = item.childNodes[4];

              label2.classList.add('countClass2');
//              let strCountOut2 = String(menuitemCount).padEnd(3, '\xa0');  // padEnd3 => drei Stellen, Abstand bei nur einer Ziffer
              let strCountOut2 = + menuitemCount + '\xa0'
              label2.setAttribute('data-value2', strCountOut2);

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

Alles anzeigen

Mira_Belle

Zitat von Dharkness
Und wie, wenn man das ↓ als Basis nimmt?
JavaScript
// BookmarkCount.uc.js

...

So.

JavaScript

// BookmarkCount.uc.js

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

(function() {

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

    let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
    let icon1 = "folder_org.svg"
    let icon2 = "bookmark-hollow.svg"

    function setFunction() {

        const css =`
            .countClass1::before {
                content: "";
                background-image: url(${profilePath}/${icon1});     /*  Custom icon  */ 
                background-repeat: no-repeat;
                background-size: 16px;                              /* icon size */
                background-position: center;
                margin-left: 16px !important;                       /* Abstand links minimum für schmale Popus  CHANGE  */
                margin-right: -1px !important;                      /* Abstand Icon "Ordner" bis zum "Zähler" */ 
                height: 16px;
                width: 16px;
                fill: #c0c0c0;
                fill-opacity: 1;
            }

            /* Default FX left margin ist 16px !! -->  CHANGE  */ 

            .countClass1 label {
                margin-inline: 0px !important;
            }
            /* Ordner container Inhalt zentriert -->  CHANGE  */

            hbox.menu-accel-container.countClass1 {
                align-items: center !important;

            }
            .countClass1::after {
                content: attr(data-value1) !important;
                font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
                font-size: 12px !important;
                font-weight: 900 !important;
                color: #FFD700 !important;                          /* Farbe des 1. Textes */
                height: 14px;                                       /* height = font size Text zentriert CHANGE  */
                width: 15px !important;                             /* Platzhalter für Anzahl der Stellen */
                padding-left: 4px !important;                       /* height = font size Text zentriert CHANGE  */
                margin-right: 0px !important;                      /* Abstand zum Icon "Links" rechts */

            /*    background-color: lightblue; */           /*  TEST  */
            }
            .countClass2::before {
                content: "";
                background-image: url(${profilePath}/${icon2});     /*  Custom icon  */
                background-repeat: no-repeat;
                background-size: 16px;                              /* icon size */
                background-position: center;
                margin-left: 4px !important;                        /* Abstand "Zähler 1" zum Icon2 */
                margin-right: -1px !important;                      /* Abstand Icon "Links" bis zum "Zähler" */
                height: 16px;
                width: 16px;
                fill: #c0c0c0;
                fill-opacity: 1;
            }
            .countClass2::after {
                content: attr(data-value2);
                font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
                font-size: 12px !important;
                font-weight: 900 !important; 
                color: #FFD700 !important;                          /* Farbe des 2. Textes */
                height: 14px;                                       /* height = font size Text zentriert CHANGE  */
                width: 15px !important;                             /* Platzhalter für Anzahl der Stellen (25px für 3 Stellen) */
                padding-left: 4px !important;                       /* height = font size Text zentriert CHANGE  */
                margin-right: 6px !important;                      /* Abstand zum Pfeil recht */

            /*    background-color: lightblue; */           /*  TEST  */
            }
            .countClass2 image {
                order: 1;                                           /* Pfeil ganz nach rechts */
            }
        `;

        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;
              item.style.color = '#c0c0c0';
              
              let label1 = item.childNodes[3];
  
              label1.classList.add('countClass1');
              let strCountOut1 = String(menuCount).padStart(2, '\xa0');
 
              label1.setAttribute('data-value1', strCountOut1);

              let label2 = item.childNodes[4];
  
              label2.classList.add('countClass2');
              let strCountOut2 = String(menuitemCount).padStart(3, '\xa0');

              label2.setAttribute('data-value2', strCountOut2);

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

Alles anzeigen

Zitat von Mira_Belle

...
Noch eine Anmerkung.
Ich habe nun auch mit so einigen Fonts unter Windows 10 herumexperimentiert,
habe dabei auch festgestellt, dass so mancher Font quasi hochgestellt wird.
Darum, bzw., welcher Wert es genau ist um den Font dann mittig zu bekommen,
kümmere ich mich noch.
Eventuell weiß es ja auch schon jemand, ich brauch’ aber jetzt erst einmal 'ne Pause.

Alles anzeigen

Habe mich damit ein wenig beschäftigt und habe festgestellt, dass es prinzipiell an den Fonts liegt.

Leider habe ich keine befriedigte Lösung gefunden, die allgemein greift,

so bleibt als einfachste Lösung nur

padding-bottom für zu tief gestellte Ziffern

oder

padding-top für zu hoch gestellte Ziffern zu nutzen,

um diese Auszurichten.

Dharkness

Zitat von Mira_Belle

So.

So ist es in der Tat fein, Dankeschön.

Mira_Belle

Zitat von Dharkness

So ist es in der Tat fein, Dankeschön.

Gerne doch.

Horstmann

Zitat von Mira_Belle

Habe mich damit ein wenig beschäftigt und habe festgestellt, dass es prinzipiell an den Fonts liegt.
Leider habe ich keine befriedigte Lösung gefunden, die allgemein greift,
so bleibt als einfachste Lösung nur
padding-bottom für zu tief gestellte Ziffern
oder
padding-top für zu hoch gestellte Ziffern zu nutzen,
um diese Auszurichten.

Alles anzeigen

Oder schauen was noch an Monospace Fonts auf dem System rumliegen, und die mal probieren.

In Windows gibt's doch sicher auch eine App die die installierten Schriften auflistet?

Ich wollte auch unbedingt die durchgestrichene 0 (Null) loswerden, die der andere Font benutzt.

Und dann ginge evtl. auch sowas.

Zitat von grisu2099

Ja, aber die Version mit den Zahlen vorne habe ich vorrätig...

Verstehe.

Danke übrigens, sieht für mich besser aus rechtsbündig.

grisu2099

Zitat von Horstmann

Danke übrigens, sieht für mich besser aus rechtsbündig.

Gern geschehen. Sieht nicht nur für dich besser aus, wenn die Zahlen rechtsbündig sind...

Mira_Belle

Zitat von Horstmann

...
Danke übrigens, sieht für mich besser aus rechtsbündig.

Zitat von grisu2099

Gern geschehen. Sieht nicht nur für dich besser aus, wenn die Zahlen rechtsbündig sind...

Über solche Dinge kann man ja vortrefflich streiten.

Ich habe die Symbole vor den Zählern stehen und finde es schrecklich,

wenn da zwischen Symbol und Zähler eine Lücke klafft.

Und wenn der Wert des Zählers auch noch dreistellig sein soll, uuha, grauslig.

Aber es ist ja schön, dass die Geschmäcker verschieden sind.

FuchsFan

Zitat von Mira_Belle

Aber es ist ja schön, dass die Geschmäcker verschieden sind.

Zitat von Mira_Belle

Über solche Dinge kann man ja vortrefflich streiten.

Muss ja nicht sein.

Ich wollte Dir nur noch ein Lob zukommen lassen, der Code von hier RE: Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen gefällt mir bisher am besten. Dort kann man after und before tauschen, gerade wie es gefällt (mit kleinen Anpassungen der Abstände).

Danke!

Dharkness

Zitat von Mira_Belle

Gerne doch.

So, das ↓ habe ich jetzt daraus gebaut, also noch einmal Dankeschön.

Mira_Belle

FuchsFan & Dharkness

Danke

Es freut mich, der Community auch etwas zurückgeben geben zu können,

und nicht immer nur für mich Code zurecht zu wurschteln.

Horstmann

Zitat von Dharkness

So, das ↓ habe ich jetzt daraus gebaut, also noch einmal Dankeschön.

Code dazu, zack-zack!

Wollte nur mal sehen, wie genau du den Trennstrich nach dem ersten Zähler eingebaut hast; kann's mir zwar ungefähr vorstellen, wäre aber prima wenn du das Script nachreichen könntest.

Mira_Belle

Zitat von Horstmann

Zitat von Dharkness

So, das ↓ habe ich jetzt daraus gebaut, also noch einmal Dankeschön.

Code dazu, zack-zack!
Wollte nur mal sehen, wie genau du den Trennstrich nach dem ersten Zähler eingebaut hast; kann's mir zwar ungefähr vorstellen, wäre aber prima wenn du das Script nachreichen könntest.

z.B.

let strCountOut1 = + menuCount + '\xa0' + "|"

ganz weit unten im Skript.

Dann halt auch den Abstand noch anpassen.