Beiträge von Horstmann

Horstmann

Zitat von Stoiker

Ich denke ich soll mich nicht an bestehende Threads dranhängen

Soweit ich die Diskussion darum verstehe, ist der Gedanke eher, Fragen zu einem spezifischen Script nicht in einer allgemeinen Thread wie dieser, sondern in einer Thread zu diesem speziellen Thema zu stellen - welche existiert.

Damit wären Lösungen zentral zugreifbar, für eben dieses eine Thema; daher sind auch die Lösungen für dein Problem kopiert worden, die tauchen nicht einfach so aus dem Nichts auf.
Ist aber wumpe, weil's dir ja nur um dein eigenes Problem geht, und du komplette Einzelbetreuung gebucht hast.

Horstmann

Zitat von Stoiker

Funktioniert, Danke

Mein Vergnügen!

Zitat von Stoiker

Du, ich hätte da noch ein paar Baustellen

Ich habe bisher zwei Skripte für die LZ genutzt, beide tun nicht mehr wie bisher.
Skript 1 hat mir die Anzahl der LZ u. Unterordner angezeigt. Ich hatte schon in einem anderen Thread nach einer Alternative geschaut, aber das ist mir zu überfrachtet.

Erste Zahl sagt ob Unterordner, zweite Zahl wie viele LZ.

Zum Glück haben wir ja schon 2 Threads zum Thema, du willst jetzt noch deine eigene?

Hier #2.

Horstmann

Zitat von Mira_Belle

