Eigene Zusatzleisten ab ff 143+

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

})();