Beiträge von Horstmann

Horstmann

Zitat von Mira_Belle

Es ging Horstmann um den Youtube Player im Vollbildmodus,
und da ist der graue Balken nicht vorhanden.
Also so wie es sein soll.

Der graue Balken soll nie zu sehen sein ohne den Leisteninhalt, das ist ein Bug.
Wenn alle anderen Leisten sichtbar sind, soll diese neue Leiste auch da sein, ansonsten komplett verschwinden.

Ich schau nochmal nach; könnte jemand auf Windows/Linux mal das in den CSS Teil packen, und Vollbildmoden testen, bevor ich einen neuen Komplettcode poste?

CSS

#main-window:is([chromehidden~="toolbar"]) #toolbox_new {
    display: none !important;
}

#main-window:is([chromehidden~="toolbar"]) #browser {
    padding: 0 !important;
}

Oder:

CSS

:root:not([customizing]):is([chromehidden~="toolbar"],[sizemode="fullscreen"]) #toolbox_new,
#main-window:is([chromehidden~="toolbar"],[sizemode="fullscreen"]) #toolbox_new {
    display: none !important;
}

:root:not([customizing]):is([chromehidden~="toolbar"],[sizemode="fullscreen"]) #toolbox_new,
#main-window:is([chromehidden~="toolbar"],[sizemode="fullscreen"]) #toolbox_new {
    padding: 0 !important;
}

Horstmann

Zitat von lenny2

Zitat von Horstmann

Dann mal weiter im Text; ein neuer Test.

v143.0.4. Ich habe es durch Starten in der Konsole überprüft.

Mal wieder top Rückmeldung, Danke!

Kurze Frage vorab: welches Betriebssystem benutzt du, und hast du beide der erwähnten Modi ausprobiert?
Bei mir am Mac kann ich weder Windows noch Linux testen, und Vollbild ist OS abhängig.

Zitat

Vollbildmodus ist im Script nur für Fälle wie Youtube Player Vollbildmodus eingetragen (Leiste soll verschwinden).
Für Firefox Fenster Vollbildmodus (Menü > Ansicht > Vollbild ein, oder schräger Doppelpfeil Button) sollte die Leiste angezeigt werden, wenn andere Toolbars auch angezeigt sind ....

Horstmann

Zitat von Mira_Belle

Zitat von Horstmann

Huh? Nicht am Mac...

Nein Windows 10.
Und Leiste ist vorhanden, aber eben grau und abgelegte Buttons sind auch nicht mehr zusehen.
Das mit dem Player muss ich dann noch testen.
Test abgeschlossen, Youtube Player im Vollbildmodus ohne störende Elemente.

Zum Skript, es ist bei einem Neustart des FF sichtbar, immer.
Wäre es nicht schön,
1. es würde sich den letzten Zustand merken
und/oder 2. man könnte eine Zeit definieren und die Leise würde wieder weg scrollen.

Alles anzeigen

Danke für's testen!

Das Graue ist nicht die Leiste, sondern die erzeugte Browserlücke wo die Leiste sein sollte.
Sind denn bei dir alle anderen Toolbars sichtbar in deinem Firefox-Vollbild, Tabs, Adressleiste, und Lesezeichen?
Ist Titelleiste ein oder ausgeblendet?

Es wäre prima dazu einen Screenshot zu sehen!
Könnte OS abhängig sein (bin auf Mac).

Den Anfangszustand kann man im Script wählen, für Position und On/Off; weiss was du meinst, ist aber etwas kompliziert, haben andere Extraleisten glaub auch nicht.
Wegscrollen könnte man einbauen, aber erstmal muss das Ding überhaupt laufen.

Horstmann

Zitat von Mira_Belle

AH, jetzt ja!
Vollbildmodus, da verschwinden die abgelegten "Buttons"!

Huh? Nicht am Mac...
Die Leiste selber ist aber noch sichtbar?

Vollbildmodus ist im Script nur für Fälle wie Youtube Player Vollbildmodus eingetragen (Leiste soll verschwinden); für Firefox Fenster Vollbildmodus sollte eigentlich alles normal sein....

Horstmann

Dann mal weiter im Text; ein neuer Test.

Das Vollbildverhalten ist nur am Mac angestestet.
Das ist kein fertiges Script; nur ein Versuch, einige der in den letzten Wochen/Monaten erwähnten Probleme mit Zusatzleisten neu anzugehen.

Ist evtl. besser einfach auf ein Update von Aris zu warten.

JavaScript

// Use filename starting with 00 !! =>
// 00_extra_toolbars_V3.uc.js
// Extra newtoolbars 8 => 10 / Toggle button on/off  / Custom/browser height used / 143 kompatibel?

// Basiert auf: https://www.camp-firefox.de/forum/thema/137714-seitennavigation-fly-out-menue
// Aris: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/addonbar_vertical.uc.js

// ACHTUNG: Einige Systembuttons lassen sich in zusaetzliche/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/
// Kudos an Mitleser für Vorarbeit, Loesungen und Tips

// Nach Script Aenderungen Neustart mit Start-Cache loeschen => about:support

// Test 3

(function() {

    if (location.href !== 'chrome://browser/content/browser.xhtml')
        return;

// User Einstellungen

        // Eigenes Icon in Profilordner/chrome/icons
        let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
        let IconPath = '/chrome/icons/';
        let Icon_tb = 'flower-satt32.png';
        let ImagePath = ProfilePath + IconPath + Icon_tb;

        let new_tb_icon  = 1;      // 0 Firefox Icon, 1 Eigenes Icon

        let new_tb_loc = 0;        // Position Startzustand: 0 Rechts , 1 Links , 2 Bottom
        let new_tb_off = 0;        // 0 Startzustand On , 1 Startzustand Off

        let new_tb_color = 1;               // Hintergrundfarbe aendern: 0 Off , 1 On
        let new_tb_bg_color = 'lightblue';  // Hintergrundfarbe bei On

        let new_tb_distance = '2px';        // Abstand zw. Buttons, muss px Wert sein, auch bei 0px
        let new_tb_size = '0px';            // Breite / Hoehe Leiste erhoehen, muss px Wert sein, auch bei 0px

        let new_tb_border_color = 'grey';   // Trennlinien Farbe
        let new_tb_border_width = '1px';    // Trennlinien Breite, muss px Wert sein, auch bei 0px

// User Einstellungen Ende

        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');

        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);
        document.getElementById('browser').parentNode.appendChild(toolbox_new);


        // Test JS

        // Alt, nicht 143 kompatibel
    	  // let observer_custom = new MutationObserver(function(mutations) {
  		  // mutations.forEach(function(mutation) {
  		  // try {
  			// if(document.querySelector('#browser').getAttribute('hidden') || document.querySelector('#main-window').getAttribute('customizing')) {
        //         let custom_exists = document.getElementById('customization-container');
        //         let rect = custom_exists.getBoundingClientRect();
        //         document.getElementById('toolbox_new').style.setProperty('--height_newbar_c', rect.height + 'px');
        //    			}
  		  //      } catch(e){}
  		  //    });
  	    //  });
	      //observer_custom.observe(document.querySelector('#main-window'), { attributes: true, attributeFilter: ['customizing'] });
	      //observer_custom.observe(document.querySelector('#main-window'), { attributeFilter: ['customizing'] });

        // Neu, 143 kompatibel ?
        let observer_custom = new MutationObserver(function(mutations) {
          for (let mutation of mutations) {
            try {
              const customContainer = document.getElementById('customization-container');
              if (!customContainer) return;

              const rect = customContainer.getBoundingClientRect();
              document.getElementById('toolbox_new').style.setProperty('--height_newbar_c', rect.height + 'px');
            } catch (e) {
              console.error("Fehler beim Setzen von --height_newbar_c:", e);
            }
          }
        });

        observer_custom.observe(document.querySelector('#main-window'), {
          attributes: true,
          attributeFilter: ['customizing'],
        });

        // Test JS Ende


        let navbar_size = document.getElementById("browser");
        let observer = new ResizeObserver(() => {
        let rect = navbar_size.getBoundingClientRect();
        document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.height + 'px');
        document.getElementById('toolbox_new').style.setProperty('--height_newbar_top', rect.top + 'px');
        });
        observer.observe(navbar_size);

        CustomizableUI.registerArea('newtoolbar', {legacy: true});
        CustomizableUI.registerToolbarNode(ntb);

   //On/off button
   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) { };

    // button function
    document.getElementById('NewToolbar_button').addEventListener('click', event => {
        if (event.button === 0) {
           newtoolbar.classList.toggle("off-mode");
           browser.classList.toggle("off-mode_b");
           }
     });

    // Icon
    if (new_tb_icon === 1) {
         NewToolbar_button.classList.add("icon_mode");
       };

    // Hintergrundfarbe
    if (new_tb_color === 1) {
         newtoolbar.style.backgroundColor = new_tb_bg_color;
       };

    // Positions Startzustand
    if (new_tb_loc === 1) {
         toolbox_new.classList.add("left_mode");
         browser.classList.add("left_mode_b");
       }
    else if (new_tb_loc === 2) {
         toolbox_new.classList.add("bottom_mode");
         browser.classList.add("bottom_mode_b");
       };

    // On/off Startzustand
    if (new_tb_off === 1) {
        newtoolbar.classList.add("off-mode");
        browser.classList.add("off-mode_b");
      };

