Beiträge von Horstmann

Horstmann

Zitat von grisu2099

Zitat von milupo

Bei mir funktionieren alle Skripte.

Hier auch. (Wir haben ja auch vorgearbeitet...)

Huh, wie vorgearbeitet?
Oder meinst du die ganzen JS Anpassungen über die letzte Zeit?

Horstmann

Zitat von BrokenHeart

Ganz ehrlich: ich verstehe nicht, warum man die ganze Sache so furchtbar dramatisieren muss und warum alles schon wieder "zerredet" wird, bevor überhaupt eine Zeile Code existiert?

War doch nur ein Gedanke zum Thema, es steht ja auch in der Rubrik Smalltalk; ich dachte das suggeriert einen Diskussionswunsch.

Hier kann doch jeder coden was er will, also nur zu!

Horstmann

Zitat von BrokenHeart

Noch etwas: Wir hatten schon oft den Fall, dass die Vorbereitungen für die User-Skripte nicht richtig durchgeführt wurden. Woran das jetzt lag ist unerheblich. Und es wurde teilweise viel Zeit aufgewendet, um herauszubekommen, ob Skripte bei dem entsprechenden User allgemein nicht laufen oder etwas an einem bestimmten Skript hakt. Wenn es ein funktionierendes PS-Skript dafür gibt, wäre das sicher ein Fortschritt. Außerdem lässt sich das Skript dazu nutzen, sowohl 'userChrome.css', 'userContent.css' und die Shadow-Geschichte bereits zu integrieren. Außerdem kann man das Skript später einmal so erweitern, dass bestimmte Sachen "standardisiert" werden, wie z.B. ein einheitliches Verzeichnis für Image/Icon-Dateien.

Wall of text, Sent from my iPhone?

Was ich hier sehe, ist eine Komprimierung von potentiellen Fehlerquellen in ein Konstrukt mit hohem Aufwand für Troubleshooting.

Wenn man jetzt noch bedenkt, daß dieses Konzept einen weiten Bereich von konstant weiterentwickeltem Firefox Code einschliesst, systemübergreifend funktionieren müsste, und jemand die Geschichte permanent warten und anpassen müsste...

Viele weniger engagierte User haben generell schon Schwierigkeiten damit eine Problembeschreibung sinnvoll zu formulieren, und schleppen oft redundanten und/oder alten Code mit; wo setzt man an wenn sich die Quelle nicht mal eingrenzen lässt?
Wir reden hier ja über die Manipulation von einem global integriertem Internet Browser.

Ich bin da eher mit Sören Hentzschel ; Aufwand gering halten, um möglichst vielen Usern den Zugang zu ermöglichen; aber auch ein Minimum an Initiative voraussetzen.

Das kann m.E. Komplexität drastisch reduzieren, für User die Code erstellen oder Probleme zu lösen versuchen, und für User die nach Problemlösungen suchen.
Meine eigenen bescheidenen Bemühungen sind oft dominiert von möglichst einfacher Bedienbarkeit, deshalb unnötig kompliziert für andere User - und anfälliger für Fehler und Code Updates.

Es gibt ja auch eine Unzahl von Erweiterungen und Themes via Mozilla, niemand ist gezwungen für Fx Modifikationen diesen letzten Schritt zu gehen.

Eine low-tech Alternative wäre evtl. ein erweitertes, standardisiertes ReadMe , wie zB du und 2002Andreas es schon in den gepinnten Threads anbieten.

Horstmann

Zitat von Boersenfeger

Geht wohl fast hiermit:

Danke für den Tip.

Horstmann

Zitat von Mira_Belle

Deine Symbole sind vom Firefox. Ich nehme an, die sind 16*16.
Ich habe eigene Symbole genommen, welche erheblich großer sind.
Warum auch immer, werden diese aber nicht auf die erforderliche Größe skaliert.

Icons werden in Fx skaliert, wenn die Grösse entweder im .svg Code oder im CSS Code festgelegt ist, manchmal in beidem, manchmal werden sie (auch) begrenzt via übergeordnete Objekte, etc..
Was wann wo und wie der Fall ist - kommt drauf an.

Wenn's nicht passt, einfach mal die Browser-Werkzeuge bemühen (Icon -> width/height: auto? ); es gibt nicht eine einzige Regel die für alle UI Bereiche benutzt wird.
Deshalb kann man sich zB mit vielen Buttons zu Tode ärgern, wenn man nicht den diversen Fx Codes folgt.

Horstmann

Ein grosser Unterschied wäre noch die Möglichkeit, separate CSS Dateien live editieren und speichern zu können in den Browser Werkzeugen, und auch sofort ein Ergebnis zu sehen.

Damit kann man über mehrere verbundene CSS Dateien parallel arbeiten, idealerweise mit einer zentralen Kontroll CSS plus darin importierten CSS Dateien für grössere Varianten, und dabei alle Styling Elemente aufeinander abstimmen ohne Restarts etc..

Ausserdem fällt damit ein Menge zusätzlicher Code weg im JS, das ganze Dateipfad Gedöns und die Einbindung von CSS allgemein, was bei Fx Code Veränderungen das eventuelle Troubleshooting weiter kompliziert.

Horstmann

Zitat von Mira_Belle

Mh, was sind die Vor- bzw. Nachteile, wenn man das meiste davon direkt in JavaScript umsetzt?

Was mich angeht, manche Sachen kann ich einfach nicht...

Horstmann

Zitat von grisu2099

Man könnte die "Nuller" auch einfach ausblenden...

Mach ich doch auch in den Codebeispielen, für den ersten Ordner Zähler - aber wenn ein Ordner keine Lesezeichen drin hat, aber Ordner - dann will ich den Ziffern Zähler nur verblasst haben!

Etwas anal, ich weiss, aber einfach kann jeder.
Den aktuellen Code habe ich übrigens auch angepasst, um wahlweise einen oder beide 0 Zähler mit display: none ausblenden zu können, wie du es bei dir gemacht hast, ohne weitere Änderungen, also flexibler als vorher.
So zumindest der Plan, bin schon ganz verunsichert nach meinen ganzen Pannen.

Zitat von Sören Hentzschel

Dass der Unterschied für dich wahrnehmbar ist, finde ich ein wenig überraschend in Anbetracht dessen, um wie wenige Elemente es eigentlich geht. Aber grundsätzlich ist es nicht überaschend, dass opacity langsamer ist, weil sich das auf sämtliche Eigenschaften auswirkt und das andere eben nur auf color und fill. Außerdem verändert opacity nicht nur die Deckkraft für das Element selbst, sondern auch für sämtliche Kindelemente. Das ist also mit wesentlich mehr Arbeit für den Browser verbunden.

Bin auch überrascht, aber es passiert deutlich merkbar nur bei vielen Einträgen mit opacity in einem einzelnen Popup.

In diesem Fall ist das mein - wenig realistischer - Test Setup im Testprofil, der teils Dutzende Lesezeichenordner mit keinen Ordnern und/oder keinen Lesezeichen drinnen hat; also eine Menge Pseudoelemente mit opacity < 1.

Deine Erklärung macht auch Sinn; ich kenne es aus mehreren (Render) Anwendungen, daß Transparenz teils massive Leistungseinbrüche mit sich bringen kann, wenn sie nicht sehr gezielt/lokalisiert eingesetzt wird.

Horstmann

So liebe Leute,

In #432 hätten wir jetzt den aktuellen Code, wieder in der Hoffnung daß sich keine Fehler eingeschlichen haben .

Es gibt einen Code mit einem Satz von Varianten für die Icon - Zähler Reihenfolge, je mit und ohne Trennstrich.
Ich hätte da auch noch eine weiter automatisierte Version mit Variablen die selbständig die Trennlinie inkl. Abständen einbauen, aber dann blickt keiner mehr durch.

Dann gibt es den einfacheren Code den ich selber benutze, mit einer festgelegten Icon - Zähler Reihenfolge; wer etwas den Überblick hat, sollte sich aus dem kompletten Code bedienen können, um seine eigenen Reihenfolgen und Trennstriche in eine vereinfachte Version einzubauen.
Oder einfach fragen.

Vielen Dank nochmals an alle Beteiligten!

PS:
Ein Hinweis noch: bei den Extra Einstellungen für den Fall daß ein Zähler auf 0 steht - will ich unbedingt - konnte ich bei mir einen Performance Unterschied feststellen zw. opacity und fill bzw. color mit reduzierter Deckkraft im Farbcode.

ZB ist opacity: 0.5 deutlicher langsamer als etwa color: hsl(0, 0%, 50%, 0.5) !important; und fill: hsl(0, 0%, 50%, 0.5) !important;.
Das macht sich uU nicht bei jedem bemerkbar, evtl. nur bei vielen 0 Einträgen, und man braucht in dem speziellen Fall auch ein .svg Icon mit der korrekten fill Definition im Code, etc..

Horstmann

Zitat von grisu2099

Nö, linkes Icon vor/über der Zahl, obwohl laut Einstellung anders rum...

Wie dir schon geschrieben, der letzte Code war Müll, danke für die Hinweise!

Kommt neu...

Horstmann

Zitat von grisu2099

Mir sind sie es in deiner Version aus #432 schon...
Irgendwie klappt das bei mir auch nicht so recht mit der gewünschten Reihenfolge.

Icons rechts verschoben?

Horstmann

Zitat von Mira_Belle

Und das mit dem Trennstrich geht auch im Code ganz am Ende recht einfach!
let strCountOut2 = String(menuitemCount).padStart(3, "/ ");
Könnte man auch irgendwie in die "Weiche" (useStyle) mit einbauen.
Da ein solcher Trennstrich je nach gewünschter Anzeige an anderer Stelle sein müsste.
Und ob so ein Trennstrich überhaupt angezeigt werden soll.

Viele Wege führen nach Rom.

Irgendwann werden die Variablen aber kompliziert; mein altes Script hatte einen flexiblen Trennstrich drin, glaub ich, aber das war auf 2 schon existierende Elemente verteilt.
Mit der String Geschichte hatte ich irgendein Font(?) Problem in diesem Script, erinnere ich mich aber nicht mehr...

So der so, mit deinem String müsste ich das komplette CSS neu schreiben, da können die so Geneigten selber ein bisschen justieren, oder fragen; an sich ist das Ding ja recht einfach aufgebaut.
Wenn die Zähler-Icon Reihenfolge (grisu) zu Icon-Zähler umgekehrt ist, ist es super einfach.

Noch einfacher: eine separate CSS Datei für jede Version, diese in eine Kontroll CSS Datei zur Auswahl importieren, und diese dann in die userChrome.css importieren, ala Aris.
Ob das für diese Kleinigkeit Sinn macht, ist eine andere Frage.

Was ich wirklich gerne hätte, ist das Element nicht als Child von einem der, sondern als eigenständigen Sibling unter den umgebenden Elementen zu haben. Das geht aber weit über meine Kenntnisse hinaus...

Habe aber Spass mit der Übung, und wieder dazugelernt; hoffe es können einige Leute was damit anfangen, und vielen Dank für deine Hilfe und die von allen anderen Beteiligten!

Horstmann

Zitat von Mira_Belle

Etwas Woodoo

Cooool, dankeschön!

Das mit den JS Variablen muss ich mir wirklich mal genauer anschauen, viel eleganter als das nervige CSS /**/ kommentieren.
Aris hat das in seinem CSS immer schlau gemacht mit dem Kommentieren, aber das ist mir etwas zu hoch.
Wenn's nach mir ginge, würde ich eh lieber ein Paket mit komplett separaten JS und CSS Dateien plus Icons machen.
Hmm....

Bis ich das mit dem JS aber hinbekommen habe, hier erstmal meine eigene, quasi finale Version - ausser jemand findet Fehler - mit diversen Optionen.
Inkl. Trennstrichcode speziell für grisu2099 , dessen Variante als Vorlage gedient hat für die jetzt neuen Dimensionsberechnungen (der padding Ansatz).

Das Ganze sollte klappen mit Firefox Icons (Voreinstellung), und wie gehabt optional mit eigenen Icons, ebenfalls wählbar ist die Icon/Zähler Reihenfolge, und manuell die Farben für Text und Icons.
Ich hoffe die Erläuterungen im Script dazu machen Sinn.

JavaScript

//bmcount_2b.uc.js , Korrektur für Firefox 139 Nightly, RC_1b, Variablen
//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 1 =>
//https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1270320#post1270320

