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
    • 11. Juni 2025 um 21:45
    Zitat von Endor

    Klammer weg und nun geht es auch.
    Darf ich das bei mir auf Github hoch laden?

    Darfst du?8|
    Wenn du etwas für gut genug hältst, lad hoch! :)

    Bei der Gelegenheit, und weil es nicht für selbstverständlich gehalten werden sollte: herzlichen Dank für deine unermüdlichen Bemühungen; was du in deiner Repo zusammen gestellt hast und unterhältst, ist nicht nur für mich seit Jahren eine unbezahlbare Quelle! :thumbup::)

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

    • Horstmann
    • 11. Juni 2025 um 21:00
    Zitat von Endor

    Nur eine Frage
    wo im Script kann ich die Farbe des Textes der Ordneranzahl ändern.

    Habe es hier probiert, Absatz D ab Zeile 109, da wirkt es nur für die Lesezeichen.

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

    Bei --folder_fill und --folder_color hast du zwei )) Klammern am Ende des HSL Codes, sollte nur eine sein jeweils. :)

    Oder schreib einfach red statt hsl(0, 100%, 50%, 1), HSL ist nicht nötig, mag ich selber nur lieber.

  • userChrome.js Scripte für den Fuchs (Diskussion)

    • Horstmann
    • 11. Juni 2025 um 17:29
    Zitat von BrokenHeart

    Konkret kann man das natürlich nicht bei jedem Skript sagen, aber wenn du verhinderst, dass das Skript zweimal aufgerufen wird, dann sollten sich solche Fehler in aller Regel vermeiden lassen. Daher bei jedem Skript z.B. diesen Code am Anfang einfügen:

    JavaScript
    if (!window.gBrowser){
    	return;
    }

    Habe ich eigentlich überall in der Art in Scripts.

    Verstehe immer noch nicht, warum ein Button im Anpassen Fenster fast immer eine Fehlermeldung aufwirft.
    Das hier ist auf Mac, und zugegebenermassen 115esr, war aber schon ewig das gleiche Problem.

    Die utilities.js ist Teil der Scriptvorbereitung Dateien.

    Hier ein Beispielscript, und die relevanten Errors in der Konsole:

    JavaScript
    //  reader button.uc.js
    // error test
    
     (function() {
    
          //if (location.href !== 'chrome://browser/content/browser.xhtml')
          //return;
    
      if (!window.gBrowser){
    	return;
    }
    
       try {
           CustomizableUI.createWidget({
               id: 'reader_button',
               type: 'custom',
               defaultArea: CustomizableUI.AREA_NAVBAR,
               onBuild: function(aDocument) {
                   var currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
                   let buttonicon = "Letters_R_1px.png";
                   let toolbaritem = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton');
                   let props = {
                       id: 'reader_button',
                       class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                       label: 'Reader Toggle',
                       tooltiptext: 'Reader Mode',
                       //style: 'list-style-image: url("' + ("file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon) + '");',
                       style: 'list-style-image: url("chrome://browser/skin/reader-mode.svg");',
                   };
                   for (var p in props)
                       toolbaritem.setAttribute(p, props[p]);
                   return toolbaritem;
               }
           });
       } catch(e) { }
    
        // if(!document.getElementById("reader_button"))
    	  //      return;
    
        document.getElementById("reader_button").addEventListener('click', event => {
        if (event.button === 0) {
                AboutReaderParent.buttonClick(event);
            }
        });
    
    })();
    Alles anzeigen

  • userChrome.js Scripte für den Fuchs (Diskussion)

    • Horstmann
    • 10. Juni 2025 um 19:06
    Zitat von bege
    Zitat von 2002Andreas

    Die Fehlermeldung erscheint hier allerdings auch.

    Die Fehlermeldung document.getElementById(...) is null habe ich bei vielen Skripten, die wie dies hier trotzdem funktionieren. Für mich nur eines von vielen Javascript-Rätseln. 😉

    Diese Fehlermeldung gibt's hier ab und zu bei eigenen Buttons (die sonst funktionieren), die in's Symbolleiste Anpassen Fenster gezogen wurden, also nicht in einer Toolbar sitzen. :/

    Oder halt wenn ein Element/ID sonstwie nicht gefunden werden kann, aber dann funktioniert hier das Script generell nicht.

  • Seitennavigation - Fly Out Menü

    • Horstmann
    • 8. Juni 2025 um 20:23
    Zitat von lenny2
    Zitat von Horstmann

    //Toggle newtoolbar 7D_b rechts

    (v140.0beta6)

    Danke für's Testen und die Rückmeldung! :)

    Ich möchte nur nochmal darauf hinweisen, dass Mitleser eine aktuellere Version anzubieten hat; meine ist alt und auf einem noch älteren Script basierend, zudem ist meine JS Kompetenz sehr beschränkt.

  • Fix: Toolbar-Buttons reagieren nicht mehr ab FF 134

    • Horstmann
    • 8. Juni 2025 um 20:15
    Zitat von BrokenHeart
    Zitat von Horstmann

    Nur mal aus Neugierde: wenn jemand dieses Script mal in die aktuelle FX oder Nightly packen möchte, funktionieren dann die strittigen Buttons?

    Ja, die betroffenen Buttons funktionieren auch in der Release und der Nightly, aber auch ohne das Skript aus #1!

    Hier liegt der Hund begraben: document.getElementById('navigator-toolbox').appendChild(toolbox_new);

    Was tb.setAttribute("toolboxid","navigator-toolbox"); bewirken soll, verstehe ich nicht? :/

    Mit der Positionierung und Sichtbarkeit scheint es (zumindest hier) nicht vernünftig zu funktionieren. Die toolbar wird nur innerhalb der 'navigator-toolbox' sichtbar...

    Danke für's Testen. :)

    Edit:
    Was das tb.setAttribute("toolboxid","navigator-toolbox"); angeht - ein Überbleipsel vermutlich, und macht tatsächlich keinen Sinn (und noch ein paar mehr Einträge).

    Bzgl. der Sichtbarkeit - edit: #navigator-toolbox braucht wohl einen höheren z-index für aktuelles Fx in dem Fall, hab's gerade getestet, dann geht's; ob das Ärger macht müsste man weiter testen.
    Die Buttons scheinen zu funktionieren; Erweiterungen habe ich nicht probiert.
    Für den Abstand nach oben hätte ich inzwischen Code der das automatisch ausliest.

    Meine einzige Frage ist eigentlich nur die oben erwähnte - lässt sich die Benutzung von deinem Zusatzscript generell und eventuell für eine gewisse Art von Zusatzleiste vermeiden.
    Was ja nett wäre, weil es halt eine Menge extra Code ist.

    Wie man das dann am besten anwendbar umsetzt, falls möglich, das ist eine andere Frage :/; mein extrem grobes Script hier ist nur zum Testen des Prinzips gedacht.

  • Fix: Toolbar-Buttons reagieren nicht mehr ab FF 134

    • Horstmann
    • 8. Juni 2025 um 15:35

    Hier grob etwas weiter gedacht, passt halbwegs sogar ohne Platzhalter Element, nur mit CSS.
    Man müsste noch die Höhe/Breite vom Browserinhalt auslesen und im CSS oder sonstwie dynamisch einsetzen können, um die Position der Leiste genau zu bestimmen.

    Aber wie gesagt, die Übung macht nur Sinn, wenn die Systembuttons in so einer Leiste funktionieren; meine aktuelle Fx und Nightly Installation läuft auf einem anderen Rechner mit Dampfantrieb, daher für mich aufwendig zu testen. ;)

    JavaScript
    //Toggle newtoolbar 7D_b rechts nav-bar test 2
    
    (function() {
    
        if (location.href !== 'chrome://browser/content/browser.xhtml')
            return;
    
            let toolbox_new = document.createXULElement('toolbox');
            toolbox_new.setAttribute('orient','horizontal');
            toolbox_new.setAttribute('id','toolbox_new');
    
            let tb = document.createXULElement('toolbar');
            let tb_label = "New Toolbar";
            tb.id = 'newtoolbar';
    
            tb.setAttribute("collapsed", "false");
            tb.setAttribute('customizable', true);
            tb.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
            tb.setAttribute('orient', 'vertical');
            tb.setAttribute('mode', 'icons');
            tb.setAttribute("toolboxid","navigator-toolbox");
            tb.setAttribute('context', 'toolbar-context-menu');
            tb.setAttribute("toolbarname", tb_label);
            tb.setAttribute("label", tb_label);
    
    	      toolbox_new.appendChild(tb);
    
            //document.getElementById('browser').parentNode.appendChild(toolbox_new);
            document.getElementById('navigator-toolbox').appendChild(toolbox_new);
    
            CustomizableUI.registerArea('newtoolbar', {legacy: true});
            CustomizableUI.registerToolbarNode(tb);
    
       try {
            CustomizableUI.createWidget({
                id: 'NewToolbar-button',
                type: 'custom',
                defaultArea: CustomizableUI.AREA_NAVBAR,
                    onBuild: function(aDocument) {
                        let currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
                        let buttonicon = "newtoolbar.png"
                        let toolbaritem = aDocument.createXULElement('toolbarbutton');
                        let props = {
                            id: 'NewToolbar-button',
                            class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                            removable: true,
                            label: 'Toggle New Toolbar',
                            tooltiptext: 'Toggle New toolbar',
                            //style: 'list-style-image: url("' + ("file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon) + '");',
                            style: 'list-style-image: url("chrome://browser/skin/sidebars-right.svg");',
                        };
    
                        for(let p in props)
                            toolbaritem.setAttribute(p, props[p]);
                        return toolbaritem;
                    }
            });
        } catch(e) { };
    
    document.getElementById('NewToolbar-button').addEventListener( "click", onClick );
            function onClick(aEvent, keyEvent=false) {
            if(!keyEvent && aEvent.button != 0) {
                return;
            }
            newtoolbar.classList.toggle("off-mode");
            browser.classList.toggle("off-mode");
    
    
            // window height
            // const height = window.innerHeight;
            // window width
            // const width = window.innerWidth;
            // console.log(height, width); // 711 1440
    
            //offsetHeight
    
            // window height
            let height_b = document.getElementById('appcontent').clientHeight;
            // window width
            let width_b = document.getElementById('appcontent').clientWidth;
            console.log(height_b, width_b);
    
     };
    
    const css =`
    
    :root {
        --ug-newbar_width: 44px;
        --ug-newbar_max_width: 166px;
        --ug-newbar_bg_color: lightblue;
        --ug-newbar_radius: 8px;
    }
    
    #browser:not(.off-mode) {
        padding-right: var(--ug-newbar_width) !important;
    }
    #browser {
        transition: padding 0.5s ease !important;
    }
    
    #toolbox_new {
        position: fixed;
        display: flex;
        bottom: 0;
        /*left: 0;*/
        right: 0;
        /*transform: translateY(-50%);*/
        z-index: 4 !important;
        height: calc(100vh - 155px);
        width: fit-content;
    }
    
    #newtoolbar {
        display: flex;
        width: var(--ug-newbar_width);
        padding: 4px !important;
        background-color: var(--ug-newbar_bg_color) !important;
        transition: width 0.5s ease, margin 0.5s ease !important;
    }
    /*
    #newtoolbar:not([customizing]):hover {
        width: var(--ug-newbar_max_width);
    }
    */
    
    #newtoolbar:not([customizing]).off-mode {
        /*margin-left: calc(0px - var(--ug-newbar_width));*/
        margin-right: calc(0px - var(--ug-newbar_width));
    }
    
    #newtoolbar .toolbarbutton-1 {
        margin-block: 2px !important;
        justify-content: flex-start !important;
    }
    
    #newtoolbar:not([customizing]):hover .toolbarbutton-1 .toolbarbutton-icon {
        border-top-right-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
    }
    
    #newtoolbar:not([customizing]):hover .toolbarbutton-1 .toolbarbutton-text {
        display: flex !important;
        text-align: start !important;
        padding-left: 0px !important;
        border-top-left-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
    }
    
    #newtoolbar[customizing] {
        min-width: var(--ug-newbar_width) !important;
        background: var(--ug-newbar_bg_color) !important;
        margin-bottom: 49px !important;
    }
    
    #customization-content-container {
        /*margin-left: var(--ug-newbar_width) !important;*/
        margin-right: var(--ug-newbar_width) !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);
    
    })();
    Alles anzeigen

  • Fix: Toolbar-Buttons reagieren nicht mehr ab FF 134

    • Horstmann
    • 8. Juni 2025 um 13:49
    Zitat von BrokenHeart

    Hier das versprochene Skript, welches die vorherige Funktionalität für alle Buttons wiederherstellt, welche ab FF134 nicht mehr auf einen Mausklick reagiert haben, wenn sie außerhalb des Bereichs der navigator-toolbox verschoben wurden.

    Nur mal aus Neugierde: wenn jemand dieses Script mal in die aktuelle FX oder Nightly packen möchte, funktionieren dann die strittigen Buttons?

    Es ist hier ein Sonderfall, weil diese Toolbar mit position: fixed plaziert wird, also schwebt.
    Falls die Buttons hier aber funktionieren, könnte man allerdings darüber nachdenken, eine floating Toolbar dieser Art, plus einem korrespondierenden leeren Platzhalter für die Anpassung des Browserfensters zu basteln.

    Etwas hackig, aber eine potentiell einfachere Angelegenheit als ein Script für alle einzelnen System Buttons - falls diese Buttons mit dem Script unten funktionieren.:/

    JavaScript
    //Toggle newtoolbar 7D_b rechts nav-bar test
    
    (function() {
    
        if (location.href !== 'chrome://browser/content/browser.xhtml')
            return;
    
            let toolbox_new = document.createXULElement('toolbox');
            toolbox_new.setAttribute('orient','horizontal');
            toolbox_new.setAttribute('id','toolbox_new');
    
            let tb = document.createXULElement('toolbar');
            let tb_label = "New Toolbar";
            tb.id = 'newtoolbar';
    
            tb.setAttribute("collapsed", "false");
            tb.setAttribute('customizable', true);
            tb.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
            tb.setAttribute('orient', 'vertical');
            tb.setAttribute('mode', 'icons');
            tb.setAttribute("toolboxid","navigator-toolbox");
            tb.setAttribute('context', 'toolbar-context-menu');
            tb.setAttribute("toolbarname", tb_label);
            tb.setAttribute("label", tb_label);
    
    	      toolbox_new.appendChild(tb);
    
            //document.getElementById('browser').parentNode.appendChild(toolbox_new);
            document.getElementById('navigator-toolbox').appendChild(toolbox_new);
    
            CustomizableUI.registerArea('newtoolbar', {legacy: true});
            CustomizableUI.registerToolbarNode(tb);
    
       try {
            CustomizableUI.createWidget({
                id: 'NewToolbar-button',
                type: 'custom',
                defaultArea: CustomizableUI.AREA_NAVBAR,
                    onBuild: function(aDocument) {
                        let currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
                        let buttonicon = "newtoolbar.png"
                        let toolbaritem = aDocument.createXULElement('toolbarbutton');
                        let props = {
                            id: 'NewToolbar-button',
                            class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                            removable: true,
                            label: 'Toggle New Toolbar',
                            tooltiptext: 'Toggle New toolbar',
                            //style: 'list-style-image: url("' + ("file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon) + '");',
                            style: 'list-style-image: url("chrome://browser/skin/sidebars-right.svg");',
                        };
    
                        for(let p in props)
                            toolbaritem.setAttribute(p, props[p]);
                        return toolbaritem;
                    }
            });
        } catch(e) { };
    
    document.getElementById('NewToolbar-button').addEventListener( "click", onClick );
            function onClick(aEvent, keyEvent=false) {
            if(!keyEvent && aEvent.button != 0) {
                return;
            }
            newtoolbar.classList.toggle("off-mode");
     };
    
    const css =`
    
    :root {
        --ug-newbar_width: 44px;
        --ug-newbar_max_width: 166px;
        --ug-newbar_bg_color: lightblue;
        --ug-newbar_radius: 8px;
    }
    
    #toolbox_new {
        position: fixed;
        display: flex;
        top: 50%;
        /*left: 0;*/
        right: 0;
        transform: translateY(-50%);
        z-index: 4 !important;
        height: fit-content;
        width: fit-content;
    }
    
    #newtoolbar {
        display: flex;
        width: var(--ug-newbar_width);
        padding: 4px !important;
        background-color: var(--ug-newbar_bg_color) !important;
        /*border-radius: 0 var(--ug-newbar_radius) var(--ug-newbar_radius) 0;*/
        border-radius: var(--ug-newbar_radius) 0 0 var(--ug-newbar_radius);
        transition: width 0.5s ease, margin 0.5s ease !important;
    }
    
    #newtoolbar:not([customizing]):hover {
        width: var(--ug-newbar_max_width);
    }
    
    #newtoolbar:not([customizing]).off-mode {
        /*margin-left: calc(0px - var(--ug-newbar_width));*/
        margin-right: calc(0px - var(--ug-newbar_width));
    }
    
    #newtoolbar .toolbarbutton-1 {
        margin-block: 2px !important;
        justify-content: flex-start !important;
    }
    
    #newtoolbar:not([customizing]):hover .toolbarbutton-1 .toolbarbutton-icon {
        border-top-right-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
    }
    
    #newtoolbar:not([customizing]):hover .toolbarbutton-1 .toolbarbutton-text {
        display: flex !important;
        text-align: start !important;
        padding-left: 0px !important;
        border-top-left-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
    }
    
    #newtoolbar[customizing] {
        min-width: var(--ug-newbar_width) !important;
        padding-bottom: 48px !important;
        background: var(--ug-newbar_bg_color) !important;
    }
    
    #customization-content-container {
        /*margin-left: var(--ug-newbar_width) !important;*/
        margin-right: var(--ug-newbar_width) !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);
    
    })();
    Alles anzeigen
  • Seitennavigation - Fly Out Menü

    • Horstmann
    • 8. Juni 2025 um 11:13
    Zitat von lenny2
    Zitat von Horstmann

    //Toggle newtoolbar 7D

    Wie lässt sich die Symbolleiste an den rechten Rand des Fensters verschieben?

    Schau mal in #9, Mitleser hat da was aktuelles.

    Ansonsten hier eine Version, falls die noch klappt im aktuellen Firefox, mit der Leiste rechts.
    Es stehen die Zeilen für die linke Position noch in der CSS, nur auskommentiert.

    Edit: s. Anmerkung aus Script aus #9:
    // ACHTUNG: Einige Systembuttons lassen sich in zusätzliche/eigene Tb's zwar noch verschieben, haben aber KEINE Funktion. Dazu gibt es einen Patch von @BrokenHeart:  https://www.camp-firefox.de/forum/thema/138875-fix-toolbar-buttons-reagieren-nicht-mehr-ab-ff-134/

    JavaScript
    //Toggle newtoolbar 7D_b rechts
    
    
    (function() {
    
        if (location.href !== 'chrome://browser/content/browser.xhtml')
            return;
    
            let toolbox_new = document.createXULElement('toolbox');
            toolbox_new.setAttribute('orient','horizontal');
            toolbox_new.setAttribute('id','toolbox_new');
    
            let tb = document.createXULElement('toolbar');
            let tb_label = "New Toolbar";
            tb.id = 'newtoolbar';
    
            tb.setAttribute("collapsed", "false");
            tb.setAttribute('customizable', true);
            tb.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
            tb.setAttribute('orient', 'vertical');
            tb.setAttribute('mode', 'icons');
            tb.setAttribute("toolboxid","navigator-toolbox");
            tb.setAttribute('context', 'toolbar-context-menu');
            tb.setAttribute("toolbarname", tb_label);
            tb.setAttribute("label", tb_label);
    
    	      toolbox_new.appendChild(tb);
    
            document.getElementById('browser').parentNode.appendChild(toolbox_new);
    
            CustomizableUI.registerArea('newtoolbar', {legacy: true});
            CustomizableUI.registerToolbarNode(tb);
    
       try {
            CustomizableUI.createWidget({
                id: 'NewToolbar-button',
                type: 'custom',
                defaultArea: CustomizableUI.AREA_NAVBAR,
                    onBuild: function(aDocument) {
                        let currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
                        let buttonicon = "newtoolbar.png"
                        let toolbaritem = aDocument.createXULElement('toolbarbutton');
                        let props = {
                            id: 'NewToolbar-button',
                            class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                            removable: true,
                            label: 'Toggle New Toolbar',
                            tooltiptext: 'Toggle New toolbar',
                            style: 'list-style-image: url("' + ("file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon) + '");',
                        };
    
                        for(let p in props)
                            toolbaritem.setAttribute(p, props[p]);
                        return toolbaritem;
                    }
            });
        } catch(e) { };
    
    document.getElementById('NewToolbar-button').addEventListener( "click", onClick );
            function onClick(aEvent, keyEvent=false) {
            if(!keyEvent && aEvent.button != 0) {
                return;
            }
            newtoolbar.classList.toggle("off-mode");
     };
    
    const css =`
    
    :root {
        --ug-newbar_width: 44px;
        --ug-newbar_max_width: 166px;
        --ug-newbar_bg_color: lightblue;
        --ug-newbar_radius: 8px;
    }
    
    #toolbox_new {
        position: fixed;
        display: flex;
        top: 50%;
        /*left: 0;*/
        right: 0;
        transform: translateY(-50%);
        z-index: 4 !important;
        height: fit-content;
        width: fit-content;
    }
    
    #newtoolbar {
        display: flex;
        width: var(--ug-newbar_width);
        padding: 4px !important;
        background-color: var(--ug-newbar_bg_color) !important;
        /*border-radius: 0 var(--ug-newbar_radius) var(--ug-newbar_radius) 0;*/
        border-radius: var(--ug-newbar_radius) 0 0 var(--ug-newbar_radius);
        transition: width 0.5s ease, margin 0.5s ease !important;
    }
    
    #newtoolbar:not([customizing]):hover {
        width: var(--ug-newbar_max_width);
    }
    
    #newtoolbar:not([customizing]).off-mode {
        /*margin-left: calc(0px - var(--ug-newbar_width));*/
        margin-right: calc(0px - var(--ug-newbar_width));
    }
    
    #newtoolbar .toolbarbutton-1 {
        margin-block: 2px !important;
        justify-content: flex-start !important;
    }
    
    #newtoolbar:not([customizing]):hover .toolbarbutton-1 .toolbarbutton-icon {
        border-top-right-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
    }
    
    #newtoolbar:not([customizing]):hover .toolbarbutton-1 .toolbarbutton-text {
        display: flex !important;
        text-align: start !important;
        padding-left: 0px !important;
        border-top-left-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
    }
    
    #newtoolbar[customizing] {
        min-width: var(--ug-newbar_width) !important;
        padding-bottom: 48px !important;
        background: var(--ug-newbar_bg_color) !important;
    }
    
    #customization-content-container {
        /*margin-left: var(--ug-newbar_width) !important;*/
        margin-right: var(--ug-newbar_width) !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);
    
    })();
    Alles anzeigen
  • Unterschiedliche Versionen des Skriptes "Mehrzeilige Tableiste"

    • Horstmann
    • 6. Juni 2025 um 21:33
    Zitat von Mira_Belle

    Horstmann Ich bin jetzt etwas irritiert.
    Ist das Ironie oder Sarkasmus, oder was ganz anderes?

    Genauso gemeint wie gesagt.X/

    Aber natürlich nicht an dich gerichtet! :)

  • Unterschiedliche Versionen des Skriptes "Mehrzeilige Tableiste"

    • Horstmann
    • 6. Juni 2025 um 20:32

    Um das Ganze zusammen zu fassen:

    - CSS Code soll irgendwie raus aus JS Scripts, oder CSS Code in JS Scripts soll irgendwie weniger sein, in Relation zum JS Code.

    - Spezifische Fragen dazu, Erklärungen und frühere Vorschläge zum Thema - ohne Kommentar geblieben.

    - Wenigstens zwei Forenmitglieder werden nicht gebraucht und sollen raus hier, laut einem französischen Kleinwagen der 50er mit Überraschungsei Avatar.

    Sonst noch was, das derart nutzlose User für euch irgendwie tun dürfen, während sie zu lange am Rechner hängen, um an einem Code zu basteln, bis ihn jeder Spacken benutzen kann?

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

    • Horstmann
    • 6. Juni 2025 um 19:50

    Hatte hier deutliche Probleme mit der opacity Performance, wo und falls benutzt.
    Daher ein Update, plus noch ein paar kleinere Änderungen.

    Wie zuvor, das Script sollte in dieser Konfiguration ohne Modifikationen, und ohne eigene Icons haben zu müssen funktionieren.
    Optionale Einstellungen gibt es wie gehabt.

    Nachtrag: RC5b mit filter: opacity(x); statt opacity: x; scheint Performance Probleme zu lösen. :/

    JavaScript
    //bookmark_count.uc.js, RC_5b
    //Anfang Juni 2025
    //Zeigt Anzahl der Lesezeichenordner und Links an in Lesezeichenpopups
    //basiert auf Script von BrokenHeart =>
    //https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1269879#post1269879
    //Release Candidate 5b =>
    //https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1273433#post1273433
    
    (function() {
    
        if (!window.gBrowser)
            return;
    
        setTimeout(function() {
            setFunction();
        },50);
    
        //Einstellungen Javascript =>
    
        //Eigenes Icon erwartet in Profilordner/chrome/icons, icons Ordner falls noetig erstellen
        //Eigene Icons eintragen, falls vorhanden
        let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
        let icon1 = 'YourFolderIcon.svg';        //  Custom  Folder Icon
        let icon2 = 'YourLinkIcon.svg';          //  Custom  Link Icon
    
        //Variablen zur Auswahl der Icons; kein Auto Fallback falls eigenes Icon nicht vorhanden
        let icon_folder = 0    // Ordner: 0 Firefox Fallback Icon / 1 eigenes Icon
        let icon_link = 0      // Links: 0 Firefox Fallback Icon / 1 eigenes Icon
    
        //Variablen zur Auswahl der Klammern
        let bracket = 0;       //  0 keine Klammern, 1 runde Klammern, 2 eckige Klammern
        //Variablen zur Auswahl der Reihenfolge
        let order = 0;         //  0 Icons links Ziffern rechts / 1 Ziffern links Icons rechts
        //Variablen zur Auswahl der Farben
        let bm_colors = 0;     //  0 Standardfarben, 1 eigene Farben benutzen
    
        //Variablen zur Auswahl der Trennlinie
        // 0 ohne Trennlinie
        // 1 ohne Trennlinie + Zaehler #1 = 0 + Icon #2 wird versteckt
        // 2 mit Trennlinie
        // 3 mit Trennlinie nur bei Zaehler #1 > 0 + Zaehler #1 = 0 + Icon #2 wird versteckt
        let trenner = 2;
        // Trennlinie Inhalt, beliebiges Textzeichen
        let trennzeichen = '|';
    
        function setFunction() {
            const css =`
    
           /*
           Einstellungen CSS , OPTIONAL =>
           #A Zaehler (Counter) anpassen,
           #B Feinabstimmung allgemein,
           #C Feinabstimmung Zentrierung Trennlinie,
           #D Eigene Farben anpassen
           #E Optionale Extras anpassen
           */
    
           /*** User Einstellungen ***/
    
           /* A */
           /** Feste Breite der beiden Counter, abhaengig von Anzahl Ziffern, AUTO Anpassung für mit/ohne Klammern.
              Falls noetig => Werte erhoehen NUR bis Icons untereinander auf gleicher Hoehe sind **/
    
           /* Beispiel 2 Ziffern plus Klammern, Systemfont Mac */
           #bmContent:is(
           [data-value1^='['],
           [data-value1^='(']) {
              --bm_width_one: 2.1em;
              --bm_width_two: 2.1em;
              }
           /* Beispiel 2 Ziffern ohne Klammern, Systemfont Mac */
           #bmContent {
              --bm_width_one: 1.3em;
              --bm_width_two: 1.3em;
    
           /* B */
           /** Abstaende / Groessen fuer die Counter = Basisanpassungen **/
    
              /* Abstand mittig zwischen Counter #1 <=> Counter #2 / wird x2 benutzt */
              --bm_margin_mid: 8px;
    
              /* Groesse Icons = 16px Firefox Standard */
              --bm_icon_size: 16px;
    
              /* Abstand zwischen Icon und Ziffer */
              --bm_space: 4px;
              }
    
           /* C */
           /** Trennlinie **/
    
           /* Feinabstimmung Zentrierung Mitte / Standard = 0px */
           #bmContent.trennclass {
              --bm_divider: 0px;
              }
           /* Fuer Order = 1 */
           #bmContent.trennclass.order_2 {
                --bm_divider: 0.3em;
                }
           /* Element Trennlinie allgemein */
           #trennID {
              display: flex;
              align-items: center;
              font-size: calc(1em - 1px);       /* Hoehe, optional */
              padding-bottom: 2px;              /* ausrichten vertikal, optional */
              color: var(--trenn_color, initial);
              }
    
           /* D */
           /* Farben Text / svg! Icons aendern , anpassen nach Belieben */
           /* Info: HSL Farben: https://www.w3schools.com/css/css_colors_hsl.asp */
           /* Ordner Icon, Zahl / Links Icon, Zahl / Trennlinie */
           #bmContent.bm_my_colors {
              --folder_fill:  hsl(190, 60%, 20%, 1);
              --folder_color: hsl(190, 20%, 30%, 1);
              --link_fill:    hsl(35, 100%, 20%, 1);
              --link_color:   hsl(35, 60%, 30%, 1);
              --trenn_color:  hsl(250, 60%, 30%, 1);
              }
    
           /** Counter gesamt **/
           #bmContent {
                display: flex !important;
                margin-left: auto !important;         /* Gesamt rechtsbuendig */
                /*margin-right: -8px !important;*/    /* Abstand rechts zu Pfeil > ist evtl. OS abhaengig, optional */
                height: var(--bm_icon_size);          /* Layout passt sich Icon Groesse an */
                padding-left: 8px;                    /* min. Abstand links Gesamt für enge Popups */
    
           /* font Aenderungen , optional */
                /* font-family: Aenderungen nicht empfohlen => einheitlichen Standardfont behalten */
                /*font-size: 12px !important;*/       /* font-size */
                /*font-weight: 200 !important;*/      /* font-weight */
                }
    
           /*** User Einstellungen Ende ***/
    
    
           /*** Feste Werte ***/
    
           /** Reihenfolge Varianten Icons / Ziffern **/
           /* order 0: Icons links / Ziffern rechts */
           #bmContent {
                --bm_padding_inline: calc(var(--bm_icon_size) + var(--bm_space)) 0;
                --bm_bg_position: center left;
                }
           /* order 1: Ziffern links / Icons rechts */
           #bmContent.order_2 {
                --bm_padding_inline: 0 calc(var(--bm_icon_size) + var(--bm_space));
                --bm_bg_position: center right;
                }
           /** Icons Varianten **/
           /* Eigene Icons, falls Icons existieren im icons Ordner */
           #bmContent {
                --bm_icon_image_1: url("${ProfilePath}/${icon1}");
                --bm_icon_image_2: url("${ProfilePath}/${icon2}");
                }
           /* Firefox Icons Fallback */
           #bmContent.icon_fallback_folder {
                --bm_icon_image_1: url("chrome://global/skin/icons/folder.svg");
                }
           #bmContent.icon_fallback_link {
                --bm_icon_image_2: url("chrome://browser/skin/bookmark-hollow.svg");
                }
           /** Trennlinie Extras **/
           /* Verstecken #1 automatisch bei Trennlinie 1/3 , beides = 0 */
           #bmContent:is(.trennclass_1, .trennclass_3)::before {
                display: none !important;
                }
           /* Verstecken Icon #2 , Trennlinie 1/3 , beides = 0 */
           #bmContent.Null_1.Null_2:is(.trennclass_1, .trennclass_3)::after {
                /*content: "X";*/
                background-image: linear-gradient(transparent, transparent);
                }
    
           /** Counters (Zaehler) **/
           /* Counter #1 Ordner */
           #bmContent::before {
                content: attr(data-value1);
                display: flex;
                min-width: fit-content;
                width: var(--bm_width_one);
                padding-inline: var(--bm_padding_inline);
                align-items: center;
                justify-content: flex-end;
                margin-right: var(--bm_margin_mid);
                background-image: var(--bm_icon_image_1);
                background-position: var(--bm_bg_position);
                background-repeat: no-repeat;
                background-size: var(--bm_icon_size);
                color: var(--folder_color, initial) !important;
                fill: var(--folder_fill, initial) !important;
                }
           /* Counter #2 Links */
           #bmContent::after {
                content: attr(data-value2);
                display: flex;
                min-width: fit-content;
                width: var(--bm_width_two);
                padding-inline: var(--bm_padding_inline);
                align-items: center;
                justify-content: flex-end;
                margin-left: calc(var(--bm_margin_mid) - var(--bm_divider, 0px));
                background-image: var(--bm_icon_image_2);
                background-position: var(--bm_bg_position);
                background-repeat: no-repeat;
                background-size: var(--bm_icon_size);
                color: var(--link_color, initial) !important;
                fill: var(--link_fill, initial) !important;
                }
    
           /*** Feste Werte Ende ***/
    
    
           /* E */
           /** Optionale Extras **/
    
           /* Text vertikal ausrichten */
           /*
           #bmContent::after,
           #bmContent::before {
                padding-top: 3px;
                }
                */
    
           /** Anpassungen bei Zahl = 0 **/
    
           /* Verblassen fuer #1 , #2 , Alles = 0 */
           #bmContent:is(.Null_1:not(.Null_2), .Null_1.Null_2)::before,
           #bmContent:is(.Null_2:not(.Null_1), .Null_1.Null_2)::after,
           #bmContent:is(.Null_1:not(.Null_2), .Null_1.Null_2) #trennID {
                filter: opacity(50%);
                }
    
           /* Pfeil rechts > bei Beidem = 0 */
           menu.bookmark-item.bm_chevron_00 > .menu-right,
           menu.bookmark-item.bm_chevron_00::after {
                fill: hsl(30, 100%, 50%, 1) !important;
                fill-opacity: 1 !important;
                }
    
           /** Pfeil rechts Farbe allgemein **/
           /*
           menu.bookmark-item .menu-right,
           menu.bookmark-item::after {
                 fill: hsl(210, 100%, 50%, 1) !important;
                 fill-opacity: 1 !important;
                 }
                 */
    		`;
            const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
            const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
            sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
    
            let bmbMenu = document.getElementById('bookmarks-menu-button');
            let bookMenu = document.getElementById('bookmarksMenu');
            let persToolBar = document.getElementById('PersonalToolbar');
    
            if(bmbMenu)
                bmbMenu.addEventListener('popupshowing', onPopupShowing );
            if(bookMenu)-
                bookMenu.addEventListener('popupshowing', onPopupShowing );
            if(persToolBar)
                persToolBar.addEventListener('popupshowing', onPopupShowing );
        }
    
        function onPopupShowing(aEvent) {
            let popup = aEvent.originalTarget;
            for (let item of popup.children) {
                if (item.localName != 'menu' || item.id?.startsWith('history'))
                    continue;
                setTimeout(() => {
                  let itemPopup = item.menupopup;
    			        itemPopup.hidden = true;
    			        itemPopup.collapsed = true;
                  itemPopup.openPopup();
                  itemPopup.hidePopup();
                  let menuitemCount = 0;
                  let menuCount = 0;
                  for (let subitem of itemPopup.children) {
                    if (subitem.classList.contains('bookmark-item') && !subitem.disabled && !subitem.hidden) {
                      if (subitem.localName == 'menuitem') {
                        menuitemCount++;
                      } else if (subitem.localName == 'menu') {
                        menuCount++;
                      }
                    }
                  }
    			        itemPopup.hidden = false;
    			        itemPopup.collapsed = false;
    
                  //Eigenes Element für Zaehler
                  let bmCounta = item.childNodes[1];
                  bmCounta.innerHTML = '';
                  let bmVario = document.createElement("bmElement");
                  bmVario.id = "bmContent";
                  bmCounta.appendChild(bmVario);
    
                  //Zaehler Design Optionen =>  ohne/ mit: runde, eckige Klammern
                  if (bracket === 0) {
                      strCountOut1 = '' + menuCount + '';
                      strCountOut2 = '' + menuitemCount + '';
                      }
                  if (bracket === 1) {
                      strCountOut1 = '(' + menuCount + ')';
                      strCountOut2 = '(' + menuitemCount + ')';
                      }
                  if (bracket === 2) {
                      strCountOut1 = '[' + menuCount + ']';
                      strCountOut2 = '[' + menuitemCount + ']';
                      }
                  bmVario.setAttribute('data-value1', strCountOut1);
                  bmVario.setAttribute('data-value2', strCountOut2);
    
                  // Trennlinie Element
                  let trennelementVario = document.createElement("trennelement");
                  trennelementVario.id = "trennID";
    
                  if (trenner === 2 || trenner === 3 && menuCount !== 0) {
                       bmVario.appendChild(trennelementVario);
                       trennelementVario.textContent = trennzeichen;
                       bmVario.classList.add('trennclass');
                       }
                  if (trenner === 3 && menuCount === 0) {
                      bmVario.classList.add('trennclass_3');
                      }
                  if (trenner === 1 && menuCount === 0) {
                      bmVario.classList.add('trennclass_1');
                      }
    
                  // Extra class item/ ganzes menu fuer 00, #1 = 0, #2 = 0
                  if (menuCount === 0 && menuitemCount === 0) {
                       item.classList.add('bm_chevron_00');
                       } else {
                            item.classList.remove('bm_chevron_00');
                            }
                  if (menuCount === 0) {
                       bmVario.classList.add('Null_1');
                       }
                  if (menuitemCount === 0) {
                       bmVario.classList.add('Null_2');
                  }
    
                  // Reihenfolge Varianten Icons / Ziffern
                  if (order === 1) {
                      bmVario.classList.add('order_2');
                  }
    
                  // Icons Auswahl
                  if (icon_folder === 0) {
                      bmVario.classList.add('icon_fallback_folder');
                      }
                  if (icon_link === 0) {
                      bmVario.classList.add('icon_fallback_link');
                  }
    
                  // Farben Auswahl
                  if (bm_colors === 1) {
                      bmVario.classList.add('bm_my_colors');
                      }
    
                }, 100);
            }
        }
    })();
    Alles anzeigen

  • Unterschiedliche Versionen des Skriptes "Mehrzeilige Tableiste"

    • Horstmann
    • 5. Juni 2025 um 21:32
    Zitat von .DeJaVu

    Weil 1-2 Nutzer meinen, aus der Reihe tanzen zu müssen - es geht auch ohne euch! Wenn man es nicht versteht, kann man es auch nicht einprügeln.

    Wer es jetzt damit gemeint, wen willst du denn loswerden?

    Und sind Helfer auch Nutzer, oder Nutzer sind nur die, die die Helfer nutzen? :/
    Viel Konfusion hier. ;)

  • Unterschiedliche Versionen des Skriptes "Mehrzeilige Tableiste"

    • Horstmann
    • 4. Juni 2025 um 23:02
    Zitat von Mira_Belle

    An wen ist die Frage gestellt?
    Ich find's gut und hätte sogar noch mehr "Einstellungen" per Variablen im Block "//Einstellungen Javascript =>" vorgenommen
    und aus dem CSS rausgenommen.

    Das hier z.B.:

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

    Ich hätte es per Variabel einstellen wollen

    Zitat von Horstmann

    Ist auch sehr simpel.

    Mag sein, und ist gar nicht schwer.

    Die Frage ist an die nicht Code schreibenden Codeverweigerer gestellt. ;)

    #1, das ist das Gleiche in Grün, die Variablen stehen nur - direkt und ohne Aliase - im CSS etwas weiter unten.
    Wie wir ja schon öfters diskutiert hatten, ich mag mein CSS halt im CSS, nicht via JS injiziert.

    #2, das war ironisch gemeint ;) ; wer sich den Aris CSS Code mal angeschaut hat, will evtl. auch mit was Einfachem nicht in die Richtung mit diversen externen CSS Dateien gehen (für öffentliche Releases, selber nutze ich die auch); davon abgesehen würde es eh keiner fressen, wie du ja erwähnt hast.

  • Unterschiedliche Versionen des Skriptes "Mehrzeilige Tableiste"

    • Horstmann
    • 4. Juni 2025 um 21:58

    Mal ein kleines Beispiel, ich habe da ja selber ein kleines Script am Laufen, das kein Ende nimmt... ;)
    Nur um sicherzustellen dass wir wissen worüber wir hier reden.

    Hier ist das Ausgangsscript, weiss nicht ob das aktuell noch funktioniert, hat aber schlanke 77 Zeilen (und integriertes CSS =O).
    Es macht im Prinzip das Gleiche wie das folgende Script, Icons und Zähler hinzufügen für Lesezeichen Popups, s. Anhang.
    Lässt sich auch anpassen - wenn man's kann.

    Hier hätten wir dann meine aktuellste Version, mit diversen einfach vom User wählbaren Optionen, unter anderem ist hier auch die Benutzung eigener Icons möglich, individuelle Farben für alle Bestandteile, etc..

    Fast 400 Zeilen, die man auf weit unter die Hälfte runterkochen könnte, wenn man alle Optionen fest auf je eine Variante einstellen würde.
    Das CSS ist als räumlich separierter Block enthalten, das komplette CSS könnte aber herausgenommen, und als CSS Datei via userChrome.css importiert werden.
    Die einzige direkte Verbindung zw. JS und CSS im Script ist via der JS Variablen in Zeile 23-25, und den korrespondierenden Aliasen in Zeile 150/151 - ebenfalls leicht in externes CSS einzubinden, sogar einfacher.
    (Ok, evtl. die Klammern, aber lassen wir die mal.)

    Was sind die Kritikpunkte hier, in Bezug auf die bestehende Diskussion?
    (PS: Testcode, kommt aber bald ;))

    JavaScript
    //bmcount.uc.js, RC_5
    //Anfang Juni 2025
    //Zeigt Anzahl der Lesezeichenordner und Links an in Lesezeichenpopups
    //basiert auf Script von BrokenHeart =>
    //https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1269879#post1269879
    //Release Candidate 5 =>
    //https://
    //JS Hilfe von Mira_Belle
    
    (function() {
    
        if (!window.gBrowser)
            return;
    
        setTimeout(function() {
            setFunction();
        },50);
    
        //Einstellungen Javascript =>
    
        //Eigenes Icon erwartet in Profilordner/chrome/icons, icons Ordner falls noetig erstellen
        //Eigene Icons eintragen, falls vorhanden
        let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
        let icon1 = 'YourFolderIcon.svg';        //  Custom  Folder Icon
        let icon2 = 'YourLinkIcon.svg';          //  Custom  Link Icon
    
        //Variablen zur Auswahl der Icons; kein Auto Fallback falls eigenes Icon nicht vorhanden
        let icon_folder = 1    // Ordner: 0 Firefox Fallback Icon / 1 eigenes Icon
        let icon_link = 1      // Links: 0 Firefox Fallback Icon / 1 eigenes Icon
    
        //Variablen zur Auswahl der Klammern
        let bracket = 0;       //  0 keine Klammern, 1 runde Klammern, 2 eckige Klammern
        //Variablen zur Auswahl der Reihenfolge
        let order = 0;         //  0 Icons links Ziffern rechts / 1 Ziffern links Icons rechts
        //Variablen zur Auswahl der Farben
        let bm_colors = 0;     //  0 Standardfarben, 1 eigene Farben benutzen
    
        //Variablen zur Auswahl der Trennlinie
        // 0 ohne Trennlinie
        // 1 ohne Trennlinie + Zaehler #1 = 0 + Icon #2 wird versteckt
        // 2 mit Trennlinie
        // 3 mit Trennlinie nur bei Zaehler #1 > 0 + Zaehler #1 = 0 + Icon #2 wird versteckt
        let trenner = 2;
        // Trennlinie Inhalt, beliebiges Textzeichen
        let trennzeichen = '|';
    
        function setFunction() {
            const css =`
    
           /*
           Einstellungen CSS =>
           #A Zaehler (Counter) anpassen (nur falls noetig),
           #B Feinabstimmung allgemein,
           #C Feinabstimmung Zentrierung Trennlinie,
           #D eigene Farben anpassen
           */
    
           /*** User Einstellungen ***/
    
           /* A */
           /** Feste Breite der beiden Counter, abhaengig von Anzahl Ziffern, AUTO Anpassung für mit/ohne Klammern.
              Falls noetig => Werte erhoehen NUR bis Icons untereinander auf gleicher Hoehe sind **/
    
           /* Beispiel 2 Ziffern plus Klammern, Systemfont Mac */
           #bmContent:is(
           [data-value1^='['],
           [data-value1^='(']) {
              --bm_width_one: 2.1em;
              --bm_width_two: 2.1em;
              }
           /* Beispiel 2 Ziffern ohne Klammern, Systemfont Mac */
           #bmContent {
              --bm_width_one: 1.3em;
              --bm_width_two: 1.3em;
    
           /* B */
           /** Abstaende / Groessen fuer die Counter = Basisanpassungen **/
    
              /* Abstand mittig zwischen Counter #1 <=> Counter #2 / wird x2 benutzt */
              --bm_margin_mid: 8px;
    
              /* Groesse Icons = 16px Firefox Standard */
              --bm_icon_size: 16px;
    
              /* Abstand zwischen Icon und Ziffer */
              --bm_space: 4px;
              }
    
           /* C */
           /** Trennlinie **/
    
           /* Feinabstimmung Zentrierung Mitte / Standard = 0px */
           #bmContent.trennclass {
              --bm_divider: 0px;
              }
           /* Element Trennlinie */
           #trennID {
              display: flex;
              align-items: center;
              /*font-size: 12px;*/         /* Hoehe, optional */
              /*padding-bottom: 1px;*/     /* ausrichten vertikal, optional */
              color: var(--trenn_color, initial);
              }
    
           /* D */
           /* Farben Text / svg! Icons aendern , anpassen nach Belieben */
           /* HSL Farben: https://www.w3schools.com/css/css_colors_hsl.asp */
           /* Ordner Icon, Zahl / Links Icon, Zahl / Trennlinie */
           #bmContent.bm_my_colors {
              --folder_fill:  hsl(190, 60%, 20%, 1);
              --folder_color: hsl(190, 20%, 30%, 1);
              --link_fill:    hsl(35, 100%, 20%, 1);
              --link_color:   hsl(35, 60%, 30%, 1);
              --trenn_color:  hsl(290, 90%, 50%, 1);
              }
    
           /** Counter gesamt **/
           #bmContent {
                display: flex !important;
                margin-left: auto !important;         /* Gesamt rechtsbuendig */
                /*margin-right: -8px !important;*/    /* Abstand rechts zu Pfeil > ist evtl. OS abhaengig, optional */
                height: var(--bm_icon_size);          /* Layout passt sich Icon Groesse an */
                padding-left: 8px;                    /* min. Abstand links Gesamt für enge Popups */
    
           /* font Aenderungen , optional */
                /* font-family: Aenderungen nicht empfohlen => einheitlichen Standardfont behalten */
                /*font-size: 12px !important;*/       /* font-size */
                /*font-weight: 200 !important;*/      /* font-weight */
                }
    
           /*** User Einstellungen Ende ***/
    
    
           /*** Feste Werte ***/
    
           /** Reihenfolge Varianten Icons / Ziffern **/
           /* order 0: Icons links / Ziffern rechts */
           #bmContent {
                --bm_padding_inline: calc(var(--bm_icon_size) + var(--bm_space)) 0;
                --bm_bg_position: center left;
                }
           /* order 1: Ziffern links / Icons rechts */
           #bmContent.order_2 {
                --bm_padding_inline: 0 calc(var(--bm_icon_size) + var(--bm_space));
                --bm_bg_position: center right;
                }
           /** Icons Varianten **/
           /* Eigene Icons, falls Icons existieren im icons Ordner */
           #bmContent {
                --bm_icon_image_1: url("${ProfilePath}/${icon1}");
                --bm_icon_image_2: url("${ProfilePath}/${icon2}");
                }
           /* Firefox Icons Fallback */
           #bmContent:is(.icon_fallback_folder, icon_fallback_link) {
                --bm_icon_image_1: url("chrome://global/skin/icons/folder.svg");
                --bm_icon_image_2: url("chrome://browser/skin/bookmark-hollow.svg");
                }
           /** Trennlinie Extras **/
           /* Verstecken #1 automatisch bei Trennlinie 1/3 , beides = 0 */
           #bmContent:is(.trennclass_1, .trennclass_3)::before {
                display: none !important;
                }
           /* Verstecken Icon #2 , Trennlinie 1/3 , beides = 0 */
           #bmContent.Null_1.Null_2:is(.trennclass_1, .trennclass_3)::after {
                /*content: "X";*/
                background-image: linear-gradient(transparent, transparent);
                }
    
           /** Counters (Zaehler) **/
           /* Counter #1 Ordner */
           #bmContent::before {
                content: attr(data-value1);
                display: flex;
                min-width: fit-content;
                width: var(--bm_width_one);
                padding-inline: var(--bm_padding_inline);
                align-items: center;
                justify-content: flex-end;
                margin-right: var(--bm_margin_mid);
                background-image: var(--bm_icon_image_1);
                background-position: var(--bm_bg_position);
                background-repeat: no-repeat;
                background-size: var(--bm_icon_size);
                color: var(--folder_color, initial) !important;
                fill: var(--folder_fill, initial) !important;
                }
           /* Counter #2 Links */
           #bmContent::after {
                content: attr(data-value2);
                display: flex;
                min-width: fit-content;
                width: var(--bm_width_two);
                padding-inline: var(--bm_padding_inline);
                align-items: center;
                justify-content: flex-end;
                margin-left: calc(var(--bm_margin_mid) - var(--bm_divider, 0px));
                background-image: var(--bm_icon_image_2);
                background-position: var(--bm_bg_position);
                background-repeat: no-repeat;
                background-size: var(--bm_icon_size);
                color: var(--link_color, initial) !important;
                fill: var(--link_fill, initial) !important;
                }
    
           /*** Feste Werte Ende ***/
    
    
           /** Optionale Extras **/
    
           /* Text vertikal ausrichten */
           /*
           #bmContent::after,
           #bmContent::before {
                outline: 1px solid red;
                padding-top: 3px;
                }
           #bmContent {
                outline: 1px solid blue;
                outline-offset: 2px;
                }
                */
    
           /** Anpassungen bei Zahl = 0 **/
    
           /* Verblassen fuer #1 , #2 , Alles = 0 */
           #bmContent {
                --bm_opacity_zahl: 55%;
                --bm_opacity_icon: 50%;
                }
    
           #bmContent.Null_1:not(.Null_2)::before,
           #bmContent.Null_1.Null_2::before {
                -webkit-text-fill-color: color-mix(in srgb, var(--folder_color, currentColor) var(--bm_opacity_zahl), transparent) !important;
                fill: color-mix(in srgb, var(--folder_fill, currentColor) var(--bm_opacity_icon), transparent) !important;
                }
    
           #bmContent.Null_2:not(.Null_1)::after,
           #bmContent.Null_1.Null_2::after {
                -webkit-text-fill-color: color-mix(in srgb, var(--link_color, currentColor) var(--bm_opacity_zahl), transparent) !important;
                fill: color-mix(in srgb, var(--link_fill, currentColor) var(--bm_opacity_icon), transparent) !important;
                }
    
           #bmContent:is(.Null_1:not(.Null_2), .Null_1.Null_2) #trennID {
                -webkit-text-fill-color: color-mix(in srgb, var(--trenn_color, currentColor) var(--bm_opacity_zahl), transparent) !important;
                }
    
           /* Pfeil rechts > bei Beidem = 0 , optional */
           menu.bookmark-item.bm_chevron_00 > .menu-right,
           menu.bookmark-item.bm_chevron_00::after {
                fill: hsl(30, 100%, 50%, 1) !important;
                fill-opacity: 1 !important;
                }
    
           /** Pfeil rechts Farbe allgemein, optional **/
           /*menu.bookmark-item .menu-right,
           menu.bookmark-item::after {
                 fill: hsl(210, 100%, 50%, 1) !important;
                 fill-opacity: 1 !important;
                 }
                 */
    
    		`;
            const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
            const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
            sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
    
            let bmbMenu = document.getElementById('bookmarks-menu-button');
            let bookMenu = document.getElementById('bookmarksMenu');
            let persToolBar = document.getElementById('PersonalToolbar');
    
            if(bmbMenu)
                bmbMenu.addEventListener('popupshowing', onPopupShowing );
            if(bookMenu)-
                bookMenu.addEventListener('popupshowing', onPopupShowing );
            if(persToolBar)
                persToolBar.addEventListener('popupshowing', onPopupShowing );
        }
    
        function onPopupShowing(aEvent) {
            let popup = aEvent.originalTarget;
            for (let item of popup.children) {
                if (item.localName != 'menu' || item.id?.startsWith('history'))
                    continue;
                setTimeout(() => {
                  let itemPopup = item.menupopup;
    			        itemPopup.hidden = true;
    			        itemPopup.collapsed = true;
                  itemPopup.openPopup();
                  itemPopup.hidePopup();
                  let menuitemCount = 0;
                  let menuCount = 0;
                  for (let subitem of itemPopup.children) {
                    if (subitem.classList.contains('bookmark-item') && !subitem.disabled && !subitem.hidden) {
                      if (subitem.localName == 'menuitem') {
                        menuitemCount++;
                      } else if (subitem.localName == 'menu') {
                        menuCount++;
                      }
                    }
                  }
    			        itemPopup.hidden = false;
    			        itemPopup.collapsed = false;
    
                  //Eigenes Element für Zaehler
                  let bmCounta = item.childNodes[1];
                  bmCounta.innerHTML = '';
                  let bmVario = document.createElement("bmElement");
                  bmVario.id = "bmContent";
                  bmCounta.appendChild(bmVario);
    
                  //Zaehler Design Optionen =>  ohne/ mit: runde, eckige Klammern
                  if (bracket === 0) {
                      strCountOut1 = '' + menuCount + '';
                      strCountOut2 = '' + menuitemCount + '';
                      }
                  if (bracket === 1) {
                      strCountOut1 = '(' + menuCount + ')';
                      strCountOut2 = '(' + menuitemCount + ')';
                      }
                  if (bracket === 2) {
                      strCountOut1 = '[' + menuCount + ']';
                      strCountOut2 = '[' + menuitemCount + ']';
                      }
                  bmVario.setAttribute('data-value1', strCountOut1);
                  bmVario.setAttribute('data-value2', strCountOut2);
    
                  // Trennlinie
                  let trennelementVario = document.createElement("trennelement");
                  trennelementVario.id = "trennID";
    
                  if (trenner === 2 || trenner === 3 && menuCount !== 0) {
                       bmVario.appendChild(trennelementVario);
                       trennelementVario.textContent = trennzeichen;
                       bmVario.classList.add('trennclass');
                       }
                  if (trenner === 3 && menuCount === 0) {
                      bmVario.classList.add('trennclass_3');
                      }
                  if (trenner === 1 && menuCount === 0) {
                      bmVario.classList.add('trennclass_1');
                      }
    
                  // Extra class item/ ganzes menu fuer 00, #1 = 0, #2 = 0
                  if (menuCount === 0 && menuitemCount === 0) {
                       item.classList.add('bm_chevron_00');
                       } else {
                            item.classList.remove('bm_chevron_00');
                            }
                  if (menuCount === 0) {
                       bmVario.classList.add('Null_1');
                       }
                  if (menuitemCount === 0) {
                       bmVario.classList.add('Null_2');
                  }
    
                  // Reihenfolge Varianten Icons / Ziffern
                  if (order === 1) {
                      bmVario.classList.add('order_2');
                  }
    
                  // Icons Auswahl
                  if (icon_folder === 0) {
                      bmVario.classList.add('icon_fallback_folder');
                      }
                  if (icon_link === 0) {
                      bmVario.classList.add('icon_fallback_link');
                  }
    
                  // Farben Auswahl
                  if (bm_colors === 1) {
                      bmVario.classList.add('bm_my_colors');
                      }
    
                }, 100);
            }
        }
    })();
    Alles anzeigen


    Und nur für den Fall, dass wir alle Varianten mit externem CSS einbinden wollen, ohne JS Optionen zu benutzen, das geht.
    Ist auch sehr simpel.


    Zitat von Mira_Belle

    Es bleibt alles, wie es ist.
    Es wird von einigen Skripten dutzende individuell angepasste Versionen geben und wir werden daran nichts,
    aber auch gar nichts ändern.

    Amen, sister. :)

  • Unterschiedliche Versionen des Skriptes "Mehrzeilige Tableiste"

    • Horstmann
    • 4. Juni 2025 um 21:08

    Wir habe uns überschnitten, s. oben; letztlich sind wir in den meisten Punkten der gleichen Ansicht.

  • Unterschiedliche Versionen des Skriptes "Mehrzeilige Tableiste"

    • Horstmann
    • 4. Juni 2025 um 20:55
    Zitat von milupo

    Wenn sich aber die JavaScript-Datei um 80 Zeilen vergrößert und nur durch CSS kann das nicht normal sein. Wenn dann vielleicht noch mehr CSS drin steht als JavaScript-Code. Gegen kleine Codes habe ich nichts, z. B. um ein durch das Skript eingefügtes Symbol zu positionieren, z. B. mit background-position oder mit padding- oder margin-Abständen.

    Wenn man Styles braucht, dann braucht man Styles, und irgendwo müssen die herkommen.
    Es gibt bestimmt hier und da mal unnötige Schnörkel, aber die Regel ist das nicht, und als Bastler muss man auch lernen auf dem FX Code aufzubauen.

    Für einen Button - ich vermute davon redest du - hinzubiegen braucht man fast nix; für andere Geschichten kann es - und muss es - oft aufwendiger werden.
    Glaub's mir einfach; Vereinfachung ist mit der grösste Aufwand beim Code Basteln, und keiner will unnötigen Müll in seinem/ihrem Code haben, auch wenn's dir so vorkommt.


    Zitat von milupo

    Ich suche jetzt nicht für dich. Auch wenn es kein Skript gäbe, zu dem es eine CSS-Datei gibt, wäre es immer noch viel sinnvoller, viel CSS-Code in einer gesonderten CSS-Datei unterzubringen.

    Ich suche aber für dich.;)

    Selber habe ich schon öfters für separate CSS Dateien (und Icons) plädiert, und nach Lösungen gesucht, zB hier.
    Diese Diskussionen laufen idR ins Leere.

  • Unterschiedliche Versionen des Skriptes "Mehrzeilige Tableiste"

    • Horstmann
    • 4. Juni 2025 um 20:40
    Zitat von milupo

    Wirklich individuell ist CSS in einer eigenen Datei. Und es ist ja nun auch nicht neu, dass CSS-Dateien von Skript-Entwicklern mitgeliefert werden.

    Gib mir ein einziges Beispiel. :/

  • Unterschiedliche Versionen des Skriptes "Mehrzeilige Tableiste"

    • Horstmann
    • 4. Juni 2025 um 18:54
    Zitat von milupo

    Also bei manchen Helfern hier, habe ich den Eindruck, dass sie zwar ein Basis-Skript haben wollen, andererseits aber Unmengen von CSS-Codes ins Skript einbauen. Da kann dann m. E. nicht mehr von Basis die Rede sein.

    Einen Unterschied muss man aber machen zwischen einem reinen CSS Code Block innerhalb einem JS Script, und der Einbindung von Styles direkt via JS.

    Das erstere könnte man problemlos aus einem JS Script heraustrennen, je mehr vom zweiten Fall existiert, desto komplexer die Verschachtelung, und die Problembehebung bzw. Aktualisierung.

    Das Problem liegt auch nicht unbedingt an den "Helfern", sondern an vielen Usern, die nicht die Basiskenntnisse lernen wollen, und die ausdrücklich für sie maßgeschneiderte Codes erfragen und erwarten - und immer eine All-in-One Lösung.

    Wenn man vor dem Hintergrund einen Code bastelt, fragt man sich irgendwann ob man 20 Code Versionen für 20 Leute schreiben will, oder lieber ein paar Optionen einbaut, die leicht anzupassen, oder wenn nötig leicht erklärbar sind bei individuellen Wünschen.

    Darüber hinaus sollte man auch ein Grundwissen mitbringen - woran es mir selber mangelt - um die Komplexität eines Codes überhaupt beurteilen zu können; mehr Code kann oft auch der Effizienz, der Kompatibilität, und tatsächlich der Vereinfachung dienen.

  • userChrome.js Scripte für den Fuchs (Diskussion)

    • Horstmann
    • 3. Juni 2025 um 21:34
    Zitat von milupo

    Ich denke mal, an den Zeilen 26-28. Dort steht dreimal padding: padding-left bedeutet ein Innenabstand von links, padding-right, Innenabstand von rechts. Der von rechts ist größer. Da stoßen beide bei herunterladen zusammen. Außerdem gibt es da noch padding als Sammeleigenschaft: Das bedeutet es kommen noch einmal 3px für links bzw. rechts drauf. Dazu 3px für oben und unten.

    Ahem, nicht so ganz, glaub ich.
    padding-left und padding-right überschreiben hier padding für links/rechts, soweit ich weiss.
    In dem Fall sollte das:

    CSS
    			padding: 3px !important;
    			padding-left: 5px !important;
    			padding-right: 12px !important;

    das ergeben:

    CSS
                padding-top: 3px !important;
                padding-bottom: 3px !important;
    			padding-left: 5px !important;
    			padding-right: 12px !important;

Unterstütze uns!

Jährlich (2025)

65,5 %

65,5% (425,86 von 650 EUR)

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