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

Horstmann

Zitat von grisu2099

Zitat von Horstmann

Und wenn ihr jetzt noch kurz das Script von Mitleser hier testen könntet

Das gleiche in grün...
Meine Skript-Version:

Vielen Dank!

Hmm; was mir gerade aufgefallen ist, in meinen letzten Scripts gibt's einen Fehler - der aber bei dir, Mitleser und Mira nicht vorhanden ist, also uU nichts ausmacht.
Sitzt aber an genau der relevanten Stelle.

Zeilen 286/287, in meinem Script, und dadurch auch auf Endor's Github:

Code

        if(bookMenu)-
            bookMenu.addEventListener('popupshowing', onPopupShowing );

Das - nach if(bookMenu)- muss raus... ==> if(bookMenu) ...

Horstmann

Zitat von Mira_Belle

Ist auch mit diesem Skript so.

Danke!
Sind ja ziemlich verschiedene Ansätze, mit dem gleichen Problem, die Frage wäre dann halt wann ist das Problem aufgetreten, oder war es immer schon da?
Wobei dann hätte sich bestimmt schon jemand gemeldet.

Also, ich kann ja leider nicht die Menüleiste testen, und für mich am Mac konnte sich auch der Bug nie bemerkbar machen.

Es würde evtl. Sinn machen für Windows User nach einer älteren Version zu suchen, die funktioniert, und dann mit neusten Versionen zu vergleichen, um festzustellen an welchem Punkt der Ärger losging.

Im Fx Code sehen die IDs etc. ziemlich ähnlich aus, aber die ersten 3 werden offensichtlich anders geladen als die Lesezeichenordner darunter; könnt ja mal die Trennlinie dazwischen rausschmeissen zum Spass.

Hier ungefähr geht die Diskussion mit den relativ aktuellen Änderungen los, da gibt es Einiges an Code von BrokenHeart , grisu2099 und Mira_Belle , der evtl. die Problematik nicht aufweist.

BrokenHeart

Das Problem wird sehr wahrscheinlich durch eine Änderung an dem internen Popup-Aufruf des Lesezeichen-Menüs verursacht. In der Version FF128esr funktioniert es noch, in der aktuellen Release und der Nightly nicht mehr. Hat nichts mit den verschiedenen Skripten oder CSS-Änderungen zu tun. Da ich das Skript nicht verwende, kann ich nicht genau sagen, bei welcher FF-Version die Umstellung erfolgt ist. Ist auch eigentlich egal.

Folgende Screenshots zeigen den Unterschied zwischen der FF128esr und FF140:

FF128ers:

FF140:

Beide Screenshots sind gemacht worden, bevor das Lesezeichenmenü-Popup erstmalig aufgerufen wurde!

In FF128esr sind schon alle Verzeichnisse des Lesezeichenmenüs vorhanden, deshalb klappt auch die Berechnung der Lesezeichenanzahl beim ersten Klick..

In FF140 sind nur die standardmäßigen Haupt-Verzeichnisse vorhanden. Die eigentlichen Lesezeichen(-Verzeichnisse) aber noch nicht.

In beiden FF-Versionen gibt es ein Attribut hasbeenopened des Menü-Popups, welches gesetzt wird, wenn man erstmalig das Popup aufgerufen hat. Deshalb muss hier ein zweites mal der Button betätigt werde, damit das Skript, so wie es jetzt ist, funktioniert.

Den Grund sehe ich in einer Optimierung der Speicherplatzes und der Startgeschwindigkeit, da die Lesezeichen erst bei Bedarf (Klicken) einmalig gelesen werden.

Lösung müsste ich mir noch mal anschauen, wahrscheinlich über Manipulation des Attributs hasbeenopened und dem zwangsweisen Laden der Lesezeichen -Inhalte. Vielleicht hat ja sonst wer noch eine zündende Idee....

Mira_Belle

Horstmann Ich habe nun mehrere ältere Versionen den Skripts durchprobiert, über all das Gleiche.
Ich denke, es wird so sein, wie von BrokenHeart beschrieben.

Endor

Zitat von Horstmann

Das - nach if(bookMenu)- muss raus... ==> if(bookMenu) ...

Habe ich bei Github und hier lokal entfernt.
Danke für den Hinweis.
Mfg.
Endor

BrokenHeart

Test-Skript:

Beim Lesezeichen-Menü über die Menüleiste sieht es erst mal ganz gut aus...

Beim Öffnen des Popups über den Lesezeichen-Menü-Button funktioniert es zwar auch, aber das Popup wird erst ganz kurz nach links geöffnet und wieder geschlossen, bevor es dann nach rechts wieder geöffnet wird .