(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 =`

     /** Basiseinstellungen **/

     #bmContent {
          display: flex !important;
          margin-inline: auto 0 !important;   /* Counter rechtsbuendig */
          height: var(--bm_icon_size);  /* Layout passt sich Icon Groesse an */
          padding-left: 8px;            /* min. Abstand links Gesamt für enge Popups */

          /* Icons */
          /* Use Custom Icons, comment to disable => */
          /*--bm_icon_image_1: url("${ProfilePath}/${icon1}");*/
          /*--bm_icon_image_2: url("${ProfilePath}/${icon2}");*/

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

          /* Abstand mittig zwischen Counter #1 Counter #2 */
          --bm_margin_left: 8px;

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

          /** Feste Breite der Counter, abhaengig von Anzahl Ziffern/Fontart und Grösse
           -> Icons untereinander auf gleicher Hoehe **/

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

          /* Breite Zähler #1/#2 (hier fuer 2 Ziffern mit Klammern, Systemfont Mac) */
          --bm_width_one: 2.1em;
          --bm_width_two: 2.1em;


          /** Reihenfolge Icons / Ziffern / alle ungewuenschten Varianten kommentieren **/

          /* #1 Icons links / Ziffern rechts => */
          --bm_padding_one: calc(var(--bm_icon_size) + var(--bm_space)) 0;
          --bm_padding_two: calc(var(--bm_icon_size) + var(--bm_space)) 0;
          --bm_bg_position_1: center left;
          --bm_bg_position_2: center left;

          /* #2 Ziffern links / Icons rechts => */
          /*
          --bm_padding_one: 0 calc(var(--bm_icon_size) + var(--bm_space));
          --bm_padding_two: 0 calc(var(--bm_icon_size) + var(--bm_space));
          --bm_bg_position_1: center right;
          --bm_bg_position_2: center right;
          */

          /* #3 Manuelle Anpassung noetig: Ziffern links / Icons rechts + Trennlinie => */
          /* Unten eintragen bei Counter #1, Leerzeichen vor / beachten:
           content: attr(data-value1) "       /"; */
           /*
          --bm_padding_one: 0 0;
          --bm_padding_two: 0 calc(var(--bm_icon_size) + var(--bm_space));
          --bm_bg_position_1: center right 11px;
          --bm_bg_position_2: center right;
          --bm_margin_left: 4px;
          */

          /* #4 Manuelle Anpassung noetig: Icons links / Ziffern rechts + Trennlinie => */
          /* Unten eintragen bei Counter #1, Leerzeichen vor / beachten:
           content: attr(data-value1) " /"; */
          /*
          --bm_width_one: calc(2.1em + 6px);
          --bm_padding_one: calc(var(--bm_icon_size) + var(--bm_space)) 0;
          --bm_padding_two: calc(var(--bm_icon_size) + var(--bm_space)) 0;
          --bm_bg_position_1: center left;
          --bm_bg_position_2: center left;
          --bm_margin_left: 4px;
          */

          /** Reihenfolge Varianten Ende **/
          }

     /** Basiseinstellungen Ende **/


     /** Die Counter **/

     /* 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_one);
          justify-content: end;
          align-items: center;
          background-image: var(--bm_icon_image_1);
          background-position: var(--bm_bg_position_1);
          background-repeat: no-repeat;
          background-size: var(--bm_icon_size) var(--bm_icon_size);
          /*color: hsl(155, 90%, 50%, 1) !important;*/
          /*fill: hsl(255, 70%, 50%, 1) !important;*/     /* Farben Text / svg Icons aendern */
          }

     /* 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_two);
          align-items: center;
          justify-content: end;
          margin-left: var(--bm_margin_left);
          background-image: var(--bm_icon_image_2);
          background-position: var(--bm_bg_position_2);
          background-repeat: no-repeat;
          background-size: var(--bm_icon_size) var(--bm_icon_size);
          /*color: hsl(155, 90%, 50%, 1) !important;*/
          /*fill: hsl(255, 70%, 50%, 1) !important;*/     /* Farben Text / svg Icons aendern */
          }

     /** Optionale Extras **/

     /* Anpassungen bei Zahl = 0 */

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

      /* Verstecken/ Verblassen #2 */
      #bmContent[data-value2="[0]"]::after,
      #bmContent[data-value2="0"]::after,
      #bmContent[data-value2="(0)"]::after {
          /*opacity: 0.5;
          display: none;*/
          color: hsl(0, 0%, 50%, 0.5) !important;
          fill: hsl(0, 0%, 50%, 0.5) !important;     /* Farben Deckkraft statt opacity für Performance Test */
          }

      /** Tool zum Testen der Abstände **/
      /*
      #bmContent {
          outline: 1px solid blue;
          outline-offset: 4px;
          }
      #bmContent::after {
          background-image: var(--bm_icon_image_1),linear-gradient(lightgreen, lightgreen) !important;
          background-color: pink;
          }
      #bmContent::before {
          background-image: var(--bm_icon_image_2),linear-gradient(lightblue, lightblue) !important;
          background-color: khaki;
          }
      */
		`;
        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 bmContent = document.createElement("bmContent");
              bmContent.id = "bmContent";
              bmCounta.appendChild(bmContent);

              //Zähler Optionen, mit, ohne, eckige, runde Klammern

              //let strCountOut1 = "" + menuCount + "";      //  ohne Klammern
              //let strCountOut1 = "(" + menuCount + ")";    //  runde Klammern
              let strCountOut1 = "[" + menuCount + "]";      //  eckige Klammern
              bmContent.setAttribute('data-value1', strCountOut1);

              //let strCountOut2 = "" + menuitemCount + "";      //  ohne Klammern
              //let strCountOut2 = "(" + menuitemCount + ")";    //  runde Klammern
              let strCountOut2 = "[" + menuitemCount + "]";      //  eckige Klammern
              bmContent.setAttribute('data-value2', strCountOut2);

              // Extra class und Attribut parent; optional
                  //if (bmContent.parentElement) {
              //bmContent.parentElement.classList.add('pfeil');
              //bmContent.parentElement.setAttribute('data-value3', strCountOut1 + strCountOut2);
              //}

            }, 100);
        }
    }

})();

