Beiträge von Horstmann

Horstmann

Zitat von Mira_Belle

Zitat von Horstmann

Themes Kompatibiltaet könnte sich mal jemand anschauen der sich auskennt mit sowas, betr. der HGfarbe.

In einem anderen Toolbarskript habe ich dies verwendet:
Definitiv sind da die Selektoren zu bearbeiten!
(Wenn ich jenes Skript verwende, wird der Toolbarhintergrund dynamisch dem Theme angepasst)

Danke, ich kenne den Thread und die Codes, aber nach dem Testen von ein paar Dutzend Themes passen nur die wenigsten sauber, und müssten individuell angepasst werde, soweit ich das überblicke.

Viele Themes scheinen nur für den (alten) Basis Fx Toolbar Setup gebaut zu sein, ohne vertikale, untere oder überhaupt Zusatz-Elemente zu berücksichtigen, und haben oft eigene Plazierungen für HG-Bilder.

Wo's klappt ist es hübsch (Screens aus 115esr) , aber den Code den ich habe kann man nicht für alle benutzen.
Kenn mich aber auch nicht aus, wie gesagt.

Zitat von lenny2

V5. Separators werden sehr kurz angezeigt, 5-7px, und ich konnte dies nicht ändern. Vorrang hat derzeit V4.
Übrigens, die Methode zum Hinzufügen von Separators und Spaces aus Beitrag Nr. 13 funktioniert in Firefox v144.0rc1. Dabei ist kein Aris-Skript oder ein anderes Skript erforderlich.

Offengestanden werde ich den Code dazu später rausnehmen, das ist wohl besser in der gelinkten Thread aufgehoben.
Hier wäre noch ein Test für diese Leisten: sepa no border.rtf.zip

Horstmann

Zitat von lenny2
Mit diesem Code hat es in der Toolbar und im Einstellungsfenster geklappt.
CSS
#newtoolbar toolbarseparator {
    outline: 1px solid yellow !important;
    outline-offset: -3px !important;
    padding-left: 34px !important;
}

Die Border war wohl das Problem...
Ich hab das mal in dieser Version geändert, sollte aber besser gehen, und ist vermutlich trotzdem ein separates Thema, wenn's in anderen vertikalen auch nicht klappt.

A propos diese Version, hier ein paar Detaillösungen, und ein etwas gewagter Versuch die On/Off Zustände zu speichern.
Das Ganze sollte sich bei let new_tb_off = 2; etwa wie die Sidebar verhalten; bei Neustart wird der letzte Zustand gespeichert, und auch für neue Fenster während einer Session übernommen (sollte aber auch viel besser gehen, hab mich da etwas verkünstelt).

Themes Kompatibiltaet könnte sich mal jemand anschauen der sich auskennt mit sowas, betr. der HGfarbe.
Und ein Icon gibt's auch noch!

JavaScript

// Use filename starting with 00 !! =>
// 00_extra_toolbars_V5.uc.js

// 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
// Forum: https://www.camp-firefox.de/forum/thema/139927-eigene-zusatzleisten-ab-ff-143/

// 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 fuer Vorarbeit, Loesungen und Tips
// ToDo: Themes Kompatibiltaet

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

// Version V5 / Test 5