Lösche mal alles "unter" /* Pfeil */
und ersetze es einfach NUR durch menupopup > menu::after {

Ohne jetzt meine Nigthly Maschine anzuwerfen, und auf dem Mac ist es sowieso nochmal anders: würde das nicht auch andere Pfeile ausserhalb der Bookmark Popups betreffen, zB Kontextmenus, wie etwas bei Rechtsklick auf Tabs?

Also evtl. sowas wie .bookmark-item::after, oder .bookmark-item menu::after ?
Was wir hier schon mal diskutiert hatten, glaub ich.
Aber egal, den Wust an Code von FF für die ganzen Details brauchts wohl nicht, va wenn man alle Bookmarks Pfeile ohne Beschränkung ansprechen will, da haste recht.

Horstmann

Zitat von harff182

Jabbaabbado...

Prima.

Sieht noch etwas unausgeglichen aus, kannst evtl. mal das ändern bzw. ergänzen im CSS Teil:

CSS

	    padding-right: 0px;
        padding-left: 8px;
        margin-left: auto !important;
        margin-right: -14px !important;

Horstmann

Zitat von harff182

Mira_Belle + Horstmann :
Das sieht schon etwas besser aus...

Zitat von Horstmann

Und wenn der Zähler dann links hängt, schaffen wir das auch noch.

Genau das ist noch der Fall.

Es wäre wirklich bezaubernd, zu sowas Screenshots zu sehen oder sonstige Einzelheiten zu erfahren.

Im CSS Block oben (nach Zeile 35 von Beitrag #1) evtl. mal das einfügen, va das margin:

CSS

        padding-left: 5px;
        margin-left: auto !important;

Horstmann

Zitat von Mira_Belle

Das Ding lässt Dir keine Ruh', was?

Es ist eine Plage....

Horstmann

Oh, und immer schön Start Cache in about:support löschen nach Script Änderungen, und sicherstellen dass keine alte Scriptvariante im Ordner liegt.

Zitat von Mira_Belle

harff182
1. Hast Du noch weiteren CSS, um die Zähler an die richtige Position zu rücken?
2. Wie dem auch sei, ändere item.childNodes[3] einfach auf [1], dann sollte es wieder funktionieren.
Wenn nicht, dann probiere [2].

Ahh, stimmt, wahrscheinlich 1, nicht 2!

Und wenn der Zähler dann links hängt, schaffen wir das auch noch.

Horstmann

Zitat von harff182

Zitat von Horstmann

Mein Punkt wäre eher, es gibt schon eine Thread zum Thema, und genau dein Problem ist dort auch diskutiert worden.

Viel diskutiert: ja - mein Problem: eher nicht.

Dann probier halt mal bei item.childNodes[3] die Zahl zu 2 oder so zu ändern.

Horstmann

JavaScript

//bmcount.uc.js, RC_4
//Ende Mai 2025
//Zeigt Anzahl der Lesezeichenordner und Links an in Lesezeichenpopups
//basiert auf Script von BrokenHeart =>
//https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1269879#post1269879
//Release Candidate 4 =>
//https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1272829#post1272829
//JS Hilfe von Mira_Belle

(function() {

    if (!window.gBrowser)
        return;

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

    //Einstellungen Javascript =>

    //Eigenes Icon erwartet in Profilordner/chrome/icons, icons Ordner falls noetig erstellen
    //Eigene Icons eintragen, falls vorhanden
    let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
    let icon1 = 'YourFolderIcon.svg';        //  Custom  Folder Icon
    let icon2 = 'YourLinkIcon.svg';          //  Custom  Link Icon

    //Variablen zur Auswahl der Icons; kein Auto Fallback falls eigenes Icon nicht vorhanden
    let icon_folder = 0    // Ordner: 0 Firefox Fallback Icon / 1 eigenes Icon
    let icon_link = 0      // Links: 0 Firefox Fallback Icon / 1 eigenes Icon

    //Variablen zur Auswahl der Klammern
    let bracket = 0;       //  0 keine Klammern, 1 runde Klammern, 2 eckige Klammern
    //Variablen zur Auswahl der Reihenfolge
    let order = 0;         //  0 Icons links Ziffern rechts / 1 Ziffern links Icons rechts
    //Variablen zur Auswahl der Farben
    let bm_colors = 0;     //  0 Standardfarben, 1 eigene Farben benutzen

    //Variablen zur Auswahl der Trennlinie
    // 0 ohne Trennlinie
    // 1 ohne Trennlinie + Zaehler #1 = 0 + Icon #2 wird versteckt
    // 2 mit Trennlinie
    // 3 mit Trennlinie nur bei Zaehler #1 > 0 + Zaehler #1 = 0 + Icon #2 wird versteckt
    let trenner = 2;
    // Trennlinie Inhalt, beliebiges Textzeichen
    let trennzeichen = '|';

    //Spielerei Trennlinie Inhalt, experimentell, nur so
    //let trennzeichen = '<img src="chrome://browser/skin/bookmark-hollow.svg" alt="/" />';  // Bild
    //let trennzeichen = '<div id="trenn_div" style="background:linear-gradient(to right, lightblue, orange); height: 16px; width: 40px;" ></div>'; // Element

    function setFunction() {
        const css =`

       /*
       Einstellungen CSS =>
       #A Zaehler (Counter) anpassen (nur falls noetig),
       #B Feinabstimmung allgemein,
       #C Feinabstimmung Zentrierung Trennlinie,
       #D eigene Farben anpassen
       */

       /*** User Einstellungen ***/

       /* A */
       /** Feste Breite der beiden Counter, abhaengig von Anzahl Ziffern, AUTO Anpassung für mit/ohne Klammern.
          Falls noetig => Werte erhoehen NUR bis Icons untereinander auf gleicher Hoehe sind **/

       /* Beispiel 2 Ziffern plus Klammern, Systemfont Mac */
       #bmContent:is(
       [data-value1^='['],
       [data-value1^='(']) {
          --bm_width_one: 2.1em;
          --bm_width_two: 2.1em;
          }
       /* Beispiel 2 Ziffern ohne Klammern, Systemfont Mac */
       #bmContent {
          --bm_width_one: 1.3em;
          --bm_width_two: 1.3em;

       /* B */
       /** Abstaende / Groessen fuer die Counter = Basisanpassungen **/

          /* Abstand mittig zwischen Counter #1 <=> Counter #2 / wird x2 benutzt */
          --bm_margin_mid: 8px;

          /* Groesse Icons = 16px Firefox Standard */
          --bm_icon_size: 16px;

          /* Abstand zwischen Icon und Ziffer */
          --bm_space: 4px;
          }

       /* C */
       /** Trennlinie Feinabstimmung Zentrierung Mitte / Standard = 0px **/
       #bmContent.trennclass {
          color: var(--trenn_color, initial);
          --bm_divider: 0px;
          }

       /* D */
       /* Farben Text / svg! Icons aendern , anpassen nach Belieben */
       /* HSL Farben: https://www.w3schools.com/css/css_colors_hsl.asp */
       /* Ordner Icon, Zahl / Links Icon, Zahl / Trennlinie */
       #bmContent.bm_my_colors {
          --folder_fill:  hsl(190, 60%, 20%, 1);
          --folder_color: hsl(190, 20%, 30%, 1);
          --link_fill:    hsl(35, 100%, 20%, 1);
          --link_color:   hsl(35, 60%, 30%, 1);
          --trenn_color:  hsl(290, 60%, 20%, 1);
          }

       /** Counter gesamt **/
       #bmContent {
            display: flex !important;
            margin-left: auto !important;         /* Gesamt rechtsbuendig */
            /*margin-right: -8px !important;*/    /* Abstand rechts zu Pfeil > ist evtl. OS abhaengig, optional */
            height: var(--bm_icon_size);          /* Layout passt sich Icon Groesse an */
            padding-left: 8px;                    /* min. Abstand links Gesamt für enge Popups */

            /* font Aenderungen , optional */
            /* font-family: Aenderungen nicht empfohlen => einheitlichen Standardfont behalten */
            /*font-size: 12px !important;*/       /* font-size */
            /*font-weight: 200 !important;*/      /* font-weight */
            }

       /*** User Einstellungen Ende ***/


       /*** Feste Werte ***/

       /** Reihenfolge Varianten Icons / Ziffern **/
       /* order 0: Icons links / Ziffern rechts */
       #bmContent {
            --bm_padding_inline: calc(var(--bm_icon_size) + var(--bm_space)) 0;
            --bm_bg_position: center left;
            }
       /* order 1: Ziffern links / Icons rechts */
       #bmContent.order_2 {
           --bm_padding_inline: 0 calc(var(--bm_icon_size) + var(--bm_space));
           --bm_bg_position: center right;
           }
       /** Icons Varianten **/
       /* Eigene Icons, falls Icons existieren im icons Ordner */
       #bmContent {
            --bm_icon_image_1: url("${ProfilePath}/${icon1}");
            --bm_icon_image_2: url("${ProfilePath}/${icon2}");
            }
       /* Firefox Icons Fallback */
       #bmContent:is(.icon_fallback_folder, icon_fallback_link) {
            --bm_icon_image_1: url("chrome://global/skin/icons/folder.svg");
            --bm_icon_image_2: url("chrome://browser/skin/bookmark-hollow.svg");
            }
       /** Trennlinie Extras **/
       /* Verstecken #1 automatisch bei Trennlinie 1/3 , beides = 0 */
       #bmContent:is(.trennclass_1, .trennclass_3)::before {
            display: none !important;
            }
       /* Verstecken Icon #2 , Trennlinie 1/3 , beides = 0 */
       #bmContent.Null_1.Null_2:is(.trennclass_1, .trennclass_3)::after {
            /*content: "X";*/
            background-image: linear-gradient(transparent, transparent);
            }

       /** Counters (Zaehler) **/
       /* Counter #1 Ordner */
       #bmContent::before {
            content: attr(data-value1);
            display: flex;
            min-width: fit-content;
            width: var(--bm_width_one);
            padding-inline: var(--bm_padding_inline);
            align-items: center;
            justify-content: flex-end;
            margin-right: var(--bm_margin_mid);
            background-image: var(--bm_icon_image_1);
            background-position: var(--bm_bg_position);
            background-repeat: no-repeat;
            background-size: var(--bm_icon_size);
            color: var(--folder_color, initial) !important;
            fill: var(--folder_fill, initial) !important;
            }
       /* Counter #2 Links */
       #bmContent::after {
            content: attr(data-value2);
            display: flex;
            min-width: fit-content;
            width: var(--bm_width_two);
            padding-inline: var(--bm_padding_inline);
            align-items: center;
            justify-content: flex-end;
            margin-left: calc(var(--bm_margin_mid) - var(--bm_divider, 0px));
            background-image: var(--bm_icon_image_2);
            background-position: var(--bm_bg_position);
            background-repeat: no-repeat;
            background-size: var(--bm_icon_size);
            color: var(--link_color, initial) !important;
            fill: var(--link_fill, initial) !important;
            }

       /*** Feste Werte Ende ***/


       /** Optionale Extras **/
       
       /* Text vertikal ausrichten */
       /*
       #bmContent::after,
       #bmContent::before {
          padding-top: 3px;
          }
          */

       /** Anpassungen bei Zahl = 0 **/

       /* Verblassen fuer #1 , #2 , Alles = 0 */
       #bmContent.Null_1:not(.Null_2)::before,
       #bmContent.Null_2:not(.Null_1)::after,
       #bmContent.Null_1.Null_2 {
            opacity: 0.5;
            }

       /* Pfeil rechts > bei Beidem = 0 , optional */
       .bookmark-item.bm_chevron_00 .menu-right,
       .bookmark-item.bm_chevron_00::after {
            fill: hsl(30, 100%, 50%, 1) !important;
            fill-opacity: 1 !important;
            }

       /** Pfeil rechts Farbe allgemein, optional **/
       /*
       .bookmark-item .menu-right,
       .bookmark-item::after {
             fill: hsl(210, 100%, 20%, 1) !important;
             fill-opacity: 0.8 !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;

              //Eigenes Element für Zaehler
              let bmCounta = item.childNodes[1];
              bmCounta.innerHTML = '';
              let bmVario = document.createElement("bmElement");
              bmVario.id = "bmContent";
              bmCounta.appendChild(bmVario);

              //Zaehler Design Optionen =>  ohne/ mit: runde, eckige Klammern
              if (bracket === 0) {
                  strCountOut1 = '' + menuCount + '';
                  strCountOut2 = '' + menuitemCount + '';
                  }
              if (bracket === 1) {
                  strCountOut1 = '(' + menuCount + ')';
                  strCountOut2 = '(' + menuitemCount + ')';
                  }
              if (bracket === 2) {
                  strCountOut1 = '[' + menuCount + ']';
                  strCountOut2 = '[' + menuitemCount + ']';
              }

              bmVario.setAttribute('data-value1', strCountOut1);
              bmVario.setAttribute('data-value2', strCountOut2);

              // Trennlinie
              if (trenner === 2 || trenner === 3 && menuCount !== 0) {
                   bmVario.insertAdjacentHTML('beforeend', trennzeichen);
                   bmVario.classList.add('trennclass');
                 }

              if (trenner === 3 && menuCount === 0) {
                  bmVario.classList.add('trennclass_3');
                  }
              if (trenner === 1 && menuCount === 0) {
                  bmVario.classList.add('trennclass_1');
              }

              // Extra class item/ ganzes menu fuer 00, #1 = 0, #2 = 0
              if (menuCount === 0 && menuitemCount === 0) {
                   item.classList.add('bm_chevron_00');
                   } else {
                        item.classList.remove('bm_chevron_00');
                        }
              if (menuCount === 0) {
                   bmVario.classList.add('Null_1');
                   }
              if (menuitemCount === 0) {
                   bmVario.classList.add('Null_2');
              }

              // Reihenfolge Varianten Icons / Ziffern
              if (order === 1) {
                  bmVario.classList.add('order_2');
              }

              // Icons Auswahl
              if (icon_folder === 0) {
                  bmVario.classList.add('icon_fallback_folder');
                  }
              if (icon_link === 0) {
                  bmVario.classList.add('icon_fallback_link');
              }

              // Farben Auswahl
              if (bm_colors === 1) {
                  bmVario.classList.add('bm_my_colors');
              }

            }, 100);
        }
    }
})()

Alles anzeigen

Horstmann

Zitat von harff182

Zitat von grisu2099

harff182: Schau mal in den von Horstmann verlinkten Thread, da gibt es einige Versionen die auch in 139 (und höher) funktionieren...

Die sind aber alle nich so kompakt und "einfach" wie meins und aus meiner Sicht "Funktiosüberladen".
Und da wird soviel hin- und herdiskutiert, daß ich nicht durchblicke
Schade, ich dachte, es wär nur eine "kleine" Änderung notwendig...

Mein Punkt wäre eher, es gibt schon eine Thread zum Thema, und genau dein Problem ist dort auch diskutiert worden.
Wenn wir jetzt nicht nur zu jedem Script eine eigene Thread haben - was Sinn macht - sondern auch noch zu jeder Frage zu jeder Scriptversion - dann wird's wirklich unübersichtlich.

Ab hier hat grisu2099 einige mögliche Lösungen für deinen Ansatz gepostet; evtl. ist da ja was dabei.

Horstmann

Zitat von milupo

Zitat von Horstmann

Es steht sogar im Script: evtl. hier mal reinschauen und weiterblättern.

An wen ist das gerichtet?

An den OP.

Horstmann

Es steht sogar im Script: evtl. hier mal reinschauen und weiterblättern.

Horstmann

Zitat von lenny2

Zitat von Horstmann

Link Button:

v139, CSP (Content Security Policy) blockiert dieses Skript. Bitte passen Sie es für maximale Sicherheit an. Danke!

Oder sowas, etwas gerafft; die diversen "Window / owner " Vorkehrungen sollte man hier nicht brauchen:

JavaScript

// Author @BrokenHeart
// geändert Horstman 26.05.25

(function() {
    if (!window.gBrowser){
        return;
    }
    try {
       CustomizableUI.createWidget({
          id: 'link-button',
          type: 'custom',
          defaultArea: CustomizableUI.AREA_NAVBAR,
          onBuild: function(aDocument) {
            let currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
			      let buttonicon = "G_1.svg"
            let toolbaritem = aDocument.createXULElement('toolbarbutton');
            let props = {
                id: 'link-button',
                class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                removable: 'true',
                label: 'Google',
                accesskey: '',
                tooltiptext: 'Google',
                style: 'list-style-image: url("' + ("file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon) + '");'
             };
             for (let p in props)
                toolbaritem.setAttribute(p, props[p]);
             return toolbaritem;
          }
       });
    } catch(e) { };

    document.getElementById('link-button').addEventListener( 'click', function(event) {
        if (event.button === 0) {
            openTrustedLinkIn('https://www.google.com/',"tab");
        }
    });
}) ();

Alles anzeigen

Icon:

G_1.svg.zip

Horstmann

Zitat von Mira_Belle

Horstmann Mit "Freundin"?
Aber wenn Du jetzt JavaScript-Profi bist, kann ich mich ja immer an Dich wenden.

Kein KI war involviert, und definitiv keine JS Expertise - nur mein übliches Rumgehacke bis es zu passen scheint.

Horstmann

Zitat von Mira_Belle

Aber, ich habe da noch was!
Ich habe gesehen, dass Du in einem Ordner über 180 Lesezeichen hast.
Wie wäre es, einen Schwellenwert zu definieren, darf natürlich der Nutzer selbst festlegen,
ab dem der Zählwert nicht mehr "normal" angezeigt wird, sondern FETT und ROT?
Wobei auch das Fett und die Schriftfarbe vom Nutzer "eingestellt" werden sollte.
Ich mein' ja nur, damit Dir am Ende nicht langweilig wird.

Das ist nur ein Testprofil mit Testordnern/Links, um diverse Szenarien abzudecken.

Im übrigen: Gähn... (nur für Links > 99).

JavaScript

//bmcount.uc.js, RC_3b
//Zeigt Anzahl der Lesezeichenordner und Links an in Lesezeichenpopups
//basiert auf Script von BrokenHeart =>
//https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1269879#post1269879
//Release Candidate 3b =>
//https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1272561#post1272561

//Danke an Mira_Belle für die JS Variablen, Grisu fuer viele Tips, und an alle Beteiligten und Tester!

//Eigenes Icon erwartet in Profilordner/chrome/icons , icons Ordner falls noetig erstellen
//Eigenes Icon, Name eintragen unten in ==> let icon1/2 = yourIcon...

//Basis Anpassungen =>
//Zaehler (Counter) #A anpassen (nur falls nötig), #B Reihenfolge waehlen, #C Feinabstimmung

(function() {

    if (!window.gBrowser)
        return;

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

    //Eigene Icons festlegen, falls vorhanden
    let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
    let icon1 = "YourFolderIcon.svg";        //  Custom  Folder Icon
    let icon2 = "YourLinkIcon.svg";          //  Custom  Link Icon

    // Variablen zur Auswahl der Klammern
    let bracket = 0; // 0 für "ohne Klammern", 1 für "runde Klammern", 2 für "eckige Klammern"

    // Variablen zur Auswahl der Trennlinie
    let trenner = 2; // 0 ohne Trennlinie, 1  mit Trennlinie, 2 mit Trennlinie nur bei Zähler #1 > 0

    function setFunction() {
        const css =`

       /*** Basiseinstellungen ***/

        /** #A: Feste Breite der beiden Counter, abhaengig von Anzahl Ziffern, auto Anpassung für mit/ohne Klammern.
             falls noetig => Werte erhoehen NUR bis Icons untereinander auf gleicher Hoehe sind **/

        /* Beispiel 2 Ziffern plus Klammern, Systemfont Mac */
        #bmContent:is(
        [data-value1^="["],
        [data-value1^="("]) {
            --bm_width_one: 2.1em;
            --bm_width_two: 2.1em;
            }

        /* Beispiel 2 Ziffern ohne Klammern, Systemfont Mac */
        #bmContent {
            --bm_width_one: 1.3em;
            --bm_width_two: 1.3em;
            }

       /** Counter gesamt **/

       #bmContent {

       /** Gesamt **/

            display: flex !important;
            margin-left: auto !important;         /* Gesamt rechtsbuendig */
            margin-right: -8px !important;        /* Abstand rechts zu Pfeil > ist evtl. OS abhaengig */
            height: var(--bm_icon_size);          /* Layout passt sich Icon Groesse an */
            padding-left: 8px;                    /* min. Abstand links Gesamt für enge Popups */
            /* font */
            /*font-size: 12px !important;*/       /* font-size optional */
            /*font-weight: 200 !important;*/      /* font-weight optional */
            /* font-family: Aenderungen nicht empfohlen, um Standardfont zu behalten */

       /** Icons Varianten / ungewuenschte Varianten auskommentieren!!! **/

            /* Use Firefox Icons => */
            --bm_icon_image_1: url("chrome://global/skin/icons/folder.svg");
            --bm_icon_image_2: url("chrome://browser/skin/bookmark-hollow.svg");

            /* Eigene Icons, falls Icons existieren im icons Ordner => */
       /*   --bm_icon_image_1: url("${ProfilePath}/${icon1}");
            --bm_icon_image_2: url("${ProfilePath}/${icon2}");
            */

       /** #B: Reihenfolge Varianten Icons / Ziffern / ungewuenschte Variante auskommentieren!!! **/

            /* #1 Icons links / Ziffern rechts */
            --bm_padding_inline: calc(var(--bm_icon_size) + var(--bm_space)) 0;
            --bm_bg_position: center left;
            /**/

            /* #2 Ziffern links / Icons rechts */
     /*     --bm_padding_inline: 0 calc(var(--bm_icon_size) + var(--bm_space));
            --bm_bg_position: center right;
            */

       /** #C: Abstaende / Groessen Counter = Basisanpassungen **/

            /* Abstand mittig zwischen Counter #1 <=> Counter #2 */
            --bm_margin_mid: 16px;

            /* Groesse Icons = 16px Firefox Standard */
            --bm_icon_size: 16px;

            /* Abstand zwischen Icon und Ziffer */
            --bm_space: 3px;
       }

       /*** Basiseinstellungen Ende ***/


       /** Trennlinie Abstand Mitte **/
       #bmContent.trennclass {
         --bm_divider_A: calc(var(--bm_margin_mid)/2);
         /* Feinabstimmung Trennlinie, fuer Position Mitte */
         --bm_divider_B: 0px;
       }

       /** Counters **/

       /* Counter #1 Ordner */
       #bmContent::before {
            content: attr(data-value1);
            display: flex;
            min-width: fit-content;
            width: var(--bm_width_one);
            padding-inline: var(--bm_padding_inline);
            align-items: center;
            justify-content: end;
            margin-right: calc(var(--bm_divider_A, 0px) + var(--bm_divider_B, 0px)) ;
            background-image: var(--bm_icon_image_1);
            background-position: var(--bm_bg_position);
            background-repeat: no-repeat;
            background-size: var(--bm_icon_size);
            /* Farben Text / svg Icons aendern => */
            /*color: hsl(155, 90%, 50%, 1) !important;*/
            /*fill: hsl(255, 70%, 50%, 1) !important;*/
            }

       /* Counter #2 Links */
       #bmContent::after {
         content: attr(data-value2);
            display: flex;
            min-width: fit-content;
            width: var(--bm_width_two);
            padding-inline: var(--bm_padding_inline);
            align-items: center;
            justify-content: end;
            margin-left: calc(var(--bm_margin_mid) - var(--bm_divider_A, 0px));
            background-image: var(--bm_icon_image_2);
            background-position: var(--bm_bg_position);
            background-repeat: no-repeat;
            background-size: var(--bm_icon_size);
            /* Farben Text / svg Icons aendern => */
            /*color: hsl(155, 90%, 50%, 1) !important;*/
            /*fill: hsl(255, 70%, 50%, 1) !important;*/
            }


       /** Optionale Extras **/

       /** Anpassungen bei Zahl Links > 99 **/
       #bmContent.dreier::after {
         color: hsl(0, 90%, 50%, 1) !important;
         fill: hsl(0, 90%, 50%, 1) !important;
         font-weight: 800 !important;
       }

       /** Anpassungen bei Zahl = 0 **/

        /* Verstecken / Verblassen #1 */
        #bmContent:is(
        [data-value1="[0]"],
        [data-value1="0"],
        [data-value1="(0)"])::before {
            /*opacity: 0.2;*/
            display: none;
            }

        /* Verstecken / Verblassen #2 */
        #bmContent:is(
        [data-value2="[0]"],
        [data-value2="0"],
        [data-value2="(0)"])::after {
            opacity: 0.5;
            }

        /* Verstecken Icon bei bei beides = 0 */
          .pfeil:is([data-value3="[0][0]"],
          [data-value3="00"],
          [data-value3="(0)(0)"]) #bmContent::after {
            /*opacity: 0;*/
            background-image: none;
            /*content: "X";*/
            }

        /* Pfeil rechts > bei beides = 0 */
        .pfeil:is([data-value3="[0][0]"],
        [data-value3="00"],
        [data-value3="(0)(0)"]) :where(.menu-right, menu::after) {
            fill: hsl(0, 100%, 50%, 1) !important;
            /*opacity: 0;*/
            }
		`;
        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;

              //Eigenes Element für Zaehler
              let bmCounta = item.childNodes[1];
              bmCounta.innerHTML = "";
              let bmVario = document.createElement("bmElement");
              bmVario.id = "bmContent";
              bmCounta.appendChild(bmVario);

              //Zaehler Design Optionen => mit/ohne, runde, eckige Klammern
              //let strCountOut1, strCountOut2;

              if (bracket === 0) {
                  strCountOut1 = "" + menuCount + "";
                  strCountOut2 = "" + menuitemCount + "";
              } else if (bracket === 1) {
                  strCountOut1 = "(" + menuCount + ")";
                  strCountOut2 = "(" + menuitemCount + ")";
              } else if (bracket === 2) {
                  strCountOut1 = "[" + menuCount + "]";
                  strCountOut2 = "[" + menuitemCount + "]";
              }

              bmVario.setAttribute('data-value1', strCountOut1);
              bmVario.setAttribute('data-value2', strCountOut2);

              // Trennlinie
              if (trenner === 1) {
                   bmVario.insertAdjacentText('beforeend', '/');}

              else if (trenner === 2 && menuCount !== 0) {
                   bmVario.insertAdjacentText('beforeend', '/');
                 };

              if (bmVario.innerHTML !== '') {
                   bmVario.classList.add('trennclass');
              };

              if (menuitemCount > 99) {
                   bmVario.classList.add('dreier');
                 };

              // Extra class und Attribut ganzes menu
              item.classList.add('pfeil');
              item.setAttribute('data-value3', strCountOut1 + strCountOut2);

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

Alles anzeigen

Horstmann

Ich weiß nicht was es ist, aber von diesem kleinen Script komm ich einfach nicht weg...
Schuld hat grisu2099 , mit seiner Reihenfolge und dem verdammten Schrägstrich-Trenner!

Danke nochmal an ihn für die Tips, und natürlich an Mira_Belle für die unermüdliche Hilfe mit dem Code.

JavaScript

//bmcount.uc.js, RC_3
//Zeigt Anzahl der Lesezeichenordner und Links an in Lesezeichenpopups
//basiert auf Script von BrokenHeart =>
//https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1269879#post1269879
//Release Candidate 3 =>
//https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1272545#post1272545

//Danke an Mira_Belle für die JS Variablen, Grisu fuer viele Tips, und an alle Beteiligten und Tester!

//Eigenes Icon erwartet in Profilordner/chrome/icons , icons Ordner falls noetig erstellen
//Eigenes Icon, Name eintragen unten in ==> let icon1/2 = yourIcon...

//Basis Anpassungen =>
//Zaehler (Counter) #A anpassen (nur falls nötig), #B Reihenfolge waehlen, #C Feinabstimmung

(function() {

    if (!window.gBrowser)
        return;

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

    //Eigene Icons festlegen, falls vorhanden
    let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
    let icon1 = "YourFolderIcon.svg";        //  Custom  Folder Icon
    let icon2 = "YourLinkIcon.svg";          //  Custom  Link Icon

    // Variablen zur Auswahl der Klammern
    let bracket = 0; // 0 für "ohne Klammern", 1 für "runde Klammern", 2 für "eckige Klammern"

    // Variablen zur Auswahl der Trennlinie
    let trenner = 2; // 0 ohne Trennlinie, 1  mit Trennlinie, 2 mit Trennlinie nur bei Zähler #1 > 0

    function setFunction() {
        const css =`

       /*** Basiseinstellungen ***/

        /** #A: Feste Breite der beiden Counter, abhaengig von Anzahl Ziffern, auto Anpassung für mit/ohne Klammern.
             falls noetig => Werte erhoehen NUR bis Icons untereinander auf gleicher Hoehe sind **/

        /* Beispiel 2 Ziffern plus Klammern, Systemfont Mac */
        #bmContent:is(
        [data-value1^="["],
        [data-value1^="("]) {
            --bm_width_one: 2.1em;
            --bm_width_two: 2.1em;
            }

        /* Beispiel 2 Ziffern ohne Klammern, Systemfont Mac */
        #bmContent {
            --bm_width_one: 1.3em;
            --bm_width_two: 1.3em;
            }

       /** Counter gesamt **/

       #bmContent {

       /** Gesamt **/

            display: flex !important;
            margin-left: auto !important;         /* Gesamt rechtsbuendig */
            margin-right: -8px !important;        /* Abstand rechts zu Pfeil > ist evtl. OS abhaengig */
            height: var(--bm_icon_size);          /* Layout passt sich Icon Groesse an */
            padding-left: 8px;                    /* min. Abstand links Gesamt für enge Popups */
            /* font */
            /*font-size: 12px !important;*/       /* font-size optional */
            /*font-weight: 200 !important;*/      /* font-weight optional */
            /* font-family: Aenderungen nicht empfohlen, um Standardfont zu behalten */

       /** Icons Varianten / ungewuenschte Varianten auskommentieren!!! **/

            /* Use Firefox Icons => */
            --bm_icon_image_1: url("chrome://global/skin/icons/folder.svg");
            --bm_icon_image_2: url("chrome://browser/skin/bookmark-hollow.svg");

            /* Eigene Icons, falls Icons existieren im icons Ordner => */
       /*   --bm_icon_image_1: url("${ProfilePath}/${icon1}");
            --bm_icon_image_2: url("${ProfilePath}/${icon2}");
            */

       /** #B: Reihenfolge Varianten Icons / Ziffern / ungewuenschte Variante auskommentieren!!! **/

            /* #1 Icons links / Ziffern rechts */
            --bm_padding_inline: calc(var(--bm_icon_size) + var(--bm_space)) 0;
            --bm_bg_position: center left;
            /**/

            /* #2 Ziffern links / Icons rechts */
     /*     --bm_padding_inline: 0 calc(var(--bm_icon_size) + var(--bm_space));
            --bm_bg_position: center right;
            */

       /** #C: Abstaende / Groessen Counter = Basisanpassungen **/

            /* Abstand mittig zwischen Counter #1 <=> Counter #2 */
            --bm_margin_mid: 16px;

            /* Groesse Icons = 16px Firefox Standard */
            --bm_icon_size: 16px;

            /* Abstand zwischen Icon und Ziffer */
            --bm_space: 3px;
       }

       /*** Basiseinstellungen Ende ***/


       /** Trennlinie Abstand Mitte **/
       #bmContent.trennclass {
         --bm_divider_A: calc(var(--bm_margin_mid)/2);
         /* Feinabstimmung Trennlinie, fuer Position Mitte */
         --bm_divider_B: 0px;
       }

       /** Counters **/

       /* Counter #1 Ordner */
       #bmContent::before {
            content: attr(data-value1);
            display: flex;
            min-width: fit-content;
            width: var(--bm_width_one);
            padding-inline: var(--bm_padding_inline);
            align-items: center;
            justify-content: end;
            margin-right: calc(var(--bm_divider_A, 0px) + var(--bm_divider_B, 0px)) ;
            background-image: var(--bm_icon_image_1);
            background-position: var(--bm_bg_position);
            background-repeat: no-repeat;
            background-size: var(--bm_icon_size);
            /* Farben Text / svg Icons aendern => */
            /*color: hsl(155, 90%, 50%, 1) !important;*/
            /*fill: hsl(255, 70%, 50%, 1) !important;*/
            }

       /* Counter #2 Links */
       #bmContent::after {
         content: attr(data-value2);
            display: flex;
            min-width: fit-content;
            width: var(--bm_width_two);
            padding-inline: var(--bm_padding_inline);
            align-items: center;
            justify-content: end;
            margin-left: calc(var(--bm_margin_mid) - var(--bm_divider_A, 0px));
            background-image: var(--bm_icon_image_2);
            background-position: var(--bm_bg_position);
            background-repeat: no-repeat;
            background-size: var(--bm_icon_size);
            /* Farben Text / svg Icons aendern => */
            /*color: hsl(155, 90%, 50%, 1) !important;*/
            /*fill: hsl(255, 70%, 50%, 1) !important;*/
            }


       /** Optionale Extras **/

       /** Anpassungen bei Zahl = 0 **/

        /* Verstecken / Verblassen #1 */
        #bmContent:is(
        [data-value1="[0]"],
        [data-value1="0"],
        [data-value1="(0)"])::before {
            /*opacity: 0.2;*/
            display: none;
            }

        /* Verstecken / Verblassen #2 */
        #bmContent:is(
        [data-value2="[0]"],
        [data-value2="0"],
        [data-value2="(0)"])::after {
            opacity: 0.5;
            }

        /* Verstecken Icon bei bei beides = 0 */
          .pfeil:is([data-value3="[0][0]"],
          [data-value3="00"],
          [data-value3="(0)(0)"]) #bmContent::after {
            /*opacity: 0;*/
            background-image: none;
            /*content: "X";*/
            }

        /* Pfeil rechts > bei beides = 0 */
        .pfeil:is([data-value3="[0][0]"],
        [data-value3="00"],
        [data-value3="(0)(0)"]) :where(.menu-right, menu::after) {
            fill: hsl(0, 100%, 50%, 1) !important;
            /*opacity: 0;*/
            }
		`;
        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;

              //Eigenes Element für Zaehler
              let bmCounta = item.childNodes[1];
              bmCounta.innerHTML = "";
              let bmVario = document.createElement("bmElement");
              bmVario.id = "bmContent";
              bmCounta.appendChild(bmVario);

              //Zaehler Design Optionen => mit/ohne, runde, eckige Klammern
              //let strCountOut1, strCountOut2;

              if (bracket === 0) {
                  strCountOut1 = "" + menuCount + "";
                  strCountOut2 = "" + menuitemCount + "";
              } else if (bracket === 1) {
                  strCountOut1 = "(" + menuCount + ")";
                  strCountOut2 = "(" + menuitemCount + ")";
              } else if (bracket === 2) {
                  strCountOut1 = "[" + menuCount + "]";
                  strCountOut2 = "[" + menuitemCount + "]";
              }

              bmVario.setAttribute('data-value1', strCountOut1);
              bmVario.setAttribute('data-value2', strCountOut2);

              // Trennlinie
              if (trenner === 1) {
                   bmVario.insertAdjacentText('beforeend', '/');}

              else if (trenner === 2 && menuCount !== 0) {
                   bmVario.insertAdjacentText('beforeend', '/');
                 };

              if (bmVario.innerHTML !== '') {
                   bmVario.classList.add('trennclass');
              };

              // Extra class und Attribut ganzes menu
              item.classList.add('pfeil');
              item.setAttribute('data-value3', strCountOut1 + strCountOut2);

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

Alles anzeigen

icons.zip

Horstmann

Wäre es evtl.sinnvoll, jeweils eine Thread für aktuell notwendige, bzw. via Nightly vorhersehbare Anpassungen zu Firefox Updates zu erstellen?

Zum Beispiel:

Titel:

[Anpassungen] Firefox 139

Inhalte:

CSS:
#tab-Nudel ändert sich zu .tab_pasta.

Links zu relevanten Diskussionen.

Plus möglichst einfacher Beispielcode:

CSS

#tab-Nudel {
    margin: 12px;
}

/* ===>> */

.tab_pasta {
    margin: 12px;
}

Javascript: Anpassungen eval, Links zu relevanten Diskussionen, zB hier.

Plus möglichst einfacher Beispielcode: ...

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

Das Ganze eben reduziert auf Basisinfos, möglichst allgemein gehaltenen Lösungsvorschlägen soweit vorhanden, und Links zu spezifischeren Diskussionen zu einzelnen CSS oder JS Codes.

Horstmann

Zitat von Sören Hentzschel

Zitat von Horstmann

Das hat sonst auch kaum einer bemerkt, weil es kaum jemand für nötig hält, Infos dieser Art allgemein zugänglich zu machen.

Das ist eine Notlösung und eigentlich nicht das, was empfohlen werden sollte. Stattdessen sollte das Script angepasst werden. Das Prinzip wurde hier über Monate in gefühlt einer Million Scripts behandelt. Ich halte es nicht für zielführend, Optionen größer zu kommunizieren, welche die Sicherheit von Firefox reduzieren.

Das Thema hatten wir ja schon; meiner Ansicht nach wäre es sinnvoll, zumindest manche aktuell nötigen Lösungen zentral verfügbar zu machen.

Ich selber folge nicht allen, aber sehr vielen Diskussionen hier im Anpassungen Forum, und habe eine umfangreiche Sammlung an Lösungen abgespeichert, muss aber in etwas exotischeren Fällen wie diesem about:config Fall - bzw. dessen Vermeidung - trotzdem nachblättern.
Was ich zwar die Tage selber mal in einem Script umgebaut hatte, aber nicht sooo oft behandelt wurde, dass ich es auswendig mitsingen könnte.

Ist aber etwas OT, und Andreas hat hier ja auch den Bezug geliefert.

Horstmann

Zitat von milupo

Zitat von Horstmann

Das hat sonst auch kaum einer bemerkt, weil es kaum jemand für nötig hält, Infos dieser Art allgemein zugänglich zu machen.

Du unterstellst hier einfach etwas. Ich bin mir sicher, dass du nicht beweisen kannst, dass jemand Informationen zurückhält, die er hat, es sei denn du bist es selbs

Mir ist es wiederholt aufgefallen, dass du nicht immer dem Inhalt von Beiträgen folgen zu schein kannst.
Was auch immer dieses Sorbisch ist, evtl. gibt es eine Übersetzunglösung für Deutsch nach dahin.

Im Übrigen ist es mE sehr hilfreich was Andreas gerade gemacht hat, nämlich auf eben die relevante Diskussion zu verlinken.

Horstmann

Zitat von Mitleser

Geht denn das in FF 139?+:

Das müsste mal jemand kurz testen der einfacheren Zugang zur Nightly hat, aber zumindest .menu-right gibt es wohl nicht mehr.

Beiträge von Horstmann

Benutzerskripte funktionieren seit Version 138 teilweise nicht mehr

Benutzerskripte funktionieren seit Version 138 teilweise nicht mehr

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

FF139 - 29_FolderContentCounter.uc.js tuts nicht mehr

FF139 - 29_FolderContentCounter.uc.js tuts nicht mehr

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

FF139 - 29_FolderContentCounter.uc.js tuts nicht mehr

FF139 - 29_FolderContentCounter.uc.js tuts nicht mehr

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

FF139 - 29_FolderContentCounter.uc.js tuts nicht mehr

FF139 - 29_FolderContentCounter.uc.js tuts nicht mehr

FF139 - 29_FolderContentCounter.uc.js tuts nicht mehr

Seitennavigation - Fly Out Menü

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

Diskussion über neues Unterforum nur für Skripte

extras_config_menu.uc.js in Fx 139 keine Funktion mehr

extras_config_menu.uc.js in Fx 139 keine Funktion mehr

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