const css =`

:root {
    --ug-newbar_basewidth: 36px;
    --ug-newbar_width: calc(var(--ug-newbar_basewidth) + 2*var(--ug-newbar_add_width));
    --ug-newbar_borderwidth: ${new_tb_border_width};             /* Breite / Hoehe Trennlinie */
    --ug-newbar_add_width: ${new_tb_size};                       /* Breite / Hoehe erhoehen */
    --ug-newbar_btnspace: ${new_tb_distance};                    /* Abstand zw. Buttons */
}

/*  Trennlinie  */
#newtoolbar {
   --trenn-color: ${new_tb_border_color};
}
/*  Button Icon  */
#NewToolbar_button .toolbarbutton-icon {
    list-style-image: url("chrome://browser/skin/sidebars-right.svg");
}
#NewToolbar_button.icon_mode .toolbarbutton-icon {
    list-style-image: url("${ImagePath}");
}

/*--  Basis / Right  --*/

#browser {
    transition: padding 0.25s ease !important;
}

#browser:not(.off-mode_b) {
    padding-right: calc(var(--ug-newbar_width) + var(--ug-newbar_borderwidth)) !important;
}

#toolbox_new {
    position: fixed;
    z-index: 4 !important;
    display: flex;
    width: fit-content;
    top: var(--height_newbar_top);
    right: 0;
}
#newtoolbar {
    display: flex;
    flex-direction: column;
    min-width: fit-content !important;
    width: var(--ug-newbar_width);
    min-height: fit-content !important;
    height: var(--height_newbar) !important;
    padding-block: 8px;
    box-shadow: calc(0px - var(--ug-newbar_borderwidth)) 0 var(--trenn-color);
    transition: width 0.25s ease, margin 0.25s ease /*,height 0.5s ease*/ ;
    align-items: center !important;
}
#newtoolbar:not([customizing]).off-mode {
    margin-inline: 0 calc(0px - var(--ug-newbar_width));
    box-shadow: none !important;
}

#newtoolbar > :is(.toolbarbutton-1, toolbaritem),
#newtoolbar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
    margin-block: var(--ug-newbar_btnspace) !important;
}

/*--  Left  --*/

#browser:not(.off-mode_b).left_mode_b {
    padding-inline: calc(var(--ug-newbar_width) + var(--ug-newbar_borderwidth)) 0 !important;
}
#toolbox_new.left_mode {
    left: 0;
}
.left_mode #newtoolbar:not([customizing]) {
    box-shadow: var(--ug-newbar_borderwidth) 0 var(--trenn-color);
}
.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: calc(var(--ug-newbar_width) + var(--ug-newbar_borderwidth)) !important;
}

#toolbox_new.bottom_mode {
    top: unset;
    bottom: 0;

    flex-direction: row;
    width: fit-content;
}
.bottom_mode #newtoolbar:not([customizing]) {
    flex-direction: row !important;
    height: var(--ug-newbar_width) !important;
    width: 100vw;
    padding-block: 0;
    padding-inline: 8px;
    box-shadow: 0 calc(0px - var(--ug-newbar_borderwidth)) var(--trenn-color);
    border: none;
}
.bottom_mode #newtoolbar:not([customizing]).off-mode {
    margin-inline: 0;
    margin-block: 0 calc(0px - var(--ug-newbar_width)) !important;
}

#toolbox_new.bottom_mode #newtoolbar > :is(.toolbarbutton-1, toolbaritem),
#toolbox_new.bottom_mode #newtoolbar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
    margin-block: var(--toolbarbutton-outer-padding) !important;
    margin-inline: var(--ug-newbar_btnspace) !important;
}

/*--  Fullscreen Test Mac  --*/

:root[inDOMFullscreen] #toolbox_new {
    display: none !important;
}

:root[inDOMFullscreen] #browser {
    padding: 0 !important;
}

/*--  customizing  --*/

:root[customizing] #toolbox_new {
    bottom: 0 !important;
    top: unset !important;
    right: 0 !important;
    left: unset !important;
}

#newtoolbar[customizing] {
    height: var(--height_newbar_c) !important;
}

#customization-container {
    margin-right: var(--ug-newbar_width) !important;
}

/*--  Testfarben  --*/

#newtoolbar {
    border-block: 8px solid orange;
}

/*
#newtoolbar > :is(.toolbarbutton-1, toolbaritem),
#newtoolbar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
    outline: 1px solid red;
    outline-offset: -1px;
}
*/
        `;

        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 2002Andreas

