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

grisu2099

Ich habe mit den Browser-Werkzeugen mal gesucht: Anscheinend liegt es daran, daß die Klasse .menu-accel bei den Lesezeichen standardmäßig nicht mehr angezeigt wird. Wenn ich mir die per CSS wieder einblende, kriege ich zumindest eine der beiden Zahlen wieder dahin, wo sie vorher war...

Vielleicht kann ja jemand mit diesem Ansatz etwas anfangen. Ich mache hier erst mal Pause - am Wochenende geht es (hoffentlich) weiter.

omar1979

Also bei mir sieht das so aus, ich benütze dieses Script glaub ich schon etwa 1 Jahr oder mehr.

grisu2099

Zitat von omar1979

ich benütze dieses Script glaub ich schon etwa 1 Jahr oder mehr.

In der Nightly??? Nur um die geht es hier momentan

Horstmann

Zitat von grisu2099

Ich habe mit den Browser-Werkzeugen mal gesucht: Anscheinend liegt es daran, daß die Klasse .menu-accel bei den Lesezeichen standardmäßig nicht mehr angezeigt wird. Wenn ich mir die per CSS wieder einblende, kriege ich zumindest eine der beiden Zahlen wieder dahin, wo sie vorher war...

In deinem Code von hier steht in Zeile 81 order: 1; Pfeil hinter dem "Wert" der Links; der Kommentar sollte (aus)kommentiert sein, das zum Einen.

.menu-accel sollte generell nicht nötig sein, vermute ich mal, .countClass1 bzw. .countClass2 alleine müssten reichen.

omar1979

Zitat von grisu2099

In der Nightly??? Nur um die geht es hier momentan

Ahso.. Sorry

grisu2099

Ich habe nach einigem Gefrickel eine einigermaßen befriedigende Lösung für die Nightly gefunden. Nicht ausgeschlossen, daß da in ein paar Tagen nochmal nachjustiere...

Zitat von Horstmann

.menu-accel sollte generell nicht nötig sein, vermute ich mal,

Für meine (momentane) Lösung ist es notwendig das wieder einzublenden. Hier mein aktuelles Skript:

CSS