Ich habe zu Testzwecken ein älteres Skript von mir verwendet. Änderungen sind markiert(Zeile 31 und Zeile 33):

JavaScript

(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;
			}
		`;

        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('popupshown', onPopupShowing );  //--- 'popupshowing' -> 'popupshown' 
        if(bookMenu)
            bookMenu.addEventListener('popupshown', onPopupShowing ); //--- 'popupshowing' -> 'popupshown'
        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).padStart(2, '\xa0') + "📁" + "\xa0" + String(menuitemCount).padStart(3, '\xa0') + "⭐"; //"\xa0"
			  label.setAttribute('data-value', strCountOut);
			  

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

Alles anzeigen

Horstmann

Hauptsache ich hab nicht mal wieder was vergeigt!

Prima Fund wieder mal von BrokenHeart.

grisu2099

Bringt hier keine Änderung...

Mitleser

BrokenHeart Läuft!

Horstmann

Zitat von BrokenHeart

Test-Skript:
Beim Lesezeichen-Menü über die Menüleiste sieht es erst mal ganz gut aus...
Beim Öffnen des Popups über den Lesezeichen-Menü-Button funktioniert es zwar auch, aber das Popup wird erst ganz kurz nach links geöffnet und wieder geschlossen, bevor es dann nach rechts wieder geöffnet wird .

Und wenn du beide hinzufügst?

JavaScript

        if(bmbMenu)
           bmbMenu.addEventListener('popupshowing', onPopupShowing );
           bmbMenu.addEventListener('popupshown', onPopupShowing );

BrokenHeart

Zitat von Horstmann

Und wenn du beide hinzufügst?

Ich vermute mal du meinst:

JavaScript

        if(bmbMenu) {
           bmbMenu.addEventListener('popupshowing', onPopupShowing );
           bmbMenu.addEventListener('popupshown', onPopupShowing ); 
        }

Ja, jetzt funktioniert es wie es soll (nach einem Kurztest). Sehr gut...

PS: Ich glaube zwar, dass es nicht sehr effizient ist, das gleiche Prozedere mehrfach aufzurufen, aber dann muss man halt als "Heimwerker und Bastler" mehr Geld für die entsprechende Hardware hinlegen, dann gleicht sich das wieder aus!

Horstmann

Zitat von BrokenHeart

Zitat von Horstmann

Und wenn du beide hinzufügst?

Ich vermute mal du meinst:
PS: Ich glaube zwar, dass es nicht sehr effizient ist, das gleiche Prozedere mehrfach aufzurufen, aber dann muss man halt als "Heimwerker und Bastler" mehr Geld für die entsprechende Hardware hinlegen, dann gleicht sich das wieder aus!

Ooups, sorry, ja, genau das.
Was Schlaueres fällt mir nicht ein - schon gar nicht ohne es testen zu können, sogar wenn ich JS könnte.

PS; Braucht man die Änderung eigentlich unbedingt für den bookmarks-menu-button, weil sie evtl. in der Lesezeichenleiste mitbenutzt wird?

Das hier reicht nicht, mit Anpassung nur für bookmarksMenu?

JavaScript

       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('popupshown', onPopupShowing ); // popupshowing => popupshown
       if(persToolBar)
           persToolBar.addEventListener('popupshowing', onPopupShowing );
   }

Alles anzeigen

Mira_Belle

Oh, es geht!

Code

        if(bmbMenu)
            bmbMenu.addEventListener('popupshown', onPopupShowing );  //--- 'popupshowing' -> 'popupshown' 
        if(bookMenu)
            bookMenu.addEventListener('popupshown', onPopupShowing ); //--- 'popupshowing' -> 'popupshown'
        if(persToolBar)
            persToolBar.addEventListener('popupshown', onPopupShowing );  //--- 'popupshowing' -> 'popupshown'

Bei erstmaligem Aufruf der Lesezeichen werden alle Counter angezeigt!

Mit ...

Code

        if(bmbMenu)
        	bmbMenu.addEventListener('popupshowing', onPopupShowing );
            bmbMenu.addEventListener('popupshown', onPopupShowing );  //--- 'popupshowing' -> 'popupshown' 
        if(bookMenu)
            bookMenu.addEventListener('popupshown', onPopupShowing ); //--- 'popupshowing' -> 'popupshown'
        if(persToolBar)
            persToolBar.addEventListener('popupshowing', onPopupShowing );

... wird dann gar nichts mehr angezeigt.

Komplettes Skript inkl. Icons?

Und die Französin sagt:

Zitat

Der Unterschied zwischen den beiden Event-Listenern in JavaScript besteht im Zeitpunkt, zu dem das Event ausgelöst wird:
popupshowing: Dieses Event wird ausgelöst, wenn das Popup-Menü gerade dabei ist, angezeigt zu werden, aber noch nicht vollständig sichtbar ist. Es ist ein Event, das den Beginn des Anzeigeprozesses signalisiert. Dies kann nützlich sein, wenn du bestimmte Aktionen ausführen möchtest, bevor das Menü vollständig sichtbar ist, wie z.B. das Vorbereiten von Inhalten oder das Durchführen von Initialisierungen.
popupshown: Dieses Event wird ausgelöst, nachdem das Popup-Menü vollständig angezeigt wurde. Es signalisiert das Ende des Anzeigeprozesses. Dies ist nützlich, wenn du Aktionen ausführen möchtest, die darauf warten müssen, dass das Menü vollständig sichtbar ist, wie z.B. das Fokussieren eines bestimmten Elements im Menü oder das Ausführen von Animationen.
Zusammengefasst:
popupshowing: Wird ausgelöst, wenn das Popup-Menü gerade dabei ist, angezeigt zu werden.
popupshown: Wird ausgelöst, nachdem das Popup-Menü vollständig angezeigt wurde.
Je nach Anwendungsfall kannst du den geeigneten Event-Listener wählen, um sicherzustellen, dass deine Aktionen zum richtigen Zeitpunkt ausgeführt werden.

Und nach BrokenHearts Erklärung ist nun auch klar, warum es popupshonwn heißen muss.

Zitat von grisu2099

Bringt hier keine Änderung...

Nanana, Cache geleert?

BrokenHeart

Zitat von Mira_Belle

Bei erstmaligem Aufruf der Lesezeichen werden alle Counter angezeigt

Frage: Wenn du das Lesezeichen-Menü über den Lesezeichen-Menü-Button öffnest, wird dann kurzfristig das Popup an der falschen Stelle dargestellt, oder nicht? Erklärung in #526.

Zitat von Mira_Belle

... wird dann gar nichts mehr angezeigt.

Du hast auch die Klammern vergessen:

JavaScript

        if(bmbMenu) {
           bmbMenu.addEventListener('popupshowing', onPopupShowing );
           bmbMenu.addEventListener('popupshown', onPopupShowing ); 
        }

Zitat von Mira_Belle

Und die Französin sagt:

Na ja, die französische KI-Zofe beschreibt eigentlich nur nochmal genau das, was auch die Bezeichnungen der Eventlistener schon weitestgehend aussagen.

Mira_Belle

BrokenHeart
Mir war, ist der Unterschied von popupshowing vs. popupshown nicht klar gewesen!

Zitat von BrokenHeart

Du hast auch die Klammern vergessen:

Korrigiert!

JavaScript

    if(bmbMenu) {
      bmbMenu.addEventListener('popupshown', onPopupShowing );  //--- 'popupshowing' -> 'popupshown'
      }
    if(bookMenu) {
      bookMenu.addEventListener('popupshown', onPopupShowing ); //--- 'popupshowing' -> 'popupshown'
      }
    if(persToolBar) {
      persToolBar.addEventListener('popupshown', onPopupShowing ); //--- 'popupshowing' -> 'popupshown'
    }

So funktioniert es. Auch wenn ich die Lesezeichen über den Button aufrufe!

Nachtrag

Dieser komische doppelte Aufruf ist bei mir nicht nötig,
aber auch so funktioniert es.

BrokenHeart

Zitat von Horstmann

Das hier reicht nicht, mit Anpassung nur für bookmarksMenu?

Nein das reicht nicht. Das hatte ich schon vorher getestet.

Ist eben die gleiche Optimierung wie in der Menüleiste. Mozilla geht wohl (zu Recht) davon aus, dass man nicht beide Möglichkeiten gleichzeitig nutzt, sondern sich für eine Aufruf-Methode entscheidet und daher werden beide getrennt angesprochen.

Zitat von Mira_Belle

Dieser komische doppelte Aufruf ist bei mir nicht nötig,
aber auch so funktioniert es.

Interessant. Muss mal schauen, ob nur bei mir dieser merkwürdige Effekt auftritt. Vielleicht mal ohne meine 'userChrome.css' testen .

Danke für den Hinweis .

Mitleser

BrokenHeart, ich habe dieses Script angepasst und sehe keine Probleme (Linux), auch nicht mit #bookmarks-menu-button oder #bookmarksMenuPopup (oder erkenne ich das Problem nicht?).

Die Icons befinden sich in diesem Beitrag.

Edit (05.07.25): doppelten EventListener gelöscht; funktioniert auch so.

JavaScript

// JavaScript Document
// M_NumOfBookmfold+Bookm_lite.uc.js
// FF 140

// Fork of @BrokenHeart's code from https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1269879#post1269879

// Das Script erstellt einen Zusatz zu Menüeinträgen in Bookmark-Ordner-Dropdowns.
// Der Zusatz besteht aus der [Anzahl der beinhaltenden Ordner sowie aus der Anzahl der beinhaltenden Lesezeichen]. Als trennendes Element zwischen Ordner und Lesezeichen wird ein Ordnersymbol als Icon eingefügt.
// Sollte kein Ordner sowie kein Lesezeichen vorhanden sein (der Ordner ist leer), erscheint ein Trashsymbol (als Aufforderung zur Löschung des leeren Ordners) und das Pfeil-Symbol(Twisty) wird ausgeblendet.

(function() {
    if (!window.gBrowser)
        return;

setTimeout(function() {
	setFunction();
},50);

function setFunction() {
const
// ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
       iconFold = '16SWfolder-10_moz.svg',
     iconFoldOv = '16SWfolder-12_moz.svg',
      iconTrash = '16_Trash-03_moz.svg',
   iconFillFold = '#b0b0b0',
 iconFillFoldOv = 'currentColor',
  iconFillTrash = '#f02228',
iconFillTrashOv = 'currentColor',
        fontCol = '#b0b0b0',
      fontColOv = 'currentColor',

     iconPath = '/chrome/icons/',
// ■■ END UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

     curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));//const end

const css =`
	.countClass {
		justify-content: space-between !important;
	}
	.countClass::after {
        content: attr(data-value);
        color: ${fontCol};
		padding-right: 3px;
		background-image: url('${curProfDir}${iconPath}${iconFold}');
		fill: ${iconFillFold};
		background-repeat: no-repeat;
		background-size: 13px 13px;
		background-position: right 22px center;
		margin-right: -17px !important;
	}
	menu:hover > .countClass::after {
		color: ${fontColOv};
		fill: ${iconFillFoldOv};
	}
	.countClass[data-value^='\xa0']::after {
		background-image: none;
	}
	menu:hover > .countClass:not([data-value^='\xa0'])::after {
		background-image: url('${curProfDir}${iconPath}${iconFoldOv}');
	}
	menu:has( > .countClass[data-value$='\xa0'][data-value^='\xa0'])::after {
    	fill-opacity: 1 !important;
		background-image: url('${curProfDir}${iconPath}${iconTrash}') !important;
		fill: ${iconFillTrash} !important;
		height: 13px !important;
		width: 13px !important;
		scale: 1.07 !important;
		margin-right: 11px !important;
	}
	menu:hover:has( > .countClass[data-value$='\xa0'][data-value^='\xa0'])::after {
    	fill: ${iconFillTrashOv} !important;
	}
	#bookmarksMenuPopup > menu > .countClass::after {
        background-position: right 29px center;
		padding-right: 10px;
	}
         `;
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);
//----
const bmbMenu = document.getElementById('bookmarks-menu-button');
const bookMenu = document.getElementById('bookmarksMenu');
const persToolBar = document.getElementById('PersonalToolbar');

	if(bmbMenu)
       bmbMenu.addEventListener('popupshown', onPopupShowing 
    );
	if(bookMenu){
		bookMenu.addEventListener('popupshown', onPopupShowing )
	};
	if(persToolBar){
		persToolBar.addEventListener('popupshowing', onPopupShowing )
	};
};

function onPopupShowing(aEvent) {

const 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]; //[1]links [3]rechts
              label.classList.add('countClass');
		  let menuDiv = '\xa0\xa0\xa0';
			  if (menuCount == 0) {
			    menuDiv = '\xa0\xa0';
			    menuCount ='\xa0';
			  }
			  if (menuitemCount == 0) {
			    menuitemCount ='\xa0';
			  }
			  if (menuCount > 0 && menuitemCount == 0) {
				menuitemCount ='0';
			  }
			  if (menuCount > 0 && menuitemCount == '0') {
				menuitemCount =  '\xa0‒';
			  }
		  let strCountOut = String(menuCount).padStart(2,'') + menuDiv + String(menuitemCount).padStart(2,'\xa0');
              label.setAttribute('data-value', strCountOut);
            }, 1000);
        }
}
//----
})();

Alles anzeigen

Mira_Belle

Mitleser Es ist durchaus möglich, dass dieses Problem mit dem verzögertem Anzeigen der Counter
[Anzahl der beinhaltenden Ordner sowie aus der Anzahl der beinhaltenden Lesezeichen],
bzw. erst beim zweiten Mal öffnen des betreffenden Popups (z.B. Lesezeichen), nur auf Windowssystemen auftritt.

Scheinbar besteht die Lösung darin, das "Event" 'popupshowing' in 'popupshown'.

Das "Event" auszulösen, bevor und nachdem das Popup-Menü vollständig angezeigt wird,
macht meiner Meinung keinen Sinn.

Und BrokenHart hat hier ja recht gut erklärt, warum das "Event" erst nach dem vollständigen Anzeigen
des Menüs ausgelöst werden sollte.

Zitat von BrokenHeart

In beiden FF-Versionen gibt es ein Attribut hasbeenopened des Menü-Popups, welches gesetzt wird, wenn man erstmalig das Popup aufgerufen hat. Deshalb muss hier ein zweites mal der Button betätigt werde, damit das Skript, so wie es jetzt ist, funktioniert.

Da es hier um Millisekunden geht, so denke ich, sieht man das mit der Verzögerung nicht.
Man bekommt es einfach nicht mit.

Horstmann

Zitat von BrokenHeart

Zitat von Mira_Belle

Dieser komische doppelte Aufruf ist bei mir nicht nötig,
aber auch so funktioniert es.

Interessant. Muss mal schauen, ob nur bei mir dieser merkwürdige Effekt auftritt. Vielleicht mal ohne meine 'userChrome.css' testen .

Zitat von Mira_Belle

Das "Event" auszulösen, bevor und nachdem das Popup-Menü vollständig angezeigt wird,
macht meiner Meinung keinen Sinn.
Und BrokenHart hat hier ja recht gut erklärt, warum das "Event" erst nach dem vollständigen Anzeigen
des Menüs ausgelöst werden sollte.

Zitat von BrokenHeart

In beiden FF-Versionen gibt es ein Attribut hasbeenopened des Menü-Popups, welches gesetzt wird, wenn man erstmalig das Popup aufgerufen hat. Deshalb muss hier ein zweites mal der Button betätigt werde, damit das Skript, so wie es jetzt ist, funktioniert.

Da es hier um Millisekunden geht, so denke ich, sieht man das mit der Verzögerung nicht.
Man bekommt es einfach nicht mit.

Hier am Mac, für den #bookmarks-menu-button / Lesezeichen-Menü-Button:

Die Breite des Haupt-Popups ändert sich jeweils beim ersten Öffnen nach Neustart oder in einem neuen Fenster (falls das Popup noch nicht die erlaubte max-width des Fensters besitzt).

Edit: hat dieses Popup schon die Maximalbreite bevor die Zählereinträge beim Öffnen dazugefügt werden, etwa durch einen sehr langen Link oder Foldernamen (Anhang), gibt es hier kein Problem wie in #2 (s. unten), weil die Zählereinträge die Breite eh nicht mehr ändern können.

Danach, und für Submenus bleibt die Grösse, vermutlich weil sie mit hasbeenopened festgelegt bleibt; das Attribut sitzt hier am Hauptpopup, ID: #BMB_bookmarksToolbarPopup.

===>

JavaScript

let bmbMenu = document.getElementById('bookmarks-menu-button');

//#1 alt: Passt Popup Breite sauber an beim Oeffnen 
if(bmbMenu)
    bmbMenu.addEventListener('popupshowing', onPopupShowing );

//#2 neu: Passt Popup Breite ruckartig an beim/nach Oeffnen 
if(bmbMenu)
    bmbMenu.addEventListener('popupshown', onPopupShowing );  // popupshowing => popupshown

//#3 neu, doppelt: Passt Popup Breite sauber an beim Oeffnen 
if(bmbMenu) {
     bmbMenu.addEventListener('popupshowing', onPopupShowing );   // popupshowing => popupshown
     bmbMenu.addEventListener('popupshown', onPopupShowing );   // popupshowing => popupshown
     }

Alles anzeigen

Hat man noch weitere CSS für Positionierung, Grösse etc. für dieses Hauptpopup, könnte das weitere Anzeigeprobleme mit sich bringen, wie von Brokenheart beschrieben.

Mira_Belle

Mh.

Also, ich habe keine Probleme mehr!
Und ich habe nicht nur CSS für die Breite und Farben und so weiter,
sondern ja auch noch CSS, um Symbole vor die "Labels" zu bekommen!

Es funktioniert super mit Version #2!