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

Mira_Belle

Zitat von Horstmann

Wobei du in deinem Code immer noch Strings (?) benutzt für die beiden Counter, in der Richtung werd ich wohl nicht basteln.

Ich habe es einfach anders nicht hinbekommen!

Horstmann

Zitat von Mira_Belle

Zitat von Horstmann

Wobei du in deinem Code immer noch Strings (?) benutzt für die beiden Counter, in der Richtung werd ich wohl nicht basteln.

Ich habe es einfach anders nicht hinbekommen!

Hmm; schwer zu sagen ohne den nicht funktionierenden Code zu sehen.
Das String Dingens (Fachbegriff) hatte ich geändert, weil es mit Fonts etc. ein Problem gab; was genau hab ich vergessen, steht aber irgendwo in diesem Thread.

Der untere Teil nach /** Adjust/hide if count = 0 **/ im CSS ist nur zum Spielen, ich benutze das eigentlich um Alles mit Counter = 0 auszublenden oder hervorzuheben, einfach löschen wenn du keine Verwendung dafür hast.

Und - das ist ein Test, kein fertiger Code!
Das neue Element sollte besser anders eingebunden werden, statt als child von einem anderen nicht klar definierten/plazierten child vom bookmark item - denkt sich dieser Ahnungslose - aber da müssten Experten bei.

JavaScript

//bmcount testa neu D TEST! für Mira
// basiert auf Sript von BrokenHeart
//https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1269879#post1269879