(function() {

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

// User Einstellungen

        // Eigenes Icon in Profilordner/chrome/icons Ordner
        let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
        let IconPath = '/chrome/icons/';
        let Icon_tb = 'toolbar_n3.svg';
        let ImagePath = ProfilePath + IconPath + Icon_tb;

        // 0 Firefox Icon, 1 eigenes Icon benutzen
        let new_tb_icon  = 0;

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

        // 0 Startzustand Leiste On , 1 Startzustand Off, 2 Startzustand letzter Zustand gespeichert experimentell
        let new_tb_off = 2;

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

        // Abstand zw. Buttons, muss px Wert sein, auch bei 0px
        let new_tb_distance = '2px';

        // Breite / Hoehe Leiste erhoehen, muss px Wert sein, auch bei 0px
        let new_tb_size = '0px';

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

// 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) {
          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'],
        });

        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");
           NewToolbar_button.classList.toggle("off-mode_btn");
           let ntb_off = newtoolbar.classList.contains("off-mode");
           Services.prefs.setBoolPref("userChrome.newtoolbar.hidden", ntb_off);
           }
       });

    // 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");
         NewToolbar_button.classList.add("left_mode_btn");
       }
    else if (new_tb_loc === 2) {
         toolbox_new.classList.add("bottom_mode");
         browser.classList.add("bottom_mode_b");
         NewToolbar_button.classList.add("bottom_mode_btn");
       };

    // On/off Startzustand

    if (new_tb_off === 0) {
        Services.prefs.setBoolPref('userChrome.newtoolbar.hidden', false );
      }
    else if (new_tb_off === 1) {
        newtoolbar.classList.add("off-mode");
        browser.classList.add("off-mode_b");
        NewToolbar_button.classList.add("off-mode_btn");
        Services.prefs.setBoolPref('userChrome.newtoolbar.hidden', true );
      }
    else if (new_tb_off === 2) {
        try {
          if (Services.prefs.getBoolPref("userChrome.newtoolbar.hidden")) {
              newtoolbar.classList.add("off-mode");
              browser.classList.add("off-mode_b");
              NewToolbar_button.classList.add("off-mode_btn");
          }
      } catch (e) {}
    };


