Deins landet im Anpassen Fenster, und muss dann bewegt werden, was zu Kapieren bei mir etwas gedauert hat...
Ich zitiere:
Ich musste das Symbol erst einmal aus dem Anpassen-Fenster holen.
Hoppla. ![]()
Deins landet im Anpassen Fenster, und muss dann bewegt werden, was zu Kapieren bei mir etwas gedauert hat...
Ich zitiere:
Ich musste das Symbol erst einmal aus dem Anpassen-Fenster holen.
Hoppla. ![]()
Nein, hier brauchst du das nicht. Es soll ja lediglich eine Seite öffnen. Wie gesagt, bei mir funktioniert es und bei 2002Andreas auch. Wie kopierst du denn? Du solltest das immer mit der Schaltfläche oben rechts im Code-Kasten tun. Nicht einfach den Text mit der Maus kopieren. Dann kopierst du auch das Wort JavaScript und die Zeilennummern und machst das Skript dadurch unbrauchbar.
Das mit dem Kopieren schaffe ich schon. ![]()
Ich hab's aber trotzdem komplett vertrottelt - dein Script funktioniert perfekt - nur setzen alle meine anderen Scripte mit Buttons die Dinger automatisch in die Navbar, vermutlich mit defaultArea: CustomizableUI.AREA_NAVBAR.
Deins landet im Anpassen Fenster, und muss dann bewegt werden, was zu Kapieren bei mir etwas gedauert hat...
![]()
Fehlen da nicht ein paar Dinge in deinem Script?
Bei mir läuft das so nicht.
Mein Skript öffnet lediglich about:profiles und soll auch nicht mehr tun. Und es funktioniert bei mir. Deines macht auch nichts anderes.
Meins ist nicht meins, nur ein abgewandeltes about:addons Script von hier aus dem Forum, genau wie deines im Prinzip, und natürlich öffnet es nur about:profiles.
Was sollte es auch sonst machen, steht ja sonst nix drin?
Lesen kann ich ein Script immerhin. ![]()
Nur funktioniert deins eben bei mir überhaupt nicht als Script, wenn ich den Textinhalt rüberkopiere, im Gegensatz zu so ziemlichen allen anderen Scripten.
Braucht man da nicht irgendwas mit function etc. im Inhalt?
Wenn's bei dir klappt ist ja gut, bei mir brauchts den extra function usw. Code.
JavaScriptDie Sache ist nur, es ist völlig egal von welchem Profil ich diesen Button "verfolge", if (!profileData.isInUse) { let runButton = document.createElement("button"); document.l10n.setAttributes(runButton, "profiles-launch-profile"); runButton.onclick = function () { openProfile(profileData.profile); }; div.appendChild(runButton); }Es wird immer auf diese Zeilen verwiesen.
Wie merkt die Anweisung, welche Profilinstanz geöffnet werden muss?
Ich glaube, es hängt mit diesem div zusammen.
Ich werf's nur mal blind in den Raum; in userContent.css kann der Button für ein bestimmtes Profil so angesprochen werden.
Ob das hier relevant ist - leider keine Ahnung. ![]()
Mal schauen, ob ich daraus noch etwas anderes machen kann.
Denn ich würde ja gerne direkt das Testprofil parallel starten können.
Hmm, wäre schon nett für ein bestimmtes Profil einen direkten Öffnerbutton zu haben; ich habe auch ein Profil das ich dauernd zum Testen benutze.
Es gibt das hier in Fx, aber weiter bin ich nicht gekommen.
Laut den Werkzeugen ist das event für die Profil zusätzlich ausführen Button:
Probiere das mal, das ist das abgewandelte about:config-Skript:
JavaScript Alles anzeigen// about:profiles // Unicode変換前 → tooltiptext: 'About:Profiles anzeigen', CustomizableUI.createWidget({ id: 'aboutprofiles-button', type: 'custom', onBuild: function(aDocument) { let toolbaritem = aDocument.createXULElement('toolbarbutton'); let props = { id: 'aboutprofiles-button', class: 'toolbarbutton-1 chromeclass-toolbar-additional', label: 'About:Profiles', tooltiptext: 'About:Profiles öffnen', style: 'list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABOVJREFUeNrElm1MW1UYx597b2/pgMh4aSkMeakNMBacU7MYcLwkZnMB3fiwGL/MRaPGxLghTmY3dUzajJh9UKNBWTAxIQMW4Is6/TA2YRCziXFKKbFlvPYNyltb+jJ6e33O3W0sCzCBu3iTJ5yW0/P7P+c8z/8eiud5oCgKJHzos+f0NTRNn+A4Ll2pVILT6QSCCHNcpz8Q+ODCpw1mnMeTyZTEAth6Q8NEujpNXVq+D5QpKRBZPxgMgtk8Ale7r4HVOpnf+NWXfxMRMgkzJ/DJvNzc1JKSZ+H2n4PQ1/cr4E4IoUpVQeGuAsjISIemi83DOF+BEZRKAP3+Kd2r6Wo1wouh+3oPcKEQsCwLbrebZAxDpiG41t1NNh0Yhia/iZVSQExcXHxdaXkJZm4U4DTNIIiBxcVFOHf244M4Zzlq/nxkIJUABZ51qipFKWw7AdM0BTKZDMTyGo2GimKWpBTAkmJzezxAiKToiAi5nI3OeHrVs5OqAokAGYMZ4/geXCbUAMD6HSaZAC501z46egdU2PcsK0MRGDIG+HB43d9JdQTc0pLPAhSdlp2dBWaLRTh/GRZiZlYm1JysdZJWFIwHj4eMzxvqY/DjXSkEMPW6U988V/HivrxcLfyB/U+OQ6FQCCI0Gg0U7NwpfGZZBuw2B3R0dd0R23BLAlhV3ZUpmudUIS0FTz1eADdvG8Hv92H4QRETA0nbtwtihAJFPzAND4PJZEI/uFoTWWSzVszmGH4e11eVpfVOeeHmuB0eXbbDu9owTDhd0NvXb01ISEhCs98WFxsLHtId+Ljdi/1NXzfW4nAcw0l2YDMC2CzDT2P1h0rTf3cGwOYNwHKYhoGRUahgLBA2Xp9pbLr4MqkLUuSpanW80+EgPR/CWBTBcwROmmcjAqiUtxs1yuw8i+75Z2DA6QebJwChMA/LPAUBFGEy/QZTH1UW49wpDL/YZZT45iOCguL3oY12AZX01heP5eQXmvUvFMEPlvl/4bgsh8sveOYgSMmJ4Vgx7FHWGxGwaR+gkt78PEdT8KT5k8oi+N5M4P4oOAUu9xxYJ8yumQ/3HxC3Odr3+a34AJ1c23p0b37ut++U74EfMXO7l8BhJXzS4rLVHT4kbv3SRgpqvRqgk0+2vFK+Z3fzifJd0DY4Bw4suBC/Em5zTIL1zMFi8YXjui/7Bz5r7QCd+F7L0bIndjcfR3irCOdWgc+3NxwR22rD8LUEyBJPd7W/UfJ0VUVhBmY+i/Dg6vC28y/5/vrl1mbhqwlgEnWd7dX7i6pKtCpoM86Ccy34Jf0Rn/HGrYihbNZOZSsy13Verj5QfJjALxP40urw4FC/HuEDIjz4oEr/LwIYpa6j6bWyvWvA8Ubhdd+DG28YXJf030kBj/aBbTFx8ccqC3fcB+eFv95AEOHjEBzs1YtwYjSBrcKjd0ChVSaC04cr45mjxwhGQ7adwMemzBCac/S4Wg0tONcm9npYiotERADt8HjxBgOCyRABK+Cz9h77hWPHcZ5DSnj0EfCzswtjI9MzoJDLcXUG3D4fjAuZ23sRXi26nEdKeLQTJuBYqz7d0UkpYjPxRi24Izc9ecX+2etn8H8T4s2WA4mfiAByfU3G2IHxiLgzyyKUFNxC9Cv0YQgQLhriPU0uvkLDYqX7H0bmK+7z/+fzjwADAKjckmpp+9qUAAAAAElFTkSuQmCC)', onclick: 'if (event.button == 0) { \ openTrustedLinkIn("about:profiles", "tab"); \ }; ' }; for (let p in props) toolbaritem.setAttribute(p, props[p]); return toolbaritem; } });Hinter dem Base64-Code verbirgt sich noch das about:config-Symbol, ein Schraubenschlüssel oder was das ist. Kannst du ja durch ein anderes Symbol ersetzen. Ich musste das Symbol erst einmal aus dem Anpassen-Fenster holen.
Fehlen da nicht ein paar Dinge in deinem Script?
Bei mir läuft das so nicht. ![]()
Sowas läuft :
// profile-button.uc.js
(function() {
if (!window.gBrowser) return;
try {
CustomizableUI.createWidget({
id: 'Profile_button',
type: 'custom',
defaultArea: CustomizableUI.AREA_NAVBAR,
onBuild: function(aDocument) {
let toolbaritem = aDocument.createXULElement('toolbarbutton');
var props = {
id: 'Profile_button',
class: 'toolbarbutton-1 chromeclass-toolbar-additional',
label: 'Profiles',
tooltiptext: 'about profiles',
style: 'list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABOVJREFUeNrElm1MW1UYx597b2/pgMh4aSkMeakNMBacU7MYcLwkZnMB3fiwGL/MRaPGxLghTmY3dUzajJh9UKNBWTAxIQMW4Is6/TA2YRCziXFKKbFlvPYNyltb+jJ6e33O3W0sCzCBu3iTJ5yW0/P7P+c8z/8eiud5oCgKJHzos+f0NTRNn+A4Ll2pVILT6QSCCHNcpz8Q+ODCpw1mnMeTyZTEAth6Q8NEujpNXVq+D5QpKRBZPxgMgtk8Ale7r4HVOpnf+NWXfxMRMgkzJ/DJvNzc1JKSZ+H2n4PQ1/cr4E4IoUpVQeGuAsjISIemi83DOF+BEZRKAP3+Kd2r6Wo1wouh+3oPcKEQsCwLbrebZAxDpiG41t1NNh0Yhia/iZVSQExcXHxdaXkJZm4U4DTNIIiBxcVFOHf244M4Zzlq/nxkIJUABZ51qipFKWw7AdM0BTKZDMTyGo2GimKWpBTAkmJzezxAiKToiAi5nI3OeHrVs5OqAokAGYMZ4/geXCbUAMD6HSaZAC501z46egdU2PcsK0MRGDIG+HB43d9JdQTc0pLPAhSdlp2dBWaLRTh/GRZiZlYm1JysdZJWFIwHj4eMzxvqY/DjXSkEMPW6U988V/HivrxcLfyB/U+OQ6FQCCI0Gg0U7NwpfGZZBuw2B3R0dd0R23BLAlhV3ZUpmudUIS0FTz1eADdvG8Hv92H4QRETA0nbtwtihAJFPzAND4PJZEI/uFoTWWSzVszmGH4e11eVpfVOeeHmuB0eXbbDu9owTDhd0NvXb01ISEhCs98WFxsLHtId+Ljdi/1NXzfW4nAcw0l2YDMC2CzDT2P1h0rTf3cGwOYNwHKYhoGRUahgLBA2Xp9pbLr4MqkLUuSpanW80+EgPR/CWBTBcwROmmcjAqiUtxs1yuw8i+75Z2DA6QebJwChMA/LPAUBFGEy/QZTH1UW49wpDL/YZZT45iOCguL3oY12AZX01heP5eQXmvUvFMEPlvl/4bgsh8sveOYgSMmJ4Vgx7FHWGxGwaR+gkt78PEdT8KT5k8oi+N5M4P4oOAUu9xxYJ8yumQ/3HxC3Odr3+a34AJ1c23p0b37ut++U74EfMXO7l8BhJXzS4rLVHT4kbv3SRgpqvRqgk0+2vFK+Z3fzifJd0DY4Bw4suBC/Em5zTIL1zMFi8YXjui/7Bz5r7QCd+F7L0bIndjcfR3irCOdWgc+3NxwR22rD8LUEyBJPd7W/UfJ0VUVhBmY+i/Dg6vC28y/5/vrl1mbhqwlgEnWd7dX7i6pKtCpoM86Ccy34Jf0Rn/HGrYihbNZOZSsy13Verj5QfJjALxP40urw4FC/HuEDIjz4oEr/LwIYpa6j6bWyvWvA8Ubhdd+DG28YXJf030kBj/aBbTFx8ccqC3fcB+eFv95AEOHjEBzs1YtwYjSBrcKjd0ChVSaC04cr45mjxwhGQ7adwMemzBCac/S4Wg0tONcm9npYiotERADt8HjxBgOCyRABK+Cz9h77hWPHcZ5DSnj0EfCzswtjI9MzoJDLcXUG3D4fjAuZ23sRXi26nEdKeLQTJuBYqz7d0UkpYjPxRi24Izc9ecX+2etn8H8T4s2WA4mfiAByfU3G2IHxiLgzyyKUFNxC9Cv0YQgQLhriPU0uvkLDYqX7H0bmK+7z/+fzjwADAKjckmpp+9qUAAAAAElFTkSuQmCC)',
onclick: 'if (event.button == 0) { \
openTrustedLinkIn("about:profiles", "tab");\
}; '
};
for (var p in props)
toolbaritem.setAttribute(p, props[p]);
return toolbaritem;
}
});
} catch(e) { };
})();
Alles anzeigen
Mitleser hat ja seine Lösung schon einmal hinbekommen, vielleicht hat er selber eine Idee.
Ne ne, hat er nicht, das ist nur eine erstellte Grafik zur Veranschaulichung, wie er es sich vorstellt.
Sicher?
Der von ihm gepostete Code funktioniert nämlich anscheinend ungefähr wie in seiner Darstellung - du hast ihn doch bestimmt probiert? ![]()
Und irgendwo kommt der Code ja her, mit den ganzen Ausnahmen.
Alles anzeigen...
Den Text zu verstecken bei diesen Vorgaben geht mit seinem Code if (menuCount == 0) {menuCount ='\xa0';}; und if (menuitemCount == 0) {menuitemCount ='\xa0';};, zugefügt zu meinem.
Dann müsste müsste er "nur" noch das Icon wegbekommen.
Wenn es das ' 🗁 ' aus seinem Code ist, sollte das auch so einfach gehen.
Ich weiß nur gerade nicht, an welcher Stelle es eingefügt werden muss.
Wenn es aber durch eine Grafik ersetzt werden soll, geht es nur über das Script, und da bin ich definitiv überfordert.
Ich vermute, eben diese Grafik mit einem eigenen Icon zu ersetzen ist der Punkt.
Den Code mit dem 🗁 habe ich gar nicht benutzt, nur den erwähnten Teil, diese 2 Zeilen, und da wo sie auch in seinem Code stehen - nur eben eingefügt in meinem Script.
Also braucht es eigentlich nur
noch Code, der bei menuCount/menuitemCount gleich 0 oder kleiner 1 das Folder Icon versteckt/mit Leerzeichen ersetzt, das in meinem Code ja als eigenes Bild eingefügt ist, nicht als Systememoji oder was das ist.
Aber wie auch immer, da bin ich auch nicht der Ansprechpartner für.
Mitleser hat ja seine Lösung schon einmal hinbekommen, vielleicht hat er selber eine Idee.
Nicht so ganz
Die Herausforderung besteht darin, dass wenn 0 "Unterordner" vorhanden sind, eben diese auch nicht angezeigt werden.
Ebenso bei "Links".
Ahh, verstehe; das kann ich auch nicht...
Den Text zu verstecken bei diesen Vorgaben geht mit seinem Code if (menuCount == 0) {menuCount ='\xa0';}; und if (menuitemCount == 0) {menuitemCount ='\xa0';};, zugefügt zu meinem.
Dann müsste müsste er "nur" noch das Icon wegbekommen. ![]()
Dachte bloß: Bei soviel "action" in Bezug zu diesem Script könntet ihr was machen.
Aber leider ist dem nicht so!
Soso, Herausforderungs-Taktiken benutzen wir! ![]()
Hat geklappt, probier mal das hier; eine vereinfachte Version mit nur einem Icon, so eingerichtet wie in deinem Screenshot.
Farben, Abstände etc. sind wie beschrieben einstellbar, dein Icon ebenfalls wie beschrieben einbauen.
Das Ganze ginge auch mit dem Script von Mira, mit ein paar Änderungen, oder auch ohne Strings um keinen zusätzlichen Font nutzen zu müssen.
Aber das ist vermutliche die einfachste Lösung für saubere Ausrichtung.
// JavaScript Document
// BookmarkCount_Mod.uc.js - modified for element separation
// Author BrokenHeart
// Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229536#post1229536
// Endor Repository Link Source https://github.com/Endor8/userChrome.js/blob/master/Firefox%20115/BookmarkCount.uc.js
// Modified by Mira_Belle / Horstmann / Forum members
// Single Icon Version
(function() {
if (!window.gBrowser) return;
setTimeout(function() {
setFunction();
},50);
//Custom icon1 in profile/chrome/icons folder
//Option to use Firefox icon
let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
let icon1 = "YourFolderIcon.png" // your custom icon
let icon2 = "chrome://global/skin/icons/folder.svg" // folder icon by Firefox
function setFunction() {
const css =`
/*** Fonts ***/
:root {
--counter_fonts: "Droid Sans Mono", "SF Mono", "Andale Mono", Consolas, "Lucida Console", "Courier New", monospace;
/*--counter_fontsize: 11px;*/ /* un-comment to change font size / weight */
/*--counter_fontweight: 800;*/
}
/* Fix container content vertical centering for FCB */
hbox.menu-accel-container.countClass1 {
align-items: center !important;
}
/*** Counters ***/
/* Counter Folder */
.countClass::before {
content: attr(data-value1) !important;
font-family: var(--counter_fonts) !important;
font-size: var(--counter_fontsize) !important;
font-weight: var(--counter_fontweight) !important;
/*color: red !important;*/ /* text1 color */
margin-left: 16px !important; /* minimum distance left narrow windows */
}
/* Icon */
.countClass label {
content: "";
background-image: url(${profilePath}/${icon1}); /* custom icon */
/*background-image: url(${icon2});*/ /* Firefox folder icon */
background-repeat: no-repeat;
background-size: 16px; /* icon size 16px max */
background-position: center;
margin-left: 4px !important; /* distance counter1 -> icon */
margin-right: 4px !important; /* distance icon -> counter2 */
height: 16px;
width: 16px;
/*fill: red;*/ /* .svg icon color / opacity if applicable */
/*stroke: green;*/
fill-opacity: 1;
}
/* Counter 2 */
.countClass::after {
content: attr(data-value2) !important;
font-family: var(--counter_fonts) !important;
font-size: var(--counter_fontsize) !important;
font-weight: var(--counter_fontweight) !important;
/*color: red !important;*/ /* text2 color */
margin-right: 4px !important; /* distance to arrow */
}
/* Some fonts not centered Fix, optional, experimental */
/*
.countClass1::after, .countClass2::after {
height: var(--counter_fontsize) !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[3];
label.classList.add('countClass');
// First counter, 2 digits // Numbers aligned right // use padEnd for left
let strCountOut1 = String(menuCount).padStart(2, '\xa0'); // 2 digits
label.setAttribute('data-value1', strCountOut1);
// Second counter, 2/3 digits // Numbers aligned right // use padEnd for left
let strCountOut2 = String(menuitemCount).padStart(2, '\xa0'); // 2 digits
//let strCountOut2 = String(menuitemCount).padStart(3, '\xa0'); // 3 digits
label.setAttribute('data-value2', strCountOut2);
}, 100);
}
}
})();
Alles anzeigen
Alles anzeigenHabe fertig.
Und so könnte es mit Variablen in Javascript aussehen.
Aber gewonnen hätte man da auch nicht wirklich was
Einzig und alleine, dass es nur ganz am Anfang einen Bereich gäbe,
wo Änderungen vorgenommen werden müssten.
Also nur ein klitzekleiner Vorteil.
Sehr fein, so übersichtlich, dankeschön. ![]()
Der obere Teil vom Script hat ein paar zusätzliche/doppelte Abschnitte die nicht ganz funktionieren, hab ich aber mit tapferem Löschen hinbekommen. ![]()
Wird einen Moment dauern bis ich das alles verdaut habe, hatte aber auch schon in die Richtung gearbeitetm was die zentralen Anpassungen angeht; nur mir CSS, und etwas wilder.
Test:
// JavaScript Document
// BookmarkCount_Mod.uc.js - modified for element separation #7x TEST
// Author BrokenHeart
// Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229536#post1229536
// Endor Repository Link Source https://github.com/Endor8/userChrome.js/blob/master/Firefox%20115/BookmarkCount.uc.js
// Modified by Mira_Belle / Horstmann / Forum members
(function() {
if (!window.gBrowser) return;
setTimeout(function() {
setFunction();
},50);
//Custom icons in profile/chrome/icons folder
//Option to use Firefox icons at bottom of CSS section
let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
let icon1 = "YourFolderIcon.png"
let icon2 = "YourLinkIcon.svg"
function setFunction() {
const css =`
/*///// FCE = First counter element / SCE = Second counter element /////*/
/*///// CSA = Center space adjustment /////*/
/*//////// Adjustments ////////*/
:root {
/*** CSA = Center space adjustment / left - right margin ***/
/* distance counter1 <-> divider <-> SCE ???? */
--center_base_margin: 6px;
--fine_tune_margin: 1px; /* adjust left margin for font/letter width */
--center_inline_margin:
calc(var(--center_base_margin) + var(--icon_reduce_size)/2 - var(--fine_tune_margin))
var(--center_base_margin);
/** Divider / optional **/
--divider_width: 1px; /* divider width, 0px to hide divider */
--divider_height: 12px; /* divider height max 16px */
--divider_color: red; /* divider color, default currentColor ? */
/** Basic margin **/
--basic_distance: 4px; /* Base distance between all elements */
/** Icon - adjust CSA after changes **/
--icon_size: calc(16px - var(--icon_reduce_size)); /* icon size, default 16px */
--icon_reduce_size: 2px; /* icon smaller by amount */
/** Fonts **/
/*--counter_fontsize: 11px;*/ /* font size, un-comment to change default */
/*--counter_fontweight: 800;*/ /* font weight, un-comment to change default */
--counter_fonts: "Droid Sans Mono", "Andale Mono", monospace;
}
/*///// Icons /////*/
/*// Use custom icons //*/
:root {
--icon_image_1: url(${profilePath}/${icon1});
--icon_image_2: url(${profilePath}/${icon2});
}
/*// No custom icons? No problem! / un-comment to use Firefox icons //*/
/*:root {
--icon_image_1: url("chrome://global/skin/icons/folder.svg") ;
--icon_image_2: url("chrome://browser/skin/bookmark-hollow.svg");
}*/
/* Fix container content vertical centering for FCE */
hbox.menu-accel-container.countClass1 {
align-items: center !important;
}
/*///////// FCE / Folder counter element /////////*/
/* FCE minimum distance to left for narrow windows */
hbox.menu-accel-container.countClass1 {
margin-left: 16px !important;
}
.countClass1 label {
height: var(--divider_height) !important;
width: var(--divider_width) !important;
background-color: var(--divider_color) !important;
order: 1;
margin-inline: var(--center_inline_margin) !important;
}
/* Icon 1 */
.countClass1::before {
content: "";
background-image: var(--icon_image_1); /* icon1 */
background-repeat: no-repeat;
background-size: var(--icon_size); /* icon1 size */
background-position: center;
margin-right: calc(var(--basic_distance) - var(--icon_reduce_size)/2) !important;
height: 16px;
width: 16px;
/*fill: green;*/ /* .svg icon color / opacity if applicable */
fill-opacity: 1;
}
/* Counter 1 */
.countClass1::after {
content: attr(data-value1) !important;
font-family: var(--counter_fonts) !important;
font-size: var(--counter_fontsize) !important;
font-weight: var(--counter_fontweight) !important;
/*color: red !important;*/ /* text1 color */
}
/*///////// SCE / Items/links counter element /////////*/
/* Icon 2 */
.countClass2::before {
content: "";
background-image: var(--icon_image_2); /* icon2 */
background-repeat: no-repeat;
background-size: var(--icon_size); /* icon2 size */
background-position: center;
margin-right: calc(var(--basic_distance) - var(--icon_reduce_size)/2) !important;
height: 16px;
width: 16px;
/*fill: red;*/ /* .svg icon color / opacity if applicable */
fill-opacity: 1;
}
/* Counter 2 */
.countClass2::after {
content: attr(data-value2);
font-family: var(--counter_fonts) !important;
font-size: var(--counter_fontsize) !important;
font-weight: var(--counter_fontweight) !important;
/*color: red !important;*/ /* text2 color */
}
/* Arrow right */
/* Move arrow to the right, margins */
.countClass2 image {
order: 1;
margin-left: var(--basic_distance) !important; /* distance Counter2 <-- arrow */
margin-right: 0px !important; /* distance arrow --> box border */
}
/*/// Testing stuff ///*/
/* Outline only for testing */
/*
menu.menu-iconic.bookmark-item {
outline: 1px solid orange !important;
outline-offset: -8px !important;
}
*/
/* Background/ outline only for testing */
/*
.countClass1::after, .countClass2::after {
outline: 1px solid green !important;
outline-offset: -1px !important;
background-color: gainsboro;
}
*/
/*
.countClass1, .countClass2 {
outline: 1px solid green !important;
outline-offset: -1px !important;
background-color: gainsboro;
}
*/
/* Some fonts not centered Fix, optional, experimental */
/*
.countClass1::after, .countClass2::after {
height: var(--counter_fontsize) !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;
// FCE First counter, 2 digits // Numbers aligned right // use padEnd for left
let label1 = item.childNodes[3];
label1.classList.add('countClass1');
//let strCountOut1 = String(menuCount).padStart(2, '\xa0'); // Keine Klammern // No Brackets
let strCountOut1 = String("[" + menuCount + "]").padStart(4, '\xa0'); // Klammern // Brackets
label1.setAttribute('data-value1', strCountOut1);
// SCE Second counter, 3 digits // Numbers aligned right // use padEnd for left
let label2 = item.childNodes[4];
label2.classList.add('countClass2');
//let strCountOut2 = String(menuitemCount).padStart(3, '\xa0'); // Keine Klammern // No Brackets
let strCountOut2 = String("[" + menuitemCount + "]").padStart(5, '\xa0'); // Klammern // Brackets
label2.setAttribute('data-value2', strCountOut2);
}, 100);
}
}
})();
Alles anzeigen
Alles anzeigenDanke für die Rückmeldung!
...--> Der Trennstrich: Zeile 60, Wert auf > 0px setzen.
Ach Du heilige Sch....!
Was hast Du denn da gemacht?
Also so einen Trennstrich hättest Du auch viel einfacher da reinbringen können,
zumal der Code das ja auch schon hergibt.
Aber schon irgendwie geil.
und dann im CSS => margin-right: ${cs_basic_distance)px !important;
Aber es geht ja auch so, wie Du die Variablen umgesetzt hast.
Mit Javascript kenn ich mich aber nicht aus, mit CSS wenigstens ein bisschen. ![]()
Wenn du das Ganze mit JS umsetzen würdest, inklusive aller von den Variablen abgeleiteten Einstellungen, das stell ich mir massiv komplex vor in der Bedienung.
Hast du das mal komplett durchexerziert, mit allen möglichen Anpassungen? ![]()
Der Trennstrich - der ist hier ein frei verschiebbares Element, in Position und Grösse anpassbar - ist das schon im Code gewesen?
Vielleicht hab ich's übersehen; es gibt auch bestimmt noch andere Wege das zu lösen, und meiner mag auch nicht perfekt funktionieren. ![]()
Denn der CSS-Code wird, so empfinde ich es, doch recht aufgebläht und unübersichtlich.
----------------------------------------------------------------------------------------------------------------------------------------------------
Bin ich blind oder was?
An welcher Stelle wird denn bei Dir der Trennstrich | eingefügt?
Danke für die Rückmeldung! ![]()
Ich weiss, muss man mögen mit den Variablen, und eine Sorge ist bei mir immer ob sie die Leistung beeinträchtigen mit der zusätzlichen Kalkulation. ![]()
Die Idee dahinter ist aber eigentlich, durch mehr Code die Einstellungen zu vereinfachen, indem man wiederholt benutzte Parameter zentral an einer Stelle regelt.
Und man kann immer noch manuell rangehen und die Variablen gezielt mit Festwerten ersetzen.
Ab du solltest den Code sehen den ich selber benutze, da ist das noch Fingerfarben dagegen. ![]()
--> Der Trennstrich: Zeile 60, Wert auf > 0px setzen.
Hat sich erledigt; ich habe einfach eine manuell aktivierbare CSS Option eingebaut, bei Interesse s. hier.
So, wer das mal probieren möchte, meine eigene Finalversion.
Hat ein paar automatisierte Einstellungen und Variationen, eine Option zur Nutzung von Firefox-eigenen Icons, und eine optionale Trennlinie zwischen den Blöcken.
Ich hoffe das macht alles halbwegs Sinn... ![]()
// JavaScript Document
// BookmarkCount_Mod.uc.js - modified for element separation #7c Horst edition
// Author BrokenHeart
// Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229536#post1229536
// Endor Repository Link Source https://github.com/Endor8/userChrome.js/blob/master/Firefox%20115/BookmarkCount.uc.js
// Modified by Mira_Belle / Horstmann / Forum members
(function() {
if (!window.gBrowser) return;
setTimeout(function() {
setFunction();
},50);
//Custom icons in profile/chrome/icons folder
//Option to use Firefox icons at bottom of CSS section
let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
let icon1 = "YourFolderIcon.png"
let icon2 = "YourLinkIcon.svg"
function setFunction() {
const css =`
/*** Basics ***/
/* Basic margins / Font Size / font weight counter , disable to use default / Fonts list monospace */
:root {
--basic_distance: 4px; /* Base distance between all elements */
/*--counter_fontsize: 11px;*/
/*--counter_fontweight: 800;*/
--counter_fonts: "Droid Sans Mono", "SF Mono", "Andale Mono", Consolas, "Lucida Console", "Courier New", monospace;
}
/* Fix container content vertical centering for FCB */
hbox.menu-accel-container.countClass1 {
align-items: center !important;
}
/*** FCB = First counter element / SCB = Second counter element ***/
/** #1 FCB / Folder counter element **/
/* FCB minimum distance to left for narrow windows */
hbox.menu-accel-container.countClass1 {
margin-left: 16px !important;
}
/* FCB distance to SCB, label as optional divider */
:root {
--divider_inline_margin: 6px 6px; /* distance counter1 - divider - SCB */
--divider_width: 0px; /* 0px for no divider */
}
.countClass1 label {
height: 12px !important; /* divider height max 16 */
width: var(--divider_width) !important;
background-color: currentColor !important; /* divider color */
order: 1;
margin-inline: var(--divider_inline_margin) !important;
}
/* Icon 1 */
.countClass1::before {
content: "";
background-image: url(${profilePath}/${icon1}); /* custom icon */
background-repeat: no-repeat;
background-size: 16px; /* icon1 size */
background-position: center;
margin-right: var(--basic_distance) !important; /* distance icon1 -> counter1 */
height: 16px;
width: 16px;
/*fill: #c0c0c0;*/ /* .svg icon color / opacity if applicable */
fill-opacity: 1;
}
/* Counter 1 */
.countClass1::after {
content: attr(data-value1) !important;
font-family: var(--counter_fonts) !important;
font-size: var(--counter_fontsize) !important;
font-weight: var(--counter_fontweight) !important;
/*color: red !important;*/ /* text1 color */
}
/** #2 SCB / Items/links counter element **/
/* Icon 2 */
.countClass2::before {
content: "";
background-image: url(${profilePath}/${icon2}); /* custom icon */
background-repeat: no-repeat;
background-size: 16px; /* icon2 size */
background-position: center;
margin-right: var(--basic_distance) !important; /* distance icon2 -> counter2 */
height: 16px;
width: 16px;
/*fill: #c0c0c0;*/ /* .svg icon color / opacity if applicable */
fill-opacity: 1;
}
/* Counter 2 */
.countClass2::after {
content: attr(data-value2);
font-family: var(--counter_fonts) !important;
font-size: var(--counter_fontsize) !important;
font-weight: var(--counter_fontweight) !important;
/*color: red !important;*/ /* text2 color */
}
/* Arrow right */
/* Move arrow to the right, margins */
.countClass2 image {
order: 1;
margin-left: var(--basic_distance) !important; /* distance Counter2 <-- arrow */
margin-right: 0px !important; /* distance arrow --> box border */
}
/*** Extra stuff ***/
/** No custom icons? No problem! / un-comment to use Firefox icons **/
/*
.countClass1::before {
background-image: url("chrome://global/skin/icons/folder.svg");
}
.countClass2::before {
background-image: url("chrome://browser/skin/bookmark-hollow.svg");
}
*/
/** Testing stuff **/
/* Outline only for testing */
/*
menu.menu-iconic.bookmark-item {
outline: 1px solid orange !important;
outline-offset: -8px !important;
}
*/
/* Background/ outline only for testing */
/*
.countClass1::after, .countClass2::after {
outline: 1px solid green !important;
outline-offset: -1px !important;
background-color: gainsboro;
}
*/
/*
.countClass1, .countClass2 {
outline: 1px solid green !important;
outline-offset: -1px !important;
background-color: gainsboro;
}
*/
/* Some fonts not centered Fix, optional, experimental */
/*
.countClass1::after, .countClass2::after {
height: var(--counter_fontsize) !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;
// FCB First counter, 2 digits // Numbers aligned right // use padEnd for left
let label1 = item.childNodes[3];
label1.classList.add('countClass1');
//let strCountOut1 = String(menuCount).padStart(2, '\xa0'); // Keine Klammern // No Brackets
let strCountOut1 = String("[" + menuCount + "]").padStart(4, '\xa0'); // Klammern // Brackets
label1.setAttribute('data-value1', strCountOut1);
// SCB Second counter, 3 digits // Numbers aligned right // use padEnd for left
let label2 = item.childNodes[4];
label2.classList.add('countClass2');
//let strCountOut2 = String(menuitemCount).padStart(3, '\xa0'); // Keine Klammern // No Brackets
let strCountOut2 = String("[" + menuitemCount + "]").padStart(5, '\xa0'); // Klammern // Brackets
label2.setAttribute('data-value2', strCountOut2);
}, 100);
}
}
})();
Alles anzeigen
Deine Code bewirkt das. Siehe Bilder.
Menü Chronik. Gut. ------------------ Menü Lesezeichen. Gut. ----------------- Lesezeichen-Symbolleiste. Nicht gut.
Wirkt nicht überall das Gleiche. Leider.
Dann könnte es gut sein, dass du schon CSS Code benutzt, der die Separatoren in verschiedenen Bereichen verschieden modifiziert.
Genauer gesagt, alles was als dünne rote Linie auftaucht - mit dem Code von Mira - ist von dir geändert worden, das mit der nach aussen versetzten Umrandung ist normal.
Die Separatoren haben normalerweise Padding, und die Outlines/Borders sitzen am Rand des Ganzen.
Also solltest du die Codes für alle Separatoren raussuchen und nach padding/margin/height etc. schauen.
Für nur die Farbe von nur der Linie könnte sowas funktionieren, falls nicht wieder was querschiesst:
Der auskommentierte Teil für background-color sollte die tatsächliche Grösse illustrieren können.
Oder sowas: