So. ![]()
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 **** */
/* ******************************************************************************************************************* */
/* 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 **** */
/* ******************************************************************************************************************* */
/* Custom Counter in the Bookmarks for folders and links ************************************************************* */
/* ******************************************************************************************************************* */
/* rechtsbündig => https://www.camp-firefox.de/forum/thema/136572/?postID=1230360#post1230360 **** */
(function() {
if (!window.gBrowser) return;
setTimeout(function() {
setFunction();
},50);
let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
let icon1 = "folder_org.svg"
let icon2 = "bookmark-hollow.svg"
function setFunction() {
const css =`
.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: #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: #FFD700 !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: 0px !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: #c0c0c0;
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: #FFD700 !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: 6px !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 = String(menuCount).padStart(2, '\xa0');
label1.setAttribute('data-value1', strCountOut1);
let label2 = item.childNodes[4];
label2.classList.add('countClass2');
let strCountOut2 = String(menuitemCount).padStart(3, '\xa0');
label2.setAttribute('data-value2', strCountOut2);
}, 100);
}
}
})();
Alles anzeigen
...Alles anzeigenNoch eine Anmerkung.
Ich habe nun auch mit so einigen Fonts unter Windows 10 herumexperimentiert,
habe dabei auch festgestellt, dass so mancher Font quasi hochgestellt wird.
Darum, bzw., welcher Wert es genau ist um den Font dann mittig zu bekommen,
kümmere ich mich noch.
Eventuell weiß es ja auch schon jemand, ich brauch’ aber jetzt erst einmal 'ne Pause.
Habe mich damit ein wenig beschäftigt und habe festgestellt, dass es prinzipiell an den Fonts liegt.
Leider habe ich keine befriedigte Lösung gefunden, die allgemein greift,
so bleibt als einfachste Lösung nur
padding-bottom für zu tief gestellte Ziffern
oder
padding-top für zu hoch gestellte Ziffern zu nutzen,
um diese Auszurichten.
