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