1. Nachrichten
  2. Forum
    1. Unerledigte Themen
    2. Forenregeln
  3. Spenden
  • Anmelden
  • Registrieren
  • Suche
Alles
  • Alles
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche
  1. camp-firefox.de
  2. Horstmann

Beiträge von Horstmann

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

    • Horstmann
    • 15. Juli 2023 um 09:12
    Zitat von omar1979
    Zitat von Horstmann

    Benötigt hier auch keine Icons zum einfacheren testen, klaut von Fx. ;)

    Bedeutet das, dass man in diesem Script keine Icons laden kann?

    Doch, nur die beiden Zeilen bei background-image ändern, bzw, die /**/ Komentare versetzen.

    Aber wie Mira sagt, das ist nur ein Test, nicht zur Anwendung.

    Die offiziellen Mira-Varianten kommen von Mira_Belle ; meine eigene Variante vom Basisscript ist vor ein paar Seiten gepostet.

    Mira's gefällt mir aber besser, weil man nicht rumrechnen muss, nur die Schrift passt bzw. gefällt mir noch nicht.

    Übrigens ist in deinem Dadateipfad der Ordnername Icons mit grossem 'I', im Script kleingeschrieben icons.

    Macht bei mir keinen Unterschied, sag nur.

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

    • Horstmann
    • 14. Juli 2023 um 22:55
    Zitat von omar1979

    Sorry wenn ich mich irre, aber auf deinem Letzten Bild sehe ich das blaue Feld mit dem Anzahl und das Stern-Icon überschneiden sich. Ist das evtl extra gemacht?

    Gut beobachtet, das ist denk ich durch die unterschiedliche Art des Paddings für den ersten und zweiten Zahlenblock.

    Ohne Hintergundfarbe etc. ist es evtl. kein Problem.


    Zitat von Mira_Belle
    Zitat von Horstmann

    Hmm, seltsam, bei mir muss ich das noch zu deinem Script hinzufügen , damit das Textfeld gesamt niedriger und damit der Text zentriert wird:

    Vielleicht tatsächlich ein OS Dingens, und diese Schrift wird auf meinem Mac anders plaziert als bei dir.

    Kopfkratz.

    Ja, seltsam... :/

    Hier noch ein etwas wirres Testscript, basierend auf einem von deinen, bei dem passt bei mir alles anscheinend;

    Abgesehen natürlich von dem einen Ordner mit dreistelliger Ordnerzahl; aber der ist nur zum Testen, das ist unrealistisch und hatten wir ja schon erwähnt.

    Das erste Textfeld hab ich einfach genauso eingerichtet wie dein 2tes, dann gibt's auch keine optischen Überschneidungen wie von omar1979 erwähnt.

    Hast du ja auch schon anders aufgebaut im Script in #243.

    Benötigt hier auch keine Icons zum einfacheren testen, klaut von Fx. ;)

    Natürlich ist das aber dein Script, sind alles nur Vorschläge! :!:

    JavaScript
    // BookmarkCount.uc.js
    
    /* ******************************************************************************************************************* */
    /* Author BrokenHeart               => https://www.camp-firefox.de/forum/thema/136572/?postID=1229536#post1229536 **** */
    /* Correction from BrokenHeart      => https://www.camp-firefox.de/forum/thema/136572/?postID=1229696#post1229696 **** */
    /* Extension from Sören Henschel    => https://www.camp-firefox.de/forum/thema/136572/?postID=1229555#post1229555 **** */
    /* Customized by Mira inspired by grisu2099     ********************************************************************** */
    /* Source                           => https://www.camp-firefox.de/forum/thema/136572/?postID=1229875#post1229883 **** */
    /* Customized by Mira inspired by Horstmann     ********************************************************************** */
    /* Source                           => https://www.camp-firefox.de/forum/thema/136572/?postID=1229993#post1229993 **** */
    /* ******************************************************************************************************************* */
    /* Finaly Source                    => https://www.camp-firefox.de/forum/thema/136572/?postID=1230128#post1230128 **** */
    /* ******************************************************************************************************************* */
    /* Custom Counter in the Bookmarks for folders and links ************************************************************* */
    /* ******************************************************************************************************************* */
    
    (function() {
    
        if (!window.gBrowser) return;
        
        setTimeout(function() {
            setFunction();
        },50);
    
        let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
        let icon1 = "folder3neuFat2b.png"   // flower.png
        let icon2 = "faviconfull.svg"
    
        function setFunction() {
    
            const css =`
    
    
                                                            /*  Variable Font Size CHANGE2 TEST2  */
                :root {
                    --counter_fontsize: 12px;                      
                }
    
                                                          /*  Outline only for testing  TEST2  */ 
    
                menu.menu-iconic.bookmark-item {
                     outline: 1px solid orange !important;
                     outline-offset: -8px !important;
                }
    
    
                .countClass1::before {
                    content: "";
                    /*background-image: url(${profilePath}/${icon1});*/          /*  TEST  */
                    background-image: url("chrome://global/skin/icons/folder.svg");
                    background-repeat: no-repeat;
                    background-size: 14px;  /* icon size */         /*  TEST  */
                    background-position: center;
                    margin-left: 16px !important;    /* Abstand links minimum für schmale Popus  CHANGE  */ 
                    margin-right: 4px !important;    /* Abstand bis zum "Wert" der Ordner CHANGE  */ 
                    height: 16px;
                    width: 16px;
                    /*fill: #c0c0c0;*/         /*  TEST  */
                    fill-opacity: 1;
                }
                                                 /* Default FX left margin ist 16px !! -->  CHANGE  */ 
                .countClass1 label {
                    margin-inline: 0px !important;
               }
    
                hbox.menu-accel-container.countClass1 {
                    align-items: center !important;
                }
    
                .countClass1::after {
                    content: attr(data-value1) !important;
                    font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
                    font-size: var(--counter_fontsize) !important;                           /* CHANGE2 TEST2  */
                    font-weight: 900 !important;
                    color: red !important;                     /*  TEST  */  
                    background-color: lightgrey;          /*  TEST  */
                    height: var(--counter_fontsize);        /* height = font size Text zentriert CHANGE2  TEST2  */
                }
    
    
                .countClass2::before {
                    content: "";
                    /*background-image: url(${profilePath}/${icon2});*/        /*  TEST  */
                    background-image: url("chrome://browser/skin/bookmark-hollow.svg");
                    background-repeat: no-repeat;
                    background-size: 12px;  /* icon size */         /*  TEST  */
                    background-position: center;
                    margin-right: 4px !important;   /* Abstand bis zum "Wert" der Links */
                    margin-left: 4px !important;   /* Abstand bis zum Icon der (Links) ORDNER  CHANGE */
                    height: 16px;
                    width: 16px;
                    /*fill: #c0c0c0;*/         /*  TEST  */
                    fill-opacity: 1;
                }
    
                .countClass2::after {
                    content: attr(data-value2);
                    font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
                    font-size: var(--counter_fontsize) !important;                            /* CHANGE2 TEST2  */
                    font-weight: 900 !important; 
                    color: red !important;                     /*  TEST  */
                    margin-right: 4px !important;  /* Abstand zum Pfeil rechts CHANGE */
                    background-color: lightblue;         /*  TEST  */
                    height: var(--counter_fontsize);       /* height = font size Text zentriert CHANGE2 TEST2  */
                    /*margin-top: 4px;*/                                 /* Text unten buendig OPTIONAL 2  */
                }
    
    
                .countClass2 image {
                    order: 1;                       /* Pfeil hinter dem "Wert" der Links */
                }
            `;
    
            const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
            const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
            sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
    
            let bmbMenu = document.getElementById('bookmarks-menu-button');
            let bookMenu = document.getElementById('bookmarksMenu');
            let persToolBar = document.getElementById('PersonalToolbar');
            
            if(bmbMenu)
                bmbMenu.addEventListener('popupshowing', onPopupShowing ); 
            if(bookMenu)
                bookMenu.addEventListener('popupshowing', onPopupShowing ); 
            if(persToolBar)
                persToolBar.addEventListener('popupshowing', onPopupShowing ); 
        }
        
        function onPopupShowing(aEvent) {
            
            let popup = aEvent.originalTarget;
    
            for (let item of popup.children) {
                if (item.localName != 'menu' || item.id?.startsWith('history')) {
                    continue;
                }    
                setTimeout(() => {
                  let itemPopup = item.menupopup;
                  itemPopup.hidden = true;
                  itemPopup.collapsed = true;
                  itemPopup.openPopup();
                  itemPopup.hidePopup();
                  let menuitemCount = 0;
                  let menuCount = 0;
                  for (let subitem of itemPopup.children) {
                    if (subitem.classList.contains('bookmark-item') && !subitem.disabled && !subitem.hidden) {
                      if (subitem.localName == 'menuitem') {
                        menuitemCount++;
                      } else if (subitem.localName == 'menu') {
                        menuCount++;
                      }
                    }
                  }
                  itemPopup.hidden = false;
                  itemPopup.collapsed = false;
                  //item.style.color = '#c0c0c0';
                  
                  let label1 = item.childNodes[3];
      
                  label1.classList.add('countClass1');
    
                  let strCountOut1 = String(menuCount).padEnd(2, '\xa0');  //  CHANGE!  TEST2
    
                  //let strCountOut1 = String(menuCount).padEnd(2) + '\xa0';     // padEnd2 => zwei Stellen, plus Abstand 
                  label1.setAttribute('data-value1', strCountOut1);
    
                  let label2 = item.childNodes[4];
      
                  label2.classList.add('countClass2');
                  let strCountOut2 = String(menuitemCount).padEnd(3, '\xa0');  // padEnd3 => drei Stellen, Abstand bei nur einer Ziffer    
                  label2.setAttribute('data-value2', strCountOut2);
    
                }, 100);
            }
        }    
    })();
    Alles anzeigen
  • Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

    • Horstmann
    • 14. Juli 2023 um 22:29
    Zitat von Mira_Belle
    Zitat von Horstmann

    Der Text der Zählereinheiten ist allerdings immer noch zur oberen Kante hin ausgerichtet, statt mittig.

    Der blaue Kasten ist das Textfeld, man sieht dass der Text nicht vertikal zentriert ist wie der Rest der Zeile.

    Also bei mir ist es mit Deinem ergänzendem Code mittig!

    Und hier der Code dazu

    Hmm, seltsam, bei mir muss ich das noch zu deinem Script hinzufügen , damit das Textfeld gesamt niedriger und damit der Text zentriert wird:

    CSS
                .countClass1::after, .countClass2::after {
                    height: 12px;                       /* height gleich = font-size */
                }

    Im ersten Bild dein letzter Code ohne, im zweiten Bild mit der Ergänzung, sonst nur die Icons getauscht.

    Vielleicht tatsächlich ein OS Dingens, und diese Schrift wird auf meinem Mac anders plaziert als bei dir.


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

    • Horstmann
    • 14. Juli 2023 um 20:05
    Zitat von FuchsFan

    Da kann man was draus machen, wieso eigentlich nicht? ;)

    Ah, noch ein Freund der schönen Farbe Blau! :thumbup:

    War aber eigentlich nur zum Testen eingebaut. ;)

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

    • Horstmann
    • 14. Juli 2023 um 16:48
    Zitat von Mira_Belle

    Bist Du benachrichtigt worden?

    Nein, auch nicht bei deinen anderen Posts mit nur meinem Link drin.

    Zitate funktionieren, wie Andreas gerade geschrieben hat, nicht aber Links.

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

    • Horstmann
    • 14. Juli 2023 um 16:47
    Zitat von Mira_Belle
    Zitat von Horstmann

    In deinem Screenshot von #225 sind die Zahlen allerdings genauso vertikal versetzt, wie bei meinem Test deiner letzten Version. :/

    Stimmt, habe ich gerade auch gemerkt, ist zwar nur 1px, aber halt doch versetzt!

    Danke für den Hinweis.

    Habe also auch

    CSS
        /* Default FX left margin ist 16px !! -->  CHANGE  */ 
                .countClass1 label {
                    margin-inline: 0px !important;
                }
        /* Ordner container Inhalt zentriert -->  CHANGE  */ 
                hbox.menu-accel-container.countClass1 {
                    align-items: center !important;
                }

    hinzugefügt.

    Ist's mit den neuen Variablen besser?

    Alles anzeigen


    Viel besser - mit nur dem 2ten Teil !

    Sind aber mehr als 1 Pixel Versatz gewesen, eher 2. ;)

    Damit der 1ste Teil mit deinem letzten Script funktioniert, müsste man noch die ganzen anderen Margins anpassen, das ist aber weniger das Problem.

    Der Text der Zählereinheiten ist allerdings immer noch zur oberen Kante hin ausgerichtet, statt mittig.

    Der blaue Kasten ist das Textfeld, man sieht dass der Text nicht vertikal zentriert ist wie der Rest der Zeile.

    Ist aber kein Drama, das kann man bestimmt leicht verschieben wenn's stört.

    Was wirklich hilft sind Screenshots zu den Codes - mach ich auch nicht immer - aber dann hat man einen besseren Vergleich.


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

    • Horstmann
    • 14. Juli 2023 um 16:21
    Zitat von Mira_Belle

    Was a angeht, war alles i.O., so wie von mir gedacht.

    Warum bei Dir auf dem Mac mit den Grüßen und den Positionen so komisch ist :?:

    In deinem Screenshot von #225 sind die Zahlen allerdings genauso vertikal versetzt, wie bei meinem Test deiner letzten Version. :/

    (Übrigens: wenn du einem Usernamen ein @ vorstellst (rote Outline als Ergebnis), bekommt dieser User (evtl.) eine Mitteilung darüber erwähnt worden zu sein.

    Wenn du nur einen Link zum Userprofil einstellst, dann nicht. ;)

    Mira_Belle vs. Mira_Belle . )

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

    • Horstmann
    • 14. Juli 2023 um 14:36
    Zitat von Mira_Belle

    Finale.

    Code bereinigt und kommentiert

    Sorry dass ich das nochmal vorbringe, aber das klappt nicht so ganz bei mir. :/

    Wenn ich dein Script in einem Testprofil ohne weitere CSS etc. Modifikationen benutze, sieht das aus wie im Bild im Anhang.

    Da habe ich nur ein paar Farben und die Icons geändert zur besseren Übersicht.

    Hast du evtl. in einem Profil mit anderen Veränderungen getestet?

    Das Problem hatte ich auch...

    Kann aber auch damit zusammenhängen dass ich einen Mac benutze.


    Abgesehen von den Überlappungen, die beiden grössten Baustellen:

    a) der Textblock für die Zähler rechts und der links haben verschiedene Grössen und Positionen, und der Text ist in seine Feld oben links angeordnet - keine Ahnung warum.

    Ein Grund ist dass menu-accel-container kein align-items: center hat, der darauffolgende Container .menu-right aber schon.

    Wobei ich das Problem nur sehe wenn ich die (monospace) Fonts benutze, die aber ja wohl notwendig sind für diese Lösung.

    Dss Resultat ist, dass der linke Textzähler höher als der rechte sitzt.

    b) Kleineres Manko: Die Margins kann man einfacher haben, und die negativen Werte vermeiden, wenn man für .countClass1 label das margin-inline auf 0 setzt .

    Firefox hat da nämlich als Standard ein linkes Margin vom Label aus von 16px gesetzt, das bei schmalen Popup Fenstern einen minimalen Abstand zw. linken und rechten Elemente erzwingt - dieser Abstand muss jetzt vor unser erstes ::after, oder das gesamte Element.

    Hier mal ein grober Versuch das Ganze anzupassen, ich hoffe es macht Sinn:

    JavaScript
    // BookmarkCount.uc.js
    
    /* ******************************************************************************************************************* */
    /* Author BrokenHeart               => https://www.camp-firefox.de/forum/thema/136572/?postID=1229536#post1229536 **** */
    /* Correction from BrokenHeart      => https://www.camp-firefox.de/forum/thema/136572/?postID=1229696#post1229696 **** */
    /* Extension from Sören Henschel    => https://www.camp-firefox.de/forum/thema/136572/?postID=1229555#post1229555 **** */
    /* Customized by Mira inspired by grisu2099     ********************************************************************** */
    /* Source                           => https://www.camp-firefox.de/forum/thema/136572/?postID=1229875#post1229883 **** */
    /* Customized by Mira inspired by Horstmann     ********************************************************************** */
    /* Source                           => https://www.camp-firefox.de/forum/thema/136572/?postID=1229993#post1229993 **** */
    /* ******************************************************************************************************************* */
    /* Finaly Source                    => https://www.camp-firefox.de/forum/thema/136572/?postID=1230128#post1230128 **** */
    /* ******************************************************************************************************************* */
    /* Custom Counter in the Bookmarks for folders and links ************************************************************* */
    /* ******************************************************************************************************************* */
    
    (function() {
    
        if (!window.gBrowser) return;
        
        setTimeout(function() {
            setFunction();
        },50);
    
        let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
        let icon1 = "flower.png"
        let icon2 = "faviconfull.svg"
    
        function setFunction() {
    
            const css =`
                .countClass1::before {
                    content: "";
                    background-image: url(${profilePath}/${icon1}); 
                    background-repeat: no-repeat;
                    background-size: 16px;  /* icon size */
                    background-position: center;
                    margin-left: 16px !important;    /* Abstand links minimum für schmale Popus  CHANGE  */ 
                    margin-right: 4px !important;    /* Abstand bis zum "Wert" der Ordner CHANGE  */ 
                    height: 16px;
                    width: 16px;
                    fill: #c0c0c0;
                    fill-opacity: 1;
                }
                                                                      /* Default FX left margin ist 16px !! -->  CHANGE  */ 
                .countClass1 label {
                    margin-inline: 0px !important;
               }
    
                                                                      /* Ordner container Inhalt zentriert -->  CHANGE  */ 
    
                hbox.menu-accel-container.countClass1 {
                    align-items: center !important;
                }
    
                .countClass1::after {
                    content: attr(data-value1) !important;
                    font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
                    font-size: 12px !important;
                    font-weight: 900 !important;
                    color: red !important;                     /*  TEST  */  
                    background-color: lightblue;          /*  TEST  */
                    height: 12px;                                 /* height = font size Text zentriert CHANGE  */
                }
    
    
                .countClass2::before {
                    content: "";
                    /*background-image: url(${profilePath}/${icon2});*/        /*  TEST  */
                    background-image: url("chrome://browser/skin/bookmark-hollow.svg");
                    background-repeat: no-repeat;
                    background-size: 16px;  /* icon size */
                    background-position: center;
                    margin-right: 4px !important;   /* Abstand bis zum "Wert" der Links */
                    margin-left: 4px !important;   /* Abstand bis zum Icon der (Links) ORDNER  CHANGE */
                    height: 16px;
                    width: 16px;
                    /*fill: #c0c0c0;*/         /*  TEST  */
                    fill-opacity: 1;
                }
    
                .countClass2::after {
                    content: attr(data-value2);
                    font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
                    font-size: 12px !important;
                    font-weight: 900 !important; 
                    color: red !important;                     /*  TEST  */
                    /*margin-right: -6px !important;*/  /* Abstand zum Pfeil rechts CHANGE */
                    background-color: lightblue;         /*  TEST  */
                    height: 12px;                                 /* height = font size Text zentriert CHANGE  */
                }
    
    
                .countClass2 image {
                    order: 1;                       /* Pfeil hinter dem "Wert" der Links */
                }
            `;
    
            const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
            const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
            sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
    
            let bmbMenu = document.getElementById('bookmarks-menu-button');
            let bookMenu = document.getElementById('bookmarksMenu');
            let persToolBar = document.getElementById('PersonalToolbar');
            
            if(bmbMenu)
                bmbMenu.addEventListener('popupshowing', onPopupShowing ); 
            if(bookMenu)
                bookMenu.addEventListener('popupshowing', onPopupShowing ); 
            if(persToolBar)
                persToolBar.addEventListener('popupshowing', onPopupShowing ); 
        }
        
        function onPopupShowing(aEvent) {
            
            let popup = aEvent.originalTarget;
    
            for (let item of popup.children) {
                if (item.localName != 'menu' || item.id?.startsWith('history')) {
                    continue;
                }    
                setTimeout(() => {
                  let itemPopup = item.menupopup;
                  itemPopup.hidden = true;
                  itemPopup.collapsed = true;
                  itemPopup.openPopup();
                  itemPopup.hidePopup();
                  let menuitemCount = 0;
                  let menuCount = 0;
                  for (let subitem of itemPopup.children) {
                    if (subitem.classList.contains('bookmark-item') && !subitem.disabled && !subitem.hidden) {
                      if (subitem.localName == 'menuitem') {
                        menuitemCount++;
                      } else if (subitem.localName == 'menu') {
                        menuCount++;
                      }
                    }
                  }
                  itemPopup.hidden = false;
                  itemPopup.collapsed = false;
                  //item.style.color = '#c0c0c0';
                  
                  let label1 = item.childNodes[3];
      
                  label1.classList.add('countClass1');
                  //let strCountOut1 = String(menuCount).padEnd(2, '\xa0');  //  TEST CHANGE?
                  let strCountOut1 = String(menuCount).padEnd(2) + '\xa0';     // padEnd2 => zwei Stellen, plus Abstand 
                  label1.setAttribute('data-value1', strCountOut1);
    
                  let label2 = item.childNodes[4];
      
                  label2.classList.add('countClass2');
                  let strCountOut2 = String(menuitemCount).padEnd(3, '\xa0');  // padEnd3 => drei Stellen, Abstand bei nur einer Ziffer    
                  label2.setAttribute('data-value2', strCountOut2);
    
                }, 100);
            }
        }    
    })();
    Alles anzeigen


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

    • Horstmann
    • 13. Juli 2023 um 14:59
    Zitat von Mira_Belle

    Nee nee, ich mag einfach nicht mehr.

    Ich habe das mit den 2 Ziffern in der Ordneraufzählung und 3 Ziffern in der Linkaufzählung so gelößt:

    let strCountOut1 = '\xa0' + String(menuCount).padEnd(2) + '\xa0';

    und

    let strCountOut2 = '\xa0' + String(menuitemCount).padEnd(3, '\xa0');
    gelößt.

    Die Ausrichtung aller einzelnen Elemente lässt sich per CSS steuern.

    Alles anzeigen

    Dass du die Ausrichtung/Separierung der Elemente schon eingebaut hattest, hatte ich glatt übersehen beim ersten Drüberschauen - sorry. ?(

    Mir reicht's jetzt auch, vor allem für ein Script das ich wahrscheinlich eh wieder rausschmeisse. ;)

    Aber - wieder dazugelernt! :)

    Deine Lösung funktioniert viel besser als meine bzgl. Flexibilität, schlau mit dem Text und den Puffern, auch wenn ich nicht gerne die Fonts ändere - und das etwas über meine Kompetenz hinausgeht... ;)

    Danke für die Anregungen und Lösungen. :thumbup:

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

    • Horstmann
    • 13. Juli 2023 um 11:57
    Zitat von Mira_Belle

    Es hat mir einfach keine Ruhe gelassen.

    Zitat von Mira_Belle

    So passt es jetzt!

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

    :!: Nachtrag

    Horstmann

    Mooooment, junge Dame, einen hab ich noch. ;)

    Nachdem du auf die Ausrichtung hingewiesen hast, musste ich natürlich auch nochmal ran...

    Das sollte den gleichen Look ergeben wie dein Script, wobei hier alle Elemente verschiebbar sind.

    Die beiden Einträge für min-width sind entscheidend, und basieren auf der tatsächlichen Breite der Zählereinheit (in den Browser-Werkzeugen ausgelesen).

    Breiter geht immer, kostet aber Platz, schmaler macht dann die saubere Ausrichtung wieder kaputt.

    Wenn also Text, Sonderzeichen etc. dazukommen, muss man diese Breitenwerte wieder anpassen; ich vermute das ist in deinem Script ähnlich.

    Der Rest müsste sich aber automatisch anpassen.

    Hier für 2 Ziffern in der Ordneraufzählung (mit dieser Zählerdarstellung), und 3 Ziffern in der Linkaufzählung:

    JavaScript
    // JavaScript Document
    // BookmarkCount.uc.js - modified #3
    // Author BrokenHeart
    // Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229536#post1229536
    // Endor Repository Link https://github.com/Endor8/userChrome.js/blob/master/Firefox%20115/BookmarkCount.uc.js
    
    
    (function() {
    
        if (!window.gBrowser)
            return;
        
        setTimeout(function() {
            setFunction();
        },50);
    
    
        //Custom icons in profile/chrome/icons folder, code shared by Mira
        let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
        let ico1 = "foldericon.png"         //  flower.png
        let ico2 = "itemicon.png"
    
        function setFunction() {
    
            const css =`
    
    
                /****  folder count  ****/
    
                .countClass1::before {
                    content: "";
                    background-image: url(${profilePath}/${ico1}); 
                    background-repeat: no-repeat ;
                    background-size: 16px;                    /*  icon 1 size  */
                    background-position: center;
                    margin-inline: 16px 2px;                   /*  title  <--  icon 1  -->  folder count  */
                    height: 16px;
                    width: 16px;
                    fill: red !important;
                    fill-opacity: 1;
                }
    
                .countClass1 label {
                    margin-inline: 0px !important;
               }
    
                .countClass1::after {
                    content: attr(data-value1); 
                    min-width: 24px !important;    /*  fixed width folder count (XX)  */
                    /*color: black;*/
                    margin-right: 4px;                           /*  folder count  -->  icon 2  */
                }
    
    
                /****  item count  ****/
    
                .countClass2::before {
                    content: "";
                    /*background-image: url(${profilePath}/${ico2});*/
                    background-image: url("chrome://browser/skin/bookmark-hollow.svg");
                    background-repeat: no-repeat;
                    background-size: 16px;                       /*  icon 2 size  */
                    background-position: center;
                    margin-right:  2px;                               /*  icon 2  -->  item count  */
                    height: 16px;
                    width: 16px;
                    fill: green;
                    fill-opacity: 1;
                }
    
                .countClass2::after {
                    content: attr(data-value2); 
                    min-width: 36px !important;             /*  fixed width item count (XXX)  */
                    /*color: black;*/
                    margin-right:  0px !important;                    /*   item count  -->  arrow  */
                }
    
                .countClass2 image {
                    order: 1;
                    margin-right: 0px !important;                    /*  arrow  -->  box border  */
                }
            `;
    
            const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
            const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
            sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
    
            let bmbMenu = document.getElementById('bookmarks-menu-button');
            let bookMenu = document.getElementById('bookmarksMenu');
            let persToolBar = document.getElementById('PersonalToolbar');
            
            if(bmbMenu)
                bmbMenu.addEventListener('popupshowing', onPopupShowing ); 
            if(bookMenu)
                bookMenu.addEventListener('popupshowing', onPopupShowing ); 
            if(persToolBar)
                persToolBar.addEventListener('popupshowing', onPopupShowing ); 
        }
        
        function onPopupShowing(aEvent) {
            
            let popup = aEvent.originalTarget;
    
            for (let item of popup.children) {
                if (item.localName != 'menu' || item.id?.startsWith('history'))
                    continue;
                setTimeout(() => {
                  let itemPopup = item.menupopup;
                  itemPopup.hidden = true;
                  itemPopup.collapsed = true;
                  itemPopup.openPopup();
                  itemPopup.hidePopup();
                  let menuitemCount = 0;
                  let menuCount = 0;
                  for (let subitem of itemPopup.children) {
                    if (subitem.classList.contains('bookmark-item') && !subitem.disabled && !subitem.hidden) {
                      if (subitem.localName == 'menuitem') {
                        menuitemCount++;
                      } else if (subitem.localName == 'menu') {
                        menuCount++;
                      }
                    }
                  }
                  itemPopup.hidden = false;
                  itemPopup.collapsed = false;
                  
                  let label1 = item.childNodes[3];
      
                  label1.classList.add('countClass1');
                  let strCountOut1 = "(" + menuCount + ")"
                  label1.setAttribute('data-value1', strCountOut1);
    
                  let label2 = item.childNodes[4];
      
                  label2.classList.add('countClass2');
                  let strCountOut2 = "(" + menuitemCount + ")"
                  label2.setAttribute('data-value2', strCountOut2);
    
    
                }, 100);
            }
        }
        
    })();
    Alles anzeigen


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

    • Horstmann
    • 13. Juli 2023 um 00:47
    Zitat von Mira_Belle
    Zitat von Horstmann

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

    Sehr nette Spielerei!

    Ich finde nur, es ist unglücklich, dass sich die Symbole am Lable rechts ausrichten.

    Ich habe teilw. zweistellige Ziffern für Links und so wird das ganze dann für mich recht "unordentlich".

    Auch habe ich in einem kurzen Test nicht herausgefunden, wie ich die SVG-Dateien einfärben kann.

    Hmm, versteh ich nicht ganz, hast du mal ein Bild wie der Code bei dir aussieht, und wie du dir das vorstellst? :/

    Sowas wie dein Bild in #214 geht eigentlich recht einfach mit dem neuen Code.

    In Zeile 68 kannst du den Abstand des ganzen Blocks nach rechts zum Pfeil verändern.

    In den Zeilen 38/39 bzw 61/62 entfernst du die /**/ , und kannst dann - bei darauf vorbereiteten - Icons die Farbe ändern.


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

    • Horstmann
    • 12. Juli 2023 um 16:39
    Zitat von Mira_Belle

    Das werde ich mir klauen, denke ich.

    Da lassen sich die Anpassungen viel leichter ändern.

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

    :!: Nachtrag

    Oder auch nicht.

    Bekomme es eben nicht so einfach gebacken.

    Bleibe wohl bei "meinem" alten Skript.

    Alles anzeigen

    Hmm, lass mich raten, deine Icons passen nicht? :/

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

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

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

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

    ----------

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

    JavaScript
    // JavaScript Document
    // BookmarkCount.uc.js - modified #2
    // Author BrokenHeart
    // Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229536#post1229536
    // Endor Repository Link https://github.com/Endor8/userChrome.js/blob/master/Firefox%20115/BookmarkCount.uc.js
    
    
    (function() {
    
        if (!window.gBrowser)
            return;
        
        setTimeout(function() {
            setFunction();
        },50);
    
    
        //Custom icons in profile/chrome/icons folder, code shared by Mira_Belle
        let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
        let ico1 = "iconfolder.png"
        let ico2 = "iconitems.png"
    
        function setFunction() {
    
            const css =`
    
                 /*  First icon  /  folder count  /  second icon  /  item count  */
    
                .countClass1::before {
                    content: "";
                    background-image: url(${profilePath}/${ico1}); 
                    background-repeat: no-repeat;
                    background-size: 16px;  /* icon size */
                    background-position: center;
                    margin-inline: 16px 2px;  /* icon 1 distance left right */
                    height: 16px;
                    width: 16px;
                    /*fill: black;
                    fill-opacity: 1;*/
                }
    
                .countClass1 label {
                    margin-inline: 0px !important;
               }
    
                .countClass1::after {
                    content: attr(data-value1); 
                    /*color: black;*/
                }
    
                .countClass2::before {
                    content: "";
                    background-image: url(${profilePath}/${ico2});
                    /*background-image: url("chrome://browser/skin/bookmark-hollow.svg");*/
                    background-repeat: no-repeat;
                    background-size: 16px;  /* icon size */
                    background-position: center;
                    margin-inline: 2px 2px;  /* icon 2 distance left right */
                    height: 16px;
                    width: 16px;
                    /*fill: black;
                    fill-opacity: 1;*/
                }
    
                .countClass2::after {
                    content: attr(data-value2); 
                    /*color: black;*/
                    margin-inline: 0 4px !important;  /* distance right */
                }
    
                .countClass2 image {
                    order: 1;
                }
            `;
    
            const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
            const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
            sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
    
            let bmbMenu = document.getElementById('bookmarks-menu-button');
            let bookMenu = document.getElementById('bookmarksMenu');
            let persToolBar = document.getElementById('PersonalToolbar');
            
            if(bmbMenu)
                bmbMenu.addEventListener('popupshowing', onPopupShowing ); 
            if(bookMenu)
                bookMenu.addEventListener('popupshowing', onPopupShowing ); 
            if(persToolBar)
                persToolBar.addEventListener('popupshowing', onPopupShowing ); 
        }
        
        function onPopupShowing(aEvent) {
            
            let popup = aEvent.originalTarget;
    
            for (let item of popup.children) {
                if (item.localName != 'menu' || item.id?.startsWith('history'))
                    continue;
                setTimeout(() => {
                  let itemPopup = item.menupopup;
                  itemPopup.hidden = true;
                  itemPopup.collapsed = true;
                  itemPopup.openPopup();
                  itemPopup.hidePopup();
                  let menuitemCount = 0;
                  let menuCount = 0;
                  for (let subitem of itemPopup.children) {
                    if (subitem.classList.contains('bookmark-item') && !subitem.disabled && !subitem.hidden) {
                      if (subitem.localName == 'menuitem') {
                        menuitemCount++;
                      } else if (subitem.localName == 'menu') {
                        menuCount++;
                      }
                    }
                  }
                  itemPopup.hidden = false;
                  itemPopup.collapsed = false;
                  
                  let label1 = item.childNodes[3];
      
                  label1.classList.add('countClass1');
                  let strCountOut1 = "(" + menuCount + ")"
                  label1.setAttribute('data-value1', strCountOut1);
    
                  let label2 = item.childNodes[4];
      
                  label2.classList.add('countClass2');
                  let strCountOut2 = "(" + menuitemCount + ")"
                  label2.setAttribute('data-value2', strCountOut2);
    
    
                }, 100);
            }
        }
        
    })();
    Alles anzeigen
  • Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

    • Horstmann
    • 12. Juli 2023 um 12:39
    Zitat von BrokenHeart

    😁👍

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

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

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

    • Horstmann
    • 12. Juli 2023 um 11:53
    Zitat von Mira_Belle

    @Horstmann


    Kommando zurück :!:

    .....

    Versuch es mal.

    Passt gut, dankeschön! :)

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

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

    JavaScript
    // JavaScript Document
    // BookmarkCount.uc.js - modified
    // Author BrokenHeart
    // Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229536#post1229536
    // Endor Repository Link https://github.com/Endor8/userChrome.js/blob/master/Firefox%20115/BookmarkCount.uc.js
    
    
    (function() {
    
        if (!window.gBrowser)
            return;
        
        setTimeout(function() {
            setFunction();
        },50);
    
    
        //Custom icons in profile/chrome/icons folder, code shared by Mira
        let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
        let ico1 = "iconfolder.png"
        let ico2 = "iconitems.png"
    
        function setFunction() {
    
            const css =`
    
                 /*  First icon  /  folder count  /  second icon  /  item count  */
    
                .countClass1::before {
                    content: url(${profilePath}/${ico1});
                    margin-inline: 16px 2px !important;
                    height: 16px ;
                    transform: scale(0.8);
                }
    
                .countClass1 label {
                    margin-inline: 0px !important;
               }
    
                .countClass1::after {
                    content: attr(data-value1); 
                    color: black;
                }
    
                .countClass2::before {
                    /*content: url(${profilePath}/${ico2});*/
                    content: url("chrome://browser/skin/bookmark-hollow.svg");
                    /*margin-inline: 0 2px !important;*/
                    height: 16px;
                    transform: scale(0.8);
                    fill: black;
                    fill-opacity: 1;
                }
    
                .countClass2::after {
                    content: attr(data-value2); 
                    color: black;
                    margin-inline: 0 4px !important;
                }
    
                .countClass2 image {
                    order: 1;
                }
            `;
    
            const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
            const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
            sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
    
            let bmbMenu = document.getElementById('bookmarks-menu-button');
            let bookMenu = document.getElementById('bookmarksMenu');
            let persToolBar = document.getElementById('PersonalToolbar');
            
            if(bmbMenu)
                bmbMenu.addEventListener('popupshowing', onPopupShowing ); 
            if(bookMenu)
                bookMenu.addEventListener('popupshowing', onPopupShowing ); 
            if(persToolBar)
                persToolBar.addEventListener('popupshowing', onPopupShowing ); 
        }
        
        function onPopupShowing(aEvent) {
            
            let popup = aEvent.originalTarget;
    
            for (let item of popup.children) {
                if (item.localName != 'menu' || item.id?.startsWith('history'))
                    continue;
                setTimeout(() => {
                  let itemPopup = item.menupopup;
                  itemPopup.hidden = true;
                  itemPopup.collapsed = true;
                  itemPopup.openPopup();
                  itemPopup.hidePopup();
                  let menuitemCount = 0;
                  let menuCount = 0;
                  for (let subitem of itemPopup.children) {
                    if (subitem.classList.contains('bookmark-item') && !subitem.disabled && !subitem.hidden) {
                      if (subitem.localName == 'menuitem') {
                        menuitemCount++;
                      } else if (subitem.localName == 'menu') {
                        menuCount++;
                      }
                    }
                  }
                  itemPopup.hidden = false;
                  itemPopup.collapsed = false;
                  
                  let label1 = item.childNodes[3];
      
                  label1.classList.add('countClass1');
                  let strCountOut1 = "(" + menuCount + ")"
                  label1.setAttribute('data-value1', strCountOut1);
    
                  let label2 = item.childNodes[4];
      
                  label2.classList.add('countClass2');
                  let strCountOut2 = "(" + menuitemCount + ")"
                  label2.setAttribute('data-value2', strCountOut2);
    
    
                }, 100);
            }
        }
        
    })();
    Alles anzeigen
  • Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

    • Horstmann
    • 11. Juli 2023 um 21:27
    Zitat von Mira_Belle

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

    Und hier der passende Code dazu:

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

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

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


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

    • Horstmann
    • 11. Juli 2023 um 20:04

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

    JavaScript
    (function() {
    
        if (!window.gBrowser)
            return;
        
        setTimeout(function() {
            setFunction();
        },50);
    
        function setFunction() {
    
            const css =`
                .countClass1::after {
                    content: attr(data-value1); 
                    color: red;
                }
    
                .countClass2::after {
                    content: attr(data-value2); 
                    color: green;
                }
            `;
    
            const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
            const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
            sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
    
            let bmbMenu = document.getElementById('bookmarks-menu-button');
            let bookMenu = document.getElementById('bookmarksMenu');
            let persToolBar = document.getElementById('PersonalToolbar');
            
            if(bmbMenu)
                bmbMenu.addEventListener('popupshowing', onPopupShowing ); 
            if(bookMenu)
                bookMenu.addEventListener('popupshowing', onPopupShowing ); 
            if(persToolBar)
                persToolBar.addEventListener('popupshowing', onPopupShowing ); 
        }
        
        function onPopupShowing(aEvent) {
            
            let popup = aEvent.originalTarget;
    
            for (let item of popup.children) {
                if (item.localName != 'menu' || item.id?.startsWith('history'))
                    continue;
                setTimeout(() => {
                  let itemPopup = item.menupopup;
                  itemPopup.hidden = true;
                  itemPopup.collapsed = true;
                  itemPopup.openPopup();
                  itemPopup.hidePopup();
                  let menuitemCount = 0;
                  let menuCount = 0;
                  for (let subitem of itemPopup.children) {
                    if (subitem.classList.contains('bookmark-item') && !subitem.disabled && !subitem.hidden) {
                      if (subitem.localName == 'menuitem') {
                        menuitemCount++;
                      } else if (subitem.localName == 'menu') {
                        menuCount++;
                      }
                    }
                  }
                  itemPopup.hidden = false;
                  itemPopup.collapsed = false;
                  
                  let label1 = item.childNodes[3];
      
                  label1.classList.add('countClass1');
                  let strCountOut1 = "(" + menuCount + ")"
                  label1.setAttribute('data-value1', strCountOut1);
    
                  let label2 = item.childNodes[4];
      
                  label2.classList.add('countClass2');
                  let strCountOut2 = "(" + menuitemCount + ")"
                  label2.setAttribute('data-value2', strCountOut2);
    
                }, 100);
            }
        }
        
    })();
    Alles anzeigen

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

    CSS
    .countClass1::before {
        content: url("icons/bild1.png") !important;
        margin-inline: 16px 4px !important;
       height: 16px !important;
    }
    
    .countClass2::before {
        content: url("icons/bild2.png") !important;
        margin-inline: 4px !important;
       height: 16px !important;
    }
    
    .countClass2::after {
        margin-inline: 0 4px !important;
    }
    
    hbox.menu-accel-container.countClass1 label.menu-iconic-accel {
        margin-inline: 0px !important;
    }
    
    hbox.menu-right.countClass2 image {
        order: 2;
    }
    Alles anzeigen


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

    • Horstmann
    • 11. Juli 2023 um 18:20
    Zitat von Mira_Belle

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

    Irgendwie muss das auseinander gedrößelt werden!

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

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

    JavaScript
    (function() {
    
        if (!window.gBrowser)
            return;
        
        setTimeout(function() {
            setFunction();
        },50);
    
        function setFunction() {
    
            const css =`
                .countClass1::before {
                    content: attr(data-value1); 
                    color: red;
                    /*margin-right: 0px;
                    order: -1;*/
                    order: 1;
                }
    
                .countClass2::before {
                    content: attr(data-value2); 
                    color: green;
                    /*order: 1;*/
                }
    
            `;
    
            const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
            const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
            sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
    
            let bmbMenu = document.getElementById('bookmarks-menu-button');
            let bookMenu = document.getElementById('bookmarksMenu');
            let persToolBar = document.getElementById('PersonalToolbar');
            
            if(bmbMenu)
                bmbMenu.addEventListener('popupshowing', onPopupShowing ); 
            if(bookMenu)
                bookMenu.addEventListener('popupshowing', onPopupShowing ); 
            if(persToolBar)
                persToolBar.addEventListener('popupshowing', onPopupShowing ); 
        }
        
        function onPopupShowing(aEvent) {
            
            let popup = aEvent.originalTarget;
    
            for (let item of popup.children) {
                if (item.localName != 'menu' || item.id?.startsWith('history'))
                    continue;
                setTimeout(() => {
                  let itemPopup = item.menupopup;
                  itemPopup.hidden = true;
                  itemPopup.collapsed = true;
                  itemPopup.openPopup();
                  itemPopup.hidePopup();
                  let menuitemCount = 0;
                  let menuCount = 0;
                  for (let subitem of itemPopup.children) {
                    if (subitem.classList.contains('bookmark-item') && !subitem.disabled && !subitem.hidden) {
                      if (subitem.localName == 'menuitem') {
                        menuitemCount++;
                      } else if (subitem.localName == 'menu') {
                        menuCount++;
                      }
                    }
                  }
                  itemPopup.hidden = false;
                  itemPopup.collapsed = false;
                  
                  let label1 = item.childNodes[3];
      
                  label1.classList.add('countClass1');
                  let strCountOut1 = "  (" + menuCount + ")"
                  label1.setAttribute('data-value1', strCountOut1);
    
                  let label2 = item.childNodes[4];
      
                  label2.classList.add('countClass2');
                  let strCountOut2 = "  (" + menuitemCount + ")"
                  label2.setAttribute('data-value2', strCountOut2);
    
                }, 100);
            }
        }
        
    })();
    Alles anzeigen

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

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

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

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

    • Horstmann
    • 11. Juli 2023 um 13:17
    Zitat von Mira_Belle

    Wie ich schon schrieb, möchte ich auch das Sternchen, welches ja hier noch ein Unicodezeichen U+2B50 ist,

    auch durch eine Grafik ersetzen.

    Mit .countClass::before etc. kann man via CSS einfach ein Bildchen einfügen und verschieben, das ist nicht das Problem.

    Wie du schon schreibst, das Problem ist eine eigene Grafik zwischen die beiden Einträge für menucount und menuitemcount  zu quetschen.

    Ganz grob kann man mit CSS auch ein Doppelicon zB so drüberlegen (Iconpfad und -Name entsprechend anpassen), was dann aber Leerzeichen im Script benötigt, die auch für mehrstellige Zahlen passen müssen.

    CSS
    .countClass {
        outline: 1px solid lightblue !important;
        background-image: url("icons/icon1.png"),
                          url("icon2.png") !important;
        background-size: 16px 100% !important;
        background-repeat: no-repeat !important;
        background-position:  left, right 8px center !important;
    }

    Elegant und flexibel ist das aber nicht.

  • Tooltips nur für die Bedienoberfläche ausschalten?

    • Horstmann
    • 10. Juli 2023 um 19:02

    Danke für die Antworten, ich werde das mal durch testen. :)

    In meinen Notizen zum Thema habe ich noch etwas gefunden,

    #remoteBrowserTooltip , und damit scheint's sogar zu klappen:

    CSS
    tooltip:not(#remoteBrowserTooltip) {
        display: none !important
    }

    browser.chrome.toolbar_tips ist dabei auf true ; ganz traue ich dem Braten nicht, muss ich mal weiter testen, nicht dass es irgendwo Ärger macht.

    Edit: deckt nicht alle tooltips ab, zB die in der Find-Leiste und Menü und Overflow Button, und einige mehr...

  • Tooltips nur für die Bedienoberfläche ausschalten?

    • Horstmann
    • 10. Juli 2023 um 15:50

    Ich suche nach einem Weg, nur die Tooltips für die Bedienoberfläche (Tabs, Buttons, etc.) loszuwerden, ohne irgendwelche Tooltips auf Webseiten zu verstecken.

    Wenn mich meine Erinnerung nicht völlig täuscht, hat die about:config Einstellung browser.chrome.toolbar_tips bis vor einiger Zeit genau das gemacht.

    Wenn ich jetzt aber diese Option auf false setze, werden einige Tooltips auf Webseiten, bzw. auf Webinhalte bezogene Tooltips, ebenfalls deaktiviert.

    Siehe Anhang, der markierte Tooltip wird abgeschaltet durch die erwähnte Option, bis vor einigen Fx Versionen war das m.E. nicht der Fall.

    Gibt es da vielleicht einen Weg mit CSS, oder zusätzliche about:config Einstellungen, das alte Verhalten zu imitieren? :/

    Ich habe mal grob etwas Code von 2002Andreas missbraucht (in userChrome.css), was beim schnellen Test an sich funktioniert, aber dann halt wieder für alle Tooltips.

    Ideal wäre so etwas in der Art mit Begrenzung auf die Bedienoberfläche.

    Aber das habe ich leider noch nicht kapiert, welcher Tooltip für was dient, und ob man mit @media oder Selektoren etc. was anstellen kann.

    Ich hab mir schon den Wolf recherchiert, jetzt dachte ich ich frage mal die Fachkräfte. ;)

    CSS
    tooltip,
    #tooltip,
    .tooltip,
    .balloonTooltip,
    #aHTMLTooltip {
        display: none !important;
    } 

Unterstütze uns!

Jährlich (2025)

92,9 %

92,9% (604,17 von 650 EUR)

Jetzt spenden
  1. Kontakt
  2. Datenschutz
  3. Impressum
Community-Software: WoltLab Suite™
Mastodon