Beiträge von Horstmann

Horstmann

Zitat von omar1979

Zitat von BrokenHeart

Dann hast du vermutlich irgendwas selbst "verbastelt", da ja im Skript der Separator extra eingefügt wird:

Ich habe in allen Popups die Separatoren mit css entfernt. Wenn ich jetzt die lösche, dann tauchen überall wieder Separatoren auf.

Was ist denn dein CSS Code dafür?

Horstmann

Zitat von Mira_Belle

Zitat von Horstmann

Probier spasseshalber mal das:

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

(function() {

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

    let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
    let icon1 = "Folder.png"
    let icon2 = "Link.png"

    function setFunction() {

        const css =`
            .countClass1::before {
                content: "";
                background-image: url(${profilePath}/${icon1}); 
                background-repeat: no-repeat;
                background-size: 16px;  /* icon size */
                //background-position: center;
                margin-right: -10px !important; /* Abstand bis zum "Wert" der Ordner */
                margin-left: 15px !important;   /* Abstand bis zum Icon der Ordner */
                height: 16px;
                width: 16px;
                fill: #c0c0c0;
                fill-opacity: 1;
            }
            .countClass1::after {
                content: attr(data-value1) !important;
                font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
                font-size: 12px !important;
                font-weight: 900 !important;
                color: #FFB90F !important;
                padding-top: 1px !important;
            }
            .countClass2::before {
                content: "";
                background-image: url(${profilePath}/${icon2});
                background-repeat: no-repeat;
                background-size: 16px;  /* icon size */
                background-position: center;
                margin-right: 6px !important;   /* Abstand bis zum "Wert" der Links */
                margin-left: 10px !important;   /* Abstand bis zum Icon der Links */
                height: 16px;
                width: 16px;
                fill: #c0c0c0;
                fill-opacity: 1;
            }
            .countClass2::after {
                content: attr(data-value2);
                font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
                font-size: 12px !important;
                font-weight: 900 !important; 
                color: #FFD700 !important;
                margin-right: -6px !important;  /* Abstand zum Pfeil rechts */
            }
            .countClass2 image {
                order: 1;                       /* Pfeil hinter dem "Wert" der Links */
            }


            /* Ergaenzungen */ 

            .countClass1 label {
                margin-inline: 0px !important;
            }


           .menu-right.countClass2 {
                margin-inline: 0px !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 newbarMenu = document.getElementById('fp-statusbar-1');
        let bmbMenu = document.getElementById('bookmarks-menu-button');
        let bookMenu = document.getElementById('bookmarksMenu');
        let persToolBar = document.getElementById('PersonalToolbar');

        if(newbarMenu)
            newbarMenu.addEventListener('popupshowing', onPopupShowing );
        if(bmbMenu)
            bmbMenu.addEventListener('popupshowing', onPopupShowing ); 
        if(bookMenu)
            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;
              item.style.color = '#c0c0c0';
              
              let label1 = item.childNodes[3];
  
              label1.classList.add('countClass1');
              let strCountOut1 = String(menuCount).padEnd(2) + '\xa0';     // padEnd2 => zwei Stellen, plus Abstand 
              label1.setAttribute('data-value1', strCountOut1);

              let label2 = item.childNodes[4];
  
              label2.classList.add('countClass2');
              let strCountOut2 = String(menuitemCount).padEnd(3, '\xa0');  // padEnd3 => drei Stellen, Abstand bei nur einer Ziffer    
              label2.setAttribute('data-value2', strCountOut2);

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













//Fügt in den Lesezeichen Ordner ganz oben die Anzahl von Links und Unterordner hinzu.
(function() {

  if (!window.gBrowser)
    return;

  function setFunction() {
    PlacesViewBase.prototype._mayAddCommandsItems =
    function PVB__mayAddCommandsItems(aPopup) {
      let hasMultipleURIs = false;
      let menuitemCount = 0;
      let menuCount = 0;
      if (aPopup._placesNode.childCount > 0) {
        for (let item of aPopup.children) {
          if (item._placesNode) {
            if (item.localName == 'menuitem') {
              menuitemCount++;
            } else if (item.localName == 'menu') {
              menuCount++;
            }
          }
        }
        if (menuitemCount > 0 || menuCount > 0) {
          hasMultipleURIs = true;
        }
      }
      if (!hasMultipleURIs)  {
        aPopup.setAttribute("nofooterpopup", "true");
        if (aPopup._endOptOpenAllInTabs) {
          aPopup.removeChild(aPopup._endOptOpenAllInTabs);
          aPopup._endOptOpenAllInTabs = null;
          aPopup.removeChild(aPopup._endOptSeparator);
          aPopup._endOptSeparator = null;
        }
        return;
      }

      aPopup.removeAttribute("nofooterpopup");
      if (!aPopup._endOptOpenAllInTabs) {
        aPopup._endOptSeparator = document.createXULElement("menuseparator");
        aPopup._endOptSeparator.className = "bookmarks-actions-menuseparator";
        aPopup.insertBefore(aPopup._endOptSeparator, aPopup.firstChild);
        aPopup._endOptOpenAllInTabs = document.createXULElement("menuitem");
        aPopup._endOptOpenAllInTabs.className = "openintabs-menuitem";
        if (this.options?.extraClasses?.entry) {
          aPopup._endOptOpenAllInTabs.classList.add(
            this.options.extraClasses.entry
          );
        }
        aPopup._endOptOpenAllInTabs.setAttribute(
          "oncommand",
          "PlacesUIUtils.openMultipleLinksInTabs(this.parentNode._placesNode, event, " +
            "PlacesUIUtils.getViewForNode(this));"
        );
        aPopup._endOptOpenAllInTabs.setAttribute(
          "onclick",
          "checkForMiddleClick(this, event); event.stopPropagation();"
        );
        aPopup.insertBefore(aPopup._endOptOpenAllInTabs, aPopup.firstChild);
      }

      let label = menuitemCount + " Link";
        if (menuitemCount != 1) {
          label += "s";
        }
        label += " / " + menuCount + " Ordner."
        if (menuitemCount == 1) {
          label += " -> Link in Tab öffnen."
        } else if (menuitemCount > 1) {
          label += " -> Links in Tabs öffnen."
        }

      aPopup._endOptOpenAllInTabs.setAttribute("label", label);
    }
  }

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

Alles anzeigen

Was hast Du denn geändert?

omar1979 hat sein ganzes Lesezeichenmenü verbogen.Glaube nicht, dass der Fehler am Skript liegt, eher an einem der Maßnahmen, die er fürs Verbiegen verwendet.

Das was nach Ergaenzungen kommt, nur um 2 mögliche Fehlerquellen auszuschliessen.

Auch wenn dann vielleicht der Rest nicht mehr passt.

Aber wie oben schon angemerkt, ich denke du hast recht mit deiner Diagnose.

Horstmann

Zitat von omar1979

Hallo allen
Ich habe für mich das Script im Beitrag-Nr: 230 von Mira_Belle angepasst.
Das einzige Problem ist, dass es hier in dem ersten Bild der Abstand zwischen den Ordner-Icon und den Anzahl(Wert) grösser ist als im zweiten Bild. Kann mir dabei jemand helfen? Besten Dank.
Bild 1: Lesezeichen im Lesezeichen-Menü: Bild 2: Lesezeichen auf einer Zusatz-Leiste:

Hier noch das Script:

Alles anzeigen

Probier spasseshalber mal das:

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

(function() {

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

    let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
    let icon1 = "Folder.png"
    let icon2 = "Link.png"

    function setFunction() {

        const css =`
            .countClass1::before {
                content: "";
                background-image: url(${profilePath}/${icon1}); 
                background-repeat: no-repeat;
                background-size: 16px;  /* icon size */
                //background-position: center;
                margin-right: -10px !important; /* Abstand bis zum "Wert" der Ordner */
                margin-left: 15px !important;   /* Abstand bis zum Icon der Ordner */
                height: 16px;
                width: 16px;
                fill: #c0c0c0;
                fill-opacity: 1;
            }
            .countClass1::after {
                content: attr(data-value1) !important;
                font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
                font-size: 12px !important;
                font-weight: 900 !important;
                color: #FFB90F !important;
                padding-top: 1px !important;
            }
            .countClass2::before {
                content: "";
                background-image: url(${profilePath}/${icon2});
                background-repeat: no-repeat;
                background-size: 16px;  /* icon size */
                background-position: center;
                margin-right: 6px !important;   /* Abstand bis zum "Wert" der Links */
                margin-left: 10px !important;   /* Abstand bis zum Icon der Links */
                height: 16px;
                width: 16px;
                fill: #c0c0c0;
                fill-opacity: 1;
            }
            .countClass2::after {
                content: attr(data-value2);
                font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
                font-size: 12px !important;
                font-weight: 900 !important; 
                color: #FFD700 !important;
                margin-right: -6px !important;  /* Abstand zum Pfeil rechts */
            }
            .countClass2 image {
                order: 1;                       /* Pfeil hinter dem "Wert" der Links */
            }


            /* Ergaenzungen */ 

            .countClass1 label {
                margin-inline: 0px !important;
            }


           .menu-right.countClass2 {
                margin-inline: 0px !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 newbarMenu = document.getElementById('fp-statusbar-1');
        let bmbMenu = document.getElementById('bookmarks-menu-button');
        let bookMenu = document.getElementById('bookmarksMenu');
        let persToolBar = document.getElementById('PersonalToolbar');

        if(newbarMenu)
            newbarMenu.addEventListener('popupshowing', onPopupShowing );
        if(bmbMenu)
            bmbMenu.addEventListener('popupshowing', onPopupShowing ); 
        if(bookMenu)
            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;
              item.style.color = '#c0c0c0';
              
              let label1 = item.childNodes[3];
  
              label1.classList.add('countClass1');
              let strCountOut1 = String(menuCount).padEnd(2) + '\xa0';     // padEnd2 => zwei Stellen, plus Abstand 
              label1.setAttribute('data-value1', strCountOut1);

              let label2 = item.childNodes[4];
  
              label2.classList.add('countClass2');
              let strCountOut2 = String(menuitemCount).padEnd(3, '\xa0');  // padEnd3 => drei Stellen, Abstand bei nur einer Ziffer    
              label2.setAttribute('data-value2', strCountOut2);

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













//Fügt in den Lesezeichen Ordner ganz oben die Anzahl von Links und Unterordner hinzu.
(function() {

  if (!window.gBrowser)
    return;

  function setFunction() {
    PlacesViewBase.prototype._mayAddCommandsItems =
    function PVB__mayAddCommandsItems(aPopup) {
      let hasMultipleURIs = false;
      let menuitemCount = 0;
      let menuCount = 0;
      if (aPopup._placesNode.childCount > 0) {
        for (let item of aPopup.children) {
          if (item._placesNode) {
            if (item.localName == 'menuitem') {
              menuitemCount++;
            } else if (item.localName == 'menu') {
              menuCount++;
            }
          }
        }
        if (menuitemCount > 0 || menuCount > 0) {
          hasMultipleURIs = true;
        }
      }
      if (!hasMultipleURIs)  {
        aPopup.setAttribute("nofooterpopup", "true");
        if (aPopup._endOptOpenAllInTabs) {
          aPopup.removeChild(aPopup._endOptOpenAllInTabs);
          aPopup._endOptOpenAllInTabs = null;
          aPopup.removeChild(aPopup._endOptSeparator);
          aPopup._endOptSeparator = null;
        }
        return;
      }

      aPopup.removeAttribute("nofooterpopup");
      if (!aPopup._endOptOpenAllInTabs) {
        aPopup._endOptSeparator = document.createXULElement("menuseparator");
        aPopup._endOptSeparator.className = "bookmarks-actions-menuseparator";
        aPopup.insertBefore(aPopup._endOptSeparator, aPopup.firstChild);
        aPopup._endOptOpenAllInTabs = document.createXULElement("menuitem");
        aPopup._endOptOpenAllInTabs.className = "openintabs-menuitem";
        if (this.options?.extraClasses?.entry) {
          aPopup._endOptOpenAllInTabs.classList.add(
            this.options.extraClasses.entry
          );
        }
        aPopup._endOptOpenAllInTabs.setAttribute(
          "oncommand",
          "PlacesUIUtils.openMultipleLinksInTabs(this.parentNode._placesNode, event, " +
            "PlacesUIUtils.getViewForNode(this));"
        );
        aPopup._endOptOpenAllInTabs.setAttribute(
          "onclick",
          "checkForMiddleClick(this, event); event.stopPropagation();"
        );
        aPopup.insertBefore(aPopup._endOptOpenAllInTabs, aPopup.firstChild);
      }

      let label = menuitemCount + " Link";
        if (menuitemCount != 1) {
          label += "s";
        }
        label += " / " + menuCount + " Ordner."
        if (menuitemCount == 1) {
          label += " -> Link in Tab öffnen."
        } else if (menuitemCount > 1) {
          label += " -> Links in Tabs öffnen."
        }

      aPopup._endOptOpenAllInTabs.setAttribute("label", label);
    }
  }

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

Alles anzeigen

Horstmann

Zitat von omar1979

Zitat von Horstmann

Wenn du den zweiten Teil weglässt, hast du dann auch das Problem?

Hab jetzt als Test den 2.ten Teil gelöscht und das Problem besteht immernoch.

Kann nur vermuten, dass der Code von deiner Zusatzleiste querschiesst, oder sonstwas von deinem Code für Popups; ich hab's nur mal kurz in meinem Zusatzleistenprofil probiert, kein Problem.

Das wäre aber vermutlich schon ein eigenes Thema.

Horstmann

Zitat von omar1979

Achja.. das 2.te Script in diesem Script nach dem ca 10 Zeilen Leerzeichen ist für den Teil,
wo das mit dem "Anzahl Links / Anzahl Ordner / Links im Tab öffnen".

Wenn du den zweiten Teil weglässt, hast du dann auch das Problem?

Verschiedene Scripts zu mischen ist nicht unbedingt eine gute Idee, wenn sie ähnliche Bereiche ansprechen.

Vielleicht eher was für ein eigenes Thema?

Horstmann

Die eine Frage die wir uns natürlich alle gestellt haben: was macht eigentlich das label im ersten Teil des Zählers?

Antwort: nichts!

So geht das aber nicht, also wird die faule Socke jetzt benutzt!

Wer immer noch die Geduld hat an dem Script weiter rumzuschrauben, hier ein Vorschlag (Test); der relevante Eintrag ist label test.

Sollte eigentlich wie der Rest frei verschiebbar und belegbar sein, ohne zu viel Ärger zu machen.

Zumindest in diesem Script, was meine aktuelle Testversion der Variante mit den extra Fonts für den Zähler ist (stört sich sonst eigentlich keiner daran dass die Null mit vielen Mono-Fonts durchgestrichen ist? )

Braucht man vielleicht nicht für ein erfülltes Leben, aber könnte nett sein noch was zum Spielen zu haben.

JavaScript

// JavaScript Document
// BookmarkCount.uc.js - modified zu oft
// Author BrokenHeart
// Modified by Mira / Horstmann
// Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229536#post1229536
// Endor Repository Link Source https://github.com/Endor8/userChrome.js/blob/master/Firefox%20115/BookmarkCount.uc.js


// TEST


(function() {

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


    //Custom icons in profile/chrome/icons folder, code shared by Mira

    let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
    let icon1 = "folder3neuFat2b.png"   // flower.png
    let icon2 = "faviconfull.svg"

    function setFunction() {

        const css =`


            /**  Basics  **/

            /* Font Size / font weight counter , disable to use default  / fonts list */
            :root {
                --counter_fontsize: 11px;   
                /*--counter_fontweight: 800;*/     
                --counter_fonts: "Droid Sans Mono", "SF Mono", "Andale Mono", Consolas, "Lucida Console", "Courier New", monospace;   
                /*--counter_fonts: Consolas, "Lucida Console", "Courier New", monospace;*/   
            }

            /* Fix container content vertical centering for first / folder counter */ 
            hbox.menu-accel-container.countClass1 {
                align-items: center !important;
            }

            /* Disable default left margin --> label test */ 
            /*.countClass1 label {
                margin-inline: 0px !important;
            }*/

            /* Folder counter box distance left / right */
            hbox.menu-accel-container.countClass1 {
                margin-left: 16px !important;   /* minimum distance to left for narrow popups*/ 
                margin-right: 4px !important;             /* distance to Items / links counter box */ 
            }




                                                        /* label test */


            .countClass1 label {
                height: 12px !important;
                width: 4px !important;
                background-color: green !important;
                order: 1;    
                margin-inline: 5px 0px !important;    
            }




            /****  folder counter box  ****/

            /* Icon */
            .countClass1::before {
                content: "";
                /*background-image: url(${profilePath}/${icon1});*/         /*  Custom icon  */
                background-image: url("chrome://global/skin/icons/folder.svg");
                background-repeat: no-repeat;
                background-size: 14px;                                                           /* icon size */
                background-position: center;
                margin-right: 4px !important;                           /* distance icon -> counter */
                height: 16px;
                width: 16px;
                /*fill: #c0c0c0;*/                                /* .svg icon colour / opacity if usable */
                fill-opacity: 1;
            }

            /* Counter */
            .countClass1::after {
                content: attr(data-value1) !important;
                font-family:  var(--counter_fonts) !important;
                font-size: var(--counter_fontsize) !important;
                font-weight: var(--counter_fontweight) !important;
                color: red !important;                                                  /*  Text 1 colour */
            }


            /****  Items / links counter box  ****/

            /* Icon */
            .countClass2::before {
                content: "";
                /*background-image: url(${profilePath}/${icon2});*/      /*  Custom icon  */
                background-image: url("chrome://browser/skin/bookmark-hollow.svg");
                background-repeat: no-repeat;
                background-size: 14px;                                                         /* icon size */
                background-position: center;
                margin-right: 4px !important;                        /* distance icon -> counter */
                height: 16px;
                width: 16px;
                /*fill: #c0c0c0;*/                             /* .svg icon colour / opacity if usable */
                fill-opacity: 1;
            }

            /* Counter */
            .countClass2::after {
                content: attr(data-value2);
                font-family:  var(--counter_fonts) !important;
                font-size: var(--counter_fontsize) !important;
                font-weight: var(--counter_fontweight) !important;
                color: red !important;                                                 /* Text 2 colour */
                margin-right: 4px !important;                               /* distance to arrow */
            }

            /* Arrow right */
            /* Move arrow to the right */
            .countClass2 image {
                order: 1;        
                /*margin-right: 0px !important;*/  /*  distance arrow  -->  box border  */
            }


           /** Extra stuff  **/

           /*  Some fonts not centered Fix, optional, experimental  */
           /* .countClass1::after, .countClass2::after {
                height: var(--counter_fontsize) !important;                  
            }*/


            /*  Outline only for testing  */ 
            menu.menu-iconic.bookmark-item {
                 outline: 1px solid orange !important;
                 outline-offset: -8px !important;
            }

            /*  Background only for testing  */ 
            .countClass1::after, .countClass2::after {
                 /*outline: 1px solid green !important;
                 outline-offset: -1px !important;*)
                 background-color: gainsboro;
            }

        `;

        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('popupshowing', onPopupShowing ); 
        if(bookMenu)
            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;
              
              // Folder counter, 2 digits
              let label1 = item.childNodes[3];
              label1.classList.add('countClass1');
              //let strCountOut1 = String(menuCount).padStart(2,  '\xa0');  // Numbers right // padEnd for left 
              let strCountOut1 = String("[" + menuCount + "]").padStart(4,  '\xa0');  // Klammern // Brackets
              label1.setAttribute('data-value1', strCountOut1);

              // Links counter, 3 digits
              let label2 = item.childNodes[4];
              label2.classList.add('countClass2');
              //let strCountOut2 = String(menuitemCount).padStart(3, '\xa0');  // Numbers right // padEnd for left 
              let strCountOut2 = String("[" + menuitemCount + "]").padStart(5,  '\xa0');  // Klammern // Brackets
              label2.setAttribute('data-value2', strCountOut2);

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

Alles anzeigen

Horstmann

Zitat von Dharkness

Aber bitte doch

Dankeschön!

Zitat von Mira_Belle

Viele Wege führen nach Rom

Ebenfalls danke!

Deswegen meine Frage; hab beides schon probiert, aber es gibt halt oft Alternativen.

Horstmann

Zitat von Dharkness

So, das ↓ habe ich jetzt daraus gebaut, also noch einmal Dankeschön.

Code dazu, zack-zack!

Wollte nur mal sehen, wie genau du den Trennstrich nach dem ersten Zähler eingebaut hast; kann's mir zwar ungefähr vorstellen, wäre aber prima wenn du das Script nachreichen könntest.

Horstmann

Zitat von Mira_Belle

Habe mich damit ein wenig beschäftigt und habe festgestellt, dass es prinzipiell an den Fonts liegt.
Leider habe ich keine befriedigte Lösung gefunden, die allgemein greift,
so bleibt als einfachste Lösung nur
padding-bottom für zu tief gestellte Ziffern
oder
padding-top für zu hoch gestellte Ziffern zu nutzen,
um diese Auszurichten.

Alles anzeigen

Oder schauen was noch an Monospace Fonts auf dem System rumliegen, und die mal probieren.

In Windows gibt's doch sicher auch eine App die die installierten Schriften auflistet?

Ich wollte auch unbedingt die durchgestrichene 0 (Null) loswerden, die der andere Font benutzt.

Und dann ginge evtl. auch sowas.

Zitat von grisu2099

Ja, aber die Version mit den Zahlen vorne habe ich vorrätig...

Verstehe.

Danke übrigens, sieht für mich besser aus rechtsbündig.

Horstmann

Zitat von grisu2099

Zitat von Dharkness

Jetzt noch den Text rechtsbündig ausrichten und das ganze wäre perfekt, siehst Du da eine Möglichkeit?

Wenn du damit leben kannst, daß die Zahlen vor den Icons sind, kannst du ja mal diese Version testen:

Aber wieso, die Zahlen rechtsbündig geht doch genauso gut mit den Zahlen nach den Icons?

Horstmann

Zitat von Mira_Belle

Sooo,
nach einigen Anregungen und weiterem Code eine weitere neue Version des Skriptes.

Ich habe nun auch mit so einigen Fonts unter Windows 10 herumexperimentiert,
habe dabei auch festgestellt, dass so mancher Font quasi hochgestellt wird.
Darum, bzw., welcher Wert es genau ist um den Font dann mittig zu bekommen,
kümmere ich mich noch.
Eventuell weiß es ja auch schon jemand, ich brauch’ aber jetzt erst einmal 'ne Pause.

Alles anzeigen

Dankeschön, und erhol dich gut.

Dann sehen wir doch ähnliche Probleme, seltsam mit diesen Fonts...

Nur weil ich auch in der Gegend unterwegs bin, hier ein weiterer Versuch meinerseits; die Fonts Einstellung oben muss man sich evtl. anpassen oder ergänzen, je nach OS.

Die Icons sind hier wieder von Firefox, und wie die Farben/Outlines/Hintergründe NUR zum einfacheren Testen gedacht, damit man (hoffentlich) das Script ansonsten nicht bearbeiten muss vor dem testen.

Die Abstände passen für meinen Geschmack, sind aber voll anpassbar.

Negative Margins versuche ich immer zu vermeiden, weil man dann oft zum einen ein anderweitiges Problem nur kaschiert, und zum anderen anfängt Elemente übereinander zu schieben.

Was nach meiner - sehr beschränkten Erfahrung - nur klappt wenn man entweder Glück hat, oder den Rest sauber anpasst.

Hier ist es aber denk ich unnötig.

TEST:

JavaScript

// JavaScript Document
// BookmarkCount.uc.js - modified #xx TEST
// Author BrokenHeart
// Modified by Mira / Horstmann
// Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229536#post1229536
// Endor Repository Link Source https://github.com/Endor8/userChrome.js/blob/master/Firefox%20115/BookmarkCount.uc.js



(function() {

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


    //Custom icons in profile/chrome/icons folder, code shared by Mira

    let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
    let icon1 = "folder3neuFat2b.png"   // flower.png
    let icon2 = "faviconfull.svg"

    function setFunction() {

        const css =`


            /**  Basics  **/

            /* Font Size / font weight counter , disable to use default  / fonts list */
            :root {
                --counter_fontsize: 11px;   
                /*--counter_fontweight: 800;*/     
                --counter_fonts: "Droid Sans Mono", "SF Mono", "Andale Mono", monospace;   
                /*--counter_fonts: Consolas, "Lucida Console", "Courier New", monospace;*/   
            }

            /* Fix container content vertical centering for first / folder counter */ 
            hbox.menu-accel-container.countClass1 {
                align-items: center !important;
            }

            /* Disable default left margin */ 
            .countClass1 label {
                margin-inline: 0px !important;
            }

            /* Folder counter box distance left / right */
            hbox.menu-accel-container.countClass1 {
                margin-left: 16px !important;                  /* minimum distance to left */ 
                margin-right: 4px !important;       /* distance to Items / links counter box */ 
            }

            /****  folder counter box  ****/

            /* Icon */
            .countClass1::before {
                content: "";
                /*background-image: url(${profilePath}/${icon1});*/         /*  Custom icon  */
                background-image: url("chrome://global/skin/icons/folder.svg");
                background-repeat: no-repeat;
                background-size: 14px;                                                            /* icon size */
                background-position: center;
                margin-right: 4px !important;                            /* distance icon -> counter */
                height: 16px;
                width: 16px;
                /*fill: #c0c0c0;*/         /* .svg icon colour / opacity if usable */
                fill-opacity: 1;
            }

            /* Counter */
            .countClass1::after {
                content: attr(data-value1) !important;
                font-family:  var(--counter_fonts) !important;
                font-size: var(--counter_fontsize) !important;
                font-weight: var(--counter_fontweight) !important;
                color: red !important;                                                  /*  Text 1 colour */
            }


            /****  Items / links counter box  ****/

            /* Icon */
            .countClass2::before {
                content: "";
                /*background-image: url(${profilePath}/${icon2});*/      /*  Custom icon  */
                background-image: url("chrome://browser/skin/bookmark-hollow.svg");
                background-repeat: no-repeat;
                background-size: 14px;                                                         /* icon size */
                background-position: center;
                margin-right: 4px !important;                         /* distance icon -> counter */
                height: 16px;
                width: 16px;
                /*fill: #c0c0c0;*/         /* .svg icon colour / opacity if usable */
                fill-opacity: 1;
            }

            /* Counter */
            .countClass2::after {
                content: attr(data-value2);
                font-family:  var(--counter_fonts) !important;
                font-size: var(--counter_fontsize) !important;
                font-weight: var(--counter_fontweight) !important;
                color: red !important;                                                 /* Text 2 colour */
                margin-right: 4px !important;                               /* distance to arrow */
            }

            /* Arrow right */
            /* Move arrow to the right */
            .countClass2 image {
                order: 1;        
            }


           /** Extra stuff  **/

           /*  Some fonts not centered Fix, optional, experimental  */
           /* .countClass1::after, .countClass2::after {
                height: var(--counter_fontsize) !important;                  
            }*/


            /*  Outline only for testing  */ 
            menu.menu-iconic.bookmark-item {
                 outline: 1px solid orange !important;
                 outline-offset: -8px !important;
            }

            /*  Background only for testing  */ 
            .countClass1::after, .countClass2::after {
                 outline: 1px solid green !important;
                 outline-offset: -1px !important;
                 background-color: lightblue;
            }

        `;

        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('popupshowing', onPopupShowing ); 
        if(bookMenu)
            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;
              
              // Folder counter, 2 digits
              let label1 = item.childNodes[3];
              label1.classList.add('countClass1');
              let strCountOut1 = String(menuCount).padEnd(2,  '\xa0');
              label1.setAttribute('data-value1', strCountOut1);

              // Links counter, 3 digits
              let label2 = item.childNodes[4];
              label2.classList.add('countClass2');
              let strCountOut2 = String(menuitemCount).padEnd(3, '\xa0');
              label2.setAttribute('data-value2', strCountOut2);

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

Alles anzeigen

Horstmann

Zitat von Mira_Belle

Sören Hentzschel
Es ging um diesen Code aus Beitrag #231
und das Problem, dass die Ausrichtung genau mit diesem Code
in Windows wohl passt, aber auf dem Mac anders dargestellt wird.
Für "uns" stellt sich nun die Frage, woran das liegen könnte.
Ist es der Code, oder ist es BS abhängig?
Wie kann man das verhindern?

Alles anzeigen

Also, zusammenfassend, hier ist das Problem auf meiner Seite - und eine mögliche Lösung:

Im Script haben wir für den Font: font-family: Consolas, "Lucida Console", "Courier New", monospace !important;.

Auf meinem Mac (High Sierra) sind nicht alle dieser Font vorhanden, laut Browserwerkzeugen wählt Fx / mein OS daraus Courier New aus.

Damit ist die Schrift in ihrem Textfeld oben links angeordnet, und eben nicht in der Höhe zentriert (links ist so gewollt).

Siehe erstes Bild im Anhang.

Also hab ich mal in meinen Schriften gekramt und nach Mono Dingens gesucht, und habe diesen Font probiert --> font-family: "Andale Mono" !important;.

Und siehe da: der Text ist zentriert!

Siehe zweites Bild.

Die Frage bleibt, warum (nur bei mir am Mac?) der eine Font passt, und der andere nicht.

Wie man sieht, kenne ich mich mit Fonts übrigens gar nicht aus.

Erstmal ist das aber eine Lösung auf meiner Seite, auch wenn ich mir noch einen hübscheren Font suchen werde - der dann hoffentlich passt...

Hier das dazugehörige, unaufgeräumte TEST Script:

JavaScript

// BookmarkCount.uc.js  TEST


(function() {

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

    let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
    let icon1 = "folder3neuFat2b.png"   // flower.png
    let icon2 = "faviconfull.svg"

    function setFunction() {

        const css =`
            .countClass1::before {
                content: "";
                /*background-image: url(${profilePath}/${icon1});*/          /*  TEST  */
                background-image: url("chrome://global/skin/icons/folder.svg");
                background-repeat: no-repeat;
                background-size: 16px;  /* icon size */
                background-position: center;
                margin-right: 4px !important;       /* Abstand bis zum "Wert" der Ordner */ 
                margin-left: 16px !important;       /* Abstand gesamt links bis zum Titel FIX TEST */ 
                height: 16px;
                width: 16px;
                /*fill: #c0c0c0;*/         /*  TEST  */
                fill-opacity: 1;
            }

    /* Default FX left margin ist 16px !! -->  CHANGE  */ 
            .countClass1 label {
                margin-inline: 0px !important;
            }

            .countClass1::after {
                content: attr(data-value1) !important;
                font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
                /*font-family:  "Andale Mono" !important;*/
                font-size: 12px !important;
                font-weight: 600 !important;
                /*color: #FFD700 !important;    */          /*  TEST  */
                color: red !important;
                background-color: lightblue;          /*  TEST  */
            }


            .countClass2::before {
                content: "";
                /*background-image: url(${profilePath}/${icon2});*/        /*  TEST  */
                background-image: url("chrome://browser/skin/bookmark-hollow.svg");
                background-repeat: no-repeat;
                background-size: 16px;  /* icon size */
                background-position: center;
                margin-right: 4px !important;   /* Abstand bis zum "Wert" der Links */
                margin-left: 4px !important;             /* Abstand bis zum Icon der Links FIX TEST */
                height: 16px;
                width: 16px;
                /*fill: #c0c0c0;*/         /*  TEST  */
                fill-opacity: 1;
            }

            .countClass2::after {
                content: attr(data-value2);
                font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
                /*font-family:  "Andale Mono" !important;*/
                font-size: 12px !important;
                font-weight: 600 !important; 
                /*color: #FFD700 !important;    */          /*  TEST  */
                color: red !important;
                margin-right: 4px !important;  /* Abstand zum Pfeil rechts FIX TEST */
                background-color: lightblue;          /*  TEST  */
            }

            .countClass2 image {
                order: 1;                       /* Pfeil hinter dem "Wert" der Links */
            }

                                             /* Ordner container Inhalt zentriert -->  CHANGE  */ 

            hbox.menu-accel-container.countClass1 {
                align-items: center !important;
            }

                                                              /*  Outline only for testing  TEST2  */ 

            menu.menu-iconic.bookmark-item {
                 outline: 1px solid orange !important;
                 outline-offset: -8px !important;
            }

                                                                              /*  Font center FIX TEST OFF */

           /* .countClass1::after, .countClass2::after {
                height: 12px;                       /* height gleich = font-size */
            }*/

        `;

        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('popupshowing', onPopupShowing ); 
        if(bookMenu)
            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;
              //item.style.color = '#c0c0c0';
              
              let label1 = item.childNodes[3];
  
              label1.classList.add('countClass1');

              let strCountOut1 = String(menuCount).padEnd(2,  '\xa0');     //   FIX TEST

              //let strCountOut1 = String(menuCount).padEnd(2) + '\xa0';     // padEnd2 => zwei Stellen, plus Abstand 
              label1.setAttribute('data-value1', strCountOut1);



              let label2 = item.childNodes[4];
  
              label2.classList.add('countClass2');
              let strCountOut2 = String(menuitemCount).padEnd(3, '\xa0');  // padEnd3 => drei Stellen, Abstand bei nur einer Ziffer    
              label2.setAttribute('data-value2', strCountOut2);

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

Alles anzeigen

Zitat von Sören Hentzschel

Wenn ich zu irgendetwas was sagen soll, dann bitte ich darum, mir in einem Beitrag den Code mitzuteilen, den ich testen soll und 1:1 kopieren kann, ohne mir noch aus anderen Beiträgen Informationen suchen zu müssen. Mir ist es in diesem Thread nämlich mittlerweile deutlich zu unübersichtlich geworden mit den vielen Nutzern und ihren jeweils eigenen Varianten.

Geht mir genauso.

S. oben für eine Übersicht.

Zitat von FuchsFan

Zitat von Horstmann

ich vermute auch dass bei dreistelligen Linkzahlen (der rechte Zähler), die Sache nicht passt.

Doch, passt!
Die Breite ist mit width: 25px !important; auf drei Stellen eingestellt.

Bitteschön

Ah, verstehe, geht so auch, danke für den Code.

Ich mach's etwas anders, v.a. weil der blaue Hintergrund bei mir nur zum Testen verwendet wird, und das height/width für die Texte ein etwas grober Test-Hack war.

Aber wenns passt...

Horstmann

Zitat von FuchsFan

Zitat von Horstmann

Gut beobachtet, das ist denk ich durch die unterschiedliche Art des Paddings für den ersten und zweiten Zahlenblock.

Das habe ich mit Eurem Code so gelöst, eventuell hilft es weiter (oben letzter Screenshot von mir).

Da wäre der gesamte Code sinnvoll zu sehen, ich vermute auch dass bei dreistelligen Linkzahlen (der rechte Zähler), die Sache nicht passt.

Horstmann

Zitat von omar1979

Zitat von Horstmann

Benötigt hier auch keine Icons zum einfacheren testen, klaut von Fx.

Bedeutet das, dass man in diesem Script keine Icons laden kann?

Doch, nur die beiden Zeilen bei background-image ändern, bzw, die /**/ Komentare versetzen.

Aber wie Mira sagt, das ist nur ein Test, nicht zur Anwendung.

Die offiziellen Mira-Varianten kommen von Mira_Belle ; meine eigene Variante vom Basisscript ist vor ein paar Seiten gepostet.

Mira's gefällt mir aber besser, weil man nicht rumrechnen muss, nur die Schrift passt bzw. gefällt mir noch nicht.

Übrigens ist in deinem Dadateipfad der Ordnername Icons mit grossem 'I', im Script kleingeschrieben icons.

Macht bei mir keinen Unterschied, sag nur.

Horstmann

Zitat von omar1979

Sorry wenn ich mich irre, aber auf deinem Letzten Bild sehe ich das blaue Feld mit dem Anzahl und das Stern-Icon überschneiden sich. Ist das evtl extra gemacht?

Gut beobachtet, das ist denk ich durch die unterschiedliche Art des Paddings für den ersten und zweiten Zahlenblock.

Ohne Hintergundfarbe etc. ist es evtl. kein Problem.

Zitat von Mira_Belle

Zitat von Horstmann

Hmm, seltsam, bei mir muss ich das noch zu deinem Script hinzufügen , damit das Textfeld gesamt niedriger und damit der Text zentriert wird:
Vielleicht tatsächlich ein OS Dingens, und diese Schrift wird auf meinem Mac anders plaziert als bei dir.

Kopfkratz.

Ja, seltsam...

Hier noch ein etwas wirres Testscript, basierend auf einem von deinen, bei dem passt bei mir alles anscheinend;

Abgesehen natürlich von dem einen Ordner mit dreistelliger Ordnerzahl; aber der ist nur zum Testen, das ist unrealistisch und hatten wir ja schon erwähnt.

Das erste Textfeld hab ich einfach genauso eingerichtet wie dein 2tes, dann gibt's auch keine optischen Überschneidungen wie von omar1979 erwähnt.

Hast du ja auch schon anders aufgebaut im Script in #243.

Benötigt hier auch keine Icons zum einfacheren testen, klaut von Fx.

Natürlich ist das aber dein Script, sind alles nur Vorschläge!

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

(function() {

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

    let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
    let icon1 = "folder3neuFat2b.png"   // flower.png
    let icon2 = "faviconfull.svg"

    function setFunction() {

        const css =`


                                                        /*  Variable Font Size CHANGE2 TEST2  */
            :root {
                --counter_fontsize: 12px;                      
            }

                                                      /*  Outline only for testing  TEST2  */ 

            menu.menu-iconic.bookmark-item {
                 outline: 1px solid orange !important;
                 outline-offset: -8px !important;
            }


            .countClass1::before {
                content: "";
                /*background-image: url(${profilePath}/${icon1});*/          /*  TEST  */
                background-image: url("chrome://global/skin/icons/folder.svg");
                background-repeat: no-repeat;
                background-size: 14px;  /* icon size */         /*  TEST  */
                background-position: center;
                margin-left: 16px !important;    /* Abstand links minimum für schmale Popus  CHANGE  */ 
                margin-right: 4px !important;    /* Abstand bis zum "Wert" der Ordner CHANGE  */ 
                height: 16px;
                width: 16px;
                /*fill: #c0c0c0;*/         /*  TEST  */
                fill-opacity: 1;
            }
                                             /* Default FX left margin ist 16px !! -->  CHANGE  */ 
            .countClass1 label {
                margin-inline: 0px !important;
           }

            hbox.menu-accel-container.countClass1 {
                align-items: center !important;
            }

            .countClass1::after {
                content: attr(data-value1) !important;
                font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
                font-size: var(--counter_fontsize) !important;                           /* CHANGE2 TEST2  */
                font-weight: 900 !important;
                color: red !important;                     /*  TEST  */  
                background-color: lightgrey;          /*  TEST  */
                height: var(--counter_fontsize);        /* height = font size Text zentriert CHANGE2  TEST2  */
            }


            .countClass2::before {
                content: "";
                /*background-image: url(${profilePath}/${icon2});*/        /*  TEST  */
                background-image: url("chrome://browser/skin/bookmark-hollow.svg");
                background-repeat: no-repeat;
                background-size: 12px;  /* icon size */         /*  TEST  */
                background-position: center;
                margin-right: 4px !important;   /* Abstand bis zum "Wert" der Links */
                margin-left: 4px !important;   /* Abstand bis zum Icon der (Links) ORDNER  CHANGE */
                height: 16px;
                width: 16px;
                /*fill: #c0c0c0;*/         /*  TEST  */
                fill-opacity: 1;
            }

            .countClass2::after {
                content: attr(data-value2);
                font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
                font-size: var(--counter_fontsize) !important;                            /* CHANGE2 TEST2  */
                font-weight: 900 !important; 
                color: red !important;                     /*  TEST  */
                margin-right: 4px !important;  /* Abstand zum Pfeil rechts CHANGE */
                background-color: lightblue;         /*  TEST  */
                height: var(--counter_fontsize);       /* height = font size Text zentriert CHANGE2 TEST2  */
                /*margin-top: 4px;*/                                 /* Text unten buendig OPTIONAL 2  */
            }


            .countClass2 image {
                order: 1;                       /* Pfeil hinter dem "Wert" der Links */
            }
        `;

        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('popupshowing', onPopupShowing ); 
        if(bookMenu)
            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;
              //item.style.color = '#c0c0c0';
              
              let label1 = item.childNodes[3];
  
              label1.classList.add('countClass1');

              let strCountOut1 = String(menuCount).padEnd(2, '\xa0');  //  CHANGE!  TEST2

              //let strCountOut1 = String(menuCount).padEnd(2) + '\xa0';     // padEnd2 => zwei Stellen, plus Abstand 
              label1.setAttribute('data-value1', strCountOut1);

              let label2 = item.childNodes[4];
  
              label2.classList.add('countClass2');
              let strCountOut2 = String(menuitemCount).padEnd(3, '\xa0');  // padEnd3 => drei Stellen, Abstand bei nur einer Ziffer    
              label2.setAttribute('data-value2', strCountOut2);

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

Alles anzeigen

Horstmann

Zitat von Mira_Belle

Zitat von Horstmann

Der Text der Zählereinheiten ist allerdings immer noch zur oberen Kante hin ausgerichtet, statt mittig.
Der blaue Kasten ist das Textfeld, man sieht dass der Text nicht vertikal zentriert ist wie der Rest der Zeile.

Also bei mir ist es mit Deinem ergänzendem Code mittig!
Und hier der Code dazu

Hmm, seltsam, bei mir muss ich das noch zu deinem Script hinzufügen , damit das Textfeld gesamt niedriger und damit der Text zentriert wird:

CSS

            .countClass1::after, .countClass2::after {
                height: 12px;                       /* height gleich = font-size */
            }

Im ersten Bild dein letzter Code ohne, im zweiten Bild mit der Ergänzung, sonst nur die Icons getauscht.

Vielleicht tatsächlich ein OS Dingens, und diese Schrift wird auf meinem Mac anders plaziert als bei dir.

Horstmann

Zitat von FuchsFan

Da kann man was draus machen, wieso eigentlich nicht?

Ah, noch ein Freund der schönen Farbe Blau!

War aber eigentlich nur zum Testen eingebaut.

Horstmann

Zitat von Mira_Belle

Bist Du benachrichtigt worden?

Nein, auch nicht bei deinen anderen Posts mit nur meinem Link drin.

Zitate funktionieren, wie Andreas gerade geschrieben hat, nicht aber Links.

Horstmann

Zitat von Mira_Belle
Zitat von Horstmann

In deinem Screenshot von #225 sind die Zahlen allerdings genauso vertikal versetzt, wie bei meinem Test deiner letzten Version.

Stimmt, habe ich gerade auch gemerkt, ist zwar nur 1px, aber halt doch versetzt!
Danke für den Hinweis.
Habe also auch
CSS
    /* Default FX left margin ist 16px !! -->  CHANGE  */ 
            .countClass1 label {
                margin-inline: 0px !important;
            }
    /* Ordner container Inhalt zentriert -->  CHANGE  */ 
            hbox.menu-accel-container.countClass1 {
                align-items: center !important;
            }
hinzugefügt.
Ist's mit den neuen Variablen besser?
Alles anzeigen

Viel besser - mit nur dem 2ten Teil !

Sind aber mehr als 1 Pixel Versatz gewesen, eher 2.

Damit der 1ste Teil mit deinem letzten Script funktioniert, müsste man noch die ganzen anderen Margins anpassen, das ist aber weniger das Problem.

Der Text der Zählereinheiten ist allerdings immer noch zur oberen Kante hin ausgerichtet, statt mittig.

Der blaue Kasten ist das Textfeld, man sieht dass der Text nicht vertikal zentriert ist wie der Rest der Zeile.

Ist aber kein Drama, das kann man bestimmt leicht verschieben wenn's stört.

Was wirklich hilft sind Screenshots zu den Codes - mach ich auch nicht immer - aber dann hat man einen besseren Vergleich.

Horstmann

Zitat von Mira_Belle

Was a angeht, war alles i.O., so wie von mir gedacht.
Warum bei Dir auf dem Mac mit den Grüßen und den Positionen so komisch ist

In deinem Screenshot von #225 sind die Zahlen allerdings genauso vertikal versetzt, wie bei meinem Test deiner letzten Version.

(Übrigens: wenn du einem Usernamen ein @ vorstellst (rote Outline als Ergebnis), bekommt dieser User (evtl.) eine Mitteilung darüber erwähnt worden zu sein.

Wenn du nur einen Link zum Userprofil einstellst, dann nicht.

Mira_Belle vs. Mira_Belle . )

Beiträge von Horstmann

In diesem Script NACH dem Text "Anzahl Ordner / Anzahl Links." bzw. "Anzahl Ordner / Anzahl Link(s) -> Link(s) in Tab(s) öffnen" einen Separator setzen.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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