Alles anzeigen

Vereinfachte Version, weniger Variablen, nur eine Version für Reihenfolge von Icon zu Zähler:

JavaScript

//bmcount_2c.uc.js , Korrektur für Firefox 139 Nightly, RC_1c, Vereinfacht
//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 1 =>
//https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1270320#post1270320


(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 =`

     /** Basiseinstellungen **/

     #bmContent {
          display: flex !important;
          margin-inline: auto 0 !important; /* Gesamt rechtsbuendig */
          padding-left: 8px;                /* min. Abstand links Alles für enge Popups */
          height: var(--bm_icon_size);      /* Layout passt sich Icon Groesse an, Test */

          /* Icons */
          /* Use Custom Icons, comment to disable => */
          /*--bm_icon_image_1: url("${ProfilePath}/${icon1}");*/
          /*--bm_icon_image_2: url("${ProfilePath}/${icon2}");*/

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

          /* Abstand Mitte zwischen Counter #1 Counter #2 */
          --bm_margin_left: 8px;

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

          /** Feste Breite der Counter, abhaengig von Anzahl Ziffern/Fontart und Grösse
           -> Anpassen bis Icons untereinander auf gleicher Hoehe **/

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

          /* Breite der Zähler #1/#2 (hier fuer je 2 Ziffern mit Klammern, Systemfont Mac) */
          --bm_width_one: 2.1em;
          --bm_width_two: 2.1em;
     }

     /** Basiseinstellungen Ende **/


     /** Die Counter **/

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

     /* Counter #2 Links */
     #bmContent::after {
          content: attr(data-value2);
          display: flex;
          min-width: fit-content;
          width: var(--bm_width_two);
          padding-inline: calc(var(--bm_icon_size) + var(--bm_space)) 0;
          align-items: center;
          justify-content: end;
          margin-left: var(--bm_margin_left);
          background-image: var(--bm_icon_image_2);
          background-position: center left;
          background-repeat: no-repeat;
          background-size: var(--bm_icon_size);
          }

     /** Optionale Extras **/

     /* Anpassungen bei Zahl = 0 */

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

      /* Verstecken/ Verblassen #2 */
      #bmContent[data-value2="[0]"]::after,
      #bmContent[data-value2="0"]::after,
      #bmContent[data-value2="(0)"]::after {
          /*opacity: 0.5;
          display: none;*/
          color: hsl(0, 0%, 50%, 0.5) !important;
          fill: hsl(0, 0%, 50%, 0.5) !important;     /* Farben Deckkraft statt opacity für Performance Test */
          }

      /** Tool zum Testen der Abstände **/
      /*
      #bmContent {
          outline: 1px solid blue;
          outline-offset: 4px;
          }
      #bmContent::after {
          background-image: var(--bm_icon_image_1),linear-gradient(lightgreen, lightgreen) !important;
          background-color: pink;
          }
      #bmContent::before {
          background-image: var(--bm_icon_image_2),linear-gradient(lightblue, lightblue) !important;
          background-color: khaki;
          }
      */
		`;
        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 bmContent = document.createElement("bmContent");
              bmContent.id = "bmContent";
              bmCounta.appendChild(bmContent);

              //Zähler Optionen, mit, ohne, eckige, runde Klammern

              //let strCountOut1 = "" + menuCount + "";      //  ohne Klammern
              //let strCountOut1 = "(" + menuCount + ")";    //  runde Klammern
              let strCountOut1 = "[" + menuCount + "]";      //  eckige Klammern
              bmContent.setAttribute('data-value1', strCountOut1);

              //let strCountOut2 = "" + menuitemCount + "";      //  ohne Klammern
              //let strCountOut2 = "(" + menuitemCount + ")";    //  runde Klammern
              let strCountOut2 = "[" + menuitemCount + "]";      //  eckige Klammern
              bmContent.setAttribute('data-value2', strCountOut2);

              // Extra class und Attribut parent; optional
                  //if (bmContent.parentElement) {
              //bmContent.parentElement.classList.add('pfeil');
              //bmContent.parentElement.setAttribute('data-value3', strCountOut1 + strCountOut2);
              //}

            }, 100);
        }
    }

})();

