Beiträge von Horstmann

Horstmann

Zitat von Sören Hentzschel
Meinst du nicht, dass das Overengineering ist? Wer ein Script nutzt, sollte in der Lage sein, entsprechende Grafiken abzulegen oder eine Option im Code zu ändern, um die Darstellung entsprechend anzupassen. Für ein „Fallback“ müsstest du immer erst prüfen, ob die Grafik existiert. Das wird nicht ohne Verzögerung möglich sein und wird dann ja auch immer ausgeführt, wenn es die Grafik gibt. Ich sehe da die Kosten höher als den Nutzen.
Ich habe das nicht im Kontext des Scripts und mit einer lokalen Datei getestet, aber die Idee wäre sonst wohl sowas in der Art:
JavaScript
const img = document.createElement('img');
img.onerror = function () {
  // Grafik existiert nicht, implementiere die Fallback-Logik
}
img.src = 'pfad/zur/datei.png';

Das ist ein guter Punkt; es sollte eigentlich anzunehmen sein, dass der Benutzer von so einem Script sich das anpassen kann.

Vielleicht wäre es sinnvoller, das Fallback Icon von Firefox ganz rauszulassen, oder als auskommentierte Option im CSS Teil zu einzubinden.

Dankeschön för den Code ; ich bin beim Recherchieren auf ähnliche onerror Lösungen gestossen - leider haperts am konkreten Implementieren, mangels Kenntnis.

Zitat von Mira_Belle

Horstmann
Oh, ich hätte da was!
Es geht um ein Skript, welches Icons in der Adresszeile einfügt!
Kannst ja mal reinschnuppern.

Dankeschön, schau ich mir an!

Horstmann

Ich bastle gerade an einer Scriptversion für dieses Thema, und es gibt da noch eine Frage, auf die ich keine Antwort finde.

Das Script benutzt eine Kombination aus JS und CSS, um selber definierte Icons für die beiden erzeugten Zähler bereitzustellen.

Meine Version soll zwei von Firefox übernommene Icons bereitstellen, für Leute die keine eigenen Icons haben, aber es auch erlauben solche eigenen Icons zu benutzen.

Was so auch klappt, aber der User muss manuell das Script editieren, um seine eigenen Bilder benutzen zu können.

Idealerweise gäbe es im Script eine Funktion, die im Falle eines nicht vorhandenen/gefundenen/fehlerhaften User Icons automatisch das Icon von Firefox als Alternative/Fallback lädt.

Hier das Script, die relevanten Einträge sind wohl die Zeilen 20 - 22, sowie 74 - 75 und 101 -102.

JavaScript