Ich habe alle weiteren Beiträge mal verschoben nach:

Beitrag

Eigene Zusatzleisten ab ff 143+

Ich werf das mal in den Raum, locker aus dem Handgelenk, falls es jemand testen möchte.

Das wäre ein evtl. funktionierendes Script für eine zusätzliche Toolbar, manuell einstellbar für vertikal links/ rechts oder unten.
Es basiert auf dem was wir hier gebastelt hatten, also eine Zusatzleiste die nicht an der navigator-toolbox hängt (diverse Gründe).

Wobei die Leiste in diesem Fall fixiert ist, nicht ausklappt bei hover, und nicht schwebt - d.h. der Browserinhalt sollte sich anpassen wenn die…

Horstmann

25. September 2025 um 20:17

Dankeschön!

Zitat von Mitleser

Auf besonderen Wunsch von lenny2 gibt es ein Update von RE: Seitennavigation - Fly Out Menü

Zitat von lenny2

Mitleser Danke

Horstmann

Zitat von 2002Andreas

Zitat von Horstmann

Dat kann der Horstmann nicht ändern, nur der Threadersteller

Wenn ich wie vorgeschlagen ab Beitrag 17 abtrenne, dann wärst du das.
Ihr müsst euch also einig werden, ob ich das so machen soll.

Mitleser hat schon recht.

Könntest du bitte den Threadtitel "Eigene Zusatzleisten ab ff 143+" machen, falls sich das sinnvoll anhört?

Horstmann

Zitat von Mira_Belle

Horstmann Könntest Du mal ein Gif oder Video mit dem 115esr machen.
Möchte ungern einfach so ein Skript installieren, wenn es doch eh nicht funktioniert.

Hier Bilder aus 115esr, wie es aussehen soll.

Das Script funktioniert in 143 (und tut nicht weh), bis eben auf die Höhe und Position der Zusatzleiste im Anpassenfenster (sieht man sofort).

Das alte Script aus #17 sollte übrigens generell auch in 143 klappen, ich hätte aber lieber die letzte Version am laufen.
In 143 habe ich auch diverse Änderungen versucht, aber die Variable --height_newbar_c wird einfach nicht gesetzt.

Horstmann

Die Frage von pupil hat mich zurück zu einem alten Problem gebracht: die Grösse des Anpassenfensters dynamisch auszulesen, sobald es geöffnet wird, und dann eben diese Grösse zu nehmen und in eine benutzbare Variable für die Höhe der Zusatzleiste zu packen.