Alles anzeigen

Horstmann

Wenn's jetzt noch eine Möglichkeit gäbe, die Reihenfolge von Icon und Zähler einfach umzukehren, ohne neues Script/CSS.

Dank grisu2099 und seinem width/padding Ansatz, evtl. so; die Icons sind hier jetzt auf - hoffentlich noch aktuelle - Fx eigene Icons eingestellt, sollten eigentlich direkt anzeigen ohne Änderungen.

Zeilen 47 bis 52, den gewünschten Codeblock einfach ein/auskommentieren; gerne testen bei Interesse; den Schrägstrich bekommt man da auch noch leicht rein.

JavaScript

//bmcount_2.uc.js RC1, Korrektur für Firefox 139 Nightly  TEST
//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

(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 =`

     /** Basiseinstellungen **/

     #bmContent {
          display: flex !important;
          margin-inline: auto 0 !important;   /* Counter rechtsbuendig */
          height: var(--bm_icon_size);

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

          /* min. Abstand links Alles für enge Popups, rechts 1ter zu 2tem Counter */
          --bm_margin-inline: 16px 8px;

          /** Feste Breite der Counter, abhaengig von Anzahl Ziffern/Fontart und Grösse -> Icons untereinander auf gleicher Hoehe **/
          /* Fontbreite (hier fuer 2 Ziffern mit Klammern, Systemfont Mac) */
          --bm_width_one: 2.1em;
          --bm_width_two: 2.1em;

          /* Abstand zwischen Icon und Ziffern */
          --bm_space_one: 2px;
          --bm_space_two: 2px;


          /**** Reihenfolge Icon / Ziffern ****/
          /* Icon links / Ziffern rechts => */

          --bm_padding_one: calc(var(--bm_icon_size) + var(--bm_space_one)) 0;
          --bm_padding_two: calc(var(--bm_icon_size) + var(--bm_space_two)) 0;
          --bm_bg_position: center left;

          /** Icon rechts / Ziffern links => **/

          /*--bm_padding_one: 0 calc(var(--bm_icon_size) + var(--bm_space_one));
          --bm_padding_two: 0 calc(var(--bm_icon_size) + var(--bm_space_two));
          --bm_bg_position: center right;*/


          /** Icons **/
          /** Use Custom Icons, comment to disable => **/
          /*--bm_icon_image_1: url("${ProfilePath}/${icon1}");*/
          /*--bm_icon_image_2: url("${ProfilePath}/${icon2}");*/

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

     /** Basiseinstellungen Ende **/


     /* Counter #1 Folder */
     #bmContent::before {
          content: attr(data-value1);
          display: flex;
          width: var(--bm_width_one);
          /*width: calc(var(--bm_icon_size) + 2px);*/
          padding-inline: var(--bm_padding_one);
          justify-content: end;
          align-items: center;
          margin-inline: var(--bm_margin-inline);
          background-image: var(--bm_icon_image_1);
          background-position: var(--bm_bg_position);
          background-repeat: no-repeat;
          background-size: var(--bm_icon_size) var(--bm_icon_size);
          /*color: purple !important;*/
          /*fill: rgba(255, 150, 68, 1.0) !important;*/      /* Farben Text / svg Icons aendern */
          /*outline: 1px solid purple !important;*/

          }

     /* Counter #2 Links */
     #bmContent::after {
          content: attr(data-value2);
          display: flex;
          width: var(--bm_width_two);
          padding-inline: var(--bm_padding_two);
          align-items: center;
          justify-content: end;
          background-image: var(--bm_icon_image_2);
          background-position: var(--bm_bg_position);
          background-repeat: no-repeat;
          background-size: var(--bm_icon_size) var(--bm_icon_size);
          /*color: purple !important;*/
          /*fill: rgba(255, 150, 68, 1.0) !important;*/      /* Farben Text / svg Icons aendern */
          /*outline: 1px solid orange !important;*/

          }

     /** Optionale Extras **/

     /* Adjust/hide if count = 0 */

      /* Hide/Dim #1 icon + counter if Count = 0 */
      #bmContent[data-value1="[0]"]::before,
      #bmContent[data-value1="0"]::before,
      #bmContent[data-value1="(0)"]::before {
          opacity: 0.2;
          }

     /* Dim #2 icon + counter if Count = 0 */
      #bmContent[data-value2="[0]"]::after,
      #bmContent[data-value2="0"]::after,
      #bmContent[data-value2="(0)"]::after {
          opacity: 0.5;
          }

		`;

        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 bmContent = document.createElement("bmContent");
              bmContent.id = "bmContent";
              bmCounta.appendChild(bmContent);


        //Zähler Optionen, mit, ohne eckige, runde Klammern

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

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

        // Extra class und Attribut parent; va für 0 + 0
        if (bmContent.parentElement) {
          bmContent.parentElement.classList.add('pfeil');
          bmContent.parentElement.setAttribute('data-value3', strCountOut1 + strCountOut2);
        }
            }, 100);
        }
    }

})();

