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

Mira_Belle

Zitat von Horstmann

Mitleser hat ja seine Lösung schon einmal hinbekommen, vielleicht hat er selber eine Idee.

Ne ne, hat er nicht, das ist nur eine erstellte Grafik zur Veranschaulichung, wie er es sich vorstellt.

Horstmann

Zitat von Mira_Belle

Zitat von Horstmann

Mitleser hat ja seine Lösung schon einmal hinbekommen, vielleicht hat er selber eine Idee.

Ne ne, hat er nicht, das ist nur eine erstellte Grafik zur Veranschaulichung, wie er es sich vorstellt.

Sicher?

Der von ihm gepostete Code funktioniert nämlich anscheinend ungefähr wie in seiner Darstellung - du hast ihn doch bestimmt probiert?

Und irgendwo kommt der Code ja her, mit den ganzen Ausnahmen.

Mira_Belle

Zitat von Horstmann

Sicher?
Der von ihm gepostete Code funktioniert nämlich anscheinend ungefähr wie in der Darstellung - du hast ihn doch bestimmt probiert?

Schäm, nein, hab ich nicht.

Dann ging es ihm doch wohl nur noch darum, das Systememoji "🗁" durch eine richtige Grafik zu ersetzen.

Aber auch da bin ich raus, zumal ich jetzt eine neue Baustelle habe.

Horstmann

Zitat von Mira_Belle

Zitat von Horstmann

...
Den Text zu verstecken bei diesen Vorgaben geht mit seinem Code if (menuCount == 0) {menuCount ='\xa0';}; und if (menuitemCount == 0) {menuitemCount ='\xa0';};, zugefügt zu meinem.
Dann müsste müsste er "nur" noch das Icon wegbekommen.

Oh, cool.
Wenn es das ' 🗁 ' aus seinem Code ist, sollte das auch so einfach gehen.
Ich weiß nur gerade nicht, an welcher Stelle es eingefügt werden muss.

Alles anzeigen

Nur der Vollständigkeit halber, ich denke ich hab es dann doch geschafft.

Mit etwas Code is dem Script vom Mitleser, und simplem CSS.

Eine reine JS Lösung ginge bestimmt auch, geht aber über meine Fähigkeiten hinaus; aber nicht mal der Fragesteller will noch antworten, also wird's wohl dabei bleiben.

In dem Beispiel ist es nur die Kurzversion mit 1 Icon (Ordnerzähler - Icon - Linkzähler), aber das Prinzip lässt sich auch relativ einfach für unsere Versionen umsetzen.

Die relevanten Zeilen hier sind 84-87, und 138 -140.

JavaScript

// JavaScript Document
// BookmarkCount_Modx.uc.js - modified for element separation
// Author BrokenHeart
// 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
// Modified by Mira_Belle / Horstmann / Forum members
// Single Icon Version / hide stuff if count 0



