Hier der Block, der sich geändert hat. Geht im Test-Skript von Zeile 30 bis Zeile 50. Alles andere braucht nicht angepasst werden:
Läuft hier nach erstem Testen tip-top, gefühlt etwas sauberer als meine Version! 
Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen
-
grisu2099 -
1. Juli 2023 um 18:13 -
Erledigt
-
-
Den einzigen Unterschied zwischen #1 und #2 sehe ich nur bei einem nachträglichen "Refresh" der unteren Zähler in #2, der ist bei #1 nicht vorhanden und daher sieht es hier etwas besser aus.
Also dieser "Refresh", das Problem habe ich schon länger in meinen Script Versionen, quer durch alle Popups.
Die Zähler werden teils, aber nicht alle, "refreshed" beim erneuten Öffnen des gleichen Popups.
Mit deinem Script gibt es das Problem nicht.
Ich hab mir schon den Wolf gesucht und ewig dagegen angetestet, aber ich befürchte dass mein Code etwas zu grob aufgebaut ist um die ganzen Vorgänge sauber auszuführen.Ohne aufwendige Tests von dir zu erwarten, fällt dir evtl. auf die Schnelle etwas auf in meinem Code, das dahingehend optimiert werden könnte?
Aber das soll keine neue Baustelle werden, nur falls du oder sonst jemand einen schnellen Tip hätte!
Ich hänge das Gif nochmal an.
-
Script von hier RE: Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen funktioniert super.
Wie muss vorgegangen werden, damit die Zähler wieder rechtsbündig abschließen. Ich habe schon daran gebastelt, aber damit bin ich überfordert. Bitte helfen!
-
Läuft hier nach erstem Testen tip-top, gefühlt etwas sauberer als meine Version!
Danke fürs Testen! Aber ich habe festgestellt, dass diese neue Version von mir das Hauptproblem, nämlich die nachträgliche Verbreiterung des Popups, nicht wie gehofft behebt
. Was ich nicht verstehe, da ja alle Berechnungen vor der Sichtbarkeit des Popups durchgeführt werden . Ich lass das Posting jetzt mal so stehen, da es ja funktioniert, wenn auch genau so, wie die alte Version...Zu dem "Refresh" kann ich nur sagen, dass er bei mir nicht auftritt und daher wohl doch eher in deinen sehr umfangreichen CSS-Anpassungen versteckt sein müsste.
Script von hier RE: Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen funktioniert super.
Wie muss vorgegangen werden, damit die Zähler wieder rechtsbündig abschließen. Ich habe schon daran gebastelt, aber damit bin ich überfordert. Bitte helfen!
Das Skript war nur zum Testen gedacht und da sind die ganzen Änderungen nicht beinhaltet, die hier mittlerweile ausgetüftelt wurden. Für CSS-Anpassungen müssten dir "die üblichen Verdächtigen" helfen
. -
damit die Zähler wieder rechtsbündig abschließen
Teste bitte mal:
CSS.countClass::after { margin-inline: auto 0 !important; }Bzw. so gleich im Skript dann:
Falls noch weiter nach rechts, dann z.B. so:
margin-inline: auto -10px !important;
-
Teste bitte mal:
Perfekt, Andreas, da wäre ich nie drauf gekommen. Meine Versuche habe ich mit padding gemacht, aber das war nicht so gut.
Danke!
Hast du dafür auch noch einen Rat, wie bekomme ich über notepad die Icon aus dem Script gewechselt. Löschen funktioniert ja, aber das Einfügen will nicht gelingen.
-
Aber ich habe festgestellt, dass diese neue Version von mir das Hauptproblem, nämlich die nachträgliche Verbreiterung des Popups, nicht wie gehofft behebt
. Was ich nicht verstehe, da ja alle Berechnungen vor der Sichtbarkeit des Popups durchgeführt werden .Hmm, bei meinem Problem damit geht das als Lösung, mit meinem und deinem Script.
Wobei wir verschiedene Fx Versionen und OS zwischen uns haben.Hättest du mal ein gif dazu - und hast du das Ganze in einem Testprofil, bzw. ohne irgendwelches externes CSS probiert?
Ohne darauf endlos rumreiten zu wollen, nur wenn's passt. -
Danke!
gern geschehen
die Icon aus dem Script gewechselt
Da musst ich leider passen, wie man da eine Url eintragen kann
-
Hast du dafür auch noch einen Rat, wie bekomme ich über notepad die Icon aus dem Script gewechselt.
Was willst du denn genau machen? Bei den ganzen Versionen, sie hier mittlerweile kursieren, verliere ich den Überblick.
-
Da musst ich leider passen, wie man da eine Url eintragen kann
Kein Beinbruch, Andreas, eventuell verrät es uns ja BrokenHeart
Was willst du denn genau machen? Bei den ganzen Versionen, sie hier mittlerweile kursieren, verliere ich den Überblick.
Ich auch, aber die letzte Version von BrokenHeart aus meinem Beitrag #583 läuft prima. Ganz unten sind die Icon eingearbeitet, welche ich, wenn es gehen sollte, austauschen möchte.
-
wenn es gehen sollte
Wenn nicht:
Evtl. ist hier ja ein anderes Emojis dabei, welches dir besser gefällt
-
FuchsFan Das Skript war nur für Testzwecke!
Teste mal dieses Skript, und wenn Du da was umstellen willst, frage nach!
Ich helfe Dir gerne.JavaScript
Alles anzeigen// 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 **** */ /* ******************************************************************************************************************* */ /* Custom Counter in the Bookmarks for folders and links ************************************************************* */ /* ******************************************************************************************************************* */ (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: 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 = 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 = ` /* Counter #1 Folder */ #bmContent::before { content: attr(data-value1) !important; width: ${cs_width_one} !important; align-items: center !important; display: flex !important; justify-content: end !important; /*margin-inline: 16px 4px; */ /* min. Abstand links für enge Popups, rechts zum 2ten Counter */ margin-left: 16px !important; /* Abstand links minimum für schmale Popus CHANGE */ margin-right: -1px !important; /* Abstand Icon "Ordner" bis zum "Zähler" */ 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; /* Farbe der 1. Zahl */ fill: ${cs_icon_color_1} !important; /* Farbe des 1. Symbols */ } /* Counter #2 Links */ #bmContent::after { content: attr(data-value2) !important; width: ${cs_width_two} !important; align-items: center !important; display: flex !important; justify-content: end !important; /*margin-inline: -2px;*/ margin-left: 4px !important; /* Abstand "Zähler 1" zum Icon2 */ margin-right: -1px !important; /* Abstand Icon "Links" bis zum "Zähler" */ 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; /* Farbe der 2. Zahl */ fill: ${cs_icon_color_2} !important; /* Farbe des 2. Symbols */ } `; // Symbole hinter den Zählern let css_two = ` /* Counter #1 Folder */ #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; /* Farbe der 1. Zahl */ fill: ${cs_icon_color_1} !important; /* Farbe des 1. Symbols */ padding: 2px 20px 0px 10px !important; /* top | right | bottom | left */ /*margin-inline: 0px -10px; */ margin-left: 16px !important; /* Abstand links minimum für schmale Popus CHANGE */ margin-right: 12px !important; /* Abstand Icon "Ordner" bis zum "Zähler" */ } #bmContent::after { content: attr(data-value2) !important; width: ${cs_width_two} !important; align-items: center !important; display: flex !important; justify-content: end !important; /*justify-content: flex-end; */ 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; /* Farbe der 2. Zahl */ fill: ${cs_icon_color_2} !important; /* Farbe des 2. Symbols */ padding: 2px 22px 0 0 !important; /* top | right | bottom | left */ margin-left: -14px !important; /* Abstand "Zähler 1" zum Icon2 */ margin-right: -1px !important; /* Abstand Icon "Links" bis zum "Zähler" */ } `; 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} !important; } /* Dynamisch gewählter before-Block */ ${useStyle ? css_one : css_two} /* Pfeil */ menupopup > menu::after { content: "" !important; background-image: url("${ProfilePath}/${icon3}")!important; height: ${cs_icon_size} !important; height: ${cs_icon_size} !important; 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'); //--- LesezeichenmenüButton let bookMenu = document.getElementById('bookmarksMenu'); //--- Lesezeichenmenü let persToolBar = document.getElementById('PersonalToolbar'); //--- Lesezeichenleiste if(bmbMenu) { bmbMenu.addEventListener('popupshown', onPopupShowing ); //--- 'popupshowing' -> 'popupshown' } if(bookMenu) { bookMenu.addEventListener('popupshown', onPopupShowing ); //--- 'popupshowing' -> 'popupshown' } if(persToolBar) { persToolBar.addEventListener('popupshown', onPopupShowing ); //--- 'popupshowing' -> 'popupshown' } } 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, "/ ") : String(menuitemCount).padEnd(2, " "); bmContent.setAttribute('data-value2', strCountOut2); }, 100); } } })();Was direkt im Skript geändert werden müsste, wenn die Symbole hinter die Zahlen sollen
und wenn es mehr als zweistellige Zahlen sind.
Aber einfach Bescheid geben. -
Ganz unten sind die Icon eingearbeitet, welche ich, wenn es gehen sollte, austauschen möchte.
Bei dieser Version weiß ich dann leider auch nicht weiter, wie das mit einer URL funktioniert...
-
Evtl. ist hier ja ein anderes Emojis dabei, welches dir besser gefällt
Teste mal dieses Skript, und wenn Du da was umstellen willst, frage nach!
Ich helfe Dir gerne.Danke, dieses benutze ich schon seit du es eingestellt hast.
Bei dieser Version weiß ich dann leider auch nicht weiter, wie das mit einer URL funktioniert...
Macht überhaupt nichts, da muss dann wohl ein Äkspärde ran.
-
FuchsFan Du willst unbedingt das Skript von BrokenHeard nutzen?
Und die Symbole sollen wie in der Vorlage eingebettet sein? -
Du willst unbedingt das Skript von BrokenHeard nutzen?
Nicht unbedingt, aber mir ist dabei aufgefallen, dass beim Aufruf eines Menüs die Zählung sofort vollständig angezeigt wird. Bei den anderen Scripten wird alles der Reihe nach von oben nach unten geladen.
Und die Symbole sollen wie in der Vorlage eingebettet sein?
Nicht unbedingt, wenn es mit dem Script auch anders zu regeln geht.
-
Nicht unbedingt, aber mir ist dabei aufgefallen, dass beim Aufruf eines Menüs die Zählung sofort vollständig angezeigt wird. Bei den anderen Scripten wird alles der Reihe nach von oben nach unten geladen.
Echt jetzt?
Daran arbeiten "wir" die ganze Zeit, damit das so nicht mehr ist.
Ok, das bekomme ich hin, denke ich!
Zeilen 197, 200 und 203, da steht doch dahinter, dass 'popupshowing' zu 'popupshown' geändert wurde.
Mach das einfach mal rückgängig, dann sollte es wieder so sein, wie Du das haben möchtest.Also:
bmbMenu.addEventListener('popupshowing', onPopupShowing );bookMenu.addEventListener('popupshowing', onPopupShowing );
und
persToolBar.addEventListener('popupshowing', onPopupShowing );
Sollte das so nicht fruchten, ersetze die Zeilen 196 bis 204
mit diesem Code:JavaScript
Alles anzeigenif(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('popupshowing', onPopupShowing ); }Achtung! Die Klammer Zeile 205 muss bleiben.
-
Also:
bmbMenu.addEventListener('popupshowwing', onPopupShowing );Besser ein "w" weniger...
-> 'popupshowing' -
Besser ein "w" weniger...
-> 'popupshowing'Danke für den Hinweis, ist korrigiert.
-
Ich auch, aber die letzte Version von BrokenHeart aus meinem Beitrag #583 läuft prima. Ganz unten sind die Icon eingearbeitet, welche ich, wenn es gehen sollte, austauschen möchte.
Die Icons wie die von der von Andreas in #591 verlinkten Seite klappen nicht?
Falls du eigene Icons meinst, wie svgs, .pngs etc. auf deinem System, dann blätter ein paar 100 Beiträge zurück und lies bis hierher.
