Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

FuchsFan

Zitat von Mira_Belle

Mach das einfach mal rückgängig, dann sollte es wieder so sein, wie Du das haben möchtest.

Ich danke dir für deinen Einsatz. Ändern brauche ich nichts, weil alles so im Script vorhanden ist. In Version 140 bleibt der Zustand wie beschrieben, aber in Nightly läuft es besser, schneller, so dass man schon genau drauf achten muss. Ich lass das jetzt mal so, damit kann man leben.

Zitat von Horstmann

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.

Brauche ich nicht lesen, weil ich damit schon fertig werde. Wenn du es nicht verstanden haben solltest, es geht nur um das Test-Script von BrokenHeart , wie die Icons dort eingefügt wurden, und wie man diese ändern könnte.

Horstmann

Zitat von FuchsFan

Brauche ich nicht lesen, weil ich damit schon fertig werde. Wenn du es nicht verstanden haben solltest, es geht nur um das Test-Script von BrokenHeart , wie die Icons dort eingefügt wurden, und wie man diese ändern könnte.

So kann man sie ändern, copy/paste, ganz einfach.

FuchsFan

Zitat von Horstmann

So kann man sie ändern, copy/paste, ganz einfach.

Ich danke dir, jetzt habe auch ich verstanden, dass es nur damit möglich ist.

Mira_Belle

Zitat von FuchsFan

Ich danke dir, jetzt habe auch ich verstanden, dass es nur damit möglich ist.

Ja, es müssen schon ganz bestimmte "Symbole" sein. Ich kann es nicht so gut erklären.
Außerdem sehen sie je nach System und verwendeter Software unterschiedlich aus.
Egal, ich mag sie nicht, kann aber jeder machen wie er mag.
Und weil die Auswahl bei solchen Symbolen doch recht begrenzt sind, weiche ich lieben auf das
einbinden von Grafiken aus!
Da kann man jpg, png oder halt auch svg Grafiken nehmen, und wenn man etwas "begabt§ ist,
auch eigene kreieren und einbinden.

Boersenfeger

Ich nutze das Script von BrokenHeart aus #580 mit meiner Anpassung von Farbe und Schrift-Größe

Zeile 10 - 20

CSS

