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

  • Adressleiste mit Suchfunktion statt mit Weltkugel

    • Horstmann
    • 25. Juni 2025 um 19:33
    Zitat von Mr. Cutty

    Gerade nach dem Update auf FF 140 gesehen, dass dort nun in einer leeren Adresszeile statt der Weltkugel bei mnir nun dies zu sehen ist:

    Die Adressleiste möchte ich nicht für die Suche verwenden.

    Bisher verwendete ich das in der userChrome.css für die Weltkugel:

    CSS
    /* ------------------------------------------------------ */
    /* Anderes Icon für die Adressleiste + Deckkraft für Icon */
    /* in Adress- und Suchleiste auf .6 geändert              */
    /* ------------------------------------------------------ */
    
    
    #identity-box[pageproxystate="invalid"] {
      & #identity-icon {
      list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg") !important;
      fill-opacity: .6 !important;
    }
    }
    
    .searchbar-search-icon {
      fill-opacity: .6 !important;
    }
    Alles anzeigen

    Sowas hier, um mal beim Icon zu bleiben, und dem Code von dir?
    Könnte evtl. nur an geändertem Nesting liegen.:/

    CSS
    #identity-box[pageproxystate="invalid"] #identity-icon {
      list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg") !important;
      fill-opacity: .6 !important;
    }
  • v140.0rc1 Konflikt mit dem Skript addonbar_vertical.uc.js von Aris-t2

    • Horstmann
    • 20. Juni 2025 um 10:20

    Danke nochmal für die detaillierte Rückmeldung! :)

    2 Dinge:

    Meine Normalversion von FX ist zu alt um das im Detail weiter zu verfolgen, da müsste jemand anderes weiterbasteln bei Interesse.
    Wusste nicht mal dass es jetzt Separatoren gibt für Toolbars, ausser Lesezeichen.
    Oder auf einen Fix von Aris warten, bzw. den Fix von Brokenheart testen.

    Zum zweiten könnten bei dir eventuell noch andere Scripts oder CSS in die Quere kommen, die ähnliche Funktionen bzw. optische Anpassungen erzeugen. :/

  • v140.0rc1 Konflikt mit dem Skript addonbar_vertical.uc.js von Aris-t2

    • Horstmann
    • 19. Juni 2025 um 09:21
    Zitat von lenny2

    Horstmann

    Bislang v140.0rc1
    a\ Kein Konflikt mit Unified Extensions Button!
    .....

    Sie sind nach Aris-t2 die zweite Person, die die vertikale Symbolleiste erstellen konnte! :thumbup:

    Das ist mal eine hilfreiche Rückmeldung, vielen Dank! :)
    V.a. die Buttons waren mir wichtig, auch hier schon kurz angesprochen.

    Wie erwähnt, das Script hier ist ein ganz grober Test; in dieser Form funktioniert es nur rechts, kann aber recht einfach mit weiteren Optionen versehen werden; viele kosmetische Anpassungen wären auch noch vorzunehmen, etc..

    Es ist auch nicht von mir usprünglich, und basiert auf diesem Ansatz.

    Noch ein grober Test mit Positionierungsoptionen:

    JavaScript
    //Toggle newtoolbar 8 test
    
    (function() {
    
        if (location.href !== 'chrome://browser/content/browser.xhtml')
            return;
    
            // Eigenes Icon
            let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
            let icon1 = 'newtoolbar.png';
            let ImagePath = ProfilePath + icon1;
    
            let new_tb_loc = 1;        //  Position: 0 Rechts 1 Links 2 Bottom
    
            if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
            	Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
            }
    
            let toolbox_new = document.createXULElement('toolbox');
            toolbox_new.setAttribute('id','toolbox_new');
    
            const element = document.getElementById("navigator-toolbox");
            const rect = element.getBoundingClientRect();
    
            let ntb = document.createXULElement('toolbar');
            ntb.id = 'newtoolbar';
            ntb.setAttribute('customizable', true);
            ntb.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
            ntb.setAttribute('mode', 'icons');
            ntb.setAttribute('context', 'toolbar-context-menu');
    
    	      toolbox_new.appendChild(ntb);
    
            //Geht
            document.getElementById('navigator-toolbox').appendChild(toolbox_new);
            //Geht
            //document.getElementById('nav-bar').appendChild(toolbox_new);
    
            //geht height #2 not dynamic ???
            document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.height + 'px');
    
            CustomizableUI.registerArea('newtoolbar', {legacy: true});
            CustomizableUI.registerToolbarNode(ntb);
    
       try {
            CustomizableUI.createWidget({
                id: 'NewToolbar_button',
                type: 'custom',
                defaultArea: CustomizableUI.AREA_NAVBAR,
                    onBuild: function(aDocument) {
                        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',
                        };
    
                        for(let p in props)
                            toolbaritem.setAttribute(p, props[p]);
                        return toolbaritem;
                    }
            });
        } catch(e) { };
    
        // Position
        if (new_tb_loc === 1) {
             toolbox_new.classList.add("left_mode");
             browser.classList.add("left_mode_b");
           }
        if (new_tb_loc === 2) {
             toolbox_new.classList.add("bottom_mode");
             browser.classList.add("bottom_mode_b");
           }
    
        // button
        document.getElementById('NewToolbar_button').addEventListener( "click", newTB );
            function newTB(aEvent, keyEvent=false) {
            if(!keyEvent && aEvent.button != 0) {
                return;
            }
            newtoolbar.classList.toggle("off-mode");
            browser.classList.toggle("off-mode_b");
            }
    
    const css =`
    
    :root {
        --ug-newbar_width: 42px;
        --ug-newbar_bg_color: lightblue;
    }
    
    #NewToolbar_button .toolbarbutton-icon {
        list-style-image: url("chrome://browser/skin/sidebars-right.svg") !important;
        /*list-style-image: url("${ImagePath}") !important;*/
    }
    
    #navigator-toolbox {
        z-index: 444 !important;
    }
    /*
    #nav-bar {
        z-index: 4 !important;
    }
    */
    
    #browser {
        transition: padding 0.5s ease !important;
    }
    
    #newtoolbar .toolbarbutton-1 {
        margin-block: 2px !important;
    }
    
    /*
    #newtoolbar .toolbarbutton-1 image {
        outline: 1px solid red !important;
    }
    #sidebar-box {
        outline: 4px solid red !important;
        outline-offset: -2px !important;
    }
    */
    
    
    /*  Basis / Right */
    
    #browser:not(.off-mode_b) {
        padding-right: var(--ug-newbar_width) !important;
    }
    #toolbox_new {
        position: fixed;
        display: flex;
        flex-direction: column;
        width: var(--ug-newbar_width);
        bottom: 0;
        right: 0;
    }
    #newtoolbar {
        display: flex;
        flex-direction: column;
        /*z-index: 4 !important;*/
        width: var(--ug-newbar_width);
        padding-block: 8px;
        height: calc(100vh - var(--height_newbar));
        background-color: var(--ug-newbar_bg_color) !important;
        box-shadow: -1px 0 grey;
        border-top: 1px solid grey;
        transition: width 0.5s ease, margin 0.5s ease, height 0.5s ease;
    }
    #newtoolbar:not([customizing]).off-mode {
        margin-inline: 0 calc(0px - var(--ug-newbar_width));
        box-shadow: none;
    }
    
    
    /*  Left  */
    
    #browser:not(.off-mode_b).left_mode_b {
        padding-inline: var(--ug-newbar_width) 0 !important;
    }
    #toolbox_new.left_mode {
        left: 0;
    }
    .left_mode #newtoolbar {
        box-shadow: 1px 0 grey;
    }
    .left_mode #newtoolbar:not([customizing]).off-mode {
        margin-inline: calc(0px - var(--ug-newbar_width)) 0;
    }
    
    
    /*  Bottom  */
    
    #browser:not(.off-mode_b).bottom_mode_b {
        padding-inline: 0 !important;
        padding-bottom: var(--ug-newbar_width) !important;
    }
    #toolbox_new.bottom_mode {
        flex-direction: row !important;
        width: 100vw;
    }
    .bottom_mode #newtoolbar {
        flex-direction: row !important;
        height: var(--ug-newbar_width);
        width: 100vw;
        padding-block: 0;
        padding-inline: 8px;
        box-shadow: 0 -1px grey;
        border: none;
    }
    .bottom_mode #newtoolbar:not([customizing]).off-mode {
        margin-inline: 0;
        margin-block: 0 calc(0px - var(--ug-newbar_width)) !important;
    }
    .bottom_mode #newtoolbar .toolbarbutton-1 {
        margin-inline: 2px !important;
    }
    
    
    /*  customizing  */
    
    #newtoolbar[customizing] {
        min-width: 0 !important;
        width: fit-content !important;
    }
    .bottom_mode #newtoolbar[customizing] {
        width: 100vw !important;
    }
    
    #customization-container {
        margin-inline: 0 var(--ug-newbar_width) !important;
    }
    #browser.left_mode_b + #customization-container {
        margin-inline: var(--ug-newbar_width) 0 !important;
    }
    #browser.bottom_mode_b + #customization-container {
        margin-inline: 0 !important;
        margin-bottom: 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
  • v140.0rc1 Konflikt mit dem Skript addonbar_vertical.uc.js von Aris-t2

    • Horstmann
    • 18. Juni 2025 um 23:05
    Zitat von lenny2

    Alle zusätzlichen Toolbars aus Aris-t2 scheinen in v140.0rc1 Probleme zu haben.

    .........

    Alle Toolbars außer addonbar_vertical.uc.js haben Probleme mit der Ausführung einiger eingebauter Firefox-Funktionen.

    Würde mich immer noch interessieren, ob sowas hier die Button Probleme evtl. zumindest teilweise löst, falls es im Nightly überhaupt funktioniert:
    (Sehr grobe Test Datei!).

    JavaScript
    //Toggle newtoolbar 7D_b rechts nav-bar test 14
    
    (function() {
    
        if (location.href !== 'chrome://browser/content/browser.xhtml')
            return;
    
            if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
            	Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
            }
    
            let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
            let icon1 = 'YourFolderIcon.svg';
    
            let ImagePath = ProfilePath + icon1;
    
            let toolbox_new = document.createXULElement('toolbox');
            //toolbox_new.setAttribute('orient','horizontal');
            toolbox_new.setAttribute('id','toolbox_new');
    
            const element = document.getElementById("navigator-toolbox");
            const rect = element.getBoundingClientRect();
            //console.log("Width: " + rect.width + "px");
            //console.log("Height: " + rect.height + "px");
    
            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', 'horizontal');
            tb.setAttribute('orient', 'vertical');
            tb.setAttribute('mode', 'icons');
            tb.setAttribute('context', 'toolbar-context-menu');
            //tb.setAttribute("toolbarname", tb_label);
            //tb.setAttribute("label", tb_label);
    
    	      toolbox_new.appendChild(tb);
    
            //Geht
            document.getElementById('navigator-toolbox').appendChild(toolbox_new);
    
            //Geht
            //document.getElementById('nav-bar').appendChild(toolbox_new);
    
            //geht #2
            document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.height + 'px');
    
            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", newTB );
            function newTB(aEvent, keyEvent=false) {
            if(!keyEvent && aEvent.button != 0) {
                return;
            }
            newtoolbar.classList.toggle("off-mode");
            browser.classList.toggle("off-mode_b");
    
     };
    
    const css =`
    
    :root {
        --ug-newbar_width: 44px;
        --ug-newbar_bg_color: lightblue;
    }
    
    #navigator-toolbox {
        z-index: 444 !important;
    }
    
    /*
    #nav-bar {
        z-index: 4 !important;
    }
    */
    
    #browser:not(.off-mode_b) {
        padding-right: var(--ug-newbar_width) !important;
    }
    #browser {
        transition: padding 0.5s ease !important;
    }
    
    #toolbox_new {
        position: fixed;
        display: flex;
        flex-direction: column;
        bottom: 0;
        /*left: 0;*/
        right: 0;
    }
    
    #newtoolbar {
        display: flex;
        z-index: 4 !important;
        width: var(--ug-newbar_width);
        padding-block: 8px;
        height: calc(100vh - var(--height_newbar));
        background-color: var(--ug-newbar_bg_color) !important;
        box-shadow: -1px 0 grey;
        border-top: 1px solid grey;
        transition: width 0.5s ease, margin 0.5s ease;
    }
    
    #newtoolbar:not([customizing]).off-mode {
        margin-inline: 0 calc(0px - var(--ug-newbar_width));
        box-shadow: none;
    }
    
    #newtoolbar .toolbarbutton-1 {
        margin-block: 2px !important;
        margin-inline: auto !important;
    }
    
    #NewToolbar_button .toolbarbutton-icon {
        list-style-image: url("chrome://browser/skin/sidebars-right.svg") !important;
    }
    
    #newtoolbar[customizing] {
        min-width: 0 !important;
    }
    
    #customization-container {
        margin-inline: 0 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
  • v140.0rc1 Konflikt mit dem Skript addonbar_vertical.uc.js von Aris-t2

    • Horstmann
    • 17. Juni 2025 um 21:50
    Zitat von Speravir

    Ich hab diesen Code (2 Zeilen) jedenfalls schon länger deaktiviert.

    ..........

    Ich bin mir da nicht so sicher. Ich habe Aris öfter auf hiesige Beiträge und Diskussionen hingewiesen und er schien bis dahin nichts davon bemerkt zu haben … Und eben habe ich dasselbe für diese Diskussion gemacht.

    Nur 2 Zeilen? :/
    Aber unabhängig davon, Zusatzleisten sind halt oft etwas empfindlich - und wirklich zickig war ja schon immer der Extensions Button.
    Hiesig war das generelle Thema kurz neu angeschnitten, aber nicht weiter verfolgt worden.

    Danke dafür wieder mal die Frage im relevanten Github aufzuwerfen. :)

  • v140.0rc1 Konflikt mit dem Skript addonbar_vertical.uc.js von Aris-t2

    • Horstmann
    • 17. Juni 2025 um 15:12

    Nur zur Klarstellung: das Problem tritt auch dann auf, wenn der Unified Extensions Button nicht in der zusätzlichen Toolbar sitzt, sondern in der normalen Navbar, so wie es auch aussieht im Screenshot? :/

    Falls ja, würde ich mal probieren, ab Zeile 358 den Code für fix for downloads button on add-on bar rauszunehmen; und dann am besten hier mal reinschauen, oder dort eine neue Issue eröffnen.

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

Unterstütze uns!

Jährlich (2025)

91,4 %

91,4% (594,17 von 650 EUR)

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