(function() {

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

    let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
    let icon1 = "Ordner.png"
    let icon2 = "Lesezeichen.png"
    function setFunction() {

        const css =`
            .countClass::after {
				background-image: url(${profilePath}/${icon1}), url(${profilePath}/${icon2}) !important;
				background-size: 16px !important;
				background-repeat: no-repeat !important;
				background-position:  20px, right 0px center !important;
                content: attr(data-value) !important; 
				font-family:  "Courier New", monospace !important;
				font-size: 14px !important;
				font-weight: 600 !important;
                color: lightgreen !important;
				width: 93px;
				height: 14px;
				margin-top: -2px;
			}
		`;

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

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

Alles anzeigen

Mira_Belle

Zitat von grisu2099

Zitat von Horstmann

.menu-accel sollte generell nicht nötig sein, vermute ich mal,

Für meine (momentane) Lösung ist es notwendig das wieder einzublenden. Hier mein aktuelles Skript:

Ich stehe vollkommen auf dem Schlauch! Wie "blendest" Du .menu-accel wieder ein?
Und wie hängt das mit diesem Skript zusammen? Da kommt dieser Selektor doch gar nicht vor.

Und ICH habe da auch noch andere Probleme mit den Abständen der Symbole!!
Sowohl in der Menüleiste als auch im Lesezeichenmenü!
Die Abstände hängen irgendwie zusammen.
Bringe ich alles in der Menüleiste i.O. stimmt es im Lesezeichenmenü nicht mehr,
und andersrum halt umgekehrt. Blöd, blöd, blöd.

Boersenfeger

Hier klappt die Version aus #334 einwandfrei mit meiner Anpassung der Hintergrund- und Textfarbe..

Danke dafür BrokenHeart

Mira_Belle

Und rechtsbündig?

Boersenfeger

Nein, so wie abgebildet, stört mich aber auch nicht.

Dharkness

Zitat von Mira_Belle

Und rechtsbündig?

Teste bitte das ↓.

CSS

.countClass {
    justify-content: space-between !important;
}

Kommt von hier irgendwo.

Horstmann

Zitat von grisu2099

Ich habe nach einigem Gefrickel eine einigermaßen befriedigende Lösung für die Nightly gefunden. Nicht ausgeschlossen, daß da in ein paar Tagen nochmal nachjustiere...

Mein Anliegen war ja dass ich unbedingt eigene Icons benutzen möchte.

Ich werf den groben Test einfach mal in den Raum; geht das in deinem Nigthly?

(Icon Namen + Dateiendung oben einfach deine eigenen nehmen, oder die im Anhang in chrome/icons ordner) :

JavaScript

//bmcount testa neu

(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"    //  Custom  Folder Icon
    let icon2 = "YourLinkIcon.svg"          //  Custom  Link Icon

    function setFunction() {

        const css =`

    .countClass {
    justify-content: space-between !important;
}
            .countClass::after {
            content: attr(data-value1)
                     /*url("chrome://browser/skin/bookmark-hollow.svg")*/
                     url("${ProfilePath}/${icon1}")
                     attr(data-value2)
                     /*url("chrome://global/skin/icons/folder.svg")*/
                     url("${ProfilePath}/${icon2}") !important;
				font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
				font-size: 11px !important;
				font-weight: 900 !important;
                color: rgb(100,200,255) !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;

              let label = item.childNodes[1];

              label.classList.add('countClass');


        let strCountOut1 = "[" + menuCount + "]";   //  Has square brackets
        label.setAttribute('data-value1', strCountOut1);

        let strCountOut2 = "[" + menuitemCount + "]"; //  Has square brackets
        label.setAttribute('data-value2', strCountOut2);


            }, 100);
        }
    }

})();

Alles anzeigen

Archiv.zip

Zitat von Dharkness

Kommt von hier irgendwo.

Nanana !

Dharkness

Zitat von Horstmann

Ich werf den groben Test einfach mal in den Raum; geht das in deinem Nigthly?

Nicht so wirklich es ist auf beiden Positionen das Ordner-Symbol zu sehen und nicht wie erwartet bei der Lesezeichenzählung der Stern.

Horstmann

Zitat von Dharkness

Zitat von Horstmann

Ich werf den groben Test einfach mal in den Raum; geht das in deinem Nigthly?

Nicht so wirklich es ist auf beiden Positionen das Ordner-Symbol zu sehen und nicht wie erwartet bei der Lesezeichenzählung der Stern.

Dabke für's testen.

Dummer Fehler von mir, sorry ; ich habe jetzt im Code oben Zeile 31 geändert, hatte zuvor 2x das gleiche Icon für beide Teile eingetragen.

Dharkness

Zitat von Horstmann

ich habe jetzt im Code oben Zeile 31 geändert

Ja, hatte ich eben auch gesehen und korrigiert, jetzt noch die Zähler ein wenig nach oben ausrichten und es wäre perfekt.

Horstmann

Zitat von Dharkness

Ja, hatte ich eben auch gesehen und korrigiert, jetzt noch die Zähler ein wenig nach oben ausrichten und es wäre perfekt.

Kannst das mal gerne probieren; das Problem auf meiner Seite ist daß es momentan etwas schwierig ist aktuelle Nightlies für jedes einzelne Detail zu testen, daher die leider nur vagen Vorschläge.

Zum Text hatten wir hier schon einige Diskussionen in diesem Thread, bzgl. der Positionierung etc., und die exakte Positionierung der einzelnen Bestandteile vom Zähler generell; da kann ich aber erst ran wenn ich mir neue Macs leisten kann.

Am Ende des Tages vermute ich daß man den Zähler anders einbinden sollte, evtl. nicht mit dem childNodes Dingens (Fachbegriff), mal schauen.

Momentan also dieser wieder nur grobe Vorschlag, und deine Variationen sind dann halt anzupassen:

JavaScript

//bmcount testa neu

(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"    //  Custom  Folder Icon
    let icon2 = "YourLinkIcon.svg"          //  Custom  Link Icon

    function setFunction() {

        const css =`

    .countClass {
    justify-content: space-between !important;
}
            .countClass::after {
            content: attr(data-value1)
                     /*url("chrome://browser/skin/bookmark-hollow.svg")*/
                     url("${ProfilePath}/${icon1}")
                     attr(data-value2)
                     /*url("chrome://global/skin/icons/folder.svg")*/
                     url("${ProfilePath}/${icon2}") !important;
				font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
				font-size: 11px !important;
				font-weight: 900 !important;
                color: rgb(100,200,255) !important;
                align-items: center !important;
                display: flex !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;

              let label = item.childNodes[1];
              label.classList.add('countClass');

        let strCountOut1 = "[" + menuCount + "]";   //  Has square brackets
        label.setAttribute('data-value1', strCountOut1);

        let strCountOut2 = "[" + menuitemCount + "]"; //  Has square brackets
        label.setAttribute('data-value2', strCountOut2);

            }, 100);
        }
    }

})();