function setFunction() {

        const css =`
            .countClass::after {
                content: attr(data-value) !important; 
				font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
				font-size: 12px !important;
				font-weight: 1000 !important;
                color: black !important;
			}
		`;

Alles anzeigen

Vielen Dank dafür!

Jetzt wäre es noch toll wenn die Zahlen alle rechtsbündig vor den > Zeichen andocken könnten.

2002Andreas

Zitat von Boersenfeger

enn die Zahlen alle rechtsbündig vor den > Zeichen andocken könnten.

Hatten wir doch erst

Beitrag

RE: Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

[…]

Teste bitte mal:

(Quelltext, 4 Zeilen)

Bzw. so gleich im Skript dann:

Falls noch weiter nach rechts, dann z.B. so:

margin-inline: auto -10px !important;

2002Andreas

7. Juli 2025 um 18:38

Mira_Belle

Zitat von Boersenfeger

Jetzt wäre es noch toll wenn die Zahlen alle rechtsbündig vor den > Zeichen andocken könnten.

Zeile 86
let strCountOut = String(menuCount).padEnd(2, '\xa0') + "📁" + "\xa0" + String(menuitemCount).padEnd(3, '\xa0') + "⭐"; //"\xa0"

So sollte es funktionieren.

Boersenfeger

Mira_Belle Deine Änderung bewirkt leider nichts,

2002Andreas Mit margin-inline gehts

Danke allerseits!

Mira_Belle

Zitat von Boersenfeger

Deine Änderung bewirkt leider nichts,

Äh, kann nicht sein! Die Zahlen sind rechtsbündig!
Ich habe nur vergessen die Symbole vor die Zahlen zu verschieben!
Zweiter Versuch!
let strCountOut = "\xa0" + "📁" + String(menuCount).padStart(2, '\xa0') + "⭐" + String(menuitemCount).padStart(3, '\xa0'); //"\xa0"
Ach und natürlich muss ins CSS margin-inline: auto 0 !important;

Ergebniss, Symbole sind vor den Zahlen. Zahlen sind rechtsbündig.
Counter, also Symbole und Zahlen sind rechtes im Menü.

CSS

(function() {

    if (!window.gBrowser)
        return;
    
    setTimeout(function() {
        setFunction();
    },50);

    function setFunction() {

        const css =`
            .countClass::after {
                content: attr(data-value) !important; 
				font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
				font-size: 11px !important;
				font-weight: 900 !important;
                color: rgb(100,200,255) !important;
                margin-inline: auto 0 !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('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.menu-iconic-text
  
              label.classList.add('countClass');
              let strCountOut = "\xa0" + "📁" + String(menuCount).padStart(2, '\xa0') + "⭐" + String(menuitemCount).padStart(3, '\xa0'); //"\xa0"
			  label.setAttribute('data-value', strCountOut);
			  
            }, 100);
        }
    }
    
})();

Alles anzeigen

Horstmann

Zitat von Mira_Belle

Zitat von Boersenfeger

Deine Änderung bewirkt leider nichts,

Äh, kann nicht sein! Die Zahlen sind rechtsbündig!

Denke Boersenfeger benutzt nicht die Version aus #580 wie behauptet, sondern irgendeinen alten Code mit linksbündigen Zahlen, wie in seinen Screenshots zu sehen ist.

Ich vermute auch, er hat mit Zahlen Zähler/Counter gemeint, was Zahl + Icon ist, wie du erklärt hast, während Zahlen nur die Zahlen sind.

Boersenfeger

Ich nutze dazu Autopopup.uc.js

Code

/* AutoPopUp */

// ==UserScript==
// @name           AutoPopup.uc.js
// @description    Auto popup menulist/menupopup
// @compatibility  Firefox 142.0a1
// @author         GOLF-AT, modified by gsf & aborix
// @version        2025.06.30
// ==UserScript==

(function() {

  if (!window.gBrowser)
    return;

  let itemToClose = null;
  let timeoutEnter, timeoutLeave;
  let placesContext = document.getElementById('placesContext');

  placesContext.addEventListener('popuphidden', function() {
    if (itemToClose) {
      itemToClose.open = false;
      itemToClose = null;
    };
  });

  function onMouseenter(event) {
    clearTimeout(timeoutLeave);
    timeoutEnter = setTimeout(function() {
      itemToClose = null;
      if (placesContext._view && !placesContext._view._openedMenuButton) {
        placesContext.hidePopup();
      };
      event.target.open = true;
    }, 100);
  };

  function onMouseleave(event) {
    clearTimeout(timeoutEnter);
    timeoutLeave = setTimeout(function() {
      if (placesContext.state == 'closed') {
        event.target.open = false;
        itemToClose = null;
      } else {
        itemToClose = event.target;
      };
    }, 100);
  };

  function addListeners(items) {
    for (let item of items) {
      item.addEventListener('mouseenter', onMouseenter);
      item.addEventListener('mouseleave', onMouseleave);
    };
  };

  addListeners(document.querySelectorAll('#main-menubar > menu'));

	let strCountOut1 = String(menuCount).padStart(2, " ");
	bmContent.setAttribute('data-value1', strCountOut1);

    let strCountOut2 = (useStyle === 0) 
    ? String(menuitemCount).padStart(4, "/  ")
    : String(menuitemCount).padStart(2, " ");
    bmContent.setAttribute('data-value2', strCountOut2);
	})();

Alles anzeigen

und dieses Script, es ist das aus #580 angepasst

CSS

(function() {

    if (!window.gBrowser)
        return;
    
    setTimeout(function() {
        setFunction();
    },50);

    function setFunction() {

        const css =`
            .countClass::after {
                content: attr(data-value) !important; 
				font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
				font-size: 12px !important;
				font-weight: 1000 !important;
                color: black !important;
				margin-inline: auto 0 !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('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.menu-iconic-text
  
              label.classList.add('countClass');
			  let strCountOut = String(menuCount).padEnd(2, '\xa0') + "📁" + "\xa0" + String(menuitemCount).padEnd(3, '\xa0') + "⭐"; //"\xa0"
			  label.setAttribute('data-value', strCountOut);
			  

            }, 100);
        }
    }
    
})();

Alles anzeigen

Horstmann

Zitat von Boersenfeger

und dieses Script, es ist das aus #580 angepasst

Also willst du die Zahlen linksbündig haben, nicht wie in dem Script in #580?
Na dann.

Das Script in #580 ist das Ding unten übrigens, nicht der Codeblock oben zur Korrektur des Menüleiste Problems.
Will aber nicht kleinlich sein, Gedankenlesen gehört dazu.