Alles anzeigen

Horstmann

Zitat von grisu2099

Ich habe mir aus den zahlreichen "Horstmannschen Varianten" diese Version zusammengestrickt, die für meinen Geschmack perfekt paßt. Änderungen habe ich hauptsächlich im CSS-Bereich vorgenommen, im Abstände etc. anzupassen.
Getestet und angepaßt zur Verwendung in Nightly 139!

Schlaue Sache mit dem padding, notiert!

Horstmann

Zitat von Mira_Belle

Für mich ist es jetzt perfekt!

Man beachte bitte die kleine Fehlerkorrektur in Zeile 125.
Ganz toll finde ich, dass ich nun wieder SVG nutzen kann, die eben nicht auf 16px*16px fest genagelt sind,
sondern eben auch solche, die viel größer sind!
Hier nun meine finale Abwandlung!
Funktioniert in der Nightly.

Super, hört sich prima an, und danke für's testen und die Tips!

(Was war denn die Fehlerkorrektur, und in welchem Script?)

Horstmann

Zitat von Mira_Belle

Ich habe auch so meine Probleme.
1. Die Grafiken lassen sich nicht mehr einzeln ansprechen, damit man z.B. unterschiedliche Farben wählen kann.
Das andere Problem konnte ich lösen. Die Variablen

Danke für den Test!

Die letzte Version hat die beiden Icons wieder aufgeteilt auf die beiden Pseudoelemente, aber diesmal als bg-image statt content, sollten also einzeln ansprechbar sein.
Die Position ist dann jeweils auch anzupassen, ist aber letztlich einfacher zu handhaben; background-position für beide wird jetzt von center right Xpx gemessen.

Im Prinzip den background-image code von #bmContent einfach in die after/before Pseudos verschieben, aber eben nur für jeweils ein Icon.

Bis auf die Icons kannste auch einfach die CSS Variablen benutzen, deine machen ja eigentlich das gleiche.

Den String würd ich selber ja rauswerfen; das padEnd ist quasi schon im CSS eingebaut und alle Abstände damit einstellbar.

Zitat von grisu2099

Mit der neuen Version sieht das besser aus.

Prima, danke wieder für den Test!
Gut zu hören dass es auch in Nightly fluppt.

Horstmann

Zitat von grisu2099

Komisch, hier klappt das (in der Nightly)...

Aber nur die Zahl 0 wird gedimmt, nicht das dazugehörige Icon, oder?

Danke Schlafrhythmus Schwankung (wesentliche Änderungen Zeile 40-80) :

JavaScript

//bmcount testa neu G sauber Sibling TEST no multi Pfeil targeted brackets TEST background images TEST 2
// 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

