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

  • Button um weiteres Profil zu öffnen

    • Horstmann
    • 21. Juli 2023 um 14:35
    Zitat von milupo
    Zitat von Horstmann

    Fehlen da nicht ein paar Dinge in deinem Script?

    Bei mir läuft das so nicht.

    Mein Skript öffnet lediglich about:profiles und soll auch nicht mehr tun. Und es funktioniert bei mir. Deines macht auch nichts anderes.

    Meins ist nicht meins, nur ein abgewandeltes about:addons Script von hier aus dem Forum, genau wie deines im Prinzip, und natürlich öffnet es nur about:profiles.

    Was sollte es auch sonst machen, steht ja sonst nix drin?

    Lesen kann ich ein Script immerhin. ;)

    Nur funktioniert deins eben bei mir überhaupt nicht als Script, wenn ich den Textinhalt rüberkopiere, im Gegensatz zu so ziemlichen allen anderen Scripten.

    Braucht man da nicht irgendwas mit function etc. im Inhalt?

    Wenn's bei dir klappt ist ja gut, bei mir brauchts den extra function usw. Code.

  • Button um weiteres Profil zu öffnen

    • Horstmann
    • 21. Juli 2023 um 13:43
    Zitat von Mira_Belle
    JavaScript
    Die Sache ist nur, es ist völlig egal von welchem Profil ich diesen Button "verfolge", 
      if (!profileData.isInUse) {
        let runButton = document.createElement("button");
        document.l10n.setAttributes(runButton, "profiles-launch-profile");
        runButton.onclick = function () {
          openProfile(profileData.profile);
        };
        div.appendChild(runButton);
      }

    Es wird immer auf diese Zeilen verwiesen.

    Wie merkt die Anweisung, welche Profilinstanz geöffnet werden muss? :/

    Ich glaube, es hängt mit diesem div  zusammen.


    Ich werf's nur mal blind in den Raum; in userContent.css kann der Button für ein bestimmtes Profil so angesprochen werden.

    Ob das hier relevant ist - leider keine Ahnung. ;)

    CSS
    #profiles > div > [data-l10n-args='{"name":"DeinProfilName"}'] ~ [data-l10n-id="profiles-launch-profile"] {
        background-color: hsla(188, 33%, 84%, 0.4) !important;
        color: hsla(0, 33%, 50%, 1) !important;
    }
  • Button um weiteres Profil zu öffnen

    • Horstmann
    • 21. Juli 2023 um 09:55
    Zitat von Mira_Belle

    Mal schauen, ob ich daraus noch etwas anderes machen kann.

    Denn ich würde ja gerne direkt das Testprofil parallel starten können.

    Hmm, wäre schon nett für ein bestimmtes Profil einen direkten Öffnerbutton zu haben; ich habe auch ein Profil das ich dauernd zum Testen benutze.

    Es gibt das hier in Fx, aber weiter bin ich nicht gekommen.

    Laut den Werkzeugen ist das event für die Profil zusätzlich ausführen Button:

    JavaScript
    function() {
    openProfile(profileData.profile);
    }

  • Button um weiteres Profil zu öffnen

    • Horstmann
    • 21. Juli 2023 um 09:39
    Zitat von milupo

    Probiere das mal, das ist das abgewandelte about:config-Skript:

    JavaScript
    //      about:profiles
    //     Unicode変換前  → tooltiptext: 'About:Profiles anzeigen',
            CustomizableUI.createWidget({
                id: 'aboutprofiles-button',
                type: 'custom',
                onBuild: function(aDocument) {
                    let toolbaritem = aDocument.createXULElement('toolbarbutton');
                    let props = {
                        id: 'aboutprofiles-button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        label: 'About:Profiles',
                        tooltiptext: 'About:Profiles öffnen',
                        
                    style: 'list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABOVJREFUeNrElm1MW1UYx597b2/pgMh4aSkMeakNMBacU7MYcLwkZnMB3fiwGL/MRaPGxLghTmY3dUzajJh9UKNBWTAxIQMW4Is6/TA2YRCziXFKKbFlvPYNyltb+jJ6e33O3W0sCzCBu3iTJ5yW0/P7P+c8z/8eiud5oCgKJHzos+f0NTRNn+A4Ll2pVILT6QSCCHNcpz8Q+ODCpw1mnMeTyZTEAth6Q8NEujpNXVq+D5QpKRBZPxgMgtk8Ale7r4HVOpnf+NWXfxMRMgkzJ/DJvNzc1JKSZ+H2n4PQ1/cr4E4IoUpVQeGuAsjISIemi83DOF+BEZRKAP3+Kd2r6Wo1wouh+3oPcKEQsCwLbrebZAxDpiG41t1NNh0Yhia/iZVSQExcXHxdaXkJZm4U4DTNIIiBxcVFOHf244M4Zzlq/nxkIJUABZ51qipFKWw7AdM0BTKZDMTyGo2GimKWpBTAkmJzezxAiKToiAi5nI3OeHrVs5OqAokAGYMZ4/geXCbUAMD6HSaZAC501z46egdU2PcsK0MRGDIG+HB43d9JdQTc0pLPAhSdlp2dBWaLRTh/GRZiZlYm1JysdZJWFIwHj4eMzxvqY/DjXSkEMPW6U988V/HivrxcLfyB/U+OQ6FQCCI0Gg0U7NwpfGZZBuw2B3R0dd0R23BLAlhV3ZUpmudUIS0FTz1eADdvG8Hv92H4QRETA0nbtwtihAJFPzAND4PJZEI/uFoTWWSzVszmGH4e11eVpfVOeeHmuB0eXbbDu9owTDhd0NvXb01ISEhCs98WFxsLHtId+Ljdi/1NXzfW4nAcw0l2YDMC2CzDT2P1h0rTf3cGwOYNwHKYhoGRUahgLBA2Xp9pbLr4MqkLUuSpanW80+EgPR/CWBTBcwROmmcjAqiUtxs1yuw8i+75Z2DA6QebJwChMA/LPAUBFGEy/QZTH1UW49wpDL/YZZT45iOCguL3oY12AZX01heP5eQXmvUvFMEPlvl/4bgsh8sveOYgSMmJ4Vgx7FHWGxGwaR+gkt78PEdT8KT5k8oi+N5M4P4oOAUu9xxYJ8yumQ/3HxC3Odr3+a34AJ1c23p0b37ut++U74EfMXO7l8BhJXzS4rLVHT4kbv3SRgpqvRqgk0+2vFK+Z3fzifJd0DY4Bw4suBC/Em5zTIL1zMFi8YXjui/7Bz5r7QCd+F7L0bIndjcfR3irCOdWgc+3NxwR22rD8LUEyBJPd7W/UfJ0VUVhBmY+i/Dg6vC28y/5/vrl1mbhqwlgEnWd7dX7i6pKtCpoM86Ccy34Jf0Rn/HGrYihbNZOZSsy13Verj5QfJjALxP40urw4FC/HuEDIjz4oEr/LwIYpa6j6bWyvWvA8Ubhdd+DG28YXJf030kBj/aBbTFx8ccqC3fcB+eFv95AEOHjEBzs1YtwYjSBrcKjd0ChVSaC04cr45mjxwhGQ7adwMemzBCac/S4Wg0tONcm9npYiotERADt8HjxBgOCyRABK+Cz9h77hWPHcZ5DSnj0EfCzswtjI9MzoJDLcXUG3D4fjAuZ23sRXi26nEdKeLQTJuBYqz7d0UkpYjPxRi24Izc9ecX+2etn8H8T4s2WA4mfiAByfU3G2IHxiLgzyyKUFNxC9Cv0YQgQLhriPU0uvkLDYqX7H0bmK+7z/+fzjwADAKjckmpp+9qUAAAAAElFTkSuQmCC)',
                        onclick: 'if (event.button == 0) { \
                                      openTrustedLinkIn("about:profiles", "tab"); \
                                  }; '
                    };
                    for (let p in props)
                        toolbaritem.setAttribute(p, props[p]);
                    return toolbaritem;
                }
            });
    Alles anzeigen

    Hinter dem Base64-Code verbirgt sich noch das about:config-Symbol, ein Schraubenschlüssel oder was das ist. Kannst du ja durch ein anderes Symbol ersetzen. Ich musste das Symbol erst einmal aus dem Anpassen-Fenster holen.

    Fehlen da nicht ein paar Dinge in deinem Script?

    Bei mir läuft das so nicht. :/

    Sowas läuft :

    JavaScript
     //  profile-button.uc.js
      
      (function() {
          
      if (!window.gBrowser) return;
        
        try {
            CustomizableUI.createWidget({
                id: 'Profile_button',
                type: 'custom',
                defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {            
                    let toolbaritem = aDocument.createXULElement('toolbarbutton');
                    var props = {
                        id: 'Profile_button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        label: 'Profiles',
                        tooltiptext: 'about profiles',
                                        style: 'list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABOVJREFUeNrElm1MW1UYx597b2/pgMh4aSkMeakNMBacU7MYcLwkZnMB3fiwGL/MRaPGxLghTmY3dUzajJh9UKNBWTAxIQMW4Is6/TA2YRCziXFKKbFlvPYNyltb+jJ6e33O3W0sCzCBu3iTJ5yW0/P7P+c8z/8eiud5oCgKJHzos+f0NTRNn+A4Ll2pVILT6QSCCHNcpz8Q+ODCpw1mnMeTyZTEAth6Q8NEujpNXVq+D5QpKRBZPxgMgtk8Ale7r4HVOpnf+NWXfxMRMgkzJ/DJvNzc1JKSZ+H2n4PQ1/cr4E4IoUpVQeGuAsjISIemi83DOF+BEZRKAP3+Kd2r6Wo1wouh+3oPcKEQsCwLbrebZAxDpiG41t1NNh0Yhia/iZVSQExcXHxdaXkJZm4U4DTNIIiBxcVFOHf244M4Zzlq/nxkIJUABZ51qipFKWw7AdM0BTKZDMTyGo2GimKWpBTAkmJzezxAiKToiAi5nI3OeHrVs5OqAokAGYMZ4/geXCbUAMD6HSaZAC501z46egdU2PcsK0MRGDIG+HB43d9JdQTc0pLPAhSdlp2dBWaLRTh/GRZiZlYm1JysdZJWFIwHj4eMzxvqY/DjXSkEMPW6U988V/HivrxcLfyB/U+OQ6FQCCI0Gg0U7NwpfGZZBuw2B3R0dd0R23BLAlhV3ZUpmudUIS0FTz1eADdvG8Hv92H4QRETA0nbtwtihAJFPzAND4PJZEI/uFoTWWSzVszmGH4e11eVpfVOeeHmuB0eXbbDu9owTDhd0NvXb01ISEhCs98WFxsLHtId+Ljdi/1NXzfW4nAcw0l2YDMC2CzDT2P1h0rTf3cGwOYNwHKYhoGRUahgLBA2Xp9pbLr4MqkLUuSpanW80+EgPR/CWBTBcwROmmcjAqiUtxs1yuw8i+75Z2DA6QebJwChMA/LPAUBFGEy/QZTH1UW49wpDL/YZZT45iOCguL3oY12AZX01heP5eQXmvUvFMEPlvl/4bgsh8sveOYgSMmJ4Vgx7FHWGxGwaR+gkt78PEdT8KT5k8oi+N5M4P4oOAUu9xxYJ8yumQ/3HxC3Odr3+a34AJ1c23p0b37ut++U74EfMXO7l8BhJXzS4rLVHT4kbv3SRgpqvRqgk0+2vFK+Z3fzifJd0DY4Bw4suBC/Em5zTIL1zMFi8YXjui/7Bz5r7QCd+F7L0bIndjcfR3irCOdWgc+3NxwR22rD8LUEyBJPd7W/UfJ0VUVhBmY+i/Dg6vC28y/5/vrl1mbhqwlgEnWd7dX7i6pKtCpoM86Ccy34Jf0Rn/HGrYihbNZOZSsy13Verj5QfJjALxP40urw4FC/HuEDIjz4oEr/LwIYpa6j6bWyvWvA8Ubhdd+DG28YXJf030kBj/aBbTFx8ccqC3fcB+eFv95AEOHjEBzs1YtwYjSBrcKjd0ChVSaC04cr45mjxwhGQ7adwMemzBCac/S4Wg0tONcm9npYiotERADt8HjxBgOCyRABK+Cz9h77hWPHcZ5DSnj0EfCzswtjI9MzoJDLcXUG3D4fjAuZ23sRXi26nEdKeLQTJuBYqz7d0UkpYjPxRi24Izc9ecX+2etn8H8T4s2WA4mfiAByfU3G2IHxiLgzyyKUFNxC9Cv0YQgQLhriPU0uvkLDYqX7H0bmK+7z/+fzjwADAKjckmpp+9qUAAAAAElFTkSuQmCC)',
                        onclick: 'if (event.button == 0) { \
                                            openTrustedLinkIn("about:profiles", "tab");\
                                     }; '
                    };
                    for (var p in props)
                        toolbaritem.setAttribute(p, props[p]);
                    return toolbaritem;
                }
            });
        } catch(e) { };
       
    })();
    Alles anzeigen
  • Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

    • Horstmann
    • 20. Juli 2023 um 14:46
    Zitat von Mira_Belle
    Zitat von Horstmann

    Mitleser hat ja seine Lösung schon einmal hinbekommen, vielleicht hat er selber eine Idee.

    Ne ne, hat er nicht, das ist nur eine erstellte Grafik zur Veranschaulichung, wie er es sich vorstellt.

    Sicher?

    Der von ihm gepostete Code funktioniert nämlich anscheinend ungefähr wie in seiner Darstellung - du hast ihn doch bestimmt probiert? ;)

    Und irgendwo kommt der Code ja her, mit den ganzen Ausnahmen.


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

    • Horstmann
    • 20. Juli 2023 um 13:58
    Zitat von Mira_Belle
    Zitat von Horstmann

    ...

    Den Text zu verstecken bei diesen Vorgaben geht mit seinem Code if (menuCount == 0) {menuCount ='\xa0';}; und if (menuitemCount == 0) {menuitemCount ='\xa0';};, zugefügt zu meinem.

    Dann müsste müsste er "nur" noch das Icon wegbekommen. :/

    Wenn es das ' 🗁 ' aus seinem Code ist, sollte das auch so einfach gehen.

    Ich weiß nur gerade nicht, an welcher Stelle es eingefügt werden muss.

    Wenn es aber durch eine Grafik ersetzt werden soll, geht es nur über das Script, und da bin ich definitiv überfordert.

    Alles anzeigen

    Ich vermute, eben diese Grafik mit einem eigenen Icon zu ersetzen ist der Punkt.

    Den Code mit dem 🗁 habe ich gar nicht benutzt, nur den erwähnten Teil, diese 2 Zeilen, und da wo sie auch in seinem Code stehen - nur eben eingefügt in meinem Script.

    Also braucht es eigentlich nur  ;) noch Code, der bei menuCount/menuitemCount gleich 0 oder kleiner 1 das Folder Icon versteckt/mit Leerzeichen ersetzt, das in meinem Code ja als eigenes Bild eingefügt ist, nicht als Systememoji oder was das ist.

    Aber wie auch immer, da bin ich auch nicht der Ansprechpartner für.

    Mitleser hat ja seine Lösung schon einmal hinbekommen, vielleicht hat er selber eine Idee.

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

    • Horstmann
    • 20. Juli 2023 um 12:04
    Zitat von Mira_Belle

    Nicht so ganz :!:

    Die Herausforderung besteht darin, dass wenn 0 "Unterordner" vorhanden sind, eben diese auch nicht angezeigt werden.

    Ebenso bei "Links".

    Ahh, verstehe; das kann ich auch nicht...

    Den Text zu verstecken bei diesen Vorgaben geht mit seinem Code if (menuCount == 0) {menuCount ='\xa0';}; und if (menuitemCount == 0) {menuitemCount ='\xa0';};, zugefügt zu meinem.

    Dann müsste müsste er "nur" noch das Icon wegbekommen. :/

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

    • Horstmann
    • 20. Juli 2023 um 09:58
    Zitat von Mitleser

    Dachte bloß: Bei soviel "action" in Bezug zu diesem Script könntet ihr was machen.

    Aber leider ist dem nicht so!

    Soso, Herausforderungs-Taktiken benutzen wir! ;)

    Hat geklappt, probier mal das hier; eine vereinfachte Version mit nur einem Icon, so eingerichtet wie in deinem Screenshot.

    Farben, Abstände etc. sind wie beschrieben einstellbar, dein Icon ebenfalls wie beschrieben einbauen.

    Das Ganze ginge auch mit dem Script von Mira, mit ein paar Änderungen, oder auch ohne Strings um keinen zusätzlichen Font nutzen zu müssen.

    Aber das ist vermutliche die einfachste Lösung für saubere Ausrichtung.

    JavaScript
    // JavaScript Document
    // BookmarkCount_Mod.uc.js - modified for element separation
    // Author BrokenHeart
    // Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229536#post1229536
    // Endor Repository Link Source https://github.com/Endor8/userChrome.js/blob/master/Firefox%20115/BookmarkCount.uc.js
    // Modified by Mira_Belle / Horstmann / Forum members
    // Single Icon Version 
    
    
    
    (function() {
    
        if (!window.gBrowser) return;
        
        setTimeout(function() {
            setFunction();
        },50);
    
    
        //Custom icon1 in profile/chrome/icons folder
        //Option to use Firefox icon
    
        let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
        let icon1 = "YourFolderIcon.png"                                  // your custom icon
        let icon2 = "chrome://global/skin/icons/folder.svg"        // folder icon by Firefox
    
        function setFunction() {
    
            const css =`
    
                /***  Fonts  ***/
    
               :root {
                    --counter_fonts: "Droid Sans Mono", "SF Mono", "Andale Mono", Consolas, "Lucida Console", "Courier New", monospace;
                    /*--counter_fontsize: 11px;*/    /* un-comment to change font size / weight */
                    /*--counter_fontweight: 800;*/
                }
    
                /* Fix container content vertical centering for FCB */ 
                hbox.menu-accel-container.countClass1 {
                    align-items: center !important;
                }
    
                /***  Counters  ***/
    
                /* Counter Folder */
                .countClass::before {
                    content: attr(data-value1) !important;
                    font-family:  var(--counter_fonts) !important;
                    font-size: var(--counter_fontsize) !important;
                    font-weight: var(--counter_fontweight) !important;
                    /*color: red !important;*/                                        /*  text1 color */
                    margin-left: 16px !important;   /* minimum distance left narrow windows */
                }
    
                /* Icon  */
                .countClass label {
                    content: "";
                    background-image: url(${profilePath}/${icon1});             /* custom icon */
                    /*background-image: url(${icon2});*/                      /* Firefox folder icon */
                    background-repeat: no-repeat;
                    background-size: 16px;                                        /* icon size 16px max */
                    background-position: center;
                    margin-left: 4px !important;                        /* distance counter1 ->  icon */
                    margin-right: 4px !important;                       /* distance icon -> counter2 */
                    height: 16px;
                    width: 16px;
                    /*fill: red;*/                                    /* .svg icon color / opacity if applicable */
                    /*stroke: green;*/
                    fill-opacity: 1;
                }
    
                /* Counter 2 */
                .countClass::after {
                    content: attr(data-value2) !important;
                    font-family:  var(--counter_fonts) !important;
                    font-size: var(--counter_fontsize) !important;
                    font-weight: var(--counter_fontweight) !important;
                    /*color: red !important;*/                                       /*  text2 color */
                    margin-right: 4px !important;                              /* distance to arrow  */
                }
    
    
               /*  Some fonts not centered Fix, optional, experimental  */
               /*
                .countClass1::after, .countClass2::after {
                     height: var(--counter_fontsize) !important;                  
                }
                */
    
            `;
    
            const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
            const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
            sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
    
            let bmbMenu = document.getElementById('bookmarks-menu-button');
            let bookMenu = document.getElementById('bookmarksMenu');
            let persToolBar = document.getElementById('PersonalToolbar');
            
            if(bmbMenu)
                bmbMenu.addEventListener('popupshowing', onPopupShowing ); 
            if(bookMenu)
                bookMenu.addEventListener('popupshowing', onPopupShowing ); 
            if(persToolBar)
                persToolBar.addEventListener('popupshowing', onPopupShowing ); 
        }
        
        function onPopupShowing(aEvent) {
            
            let popup = aEvent.originalTarget;
    
            for (let item of popup.children) {
                if (item.localName != 'menu' || item.id?.startsWith('history')) {
                    continue;
                }    
                setTimeout(() => {
                  let itemPopup = item.menupopup;
                  itemPopup.hidden = true;
                  itemPopup.collapsed = true;
                  itemPopup.openPopup();
                  itemPopup.hidePopup();
                  let menuitemCount = 0;
                  let menuCount = 0;
                  for (let subitem of itemPopup.children) {
                    if (subitem.classList.contains('bookmark-item') && !subitem.disabled && !subitem.hidden) {
                      if (subitem.localName == 'menuitem') {
                        menuitemCount++;
                      } else if (subitem.localName == 'menu') {
                        menuCount++;
                      }
                    }
                  }
                  itemPopup.hidden = false;
                  itemPopup.collapsed = false;
                  
                  let label = item.childNodes[3];
                  label.classList.add('countClass');
    
                  // First counter, 2 digits // Numbers aligned right // use padEnd for left
                  let strCountOut1 = String(menuCount).padStart(2, '\xa0');            // 2 digits
                  label.setAttribute('data-value1', strCountOut1);
    
                  // Second counter, 2/3 digits // Numbers aligned right // use padEnd for left
                  let strCountOut2 = String(menuitemCount).padStart(2, '\xa0');      // 2 digits
                  //let strCountOut2 = String(menuitemCount).padStart(3, '\xa0');    // 3 digits
                  label.setAttribute('data-value2', strCountOut2);
    
                }, 100);
            }
        }    
    })();
    Alles anzeigen

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

    • Horstmann
    • 19. Juli 2023 um 23:31
    Zitat von Mira_Belle

    Habe fertig.

    Und so könnte es mit Variablen in Javascript aussehen.

    Aber gewonnen hätte man da auch nicht wirklich was :!:

    Einzig und alleine, dass es nur ganz am Anfang einen Bereich gäbe,

    wo Änderungen vorgenommen werden müssten.

    Also nur ein klitzekleiner Vorteil.

    Alles anzeigen

    Sehr fein, so übersichtlich, dankeschön. :)

    Der obere Teil vom Script hat ein paar zusätzliche/doppelte Abschnitte die nicht ganz funktionieren, hab ich aber mit tapferem Löschen hinbekommen. ;)

    Wird einen Moment dauern bis ich das alles verdaut habe, hatte aber auch schon in die Richtung gearbeitetm was die zentralen Anpassungen angeht; nur mir CSS, und etwas wilder.


    Test:

    JavaScript
    // JavaScript Document
    // BookmarkCount_Mod.uc.js - modified for element separation #7x TEST
    // Author BrokenHeart
    // Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229536#post1229536
    // Endor Repository Link Source https://github.com/Endor8/userChrome.js/blob/master/Firefox%20115/BookmarkCount.uc.js
    // Modified by Mira_Belle / Horstmann / Forum members
    
    (function() {
    
        if (!window.gBrowser) return;
        
        setTimeout(function() {
            setFunction();
        },50);
    
        //Custom icons in profile/chrome/icons folder
        //Option to use Firefox icons at bottom of CSS section
    
        let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
        let icon1 = "YourFolderIcon.png"
        let icon2 = "YourLinkIcon.svg"
    
        function setFunction() {
    
            const css =`
    
    
                /*/////  FCE = First counter element / SCE = Second counter element  /////*/
                /*/////  CSA = Center space adjustment  /////*/
    
    
                /*////////  Adjustments  ////////*/
    
                :root {
    
                    /***  CSA = Center space adjustment / left - right margin  ***/
                    /* distance counter1  <->  divider  <->  SCE ???? */
    
                    --center_base_margin: 6px;
                    --fine_tune_margin: 1px;                            /* adjust left margin for font/letter width */
                    --center_inline_margin: 
                        calc(var(--center_base_margin) + var(--icon_reduce_size)/2 - var(--fine_tune_margin))
                        var(--center_base_margin);
    
                    /**  Divider / optional  **/
                    --divider_width: 1px;                      /* divider width, 0px to hide divider */
                    --divider_height: 12px;                               /* divider height max 16px */
                    --divider_color: red;                   /* divider color, default currentColor ? */
    
                    /**  Basic margin  **/
                    --basic_distance: 4px;                     /* Base distance between all elements */
    
                    /**  Icon - adjust CSA after changes **/
                    --icon_size: calc(16px - var(--icon_reduce_size));      /* icon size, default 16px */
                    --icon_reduce_size: 2px;                                  /* icon smaller by amount */
    
                    /**  Fonts  **/
                    /*--counter_fontsize: 11px;*/            /* font size, un-comment to change default */
                    /*--counter_fontweight: 800;*/         /* font weight, un-comment to change default */
                    --counter_fonts: "Droid Sans Mono", "Andale Mono", monospace;
                }
    
    
                /*/////  Icons  /////*/
    
                /*//  Use custom icons  //*/
                :root {
                    --icon_image_1: url(${profilePath}/${icon1});   
                    --icon_image_2: url(${profilePath}/${icon2});   
                }
    
                /*//  No custom icons? No problem! / un-comment to use Firefox icons  //*/
                /*:root {
                    --icon_image_1: url("chrome://global/skin/icons/folder.svg") ;   
                    --icon_image_2: url("chrome://browser/skin/bookmark-hollow.svg");   
                }*/
    
    
    
                /* Fix container content vertical centering for FCE */
                hbox.menu-accel-container.countClass1 {
                    align-items: center !important;
                }
    
    
                /*/////////  FCE / Folder counter element  /////////*/
    
                /* FCE minimum distance to left for narrow windows */
                hbox.menu-accel-container.countClass1 {
                    margin-left: 16px !important;
                }
    
               .countClass1 label {
                    height: var(--divider_height) !important;
                    width: var(--divider_width) !important;
                    background-color: var(--divider_color) !important;
                    order: 1;
                    margin-inline: var(--center_inline_margin) !important;
                }
               /* Icon 1 */
                .countClass1::before {
                    content: "";
                    background-image: var(--icon_image_1);                           /* icon1 */
                    background-repeat: no-repeat;
                    background-size: var(--icon_size);                               /* icon1 size */
                    background-position: center;
                    margin-right: calc(var(--basic_distance) - var(--icon_reduce_size)/2) !important;
                    height: 16px;
                    width: 16px;
                    /*fill: green;*/                        /* .svg icon color / opacity if applicable */
                    fill-opacity: 1;
                }
               /* Counter 1 */
                .countClass1::after {
                    content: attr(data-value1) !important;
                    font-family:  var(--counter_fonts) !important;
                    font-size: var(--counter_fontsize) !important;
                    font-weight: var(--counter_fontweight) !important;
                    /*color: red !important;*/                                             /*  text1 color */
                }
    
    
                /*/////////  SCE / Items/links counter element  /////////*/
    
                /* Icon 2 */
                .countClass2::before {
                    content: "";
                    background-image: var(--icon_image_2);                           /* icon2 */
                    background-repeat: no-repeat;
                    background-size: var(--icon_size);                                /* icon2 size */
                    background-position: center;
                    margin-right: calc(var(--basic_distance) - var(--icon_reduce_size)/2) !important;
                    height: 16px;
                    width: 16px;
                    /*fill: red;*/                             /* .svg icon color / opacity if applicable */
                    fill-opacity: 1;
                }
               /* Counter 2 */
                .countClass2::after {
                    content: attr(data-value2);
                    font-family:  var(--counter_fonts) !important;
                    font-size: var(--counter_fontsize) !important;
                    font-weight: var(--counter_fontweight) !important;
                    /*color: red !important;*/                                              /* text2 color */
                }
               /* Arrow right */
                /* Move arrow to the right, margins */
                .countClass2 image {
                    order: 1;
                    margin-left: var(--basic_distance) !important;  /* distance Counter2 <-- arrow */
                    margin-right: 0px !important;                       /* distance arrow  -->  box border */
                }
    
    
               /*///  Testing stuff  ///*/
    
                /*  Outline only for testing  */
                /*
                menu.menu-iconic.bookmark-item {
                     outline: 1px solid orange !important;
                     outline-offset: -8px !important;
                }
                */
               /*  Background/ outline only for testing  */
                /*
                .countClass1::after, .countClass2::after {
                     outline: 1px solid green !important;
                     outline-offset: -1px !important;
                     background-color: gainsboro;
                }
                */
                /*
                .countClass1, .countClass2 {
                     outline: 1px solid green !important;
                     outline-offset: -1px !important;
                     background-color: gainsboro;
                }
                */
    
              /*  Some fonts not centered Fix, optional, experimental  */
               /*
                .countClass1::after, .countClass2::after {
                     height: var(--counter_fontsize) !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;
    
                  // FCE First counter, 2 digits // Numbers aligned right // use padEnd for left
                  let label1 = item.childNodes[3];
                  label1.classList.add('countClass1');
                  //let strCountOut1 = String(menuCount).padStart(2,  '\xa0');  // Keine Klammern // No Brackets
                  let strCountOut1 = String("[" + menuCount + "]").padStart(4,  '\xa0');     // Klammern // Brackets
                  label1.setAttribute('data-value1', strCountOut1);
    
                  // SCE Second counter, 3 digits // Numbers aligned right // use padEnd for left
                  let label2 = item.childNodes[4];
                  label2.classList.add('countClass2');
                  //let strCountOut2 = String(menuitemCount).padStart(3, '\xa0');  // Keine Klammern // No Brackets
                  let strCountOut2 = String("[" + menuitemCount + "]").padStart(5,  '\xa0');    // Klammern // Brackets
                  label2.setAttribute('data-value2', strCountOut2);
    
                }, 100);
            }
        }    
    })();
    Alles anzeigen
  • Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

    • Horstmann
    • 19. Juli 2023 um 22:55
    Zitat von Mitleser

    Ich hätte einen Wunsch, bekomme es aber einfach nicht hin:

    Könnte man hier statt einem 'emoticon' ein eigenes Icon einbauen?

    Das eben nur bei diesen vorgegebenen Bedingungen erscheint?

    Das funkt wohl nicht mit 'Strings'

    Darüber reden wir schon seit einigen Seiten...

    Nicht mitgelesen? ;)

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

    • Horstmann
    • 19. Juli 2023 um 16:25
    Zitat von Mira_Belle
    Zitat von Horstmann

    Danke für die Rückmeldung! :)

    ...

    --> Der Trennstrich: Zeile 60, Wert auf > 0px setzen.

    Ach Du heilige Sch....!

    Was hast Du denn da gemacht? 8|

    Also so einen Trennstrich hättest Du auch viel einfacher da reinbringen können,

    zumal der Code das ja auch schon hergibt.

    Aber schon irgendwie geil. :thumbup:

    JavaScript
    // CUSTOM SETTINGS
    
    let cs_basic_distance = 4;    // Base distance between all elements

    und dann im CSS => margin-right: ${cs_basic_distance)px !important;

    Aber es geht ja auch so, wie Du die Variablen umgesetzt hast.

    Alles anzeigen

    Mit Javascript kenn ich mich aber nicht aus, mit CSS wenigstens ein bisschen. :|

    Wenn du das Ganze mit JS umsetzen würdest, inklusive aller von den Variablen abgeleiteten Einstellungen, das stell ich mir massiv komplex vor in der Bedienung.

    Hast du das mal komplett durchexerziert, mit allen möglichen Anpassungen? ;)

    Der Trennstrich - der ist hier ein frei verschiebbares Element, in Position und Grösse anpassbar - ist das schon im Code gewesen?

    Vielleicht hab ich's übersehen; es gibt auch bestimmt noch andere Wege das zu lösen, und meiner mag auch nicht perfekt funktionieren. ;)

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

    • Horstmann
    • 19. Juli 2023 um 14:32
    Zitat von Mira_Belle

    Denn der CSS-Code wird, so empfinde ich es, doch recht aufgebläht und unübersichtlich.

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


    Bin ich blind oder was?

    An welcher Stelle wird denn bei Dir der Trennstrich  |  eingefügt?

    Danke für die Rückmeldung! :)


    Ich weiss, muss man mögen mit den Variablen, und eine Sorge ist bei mir immer ob sie die Leistung beeinträchtigen mit der zusätzlichen Kalkulation. :/

    Die Idee dahinter ist aber eigentlich, durch mehr Code die Einstellungen zu vereinfachen, indem man wiederholt benutzte Parameter zentral an einer Stelle regelt.

    Und man kann immer noch manuell rangehen und die Variablen gezielt mit Festwerten ersetzen.

    Ab du solltest den Code sehen den ich selber benutze, da ist das noch Fingerfarben dagegen. ;)


    --> Der Trennstrich: Zeile 60, Wert auf > 0px setzen.

  • Alternatives/Fallback Icon mit Javascript oder CSS festlegen?

    • Horstmann
    • 19. Juli 2023 um 11:11

    Hat sich erledigt; ich habe einfach eine manuell aktivierbare CSS Option eingebaut, bei Interesse s. hier.

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

    • Horstmann
    • 19. Juli 2023 um 11:00

    So, wer das mal probieren möchte, meine eigene Finalversion.

    Hat ein paar automatisierte Einstellungen und Variationen, eine Option zur Nutzung von Firefox-eigenen Icons, und eine optionale Trennlinie zwischen den Blöcken.

    Ich hoffe das macht alles halbwegs Sinn... :)


    JavaScript
    // JavaScript Document
    // BookmarkCount_Mod.uc.js - modified for element separation #7c Horst edition
    // Author BrokenHeart
    // Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229536#post1229536
    // Endor Repository Link Source https://github.com/Endor8/userChrome.js/blob/master/Firefox%20115/BookmarkCount.uc.js
    // Modified by Mira_Belle / Horstmann / Forum members
    
    
    
    (function() {
    
        if (!window.gBrowser) return;
        
        setTimeout(function() {
            setFunction();
        },50);
    
    
        //Custom icons in profile/chrome/icons folder
        //Option to use Firefox icons at bottom of CSS section
    
        let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
        let icon1 = "YourFolderIcon.png"
        let icon2 = "YourLinkIcon.svg"
    
        function setFunction() {
    
            const css =`
    
                /***  Basics  ***/
    
                /* Basic margins / Font Size / font weight counter , disable to use default  /  Fonts list monospace */
    
                :root {
                    --basic_distance: 4px;                           /* Base distance between all elements */
                    /*--counter_fontsize: 11px;*/   
                    /*--counter_fontweight: 800;*/     
                    --counter_fonts: "Droid Sans Mono", "SF Mono", "Andale Mono", Consolas, "Lucida Console", "Courier New", monospace;   
                }
    
                /* Fix container content vertical centering for FCB */ 
                hbox.menu-accel-container.countClass1 {
                    align-items: center !important;
                }
    
    
                /***  FCB = First counter element / SCB = Second counter element  ***/
    
    
                /**  #1 FCB / Folder counter element  **/
    
                /* FCB minimum distance to left for narrow windows */
                hbox.menu-accel-container.countClass1 {
                    margin-left: 16px !important;
                }
    
               /* FCB distance to SCB, label as optional divider */            
                :root {
                    --divider_inline_margin: 6px 6px;    /* distance counter1 - divider - SCB */
                    --divider_width: 0px;                               /* 0px for no divider */
                }
    
               .countClass1 label {
                    height: 12px !important;                         /* divider height max 16 */
                    width: var(--divider_width) !important;
                    background-color: currentColor !important;               /* divider color */
                    order: 1;
                    margin-inline: var(--divider_inline_margin) !important; 
                }
    
                /* Icon 1 */
                .countClass1::before {
                    content: "";
                    background-image: url(${profilePath}/${icon1});             /* custom icon */
                    background-repeat: no-repeat;
                    background-size: 16px;                                       /* icon1 size */
                    background-position: center;
                    margin-right: var(--basic_distance) !important;   /* distance icon1 -> counter1 */
                    height: 16px;
                    width: 16px;
                    /*fill: #c0c0c0;*/                   /* .svg icon color / opacity if applicable */
                    fill-opacity: 1;
                }
    
                /* Counter 1 */
                .countClass1::after {
                    content: attr(data-value1) !important;
                    font-family:  var(--counter_fonts) !important;
                    font-size: var(--counter_fontsize) !important;
                    font-weight: var(--counter_fontweight) !important;
                    /*color: red !important;*/                                     /*  text1 color */
                }
    
    
                /**  #2 SCB / Items/links counter element  **/
    
                /* Icon 2 */
                .countClass2::before {
                    content: "";
                    background-image: url(${profilePath}/${icon2});                 /*  custom icon */
                    background-repeat: no-repeat;
                    background-size: 16px;                                            /* icon2 size */
                    background-position: center;
                    margin-right: var(--basic_distance) !important;   /* distance icon2 -> counter2 */
                    height: 16px;
                    width: 16px;
                    /*fill: #c0c0c0;*/                   /* .svg icon color / opacity if applicable */
                    fill-opacity: 1;
                }
    
                /* Counter 2 */
                .countClass2::after {
                    content: attr(data-value2);
                    font-family:  var(--counter_fonts) !important;
                    font-size: var(--counter_fontsize) !important;
                    font-weight: var(--counter_fontweight) !important;
                    /*color: red !important;*/                                     /* text2 color */
                }
    
                /* Arrow right */
                /* Move arrow to the right, margins */
                .countClass2 image {
                    order: 1;    
                    margin-left: var(--basic_distance) !important;  /* distance Counter2 <-- arrow */    
                    margin-right: 0px !important;               /* distance arrow  -->  box border */
                }
    
    
                /***  Extra stuff  ***/
    
                /**  No custom icons? No problem! / un-comment to use Firefox icons  **/ 
                /*
                .countClass1::before {
                    background-image: url("chrome://global/skin/icons/folder.svg");
                }
               .countClass2::before {
                    background-image: url("chrome://browser/skin/bookmark-hollow.svg");
                }
                */
    
                
    
               /** Testing stuff **/
    
                /*  Outline only for testing  */ 
                /*
                menu.menu-iconic.bookmark-item {
                     outline: 1px solid orange !important;
                     outline-offset: -8px !important;
                }
                */
    
                /*  Background/ outline only for testing  */ 
                /*
                .countClass1::after, .countClass2::after {
                     outline: 1px solid green !important;
                     outline-offset: -1px !important;
                     background-color: gainsboro;
                }
                */
                /*
                .countClass1, .countClass2 {
                     outline: 1px solid green !important;
                     outline-offset: -1px !important;
                     background-color: gainsboro;
                }
                */
    
    
               /*  Some fonts not centered Fix, optional, experimental  */
               /*
                .countClass1::after, .countClass2::after {
                     height: var(--counter_fontsize) !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;
                  
                  // FCB First counter, 2 digits // Numbers aligned right // use padEnd for left
                  let label1 = item.childNodes[3];
                  label1.classList.add('countClass1');
                  //let strCountOut1 = String(menuCount).padStart(2,  '\xa0');  // Keine Klammern // No Brackets
                  let strCountOut1 = String("[" + menuCount + "]").padStart(4,  '\xa0');     // Klammern // Brackets
                  label1.setAttribute('data-value1', strCountOut1);
    
                  // SCB Second counter, 3 digits // Numbers aligned right // use padEnd for left
                  let label2 = item.childNodes[4];
                  label2.classList.add('countClass2'); 
                  //let strCountOut2 = String(menuitemCount).padStart(3, '\xa0');  // Keine Klammern // No Brackets
                  let strCountOut2 = String("[" + menuitemCount + "]").padStart(5,  '\xa0');    // Klammern // Brackets
                  label2.setAttribute('data-value2', strCountOut2);
    
                }, 100);
            }
        }    
    })();
    Alles anzeigen


  • In diesem Script NACH dem Text "Anzahl Ordner / Anzahl Links." bzw. "Anzahl Ordner / Anzahl Link(s) -> Link(s) in Tab(s) öffnen" einen Separator setzen.

    • Horstmann
    • 18. Juli 2023 um 21:48
    Zitat von Mira_Belle

    Bin ur neugierig ob das wieder einHabe das ganze dann noch einmal in einem neuen Profil ausprobiert.

    Und ausserhalb der Menüleiste, geht's da auch?

    Edit: Gleiche Frage wie von Omar... ;)

    Bin nur neugierig ob das wieder ein Mac Ding ist.


    Zitat von omar1979

    Danke trotzdem für deine Bemühungen. :)

    Immer gerne! :)

    Dem Avatar Bild kann ich auch nicht widerstehen. ;)

  • In diesem Script NACH dem Text "Anzahl Ordner / Anzahl Links." bzw. "Anzahl Ordner / Anzahl Link(s) -> Link(s) in Tab(s) öffnen" einen Separator setzen.

    • Horstmann
    • 18. Juli 2023 um 20:39
    Zitat von omar1979
    Zitat von Horstmann

    Hast du das mal probiert? :

    Das hab ich jetzt auch probiert, das macht das.


    Hier am Mac kann ich die Menüleistenelemente nicht ändern/testen, ich glaube die ist vom Betriebssystem festgemeisselt.

    Hab mich allerdings auch nie wirklich intensiv damit beschäftigt, weil ich die eh kaum benutze.

    Damit muss dir dann leider jemand aus der Windowsfraktion weiterhelfen.

  • In diesem Script NACH dem Text "Anzahl Ordner / Anzahl Links." bzw. "Anzahl Ordner / Anzahl Link(s) -> Link(s) in Tab(s) öffnen" einen Separator setzen.

    • Horstmann
    • 18. Juli 2023 um 19:55
    Zitat von omar1979

    So. Das waren die Coden, die was mit Separator zu tun haben.

    Ich glaube und hoffe, dass die damit nichts zutun haben. :)

    Danke für die Auflistung,

    Hast du das mal probiert? :

    CSS
    menuseparator::before {
         border-top: 42px solid red !important;
    }

    Ich denke das ist der tatsächliche "Strich", der Rest ist für Position and Distanz.

  • In diesem Script NACH dem Text "Anzahl Ordner / Anzahl Links." bzw. "Anzahl Ordner / Anzahl Link(s) -> Link(s) in Tab(s) öffnen" einen Separator setzen.

    • Horstmann
    • 18. Juli 2023 um 18:55
    Zitat von omar1979

    Deine Code bewirkt das. Siehe Bilder.

    Menü Chronik. Gut. ------------------ Menü Lesezeichen. Gut. ----------------- Lesezeichen-Symbolleiste. Nicht gut.

    Wirkt nicht überall das Gleiche. Leider.

    Dann könnte es gut sein, dass du schon CSS Code benutzt, der die Separatoren in verschiedenen Bereichen verschieden modifiziert.

    Genauer gesagt, alles was als dünne rote Linie auftaucht - mit dem Code von Mira - ist von dir geändert worden, das mit der nach aussen versetzten Umrandung ist normal.

    Die Separatoren haben normalerweise Padding, und die Outlines/Borders sitzen am Rand des Ganzen.

    Also solltest du die Codes für alle Separatoren raussuchen und nach padding/margin/height etc. schauen.

    Für nur die Farbe von nur der Linie könnte sowas funktionieren, falls nicht wieder was querschiesst:

    CSS
    menuseparator {
            color: red !important;        
            /*background-color: green !important;*/
    }

    Der auskommentierte Teil für background-color sollte die tatsächliche Grösse illustrieren können.

    Oder sowas:

    CSS
    menuseparator::before {
         border-top: 42px solid red !important;
    }
  • Alternatives/Fallback Icon mit Javascript oder CSS festlegen?

    • Horstmann
    • 18. Juli 2023 um 15:47
    Zitat von Sören Hentzschel

    Meinst du nicht, dass das Overengineering ist? Wer ein Script nutzt, sollte in der Lage sein, entsprechende Grafiken abzulegen oder eine Option im Code zu ändern, um die Darstellung entsprechend anzupassen. Für ein „Fallback“ müsstest du immer erst prüfen, ob die Grafik existiert. Das wird nicht ohne Verzögerung möglich sein und wird dann ja auch immer ausgeführt, wenn es die Grafik gibt. Ich sehe da die Kosten höher als den Nutzen.

    Ich habe das nicht im Kontext des Scripts und mit einer lokalen Datei getestet, aber die Idee wäre sonst wohl sowas in der Art:

    JavaScript
    const img = document.createElement('img');
    img.onerror = function () {
      // Grafik existiert nicht, implementiere die Fallback-Logik
    }
    img.src = 'pfad/zur/datei.png';

    Das ist ein guter Punkt; es sollte eigentlich anzunehmen sein, dass der Benutzer von so einem Script sich das anpassen kann.

    Vielleicht wäre es sinnvoller, das Fallback Icon von Firefox ganz rauszulassen, oder als auskommentierte Option im CSS Teil zu einzubinden. :/

    Dankeschön för den Code :) ; ich bin beim Recherchieren auf ähnliche onerror Lösungen gestossen - leider haperts am konkreten Implementieren, mangels Kenntnis.


    Zitat von Mira_Belle

    Horstmann

    Oh, ich hätte da was!

    Es geht um ein Skript, welches Icons in der Adresszeile einfügt!

    Kannst ja mal reinschnuppern.

    Dankeschön, schau ich mir an! :)

  • Alternatives/Fallback Icon mit Javascript oder CSS festlegen?

    • Horstmann
    • 18. Juli 2023 um 14:28

    Ich bastle gerade an einer Scriptversion für dieses Thema, und es gibt da noch eine Frage, auf die ich keine Antwort finde. :/

    Das Script benutzt eine Kombination aus JS und CSS, um selber definierte Icons für die beiden erzeugten Zähler bereitzustellen.

    Meine Version soll zwei von Firefox übernommene Icons bereitstellen, für Leute die keine eigenen Icons haben, aber es auch erlauben solche eigenen Icons zu benutzen.

    Was so auch klappt, aber der User muss manuell das Script editieren, um seine eigenen Bilder benutzen zu können.

    Idealerweise gäbe es im Script eine Funktion, die im Falle eines nicht vorhandenen/gefundenen/fehlerhaften User Icons automatisch das Icon von Firefox als Alternative/Fallback lädt.

    Hier das Script, die relevanten Einträge sind wohl die Zeilen 20 - 22, sowie 74 - 75 und 101 -102.

    JavaScript
    // JavaScript Document
    // BookmarkCount.uc.js - modified for element separation #7
    // Author BrokenHeart
    // Modified by Mira_Belle / Horstmann / Forum members
    // Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229536#post1229536
    // Endor Repository Link Source 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
    
        let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
        let icon1 = "YourFolderIcon.png" 
        let icon2 = "YourLinkIcon.svg"
    
        function setFunction() {
    
            const css =`
    
    
                /**  Basics  **/
    
    
                /* Basic distances / Font Size / font weight counter , disable to use default  /  Fonts list monospace */
    
                :root {
                    --basic_distance: 4px;   
                    /*--counter_fontsize: 11px;*/   
                    /*--counter_fontweight: 800;*/     
                    --counter_fonts: "Droid Sans Mono", "SF Mono", "Andale Mono", Consolas, "Lucida Console", "Courier New", monospace;   
                }
    
                /* Fix container content vertical centering for first / folder counter */ 
                hbox.menu-accel-container.countClass1 {
                    align-items: center !important;
                }
    
    
                /* Disable default left margin for label */ 
                .countClass1 label {
                    margin-inline: 0px !important;
                }
    
                /* Use label as divider, optional, un-comment to use */ 
                /*.countClass1 label {
                    height: 12px !important;
                    width: 1px !important;
                    background-color: red !important;
                    order: 1;    
                    margin-inline: calc(var(--basic_distance) + 4px) 3px !important;  
                }*/
    
    
                /****  folder counter box  ****/
    
    
                /* Folder counter box distance left / right */
                hbox.menu-accel-container.countClass1 {
                    margin-left: 16px !important;                                 /* minimum distance to left for narrow windows */ 
                    margin-right: calc(var(--basic_distance) + 2px) !important;  /* distance to Items/links counter box */ 
                }
    
                /* Icon 1 */
                .countClass1::before {
                    content: "";
                    background-image: url("chrome://global/skin/icons/folder.svg");          /* Fx icon */
                    /*background-image: url(${profilePath}/${icon1});*/  /* Custom icon, uncomment */
                    background-repeat: no-repeat;
                    background-size: 16px;                                                           /* icon 1 size */
                    background-position: center;
                    margin-right: var(--basic_distance) !important;  /* distance icon -> counter */
                    height: 16px;
                    width: 16px;
                    /*fill: #c0c0c0;*/                               /* .svg icon colour / opacity if applicable */
                    fill-opacity: 1;
                }
    
                /* Counter 1 */
                .countClass1::after {
                    content: attr(data-value1) !important;
                    font-family:  var(--counter_fonts) !important;
                    font-size: var(--counter_fontsize) !important;
                    font-weight: var(--counter_fontweight) !important;
                    /*color: red !important;*/                                                  /*  Text 1 colour */
                }
    
    
                /****  Items/links counter box  ****/
    
                /* Icon 2 */
                .countClass2::before {
                    content: "";
                    background-image: url("chrome://browser/skin/bookmark-hollow.svg");  /* Fx icon */
                    /*background-image: url(${profilePath}/${icon2});*/    /*  Custom icon, uncomment */
                    background-repeat: no-repeat;
                    background-size: 16px;                                                           /* icon 2 size */
                    background-position: center;
                    margin-right: var(--basic_distance) !important;   /* distance icon -> counter */
                    height: 16px;
                    width: 16px;
                    /*fill: #c0c0c0;*/                                /* .svg icon colour / opacity if applicable */
                    fill-opacity: 1;
                }
    
                /* Counter 2 */
                .countClass2::after {
                    content: attr(data-value2);
                    font-family:  var(--counter_fonts) !important;
                    font-size: var(--counter_fontsize) !important;
                    font-weight: var(--counter_fontweight) !important;
                    /*color: red !important;*/                                                /* Text 2 colour */
                }
    
                /* Arrow right */
                /* Move arrow to the right, distances */
                .countClass2 image {
                    order: 1;    
                    margin-left: var(--basic_distance) !important;  /* distance Counter 2 <-- arrow */    
                    margin-right: 0px !important;                        /* distance arrow  -->  box border */
                }
    
    
               /** Extra stuff  **/
    
                /*  Outline only for testing  */ 
                /*
                menu.menu-iconic.bookmark-item {
                     outline: 1px solid orange !important;
                     outline-offset: -8px !important;
                }*/
    
                /*  Background only for testing  */ 
                /*
                .countClass1::after, .countClass2::after {
                     outline: 1px solid green !important;
                     outline-offset: -1px !important;
                     background-color: gainsboro;
                }*/
    
    
               /*  Some fonts not centered Fix, optional, experimental  */
               /* .countClass1::after, .countClass2::after {
                    height: var(--counter_fontsize) !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;
                  
                  // Folder counter, 2 digits // Numbers aligned right // use padEnd for left
                  let label1 = item.childNodes[3];
                  label1.classList.add('countClass1');
                  //let strCountOut1 = String(menuCount).padStart(2,  '\xa0');  // Keine Klammern // No Brackets
                  let strCountOut1 = String("[" + menuCount + "]").padStart(4,  '\xa0');     // Klammern // Brackets
    
                  label1.setAttribute('data-value1', strCountOut1);
    
                  // Links counter, 3 digits // Numbers aligned right // use padEnd for left
                  let label2 = item.childNodes[4];
                  label2.classList.add('countClass2'); 
                  //let strCountOut2 = String(menuitemCount).padStart(3, '\xa0');  // Keine Klammern // No Brackets
                  let strCountOut2 = String("[" + menuitemCount + "]").padStart(5,  '\xa0');    // Klammern // Brackets
    
                  label2.setAttribute('data-value2', strCountOut2);
    
                }, 100);
            }
        }    
    })();
    Alles anzeigen

    Ein Versuch mit CSS war schon, zB in Zeile 76 sowas einzufügen: background-image: url(${profilePath}/${icon1}), url("chrome://global/skin/icons/folder.svg"); ; was dann aber zu doppelt angezeigten Bildern führt (bei transparenten Bildteilen); ist auch keine elegante oder leistungseffiziente Lösung vermute ich.

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