// JavaScript Document
// BookmarkCount.uc.js - modified for element separation #7
// Author BrokenHeart
// Modified by Mira_Belle / Horstmann / Forum members
// 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

    let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
    let icon1 = "YourFolderIcon.png" 
    let icon2 = "YourLinkIcon.svg"

    function setFunction() {

        const css =`


            /**  Basics  **/


            /* Basic distances / Font Size / font weight counter , disable to use default  /  Fonts list monospace */

            :root {
                --basic_distance: 4px;   
                /*--counter_fontsize: 11px;*/   
                /*--counter_fontweight: 800;*/     
                --counter_fonts: "Droid Sans Mono", "SF Mono", "Andale Mono", 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 for label */ 
            .countClass1 label {
                margin-inline: 0px !important;
            }

            /* Use label as divider, optional, un-comment to use */ 
            /*.countClass1 label {
                height: 12px !important;
                width: 1px !important;
                background-color: red !important;
                order: 1;    
                margin-inline: calc(var(--basic_distance) + 4px) 3px !important;  
            }*/


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


            /* Folder counter box distance left / right */
            hbox.menu-accel-container.countClass1 {
                margin-left: 16px !important;                                 /* minimum distance to left for narrow windows */ 
                margin-right: calc(var(--basic_distance) + 2px) !important;  /* distance to Items/links counter box */ 
            }

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

            /* Counter 1 */
            .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 2 */
            .countClass2::before {
                content: "";
                background-image: url("chrome://browser/skin/bookmark-hollow.svg");  /* Fx icon */
                /*background-image: url(${profilePath}/${icon2});*/    /*  Custom icon, uncomment */
                background-repeat: no-repeat;
                background-size: 16px;                                                           /* icon 2 size */
                background-position: center;
                margin-right: var(--basic_distance) !important;   /* distance icon -> counter */
                height: 16px;
                width: 16px;
                /*fill: #c0c0c0;*/                                /* .svg icon colour / opacity if applicable */
                fill-opacity: 1;
            }

            /* Counter 2 */
            .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 */
            }

            /* Arrow right */
            /* Move arrow to the right, distances */
            .countClass2 image {
                order: 1;    
                margin-left: var(--basic_distance) !important;  /* distance Counter 2 <-- arrow */    
                margin-right: 0px !important;                        /* distance arrow  -->  box border */
            }


           /** Extra stuff  **/

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


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

        `;

        const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
        const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
        sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

        let bmbMenu = document.getElementById('bookmarks-menu-button');
        let bookMenu = document.getElementById('bookmarksMenu');
        let persToolBar = document.getElementById('PersonalToolbar');
        
        if(bmbMenu)
            bmbMenu.addEventListener('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 // Numbers aligned right // use padEnd for left
              let label1 = item.childNodes[3];
              label1.classList.add('countClass1');
              //let strCountOut1 = String(menuCount).padStart(2,  '\xa0');  // Keine Klammern // No Brackets
              let strCountOut1 = String("[" + menuCount + "]").padStart(4,  '\xa0');     // Klammern // Brackets

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

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

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

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

Alles anzeigen

Ein Versuch mit CSS war schon, zB in Zeile 76 sowas einzufügen: background-image: url(${profilePath}/${icon1}), url("chrome://global/skin/icons/folder.svg"); ; was dann aber zu doppelt angezeigten Bildern führt (bei transparenten Bildteilen); ist auch keine elegante oder leistungseffiziente Lösung vermute ich.

Horstmann

Zitat von omar1979

Zitat von Horstmann

Probier spasseshalber mal das:

Das passt, wenn ich etwas mit den inline-werte spiele.
Ich glaub ich benütze bis auf weiteres das Script im Beitrag-Nr. 296

Das ist aber das gleiche wie das von #230, nur mit 2 Änderungen provisorisch reingedrängt.

Das aktuelle Script von Mira_Belle ist hier, wenn ich das noch alles richtig überblicke.

Horstmann

Zitat von omar1979
Zitat von omar1979
Zitat von Horstmann

Was ist denn dein CSS Code dafür?

Das wäre eine.
CSS
/* Menü-Separator von allen Menüs im Menübar entfernen*/
#main-menubar menuseparator {
  display: none !important;
  }
Da hab ich jetzt noch eine Code gefunden. Welches das anspricht weiss ich grad nicht und steht auch nichts.
Wobei ich im Kontextmenü-Rechtsklick.css gefunden habe.
CSS
    menupopup menuseparator{
    display: none !important;}

~~Verstehe, dann vielleicht sowas, wenn der andere Code nicht geht:~~

~~Korrektur, beide deiner Codes sprechen bei mir nicht die gewünschten Separatoren an, und schalten sie auch nicht ab.~~

~~Also vielleicht doch einfach das in die bestehende userChrome.css, oder noch besser erstmal den exakten Code finden, der auch diese speziellen Separatoren versteckt.~~

UUUnd nochmal Korrektur, sorry...

menupopup ...etc. spricht auch diese Separatoren an, vielleicht ist das der relevante Code, falls es nicht noch andere gibt für diese Elemente.

Eine oder veilleicht beide dieser Varianten könnte klappen, in die userChrome.css zum unveränderten alten Code:

CSS

menuseparator.bookmarks-actions-menuseparator {
    display: flex !important;
}

CSS

menupopup menuseparator.bookmarks-actions-menuseparator {
    display: flex !important;
}

Horstmann

Zitat von omar1979

Zitat von Horstmann

Probier vielleicht das mal, zusätzlich zu deinem Code:

Zu welchem code?

Zu dem den du schon hast, mit dem alle Separatoren aus sind; einfach mal den extra Code mit in die userChrome.css reinbauen.

Der Code den du gepostet hast schaltet den vom Script generierten Separator bei mir übrigens nicht aus, aber ist egal.

Zitat von Mira_Belle
Zitat von omar1979
CSS
/* Menü-Separator von allen Menüs im Menübar entfernen*/
#main-menubar menuseparator {
  display: none !important;
  }
.
D.H. Du musst jeden Separator in Deinen Menüs einzeln ansprechen müssen,
also alle, die Du ausblenden willst, bis auf den Einen, den Du halt behalten willst.
Es sei denn, es gäbe eine Möglichkeit per CSS EINE Ausnahme für genau EIN Element zu definieren.
Glaube ich aber nicht!

Geht schon im Prinzip:

CSS

menuseparator:not(.bookmarks-actions-menuseparator) {
  display: none !important;
  }

Oder sowas, mit spezifischerem Code den allgemeineren aushebeln:

CSS

menuseparator {
  display: none !important;
  }


menuseparator.bookmarks-actions-menuseparator {
    display: flex !important;
}

Kommt halt immer drauf an, gibt ja diverse Separatoren, die man evtl. mal mehr oder weniger leicht ansprechen kann.

Horstmann

Probier vielleicht das mal, zusätzlich zu deinem Code:

CSS

menuseparator.bookmarks-actions-menuseparator {
    display: flex !important;
}

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.

Beiträge von Horstmann

Alternatives/Fallback Icon mit Javascript oder CSS festlegen?

Alternatives/Fallback Icon mit Javascript oder CSS festlegen?

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

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.

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.

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.

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