Script Vertikale Zusatzleiste

//Toggle newtoolbar 8D Fix neu test browser

//Use filename starting with 000 !! =>
//000_extra_toolbars_test_D.uc.js

// TEST!!!

(function() {

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

        // Eigenes Icon
        let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
        let icon_tb = 'newtoolbar.png';
        let ImagePath = ProfilePath +'/'+ icon_tb;

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

        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 browser_size = document.getElementById("browser");
        let rect = browser_size.getBoundingClientRect();

        let ntb = document.createXULElement('toolbar');
        ntb.id = 'newtoolbar';
        ntb.setAttribute('customizable', true);
        ntb.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
        ntb.setAttribute('mode', 'icons');
        ntb.setAttribute('context', 'toolbar-context-menu');

	      toolbox_new.appendChild(ntb);

        document.getElementById('browser').parentNode.appendChild(toolbox_new);

        //geht height #2 not dynamic ???
        //document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.height + 'px');
        document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.top + 'px');

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

   try {
        CustomizableUI.createWidget({
            id: 'NewToolbar_button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                    let toolbaritem = aDocument.createXULElement('toolbarbutton');
                    let props = {
                        id: 'NewToolbar_button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        removable: true,
                        label: 'Toggle New Toolbar',
                        tooltiptext: 'Toggle New toolbar',
                    };

                    for(let p in props)
                        toolbaritem.setAttribute(p, props[p]);
                    return toolbaritem;
                }
        });
    } catch(e) { };

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

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

    // button
    document.getElementById('NewToolbar_button').addEventListener( "click", newTB );
        function newTB(aEvent, keyEvent=false) {
        if(!keyEvent && aEvent.button != 0) {
            return;
        }
        newtoolbar.classList.toggle("off-mode");
        browser.classList.toggle("off-mode_b");
        }

const css =`

:root {
    --ug-newbar_width: 36px;
    --ug-newbar_bg_color: #414D4B;
}

/*  Button Icon  */
#NewToolbar_button .toolbarbutton-icon {
    list-style-image: url("chrome://browser/skin/sidebar-collapsed.svg") !important;
    /*list-style-image: url("${ImagePath}") !important;*/
}

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

/*  Basis / Right */

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

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

#toolbox_new {
    position: fixed;
    z-index: 4 !important;
    display: flex;
    width: fit-content;
    bottom: 0;
    right: 0;
}

#newtoolbar {
    display: flex;
    flex-direction: column;
    min-width: 0 !important;
    width: var(--ug-newbar_width);
    height: calc(100vh - var(--height_newbar));
    padding-block: 8px;
    background-color: var(--ug-newbar_bg_color) !important;
    box-shadow: -1px 0 grey;
    transition: width 0.25s ease, margin 0.25s ease /*,height 0.5s ease*/ ;
}
#newtoolbar:not([customizing]).off-mode {
    margin-inline: 0 calc(0px - var(--ug-newbar_width));
    box-shadow: none;
}


/*  Left  */

#browser:not(.off-mode_b).left_mode_b {
    padding-inline: var(--ug-newbar_width) 0 !important;
}
#toolbox_new.left_mode {
    left: 0;
}
.left_mode #newtoolbar:not([customizing]) {
    box-shadow: 0px 0 grey;
}
.left_mode #newtoolbar:not([customizing]).off-mode {
    margin-inline: calc(0px - var(--ug-newbar_width)) 0;
}


/*  Bottom  */

#browser:not(.off-mode_b).bottom_mode_b {
    padding-inline: 0 !important;
    padding-bottom: var(--ug-newbar_width) !important;
}
#toolbox_new.bottom_mode {
    flex-direction: row;
    width: fit-content;
}
.bottom_mode #newtoolbar:not([customizing]) {
    flex-direction: row !important;
    height: var(--ug-newbar_width);
    width: 100vw;
    padding-block: 0;
    padding-inline: 8px;
    box-shadow: 0 -1px grey;
    border: none;
}
.bottom_mode #newtoolbar:not([customizing]).off-mode {
    margin-inline: 0;
    margin-block: 0 calc(0px - var(--ug-newbar_width)) !important;
}
.bottom_mode #newtoolbar:not([customizing]) > :is(.toolbarbutton-1, toolbaritem) {
    margin-block: 0 !important;
    margin-inline: 2px !important;
}

/*  customizing  */

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

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

        `;

        const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
        const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
        sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

})();