Finale.
Code bereinigt und kommentiert
Sorry dass ich das nochmal vorbringe, aber das klappt nicht so ganz bei mir. 
Wenn ich dein Script in einem Testprofil ohne weitere CSS etc. Modifikationen benutze, sieht das aus wie im Bild im Anhang.
Da habe ich nur ein paar Farben und die Icons geändert zur besseren Übersicht.
Hast du evtl. in einem Profil mit anderen Veränderungen getestet?
Das Problem hatte ich auch...
Kann aber auch damit zusammenhängen dass ich einen Mac benutze.
Abgesehen von den Überlappungen, die beiden grössten Baustellen:
a) der Textblock für die Zähler rechts und der links haben verschiedene Grössen und Positionen, und der Text ist in seine Feld oben links angeordnet - keine Ahnung warum.
Ein Grund ist dass menu-accel-container kein align-items: center hat, der darauffolgende Container .menu-right aber schon.
Wobei ich das Problem nur sehe wenn ich die (monospace) Fonts benutze, die aber ja wohl notwendig sind für diese Lösung.
Dss Resultat ist, dass der linke Textzähler höher als der rechte sitzt.
b) Kleineres Manko: Die Margins kann man einfacher haben, und die negativen Werte vermeiden, wenn man für .countClass1 label das margin-inline auf 0 setzt .
Firefox hat da nämlich als Standard ein linkes Margin vom Label aus von 16px gesetzt, das bei schmalen Popup Fenstern einen minimalen Abstand zw. linken und rechten Elemente erzwingt - dieser Abstand muss jetzt vor unser erstes ::after, oder das gesamte Element.
Hier mal ein grober Versuch das Ganze anzupassen, ich hoffe es macht Sinn:
// BookmarkCount.uc.js
/* ******************************************************************************************************************* */
/* Author BrokenHeart => https://www.camp-firefox.de/forum/thema/136572/?postID=1229536#post1229536 **** */
/* Correction from BrokenHeart => https://www.camp-firefox.de/forum/thema/136572/?postID=1229696#post1229696 **** */
/* Extension from Sören Henschel => https://www.camp-firefox.de/forum/thema/136572/?postID=1229555#post1229555 **** */
/* Customized by Mira inspired by grisu2099 ********************************************************************** */
/* Source => https://www.camp-firefox.de/forum/thema/136572/?postID=1229875#post1229883 **** */
/* Customized by Mira inspired by Horstmann ********************************************************************** */
/* Source => https://www.camp-firefox.de/forum/thema/136572/?postID=1229993#post1229993 **** */
/* ******************************************************************************************************************* */
/* Finaly Source => https://www.camp-firefox.de/forum/thema/136572/?postID=1230128#post1230128 **** */
/* ******************************************************************************************************************* */
/* Custom Counter in the Bookmarks for folders and links ************************************************************* */
/* ******************************************************************************************************************* */
(function() {
if (!window.gBrowser) return;
setTimeout(function() {
setFunction();
},50);
let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
let icon1 = "flower.png"
let icon2 = "faviconfull.svg"
function setFunction() {
const css =`
.countClass1::before {
content: "";
background-image: url(${profilePath}/${icon1});
background-repeat: no-repeat;
background-size: 16px; /* icon size */
background-position: center;
margin-left: 16px !important; /* Abstand links minimum für schmale Popus CHANGE */
margin-right: 4px !important; /* Abstand bis zum "Wert" der Ordner CHANGE */
height: 16px;
width: 16px;
fill: #c0c0c0;
fill-opacity: 1;
}
/* Default FX left margin ist 16px !! --> CHANGE */
.countClass1 label {
margin-inline: 0px !important;
}
/* Ordner container Inhalt zentriert --> CHANGE */
hbox.menu-accel-container.countClass1 {
align-items: center !important;
}
.countClass1::after {
content: attr(data-value1) !important;
font-family: Consolas, "Lucida Console", "Courier New", monospace !important;
font-size: 12px !important;
font-weight: 900 !important;
color: red !important; /* TEST */
background-color: lightblue; /* TEST */
height: 12px; /* height = font size Text zentriert CHANGE */
}
.countClass2::before {
content: "";
/*background-image: url(${profilePath}/${icon2});*/ /* TEST */
background-image: url("chrome://browser/skin/bookmark-hollow.svg");
background-repeat: no-repeat;
background-size: 16px; /* icon size */
background-position: center;
margin-right: 4px !important; /* Abstand bis zum "Wert" der Links */
margin-left: 4px !important; /* Abstand bis zum Icon der (Links) ORDNER CHANGE */
height: 16px;
width: 16px;
/*fill: #c0c0c0;*/ /* TEST */
fill-opacity: 1;
}
.countClass2::after {
content: attr(data-value2);
font-family: Consolas, "Lucida Console", "Courier New", monospace !important;
font-size: 12px !important;
font-weight: 900 !important;
color: red !important; /* TEST */
/*margin-right: -6px !important;*/ /* Abstand zum Pfeil rechts CHANGE */
background-color: lightblue; /* TEST */
height: 12px; /* height = font size Text zentriert CHANGE */
}
.countClass2 image {
order: 1; /* Pfeil hinter dem "Wert" der Links */
}
`;
const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
let bmbMenu = document.getElementById('bookmarks-menu-button');
let bookMenu = document.getElementById('bookmarksMenu');
let persToolBar = document.getElementById('PersonalToolbar');
if(bmbMenu)
bmbMenu.addEventListener('popupshowing', onPopupShowing );
if(bookMenu)
bookMenu.addEventListener('popupshowing', onPopupShowing );
if(persToolBar)
persToolBar.addEventListener('popupshowing', onPopupShowing );
}
function onPopupShowing(aEvent) {
let popup = aEvent.originalTarget;
for (let item of popup.children) {
if (item.localName != 'menu' || item.id?.startsWith('history')) {
continue;
}
setTimeout(() => {
let itemPopup = item.menupopup;
itemPopup.hidden = true;
itemPopup.collapsed = true;
itemPopup.openPopup();
itemPopup.hidePopup();
let menuitemCount = 0;
let menuCount = 0;
for (let subitem of itemPopup.children) {
if (subitem.classList.contains('bookmark-item') && !subitem.disabled && !subitem.hidden) {
if (subitem.localName == 'menuitem') {
menuitemCount++;
} else if (subitem.localName == 'menu') {
menuCount++;
}
}
}
itemPopup.hidden = false;
itemPopup.collapsed = false;
//item.style.color = '#c0c0c0';
let label1 = item.childNodes[3];
label1.classList.add('countClass1');
//let strCountOut1 = String(menuCount).padEnd(2, '\xa0'); // TEST CHANGE?
let strCountOut1 = String(menuCount).padEnd(2) + '\xa0'; // padEnd2 => zwei Stellen, plus Abstand
label1.setAttribute('data-value1', strCountOut1);
let label2 = item.childNodes[4];
label2.classList.add('countClass2');
let strCountOut2 = String(menuitemCount).padEnd(3, '\xa0'); // padEnd3 => drei Stellen, Abstand bei nur einer Ziffer
label2.setAttribute('data-value2', strCountOut2);
}, 100);
}
}
})();
Nachtrag
. Ich habe auch ein paar sehr große Verzeichnisse und dieses Verhalten würde mich auf die Dauer schon nerven. Der Grund ist, dass alle Child-Popups (also die Unterverzeichnisse)