(function() {

    if (!window.gBrowser)
        return;

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


    //Custom icons in profile/chrome/icons folder
    let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
    let icon1 = "Test_3.svg"    //  Custom  Folder Icon
    let icon2 = "bookmark-hollow.svg"          //  Custom  Link Icon
    //let icon1 = "YourFolderIcon.png"    //  Custom  Folder Icon
    //let icon2 = "YourLinkIcon.svg"          //  Custom  Link Icon

    let cs_font_size = 14
    let cs_font_weight = 900
    let cs_font_color = "#FFD700"
    let cs_icon_color = "#C0C0C0"

    function setFunction() {

        const css =`

        #bmContent {
                     display: flex !important;
                     margin-inline: auto 0 !important;
                     font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
        		     font-size: ${cs_font_size}px !important;
        		     font-weight: ${cs_font_weight} !important;
                }

                #bmContent::before {
                     content: url("${ProfilePath}/${icon1}") " "
                              attr(data-value1);
                     fill: ${cs_icon_color};
                     color: ${cs_font_color};
                     align-items: center;
                     display: flex;
                     justify-content: space-between;
                     width: calc(12px + 2.1em); /* Feste Breite rechter Counter für 2 Ziffern ->  Icons auf gleicher Höhe */
                     margin-inline: 16px 8px;   /* Abstand links für enge Popups, rechts zum 2ten Counter */
        			      }

                #bmContent::after {
                     content: url("${ProfilePath}/${icon2}") " "
                              attr(data-value2);
                     fill: ${cs_icon_color};
                     width: calc(12px + 2.1em); /* Feste Breite rechter Counter für 2 Ziffern ->  Icons auf gleicher Höhe */
                     color: ${cs_font_color};
                     align-items: center;
                     display: flex;
                     justify-content: space-between;
        			       }

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

 /* #1 icon counter if Count = 0 */
 #bmContent[data-value1="0"]::before {
  opacity: 0.3;
  color: red !important;
  fill: red !important;
  }

 #bmContent[data-value2="0"]::after {
  opacity: 0.5;
  fill: cyan !important;
  color: cyan !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 bmCounta = item.childNodes[1];
              bmCounta.innerHTML = ""
              let bmContent = document.createElement("bmContent");
              bmContent.id = "bmContent";
              bmCounta.appendChild(bmContent);

        let strCountOut1 = menuCount;
        bmContent.setAttribute('data-value1', strCountOut1);

        let strCountOut2 = menuitemCount;
        bmContent.setAttribute('data-value2', strCountOut2);

            }, 100);
        }
    }

})();

Alles anzeigen

Mira_Belle

Zitat von Horstmann

Und - das ist ein Test, kein fertiger Code!

Aber eine nette Sache!

Apropos String Dingens, habe gerade eben geschaut, was Du da meinen könntest.
Denn ich ging wohl von was anderem aus!
Und was soll ich sagen? Ich verstehe nur Bahnhof und weiß somit gar nicht, was genau Du meinst!
Kannst Du die Zeilen im Code benennen, um die es geht?
Eventuell raff ich es dann ja, vielleicht, möglicherweise.

Horstmann

Zitat von Mira_Belle

Apropos String Dingens, habe gerade eben geschaut, was Du da meinen könntest.
Denn ich ging wohl von was anderem aus!
Und was soll ich sagen? Ich verstehe nur Bahnhof und weiß somit gar nicht, was genau Du meinst!
Kannst Du die Zeilen im Code benennen, um die es geht?

Ich meinte Zeilen 128 und 131, zB let strCountOut1 = menuCount; .

Mira_Belle

Zitat von Horstmann

Ich meinte Zeilen 128 und 131, zB let strCountOut1 = menuCount; .

Ah, dann lag ich doch richtig mit meiner Vermutung!

Verschiedene Möglichkeiten! Ich habe DIE aber noch nicht alle im "neuen" Skript durch probiert.

JavaScript

              let strCountOut1 = + menuCount + '\xa0';
//              let strCountOut1 = String(menuCount).padStart(2, '\xa0');    // rechtsbündig
//              let strCountOut1 = String(menuCount).padEnd(2) + '\xa0';     // padEnd2 => zwei Stellen, plus Abstand              
//              let strCountOut1 = String(menuCount).padStart(2, '\xa0'); 
              bmContent.setAttribute('data-value1', strCountOut1);

              let label2 = item.childNodes[4];  
              label2.classList.add('countClass2');

              let strCountOut2 = + menuitemCount + '\xa0';
//              let strCountOut2 = String(menuitemCount).padStart(3, '\xa0');    // rechtsbündig
//              let strCountOut2 = String(menuitemCount).padEnd(3, '\xa0');      // padEnd3 => drei Stellen, Abstand bei nur einer Ziffer
//              let strCountOut2 = String(menuitemCount).padStart(3, '\xa0');
              bmContent.setAttribute('data-value2', strCountOut2);

Alles anzeigen

Horstmann

So, damit arbeite ich im Moment.

Das ist nur auf meine Bedürfnisse zugeschnitten; wie gesagt gibt es da Vieles was man sich selber anpassen kann; justierbare Variablen habe ich diesmal kaum benutzt, das scheint nicht oft gefragt zu sein.

Vielen Dank nochmal an alle Mitwirkenden, und besonders an BrokenHeart für den Code auf dem alles hier aufgebaut ist.

Kritik und Vorschläge wie immer willkommen; Icons im Anhang, oder eben Eigene benutzen.

Die Einbindung vom neuen Element #bmContent als Sibling Element ist etwas grob, (Zeile 130+), und ich habe nur einen ebenfalls groben CSS Hack gefunden (Zeile 28+ ) um das Ding nicht dauernd neu und zusätzlich aufgebaut zu bekommen; das geht sicher besser; wollte das aber an der Stelle haben.

JavaScript

//bmcount testa neu F2 Sibling TEST!
// basiert auf Script von BrokenHeart
//https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1269879#post1269879

(function() {

    if (!window.gBrowser)
        return;

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

    //Custom icons in profile/chrome/icons folder
    let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
    let icon1 = "YourFolderIcon.png"    //  Custom  Folder Icon
    let icon2 = "YourLinkIcon.svg"          //  Custom  Link Icon

    function setFunction() {

        const css =`

     #bmContent {
          display: flex !important;
          margin-inline: auto 0 !important;
     }

     /* Poor fix to avoid multiple counters */
     #bmContent ~ #bmContent {
          display: none !important;
     }

     #bmContent::before {
          content: url("${ProfilePath}/${icon1}")
                   /*url("chrome://global/skin/icons/folder.svg")*/
                   attr(data-value1);
          width: calc(18px + 2.1em); /* Feste Breite rechter Counter für 2 Ziffern -> Icons auf gleicher Höhe */
          justify-content: space-between;
          align-items: center;
          display: flex;
          margin-inline: 16px 8px;   /* Abstand links für enge Popups, rechts zum 2ten Counter */
          /*outline: 1px solid orange;*/
          }

     #bmContent::after {
          content: url("${ProfilePath}/${icon2}")
                   /*url("chrome://browser/skin/bookmark-hollow.svg")*/
                   attr(data-value2);
          width: calc(18px + 2.1em); /* Feste Breite rechter Counter für 2 Ziffern -> Icons auf gleicher Höhe */
          align-items: center;
          display: flex;
          justify-content: space-between;
          /*outline: 1px solid lightblue;*/
          }

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

      /* Hide #1 icon counter if Count = 0 */
      #bmContent[data-value1="[0]"]::before {
         opacity: 0;
       }

     /* Dim #2 icon counter if Count = 0 */
      #bmContent[data-value2="[0]"]::after {
         opacity: 0.5;
       }

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

      /* Arrow before empty Popup */
      #bmContent:is([data-value1="[0]"][data-value2="[0]"]) ~ .menu-right image {
        fill: rgba(255, 150, 68, 1.0) !important;
        }

		`;

        const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
        const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
        sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

        let bmbMenu = document.getElementById('bookmarks-menu-button');
        let bookMenu = document.getElementById('bookmarksMenu');
        let persToolBar = document.getElementById('PersonalToolbar');

        if(bmbMenu)
            bmbMenu.addEventListener('popupshowing', onPopupShowing );
        if(bookMenu)
            bookMenu.addEventListener('popupshowing', onPopupShowing );
        if(persToolBar)
            persToolBar.addEventListener('popupshowing', onPopupShowing );
    }

    function onPopupShowing(aEvent) {

        let popup = aEvent.originalTarget;

        for (let item of popup.children) {
            if (item.localName != 'menu' || item.id?.startsWith('history'))
                continue;
            setTimeout(() => {
              let itemPopup = item.menupopup;
			  itemPopup.hidden = true;
			  itemPopup.collapsed = true;
              itemPopup.openPopup();
              itemPopup.hidePopup();
              let menuitemCount = 0;
              let menuCount = 0;
              for (let subitem of itemPopup.children) {
                if (subitem.classList.contains('bookmark-item') && !subitem.disabled && !subitem.hidden) {
                  if (subitem.localName == 'menuitem') {
                    menuitemCount++;
                  } else if (subitem.localName == 'menu') {
                    menuCount++;
                  }
                }
              }
			  itemPopup.hidden = false;
			  itemPopup.collapsed = false;

              //test alt gut, aber Element -> Child
              //let bmCounta = item.childNodes[1];
              //bmCounta.innerHTML = ""
              //let bmContent = document.createElement("bmContent");
              //bmContent.id = "bmContent";
              //bmCounta.appendChild(bmContent);

              //test2 geht, Element -> Sibling, aber multiple Anzeigen bei Neuöffnung
              let bmCounta = item.childNodes[1];
              let bmContent = document.createElement("bmContent");
              bmContent.id = "bmContent";
              bmCounta.insertAdjacentElement("afterend", bmContent);

        let strCountOut1 = "[" + menuCount + "]";   //  Has square brackets
        bmContent.setAttribute('data-value1', strCountOut1);

        let strCountOut2 = "[" + menuitemCount + "]"; //  Has square brackets
        bmContent.setAttribute('data-value2', strCountOut2);

            }, 100);
        }
    }

})();

Alles anzeigen

icons.zip

Mira_Belle

Horstmann Wow , css ist schon was Feines, wenn man es versteht!

Ich muss mir das durch ausprobieren immer erst "ertasten", ok, nicht alles, aber vieles.

Werde "Dein" Skript mal ausprobieren und zerpflücken.
Danke schön.

Nachtrag.

Jetzt habe ich mir nur den Code und das Bild angeschaut und stelle fest, ich verstehe mehr als ich dachte.
Werde dieses Skript meinen Bedürfnissen mal anpassen und schauen was geht.
Wird aber ein paar Tage dauern, ist ja Ostern und da ist für so etwas keine Zeit.

Horstmann

Zitat von Mira_Belle

css ist schon was Feines, wenn man es versteht!

Das Script ist aber ein bisschen Pfusch, vielleicht schaut sich das einer unserer JS Experten ja mal an.

Und das CSS in Zeile 73 ist auch nicht gut, da muss ich wohl nochmal bei; das war der einzige Grund warum das neue Element über die etwas verkorkste Test2 Methode (Zeile 130) reingewürgt wurde; hab halt doch zu wenig Ahnung...

Mira_Belle

Naja, Du hast da so einige Funktionen eingebaut,
die ich z.B. gar nicht bräuchte.
Somit würde der css-Teil um einiges kompakter werden.

Aber ich finde Deine Ideen schon irgendwie nice.

Was das JS angeht, wir machen da mal langsam. Das wird schon.

Mira_Belle

So, hier eine meiner Versionen, natürlich zusammen geklaut und geschustert.

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 **** */
/* Adjustments for 139 and customized by Mira inspired by Horstmann     ********************************************** */
/* Source                           => https://www.camp-firefox.de/forum/thema/136572/?postID=1270038#post1270038 **** */
/* ******************************************************************************************************************* */
/* Version 1.01                     => https://www.camp-firefox.de/forum/thema/136572/?postID=1230128#post1230128 **** */
/* Version 1.02                     => https://www.camp-firefox.de/forum/thema/136572/?postID=1230334#post1230334 **** */
/* Version 1.03                     => https://www.camp-firefox.de/forum/thema/136572/?postID=1270113#post1270113 **** */
/* ******************************************************************************************************************* */
/* Custom Counter in the Bookmarks for folders and links ************************************************************* */
/* ******************************************************************************************************************* */

(function() {

    if (!window.gBrowser)
        return;

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


    //Custom icons in profile/chrome/icons folder
    let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
    let icon1 = "Test_3.svg"                    //  Custom  Folder Icon
    let icon2 = "bookmark-hollow.svg"           //  Custom  Link Icon

    let cs_font_size = 12
    let cs_font_weight = 900
    let cs_font_color = "#FFD700"
    let cs_icon_color = "#C0C0C0"

    function setFunction() {

        const css =`

            #bmContent {
                display: flex !important;
                margin-inline: auto 0 !important;
                padding-left: 10px;                         / Abstand zwischen Label und Icon */
                font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
                font-size: ${cs_font_size}px !important;
                font-weight: ${cs_font_weight} !important;
            }

            #bmContent::before {
                content: url("${ProfilePath}/${icon1}")         /*  Custom icon  */
                        attr(data-value1);
                width: calc(8px + 2.1em);                       /* Feste Breite rechter Counter für 2 Ziffern -> Icons auf gleicher Höhe */
                justify-content: space-between;
                align-items: center;
                display: flex;
            /*    margin-inline: 5px;      */                       /* Abstand links für enge Popups, rechts zum 2ten Counter */
                margin-right: 5px;                              /* Abstand 1. Zahl bis Icon */
                
                fill: ${cs_icon_color};                         /* Farbe des Icons */
                color: ${cs_font_color};                        /* Farbe der 1. Zahl */
            }

            #bmContent::after {
                content: url("${ProfilePath}/${icon2}")         /*  Custom icon  */
                        attr(data-value2);
                width: calc(8px + 2.1em);                       /* Feste Breite rechter Counter für 2 Ziffern -> Icons auf gleicher Höhe */
                align-items: center;
                display: flex;
                margin-inline: -4px;                            /* Abstand 2. Zahl bis Pfeil */
                justify-content: space-between;
                fill: ${cs_icon_color};                         /* Farbe des Icons */
                color: ${cs_font_color};                        /* Farbe der 2. Zahl */
            }
		`;

        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 bmCounta = item.childNodes[1];
              bmCounta.innerHTML = " "
              let bmContent = document.createElement("bmContent");
              bmContent.id = "bmContent";
              bmCounta.appendChild(bmContent);

                //    let strCountOut1 = "[" + menuCount + "]";   //  Has square brackets
                //    let strCountOut1 = + menuCount + "";   //  Has no brackets
                    let strCountOut1 = String(menuCount).padEnd(2, " ");
                    bmContent.setAttribute('data-value1', strCountOut1);

                //    let strCountOut2 = "[" + menuitemCount + "]"; //  Has square brackets
                //    let strCountOut2 = + menuitemCount + ""; //  Has no brackets
                    let strCountOut2 = String(menuitemCount).padEnd(2, "");
                    bmContent.setAttribute('data-value2', strCountOut2);

            }, 50);
        }
    }

})();

Alles anzeigen

Horstmann

Zitat von Mira_Belle

Naja, Du hast da so einige Funktionen eingebaut,
die ich z.B. gar nicht bräuchte.
Somit würde der css-Teil um einiges kompakter werden.

Wenn dir das CSS aufwendig vorkommt, dann hast du die früheren Versionen nicht mehr in Erinnerung.

Ich habe jetzt mal das Ganze überarbeitet; das JS geht wieder zurück zu dem was du auch benutzt für das neue Element, für den Pfeil habe ich eine Lösung gefunden, und es sind Varianten für Zahlen mit oder ohne Klammern eingebaut.

Ich würde dir ja gerne entgegenkommen was die String Geschichte angeht, aber das hat auch Einfluss auf das Layout/CSS, daher würde das dann zu verwirrend werden.
Ich hätte auch noch eine CSS Test-Variante mit den Icons separat zu den Zahlen als background-image , falls du damit spielen willst.

Also hier dann was zum Testen für alle Interessierten; Icons wie üblich im chrome/icons Ordner abzulegen, oder halt selber anpassen.

JavaScript

//bmcount testa neu G sauber Sibling TEST no multi Pfeil targeted brackets TEST
// basiert auf Script von BrokenHeart
//https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1269879#post1269879

(function() {

    if (!window.gBrowser)
        return;

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

    //Custom icons in profile/chrome/icons folder
    let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
    let icon1 = "YourFolderIcon.png"        //  Custom  Folder Icon
    let icon2 = "YourLinkIcon.svg"          //  Custom  Link Icon

    function setFunction() {

        const css =`

    /* Counter rechtsbuendig */
     #bmContent {
          display: flex !important;
          margin-inline: auto 0 !important;
     }

     /* Feste Breite der Counter abhaengig von Anzahl/Grösse Ziffern -> Icons untereinander auf gleicher Hoehe */
     /* --bm_width = Icon Grösse 16px Standard + Fontbreite + Abstand Icon zu Zahl */

     #bmContent {
          --bm_width_one: calc(var(--bm_icon_size) + 2.1em + 2px);
          --bm_width_two: calc(var(--bm_icon_size) + 2.1em + 2px);
          --bm_icon_size: 16px;
          }

     /* Counter #1 Folder */
     #bmContent::before {
          content: url("${ProfilePath}/${icon1}")
                   /*url("chrome://global/skin/icons/folder.svg")*/
                   attr(data-value1);
          width: var(--bm_width_one);
          justify-content: space-between;
          align-items: center;
          display: flex;
          margin-inline: 16px 8px;   /* min. Abstand links für enge Popups, rechts zum 2ten Counter */
          }

     /* Counter #2 Links */
     #bmContent::after {
          content: url("${ProfilePath}/${icon2}")
                   /*url("chrome://browser/skin/bookmark-hollow.svg")*/
                   attr(data-value2);
          width: var(--bm_width_two);
          align-items: center;
          display: flex;
          justify-content: space-between;
          }


     /** Adjust/hide if count = 0 , hier mit square brackets **/

      /* Hide/Dim #1 icon counter if Count = 0 */
      #bmContent[data-value1="[0]"]::before,
      #bmContent[data-value1="0"]::before,
      #bmContent[data-value1="(0)"]::before {
         opacity: 0.2;
       }

     /* Dim #2 icon counter if Count = 0 */
      #bmContent[data-value2="[0]"]::after,
      #bmContent[data-value2="0"]::after,
      #bmContent[data-value2="(0)"]::after {
         opacity: 0.5;
       }

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

      /* Arrow before empty Popup */
      .pfeil[data-value3="[0][0]"] ~ .menu-right image,
      .pfeil[data-value3="00"] ~ .menu-right image,
      .pfeil[data-value3="(0)(0)"] ~ .menu-right image {
          fill: rgba(255, 150, 68, 1.0) !important;
          }

		`;

        const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
        const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
        sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

        let bmbMenu = document.getElementById('bookmarks-menu-button');
        let bookMenu = document.getElementById('bookmarksMenu');
        let persToolBar = document.getElementById('PersonalToolbar');

        if(bmbMenu)
            bmbMenu.addEventListener('popupshowing', onPopupShowing );
        if(bookMenu)
            bookMenu.addEventListener('popupshowing', onPopupShowing );
        if(persToolBar)
            persToolBar.addEventListener('popupshowing', onPopupShowing );
    }

    function onPopupShowing(aEvent) {

        let popup = aEvent.originalTarget;

        for (let item of popup.children) {
            if (item.localName != 'menu' || item.id?.startsWith('history'))
                continue;
            setTimeout(() => {
              let itemPopup = item.menupopup;
			  itemPopup.hidden = true;
			  itemPopup.collapsed = true;
              itemPopup.openPopup();
              itemPopup.hidePopup();
              let menuitemCount = 0;
              let menuCount = 0;
              for (let subitem of itemPopup.children) {
                if (subitem.classList.contains('bookmark-item') && !subitem.disabled && !subitem.hidden) {
                  if (subitem.localName == 'menuitem') {
                    menuitemCount++;
                  } else if (subitem.localName == 'menu') {
                    menuCount++;
                  }
                }
              }
			  itemPopup.hidden = false;
			  itemPopup.collapsed = false;

              // Neues Element für Zaehler
              let bmCounta = item.childNodes[1];
              bmCounta.innerHTML = ""
              let bmContent = document.createElement("bmContent");
              bmContent.id = "bmContent";
              bmCounta.appendChild(bmContent);

        //let strCountOut1 = "" + menuCount + "";      //  Has no brackets
        //let strCountOut1 = "(" + menuCount + ")";    //  Has round brackets
        let strCountOut1 = "[" + menuCount + "]";      //  Has square brackets
        bmContent.setAttribute('data-value1', strCountOut1);

        //let strCountOut2 = "" + menuitemCount + "";        //  Has no brackets
        //let strCountOut2 = "(" + menuitemCount + ")";      //  Has round brackets
        let strCountOut2 = "[" + menuitemCount + "]";    //  Has square brackets
        bmContent.setAttribute('data-value2', strCountOut2);

        // Attribut parent va für 0 + 0
        if (bmContent.parentElement) {
          bmContent.parentElement.classList.add('pfeil');
          bmContent.parentElement.setAttribute('data-value3', strCountOut1 + strCountOut2);
        }
            }, 100);
        }
    }

})();

Alles anzeigen

icons.zip

grisu2099

Zitat von Horstmann

Ich hätte auch noch eine CSS Test-Variante mit den Icons separat zu den Zahlen als background-image , falls du damit spielen willst.

Ich möchte spielen...

Mira_Belle

Fein, was zum Spielen!

Zitat von Horstmann

Ich hätte auch noch eine CSS Test-Variante mit den Icons separat zu den Zahlen als background-image , falls du damit spielen willst

Und ja, genau die hätte ich gerne, denn mit den Icons als background-images habe ich mir bisher die Zähne ausgebissen.

grisu2099

Zitat von Horstmann

für den Pfeil habe ich eine Lösung gefunden,

Von welchem Pfeil redest du? Ich sehe/verstehe das "Problem" nicht...

Mira_Belle

Horstmann Erst einmal vielen Dank für diese tolle Version.

Habe etwas gespielt und es funktioniert wie von mir gewünscht.

Bin nun hin- und hergerissen, welche Version ich nun benutzen soll.

Und dann hast Du auch noch jene, bei der die Icons als background-images eingebunden werden.
Ich bin gespannt.

Dharkness

Zitat von Horstmann

Also hier dann was zum Testen für alle Interessierten

Hm, so richtig funktionieren tut es hier nicht, in Menüs ohne Ordner, also Menüs in denen nur Lesezeichen sind, funktioniert der Zähler hier nicht.

Zitat von Dharkness

so richtig funktionieren tut es hier nicht

Ich habe den Fehler gefunden, für den Zähler der Lesezeichen darf nicht menuCount eingetragen sein, sondern es muss menuitemCount eingetragen sein, in den Auswahlzeilen stand leider menuCount.

Mira_Belle

Dharkness Hast Du außer den Symbolen noch etwas ......
AH, Hostmann ist da ein kleiner Fauxpas unterlaufen!

Ersetze mal

JavaScript

        //let strCountOut1 = "" + menuCount + "";      //  Has no brackets
        //let strCountOut1 = "(" + menuCount + ")";    //  Has round brackets
        let strCountOut1 = "[" + menuCount + "]";      //  Has square brackets
        bmContent.setAttribute('data-value1', strCountOut1);

        //let strCountOut2 = "" + menuCount + "";        //  Has no brackets
        //let strCountOut2 = "(" + menuCount + ")";      //  Has round brackets
        let strCountOut2 = "[" + menuitemCount + "]";    //  Has square brackets
        bmContent.setAttribute('data-value2', strCountOut2);

durch

JavaScript

        //let strCountOut1 = "" + menuCount + "";      //  Has no brackets
        //let strCountOut1 = "(" + menuCount + ")";    //  Has round brackets
        let strCountOut1 = "[" + menuCount + "]";      //  Has square brackets
        bmContent.setAttribute('data-value1', strCountOut1);

        //let strCountOut2 = "" + menuitemCount + "";        //  Has no brackets
        //let strCountOut2 = "(" + menuitemCount + ")";      //  Has round brackets
        let strCountOut2 = "[" + menuitemCount + "]";    //  Has square brackets
        bmContent.setAttribute('data-value2', strCountOut2);

Aktiviere nun Deine gewünschte Anzeige.

Dharkness

Zitat von Mira_Belle

AH, Hostmann ist da ein kleiner Fauxpas unterlaufen!

Jupp, habe ich eben auch oben angemerkt.

grisu2099

Zitat von Dharkness

also Menüs in denen nur Lesezeichen sind, funktioniert der Zähler hier nicht.

hier schon...

Da funkt dir wohl noch was anderes dazwischen...

Dharkness

Zitat von grisu2099

Da funkt dir wohl noch was anderes dazwischen...

Jupp, ein kleiner Fehler im Script, der hier jetzt korrigiert.