Vor dem Öffnen ist das Fenster hidden; das Maß wäre aber sehr praktisch zu haben, weil man dann die #browser Grösse als Standardreferenz nehmen kann, was Vorteile hat.
Wenn das Anpassenfenster geöffnet ist, ist der #browser hidden, kann also nicht mehr ausgelesen werden...

Etwas Stöbern bei Aris hat eine Lösung gebracht via MutationObserver - für 115esr, geht aber nicht in 143+.

Hätte jemand einen Idee, was in Zeile 60 - 72 nicht mehr funktioniert in aktuellem Firefox, oder für eine Alternative?
Die Attribute gibt's noch; hoffe die Fragen machen Sinn.

JavaScript

// Use filename starting with 00 !! =>
// 00_extra_toolbars_V3.uc.js
// Extra newtoolbars 8 => 10 / Toggle button on/off  / Custom/browser height used

// Basiert auf: https://www.camp-firefox.de/forum/thema/137714-seitennavigation-fly-out-menue
// Aris: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/addonbar_vertical.uc.js

// ACHTUNG: Einige Systembuttons lassen sich in zusaetzliche/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/
// Kudos an Mitleser für Vorarbeit, Loesungen und Tips

// Test 2 

(function() {

    if (location.href !== 'chrome://browser/content/browser.xhtml')
        return;

// User Einstellungen

        // Eigenes Icon in Profilordner/chrome/icons
        let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
        let IconPath = '/chrome/icons/';
        let Icon_tb = 'flower-satt32.png';
        let ImagePath = ProfilePath + IconPath + Icon_tb;

        let new_tb_icon  = 0;      // 0 Firefox Icon, 1 Eigenes Icon

        let new_tb_loc = 0;        // Position Startzustand: 0 Rechts , 1 Links , 2 Bottom
        let new_tb_off = 0;        // 0 Startzustand On , 1 Startzustand Off

        let new_tb_color = 1;               // Hintergrundfarbe aendern: 0 Off , 1 On
        let new_tb_bg_color = 'lightblue';  // Hintergrundfarbe bei On

        let new_tb_distance = '2px';        // Abstand zw. Buttons, muss px Wert sein, auch bei 0px
        let new_tb_size = '0px';            // Breite / Hoehe Leiste erhoehen, muss px Wert sein, auch bei 0px

        let new_tb_border_color = 'grey';   // Trennlinien Farbe
        let new_tb_border_width = '1px';    // Trennlinien Breite, muss px Wert sein, auch bei 0px

// User Einstellungen Ende

        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');

        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);
        document.getElementById('browser').parentNode.appendChild(toolbox_new);

    	  let observer_custom = new MutationObserver(function(mutations) {
  		  mutations.forEach(function(mutation) {
  		  try {
  			if(document.querySelector('#browser').getAttribute('hidden') || document.querySelector('#main-window').getAttribute('customizing')) {
                let custom_exists = document.getElementById('customization-container');
                let rect = custom_exists.getBoundingClientRect();
                document.getElementById('toolbox_new').style.setProperty('--height_newbar_c', rect.height + 'px');
           			}
  		       } catch(e){}
  		     });
  	     });
	      //observer_custom.observe(document.querySelector('#main-window'), { attributes: true, attributeFilter: ['customizing'] });
	      observer_custom.observe(document.querySelector('#main-window'), { attributeFilter: ['customizing'] });

        let navbar_size = document.getElementById("browser");
        let observer = new ResizeObserver(() => {
        let rect = navbar_size.getBoundingClientRect();
        document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.height + 'px');
        document.getElementById('toolbox_new').style.setProperty('--height_newbar_top', rect.top + 'px');
        });
        observer.observe(navbar_size);

        CustomizableUI.registerArea('newtoolbar', {legacy: true});
        CustomizableUI.registerToolbarNode(ntb);

   //On/off button
   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) { };

    // button function
    document.getElementById('NewToolbar_button').addEventListener('click', event => {
        if (event.button === 0) {
           newtoolbar.classList.toggle("off-mode");
           browser.classList.toggle("off-mode_b");
           }
     });

    // Icon
    if (new_tb_icon === 1) {
         NewToolbar_button.classList.add("icon_mode");
       };

    // Hintergrundfarbe
    if (new_tb_color === 1) {
         newtoolbar.style.backgroundColor = new_tb_bg_color;
       };

    // Positions Startzustand
    if (new_tb_loc === 1) {
         toolbox_new.classList.add("left_mode");
         browser.classList.add("left_mode_b");
       }
    else if (new_tb_loc === 2) {
         toolbox_new.classList.add("bottom_mode");
         browser.classList.add("bottom_mode_b");
       };

    // On/off Startzustand
    if (new_tb_off === 1) {
        newtoolbar.classList.add("off-mode");
        browser.classList.add("off-mode_b");
      };