(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 =`

    /* Counter rechtsbuendig */
     #bmContent {
          display: flex !important;
          margin-inline: auto 0 !important;
     }

     /* If Icons/text uebergross center content vertically / optional */
     /*
     menu.menu-iconic.bookmark-item .pfeil {
          align-items: center;
          outline: 1px solid red;
          outline-offset: 2px;
          }
      */

     /** Alternative Icons separat, TEST2!!! **/

     /* Feste Breite der Counter abhaengig von Anzahl/Grösse Ziffern -> Icons untereinander auf gleicher Hoehe */
     /* --bm_width = Icon Grösse 16px Standard + Fontbreite + Abstand Icon zu Zahl */
     /* --bm_icon_size = Icon Grösse anders als 16px Firefox Standard --> Abstand Icon zu Zahl in --bm_width_one anpassen */

     #bmContent {
          --bm_width_one: calc(var(--bm_icon_size) + 2.1em + 2px);
          --bm_width_two: calc(var(--bm_icon_size) + 2.1em + 2px);
          --bm_icon_size: 16px;
          height: var(--bm_icon_size);
          /*outline: 1px solid orange;
          outline-offset: 1px;*/
          }

     /* Counter #1 Folder */
     #bmContent::before {
          content: attr(data-value1);
          display: flex;
          width: var(--bm_width_one);
          justify-content: end;
          align-items: center;
          margin-inline: 16px 8px;   /* min. Abstand links für enge Popups, rechts zum 2ten Counter */
          background-image: url("${ProfilePath}/${icon1}")!important;
          background-position: center right calc(var(--bm_width_one) - var(--bm_icon_size));
          background-repeat: no-repeat;
          background-size: var(--bm_icon_size) var(--bm_icon_size);
          /*outline: 1px solid lightgreen;*/
          }

     /* Counter #2 Links */
     #bmContent::after {
          content: attr(data-value2);
          display: flex;
          width: var(--bm_width_two);
          align-items: center;
          justify-content: end;
          background-image: url("${ProfilePath}/${icon2}") !important;
          background-position: center right calc(var(--bm_width_two) - var(--bm_icon_size));
          background-repeat: no-repeat;
          background-size: var(--bm_icon_size) var(--bm_icon_size);
          /*outline: 1px solid lightblue;*/
          }


     /** Adjust/hide if count = 0 **/

      /* Hide/Dim #1 icon + counter if Count = 0 */
      #bmContent[data-value1="[0]"]::before,
      #bmContent[data-value1="0"]::before,
      #bmContent[data-value1="(0)"]::before {
          opacity: 0.2;
          }

     /* Dim #2 icon + counter if Count = 0 */
      #bmContent[data-value2="[0]"]::after,
      #bmContent[data-value2="0"]::after,
      #bmContent[data-value2="(0)"]::after {
          opacity: 0.5;
          }

     /* Hide empty Popup */
     menu.menu-iconic.bookmark-item menupopup[emptyplacesresult="true"] {
          display: none !important;
          }

      /* Arrow before empty Popup */
      .pfeil[data-value3="[0][0]"] ~ .menu-right image,
      .pfeil[data-value3="00"] ~ .menu-right image,
      .pfeil[data-value3="(0)(0)"] ~ .menu-right image {
          fill: rgba(255, 150, 68, 1.0) !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;

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

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

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

        // Attribut parent va für 0 + 0
        if (bmContent.parentElement) {
          bmContent.parentElement.classList.add('pfeil');
          bmContent.parentElement.setAttribute('data-value3', strCountOut1 + strCountOut2);
        }
            }, 100);
        }
    }

})();

Alles anzeigen

Horstmann

Mist; das dimmen oder entfernen bei Anzahl 0 funktioniert nicht mehr für die Icons mit der neuen Version; also wieder ran...

Horstmann

Zitat von grisu2099

Zitat von Horstmann

Ich hoffe da sind nicht wieder dumme copy/paste Fehler drin.

Leider doch - Zeile 42. Da hast du 2x icon1 verwendet...

Uuunglaublich..... Danke, geändert....

Beiträge von Horstmann

Skripte funktionieren nicht mehr

Installations Skript zur Vorbereitung des FF zur Nutzung von JavaScript. [ps1 verfügbar]

Installations Skript zur Vorbereitung des FF zur Nutzung von JavaScript. [ps1 verfügbar]

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

Skripte funktionieren nicht mehr

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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