Beiträge von Horstmann

Horstmann

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.

Horstmann

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.

Horstmann

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.

Horstmann

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

Horstmann

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

Horstmann

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

Horstmann

Zitat von Mira_Belle

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

Genauso gemeint wie gesagt.

Aber natürlich nicht an dich gerichtet!

Horstmann

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?

Horstmann

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

Horstmann

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.

Horstmann

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.

Horstmann

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 ).
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.

Horstmann

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

Horstmann

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.

Horstmann

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.

Horstmann

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.

Horstmann

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;

Horstmann

Zitat von omar1979

Yes.
Jetzt ist alles wieder super

Prima, freut mich zu hören!

Horstmann

Zitat von Sören Hentzschel

Zitat von lenny2

Skriptes "Mehrzeilige Tableiste" enthält 800-1300 Zeilen
CSS-Style "Mehrzeilige Tableiste" by Aris-t2 enthält 80 Zeilen

Und was möchtest du damit aussagen? Die Anzahl von Code-Zeilen gilt schon ganz lange nicht mehr als relevante Metrik für Entwickler. Ich würde außerdem behaupten, es gibt auch entsprechende Unterschiede in Funktionalität und Optionen.

Wenn sich mal jemand hinsetzen würde, um den aufgeblähten JS Code mit den reinen CSS Versionen von Aris oder MrOtherGuy zu vergleichen, und uU via JS zu ergänzen wo nötig, dann kann man sich über Funktionalität und Optionen unterhalten.

(PS: Auf keinen Fall werde (oder könnte) ich dieser Jemand sein. )

Horstmann

Für anderen Pfeil bei hover, du bist schon nah dran.
Könnte klappen ->

Oben im JS:

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 = 'Folder.png';        //  Custom  Folder Icon
    let icon2 = 'Link.png';          //  Custom  Link Icon
    let iconPfeil = 'a_export.png';      //  Custom  Pfeil Icon
    let iconPfeil_2 = 'a_import1.png';      //  Custom  Pfeil Icon hover

Im CSS:

CSS

       /** Pfeil rechts eigenes Icon **/  
       menu.bookmark-item::after {
             background-image:  url("${ProfilePath}/${iconPfeil}") !important;
             fill-opacity: 1 !important;
             margin-right: 10px !important;
             }
       /** Pfeil rechts hover eigenes Icon **/  
       menu.bookmark-item:hover::after {
             background-image:  url("${ProfilePath}/${iconPfeil_2}") !important;
             }

Beiträge von Horstmann

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

Seitennavigation - Fly Out Menü

Fix: Toolbar-Buttons reagieren nicht mehr ab FF 134

Fix: Toolbar-Buttons reagieren nicht mehr ab FF 134

Fix: Toolbar-Buttons reagieren nicht mehr ab FF 134

Seitennavigation - Fly Out Menü

Unterschiedliche Versionen des Skriptes "Mehrzeilige Tableiste"

Unterschiedliche Versionen des Skriptes "Mehrzeilige Tableiste"

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

Unterschiedliche Versionen des Skriptes "Mehrzeilige Tableiste"

Unterschiedliche Versionen des Skriptes "Mehrzeilige Tableiste"

Unterschiedliche Versionen des Skriptes "Mehrzeilige Tableiste"

Unterschiedliche Versionen des Skriptes "Mehrzeilige Tableiste"

Unterschiedliche Versionen des Skriptes "Mehrzeilige Tableiste"

Unterschiedliche Versionen des Skriptes "Mehrzeilige Tableiste"

Unterschiedliche Versionen des Skriptes "Mehrzeilige Tableiste"

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

BookmarkCount.uc.js funktioniert nach Update auf FF-Version 139.0 nicht mehr.

Unterschiedliche Versionen des Skriptes "Mehrzeilige Tableiste"

BookmarkCount.uc.js funktioniert nach Update auf FF-Version 139.0 nicht mehr.