const css =`

:root {
    --ug-newbar_basewidth: 36px;
    --ug-newbar_width: calc(var(--ug-newbar_basewidth) + 2*var(--ug-newbar_add_width));
    --ug-newbar_borderwidth: ${new_tb_border_width};             /* Breite / Hoehe Trennlinie */
    --ug-newbar_add_width: ${new_tb_size};                       /* Breite / Hoehe erhoehen */
    --ug-newbar_btnspace: ${new_tb_distance};                    /* Abstand zw. Buttons */
}

/*  Trennlinie  */
#newtoolbar {
   --trenn-color: ${new_tb_border_color};
}
/*  Button Icon  */
#NewToolbar_button .toolbarbutton-icon {
    list-style-image: url("chrome://browser/skin/sidebars-right.svg");
}
#NewToolbar_button.icon_mode .toolbarbutton-icon {
    list-style-image: url("${ImagePath}");
}

/*--  Basis / Right  --*/

#browser {
    transition: padding 0.25s ease !important;
}

#browser:not(.off-mode_b) {
    padding-right: calc(var(--ug-newbar_width) + var(--ug-newbar_borderwidth)) !important;
}

#toolbox_new {
    position: fixed;
    z-index: 4 !important;
    display: flex;
    width: fit-content;
    top: var(--height_newbar_top);
    right: 0;
}
#newtoolbar {
    display: flex;
    flex-direction: column;
    min-width: fit-content !important;
    width: var(--ug-newbar_width);
    min-height: fit-content !important;
    height: var(--height_newbar) !important;
    padding-block: 8px;
    box-shadow: calc(0px - var(--ug-newbar_borderwidth)) 0 var(--trenn-color);
    transition: width 0.25s ease, margin 0.25s ease /*,height 0.5s ease*/ ;
    align-items: center !important;
}
#newtoolbar:not([customizing]).off-mode {
    margin-inline: 0 calc(0px - var(--ug-newbar_width));
    box-shadow: none !important;
}

#newtoolbar > :is(.toolbarbutton-1, toolbaritem),
#newtoolbar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
    margin-block: var(--ug-newbar_btnspace) !important;
}

/*--  Left  --*/

#browser:not(.off-mode_b).left_mode_b {
    padding-inline: calc(var(--ug-newbar_width) + var(--ug-newbar_borderwidth)) 0 !important;
}
#toolbox_new.left_mode {
    left: 0;
}
.left_mode #newtoolbar:not([customizing]) {
    box-shadow: var(--ug-newbar_borderwidth) 0 var(--trenn-color);
}
.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: calc(var(--ug-newbar_width) + var(--ug-newbar_borderwidth)) !important;
}

#toolbox_new.bottom_mode {
    top: unset;
    bottom: 0;

    flex-direction: row;
    width: fit-content;
}
.bottom_mode #newtoolbar:not([customizing]) {
    flex-direction: row !important;
    height: var(--ug-newbar_width) !important;
    width: 100vw;
    padding-block: 0;
    padding-inline: 8px;
    box-shadow: 0 calc(0px - var(--ug-newbar_borderwidth)) var(--trenn-color);
    border: none;
}
.bottom_mode #newtoolbar:not([customizing]).off-mode {
    margin-inline: 0;
    margin-block: 0 calc(0px - var(--ug-newbar_width)) !important;
}

#toolbox_new.bottom_mode #newtoolbar > :is(.toolbarbutton-1, toolbaritem),
#toolbox_new.bottom_mode #newtoolbar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
    margin-block: var(--toolbarbutton-outer-padding) !important;
    margin-inline: var(--ug-newbar_btnspace) !important;
}

/*--  Fullscreen Test Mac  --*/

/*full-screen-api.macos-native-full-screen*/
/*
#main-window[sizemode="fullscreen"] #toolbox_new {
    display: none !important;
}
*/

:root[inDOMFullscreen] #toolbox_new {
    display: none !important;
}

:root[inDOMFullscreen] #browser {
    padding: 0 !important;
}

/*--  customizing  --*/

:root[customizing] #toolbox_new {
    bottom: 0 !important;
    right: 0 !important;
    left: unset !important;
}

#newtoolbar[customizing] {
    height: var(--height_newbar_c) !important;
}

#customization-container {
    margin-right: var(--ug-newbar_width) !important;
}

/*--  Testfarben  --*/

#newtoolbar {
    border-block: 8px solid orange;
}

/*
#newtoolbar > :is(.toolbarbutton-1, toolbaritem),
#newtoolbar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
    outline: 1px solid red;
    outline-offset: -1px;
}
*/
        `;

        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