Boersenfeger

siehe #609

Horstmann

Zitat von Boersenfeger

Ich nutze dazu Autopopup.uc.js

Mira_Belle

Boersenfeger Bei der von Dir geposteten Version sind die Zähler linksbündig!
Bei "meinem" Skript sind die Zahlen rechtsbündig!

Weitere Unterschiede!
Symbole bei Dir nach den Zählern, bei mir vor den Zählern.

Kann aber niemand ahnen, dass Du nur die Counter, also Zähler und Symbole einfach nur nach rechts verschoben haben wolltest.
Ist aber egal, jetzt stehen Dir und anderen alle Optionen offen.

grisu2099

Zitat von Mira_Belle

Kann aber niemand ahnen, dass Du nur die Counter, also Zähler und Symbole einfach nur nach rechts verschoben haben wolltest.

Steht doch in #606 ganz deutlich drin...

Mira_Belle

Zitat von grisu2099

Steht doch in #606 ganz deutlich drin...

Äh, nö!
Da steht:

Zitat von Boersenfeger

... wenn die Zahlen alle rechtsbündig vor den > Zeichen andocken könnten.

D.h. einfach nur die Symbole und die Zähler vertauschen.
Aber das alleine hatte Boersenfeger wohl gar nicht gemeint!
Er wollte wohl, so wie ich es beschrieben habe Symbole und Zähler rechtsbündig!

Aber wollen wir uns jetzt wirklich wegen so einem Quatsch in die Haare bekommen?
Boersenfeger kann sich nun aussuchen, wie genau der Counter dargestellt werden soll.
Counter rechts oder links, Zähler vor oder hinter die Symbole, alles da.

Mira_Belle

Boersenfeger
Hier noch einmal eine kleine Erklärung.

Mit "margin-inline: auto 0 !important;" im CSS verschiebst Du die "Counter", also Symbole & Zähler" etwas nach rechts.
Wenn der Wert positiv, rückt das alles etwas nach links, wenn negativ etwas weiter nach rechts.

Schauen wir uns die Zeile 87 in Deinem Skript etwas genauer an!
let strCountOut = String(menuCount).padEnd(2, '\xa0') + "📁" + "\xa0" + String(menuitemCount).padEnd(3, '\xa0') + "⭐";

.padEnd => Zahlen werden linksbündig angeordnet.
.padStart => so werden sie rechtsbündig.
Die Zahl in der Klammer "reseviert" die Stellen, die so ein Zähler haben kann.
Also 2 für eine zweistellige Zahl, 3 entsprechend für eine dreistellige Zahl, usw.
'\xa0' in der Klammer steht für eine Leerstelle nach den Zahlen.

"\xa0" in der Variabel steht auch für eine Leerstelle! Damit kannst Du experimentieren, wenn Du magst.

Das Symbol ist klar, oder?

Mit diesem Wissen kann man nun an der Variabel herumexperimentieren, wenn man mag.
Also, mit let strCountOut = String(menuCount).padEnd(2, '\xa0') + "📁" + "\xa0" + String(menuitemCount).padEnd(3, '\xa0') + "⭐";
sieht der Counter so aus.

Zahlen sind vor den Symbolen und zwischen Zahlen und Symbolen sind ein Leerzeichen.
Man beachte, dass die Zahlen linksbündig sind

Mit let strCountOut = "📁" + String(menuCount).padStart(2, '\xa0') + "⭐" + String(menuitemCount).padStart(3, '\xa0');
wird der Counter so dargestellt:

Zahlen sind hinter den Symbolen.
Wenn man jedoch noch ein "\xa0" vor dem Sternsymbol hinzufügt, kann man den Abstand zischen der Zahl und
dem Symbol etwas vergrößern. Denke, das würde schöner aussehen. ('\xa0') + "\xa0" + "⭐" + String)
Schaut man sich die Zahlen an, fällt auf, dass diese rechtsbündig sind!

So, jetzt darf gebastelt werden,
und ich hoffe, dass die leidige Diskussion, was wer geschrieben und gemeint hat,
und wie andere das aufgefasst und verstanden haben, endet.

Viel Spaß beim Ausprobieren.

Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

Beitrag von Horstmann (8. Juli 2025 um 20:29)

RE: Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

Beitrag von Horstmann (10. Juli 2025 um 21:31)