(function() {

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


    //Custom icon1 in profile/chrome/icons folder
    //Option to use Firefox icon

    let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
    let icon1 = "YourFolderIcon.png"                                  // your custom icon
    let icon2 = "chrome://global/skin/icons/folder.svg"        // folder icon by Firefox

    function setFunction() {

        const css =`

            /***  Fonts  ***/

           :root {
                --counter_fonts: "Droid Sans Mono", "SF Mono", "Andale Mono", Consolas, "Lucida Console", "Courier New", monospace;
                /*--counter_fontsize: 11px;*/    /* un-comment to change font size / weight */
                /*--counter_fontweight: 800;*/
            }

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

            /***  Counters  ***/

            /* Counter Folder */
            .countClass::before {
                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;*/                                                 /*  text1 color */
                margin-left: 16px !important;   /* minimum distance left narrow windows */
            }

            /* Icon  */
            .countClass label {
                content: "";
                background-image: url(${profilePath}/${icon1});             /* custom icon */
                /*background-image: url(${icon2});*/                      /* Firefox folder icon */
                background-repeat: no-repeat;
                background-size: 16px;                                        /* icon size 16px max */
                background-position: center;
                margin-left: 4px !important;                        /* distance counter1 ->  icon */
                margin-right: 4px !important;                       /* distance icon -> counter2 */
                height: 16px;
                width: 16px;
                /*fill: red;*/                                    /* .svg icon color / opacity if applicable */
                /*stroke: green;*/
                fill-opacity: 1;
            }

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


            /* Hide icon if menuCount 0 */
            .countClass[data-value1$="\xa0"] label {
                 opacity: 0;
            }

        `;

        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 label = item.childNodes[3];
              label.classList.add('countClass');

              // menuCount / menuitemCount 0 -> replace with space
              if (menuCount == 0) {menuCount ='\xa0';};
              if (menuitemCount == 0) {menuitemCount ='\xa0';};

              // First counter, 2 digits // Numbers aligned right // use padEnd for left
              let strCountOut1 = String(menuCount).padStart(2, '\xa0');            // 2 digits
              label.setAttribute('data-value1', strCountOut1);

              // Second counter, 2/3 digits // Numbers aligned right // use padEnd for left
              let strCountOut2 = String(menuitemCount).padStart(2, '\xa0');      // 2 digits
              //let strCountOut2 = String(menuitemCount).padStart(3, '\xa0');    // 3 digits
              label.setAttribute('data-value2', strCountOut2);


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

Alles anzeigen

Mitleser

Horstmann

Dankeschön! Auf die Idee das mit css zu lösen, wäre ich nie gekommen!

Habe ich mal für 'mein' Script angepasst. ~~Für > 1-stellige Ordneranzahl muss ich später noch nachbessern.~~ Habe nachgebessert für Anzahl Ordner, Anzahl Lesezeichen. Sind jetzt jeweils 2-stellig.

JavaScript

(function() {

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

    function setFunction() {

        const css =`
            .countClass::after {
                content: attr(data-value); 
                color: lightgray;
                padding-right: 3px;
            }
        `;
        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 label = item.childNodes[3]; //[1]Anzeige links
              label.classList.add('countClass');

              let menuTrenn = '\xa0\xa0\xa0';
              if (menuCount == 0) {menuTrenn = '\xa0\xa0';};
              if (menuCount == 0) {menuCount ='\xa0';};
              if (menuitemCount == 0) {menuitemCount ='\xa0';};

  let buttonIcon = "12SWfolder-10.svg";
  let IconPath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'css', 'image', 'lesezeichenicons_ohne'));
        const css =`
            .countClass::after {
                background-image: url("${IconPath}/${buttonIcon}") !important;
                fill: lightgray !important;
                background-repeat: no-repeat !important;
                background-size: 12px 12px !important;
                background-position: right 22px center !important;
            }
            .countClass[data-value^="\xa0"]::after {
                background-image: none !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 strCountOut = String(menuCount).padStart(2,'') + menuTrenn + String(menuitemCount).padStart(2,'\xa0');
              label.setAttribute('data-value', strCountOut);
            }, 100);
        }
    }
})();

Alles anzeigen

Horstmann

So, hier dann noch der Vollständigkeit halber meine aktuelle Version.

Die benutzt keinen zusätzlichen, evtl. unpassenden monospace Font, was mir optisch viel besser gefällt; der grosse Nachteil ist dass man eine feste Breite für die Zähler eingeben muss, damit alle Icons und Nummern sauber übereinander stehen (s. Screenshot).

Weil bei einem dynamischen Font zB die 11 schmaler ist als die 48, muss man dann halt in den Browserwerkzeugen die maximale Breite für die breitesten Zahlen auslesen, und entsprechend eintragen; oder einfach probieren bis es passt.

(Edit: in Zeile 189 ist eine Art Tool zum Ausrichten; --counter_width_1/2 von kleinem Wert an vergrössern, bis die Breite der Outlines genau übereinander passt.)

Eingebaut ist auch noch eine optionale und verschiebbare Trennlinie, die Zähler lassen sich rechts- oder linksbündig ausrichten, sowie die Option die Zähler mit keinen (0) Ordnern/Links komplett auszublenden oder sonstwie beliebig zu verändern, nur mit CSS.

Fand ich generell ganz pfiffig, die Idee von Mitleser .

Danke an alle Beteiligten, v.a. natürlich BrokenHeart für das originale Script und Mira_Belle für die vielen Anregungen und Modifikationen.

Wer Lust hat kann damit ja mal rumspielen.

JavaScript

// JavaScript Document
// BookmarkCount.uc.js - modified #8c / Using default font / optional divider / 0 count adjustable
// Author BrokenHeart
// Modified by Mira_Belle / Horstmann / Forum members
// 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 (location.href !== 'chrome://browser/content/browser.xhtml')
        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 =`

            /**  Basic Settings  **/

            :root {

                /*  Fixed width counters / vertical alignment with non-monospace fonts  */
                /*  Find pixel width in browser toolbox for widest number, e.g. 48, 989 , after setting font size, weight / or use "tool" in line 190  */
                /*  Conversion pixel -> em for flexible font size, optional  */

                /*  Has brackets, 2 digits / 27px?  */
                --counter_width_1: 2.1em;
                --counter_width_2: 2.1em;

                /*  No brackets, 2 digits */
                /*--counter_width_1: 1.3em;
                --counter_width_2: 1.3em;*/

                /**  Align text right/left  **/
                --align_text: flex-end;                  /*  Text/counters aligned right  */
                /*--align_text: flex-start;*/             /*  Text/counters aligned left  */

                /* Font Size / font weight / font color, disable to use default */
                /*--counter_fontsize: 22px;*/
                /*--counter_fontweight: 800;*/
                /*--counter_fontcolor1: red;*/
                /*--counter_fontcolor2: green;*/
   
                /* Use Custom Icons, comment out to disable */
                --icon_image_1: url("${ProfilePath}/${icon1}");
                --icon_image_2: url("${ProfilePath}/${icon2}");

                /* Use Firefox Icons, comment out to disable */
                /*--icon_image_1: url("chrome://global/skin/icons/folder.svg");*/
                /*--icon_image_2: url("chrome://browser/skin/bookmark-hollow.svg");*/
            }


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

            /*  Minimum distance to left for tight popup windows  */
            .countClass1 {
                margin-left: 16px !important;
            }

            /**  Basic Settings End  **/


            /****  #1 Folder counter  ****/

            /* Icon 1 */
            .countClass1::before {
                content: "";
                background-image: var(--icon_image_1);                           /* icon1 */
                background-repeat: no-repeat ;
                background-size: 14px;                                   /*  icon 1 size  */
                background-position: center;
                margin-right: 0px;             /*  distance  icon 1  -->  folder count 2px */
                height: 16px;
                width: 16px;
                /*fill: red;*/                  /* .svg icon color / opacity if applicable */
                /*fill-opacity: 1;*/
            }

           /* Label as divider / width 0 to hide / adjust margin-inline to center */ 

           .countClass1 label {
                height: 10px !important;
                width: 0px !important;
                background-color: rgba(20, 20, 20, 1.0) !important;
                order: 1;
                /*margin-inline: 5px 4px !important;*/  /* distance counter 1 -> divider -> #2 */
                margin-inline: 3px 3px !important;
            }

            /* Counter 1 */
            .countClass1::after {
                content: attr(data-value1); 
                min-width: var(--counter_width_1) !important;
                font-size: var(--counter_fontsize);                                                                            
                font-weight: var(--counter_fontweight) !important;
                color: var(--counter_fontcolor1);                      /*  Counter text color  */
                display: flex !important;
                justify-content: var(--align_text);
            }


            /****  #2 Items / links counter  ****/

            /* Icon 2 */
            .countClass2::before {
                content: "";
                background-image: var(--icon_image_2);                        /* icon2 */
                background-repeat: no-repeat;
                background-size: 14px;                                /*  icon 2 size  */
                background-position: center;
                margin-right:  0px;          /*  distance icon 2  -->  item count  2px  */
                height: 16px;
                width: 16px;
                fill: rgba(30, 30, 30, 1.0);  /* .svg icon color / opacity if applicable */
                /*fill-opacity: 1;*/
            }

            /* Counter 2 */
            .countClass2::after {
                content: attr(data-value2); 
                min-width: var(--counter_width_2) !important;
                margin-right: 4px !important;              /*  distance item count  -->  arrow  */
                font-size: var(--counter_fontsize);
                font-weight: var(--counter_fontweight) !important;
                color: var(--counter_fontcolor2);                       /*  Counter text color  */
                display: flex !important;
                justify-content: var(--align_text);
            }

            /* Move arrow to the right */
            .countClass2 image {
                order: 1;
                margin-right: 0px !important;             /*  distance arrow  -->  popup border  */
            }

          /* Move Arrow closer to popup border, optional */
           menu.menu-iconic.bookmark-item {
               padding-right: 2px !important;
            }


           /*** Extra stuff  ***/


           /** Adjust/hide if count = 0 / CSS only / optional **/

           /* #1 icon folder counter if menuCount = 0 */
           .countClass1[data-value1="[0]"], .countClass1[data-value1="0"] {
                 opacity: 0;
            }

            /* #2 icon link counter if menuitemCount = 0 */
           .countClass2[data-value2="[0]"]::after, .countClass2[data-value2="[0]"]::before,
           .countClass2[data-value2="0"]::after, .countClass2[data-value2="0"]::before {
                 /*color: rgba(87, 80, 68, 0.7) !important;
                 fill: rgba(87, 80, 68, 0.7) !important;*/
                 opacity: 0.5;
            }


           /** Override custom menu css if needed, optional **/

            /* Disable default left margin / override other custom menu css #1 */ 
            /*.countClass1 label {
                margin-inline: 0px !important;
            }*/

           /* Work fix / override other custom menu css #2 */
           /*.menu-right.countClass2 {
                margin-inline: 0px !important;
           }*/



            /*  Outlines for testing alignment / all counter outlines must have same width */ 
            /*.countClass1::after, .countClass2::after {
                 outline: 1px solid red !important;
                 outline-offset: 7px !important;
            }*/

            /*  Outline only for testing  */ 
            /*menu.menu-iconic.bookmark-item {
                 outline: 1px solid orange !important;
                 outline-offset: -8px !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 = "[" + menuCount + "]";           //  Has brackets
              //let strCountOut1 = menuCount;                      //  No brackets
              label1.setAttribute('data-value1', strCountOut1);

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


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

Alles anzeigen

Edit #2: Oder vielleicht sowas?

Jetzt aber raus hier, genug Selbstgespräche.

JavaScript

// JavaScript Document
// BookmarkCount.uc.js - modified #9 / Using default font / optional divider / 0 count adjustable
// Author BrokenHeart
// Modified by Mira_Belle / Horstmann / Forum members / Horstmann edition
// 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 (location.href !== 'chrome://browser/content/browser.xhtml')
        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 =`

    /**  Basic User Settings  **/

    :root {

    /*  Fixed width counters / vertical alignment with default non-monospace fonts  */
    /*  Find pixel width in browser toolbox for widest number, e.g. 48, 989 , after setting font size, weight  */
    /*  Or use tool below / Do conversion pixel -> em for more flexible font size, optional  */

                /*  Has brackets, 2 digits / 27.5px?  */
                --counter_width_1: 2.1em;
                --counter_width_2: 2.1em;

                /**  Align text right/left  **/
                --align_text: flex-end;                  /*  Text/counters aligned right  */
                /*--align_text: flex-start;*/             /*  Text/counters aligned left  */

                /* Font Size / font weight / font color, comment out to use default */
                /*--counter_fontsize: 22px;*/
                /*--counter_fontweight: 800;*/
                /*--counter_fontcolor1: red;*/
                /*--counter_fontcolor2: green;*/
   
                /* Use Custom Icons, comment out to disable */
                --icon_image_1: url("${ProfilePath}/${icon1}");
                --icon_image_2: url("${ProfilePath}/${icon2}");

                /* Use Firefox Icons, comment out to disable */
                /*--icon_image_1: url("chrome://global/skin/icons/folder.svg");*/
                /*--icon_image_2: url("chrome://browser/skin/bookmark-hollow.svg");*/
            }


    /***  Tool for testing alignment / comment out when done  ***/

    /* Set font size, weight if used / create test folders  with 0, 11, 88, or 999 content */
    /* Adjust --counter_width_1+2 above, until all counter outlines have same width */  
            /*.countClass1::after, .countClass2::after {
                 outline: 1px solid red !important;
                 outline-offset: 7px !important;
            }*/

   /**  Basic User Settings End  **/


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

            /*  Minimum distance all to left, for narrow popup windows  */
            .countClass1 {
                margin-left: 16px !important;
            }


            /****  #1 Folder counter  ****/

            /* Icon 1 */
            .countClass1::before {
                content: "";
                background-image: var(--icon_image_1);                           /* icon1 */
                background-repeat: no-repeat ;
                background-size: 14px;                                     /*  icon 1 size  */
                background-position: center;
                margin-right: 0px;                      /* distance  icon 1 <-> folder count */
                height: 16px;
                width: 16px;
                /*fill: red;*/                            /* .svg icon color / opacity if applicable */
                /*fill-opacity: 1;*/
            }

            /* Counter 1 */
            .countClass1::after {
                content: attr(data-value1); 
                min-width: var(--counter_width_1) !important;
                font-size: var(--counter_fontsize);                                                                            
                font-weight: var(--counter_fontweight) !important;
                color: var(--counter_fontcolor1);             /*  Counter 1 text color  */
                display: flex !important;
                justify-content: var(--align_text);
            }

          /* Move Label to right / use as optional divider / width 0 to hide / adjust margin-inline to center */ 
          .countClass1 label {
                height: 10px !important;
                width: 0px !important;
                background-color: rgba(20, 20, 20, 1.0) !important;
                order: 1;
                /*margin-inline: 5px 4px !important;*/  /* distance counter 1 -> divider -> #2 */
                margin-inline: 3px 3px !important;
            }


            /****  #2 Items / links counter  ****/

            /* Icon 2 */
            .countClass2::before {
                content: "";
                background-image: var(--icon_image_2);                        /* icon2 */
                background-repeat: no-repeat;
                background-size: 14px;                                /*  icon 2 size  */
                background-position: center;
                margin-right:  0px;                 /*  distance icon 2  <->  item count  */
                height: 16px;
                width: 16px;
                fill: rgba(30, 30, 30, 1.0);  /* .svg icon color / opacity if applicable */
                /*fill-opacity: 1;*/
            }

            /* Counter 2 */
            .countClass2::after {
                content: attr(data-value2); 
                min-width: var(--counter_width_2) !important;
                font-size: var(--counter_fontsize);
                font-weight: var(--counter_fontweight) !important;
                color: var(--counter_fontcolor2);                 /*  Counter 2 text color  */
                display: flex !important;
                justify-content: var(--align_text);
            }

            /* Move arrow to the right */
            .countClass2 image {
                order: 1;
                margin-inline: 4px 0px !important;  /* distance item count -> arrow  ->  popup border */
            }

          /* Move Arrow closer to popup border, optional */
           menu.menu-iconic.bookmark-item {
               padding-right: 2px !important;
            }


           /*** Extra stuff  ***/

          /** Adjust/hide if count = 0 / CSS only / optional / for no, square & round brackets **/

           /* #1 icon folder counter if menuCount = 0 */
           .countClass1[data-value1="[0]"], 
           .countClass1[data-value1="(0)"], 
           .countClass1[data-value1="0"] {
                 opacity: 0;
            }

            /* #2 icon link counter if menuitemCount = 0 */
           .countClass2[data-value2="[0]"]::after, .countClass2[data-value2="[0]"]::before,
           .countClass2[data-value2="(0)"]::after, .countClass2[data-value2="(0)"]::before,
           .countClass2[data-value2="0"]::after, .countClass2[data-value2="0"]::before {
                 /*color: rgba(87, 80, 68, 0.7) !important;
                 fill: rgba(87, 80, 68, 0.7) !important;*/
                 opacity: 0.5;
            }

            /* Arrow */
            :is(.countClass1[data-value1="[0]"] + .countClass2[data-value2="[0]"], 
                .countClass1[data-value1="0"] + .countClass2[data-value2="0"], 
                .countClass1[data-value1="(0)"] + .countClass2[data-value2="(0)"]) image {
                /*opacity: 0;*/
                fill: rgba(255, 150, 68, 1.0) !important;
            }

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

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



           /** Override other custom menu css if needed, optional **/

           /* Work fix / override other custom menu css #2 */
           /*.menu-right.countClass2 {
                margin-inline: 0px !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 = "[" + menuCount + "]";   //  Has square brackets
              //let strCountOut1 = "(" + menuCount + ")";       //  Has round brackets
              //let strCountOut1 = menuCount;                                //  No brackets
              label1.setAttribute('data-value1', strCountOut1);

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


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

Alles anzeigen

grisu2099

Es hat in den letzten Tagen Änderungen in der Nightly gegeben...

Im Nightly vom Montag (14.04.25) funktioniert das Skript noch einwandfrei - seit der gestrigen Version liefert es keine bzw. falsche Anzeigen. Die Anzahl der Lesezeichen wird überhaupt nicht mehr angezeigt, Die Anzahl der Ordner erscheint jetzt ober-/unterhalb des Untermenüs -> siehe Screenshots.

Kann da irgend jemand vielleicht wieder Ordnung reinbringen? Ich verwende folgende Version des Skriptes:

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 =`
            .menu-accel.countClass1::before {
                content: attr(data-value1) !important;
                font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
                font-size: 12px !important;
                color: lightgreen !important;
                width: 15px !important;
                padding: 0 !important;
				margin: 2px 4px 0 20px !important;
            }
        
            .menu-accel.countClass1::after {
                content: "/";
                background-image: url(${profilePath}/${icon1}); 
                background-repeat: no-repeat;
                background-size: 16px;
				color: lightgreen !important; 
				text-align: right !important;
                margin-left: 0 !important;
                margin-right: 4px !important;
				margin-bottom: 2px !important;
                height: 16px;
                width: 26px;
            }
            .menu-accel.countClass1 label {
                margin-inline: 0px !important;
            }

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

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

            .menu-accel.countClass2 image {
                order: 1;                       Pfeil hinter dem "Wert" der Links
                padding-left: 4px !important;
            }
			
			/* Icon nicht anzeigen, wenn Wert "0" ist */
            .menu-accel.countClass1[data-value1$="0"]::after,
            .menu-accel.countClass1[data-value1$="0"]::before,
            .menu-accel.countClass2[data-value2$="\xa0"]::after,
            .menu-accel.countClass2[data-value2$="\xa0"]::before {
				display: none !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('menu-accel.countClass1');
              let strCountOut1 = String(menuCount).padStart(2, '\xa0');
              label1.setAttribute('data-value1', strCountOut1);

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

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

Alles anzeigen

Ich habe auch bereits andere Versionen hier aus dem Thread getestet, gleiches Ergebnis.

So sah es bis Montag aus:

So in der aktuellen Nightly:

milupo

Hättest du die Screenshots nicht kleiner machen können? Wo sind denn die zu sehen?

grisu2099

Zitat von milupo

Wo sind denn die zu sehen?

Im Lesezeichen-Menü

Zitat von milupo

Hättest du die Screenshots nicht kleiner machen können?

Doch - dann hätte man aber nichts mehr erkannt...

lenny2

Nur Lesezeichen sind nummeriert, Ordner sind nicht nummeriert

grisu2099

Die Numerierung der Lesezeichen hat doch mit diesem Thema überhaupt nichts zu tun - die wird durch einfaches CSS erzeugt...

BrokenHeart

Ersetze Zeile 138 durch let label1 = item.childNodes[1];

Dann sollten die Werte wieder angezeigt werden. Allerdings hier (bei dem Skript, welches ich nutze) linksbündig, was man durch CSS wieder anpassen müsste.

grisu2099

Poste mal bitte deine Version.

Wenn ich die Änderung in meiner Version vornehme, kommt das heraus:

Heißt: Die Anzahl der Ordner wird statt des Labels angezeigt, die Anzahl der Lesezeichen fehlt weiterhin...

BrokenHeart

Zitat von grisu2099

Poste mal bitte deine Version.

JavaScript

(function() {

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

    function setFunction() {

        const css =`
            .countClass::after {
                content: attr(data-value) !important; 
				font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
				font-size: 11px !important;
				font-weight: 900 !important;
                color: rgb(100,200,255) !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 label = item.childNodes[1]; //label.menu-iconic-text
  
              label.classList.add('countClass');
			  //let strCountOut = "📁" + String(menuCount).padEnd(2, '\xa0') + "⭐" + String(menuitemCount).padEnd(3, '\xa0'); //"\xa0"
			  let strCountOut = String(menuCount).padStart(2, '\xa0') + "📁" + "\xa0" + String(menuitemCount).padStart(3, '\xa0') + "⭐"; //"\xa0"
			  label.setAttribute('data-value', strCountOut);
			  

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

Alles anzeigen

2002Andreas

Ich nutze das Skript zwar nicht, aber so sieht das von BrokenHeart hier aus:

milupo

Zitat von 2002Andreas

aber so sieht das von BrokenHeart hier aus:

Auch bei mir.

grisu2099

Zitat von 2002Andreas

so sieht das von BrokenHeart hier aus:

Hier auch...

Muß ich mal testen, ob ich per CSS noch wieder näher an das frühere Aussehen komme - rechts in der Zeile (mit mehr Abstand zum Label) finde ich das doch besser...

Auch scheint mir die Version von BrokenHeart etwas träge zu sein - erst beim zweiten Öffnen des Lesezeichen-Menüs werden alle Zahlen angezeigt.

Trotzdem natürlich Danke für diese Version. Weitere Ideen sind auch willkommen...

Dharkness

Zitat von grisu2099

Muß ich mal testen, ob ich per CSS noch wieder näher an das frühere Aussehen komme - rechts in der Zeile (mit mehr Abstand zum Label) finde ich das doch besser...

Ja, wenn das ganze nach rechts ausgerichtet wäre.

milupo

Mir ist das ehrlich gesagt zu unübersichtlich. Es wimmelt von Symbolen und dann auch noch immer die gleichen. Ich verwende ein anderes Skript, das mir in einer gesonderten Zeile oben im Untermenü die Anzahl der Ordner, die Anzahl der Links (Lesezeichen) und die Möglichkeit angibt, die Links in Tabs zu öffnen.

JavaScript

(function() {

  if (!window.gBrowser)
    return;

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

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

      let label = menuCount;
		if (menuCount == 1) {
			 label += " Ordner";
		 }
        else if (menuCount == 2) {
          label += " Ordner";
        }
		else if (menuCount == 3 || menuCount == 4) {
		  label += " Ordner";
		}
	     else if (menuCount == 0 || menuCount > 4 || menuCount <= 100) {
		  label += " Ordner";
		 }	
        label += " / " + menuitemCount
        if (menuitemCount == 1) {
          label += " Link. -> Link in Tab öffnen."
        } else if (menuitemCount == 2) {
          label += " Links. -> Links in Tabs öffnen."
        } else if (menuitemCount == 3 || menuitemCount == 4) {
          label += " Links. -> Links in Tabs öffnen."
        } else if (menuitemCount == 0 || menuitemCount > 4 || menuitemCount <= 100) {
		   label += " Links. -> Links in Tabs öffnen."
	    }

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

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

Alles anzeigen

Das Skript ist für Sorbisch angepasst, deswegen sind da die Zeilen 61 bis 83 mehr Zeilen, als sie für Deutsch notwendig wären. Es geht hier um die Pluralformen. Deutsch hat ja nur Singular und Plural. Sorbisch hat Singular, Dual und zwei Pluralformen. Aber ich wollte es nur mal vorstellen, falls es jemand nicht kennt.

Horstmann

Zitat von grisu2099

Zitat von 2002Andreas

so sieht das von BrokenHeart hier aus:

Muß ich mal testen, ob ich per CSS noch wieder näher an das frühere Aussehen komme - rechts in der Zeile (mit mehr Abstand zum Label) finde ich das doch besser...

Ich benutze selber einen ganz anderen Ansatz , aber probier vielleicht das mal in der userChrome.css, zusätzlich zu der Script Version von BrokenHeart aus #334; nur ganz grob! getestet:

CSS

.countClass { 
    justify-content: space-between !important;  
}