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

harff182

Zitat von oldman53

Wäre ebenso eine Möglichkeit, ich bin aber interessiert / wissbegierig zum Aufwand vs Nutzen.

Ich habe mir vor vielen (14)Jahren das Rauchen dank E-Dampfen abgewöhnt und das Dampfen wurde zum Hobby.

So hab ich z.b. einen Ordner "Geekvape" in dem ich normale Links (Homepage, Verdampfer-Seiten) als auch Ordner für die diversen Verdampfer habe.

In den Verdampfer-Ordnern habe ich entweder Links zu Shops oder für jedes Modell einen Unterordner.

In den Modell-Unterordnern habe ich wieder jeweils Links zu Shopseiten oder für Zubehör je einen Unterordner.

Hinzu kommen noch Links zu YT-Video-Reviews oder Threads in einem Dampferforum.

Neben der Sortierung habe ich (als Gewohnheitstier) dadurch auch einen schnellen Überblick.

Hört sich komisch an, is aber so

oldman53

Zitat von Mira_Belle

es ist viel mehr "Hobby" und da fragt auch kein Mensch nach nutzen

Das ist eine Antwort mit Aussagekraft, im Gegensatz zu der von FuchsFan.

Mira_Belle

Ok, nachdem das mit dem Nutzen geklärt ist, können wir uns ja wieder dem Skript widmen.

Ich habe immer noch keine Lösung "meines" Wunsches finden können.

Dahast Du, BrokenHeart, was angerichtet!

Aber vielleicht hast ja Du eine Idee, wie man eine SVG-Grafik da zwischen "+ menuCount +" & "+ menuitemCount +" bekommen kann.

Irgendwie muss das auseinander gedrößelt werden!

Einmal Zähler für die Ordner, ein mal Zähler für die Links.

Aber wie das mit der Zeile, mit dem Anzeigen und der Anordnung sein soll, ich habe da absolut keine Idee (mehr).

FuchsFan

Zitat von oldman53

Das ist eine Antwort mit Aussagekraft, im Gegensatz zu der von FuchsFan.

Musst Du ignorieren, wenn es Dir nicht gefällt.

Ich frage mich nur, wenn du das Thema intensiv verfolgt hättest, dann wüsstest Du, welche "Kleinigkeiten" hier auseinander genommen werden. Ob zum Nutzen, oder als Hobby, das bleibt jedem selbst überlassen.

Nur noch der Hinweis, bitte keine Diskussion mehr zu dieser Angelegenheit, nur noch zum Thema selbst.

Horstmann

Zitat von Mira_Belle

Aber vielleicht hast ja Du eine Idee, wie man eine SVG-Grafik da zwischen "+ menuCount +" & "+ menuitemCount +" bekommen kann.
Irgendwie muss das auseinander gedrößelt werden!
Einmal Zähler für die Ordner, ein mal Zähler für die Links.

Wenn du darauf bestehst , hier ein sehr! grober Test zur Trennung der beiden Einträge:

JavaScript

