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

Mira_Belle

Edit: Oder probier mal diese Version mit background-image, ich hab das auch für mich selber so umgestellt.

JavaScript

// JavaScript Document
// BookmarkCount.uc.js - modified #2
// Author BrokenHeart
// Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229536#post1229536
// Endor Repository Link 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_Belle
    let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
    let ico1 = "iconfolder.png"
    let ico2 = "iconitems.png"

    function setFunction() {

        const css =`

             /*  First icon  /  folder count  /  second icon  /  item count  */

            .countClass1::before {
                content: "";
                background-image: url(${profilePath}/${ico1}); 
                background-repeat: no-repeat;
                background-size: 16px;  /* icon size */
                background-position: center;
                margin-inline: 16px 2px;  /* icon 1 distance left right */
                height: 16px;
                width: 16px;
                /*fill: black;
                fill-opacity: 1;*/
            }

            .countClass1 label {
                margin-inline: 0px !important;
           }

            .countClass1::after {
                content: attr(data-value1); 
                /*color: black;*/
            }

            .countClass2::before {
                content: "";
                background-image: url(${profilePath}/${ico2});
                /*background-image: url("chrome://browser/skin/bookmark-hollow.svg");*/
                background-repeat: no-repeat;
                background-size: 16px;  /* icon size */
                background-position: center;
                margin-inline: 2px 2px;  /* icon 2 distance left right */
                height: 16px;
                width: 16px;
                /*fill: black;
                fill-opacity: 1;*/
            }

            .countClass2::after {
                content: attr(data-value2); 
                /*color: black;*/
                margin-inline: 0 4px !important;  /* distance right */
            }

            .countClass2 image {
                order: 1;
            }
        `;

        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 = "(" + menuCount + ")"
              label1.setAttribute('data-value1', strCountOut1);

              let label2 = item.childNodes[4];
  
              label2.classList.add('countClass2');
              let strCountOut2 = "(" + menuitemCount + ")"
              label2.setAttribute('data-value2', strCountOut2);


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

Alles anzeigen

Sehr nette Spielerei!

Ich finde nur, es ist unglücklich, dass sich die Symbole am Lable rechts ausrichten.

Ich habe teilw. zweistellige Ziffern für Links und so wird das ganze dann für mich recht "unordentlich".

Auch habe ich in einem kurzen Test nicht herausgefunden, wie ich die SVG-Dateien einfärben kann.

Was ich schön finde, die Lable lassen sich separat ansprechen und entsprechend unterschiedliche Farben zuweisen.

Ich danke Dir für's teilen, aber ich denke, ich bleibe vorerst bei "meinem" Skript.

Was mich jetzt juckt, ist, dass bei mir das Lable beide "Zahlen" sind.

Mal schauen, ob ich es anders hinbekomme.

Horstmann

Zitat von Mira_Belle

Zitat von Horstmann

Edit: Oder probier mal diese Version mit background-image, ich hab das auch für mich selber so umgestellt.

Sehr nette Spielerei!
Ich finde nur, es ist unglücklich, dass sich die Symbole am Lable rechts ausrichten.
Ich habe teilw. zweistellige Ziffern für Links und so wird das ganze dann für mich recht "unordentlich".
Auch habe ich in einem kurzen Test nicht herausgefunden, wie ich die SVG-Dateien einfärben kann.

Hmm, versteh ich nicht ganz, hast du mal ein Bild wie der Code bei dir aussieht, und wie du dir das vorstellst?

Sowas wie dein Bild in #214 geht eigentlich recht einfach mit dem neuen Code.

In Zeile 68 kannst du den Abstand des ganzen Blocks nach rechts zum Pfeil verändern.

In den Zeilen 38/39 bzw 61/62 entfernst du die /**/ , und kannst dann - bei darauf vorbereiteten - Icons die Farbe ändern.

Mira_Belle

Es hat mir einfach keine Ruhe gelassen.

JavaScript

// JavaScript Document
// BookmarkCount.uc.js
// Author BrokenHeart
// Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229536#post1229536
//
// Korrektur von BrokenHeart
// Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229696#post1229696
// 
// Erweiterung von Sören Henschel
// Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229555#post1229555
//
// Anpassung von Mira_Belle inspiriert durch grisu2099
// Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229875#post1229883
//
// Anpassung von Mira_Belle inspiriert durch Horstmann
// Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229875#post1229883


(function() {

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

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

    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-right: -4px !important;
                height: 16px;
                width: 16px;
            }
            .countClass1 label {
                margin-inline: 0px !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: #FFB90F !important;
                margin-inline: 0px !important;
            }
            .countClass2::before {
                content: "";
                background-image: url(${profilePath}/${icon2});
                background-repeat: no-repeat;
                background-size: 16px;  /* icon size */
                background-position: center;
                margin-right: -4px !important;
                margin-left: -6px !important;
                height: 16px;
                width: 16px;
            }
            .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;
            }
            .countClass2 image {
                order: 1;
            }
        `;

        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 = '\xa0' + String(menuCount).padEnd(2) + '\xa0'; 
              label1.setAttribute('data-value1', strCountOut1);

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

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

Alles anzeigen

So passt es jetzt!

Nur mit dem Einfärben der Symbole, da habe ich so meine Probleme.

Daher habe ich die entsprechenden Symbole direkt bearbeitet.

--------------------------------------------------------------------------------------------------------------------------------------------------------

Nachtrag

Auch das Problem ist gelöst.

Es lag wohl an den von mir verwendeten Symbolen.

Die wollten sich einfach nicht färben lassen.

Also habe ich andere genommen und es noch einmal probiert, und siehe da, es klappt.

Habe nach den Zeilen 42 & 64 einfach fill: #c0c0c0; & fill-opacity: 1; wieder eingefügt!

Ich danke Dir, Horstmann, für die wunderbare Inspiration und Hilfe.

Horstmann

Zitat von Mira_Belle

Es hat mir einfach keine Ruhe gelassen.

Zitat von Mira_Belle

So passt es jetzt!
--------------------------------------------------------------------------------------------------------------------------------------------------------
Nachtrag
Horstmann

Mooooment, junge Dame, einen hab ich noch.

Nachdem du auf die Ausrichtung hingewiesen hast, musste ich natürlich auch nochmal ran...

Das sollte den gleichen Look ergeben wie dein Script, wobei hier alle Elemente verschiebbar sind.

Die beiden Einträge für min-width sind entscheidend, und basieren auf der tatsächlichen Breite der Zählereinheit (in den Browser-Werkzeugen ausgelesen).

Breiter geht immer, kostet aber Platz, schmaler macht dann die saubere Ausrichtung wieder kaputt.

Wenn also Text, Sonderzeichen etc. dazukommen, muss man diese Breitenwerte wieder anpassen; ich vermute das ist in deinem Script ähnlich.

Der Rest müsste sich aber automatisch anpassen.

Hier für 2 Ziffern in der Ordneraufzählung (mit dieser Zählerdarstellung), und 3 Ziffern in der Linkaufzählung:

JavaScript

// JavaScript Document
// BookmarkCount.uc.js - modified #3
// Author BrokenHeart
// Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229536#post1229536
// Endor Repository Link 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 ico1 = "foldericon.png"         //  flower.png
    let ico2 = "itemicon.png"

    function setFunction() {

        const css =`


            /****  folder count  ****/

            .countClass1::before {
                content: "";
                background-image: url(${profilePath}/${ico1}); 
                background-repeat: no-repeat ;
                background-size: 16px;                    /*  icon 1 size  */
                background-position: center;
                margin-inline: 16px 2px;                   /*  title  <--  icon 1  -->  folder count  */
                height: 16px;
                width: 16px;
                fill: red !important;
                fill-opacity: 1;
            }

            .countClass1 label {
                margin-inline: 0px !important;
           }

            .countClass1::after {
                content: attr(data-value1); 
                min-width: 24px !important;    /*  fixed width folder count (XX)  */
                /*color: black;*/
                margin-right: 4px;                           /*  folder count  -->  icon 2  */
            }


            /****  item count  ****/

            .countClass2::before {
                content: "";
                /*background-image: url(${profilePath}/${ico2});*/
                background-image: url("chrome://browser/skin/bookmark-hollow.svg");
                background-repeat: no-repeat;
                background-size: 16px;                       /*  icon 2 size  */
                background-position: center;
                margin-right:  2px;                               /*  icon 2  -->  item count  */
                height: 16px;
                width: 16px;
                fill: green;
                fill-opacity: 1;
            }

            .countClass2::after {
                content: attr(data-value2); 
                min-width: 36px !important;             /*  fixed width item count (XXX)  */
                /*color: black;*/
                margin-right:  0px !important;                    /*   item count  -->  arrow  */
            }

            .countClass2 image {
                order: 1;
                margin-right: 0px !important;                    /*  arrow  -->  box border  */
            }
        `;

        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 = "(" + menuCount + ")"
              label1.setAttribute('data-value1', strCountOut1);

              let label2 = item.childNodes[4];
  
              label2.classList.add('countClass2');
              let strCountOut2 = "(" + menuitemCount + ")"
              label2.setAttribute('data-value2', strCountOut2);


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

Alles anzeigen

Mira_Belle

Zitat von Horstmann

Mooooment, junge Dame, einen hab ich noch.
Nachdem du auf die Ausrichtung hingewiesen hast, musste ich natürlich auch nochmal ran...
Das sollte den gleichen Look ergeben wie dein Script, wobei hier alle Elemente verschiebbar sind.
Die beiden Einträge für min-width sind entscheidend, und basieren auf der tatsächlichen Breite der Zählereinheit (in den Browser-Werkzeugen ausgelesen).
Breiter geht immer, kostet aber Platz, schmaler macht dann die saubere Ausrichtung wieder kaputt.
Wenn also Text, Sonderzeichen etc. dazukommen, muss man diese Breitenwerte wieder anpassen; ich vermute das ist in deinem Script ähnlich.

Alles anzeigen

Nee nee, ich mag einfach nicht mehr.

Ich habe das mit den 2 Ziffern in der Ordneraufzählung und 3 Ziffern in der Linkaufzählung so gelößt:

let strCountOut1 = '\xa0' + String(menuCount).padEnd(2) + '\xa0';

und

let strCountOut2 = '\xa0' + String(menuitemCount).padEnd(3, '\xa0');
gelößt.

Die Ausrichtung aller einzelnen Elemente lässt sich per CSS steuern.

Sollte ich dennoch mal wirklich über hundert Links in einem Ordner haben,

muss ich aber dennoch mal ran.

Horstmann

Zitat von Mira_Belle

Nee nee, ich mag einfach nicht mehr.
Ich habe das mit den 2 Ziffern in der Ordneraufzählung und 3 Ziffern in der Linkaufzählung so gelößt:
let strCountOut1 = '\xa0' + String(menuCount).padEnd(2) + '\xa0';
und
let strCountOut2 = '\xa0' + String(menuitemCount).padEnd(3, '\xa0');
gelößt.
Die Ausrichtung aller einzelnen Elemente lässt sich per CSS steuern.

Alles anzeigen

Dass du die Ausrichtung/Separierung der Elemente schon eingebaut hattest, hatte ich glatt übersehen beim ersten Drüberschauen - sorry.

Mir reicht's jetzt auch, vor allem für ein Script das ich wahrscheinlich eh wieder rausschmeisse.

Aber - wieder dazugelernt!

Deine Lösung funktioniert viel besser als meine bzgl. Flexibilität, schlau mit dem Text und den Puffern, auch wenn ich nicht gerne die Fonts ändere - und das etwas über meine Kompetenz hinausgeht...

Danke für die Anregungen und Lösungen.

Mira_Belle

Zitat von Horstmann

Mir reicht's jetzt auch, vor allem für ein Script das ich wahrscheinlich eh wieder rausschmeisse.
Aber - wieder dazugelernt!
Deine Lösung funktioniert viel besser als meine bzgl. Flexibilität, schlau mit dem Text und den Puffern, auch wenn ich nicht gerne die Fonts ändere - und das etwas über meine Kompetenz hinausgeht...
Danke für die Anregungen und Lösungen.

Danke für das Lob, aber das mit den Fonts und den Puffern stammt ja nicht von mir,

sondern von Sören Hentzschel, und ohne Deine Anregungen und Codeschnipsel wäre das auch nichts geworden.

Im Übrigen stammt das mit den Fonts von unserem Guru und Meister BrokenHeart.

Ich habe nur alle Zutaten zusammen geschüttet und ein neues Gericht daraus kreiert,

die Küche ist halt doch mein zu Hause, gelle .DeJaVu.

Sorry, der musste jetzt raus, habe wohl 'nen Clown gefrühstückt.

Mira_Belle

Version 1.01

Code bereinigt und kommentiert!

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 = "folder_org.svg"
    let icon2 = "bookmark-hollow.svg"

    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-right: -20px !important; /* Abstand bis zum "Wert" der Ordner */ 
                height: 16px;
                width: 16px;
                fill: #c0c0c0;
                fill-opacity: 1;
            }
            .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: #FFB90F !important;
            }
            .countClass2::before {
                content: "";
                background-image: url(${profilePath}/${icon2});
                background-repeat: no-repeat;
                background-size: 16px;  /* icon size */
                background-position: center;
                margin-right: 4px !important;   /* Abstand bis zum "Wert" der Links */
                margin-left: -6px !important;   /* Abstand bis zum Icon 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: #FFD700 !important;
                margin-right: -6px !important;  /* Abstand zum Pfeil rechts */
            }
            .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 
              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    
              label2.setAttribute('data-value2', strCountOut2);

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

Alles anzeigen

Horstmann

Zitat von Mira_Belle

Finale.
Code bereinigt und kommentiert

Sorry dass ich das nochmal vorbringe, aber das klappt nicht so ganz bei mir.

Wenn ich dein Script in einem Testprofil ohne weitere CSS etc. Modifikationen benutze, sieht das aus wie im Bild im Anhang.

Da habe ich nur ein paar Farben und die Icons geändert zur besseren Übersicht.

Hast du evtl. in einem Profil mit anderen Veränderungen getestet?

Das Problem hatte ich auch...

Kann aber auch damit zusammenhängen dass ich einen Mac benutze.

Abgesehen von den Überlappungen, die beiden grössten Baustellen:

a) der Textblock für die Zähler rechts und der links haben verschiedene Grössen und Positionen, und der Text ist in seine Feld oben links angeordnet - keine Ahnung warum.

Ein Grund ist dass menu-accel-container kein align-items: center hat, der darauffolgende Container .menu-right aber schon.

Wobei ich das Problem nur sehe wenn ich die (monospace) Fonts benutze, die aber ja wohl notwendig sind für diese Lösung.

Dss Resultat ist, dass der linke Textzähler höher als der rechte sitzt.

b) Kleineres Manko: Die Margins kann man einfacher haben, und die negativen Werte vermeiden, wenn man für .countClass1 label das margin-inline auf 0 setzt .

Firefox hat da nämlich als Standard ein linkes Margin vom Label aus von 16px gesetzt, das bei schmalen Popup Fenstern einen minimalen Abstand zw. linken und rechten Elemente erzwingt - dieser Abstand muss jetzt vor unser erstes ::after, oder das gesamte Element.

Hier mal ein grober Versuch das Ganze anzupassen, ich hoffe es macht Sinn:

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 = "flower.png"
    let icon2 = "faviconfull.svg"

    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: 4px !important;    /* Abstand bis zum "Wert" der Ordner CHANGE  */ 
                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: red !important;                     /*  TEST  */  
                background-color: lightblue;          /*  TEST  */
                height: 12px;                                 /* height = font size Text zentriert CHANGE  */
            }


            .countClass2::before {
                content: "";
                /*background-image: url(${profilePath}/${icon2});*/        /*  TEST  */
                background-image: url("chrome://browser/skin/bookmark-hollow.svg");
                background-repeat: no-repeat;
                background-size: 16px;  /* icon size */
                background-position: center;
                margin-right: 4px !important;   /* Abstand bis zum "Wert" der Links */
                margin-left: 4px !important;   /* Abstand bis zum Icon der (Links) ORDNER  CHANGE */
                height: 16px;
                width: 16px;
                /*fill: #c0c0c0;*/         /*  TEST  */
                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: red !important;                     /*  TEST  */
                /*margin-right: -6px !important;*/  /* Abstand zum Pfeil rechts CHANGE */
                background-color: lightblue;         /*  TEST  */
                height: 12px;                                 /* height = font size Text zentriert CHANGE  */
            }


            .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');  //  TEST CHANGE?
              let strCountOut1 = String(menuCount).padEnd(2) + '\xa0';     // padEnd2 => zwei Stellen, plus Abstand 
              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    
              label2.setAttribute('data-value2', strCountOut2);

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

Alles anzeigen

Mira_Belle

Horstmann

Dein Skript in einem neuen Profil getestet!

Konnte das mit b nachvollziehen!

Ich habe das mit dem margin-inline auf 0 setzen rausgenommen, damit nicht so viele Stellen zum Rumschrauben da sind!

Was a angeht, war alles i.O., so wie von mir gedacht.

Warum bei Dir auf dem Mac mit den Grüßen und den Positionen so komisch ist

Vielleicht kann ja Sören Hentzschel das noch mal gegenchecken?

Hast Du mal versucht, die Variablen mit

let strCountOut1 = + menuCount + '\xa0'
und

let strCountOut2 = + menuitemCount + '\xa0'+ '\xa0' zu ersetzen?

Horstmann

Zitat von Mira_Belle

Was a angeht, war alles i.O., so wie von mir gedacht.
Warum bei Dir auf dem Mac mit den Grüßen und den Positionen so komisch ist

In deinem Screenshot von #225 sind die Zahlen allerdings genauso vertikal versetzt, wie bei meinem Test deiner letzten Version.

(Übrigens: wenn du einem Usernamen ein @ vorstellst (rote Outline als Ergebnis), bekommt dieser User (evtl.) eine Mitteilung darüber erwähnt worden zu sein.

Wenn du nur einen Link zum Userprofil einstellst, dann nicht.

Mira_Belle vs. Mira_Belle . )

Mira_Belle

Zitat von Horstmann

In deinem Screenshot von #225 sind die Zahlen allerdings genauso vertikal versetzt, wie bei meinem Test deiner letzten Version.

Stimmt, habe ich gerade auch gemerkt, ist zwar nur 1px, aber halt doch versetzt!

Danke für den Hinweis.

Habe also auch

CSS

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

hinzugefügt.

Ist's mit den neuen Variablen besser?

Mira_Belle

Zitat von Horstmann

(Übrigens: wenn du einem Usernamen ein @ vorstellst (rote Outline als Ergebnis), bekommt dieser User (evtl.) eine Mitteilung darüber erwähnt worden zu sein.
Wenn du nur einen Link zum Userprofil einstellst, dann nicht.
Mira_Belle vs. Mira_Belle . )

Verstehe ich nicht.

Bist Du benachrichtigt worden?

OK, bei Sören hatte ich das @ vergessen.

Aber bei mir schaut das dann immer anders aus, ohne rote Umrandung.

Horstmann

Zitat von Mira_Belle
Zitat von Horstmann

In deinem Screenshot von #225 sind die Zahlen allerdings genauso vertikal versetzt, wie bei meinem Test deiner letzten Version.

Stimmt, habe ich gerade auch gemerkt, ist zwar nur 1px, aber halt doch versetzt!
Danke für den Hinweis.
Habe also auch
CSS
    /* 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;
            }
hinzugefügt.
Ist's mit den neuen Variablen besser?
Alles anzeigen

Viel besser - mit nur dem 2ten Teil !

Sind aber mehr als 1 Pixel Versatz gewesen, eher 2.

Damit der 1ste Teil mit deinem letzten Script funktioniert, müsste man noch die ganzen anderen Margins anpassen, das ist aber weniger das Problem.

Der Text der Zählereinheiten ist allerdings immer noch zur oberen Kante hin ausgerichtet, statt mittig.

Der blaue Kasten ist das Textfeld, man sieht dass der Text nicht vertikal zentriert ist wie der Rest der Zeile.

Ist aber kein Drama, das kann man bestimmt leicht verschieben wenn's stört.

Was wirklich hilft sind Screenshots zu den Codes - mach ich auch nicht immer - aber dann hat man einen besseren Vergleich.

2002Andreas

Zitat von Mira_Belle

Verstehe ich nicht.

Ergänzend.

Wenn du jemanden zitierst, dann bekommt er auch eine Meldung oben angezeigt.

Dazu musst das hier aktiviert sein:

Horstmann

Zitat von Mira_Belle

Bist Du benachrichtigt worden?

Nein, auch nicht bei deinen anderen Posts mit nur meinem Link drin.

Zitate funktionieren, wie Andreas gerade geschrieben hat, nicht aber Links.

FuchsFan

Zitat von Horstmann

Hier mal ein grober Versuch das Ganze anzupassen, ich hoffe es macht Sinn:

Da kann man was draus machen, wieso eigentlich nicht?

Horstmann

Zitat von FuchsFan

Da kann man was draus machen, wieso eigentlich nicht?

Ah, noch ein Freund der schönen Farbe Blau!

War aber eigentlich nur zum Testen eingebaut.

Mira_Belle

Zitat von Horstmann

Der Text der Zählereinheiten ist allerdings immer noch zur oberen Kante hin ausgerichtet, statt mittig.
Der blaue Kasten ist das Textfeld, man sieht dass der Text nicht vertikal zentriert ist wie der Rest der Zeile.
Ist aber kein Drama, das kann man bestimmt leicht verschieben wenn's stört.
Was wirklich hilft sind Screenshots zu den Codes - mach ich auch nicht immer - aber dann hat man einen besseren Vergleich.

Also bei mir ist es mit Deinem ergänzendem Code mittig!

Und hier der Code dazu.

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 = "folder_org.svg"
    let icon2 = "bookmark-hollow.svg"

    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-right: 4px !important; /* Abstand bis zum "Wert" der Ordner */ 
                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;    */          /*  TEST  */
                color: red !important;
                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-right: 4px !important;   /* Abstand bis zum "Wert" der Links */
                margin-left: -6px !important;   /* Abstand bis zum Icon 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: #FFD700 !important;    */          /*  TEST  */
                color: red !important;
                margin-right: -6px !important;  /* Abstand zum Pfeil rechts */
                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 
              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    
              label2.setAttribute('data-value2', strCountOut2);

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

Alles anzeigen

omar1979

Zitat von Mira_Belle

Also bei mir ist es mit Deinem ergänzendem Code mittig!

Sorry wenn ich mich irre, aber auf deinem Letzten Bild sehe ich das blaue Feld mit dem Anzahl und das Stern-Icon überschneiden sich. Ist das evtl extra gemacht?