Script für Lesezeichen-Anzahl funktioniert nicht mehr

FuchsFan

omar1979 / Mira_Belle

Hat mich auch Nerven gekostet, aber das ist mMn die sinnvollste Lösung für Lesezeichen, alles über die userChrome.css.

CSS

/* Popup-Breite */
.menupopup-arrowscrollbox {
  max-width: none !important;
}

/* Menü Chronik und Lesezeichen */
#bookmarksMenuPopup,
#historyMenuPopup {
	--panel-width: 400px !important;
}

/* Popup aus Lesezeichensymbolleiste */
#PersonalToolbar menupopup,
#BMB_bookmarksPopup menupopup {
  --panel-width: 500px !important;
}

/* Item-Einträge über die volle Popup-Breite */
#PersonalToolbar menupopup menuitem,
#PersonalToolbar menupopup menu,
#BMB_bookmarksPopup menupopup menuitem,
#BMB_bookmarksPopup menupopup menu {
  max-width: none !important;   
  min-width: 0 !important;     
  width: auto !important;
}

Alles anzeigen

Mira_Belle

Cool.

FuchsFan Das hat mich schon viel weiter gebracht!
Jetzt muss nur noch das jeweilige Label (Ordnernamen) etwas nach unten,
oder in der Höhe zentriert werden.

So schaut z.Z. die Ergänzung für's Skript aus:

JavaScript

    /* Ergänzung, weil in der Lesezeichenleiste nichts mehr passte */
    #bmContent {
        justify-content: flex-end !important;
    }
    /* Popup-Breite */
    .menupopup-arrowscrollbox {
        max-width: none !important;
    }
    /* Feste Breite der Untermenüs */
    #PlacesToolbar menupopup[placespopup="true"]::part(arrowscrollbox) {
        max-width: 500px !important;   
        min-width: 450px !important;     
        width: auto !important;
    }
    /* Item-Einträge über die volle Popup-Breite */
    #PersonalToolbar menupopup menuitem,
    #PersonalToolbar menupopup menu,
    #BMB_bookmarksPopup menupopup menuitem,
    #BMB_bookmarksPopup menupopup menu {
        max-width: 500px !important;   
        min-width: 0 !important;     
        width: auto !important;
    }
    /*Texte ausrichten */
    #OtherBookmarksPopup > menu > label,
    #OtherBookmarksPopup > menu > menupopup > menu > label,
    #OtherBookmarksPopup > menu > menupopup > menu > menupopup > menu > label {
        margin-top: 15px !important;
    }
    /*Texte direkt im Untermenü ausrichten */
    #PlacesChevronPopup.toolbar-menupopup menu.menu-iconic > label { 
        margin-top: 15px !important;
    }
    /*Counter & Symbole ausrichten */
    #PlacesChevronPopup.toolbar-menupopup menu.menu-iconic > label > bmContent::after,
    #PlacesChevronPopup.toolbar-menupopup menu.menu-iconic > label > bmContent::before,
    #OtherBookmarksPopup > menu > label > bmContent::before,
    #OtherBookmarksPopup > menu > label > bmContent::after,
    #OtherBookmarksPopup > menu > menupopup > menu > label > bmContent::before,
    #OtherBookmarksPopup > menu > menupopup > menu > label > bmContent::after,
    #OtherBookmarksPopup > menu > menupopup > menu > menupopup > menu > label> bmContent::before,
    #OtherBookmarksPopup > menu > menupopup > menu > menupopup > menu > label> bmContent::after {
        margin-top: -32px !important;
    }
    /* Feste Höhe in den Untermenüs */
    #OtherBookmarksPopup > menu {
        max-height: 20px !important;
    }
    /* Feste Höhe direkt im Untermenü */
    menu.menu-iconic.bookmark-item {
        max-height: 25px !important;
    }
    #OtherBookmarksPopup > menu > menupopup > menu,
    #OtherBookmarksPopup > menu > menupopup > menu > menupopup > menu {
        max-height: 25px !important;
    }

Alles anzeigen

Und in die userChromeShadow.css muss dieser Schnipsel!

CSS

/*-----------------------------------------------------------------*/
/****  Anpassungen an den Untermenüs in der Lesezeichenleiste   ****/
/*-----------------------------------------------------------------*/

	/* Feste Breite der Untermenüs */
	#PlacesToolbar menupopup[placespopup="true"]::part(arrowscrollbox) {
		max-width: 500px !important;   
        min-width: 450px !important;     
    	width: auto !important;
	}