const css =`

:root {
    /*--ug-newbar_basewidth: 32px;*/
    --ug-newbar_basewidth: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
    --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 */
}

/*- Buttons kleiner -*/
#newtoolbar  {
  	/*--toolbarbutton-inner-padding: 6px !important;*/
	 	--toolbarbutton-outer-padding: 0px !important;
}

/*-  Trennlinie  -*/
#newtoolbar {
   --trenn-color: ${new_tb_border_color};
}

/*-  Button  -*/
#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}");
}
#NewToolbar_button.off-mode_btn:not(:hover, :active) .toolbarbutton-icon {
    opacity: 0.45;
}
#NewToolbar_button.left_mode_btn .toolbarbutton-icon {
    transform: rotate(180deg);
}
#NewToolbar_button.bottom_mode_btn .toolbarbutton-icon {
    transform: rotate(90deg);
}

/*--  Basis / Right  --*/

/*-  Farben Themes, unfinished  -*/
:root[lwtheme]:not([customizing]) #newtoolbar {
    background-color: var(--lwt-accent-color, var(--toolbox-bgcolor)) !important;
}

#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: var(--ug-newbar_basewidth) !important;
    width: var(--ug-newbar_width);
    min-height: var(--ug-newbar_basewidth) !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 {
    min-width: 0px !important;
    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;
    /*justify-content: center !important;*/    /* Inhalt mittig, optional */
}
.bottom_mode #newtoolbar:not([customizing]).off-mode {
    min-height: 0px !important;
    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 unfinished?  --*/

/* Mac / nur Video Fullscreen */
#main-window[inDOMFullscreen]:not([customizing]) #toolbox_new {
    visibility: collapse !important;
}
#main-window[inDOMFullscreen]:not([customizing]) #browser {
    padding: 0 !important;
}

/* Windows Fullscreen Video + Normal */
@media (-moz-platform: windows) {
#main-window[inFullscreen]:not([customizing]) #toolbox_new {
    visibility: collapse !important;
}
#main-window[inFullscreen]:not([customizing]) #browser {
    padding: 0 !important;
}
}

/*--  customizing  --*/

:root[customizing] #toolbox_new {
    top: unset !important;
    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;
}

/*- Extra Test: Anpassung fuer Restore 'Space & Separator' items script for Firefox 102+ by Aris -*/

#newtoolbar {
    --ug-sep_distance: 8px;     /* Distanz */
    --ug-sep_width: 4px;        /* schmaler */
}
#newtoolbar toolbarseparator {
    margin-block: var(--ug-sep_distance) !important;
    margin-inline: 0px !important;
    width: calc(var(--ug-newbar_width) - var(--ug-sep_width)) !important;
    height: 1px !important;
    appearance: none !important;
    border-inline: none !important;
		border-top: 1px solid rgba(15,17,38, 0.5) !important;
		border-bottom: 1px solid rgba(255,255,255, 0.3) !important;
}
.bottom_mode #newtoolbar:not([customizing]) toolbarseparator {
    margin-block: 0px !important;
    margin-inline: var(--ug-sep_distance) !important;
    width: initial !important;
    height: calc(var(--ug-newbar_width) - var(--ug-sep_width)) !important;
    border-block: none !important;
    border-left: 1px solid rgba(15,17,38, 0.5) !important;
    border-right: 1px solid rgba(255,255,255, 0.3) !important;
}
#newtoolbar toolbarspacer {
    min-width: 0px !important;
    width: 18px !important;
    height: 18px !important;
}
#newtoolbar[customizing] :is(toolbarseparator, toolbarspacer) {
    margin-block: 8px !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

toolbar_n3.svg.zip

Horstmann

Zitat von Mira_Belle

Du definierst im JS Variablen! Und warum wandelst Du sie dann im CSS um?
Und an so einigen Stellen im JS habe ich mich auch gefragt, warum?
Ich vermute, Du kommst mit CSS besser klar.

Gefühlt hatten allein wir beide diese Diskussion schon 100x.

Die paar JS Variablen sind in dem Script einfacher zu setzen gewesen (ohne zB endlos Klassen zu adden), und teils nur da um die User Anpassungen nach oben zu packen, für einfachere Bedienbarkeit.

JS Variablen dann in CSS Variablen zu packen macht für mich die Bearbeitung und das Troubleshooting einfacher, auch weil ${...} Variablen direkt im CSS seeeehr hartnäckig sein können.
Das mit der Weiche schau ich mir aber nochmal an; ist mir schon aufgefallen, hat mir aber bisher nicht zugesagt.

Und ja, ich komme mit CSS sehr viel besser klar als mit JS.

Horstmann

Zitat von lenny2

In der vertikalen Toolbar wird der Separator jedoch nicht angezeigt. Ähnliches Verhalten bei anderen Separator-Skripten: In horizontalen Toolbar sind die Separator sichtbar, in vertikalen Toolbar hingegen nicht.

Ahh, das ist gut zu wissen - und wäre ein Thema für eine eigene Thread.

Aber du könntest das mal probieren, CSS irgendwo reinschreiben (geht auch im Script CSS Teil), und im Anpassenfenster einen Separator in meine vertikale Leiste ziehen:

CSS

#newtoolbar toolbarseparator {
    outline: 1px solid red !important;
    outline-offset: 12px !important;  
}

Und schauen was passiert.

Ausserdem, grob geraten: in den Separatorscripts evtl. probieren toolbar[orient="vertical"] mit toolbar[vertical] zu ersetzen, oder als Test für vertikale Toolbars kurz nur toolbar an diesen Stellen zu benutzen.

Horstmann

Zitat von Boersenfeger

Mal reingegrätscht: Hier wird derzeit nur eine vertikale Zusatzleiste besprochen, die ich nicht nutzen möchte; Ich präferiere in Nightly und 143.0.4 eine horizontale Zusatzleiste UNTEN.
Wenn jemand daran interessiert ist, bitte mal melden, dann würde ich den verwendeten Code einstellen.

Gibt doch bestimmt schon Beiträge dazu, evtl. einfach dazu verlinken?
Ich erinnere mich vage, dass wir deine Leiste schon ab und zu diskutiert hatten.
Nur um Codeblähung zu vermeiden.

Wie erwähnt, hier gibt es auch eine "Bottom" Variante, kannst ja mal testen wenn du möchtest, ist nicht kompliziert.

Zitat von FuchsFan

Gemacht, keine Probleme mehr erkannt, Leiste wird bei Vollbild ausgeblendet.

Zitat von lenny2

Zitat von Horstmann

Für lenny2 einen Zusatz für das Aris Script , wenn es das denn ist.

In V4 werden jetzt Space aus diesem oder einem ähnlichen Skript angezeigt, Separator jedoch nicht.
Insgesamt gibt es keine Probleme mit dem V4 und es funktioniert ordnungsgemäß
Nicht mehr relevant, dieser Grafikfehler ist in V4 nicht mehr vorhanden.

Danke mal wieder!

Kurz zu den Separatoren etc., es gibt verschiedene Scripts dazu, meist älter, und die müssten erst mal in aktuellem Firefox durchgetestet werden ob sie generell noch klappen.
Im Zusammenhang mit diesen Leisten wäre der Testaufwand multipliziert, weiter komm ich da leider nicht.

Mira_Belle : Die Dinger sind als generell feste Leisten mit Versteckenoption pro Fenster konzipiert; Wegscrollen nach einiger Zeit oder Hovertricks sind leider nicht vorgesehen.

Ich habe einen Button als Test der die Position umschaltet, was man speichern könnte, ist aber auch eher ein Gimmick in diesem Fall.

Horstmann

Erstmal danke an alle Tester!

Hier eine neue Testversion:

Für lenny2 einen Zusatz für das Aris Script , wenn es das denn ist.
Auf alle Wünsche kann ich nicht direkt eingehen, ist aber alles notiert.

Für die Vollbildgeschichte habe ich mal etwas reingebastelt, das evtl. als Basis funktioniert für Windows.

Fullscreen ist aber sehr OS abhängig, und ich bin am Mac.
Falls das so nicht funktioniert, müsste sich das ein geneigter Windows und evtl. Linux Coder der Sache annehmen.
Eine Menge JS und CSS Codes benutzen Provisorien für genau das, nur kann ich die halt nicht testen.

JavaScript

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

// 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 4

(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 = off

        //let new_tb_button_size = '0px';     // Button Groesse, normal 'inherit', kleiner '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) {
          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'],
        });

        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: 30px;
    --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 */
}

/* Buttons kleiner */
#newtoolbar  {
  	/*--toolbarbutton-inner-padding: 6px !important;*/
	 	--toolbarbutton-outer-padding: 0px !important;
}

/* Anpassung fuer Restore 'Space & Separator' items script for Firefox 102+ by Aris */

#newtoolbar {
    --ug-sep_distance: 2px;     /* Distanz */
    --ug-sep_width: 4px;        /* schmaler */
}

#newtoolbar toolbarseparator {
    margin-block: var(--ug-sep_distance) !important;
    margin-inline: 0px !important;
    width: calc(var(--ug-newbar_width) - var(--ug-sep_width)) !important;
}

.bottom_mode #newtoolbar:not([customizing]) toolbarseparator {
    margin-block: 0px !important;
    margin-inline: var(--ug-sep_distance) !important;
    width: initial !important;
    height: calc(var(--ug-newbar_width) - var(--ug-sep_width)) !important;
}

#newtoolbar toolbarspacer {
    min-width: 0px !important;
    width: 18px !important;
    height: 18px !important;
}
#newtoolbar[customizing] :is(toolbarseparator, toolbarspacer) {
    margin-block: 8px !important;
}

/*  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 {
    min-width: 0px !important;
    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 {
    min-height: 0px !important;
    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 */

#main-window[inDOMFullscreen]:not([customizing]) #toolbox_new {
    visibility: collapse !important;
}
#main-window[inDOMFullscreen]:not([customizing]) #browser {
    padding: 0 !important;
}

/* Windows Test */

@media (-moz-platform: windows) {
#main-window[inFullscreen]:not([customizing]) #toolbox_new {
    visibility: collapse !important;
}
#main-window[inFullscreen]:not([customizing]) #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

Zitat von lenny2

Mit dem ersten CSS wechselt die Toolbar in den Bottom Mode und wird nicht ausgeblendet. Mit dem zweiten CSS verhält es sich wie ohne dieses CSS.
Nur zur Info:
v140.3.1esr nur unter Windows 11, Toolbar links positioniert. Die Toolbar wird nicht vollständig ausgeblendet; ein 4–6 Pixel breiter Streifen bleibt sichtbar.

Danke; FuchsFan hatte auf den Fehler im Code hingewiesen, korrigiert.
Der Screenshot ist sehr stark angeschnitten, kann ich leider nicht nachvollziehen.
Evtl. mal den gerade geposteten Code testen.

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.