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

BrokenHeart

Zitat von Horstmann

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.

Zitat von FuchsFan

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 .

2002Andreas

Zitat von FuchsFan

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;

FuchsFan

Zitat von 2002Andreas

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.

Horstmann

Zitat von BrokenHeart

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.

2002Andreas

Zitat von FuchsFan

Danke!

gern geschehen

Zitat von FuchsFan

die Icon aus dem Script gewechselt

Da musst ich leider passen, wie man da eine Url eintragen kann

grisu2099

Zitat von FuchsFan

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.

FuchsFan

Zitat von 2002Andreas

Da musst ich leider passen, wie man da eine Url eintragen kann

Kein Beinbruch, Andreas, eventuell verrät es uns ja BrokenHeart

Zitat von grisu2099

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.

2002Andreas

Zitat von FuchsFan

wenn es gehen sollte

Wenn nicht:

Evtl. ist hier ja ein anderes Emojis dabei, welches dir besser gefällt

😎 Emojikopieren.de - Emojis zum Kopieren und Einfügen

Mira_Belle

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

// 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);

    }
  }
})();

Alles anzeigen

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.

grisu2099

Zitat von FuchsFan

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...

FuchsFan

Zitat von 2002Andreas

Evtl. ist hier ja ein anderes Emojis dabei, welches dir besser gefällt

Zitat von Mira_Belle

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.

Zitat von grisu2099

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.

Mira_Belle

FuchsFan Du willst unbedingt das Skript von BrokenHeard nutzen?
Und die Symbole sollen wie in der Vorlage eingebettet sein?

FuchsFan

Zitat von Mira_Belle

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.

Zitat von Mira_Belle

Und die Symbole sollen wie in der Vorlage eingebettet sein?

Nicht unbedingt, wenn es mit dem Script auch anders zu regeln geht.

Mira_Belle

Zitat von FuchsFan

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

		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 ); 
		}

Alles anzeigen

Achtung! Die Klammer Zeile 205 muss bleiben.

grisu2099

Zitat von Mira_Belle

Also:
bmbMenu.addEventListener('popupshowwing', onPopupShowing );

Besser ein "w" weniger... -> 'popupshowing'

Mira_Belle

Zitat von grisu2099

Besser ein "w" weniger... -> 'popupshowing'

Danke für den Hinweis, ist korrigiert.

Horstmann

Zitat von FuchsFan

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.

FuchsFan

Zitat von Mira_Belle

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

Mira_Belle

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.