Jetzt passt wieder alles.

Mira_Belle

Und hier noch einmal das komplette Skript.

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 **** */
/* Version 1.05                     => https://www.camp-firefox.de/forum/thema/136572/?postID=1291576#post1291576 **** */
/* ******************************************************************************************************************* */
/* Custom Counter in the Bookmarks for folders and links ************************************************************* */
/* ******************************************************************************************************************* */

'use strict';

(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: Schriftfarben 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: Symbolfarben 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

  // NEU: Farbe für die Zahlenwerte und Symbole beim Hovern. 

  let cs_font_hovercolor_1 = "#FFD700";                 // Farbe für Folder-Zähler (links)
  let cs_font_hovercolor_2 = "#FFD700";                 // Farbe für Link-Zähler (rechts) "#80ffff";
  let cs_icon_hovercolor_1 = "#C0C0C0";                 // Farbe für "Ordner", 1.Symbol "#ff0000";
  let cs_icon_hovercolor_2 = "#C0C0C0";                 // Farbe für "Link", 2.Symbol "#00ff00";

  let cs_icon_hovercolor_3 = "#ffff80";                 // 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 = `
    #bmContent::before {
      content: attr(data-value1) !important;
      width: ${cs_width_one} !important;
      align-items: center !important;
      display: flex !important;
      justify-content: end !important;
      margin-left: 16px !important;
      margin-right: -1px !important;
      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;
      fill: ${cs_icon_color_1} !important;
    }
    #bmContent::after {
      content: attr(data-value2) !important;
      width: ${cs_width_two} !important;
      align-items: center !important;
      display: flex !important;
      justify-content: end !important;
      margin-left: 4px !important;
      margin-right: -1px !important;
      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;
      fill: ${cs_icon_color_2} !important;
    }
  `;

  // Symbole hinter den Zählern
  let css_two = `
    #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;
      fill: ${cs_icon_color_1} !important;
      padding: 2px 20px 0px 10px !important;
      margin-left: 16px !important;
      margin-right: 12px !important;
    }
    #bmContent::after {
      content: attr(data-value2) !important;
      width: ${cs_width_two} !important;
      align-items: center !important;
      display: flex !important;
      justify-content: end !important;
      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;
      fill: ${cs_icon_color_2} !important;
      padding: 2px 22px 0 0 !important;
      margin-left: -14px !important;
      margin-right: -1px !important;
    }
  `;

  function setFunction() {
    const css =`
      /* Fix für Firefox Nightly - Label als Flex-Container */
      #bookmarksMenuPopup > menu > label,
      #bookmarksMenuPopup > menu > menupopup > menu > label,
      #bookmarksMenuPopup > menu > menupopup > menu > menupopup > menu > label,
      #PlacesToolbarItems > .bookmark-item > menupopup > menu > label {
        display: flex !important;
        justify-content: space-between !important;
      }

      /* Counter Container */
      #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 Counter-Stil */
      ${useStyle ? css_one : css_two}

      /* Pfeil */
      menupopup > menu::after {
        content: "" !important;
        background-image: url("${ProfilePath}/${icon3}")!important;
        height: ${cs_icon_size} !important;
        fill: ${cs_icon_color_3} !important;
        margin-inline: 0 !important;
      }


      /* Farbe für die Zahlenwerte und Symbole beim Hovern. */
      menupopup[placespopup="true"] > menu.bookmark-item:hover > .menu-text > #bmContent::before {
          color: ${cs_font_hovercolor_1} !important;
          fill: ${cs_icon_hovercolor_1} !important;
      }
      menupopup[placespopup="true"] > menu.bookmark-item:hover > .menu-text > #bmContent::after {
          color: ${cs_font_hovercolor_2} !important;
          fill: ${cs_icon_hovercolor_2} !important;
      }
      /* Farbe für den Pfeil beim Hovern. */
      menupopup > menu:hover::after { 
          fill: ${cs_icon_hovercolor_3} !important;
      }


      /* Ergänzung, weil in der Lesezeichenleiste nichts mehr passte */
      #bmContent {
          justify-content: flex-end !important;
      }
      /* Popup-Breite */
      .menupopup-arrowscrollbox {
          max-width: none !important;
      }
      /* Feste Breite der Untermenüs */
      #PlacesToolbar menupopup[placespopup="true"]::part(arrowscrollbox) {
          max-width: 500px !important;   
          min-width: 450px !important;     
          width: auto !important;
      }
      /* Item-Einträge über die volle Popup-Breite */
      #PersonalToolbar menupopup menuitem,
      #PersonalToolbar menupopup menu,
      #BMB_bookmarksPopup menupopup menuitem,
      #BMB_bookmarksPopup menupopup menu {
          max-width: 500px !important;   
          min-width: 0 !important;     
          width: auto !important;
      }
      /*Texte ausrichten */
      #OtherBookmarksPopup > menu > label,
      #OtherBookmarksPopup > menu > menupopup > menu > label,
      #OtherBookmarksPopup > menu > menupopup > menu > menupopup > menu > label {
          margin-top: 15px !important;
      }
      /*Texte direkt im Untermenü ausrichten */
      #PlacesChevronPopup.toolbar-menupopup menu.menu-iconic > label { 
          margin-top: 15px !important;
      }
      /*Counter & Symbole ausrichten */
      #PlacesChevronPopup.toolbar-menupopup menu.menu-iconic > label > bmContent::after,
      #PlacesChevronPopup.toolbar-menupopup menu.menu-iconic > label > bmContent::before,
      #OtherBookmarksPopup > menu > label > bmContent::before,
      #OtherBookmarksPopup > menu > label > bmContent::after,
      #OtherBookmarksPopup > menu > menupopup > menu > label > bmContent::before,
      #OtherBookmarksPopup > menu > menupopup > menu > label > bmContent::after,
      #OtherBookmarksPopup > menu > menupopup > menu > menupopup > menu > label> bmContent::before,
      #OtherBookmarksPopup > menu > menupopup > menu > menupopup > menu > label> bmContent::after {
        margin-top: -32px !important;
      }
      /* Feste Höhe in den Untermenüs */
      #OtherBookmarksPopup > menu {
          max-height: 20px !important;
      }
      /* Feste Höhe direkt im Untermenü */
      menu.menu-iconic.bookmark-item {
          max-height: 25px !important;
      }
      #OtherBookmarksPopup > menu > menupopup > menu,
      #OtherBookmarksPopup > menu > menupopup > menu > menupopup > menu {
          max-height: 25px !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('popupshown', 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;

        // 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, "/  ") // (5, " |  ")
          : String(menuitemCount).padEnd(2, " "); //1 rechtsbündig / 2 linksbündig
        bmContent.setAttribute('data-value2', strCountOut2);
      }, 100);
    }
  }
})();

