Das Problem ist, dass Grafiken nur in Originalgröße angezeigt werden.
Also es keine Möglichkeit gibt per "background-size:" oder ähnlichem korrigierend eingreifen zu können.
Sicher. Du musst natürlich die Grafiken über background-image und nicht über content einbinden, wenn background-size funktionieren soll.
Wenn ich jetzt nur noch wüsste, wie ich
a. die Symbole (Icons) fett bekomme
Indem du entsprechende Grafiken verwendest.
Sicher. Du musst natürlich die Grafiken über background-image und nicht über content einbinden, wenn background-size funktionieren soll.
Danke Sören, das habe ich auch schon probiert, nur ...
dann bekomme ich die Symbole nicht zwischen die Zahlen,
weder vor noch hinter diese.
lenny 's Beitrag zeigt, wie es mit dieser Version des Skriptes ausschaut! #360
Es müsste eine Möglichkeit geben die Grafik in diesem Code unterzubekommen!
let strCountOut1 = ` ${menuCount.toString().padStart(2, " ")} `;Z.B. müsste es eine Möglichkeit geben, so etwas
.countClass::befor {
background-image:url("chrome://global/skin/icons/folder.svg")
background-repeat: no-repeat;
background-size: 16px;
height: 16px;
width: 16px;
fill: ${cs_icon_color};
fill-opacity: 1;
}in eine Variable zu packen und diese dann in die "Zeile" einzufügen.
In etwa so:
let strCountOut1 = `${Symbol. ...().parameter((} ${menuCount.toString().padStart(2, " ")} `;Hier mein Skript:
Die Version ist Perfekt, ich konnte sogar meinen vertikalen Trenner einfügen, fein gemacht. 
Sören Hentzschel Habe nun eine "neue" Grafik (SVG) meinen Wünschen entsprechend erstellt.
Jetzt sieht das ganze schon etwas besser aus, finde ich.
Das Skript ist das Gleiche #359 nur dass ich die Grafiken lokal von Platte lade
und nicht aus dem Firefox heraus [url("chrome://global/skin/icons/xxx.svg")] geladen werden.
Damit kann ich erst einmal leben, wobei es wirklich schöner wäre,
wenn man per css direkt auf die "Grafiken" Einfluss nehmen könnte.
Größe, Farbe (geht ja), Position.
Denn so sieht es bei meinem derzeitigen Finalen Firefox aus.
Der Code ist aber ganz anders und funktioniert so im Nightly leider nicht mehr!
// BookmarkCount.uc.js
(function() {
if (!window.gBrowser) return;
setTimeout(function() {
setFunction();
},50);
let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
let icon1 = "folder-fat.svg" /* "folder_org.svg" */
let icon2 = "bookmark-hollow.svg" /* "bookmark-hollow.svg" */
let cs_font_size = 12
let cs_font_weight = 900
let cs_font_color = "#FFD700"
let cs_icon_color = "#C0C0C0"
function setFunction() {
const css =`
/* 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::before {
content: "";
background-image: url(${profilePath}/${icon1}); /* Custom icon */
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: -1px !important; /* Abstand Icon "Ordner" bis zum "Zähler" */
height: 16px;
width: 16px;
fill: ${cs_icon_color};
fill-opacity: 1;
}
.countClass1::after {
content: attr(data-value1) !important;
font-family: Consolas, "Lucida Console", "Courier New", monospace !important;
font-size: ${cs_font_size}px !important;
font-weight: ${cs_font_weight} !important;
color: ${cs_font_color} !important; /* Farbe des 1. Textes */
height: 14px; /* height = font size Text zentriert CHANGE */
width: 15px !important; /* Platzhalter für Anzahl der Stellen */
padding-left: 4px !important; /* height = font size Text zentriert CHANGE */
margin-right: -4px !important; /* Abstand zum Icon "Links" rechts */
/* background-color: lightblue; */ /* TEST */
}
.countClass2::before {
content: "";
background-image: url(${profilePath}/${icon2}); /* Custom icon */
background-repeat: no-repeat;
background-size: 16px; /* icon size */
background-position: center;
margin-left: 4px !important; /* Abstand "Zähler 1" zum Icon2 */
margin-right: -1px !important; /* Abstand Icon "Links" bis zum "Zähler" */
height: 16px;
width: 16px;
fill: ${cs_icon_color};
fill-opacity: 1;
}
.countClass2::after {
content: attr(data-value2);
font-family: Consolas, "Lucida Console", "Courier New", monospace !important;
font-size: ${cs_font_size}px !important;
font-weight: ${cs_font_weight} !important;
color: ${cs_font_color} !important; /* Farbe des 2. Textes */
height: 14px; /* height = font size Text zentriert CHANGE */
width: 15px !important; /* Platzhalter für Anzahl der Stellen (25px für 3 Stellen) */
padding-left: 4px !important; /* height = font size Text zentriert CHANGE */
margin-right: -1px !important; /* Abstand zum Pfeil recht */
/* background-color: lightblue; */ /* TEST */
}
.countClass2 image {
order: 1; /* Pfeil ganz nach rechts */
}
`;
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 = + 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');
label1.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');
label2.setAttribute('data-value2', strCountOut2);
}, 100);
}
}
})();Ich werf den groben Test einfach mal in den Raum; geht das in deinem Nigthly?
Ja, einfach im Skript aus #346 in Zeile 11 und 12 die Namen anpassen. Die Icons müssen dann im Ordner chrome/icons liegen...
Damit kann ich erst einmal leben, wobei es wirklich schöner wäre,
wenn man per css direkt auf die "Grafiken" Einfluss nehmen könnte.
Größe, Farbe (geht ja), Position.Der Code ist aber ganz anders und funktioniert so im Nightly leider nicht mehr!
Hi Mira, ich arbeite daran! 
Das war ja der Grund für unseren früheren Code, die einzelnen Texte und Icons separat anfassen zu können.
Siehe JS unten.
Ich werf den groben Test einfach mal in den Raum; geht das in deinem Nigthly?
Ja, einfach im Skript aus #346 in Zeile 11 und 12 die Namen anpassen. Die Icons müssen dann im Ordner chrome/icons liegen...
Danke für die Rückmeldung!
Für dich und alle Interessierten, könntet Ihr diesen Basis Test mal in die Nightly packen?
Das lässt sich dann unendlich mit CSS variieren, und auch die Icons im nächsten Schritt separieren - wenn es in Nightly gefressen wird.
Icons sind wieder wie gehabt einzubinden, hier im chrome/icons Ordner, ihr kennt das Spiel ja.
Basieren auf dem JS von BrokenHeart hier.
//bmcount testa neu C TEST!
// 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 = "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;
/*outline: 1px solid grey !important;
outline-offset: 3px !important;*/
font-family: Consolas, "Lucida Console", "Courier New", monospace !important;
font-size: 11px !important;
font-weight: 900 !important;
}
#bmContent::before {
content: attr(data-value1) " "
url("${ProfilePath}/${icon1}");
justify-content: end;
color: rgb(170,130,255);
align-items: center;
display: flex;
/*outline: 1px solid orange;*/
margin-inline: 16px 8px;
}
#bmContent::after {
content: attr(data-value2) " "
url("${ProfilePath}/${icon2}");
width: calc(36px + 2.1em); /* Feste Breite rechter Counter für 3 Ziffern -> linke Icons auf gleicher Höhe */
color: rgb(100,200,255);
align-items: center;
display: flex;
/*outline: 1px solid lightblue;*/
justify-content: end;
}
`;
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.classList.add('countClass');
let bmCounta = item.childNodes[1];
bmCounta.innerHTML = ""
let bmContent = document.createElement("bmContent");
bmContent.id = "bmContent";
bmCounta.appendChild(bmContent);
let strCountOut1 = "[" + menuCount + "]"; // Has square brackets
bmContent.setAttribute('data-value1', strCountOut1);
let strCountOut2 = "[" + menuitemCount + "]"; // Has square brackets
bmContent.setAttribute('data-value2', strCountOut2);
}, 100);
}
}
})();Noch zur Erläuterung:
Der Content lässt sich jeweils auch grob sortieren.
ZB : content: attr(data-value1) " " url("${ProfilePath}/${icon1}");
ist der Counter #1 , dann ein Leerzeichen für Abstand, dann das Icon #1; die Reihenfolge kann man ändern, und weiteren Schnickschnack dazupacken, zB ein "/" ergibt dann ein / an der Stelle wo es eingefügt ist.
Hi Horstmann
Bin gerade fertig geworden mit einer "neuen" Variante, abgeleitet von #346
Passt so weit ganz gut.
(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 = 14
let cs_font_weight = 900
let cs_font_color = "#FFD700"
let cs_icon_color = "#C0C0C0"
function setFunction() {
const css =`
.countClass {
justify-content: space-between !important;
}
.countClass::after {
background-image: url(${ProfilePath}/${icon1}), url(${ProfilePath}/${icon2}) !important;
background-size: 16px !important;
background-repeat: no-repeat !important;
background-position: 8px, right 18px center !important;
content: attr(data-value) !important;
font-family: "Courier New", monospace !important;
font-size: ${cs_font_size}px !important;
font-weight: ${cs_font_weight} !important;
color: ${cs_font_color} !important;
width: 92px;
height: 14px;
margin-top: 4px;
fill: ${cs_icon_color} !important;
}
`;
const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
let bmbMenu = document.getElementById('bookmarks-menu-button');
let bookMenu = document.getElementById('bookmarksMenu');
let persToolBar = document.getElementById('PersonalToolbar');
if(bmbMenu)
bmbMenu.addEventListener('popupshowing', onPopupShowing );
if(bookMenu)
bookMenu.addEventListener('popupshowing', onPopupShowing );
if(persToolBar)
persToolBar.addEventListener('popupshowing', onPopupShowing );
}
function onPopupShowing(aEvent) {
let popup = aEvent.originalTarget;
for (let item of popup.children) {
if (item.localName != 'menu' || item.id?.startsWith('history'))
continue;
setTimeout(() => {
let itemPopup = item.menupopup;
itemPopup.hidden = true;
itemPopup.collapsed = true;
itemPopup.openPopup();
itemPopup.hidePopup();
let menuitemCount = 0;
let menuCount = 0;
for (let subitem of itemPopup.children) {
if (subitem.classList.contains('bookmark-item') && !subitem.disabled && !subitem.hidden) {
if (subitem.localName == 'menuitem') {
menuitemCount++;
} else if (subitem.localName == 'menu') {
menuCount++;
}
}
}
itemPopup.hidden = false;
itemPopup.collapsed = false;
let label = item.childNodes[1];
label.classList.add('countClass');
let strCountOut = "\xa0" + "\xa0" + "\xa0" + String(menuCount).padStart(2, " ") + "\xa0" + "\xa0" + "\xa0" + String(menuitemCount).padStart(3, " ");
label.setAttribute('data-value', strCountOut);
}, 100);
}
}
})(); Horstmann Und gerade habe ich Deine Version zur Brust genommen.
Sehr schön. Nur wie bekommt man da die Symbole vor zu "Zähler" (Zahlen)?
Test mit meinen Anpassungen:
//bmcount testa neu C TEST!
// 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 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;
/*outline: 1px solid grey !important;
outline-offset: 3px !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: attr(data-value1) " "
url("${ProfilePath}/${icon1}");
fill: ${cs_icon_color};
justify-content: end;
color: ${cs_font_color};
align-items: center;
display: flex;
margin-inline: 16px 8px;
}
#bmContent::after {
content: attr(data-value2) " "
url("${ProfilePath}/${icon2}");
fill: ${cs_icon_color};
width: calc(36px + 2.1em); /* Feste Breite rechter Counter für 3 Ziffern -> linke Icons auf gleicher Höhe */
color: ${cs_font_color};
align-items: center;
display: flex;
justify-content: end;
}
`;
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.classList.add('countClass');
let bmCounta = item.childNodes[1];
bmCounta.innerHTML = " "
let bmContent = document.createElement("bmContent");
bmContent.id = "bmContent";
bmCounta.appendChild(bmContent);
let strCountOut1 = + menuCount + " "; // Has square brackets
bmContent.setAttribute('data-value1', strCountOut1);
let strCountOut2 = + menuitemCount + " "; // Has square brackets
bmContent.setAttribute('data-value2', strCountOut2);
}, 100);
}
}
})();Bin gerade fertig geworden mit einer "neuen" Variante, abgeleitet von ???
Passt so weit ganz gut.
Na dann ist ja prima!
Das bietet halt nicht so viel Kontrolle, aber wenn's passt und reicht:
Und gerade habe ich Deine Version zur Brust genommen.
Sehr schön. Nur wie bekommt man da die Symbole vor zu "Zähler" (Zahlen)?
Haben uns überschnitte; Momentchen.
Nur wie bekommt man da die Symbole vor zu "Zähler" (Zahlen)?
Also, probier den Otto mal:
Die width Einträge sind nur für den Fall daß man alle Icons immer untereinander haben will, und kann man evtl. schlauer machen.
Bei deinem Eintrag font-size: ${cs_font_size}px bin ich mir nicht sicher, was ist mit dem px ?
//bmcount testa neu C TEST! für Mira, Icons links
// 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: start;
width: calc(16px + 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 */
/*outline: 1px solid grey !important;*/
}
#bmContent::after {
content: url("${ProfilePath}/${icon2}") " "
attr(data-value2);
fill: ${cs_icon_color};
width: calc(24px + 2.1em); /* Feste Breite rechter Counter für 3 Ziffern -> Icons auf gleicher Höhe */
color: ${cs_font_color};
align-items: center;
display: flex;
justify-content: start;
/*outline: 1px solid grey !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.classList.add('countClass');
let bmCounta = item.childNodes[1];
bmCounta.innerHTML = " "
let bmContent = document.createElement("bmContent");
bmContent.id = "bmContent";
bmCounta.appendChild(bmContent);
let strCountOut1 = + menuCount + " "; // Has square brackets
bmContent.setAttribute('data-value1', strCountOut1);
let strCountOut2 = + menuitemCount + " "; // Has square brackets
bmContent.setAttribute('data-value2', strCountOut2);
}, 100);
}
}
})();Also, probier den Otto mal:
Leider ist in meinen Augen die Ausrichtung der Zähler falsch, sie ist an der ersten Zahl der Zählung ausgerichtet, nicht am Ende der zweistelligen Zählung.
Bei deinem Eintrag font-size: ${cs_font_size}px bin ich mir nicht sicher, was ist mit dem px ?
Schau Dir die Deklaration der Variabel an.
Aber ich gebe Dir recht let cs_font_size = 14px wäre besser gewesen.
Dharkness Schau mal, besser?
Horstmann So und noch etwas an "Deinem" Skript geschraubt und, tada,
es passt!
(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 = 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: start;
width: 32px;
}
#bmContent::after {
content: url("${ProfilePath}/${icon2}") " "
attr(data-value2);
fill: ${cs_icon_color};
width: 50px;
color: ${cs_font_color};
align-items: center;
display: flex;
justify-content: end;
}
`;
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 = String(menuCount).padStart(2, " ")
bmContent.setAttribute('data-value1', strCountOut1);
// let strCountOut2 = + menuitemCount + " "; // Has square brackets
let strCountOut2 = String(menuitemCount).padStart(2, " ")
bmContent.setAttribute('data-value2', strCountOut2);
}, 100);
}
}
})();Also, probier den Otto mal:
Leider ist in meinen Augen die Ausrichtung der Zähler falsch, sie ist an der ersten Zahl der Zählung ausgerichtet, nicht am Ende der zweistelligen Zählung.
Ganz verstehe ich das nicht; da könnte ein Screenshot mit Anmerkungen helfen.
Das kann man sich aber einrichten wie man will; diese Version von #370 war für Mira bestimmt, basierend auf den Screenshots die Sie gepostet hatte; Icons links von den Zahlen, und die Zahlen links startend.
Aber das Wichtigste: funktioniert der Code im aktuellen Nightly?
Aber das Wichtigste: funktioniert der Code im aktuellen Nightly?
Ja. => Version 139.0a1 (2025-04-18)
Bei deinem Eintrag font-size: ${cs_font_size}px bin ich mir nicht sicher, was ist mit dem px ?
Schau Dir die Deklaration der Variabel an.
Aber ich gebe Dir recht let cs_font_size = 14px wäre besser gewesen.So und noch etwas an "Deinem" Skript geschraubt und, tada,
es passt!
Was diese Variable angeht: hab einfach keine Ahnung wie das $ Zeug funktioniert, ehrlich gesagt. 
Und könnste einen Screenshot posten, bittebitte?
Was den justify-content Teil angeht, für die Inhalte der beiden Counter, da geht sicher deine Lösung, oder auch space-between, man muss die Grössen halt von Hand anpassen damit es sauber sitzt.
Und auch für dich die Frage: : funktioniert der Code im aktuellen Nightly (und Release)?
Wie erwähnt ist das für mich zZ etwas aufwendig im Detail zu testen.
Aber das Wichtigste: funktioniert der Code im aktuellen Nightly?
Ja. => Version 139.0a1 (2025-04-18)
Danke, wieder überschnitten.
Ganz verstehe ich das nicht; da könnte ein Screenshot mit Anmerkungen helfen.
Guckst Du da ↓.
Zahlen rechts ausgerichtet.
Zahlen links ausgerichtet.
Und könnste einen Screenshot posten, bittebitte?
Wie das jetzt bei mir ausschaut? Ist doch oben, aber unsere Beiträge haben sich wohl wieder einmal überschnitten.
Was diese Variable angeht: hab einfach keine Ahnung wie das $ Zeug funktioniert, ehrlich gesagt.
Ist eigentlich gar keine Hexerei!
Definition einer Variabel =>
let icon = Grafik.svg,
oder
let icon = Grafik.png
Du siehst, die Datei mit Dateiendung!
Es geht auch anders.
Einfach nur => let icon = Grafik
ohne Dateiendung!!
Nun soll die Grafik eingebunden werden.
url("${ProfilePath}/${Grafik}")
Ich gehe davon aus, dass die Variabel für den Dateipfad festgelegt wurde.
In diesem Fall würde eine Variabel aus dem ersten Beispiel passen.
url("${ProfilePath}/${Grafik}")png
Dies wäre dann für Fall zwei passen!
Genau so verhält es sich eben auch bei Werten!
Ist in der Deklaration schon eine Einheit angegeben, es ging hier um px,
muss sie nicht in den Code => size: ${size} !important;.
Ist sie nicht angegeben, dann eben doch! size: ${size}px !important;
Und weil ich Variablen mag und sie so manches viel einfacher machen,
benutze ich sie, wo ich nur kann,
auch in css nutze ich sie, aber da sieht es etwas anders aus!!
Dharkness Hättest Du mal beide Skripte zum Studieren für mich?
Möchte sehen, was Du anders gemacht hast, als ich es gemacht habe,
oder machen würde.
Ganz verstehe ich das nicht; da könnte ein Screenshot mit Anmerkungen helfen.
Guckst Du da ↓.
Danke!
Wie oben erwähnt, das kann man in dem Fall mit justify-content -> space-between lösen, s Anhang; es gibt halt so viele individuelle Anpassungsmöglichkeiten, da muss man im Einzelfall anpassen, oder ein Variablenmonster bauen, durch das dann auch keiner mehr durchsteigt; was wir in dieser Thread ja auch schon diskutiert hatten.
Hättest Du mal beide Skripte zum Studieren für mich?
Möchte sehen, was Du anders gemacht hast, als ich es gemacht habe,
oder machen würde.
Die sind beide aus diesem Faden, das eine von Dir das andere von Horstmann.
Ist eigentlich gar keine Hexerei!
Genau so verhält es sich eben auch bei Werten!
Ist in der Deklaration schon eine Einheit angegeben, es ging hier um px,
muss sie nicht in den Code => size: ${size} !important;.
Ist sie nicht angegeben, dann eben doch! size: ${size}px !important;Und weil ich Variablen mag und sie so manches viel einfacher machen,
benutze ich sie, wo ich nur kann,
auch in css nutze ich sie, aber da sieht es etwas anders aus!!
Ah, danke!
In CSS bin ich ja Variablenfanatiker, aber diese spezielle Art der Einbindung im JS muss ich mir erst noch anschauen.
Im nächsten Schritt könnten wir auch noch die Icons komplett herauslösen, dann kann man alles einzeln hin und herschieben und stylen; wichtig ist erstmal dass das neue Element (hoffentlich) zu klappen scheint.
Wobei du in deinem Code immer noch Strings (?) benutzt für die beiden Counter, in der Richtung werd ich wohl nicht basteln.
