Nichts für ungut, aber ganz sicher steckt in irgendeinem CSS der Code, der verhindert, dass das Menü breiter dargestellt wird!
Wie sehen denn die anderen Menüs aus der Menüleiste aus?
Sind die auch FIX?
Wenn Du magst, kannst Du auch mal testweise ein anderes Skript ausprobieren,
dann siehst Du, ob das Menü da auch in der Breite beschränkt wird.
Hier, nur zum Testen!!
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=1270254#post1270254 **** */
/* Bugfixes for 'popupshowing' to 'popupshown'inspired by BrokenHeart & Horstmann ************************************ */
/* Source => https://www.camp-firefox.de/forum/thema/136572/?postID=1274881#post1274881 **** *
/* ******************************************************************************************************************* */
/* Version 1.04a => https://www.camp-firefox.de/forum/thema/136572/?postID=1274881#post1274881 **** */
/* Version 1.05 => https://www.camp-firefox.de/forum/thema/136572/?postID=1291576#post1291576 **** */
/* ******************************************************************************************************************* */
/* Custom Counter in the Bookmarks for folders and links ************************************************************* */
/* ******************************************************************************************************************* */
'use strict';
(function() {
if (!window.gBrowser) return;
setTimeout(function() { setFunction(); }, 10);
let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
// ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
//Custom icons in profile/chrome/icons folder
let icon1 = "folder-fat.svg"; // Custom Folder Icon
let icon2 = "bookmark-hollow.svg"; // Custom Link Icon
let icon3 = "arrow-right.svg"; // Custom Arrow Icon
// Custom settings
let bm_font_size = 12;
let cs_font_weight = 700;
let bm_icon_size = 16;
// NEU: Schriftfarben 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: Symbolfarben 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
// NEU: Farbe für die Zahlenwerte und Symbole beim Hovern.
let cs_font_hovercolor_1 = "#FFD700"; // Farbe für Folder-Zähler (links)
let cs_font_hovercolor_2 = "#FFD700"; // Farbe für Link-Zähler (rechts) "#80ffff";
let cs_icon_hovercolor_1 = "#C0C0C0"; // Farbe für "Ordner", 1.Symbol "#ff0000";
let cs_icon_hovercolor_2 = "#C0C0C0"; // Farbe für "Link", 2.Symbol "#00ff00";
let cs_icon_hovercolor_3 = "#ffff80"; // 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 = true; // <- HIER Weiche setzen: true = Variante 1, false = Variante 2
let useStyle = 1; // <- HIER Weiche setzen: 0 = Symbole hinter den Zählern, 1 = Symbole vor den Zählern
// ■■ END UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
// Symbole vor den Zählern
let css_one = `
#bmContent::before {
content: attr(data-value1) !important;
width: ${cs_width_one} !important;
align-items: center !important;
display: flex !important;
justify-content: end !important;
margin-left: 16px !important;
margin-right: -1px !important;
background-image: url("${ProfilePath}/${icon1}")!important;
background-position: center right calc(${cs_width_one} - ${cs_icon_size}) !important;
background-repeat: no-repeat !important;
background-size: ${cs_icon_size} ${cs_icon_size} !important;
color: ${cs_font_color_1} !important;
fill: ${cs_icon_color_1} !important;
}
#bmContent::after {
content: attr(data-value2) !important;
width: ${cs_width_two} !important;
align-items: center !important;
display: flex !important;
justify-content: end !important;
margin-left: 4px !important;
margin-right: -1px !important;
background-image: url("${ProfilePath}/${icon2}") !important;
background-position: center right calc(${cs_width_two} - ${cs_icon_size}) !important;
background-repeat: no-repeat !important;
background-size: ${cs_icon_size} ${cs_icon_size} !important;
color: ${cs_font_color_2} !important;
fill: ${cs_icon_color_2} !important;
}
`;
// Symbole hinter den Zählern
let css_two = `
#bmContent::before {
content: attr(data-value1) !important;
width: ${cs_width_one} !important;
align-items: center !important;
display: flex !important;
justify-content: end !important;
background-image: url("${ProfilePath}/${icon1}")!important;
background-position: center right calc(${cs_width_uno} - ${cs_icon_size}) !important;
background-repeat: no-repeat !important;
background-size: ${cs_icon_size} ${cs_icon_size} !important;
color: ${cs_font_color_1} !important;
fill: ${cs_icon_color_1} !important;
padding: 2px 20px 0px 10px !important;
margin-left: 16px !important;
margin-right: 12px !important;
}
#bmContent::after {
content: attr(data-value2) !important;
width: ${cs_width_two} !important;
align-items: center !important;
display: flex !important;
justify-content: end !important;
background-image: url("${ProfilePath}/${icon2}")!important;
background-position: center right calc(${cs_width_due} - ${cs_icon_size}) !important;
background-repeat: no-repeat !important;
background-size: ${cs_icon_size} ${cs_icon_size} !important;
color: ${cs_font_color_2} !important;
fill: ${cs_icon_color_2} !important;
padding: 2px 22px 0 0 !important;
margin-left: -14px !important;
margin-right: -1px !important;
}
`;
function setFunction() {
const css =`
/* Fix für Firefox Nightly - Label als Flex-Container */
#bookmarksMenuPopup > menu > label,
#bookmarksMenuPopup > menu > menupopup > menu > label,
#bookmarksMenuPopup > menu > menupopup > menu > menupopup > menu > label,
#PlacesToolbarItems > .bookmark-item > menupopup > menu > label {
display: flex !important;
justify-content: space-between !important;
}
/* Counter Container */
#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} !important;
}
/* Dynamisch gewählter Counter-Stil */
${useStyle ? css_one : css_two}
/* Pfeil */
menupopup > menu::after {
content: "" !important;
background-image: url("${ProfilePath}/${icon3}")!important;
height: ${cs_icon_size} !important;
fill: ${cs_icon_color_3} !important;
margin-inline: 0 !important;
}
/* Farbe für die Zahlenwerte und Symbole beim Hovern. */
menupopup[placespopup="true"] > menu.bookmark-item:hover > .menu-text > #bmContent::before {
color: ${cs_font_hovercolor_1} !important;
fill: ${cs_icon_hovercolor_1} !important;
}
menupopup[placespopup="true"] > menu.bookmark-item:hover > .menu-text > #bmContent::after {
color: ${cs_font_hovercolor_2} !important;
fill: ${cs_icon_hovercolor_2} !important;
}
/* Farbe für den Pfeil beim Hovern. */
menupopup > menu:hover::after {
fill: ${cs_icon_hovercolor_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) {
let bmbMenuPopup = document.getElementById('BMB_bookmarksPopup');
if(bmbMenuPopup) {
bmbMenuPopup.openPopup();
bmbMenuPopup.hidePopup();
bmbMenuPopup.setAttribute("hasbeenopened","true");
}
bmbMenu.addEventListener('popupshowing', onPopupShowing);
}
if(bookMenu) {
let bookMenuPopup = document.getElementById('bookmarksMenuPopup');
if(bookMenuPopup) {
bookMenuPopup.openPopup();
bookMenuPopup.hidePopup();
bookMenuPopup.setAttribute("hasbeenopened","true");
}
bookMenu.addEventListener('popupshowing', onPopupShowing);
}
if(persToolBar) {
persToolBar.addEventListener('popupshown', 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);
let strCountOut2 = (useStyle === 0)
? String(menuitemCount).padStart(4, "/ ") // (5, " | ")
: String(menuitemCount).padEnd(2, " "); //1 rechtsbündig / 2 linksbündig
bmContent.setAttribute('data-value2', strCountOut2);
}, 100);
}
}
})();
Stimmt.