Alles anzeigen

omar1979

Zitat von FuchsFan

Hat mich auch Nerven gekostet, aber das ist mMn die sinnvollste Lösung für Lesezeichen, alles über die userChrome.css.

Das hat bei mir auch nichts genützt.

muss evtl die breite grösser machen?

mich nimmt wunder, warum nur die erste kolone schmal ist..

Ich glaube, ich muss die Breite der Popups auf meiner ZusatzLeiste vergrössern..

omar1979

habe das zusätzlich im FuchsFan 's CSS-Code im Beitrag #21 hinzugefügt, aber ist sicher falsch.

CSS

/* Breite der Popups auf der fp-statusbar-1 vergrössern */
#fp-statusbar-1 menupopup menuitem,
#fp-statusbar-1 menupopup menu {
	max-width: none !important;   
    min-width: 0 !important;     
    width: auto !important;
}

omar1979

ok erledigt, habe das width auf 400px gesetzt. funkt. danke an allen mitbeteiligten.

FuchsFan

Zitat von omar1979

Das hat bei mir auch nichts genützt.

omar1979

Kann auch nicht,weil ich auf dem Screenshot jetzt erkenne, dass dein Ordner nicht in der Lesezeichensymbolleiste liegt.

Mira_Belle

Zitat von omar1979

ok erledigt, habe das width auf 400px gesetzt. funkt. danke an allen mitbeteiligten.

Cool, habe gerade eben Dein Skript auch noch einmal ausprobiert und getestet.
Ja, da muss viel weniger ergänzt werden!