Yup.

Horstmann

Zitat von pupil

Mit diesem Zusatz wird der im CSS-Teil angesprochene obere rote Rand der Tab-Leiste durchgehend angezeigt. Der Rest wie gehabt.

Screenshots wären prima.

CSS

#TabsToolbar {
    z-index: 12 !important;
    background-color: var(--toolbar-bgcolor) !important;
}

Der Code aus #17 liesse sich auch umschreiben, aber der Anwendungsfall ist sehr speziell.

Horstmann

Zitat von Horstmann
Zitat von pupil
JavaScript
JS Code
#1 könnte evtl. auch die Tableiste unter den Browserinhalt setzen, was nochmal was anderes ist.

Solange die Zusatzleiste nicht komplett voll ist, kann man in deinem JS, im CSS Abschnitt, als visuellen Fix sowas probieren:

CSS

#TabsToolbar {
    z-index: 12 !important;
}

Horstmann

Zitat von pupil
JavaScript
JS Code

Zitat von milupo
Ich hatte vor langer Zeit mal ein kurzes Skript für die Tableiste ganz unten getestet. Da war in der Zeile mit navigator-toolbox (im vorstehenden Beitrag Zeile 8 ) doppeltes parentNode. Das wäre oben:
JavaScript
document.getElementById("navigator-toolbox").parentNode.parentNode.insertBefore( vbox, null);

Also, nur mal so gelesen und kurz getestet, und ohne ins Detail zu gehen - beide Codes scheinen die Tableiste ausserhalb der navigator-toolbox zu platzieren, #1 zumindest in aktuellen, #2 auch in alten Fx Versionen.
#1 könnte evtl. auch die Tableiste unter den Browserinhalt setzen, was nochmal was anderes ist.

Nix gut, so der Fachbegriff.

Kann in meinem Script und zusammen mit vermutlich vielen anderen nicht funktionieren.
In diesem Fall wird die Höhe der navigator-toolbox gelesen - was nicht drin ist wird nicht berücksichtigt.
Könnte man anpassen, aber wie gesagt sollte das via einem besseren Code für Tabs unten gelöst werden, imho.

Für Tabs unten gibt es hier im Forum ein Sticky, und wie so oft auch Lösungen bei MOG (tabs bottom).

Horstmann

Zitat von pupil

Ich habe das Script aus #17 ausprobiert. Finde ich gut. Hat jedoch ein kleines Manko. Die Tab-Leiste ist bei mir unten. Wenn die Leiste links ist, kein Problem. Ist sie jedoch auf der rechten Seite, wird die Tab-Leiste am rechten Rand verdeckt. Kann das ev. angepasst werden.

Das hängt davon ab, wie du die Tableiste nach unten gesetzt hast, den Code dafür müsste man sehen.
Und Screenshots helfen auch.

