Trage ich den Code im Skript ein, tut sich nichts
Zwecks besserer Erkennung in rot der Pfeil.
Teste bitte wenn du magst:
menupopup > menu::after {
content: "";
background-image: url("chrome://global/skin/icons/arrow-right.svg");
background-size: contain;
width: 1em;
height: 1em;
-moz-context-properties: fill !important;
fill: red !important;
}Ich habe mir aus den zahlreichen "Horstmannschen Varianten" diese Version zusammengestrickt, die für meinen Geschmack perfekt paßt. Änderungen habe ich hauptsächlich im CSS-Bereich vorgenommen, im Abstände etc. anzupassen.
Getestet und angepaßt zur Verwendung in Nightly 139!
Schlaue Sache mit dem padding, notiert! 
Teste bitte wenn du magst:
Och komm'.
Kann doch nicht wahr sein!
Habe ich einfach -moz-context-properties: fill !important; vergessen.
Klar geht es dann nicht.
Aber Danke 2002Andreas für den leichten Schlag auf den Hinterkopf.
für den leichten Schlag auf den Hinterkopf.
Aber wirklich nur gaaanz leicht
Habe ich einfach -moz-context-properties: fill !important; vergessen.
Hast du nicht - geht auch ohne
Vergessen hast du dagegen das i in important - und ohne das geht es natürlich nicht... 
Hast du nicht - geht auch ohne
Ergänzend: Das funktioniert deswegen ohne, weil das bereits standardmäßig im CSS von Firefox für diese Stelle steht. Beziehungsweise steht dort sogar -moz-context-properties: fill, fill-opacity, d.h. mit -moz-context-properties: fill !important wird Firefox sogar gegenüber dem Standard-CSS eingeschränkt.
Vergessen hast du dagegen das i in important - und ohne das geht es natürlich nicht...
Ein Hoch auf die Syntax-Hervorhebung in unserem Forum. Falsche Schreibweise: dünn und schwarz, korrekte Schreibweise: fett und orange. 
Hast du nicht - geht auch ohne
Vergessen hast du dagegen das i in important - und ohne das geht es natürlich nicht...
Noch dümmer!
Nutze nun ein eigenes Symbol und diesen Code:
menupopup > menu::after {
content: "";
background-image: url("${ProfilePath}/${icon3}")!important;
height: ${cs_icon_size};
height: ${cs_icon_size};
fill: ${cs_icon_color_3} !important;
}
Danke an alle.
Ein Hoch auf die Syntax-Hervorhebung in unserem Forum.
Ja, hätte mir auffallen müssen.
Kommt davon, wenn man zwischen kochen und coden hin und her springt.
War aber einfach mal wieder zu ungeduldig.
Wenn's jetzt noch eine Möglichkeit gäbe, die Reihenfolge von Icon und Zähler einfach umzukehren, ohne neues Script/CSS. 
Dank grisu2099 und seinem width/padding Ansatz, evtl. so; die Icons sind hier jetzt auf - hoffentlich noch aktuelle - Fx eigene Icons eingestellt, sollten eigentlich direkt anzeigen ohne Änderungen.
Zeilen 47 bis 52, den gewünschten Codeblock einfach ein/auskommentieren; gerne testen bei Interesse; den Schrägstrich bekommt man da auch noch leicht rein.
//bmcount_2.uc.js RC1, Korrektur für Firefox 139 Nightly 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 =`
/** Basiseinstellungen **/
#bmContent {
display: flex !important;
margin-inline: auto 0 !important; /* Counter rechtsbuendig */
height: var(--bm_icon_size);
/* --bm_icon_size = 16px Firefox Standard */
--bm_icon_size: 16px;
/* min. Abstand links Alles für enge Popups, rechts 1ter zu 2tem Counter */
--bm_margin-inline: 16px 8px;
/** Feste Breite der Counter, abhaengig von Anzahl Ziffern/Fontart und Grösse -> Icons untereinander auf gleicher Hoehe **/
/* Fontbreite (hier fuer 2 Ziffern mit Klammern, Systemfont Mac) */
--bm_width_one: 2.1em;
--bm_width_two: 2.1em;
/* Abstand zwischen Icon und Ziffern */
--bm_space_one: 2px;
--bm_space_two: 2px;
/**** Reihenfolge Icon / Ziffern ****/
/* Icon links / Ziffern rechts => */
--bm_padding_one: calc(var(--bm_icon_size) + var(--bm_space_one)) 0;
--bm_padding_two: calc(var(--bm_icon_size) + var(--bm_space_two)) 0;
--bm_bg_position: center left;
/** Icon rechts / Ziffern links => **/
/*--bm_padding_one: 0 calc(var(--bm_icon_size) + var(--bm_space_one));
--bm_padding_two: 0 calc(var(--bm_icon_size) + var(--bm_space_two));
--bm_bg_position: center right;*/
/** Icons **/
/** Use Custom Icons, comment to disable => **/
/*--bm_icon_image_1: url("${ProfilePath}/${icon1}");*/
/*--bm_icon_image_2: url("${ProfilePath}/${icon2}");*/
/* Use Firefox Icons, comment to disable => */
--bm_icon_image_1: url("chrome://global/skin/icons/folder.svg");
--bm_icon_image_2: url("chrome://browser/skin/bookmark-hollow.svg");
}
/** Basiseinstellungen Ende **/
/* Counter #1 Folder */
#bmContent::before {
content: attr(data-value1);
display: flex;
width: var(--bm_width_one);
/*width: calc(var(--bm_icon_size) + 2px);*/
padding-inline: var(--bm_padding_one);
justify-content: end;
align-items: center;
margin-inline: var(--bm_margin-inline);
background-image: var(--bm_icon_image_1);
background-position: var(--bm_bg_position);
background-repeat: no-repeat;
background-size: var(--bm_icon_size) var(--bm_icon_size);
/*color: purple !important;*/
/*fill: rgba(255, 150, 68, 1.0) !important;*/ /* Farben Text / svg Icons aendern */
/*outline: 1px solid purple !important;*/
}
/* Counter #2 Links */
#bmContent::after {
content: attr(data-value2);
display: flex;
width: var(--bm_width_two);
padding-inline: var(--bm_padding_two);
align-items: center;
justify-content: end;
background-image: var(--bm_icon_image_2);
background-position: var(--bm_bg_position);
background-repeat: no-repeat;
background-size: var(--bm_icon_size) var(--bm_icon_size);
/*color: purple !important;*/
/*fill: rgba(255, 150, 68, 1.0) !important;*/ /* Farben Text / svg Icons aendern */
/*outline: 1px solid orange !important;*/
}
/** Optionale Extras **/
/* Adjust/hide if count = 0 */
/* 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;
}
`;
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;
// Eigenes Element für Zaehler
let bmCounta = item.childNodes[1];
bmCounta.innerHTML = ""
let bmContent = document.createElement("bmContent");
bmContent.id = "bmContent";
bmCounta.appendChild(bmContent);
//Zähler Optionen, mit, ohne eckige, runde Klammern
//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);
// Extra class und Attribut parent; va für 0 + 0
if (bmContent.parentElement) {
bmContent.parentElement.classList.add('pfeil');
bmContent.parentElement.setAttribute('data-value3', strCountOut1 + strCountOut2);
}
}, 100);
}
}
})();Wenn's jetzt noch eine Möglichkeit gäbe, die Reihenfolge von Icon und Zähler einfach umzukehren, ohne neues Script/CSS.
Etwas Woodoo 
(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 = "folder-fat.svg"; // Custom Folder Icon
let icon2 = "bookmark-hollow.svg"; // Custom Link Icon
//let icon3 = "arrow-right_II.svg"; // Custom Arrow Icon
let icon3 = "arrow-right.svg";
// Custom settings
let bm_font_size = 12;
let cs_font_weight = 700;
//let cs_font_color = "#FFD700";
//let cs_icon_color = "#C0C0C0";
let bm_icon_size = 16;
// NEU: Schriftfarbe getrennt definieren
//let cs_font_color_1 = "#FFA500"; // Farbe für Folder-Zähler (links)
//let cs_font_color_2 = "#00FFFF"; // Farbe für Link-Zähler (rechts)
let cs_font_color_1 = "#FFD700"; // Farbe für Folder-Zähler (links)
let cs_font_color_2 = "#FFD700"; // Farbe für Link-Zähler (rechts)
// NEU: Symbolfarber getrennt definieren
//let cs_icon_color_1 = "#5fe575"; // Farbe für "Ordner", 1.Symbol
//let cs_icon_color_2 = "#fbf328"; // Farbe für "Link", 2.Symbol
//let cs_icon_color_3 = "#bbf700"; // Farbe für den Pfeil
let cs_icon_color_1 = "#C0C0C0"; // Farbe für "Ordner", 1.Symbol
let cs_icon_color_2 = "#C0C0C0"; // Farbe für "Link", 2.Symbol
let cs_icon_color_3 = "#C0C0C0"; // Farbe für den Pfeil
// Calculated settings
let cs_font_size = `${bm_font_size}px`;
let cs_icon_size = `${bm_icon_size}px`;
let cs_width_one = `calc(${bm_icon_size}px + 1.4em)`;
let cs_width_uno = `calc(${bm_icon_size}px)`;
let cs_width_two = `calc(${bm_icon_size}px + 1.4em)`;
let cs_width_due = `calc(${bm_icon_size}px)`;
let useStyle1 = false; // <- HIER Weiche setzen: true = Variante 1, false = Variante 2
// Symbole hinter den Zählern
let cssBeforeBlock1 = `
/* Counter #1 Folder */
#bmContent::before {
content: attr(data-value1);
width: ${cs_width_one};
align-items: center;
display: flex;
justify-content: end;
margin-inline: 16px 4px; /* min. Abstand links für enge Popups, rechts zum 2ten Counter */
background-image: url("${ProfilePath}/${icon1}")!important;
background-position: center right calc(${cs_width_one} - ${cs_icon_size});
background-repeat: no-repeat;
background-size: ${cs_icon_size} ${cs_icon_size};
color: ${cs_font_color_1}; /* Farbe der 1. Zahl */
fill: ${cs_icon_color_1}; /* Farbe des 1. Symbols */
}
/* Counter #2 Links */
#bmContent::after {
content: attr(data-value2);
width: ${cs_width_two};
align-items: center;
display: flex;
justify-content: end;
margin-inline: -2px;
background-image: url("${ProfilePath}/${icon2}") !important;
background-position: center right calc(${cs_width_two} - ${cs_icon_size});
background-repeat: no-repeat;
background-size: ${cs_icon_size} ${cs_icon_size};
color: ${cs_font_color_2}; /* Farbe der 2. Zahl */
fill: ${cs_icon_color_2}; /* Farbe des 2. Symbols */
}
`;
// Symbole vor den Zählern
let cssBeforeBlock2 = `
/* Counter #1 Folder */
#bmContent::before {
content: attr(data-value1);
width: ${cs_width_one};
align-items: center;
display: flex;
justify-content: end;
background-image: url("${ProfilePath}/${icon1}")!important;
background-position: center right calc(${cs_width_uno} - ${cs_icon_size});
background-repeat: no-repeat;
background-size: ${cs_icon_size} ${cs_icon_size};
color: ${cs_font_color_1}; /* Farbe der 1. Zahl */
fill: ${cs_icon_color_1}; /* Farbe des 1. Symbols */
padding: 4px 20px 0px 10px;
margin-inline: 0px -10px;
}
#bmContent::after {
content: attr(data-value2);
width: ${cs_width_two};
align-items: center;
display: flex;
justify-content: end;
/*justify-content: flex-end; */
background-image: url("${ProfilePath}/${icon2}")!important;
background-position: center right calc(${cs_width_due} - ${cs_icon_size});
background-repeat: no-repeat;
background-size: ${cs_icon_size} ${cs_icon_size};
color: ${cs_font_color_2}; /* Farbe der 2. Zahl */
fill: ${cs_icon_color_2}; /* Farbe des 2. Symbols */
padding: 4px 22px 0 0;
}
`;
function setFunction() {
const css =`
/* Counter rechtsbuendig */
#bmContent {
display: flex !important;
margin-inline: auto 0 !important;
font-family: Consolas, "Lucida Console", "Courier New", monospace !important;
font-size: ${cs_font_size} !important;
font-weight: ${cs_font_weight} !important;
height: ${cs_icon_size};
}
/* Dynamisch gewählter before-Block */
${useStyle1 ? cssBeforeBlock1 : cssBeforeBlock2}
/* Pfeil */
menupopup > menu::after {
content: "";
background-image: url("${ProfilePath}/${icon3}")!important;
height: ${cs_icon_size};
height: ${cs_icon_size};
fill: ${cs_icon_color_3} !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];
if (!bmCounta) return; // Falls undefiniert
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
let strCountOut1 = String(menuCount).padEnd(2, " ");
bmContent.setAttribute('data-value1', strCountOut1);
//let strCountOut2 = "" + menuitemCount + ""; // Has no brackets
//let strCountOut2 = "(" + menuitemCount + ")"; // Has round brackets
//let strCountOut2 = "[" + menuitemCount + "]"; // Has square brackets
let strCountOut2 = String(menuitemCount).padEnd(2, " ");
bmContent.setAttribute('data-value2', strCountOut2);
}, 100);
}
}
})();Mh, bitte beachten!
let useStyle1 = true; // <- HIER Weiche setzen: true = Variante 1, false = Variante 2durch
let useStyle = 1; // <- HIER Weiche setzen: 0 = Symbole hinter den Zählern, 1 = Symbole vor den Zählernsowie
let cssBeforeBlock1 = `und
let cssBeforeBlock2 = `durch
let css_one = `let css_two = `und
/* Dynamisch gewählter before-Block */
${useStyle1 ? cssBeforeBlock1 : cssBeforeBlock2}durch
/* Dynamisch gewählter before-Block */
${useStyle ? css_one : css_two}Find' ich etwas besser.
Etwas Woodoo
Cooool, dankeschön!
Das mit den JS Variablen muss ich mir wirklich mal genauer anschauen, viel eleganter als das nervige CSS /**/ kommentieren.
Aris hat das in seinem CSS immer schlau gemacht mit dem Kommentieren, aber das ist mir etwas zu hoch.
Wenn's nach mir ginge, würde ich eh lieber ein Paket mit komplett separaten JS und CSS Dateien plus Icons machen. 
Hmm....
Bis ich das mit dem JS aber hinbekommen habe, hier erstmal meine eigene, quasi finale Version - ausser jemand findet Fehler - mit diversen Optionen.
Inkl. Trennstrichcode speziell für grisu2099 , dessen Variante als Vorlage gedient hat für die jetzt neuen Dimensionsberechnungen (der padding Ansatz).
Das Ganze sollte klappen mit Firefox Icons (Voreinstellung), und wie gehabt optional mit eigenen Icons, ebenfalls wählbar ist die Icon/Zähler Reihenfolge, und manuell die Farben für Text und Icons.
Ich hoffe die Erläuterungen im Script dazu machen Sinn.
//bmcount_2b.uc.js , Korrektur für Firefox 139 Nightly, RC_1b, Variablen
//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
//Release Candidate 1 =>
//https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1270320#post1270320
(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 =`
/** Basiseinstellungen **/
#bmContent {
display: flex !important;
margin-inline: auto 0 !important; /* Counter rechtsbuendig */
height: var(--bm_icon_size); /* Layout passt sich Icon Groesse an */
padding-left: 8px; /* min. Abstand links Gesamt für enge Popups */
/* Icons */
/* Use Custom Icons, comment to disable => */
/*--bm_icon_image_1: url("${ProfilePath}/${icon1}");*/
/*--bm_icon_image_2: url("${ProfilePath}/${icon2}");*/
/* Use Firefox Icons, comment to disable => */
--bm_icon_image_1: url("chrome://global/skin/icons/folder.svg");
--bm_icon_image_2: url("chrome://browser/skin/bookmark-hollow.svg");
/* Abstand mittig zwischen Counter #1 Counter #2 */
--bm_margin_left: 8px;
/* Abstand zwischen Icon und Ziffer */
--bm_space: 2px;
/** Feste Breite der Counter, abhaengig von Anzahl Ziffern/Fontart und Grösse
-> Icons untereinander auf gleicher Hoehe **/
/* Groesse Icons = 16px Firefox Standard */
--bm_icon_size: 16px;
/* Breite Zähler #1/#2 (hier fuer 2 Ziffern mit Klammern, Systemfont Mac) */
--bm_width_one: 2.1em;
--bm_width_two: 2.1em;
/** Reihenfolge Icons / Ziffern / alle ungewuenschten Varianten kommentieren **/
/* #1 Icons links / Ziffern rechts => */
--bm_padding_one: calc(var(--bm_icon_size) + var(--bm_space)) 0;
--bm_padding_two: calc(var(--bm_icon_size) + var(--bm_space)) 0;
--bm_bg_position_1: center left;
--bm_bg_position_2: center left;
/* #2 Ziffern links / Icons rechts => */
/*
--bm_padding_one: 0 calc(var(--bm_icon_size) + var(--bm_space));
--bm_padding_two: 0 calc(var(--bm_icon_size) + var(--bm_space));
--bm_bg_position_1: center right;
--bm_bg_position_2: center right;
*/
/* #3 Manuelle Anpassung noetig: Ziffern links / Icons rechts + Trennlinie => */
/* Unten eintragen bei Counter #1, Leerzeichen vor / beachten:
content: attr(data-value1) " /"; */
/*
--bm_padding_one: 0 0;
--bm_padding_two: 0 calc(var(--bm_icon_size) + var(--bm_space));
--bm_bg_position_1: center right 11px;
--bm_bg_position_2: center right;
--bm_margin_left: 4px;
*/
/* #4 Manuelle Anpassung noetig: Icons links / Ziffern rechts + Trennlinie => */
/* Unten eintragen bei Counter #1, Leerzeichen vor / beachten:
content: attr(data-value1) " /"; */
/*
--bm_width_one: calc(2.1em + 6px);
--bm_padding_one: calc(var(--bm_icon_size) + var(--bm_space)) 0;
--bm_padding_two: calc(var(--bm_icon_size) + var(--bm_space)) 0;
--bm_bg_position_1: center left;
--bm_bg_position_2: center left;
--bm_margin_left: 4px;
*/
/** Reihenfolge Varianten Ende **/
}
/** Basiseinstellungen Ende **/
/** Die Counter **/
/* Counter #1 Ordner */
#bmContent::before {
content: attr(data-value1);
display: flex;
min-width: fit-content;
width: var(--bm_width_one);
padding-inline: var(--bm_padding_one);
justify-content: end;
align-items: center;
background-image: var(--bm_icon_image_1);
background-position: var(--bm_bg_position_1);
background-repeat: no-repeat;
background-size: var(--bm_icon_size) var(--bm_icon_size);
/*color: hsl(155, 90%, 50%, 1) !important;*/
/*fill: hsl(255, 70%, 50%, 1) !important;*/ /* Farben Text / svg Icons aendern */
}
/* Counter #2 Links */
#bmContent::after {
content: attr(data-value2);
display: flex;
min-width: fit-content;
width: var(--bm_width_two);
padding-inline: var(--bm_padding_two);
align-items: center;
justify-content: end;
margin-left: var(--bm_margin_left);
background-image: var(--bm_icon_image_2);
background-position: var(--bm_bg_position_2);
background-repeat: no-repeat;
background-size: var(--bm_icon_size) var(--bm_icon_size);
/*color: hsl(155, 90%, 50%, 1) !important;*/
/*fill: hsl(255, 70%, 50%, 1) !important;*/ /* Farben Text / svg Icons aendern */
}
/** Optionale Extras **/
/* Anpassungen bei Zahl = 0 */
/* Verstecken/ Verblassen #1 */
#bmContent[data-value1="[0]"]::before,
#bmContent[data-value1="0"]::before,
#bmContent[data-value1="(0)"]::before {
/*opacity: 0.2;*/
display: none;
}
/* Verstecken/ Verblassen #2 */
#bmContent[data-value2="[0]"]::after,
#bmContent[data-value2="0"]::after,
#bmContent[data-value2="(0)"]::after {
/*opacity: 0.5;
display: none;*/
color: hsl(0, 0%, 50%, 0.5) !important;
fill: hsl(0, 0%, 50%, 0.5) !important; /* Farben Deckkraft statt opacity für Performance Test */
}
/** Tool zum Testen der Abstände **/
/*
#bmContent {
outline: 1px solid blue;
outline-offset: 4px;
}
#bmContent::after {
background-image: var(--bm_icon_image_1),linear-gradient(lightgreen, lightgreen) !important;
background-color: pink;
}
#bmContent::before {
background-image: var(--bm_icon_image_2),linear-gradient(lightblue, lightblue) !important;
background-color: khaki;
}
*/
`;
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;
// Eigenes Element für Zaehler
let bmCounta = item.childNodes[1];
bmCounta.innerHTML = "";
let bmContent = document.createElement("bmContent");
bmContent.id = "bmContent";
bmCounta.appendChild(bmContent);
//Zähler Optionen, mit, ohne, eckige, runde Klammern
//let strCountOut1 = "" + menuCount + ""; // ohne Klammern
//let strCountOut1 = "(" + menuCount + ")"; // runde Klammern
let strCountOut1 = "[" + menuCount + "]"; // eckige Klammern
bmContent.setAttribute('data-value1', strCountOut1);
//let strCountOut2 = "" + menuitemCount + ""; // ohne Klammern
//let strCountOut2 = "(" + menuitemCount + ")"; // runde Klammern
let strCountOut2 = "[" + menuitemCount + "]"; // eckige Klammern
bmContent.setAttribute('data-value2', strCountOut2);
// Extra class und Attribut parent; optional
//if (bmContent.parentElement) {
//bmContent.parentElement.classList.add('pfeil');
//bmContent.parentElement.setAttribute('data-value3', strCountOut1 + strCountOut2);
//}
}, 100);
}
}
})();Vereinfachte Version, weniger Variablen, nur eine Version für Reihenfolge von Icon zu Zähler:
//bmcount_2c.uc.js , Korrektur für Firefox 139 Nightly, RC_1c, Vereinfacht
//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
//Release Candidate 1 =>
//https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1270320#post1270320
(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 =`
/** Basiseinstellungen **/
#bmContent {
display: flex !important;
margin-inline: auto 0 !important; /* Gesamt rechtsbuendig */
padding-left: 8px; /* min. Abstand links Alles für enge Popups */
height: var(--bm_icon_size); /* Layout passt sich Icon Groesse an, Test */
/* Icons */
/* Use Custom Icons, comment to disable => */
/*--bm_icon_image_1: url("${ProfilePath}/${icon1}");*/
/*--bm_icon_image_2: url("${ProfilePath}/${icon2}");*/
/* Use Firefox Icons, comment to disable => */
--bm_icon_image_1: url("chrome://global/skin/icons/folder.svg");
--bm_icon_image_2: url("chrome://browser/skin/bookmark-hollow.svg");
/* Abstand Mitte zwischen Counter #1 Counter #2 */
--bm_margin_left: 8px;
/* Abstand zwischen Icon und Ziffer */
--bm_space: 2px;
/** Feste Breite der Counter, abhaengig von Anzahl Ziffern/Fontart und Grösse
-> Anpassen bis Icons untereinander auf gleicher Hoehe **/
/* Groesse Icons = 16px Firefox Standard */
--bm_icon_size: 16px;
/* Breite der Zähler #1/#2 (hier fuer je 2 Ziffern mit Klammern, Systemfont Mac) */
--bm_width_one: 2.1em;
--bm_width_two: 2.1em;
}
/** Basiseinstellungen Ende **/
/** Die Counter **/
/* Counter #1 Ordner */
#bmContent::before {
content: attr(data-value1);
display: flex;
min-width: fit-content;
width: var(--bm_width_one);
padding-inline: calc(var(--bm_icon_size) + var(--bm_space)) 0;
justify-content: end;
align-items: center;
background-image: var(--bm_icon_image_1);
background-position: center left;
background-repeat: no-repeat;
background-size: var(--bm_icon_size);
/*color: hsl(155, 90%, 50%, 1) !important;*/
/*fill: hsl(255, 70%, 50%, 1) !important;*/ /* Farben Text / svg Icons aendern */
}
/* Counter #2 Links */
#bmContent::after {
content: attr(data-value2);
display: flex;
min-width: fit-content;
width: var(--bm_width_two);
padding-inline: calc(var(--bm_icon_size) + var(--bm_space)) 0;
align-items: center;
justify-content: end;
margin-left: var(--bm_margin_left);
background-image: var(--bm_icon_image_2);
background-position: center left;
background-repeat: no-repeat;
background-size: var(--bm_icon_size);
}
/** Optionale Extras **/
/* Anpassungen bei Zahl = 0 */
/* Verstecken/ Verblassen #1 */
#bmContent[data-value1="[0]"]::before,
#bmContent[data-value1="0"]::before,
#bmContent[data-value1="(0)"]::before {
/*opacity: 0.2;*/
display: none;
}
/* Verstecken/ Verblassen #2 */
#bmContent[data-value2="[0]"]::after,
#bmContent[data-value2="0"]::after,
#bmContent[data-value2="(0)"]::after {
/*opacity: 0.5;
display: none;*/
color: hsl(0, 0%, 50%, 0.5) !important;
fill: hsl(0, 0%, 50%, 0.5) !important; /* Farben Deckkraft statt opacity für Performance Test */
}
/** Tool zum Testen der Abstände **/
/*
#bmContent {
outline: 1px solid blue;
outline-offset: 4px;
}
#bmContent::after {
background-image: var(--bm_icon_image_1),linear-gradient(lightgreen, lightgreen) !important;
background-color: pink;
}
#bmContent::before {
background-image: var(--bm_icon_image_2),linear-gradient(lightblue, lightblue) !important;
background-color: khaki;
}
*/
`;
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;
// Eigenes Element für Zaehler
let bmCounta = item.childNodes[1];
bmCounta.innerHTML = "";
let bmContent = document.createElement("bmContent");
bmContent.id = "bmContent";
bmCounta.appendChild(bmContent);
//Zähler Optionen, mit, ohne, eckige, runde Klammern
//let strCountOut1 = "" + menuCount + ""; // ohne Klammern
//let strCountOut1 = "(" + menuCount + ")"; // runde Klammern
let strCountOut1 = "[" + menuCount + "]"; // eckige Klammern
bmContent.setAttribute('data-value1', strCountOut1);
//let strCountOut2 = "" + menuitemCount + ""; // ohne Klammern
//let strCountOut2 = "(" + menuitemCount + ")"; // runde Klammern
let strCountOut2 = "[" + menuitemCount + "]"; // eckige Klammern
bmContent.setAttribute('data-value2', strCountOut2);
// Extra class und Attribut parent; optional
//if (bmContent.parentElement) {
//bmContent.parentElement.classList.add('pfeil');
//bmContent.parentElement.setAttribute('data-value3', strCountOut1 + strCountOut2);
//}
}, 100);
}
}
})();Wenn's nach mir ginge, würde ich eh lieber ein Paket mit komplett separaten JS und CSS Dateien plus Icons machen.
So sind die Geschmäcker verschieden. Ich habe "Veränderungen" am Firefox lieben kompakt in einer Datei!
Trennstrichcode speziell für grisu2099
Und das mit dem Trennstrich geht auch im Code ganz am Ende recht einfach!
let strCountOut2 = String(menuitemCount).padStart(3, "/ ");
Könnte man auch irgendwie in die "Weiche" (useStyle) mit einbauen.
Da ein solcher Trennstrich je nach gewünschter Anzeige an anderer Stelle sein müsste.
Und ob so ein Trennstrich überhaupt angezeigt werden soll.
Aber da mache ich mich jetzt nicht mehr dran
Ich brauche es nicht und es sprengt dann doch irgendwie den Rahmen,
vom Umfang des ganzen.
Das Skript, "mein" Skript, bietet ja jetzt schon mehr, als ich selbst benötige,
aber es hat mich einfach gejuckt, das mit der "Weiche" (Option der Anzeige).
Und das mit dem Trennstrich geht auch im Code ganz am Ende recht einfach!
let strCountOut2 = String(menuitemCount).padStart(3, "/ ");Könnte man auch irgendwie in die "Weiche" (useStyle) mit einbauen.
Da ein solcher Trennstrich je nach gewünschter Anzeige an anderer Stelle sein müsste.Und ob so ein Trennstrich überhaupt angezeigt werden soll.
Viele Wege führen nach Rom.
Irgendwann werden die Variablen aber kompliziert; mein altes Script hatte einen flexiblen Trennstrich drin, glaub ich, aber das war auf 2 schon existierende Elemente verteilt.
Mit der String Geschichte hatte ich irgendein Font(?) Problem in diesem Script, erinnere ich mich aber nicht mehr...
So der so, mit deinem String müsste ich das komplette CSS neu schreiben, da können die so Geneigten selber ein bisschen justieren, oder fragen; an sich ist das Ding ja recht einfach aufgebaut.
Wenn die Zähler-Icon Reihenfolge (grisu) zu Icon-Zähler umgekehrt ist, ist es super einfach.
Noch einfacher: eine separate CSS Datei für jede Version, diese in eine Kontroll CSS Datei zur Auswahl importieren, und diese dann in die userChrome.css importieren, ala Aris.
Ob das für diese Kleinigkeit Sinn macht, ist eine andere Frage.
Was ich wirklich gerne hätte, ist das Element nicht als Child von einem der, sondern als eigenständigen Sibling unter den umgebenden Elementen zu haben. Das geht aber weit über meine Kenntnisse hinaus... 
Habe aber Spass mit der Übung, und wieder dazugelernt; hoffe es können einige Leute was damit anfangen, und vielen Dank für deine Hilfe und die von allen anderen Beteiligten!
Irgendwann werden die Variablen aber kompliziert;
Mir sind sie es in deiner Version aus #432 schon...
Irgendwie klappt das bei mir auch nicht so recht mit der gewünschten Reihenfolge.
Das Schöne am JavaScript ist ja, wenn man sich wirklich gut auskennt,
dass man ganz zu Anfang nur jene "Schalter" (also bestimmte Variablen) stellt,
die der User sich für seine eigenen Bedürfnisse einstellt.
Weitere Variablen, die irgendetwas berechnen, stellt man hinten an!
So bleibt der restliche Code unangetastet und nichts geht kaputt.
Wie z.B. beim Appmenu-Skript oder beim Scrollbar-Skript.
Mir sind sie es in deiner Version aus #432 schon...
Irgendwie klappt das bei mir auch nicht so recht mit der gewünschten Reihenfolge.
Icons rechts verschoben?
Nö, linkes Icon vor/über der Zahl, obwohl laut Einstellung anders rum...
Wie dir schon geschrieben, der letzte Code war Müll, danke für die Hinweise!
Kommt neu...
Horstmann Da Du ja auch nicht zm Ende kommst, könnte ich auch nicht die Finger vom Skript lassen. 
Ergebnis: 
Und man kann es über "useStyle = "1" umstellen auf: 
Und das alles nur, wie ich vermutete, mit einer kleinen Ergänzung am Ende des Skripts.
let strCountOut1 = String(menuCount).padEnd(2, " ");
bmContent.setAttribute('data-value1', strCountOut1);... ersetzen durch ...
let strCountOut2 = (useStyle === 0)
? String(menuitemCount).padStart(4, "/ ")
: String(menuitemCount).padEnd(2, " ");
bmContent.setAttribute('data-value2', strCountOut2);Nachwort!
Natürlich hätte ich auch ganz einfach den CSS-Block dafür anpassen können,
so aber ergeben sich ganz andere Möglichkeiten.
Z.B. könnte man auch per "Einstellung" ganz einfach die Anzeige ohne diesen Backslash erscheinen lassen..