(function() {

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

    function setFunction() {

        const css =`
            .countClass1::before {
                content: attr(data-value1); 
                color: red;
                /*margin-right: 0px;
                order: -1;*/
                order: 1;
            }

            .countClass2::before {
                content: attr(data-value2); 
                color: green;
                /*order: 1;*/
            }

        `;

        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;
              
              let label1 = item.childNodes[3];
  
              label1.classList.add('countClass1');
              let strCountOut1 = "  (" + menuCount + ")"
              label1.setAttribute('data-value1', strCountOut1);

              let label2 = item.childNodes[4];
  
              label2.classList.add('countClass2');
              let strCountOut2 = "  (" + menuitemCount + ")"
              label2.setAttribute('data-value2', strCountOut2);

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

Alles anzeigen

Zusätzlich hab ich dann noch diese CSS; Dateinamen und Pfade anzupassen:

CSS

 .countClass1::after {
    content: url("icons/bild.png") !important;
}

.countClass2::after {
    content: url("icons/bild2.png") !important;
    order: -1;
}

Wie gesagt sehr grob das Ganze, aber falls du damit spielen willst...

grisu2099

Habe fertig...

Basis ist der CSS-Code aus #198 und ein gegenüber der gestrigen Version minimal verändertes Skript:

JavaScript

(function() {

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

    function setFunction() {

        const css =`
            .countClass::after {
                content: attr(data-value);
                font-family:  Consolas, "Lucida Console", "Courier New", monospace;
                font-size: 16px;
                color: lightgreen;
                padding-right: 26px;
            }
        `;

        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;
              
              let label = item.childNodes[3]; //label.menu-iconic-text
  
              label.classList.add('countClass');
//              let strCountOut = + String(menuCount) + " 📂" + " / " + String(menuitemCount).padStart(2, '\xa0') + " ⭐" ;
              let strCountOut = + String(menuCount) + '\xa0' + '\xa0' + " / " + String(menuitemCount).padStart(2, '0');
              label.setAttribute('data-value', strCountOut);

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

Alles anzeigen

CSS

.countClass {
    background-image: url("file:///F:/FIREFOX-ICONS/Icons/folder-blue.png"),
                      url("file:///F:/FIREFOX-ICONS/Icons/Stern-blau.png") !important;
    background-size: 16px 16px !important;
    background-repeat: no-repeat !important;
    background-position: 35px, right 5px center !important;
    }

Edit: Bei Zeilen mit mehr als 10 Unterordnern müssen diese noch individuell angepaßt werden...

Da das bei mir nur 1 Zeile betrifft, ist es (für mich) nicht so schlimm.

2002Andreas

Zitat von grisu2099

Habe fertig...

Ich nutze das zwar nicht, aber

grisu2099

Ob ich das dann so nutzen werde, weiß ich noch nicht - mich hat die Aufgabe gereizt.

Zitat von 2002Andreas

Dafür hat sich die Arbeit schon gelohnt...

Sicher läßt sich das noch verfeinern.

2002Andreas

Zitat von grisu2099

mich hat die Aufgabe gereizt

Geht mir manchmal auch so.

Zitat von grisu2099

Sicher läßt sich das noch verfeinern.

Das mag evtl. so sein, aber wir sind doch fast alles keine Fachleute die das gelernt bzw. studiert haben.

Fachleute schreiben einen Code oder ein Skript...wir müssen testen..testen usw.

Fakt ist, du hast eine Lösung gefunden, wer sie ändern bzw. anpassen möchte, kann das doch dann gerne machen.

grisu2099

So sieht´s aus.

Ich werde die gestrige Lösung nutzen.

Horstmann

Wer Lust hat, kann ~~sich auch damit mal rumplagen~~ auch das hier mal testen; immer noch nicht elegant, die Reihenfolgen der Elemente sind seltsam, aber könnte halbwegs passen ...

JavaScript

(function() {

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

    function setFunction() {

        const css =`
            .countClass1::after {
                content: attr(data-value1); 
                color: red;
            }

            .countClass2::after {
                content: attr(data-value2); 
                color: green;
            }
        `;

        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;
              
              let label1 = item.childNodes[3];
  
              label1.classList.add('countClass1');
              let strCountOut1 = "(" + menuCount + ")"
              label1.setAttribute('data-value1', strCountOut1);

              let label2 = item.childNodes[4];
  
              label2.classList.add('countClass2');
              let strCountOut2 = "(" + menuitemCount + ")"
              label2.setAttribute('data-value2', strCountOut2);

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

Alles anzeigen

Und dazu in userChrome.css, Bilder und ihre Pfade sind wieder anzupassen:

CSS

.countClass1::before {
    content: url("icons/bild1.png") !important;
    margin-inline: 16px 4px !important;
   height: 16px !important;
}

.countClass2::before {
    content: url("icons/bild2.png") !important;
    margin-inline: 4px !important;
   height: 16px !important;
}

.countClass2::after {
    margin-inline: 0 4px !important;
}

hbox.menu-accel-container.countClass1 label.menu-iconic-accel {
    margin-inline: 0px !important;
}

hbox.menu-right.countClass2 image {
    order: 2;
}

Alles anzeigen

Mira_Belle

Als erstes möchte ich mich mal ganz lich bei Euch allen bedanken.

Zitat von grisu2099
Habe fertig...

Basis ist der CSS-Code aus #198 und ein gegenüber der gestrigen Version minimal verändertes Skript:
CSS
.countClass {
    background-image: url("file:///F:/FIREFOX-ICONS/Icons/folder-blue.png"),
                      url("file:///F:/FIREFOX-ICONS/Icons/Stern-blau.png") !important;
    background-size: 16px 16px !important;
    background-repeat: no-repeat !important;
    background-position: 35px, right 5px center !important;
    }
Edit: Bei Zeilen mit mehr als 10 Unterordnern müssen diese noch individuell angepaßt werden...
Da das bei mir nur 1 Zeile betrifft, ist es (für mich) nicht so schlimm.

Das hat mich auf die richtige Spur gebracht.

Hatte ja auch schon einige Male an dem CSS herumgeschraubt, war aber nicht von Erfolg gekrönt,

daher auch meine falsche Vermutung, dass das irgendwie per Skript gehen müsste.

Wobei, es war ja von beidem etwas.

Nun, jetzt schaut es so aus, wie ich mir das vorstellte.

Danke noch mal.

Und hier der passende Code dazu:

JavaScript

// JavaScript Document
// BookmarkCount.uc.js
// Author BrokenHeart
// Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229536#post1229536
//
// Korrektur von BrokenHeart
// Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229696#post1229696
// 
// Erweiterung von Sören Henschel
// Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229555#post1229555
//
// Anpassung von Mira_Belle inspiriert durch grisu2099
// Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229875#post1229883

(function() {

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

  let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))            
  let ico1 = "folder_org.svg"
  let ico2 = "bookmark-hollow.svg"

  function setFunction() {

    const css =`
      .countClass::before {
        content: url(${profilePath}/${ico1});
        display: inline-block;
        vertical-align: middle;
        width: 16px; /* Breite des Icons anpassen */
        height: 16px; /* Höhe des Icons anpassen */
        margin-right: -20px; /* Abstand zwischen Symbol und Text anpassen */
      } 
      .countClass::after {
        content: attr(data-value);
        font-family:  Consolas, "Lucida Console", "Courier New", monospace;
        font-size: 13px;
        font-weight: 600;
        color: red;
        padding-right: 26px;
      }
      .countClass {
        background-image: url(${profilePath}/${ico2}); !important;
        background-size: 16px 16px !important;
        background-repeat: no-repeat !important;
        background-position: 35px, right 5px center !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;        // Hinzugefügt
        itemPopup.collapsed = true;     // Hinzugefügt
        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;         // Hinzugefügt
        itemPopup.collapsed = false;      // Hinzugefügt
              
        let label = item.childNodes[3]; //label.menu-iconic-text
        item.style.color = 'silver';

        label.classList.add('countClass');

        let strCountOut = + String(menuCount).padEnd(2, '\xa0') + '\xa0' + '\xa0' + '\xa0' + '\xa0' + String(menuitemCount).padEnd(3, '\xa0');

        label.setAttribute('data-value', strCountOut);

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

Alles anzeigen

Horstmann

Zitat von Mira_Belle

Nun, jetzt schaut es so aus, wie ich mir das vorstellte.
Und hier der passende Code dazu:

Wenn du mehrstellige Nummern in beiden Anzeigen hast, oder auch nur der ersten, passt es dann immer noch?

Ich habe mal das Script kurz mit eigenen .png Icons probiert, das passt sich bei mir nicht an, und müsste generell justiert werden.

Ich denke man sollte die beiden Einträge im Script trennen, ähnlich wie ich das oben amateurisch probiert habe.

Mira_Belle

Zitat von Horstmann

Wenn du mehrstellige Nummern in beiden Anzeigen hast, oder auch nur der ersten, passt es dann immer noch?

Ja!

Zeile 36 Abstand für das erste Symbol. Musst mit rumspielen.

Zeile 105, da kann es sein, dass du noch einmal das "Leerzeichen" '\xa0' + einfügen oder Löschen musst.

Ausprobieren.

Erst Zeile 36, bis die Position des ersten Symbols passt, danach Zeile 105 anpassen

BrokenHeart

@alle Individuellen Anpasser oder angepassten Individualisten:

😁👍

"Yeah, that's the spirit...", in diesem Unterforum.

Mira_Belle

@Horstmann

Kommando zurück

Zeile 36 => margin-right: -20px !important;

Zeile 50 => background-position: 45px, right 5px center !important;

Zeile 103 => let strCountOut = '\xa0' + String(menuCount).padEnd(2, '\xa0') + '\xa0' + '\xa0' + '\xa0' + '\xa0' + String(menuitemCount).padEnd(3, '\xa0');

Versuch es mal.

Habe für mich noch etwas an den Abständen gefeilt!

Zeile 36 => margin-right: -27px !important;

Zeile 44 => gelöscht, da keine Relevanz

Zeile 49 => background-position: 37px, right 5px center !important;

Zeile 102 => let strCountOut = '\xa0' + String(menuCount).padEnd(2, '\xa0') + '\xa0' + '\xa0' + '\xa0' + String(menuitemCount).padEnd(3, '\xa0'); Man beachte, ein '\xa0' + weniger!

Kurze Erkärung.

In Zeile 36 wird die Position des ersten Symbols bestimmt, die Position des zweiten Symbols wird dadurch aber auch beeinflusst!

In Zeile 44 wird der Abstand zwischen erstem und zweitem Symbol festgelegt.

Und in Zeile 102 kann man mit '\xa0' + bestimmen, wie weit der erste vom zweiten Wert stehen soll.

Horstmann

Zitat von Mira_Belle

@Horstmann

Kommando zurück
.....
Versuch es mal.

Passt gut, dankeschön!

Ich bleib aber für mich bei meinem Code, da kann ich alles so schön einfach mit CSS anpassen.

Hier meine aktuelle Version, falls mal jemand testen will; dank Mira_Belle `s Icon Code alles im Script, keine extra CSS Code nötig:

JavaScript

// JavaScript Document
// BookmarkCount.uc.js - modified
// Author BrokenHeart
// Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229536#post1229536
// Endor Repository Link 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 ico1 = "iconfolder.png"
    let ico2 = "iconitems.png"

    function setFunction() {

        const css =`

             /*  First icon  /  folder count  /  second icon  /  item count  */

            .countClass1::before {
                content: url(${profilePath}/${ico1});
                margin-inline: 16px 2px !important;
                height: 16px ;
                transform: scale(0.8);
            }

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

            .countClass1::after {
                content: attr(data-value1); 
                color: black;
            }

            .countClass2::before {
                /*content: url(${profilePath}/${ico2});*/
                content: url("chrome://browser/skin/bookmark-hollow.svg");
                /*margin-inline: 0 2px !important;*/
                height: 16px;
                transform: scale(0.8);
                fill: black;
                fill-opacity: 1;
            }

            .countClass2::after {
                content: attr(data-value2); 
                color: black;
                margin-inline: 0 4px !important;
            }

            .countClass2 image {
                order: 1;
            }
        `;

        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;
              
              let label1 = item.childNodes[3];
  
              label1.classList.add('countClass1');
              let strCountOut1 = "(" + menuCount + ")"
              label1.setAttribute('data-value1', strCountOut1);

              let label2 = item.childNodes[4];
  
              label2.classList.add('countClass2');
              let strCountOut2 = "(" + menuitemCount + ")"
              label2.setAttribute('data-value2', strCountOut2);


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

Alles anzeigen

Horstmann

Zitat von BrokenHeart

😁👍
"Yeah, that's the spirit...", in diesem Unterforum.

Danke für die Mühe auch, ohne gäb's nix anzupassen.

Mira_Belle

Zitat von Horstmann

Ich bleib aber für mich bei meinem Code, da kann ich alles so schön einfach mit CSS anpassen.

Hier meine aktuelle Version, falls mal jemand testen will; dank Mira_Belle `s Icon Code alles im Script, keine extra CSS Code nötig:

JavaScript

// JavaScript Document
// BookmarkCount.uc.js - modified
// Author BrokenHeart
// Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229536#post1229536
// Endor Repository Link 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 ico1 = "iconfolder.png"
    let ico2 = "iconitems.png"

    function setFunction() {

        const css =`

             /*  First icon  /  folder count  /  second icon  /  item count  */

            .countClass1::before {
                content: url(${profilePath}/${ico1});
                margin-inline: 16px 2px !important;
                height: 16px ;
                transform: scale(0.8);
            }

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

            .countClass1::after {
                content: attr(data-value1); 
                color: black;
            }

            .countClass2::before {
                /*content: url(${profilePath}/${ico2});*/
                content: url("chrome://browser/skin/bookmark-hollow.svg");
                /*margin-inline: 0 2px !important;*/
                height: 16px;
                transform: scale(0.8);
                fill: black;
                fill-opacity: 1;
            }

            .countClass2::after {
                content: attr(data-value2); 
                color: black;
                margin-inline: 0 4px !important;
            }

            .countClass2 image {
                order: 1;
            }
        `;

        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;
              
              let label1 = item.childNodes[3];
  
              label1.classList.add('countClass1');
              let strCountOut1 = "(" + menuCount + ")"
              label1.setAttribute('data-value1', strCountOut1);

              let label2 = item.childNodes[4];
  
              label2.classList.add('countClass2');
              let strCountOut2 = "(" + menuitemCount + ")"
              label2.setAttribute('data-value2', strCountOut2);


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

Alles anzeigen

Cool, so eine Idee hatte ich auch, nur habe ich es absolut nicht geschafft es so umzusetzen!

Klasse, dass Du es geschafft hast.

Das werde ich mir klauen, denke ich.

Da lassen sich die Anpassungen viel leichter ändern.

--------------------------------------------------------------------------------------------------------------------------------------------------------

Nachtrag

Oder auch nicht.

Bekomme es eben nicht so einfach gebacken.

Bleibe wohl bei "meinem" alten Skript.

Horstmann

Zitat von Mira_Belle

Das werde ich mir klauen, denke ich.
Da lassen sich die Anpassungen viel leichter ändern.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Nachtrag
Oder auch nicht.
Bekomme es eben nicht so einfach gebacken.
Bleibe wohl bei "meinem" alten Skript.

Alles anzeigen

Hmm, lass mich raten, deine Icons passen nicht?

Hätte ich mir denken können, meine benutzten Icons sind 16x16 oder .svg von Fx ....

Wenn du Lust hast kannst du mal das hier im Script austauschen, nur diese beiden Blöcke, Rest bleibt gleich:

JavaScript

            .countClass1::before {
                content: url(${profilePath}/${ico1});
                display: flex !important;
                margin-inline: 16px 2px !important;
                height: 16px !important;
                width: 16px !important;
                transform: scale(0.8);
            }


            .countClass2::before {
                content: url(${profilePath}/${ico2});
                display: flex !important;
                /*margin-inline: 0 2px !important;*/
                height: 16px !important;
                width: 16px !important;
                transform: scale(0.8);
            }

Alles anzeigen

~~Wenn das nicht geht müsste ich nochmal einen Umweg über background-image probieren.~~

----------

Edit: Oder probier mal diese Version mit background-image, ich hab das auch für mich selber so umgestellt.

JavaScript

// JavaScript Document
// BookmarkCount.uc.js - modified #2
// Author BrokenHeart
// Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229536#post1229536
// Endor Repository Link 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_Belle
    let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
    let ico1 = "iconfolder.png"
    let ico2 = "iconitems.png"

    function setFunction() {

        const css =`

             /*  First icon  /  folder count  /  second icon  /  item count  */

            .countClass1::before {
                content: "";
                background-image: url(${profilePath}/${ico1}); 
                background-repeat: no-repeat;
                background-size: 16px;  /* icon size */
                background-position: center;
                margin-inline: 16px 2px;  /* icon 1 distance left right */
                height: 16px;
                width: 16px;
                /*fill: black;
                fill-opacity: 1;*/
            }

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

            .countClass1::after {
                content: attr(data-value1); 
                /*color: black;*/
            }

            .countClass2::before {
                content: "";
                background-image: url(${profilePath}/${ico2});
                /*background-image: url("chrome://browser/skin/bookmark-hollow.svg");*/
                background-repeat: no-repeat;
                background-size: 16px;  /* icon size */
                background-position: center;
                margin-inline: 2px 2px;  /* icon 2 distance left right */
                height: 16px;
                width: 16px;
                /*fill: black;
                fill-opacity: 1;*/
            }

            .countClass2::after {
                content: attr(data-value2); 
                /*color: black;*/
                margin-inline: 0 4px !important;  /* distance right */
            }

            .countClass2 image {
                order: 1;
            }
        `;

        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;
              
              let label1 = item.childNodes[3];
  
              label1.classList.add('countClass1');
              let strCountOut1 = "(" + menuCount + ")"
              label1.setAttribute('data-value1', strCountOut1);

              let label2 = item.childNodes[4];
  
              label2.classList.add('countClass2');
              let strCountOut2 = "(" + menuitemCount + ")"
              label2.setAttribute('data-value2', strCountOut2);


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

Alles anzeigen