Super wenn Du es jetzt geschafft hast und alles wieder so funktioniert, wie Du Dir das vorstellst.

Mira_Belle

FuchsFan Und nochmals vielen lieben Dank, für die Denkanstöße.

Jetzt muss ich nur mal schauen, warum Horstmans Skript, das von omar genutzte, im Gegensatz zu meinem Skript
mit viel weniger Anpassung aus kommt.

Liegt ja alles nur am CSS, aber damit tu ich mir immer so schwer.

FuchsFan

Zitat von Mira_Belle

Und nochmals vielen lieben Dank, für die Denkanstöße.

Mira_Belle Aber gerne doch!

Zitat von Mira_Belle

im Gegensatz zu meinem Skript
mit viel weniger Anpassung aus kommt.

Da kann ich dir nicht helfen, aber mit dem Script arbeite ich.

JavaScript

// BookmarkCount.uc.js

/* ******************************************************************************************************************* */
/* Custom Counter in the Bookmarks for folders and links ************************************************************* */
/* ******************************************************************************************************************* */

(function() {

  if (!window.gBrowser)
    return;


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


  // ===================================================================================================================
  // Custom icons
  // ===================================================================================================================

  let ProfilePath = PathUtils.toFileURI(
    PathUtils.join(PathUtils.profileDir, 'chrome', 'icons')
  );

  let icon1 = "green.png";       // Custom Folder Icon
  let icon2 = "009.png";         // Custom Link Icon
  let icon3 = "rechts.png";      // Custom Arrow Icon


  // ===================================================================================================================
  // Custom settings
  // ===================================================================================================================

  let bm_font_size = 12;
  let cs_font_weight = 700;
  let bm_icon_size = 14;


  // ===================================================================================================================
  // Normal counter colors
  // ===================================================================================================================

  let cs_font_color_1 = "blue";       // Folder counter
  let cs_font_color_2 = "brown";      // Link counter


  // ===================================================================================================================
  // Hover counter colors
  // ===================================================================================================================

  let cs_font_hover_color_1 = "red";      // Folder counter on hover
  let cs_font_hover_color_2 = "green";    // Link counter on hover


  // ===================================================================================================================
  // Icon colors
  // ===================================================================================================================

  let cs_icon_color_1 = "#C0C0C0";     // Folder icon
  let cs_icon_color_2 = "#C0C0C0";     // Link icon
  let cs_icon_color_3 = "#C0C0C0";     // Arrow


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


  // ===================================================================================================================
  // Layout
  //
  // 0 = Symbols behind the counters
  // 1 = Symbols before the counters
  // ===================================================================================================================

  let useStyle = 0;


  // ===================================================================================================================
  // Style 1 - Symbols before the counters
  // ===================================================================================================================

  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 !important;

      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;
      fill: ${cs_icon_color_1} !important;
    }


    /* ---------------------------------------------------------------------------------------------------------------
       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-left: 4px !important;
      margin-right: -1px !important;

      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;
      fill: ${cs_icon_color_2} !important;
    }

  `;


  // ===================================================================================================================
  // Style 2 - Symbols behind the counters
  // ===================================================================================================================

  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;
      fill: ${cs_icon_color_1} !important;

      padding: 2px 20px 0px 10px !important;

      margin-left: 16px !important;
      margin-right: 15px !important;
    }


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

      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;
      fill: ${cs_icon_color_2} !important;

      padding: 2px 22px 0px 0px !important;

      margin-left: -10px !important;
      margin-right: -1px !important;
    }

  `;


  // ===================================================================================================================
  // Main CSS
  // ===================================================================================================================

  function setFunction() {

    const css = `

      /* ===============================================================================================================
         Counter container
         =============================================================================================================== */

      #bmContent {
        display: flex !important;
        justify-content: flex-end !important;

        margin-inline-start: 100px !important;
        margin-top: -15px !important;

        font-family: Consolas, "Lucida Console", "Courier New", monospace;
        font-size: ${cs_font_size} !important;
        font-weight: ${cs_font_weight} !important;

        height: ${cs_icon_size} !important;
      }


      /* ===============================================================================================================
         Selected counter layout
         =============================================================================================================== */

      ${useStyle ? css_one : css_two}


      /* ===============================================================================================================
         Hover
         =============================================================================================================== */

      /*
       * Die Klasse .bm-counter-hover wird ausschließlich per
       * mouseenter/mouseleave auf dem jeweiligen Bookmark-Item gesetzt.
       *
       * Dadurch wird der Hover NICHT an Unterordner weitergegeben.
       */

      #bmContent.bm-counter-hover::before {
        color: ${cs_font_hover_color_1} !important;
      }

      #bmContent.bm-counter-hover::after {
        color: ${cs_font_hover_color_2} !important;
      }


      /* ===============================================================================================================
         Arrow
         =============================================================================================================== */

      .bookmark-item::after {
        content: "" !important;

        background-image: url("${ProfilePath}/${icon3}") !important;

        height: ${cs_icon_size} !important;

        fill: ${cs_icon_color_3} !important;

        scale: 0.7 !important;
      }

    `;


    // =================================================================================================================
    // Register stylesheet
    // =================================================================================================================

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


    // =================================================================================================================
    // Bookmark menus
    // =================================================================================================================

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


  // =====================================================================================================================
  // Bookmark counter
  // =====================================================================================================================

  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;

        if (!itemPopup)
          return;


        itemPopup.hidden = true;
        itemPopup.collapsed = true;

        itemPopup.openPopup();
        itemPopup.hidePopup();


        let menuitemCount = 0;
        let menuCount = 0;


        // =============================================================================================================
        // Count folders and links
        // =============================================================================================================

        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;


        // =============================================================================================================
        // Create counter
        // =============================================================================================================

        let bmCounta = item.childNodes[1];

        if (!bmCounta)
          return;


        bmCounta.innerHTML = "";


        let bmContent = document.createElement("bmContent");

        bmContent.id = "bmContent";

        bmCounta.appendChild(bmContent);


        // =============================================================================================================
        // Folder counter
        // =============================================================================================================

        let strCountOut1 = String(menuCount).padStart(2, " ");

        bmContent.setAttribute(
          'data-value1',
          strCountOut1
        );


        // =============================================================================================================
        // Link counter
        // =============================================================================================================

        let strCountOut2 = (useStyle === 0)
          ? String(menuitemCount).padStart(4, "|  ")
          : String(menuitemCount).padEnd(2, " ");

        bmContent.setAttribute(
          'data-value2',
          strCountOut2
        );


        // =============================================================================================================
        // IMPORTANT:
        // Hover is attached ONLY to this bookmark item.
        // The class is placed ONLY on its own #bmContent.
        // =============================================================================================================

        item.addEventListener('mouseenter', function() {

          let ownCounter = item.querySelector('#bmContent');

          if (ownCounter === bmContent) {
            bmContent.classList.add('bm-counter-hover');
          }

        });


        item.addEventListener('mouseleave', function() {

          bmContent.classList.remove('bm-counter-hover');

        });


      }, 100);
    }
  }

})();

Alles anzeigen

omar1979

Zitat von FuchsFan

Kann auch nicht,weil ich auf dem Screenshot jetzt erkenne, dass dein Ordner nicht in der Lesezeichensymbolleiste liegt.

Macht nichts. Danke trotzdem.

Zitat von Mira_Belle

Super wenn Du es jetzt geschafft hast und alles wieder so funktioniert, wie Du Dir das vorstellst.

Danke auch dir.

Mira_Belle

Vielen lieben Dank für Dein Skript FuchsFan
Dadurch und auch mit Horstmanns Skript war es mir möglich
mein Skript zu aktualisieren und den Fehler verursachenden Code (CSS) zu finden!

Es war der Fix für die Nightly!
Ohne dieses CSS konnte ich fast alles Entrümpeln.

FuchsFan

Zitat von Mira_Belle

Vielen lieben Dank für Dein Skript

Schön, dass ich helfen konnte.

Script für Lesezeichen-Anzahl funktioniert nicht mehr

Sören Hentzschel 3. November 2026 um 20:33

Ähnliche Themen

Script funktioniert nicht mehr

Diverse Scripte funktionieren nicht mehr in Nightly

v152.0beta2. Script "browsertoolbox.uc.js" funktioniert nicht mehr

Script für das Anzeigen des Icons der verwendeten Suchmaschine geht nicht mehr.

Script GoogleImageSearch.uc.js geht nicht mehr

Das Script New_Addonbar.uc funktioniert nicht mehr.