Mein Verdacht wäre, dass du evtl. ein altes CSS/JS benutzt, das die Tableiste auf position: fixed o.ä. setzt; das kann man hier im Prinzip anpassen, aber man sollte einen aktuelleren Code für den Zweck benutzen, falls das Obige zutrifft.

Horstmann

Zitat von Boersenfeger

Schließe mich an....

Zitat von Mira_Belle

Nachträglich noch alles Gute!

Zitat von BarbaraZ-

Auch von mir noch nachträglich alles gute.

Dankeschön!!!

Horstmann

Zitat von milupo

Hallo Horstmann, noch alles Gute zum Geburtstag! Habe gerade erst gesehen, dass du heute Geburtstag hast.

Zitat von Sören Hentzschel

Nachträglich alles Gute!

Vielen Dank!!!

Horstmann

Zitat von Mitleser

2002Andreas , in der Praxis ziehe ich oft Links von der Leiste ins Dropdown und wieder zurück, einfach weil ich das Lesezeichen für einen bestimmten Zeitraum häufiger/seltener benötige. Auf Linux behält das Lesezeichen mit definiertem Text nur sein Icon mit .bookmark-item[label$=".txt"] :is(img, image), jedoch nicht mit .bookmark-item[label$=".txt"] > img. Wie sich das in Windows verhält kann ich leider nicht testen.

Ich hab mir das mal in Fx 143 (! ), angeschaut.

Meine Vermutung, basierend darauf, es lässt sich ein Icon in der Lesezeichenleiste und im Popup zwar mit der Variable --bookmark-item-icon (ist ein --menuitem-icon) überschreiben, und auch Page Icons via content, die Leiste benutzt aber nach wie vor XUL image, und nicht Html img wie im Popup, s. auch Screenshots.

Daher braucht man beides image + img um Leiste und Popup abzudecken, ausser man benutzt --bookmark-item-icon, was aber wohl einen unpraktischen absoluten Dateipfad benötigt.

Soweit meine Theorie.

Horstmann

Zitat von .DeJaVu

Und ja, es wird im Dropdown der Lesezeichenleiste richtig angezeigt, aber nicht in der Sidenbar und nicht als Webseite
chrome://browser/content/places/bookmarksSidebar.xhtml
Ich vergesse nur immer, wie ich die Sidebar debuggen kann.

Schau mal hier nach, Mitleser hat da Einiges zusammengestellt.

Horstmann

Zitat von .DeJaVu
Code
.bookmark-item[label$=".txt"] > img
Ist aber nichts Neues im Forum, das hat Andreas jetzt so oft korrigiert.

Yupp, das kommt ursprünglich aber aus der oben verlinkten Thread, 2te Seite, wenn du die mal durchlesen willst.

Horstmann

Zitat von harff182

Zitat von Horstmann

Das wäre dann nur für die Icons im Popup aus deinem Screenshot.

Das Popup ist aus der Lesezeichenleiste, nicht dem Menü...

Nicht ganz klar, aber ich hab einen Fehler gemacht, oben jetzt evtl. korrigiert.

Beiträge von Horstmann

Eigene Zusatzleisten ab ff 143+

Eigene Zusatzleisten ab ff 143+

Eigene Zusatzleisten ab ff 143+

Eigene Zusatzleisten ab ff 143+

Eigene Zusatzleisten ab ff 143+

Seitennavigation - Fly Out Menü

Eigene Zusatzleisten ab ff 143+

Eigene Zusatzleisten ab ff 143+

Eigene Zusatzleisten ab ff 143+

Eigene Zusatzleisten ab ff 143+

Eigene Zusatzleisten ab ff 143+

Eigene Zusatzleisten ab ff 143+

Eigene Zusatzleisten ab ff 143+

Eigene Zusatzleisten ab ff 143+

Eigene Zusatzleisten ab ff 143+

Der Glückwunsch-Thread

Der Glückwunsch-Thread

"visibility: hidden" ohne Funktion

"visibility: hidden" ohne Funktion

"visibility: hidden" ohne Funktion

"visibility: hidden" ohne Funktion