Alles anzeigen

Änderungen in Zeile 35-37.

Mira_Belle

Horstmann Das Problem ist, dass Grafiken nur in Originalgröße angezeigt werden.
Also es keine Möglichkeit gibt per "background-size:" oder ähnlichem korrigierend eingreifen zu können.
Es wäre so schön gewesen.
Bei meinen Ansätzen bekomme ich die Symbole nicht an ihren richtigen Platz!! Auch doof.

Wer mal reinschnuppern will:

JavaScript

(function () {
    if (!window.gBrowser) return;

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

    let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
    let icon1 = "folder-fat.svg"                 /* "folder_org.svg" */
    let icon2 = "bookmark-hollow.svg"        /* "bookmark-hollow.svg" */

    let cs_font_size = 12
    let cs_font_weight = 900
    let cs_font_color = "#FFD700"
    let cs_icon_color = "#C0C0C0"

    function setFunction() {
        const css = `
            .countClass1 {
                position: relative !important;
            }

            .countClass1::after {
                content: attr(data-value1);
                position: absolute;
                right: 8px;
                top: 0;
                height: 100%;
                display: flex;
                align-items: center;
                gap: 8px;
                font-family: Consolas, "Lucida Console", "Courier New", monospace !important;
                font-size: ${cs_font_size}px !important;
                font-weight: ${cs_font_weight} !important;
                font-variant-numeric: tabular-nums !important;
                color: ${cs_font_color} !important;
                padding-left: 40px;
                background-image:
                    url("${profilePath}/${icon1}"),
                    url("${profilePath}/${icon2}");
                background-repeat: no-repeat, no-repeat;
                background-position:
                    left center,
                    32px center;
                background-size: 14px 14px, 14px 14px;
                fill: ${cs_icon_color} !important;
                pointer-events: none;
            }
        `;

        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[1];
                label1.classList.add("countClass1");

                // ⬅️ Zahlen: mit Leerzeichen trennen, tabellenähnlich
                let strCountOut1 = `  ${menuCount}    ${menuitemCount}`;
                label1.setAttribute("data-value1", strCountOut1);
            }, 100);
        }
    }
})();

Alles anzeigen

Ist aber, so glaube ich, eine Sackgasse!

Dharkness

Zitat von Horstmann

Momentan also dieser wieder nur grobe Vorschlag, und deine Variationen sind dann halt anzupassen:

Ich brauchte für mich nur die Zeilen 36 und 37 übernehmen, das sieht doch schon fast perfekt aus, Dankeschön.

Mira_Belle

Ha, danke Horstmann
War ein verdammt guter Ansatz.
Wenn ich jetzt nur noch wüsste, wie ich
a. die Symbole (Icons) fett bekomme und
b. vor die Ziffern, wäre ich wunschlos glücklich,
bis ....
Hier mein Skript:

CSS

//bmcount testa neu

(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 = "Z.Z nichts"    //  Custom  Folder Icon
    let icon2 = "Z.Z. nichts"          //  Custom  Link Icon

    let cs_font_size = 12
    let cs_font_weight = 900
    let cs_font_color = "#FFD700"
    let cs_icon_color = "#C0C0C0"


    function setFunction() {

        const css =`

    .countClass {
    justify-content: space-between !important;
}
            .countClass::after {
            content: attr(data-value1)
                url("chrome://global/skin/icons/folder.svg")                 
                     /*url("${ProfilePath}/${icon1}")*/
                     attr(data-value2)
                url("chrome://browser/skin/bookmark-hollow.svg")     
                     /*url("${ProfilePath}/${icon2}")*/ !important;
				font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
				font-size: ${cs_font_size}px !important;
				font-weight: ${cs_font_weight} !important;
                color: ${cs_font_color} !important;
                align-items: center !important;
                display: flex !important;
                fill: ${cs_icon_color} !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;

              let label = item.childNodes[1];
              label.classList.add('countClass');

        let strCountOut1 = ` ${menuCount.toString().padStart(2, " ")} `;   //  Has square brackets
        label.setAttribute('data-value1', strCountOut1);

        let strCountOut2 = ` ${menuitemCount.toString().padStart(2, " ")} `; //  Has square brackets
        label.setAttribute('data-value2', strCountOut2);

            }, 100);
        }
    }

})();

Alles anzeigen

Wenn die Icons, also die SVG-Dateien doch irgendwie in der Größe beeinflussbar wären,
das wäre toll.

lenny2

Zitat von Mira_Belle

Hier mein Skript:

Funktioniert im Bereich v128.9.0esr - v139.0a1