1. Nachrichten
  2. Forum
    1. Unerledigte Themen
    2. Forenregeln
  3. Spenden
  • Anmelden
  • Registrieren
  • Suche
Alles
  • Alles
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche
  1. camp-firefox.de
  2. Horstmann

Beiträge von Horstmann

  • Eigene Zusatzleisten ab ff 143+

    • Horstmann
    • 26. November 2025 um 18:25

    Sodele, wird Zeit für eine neue Version.

    Der Bug in Version 13 aus #130 ist adressiert! :/

    Einmal elegant gelöst durch das Entfernen des Position Buttons, es gibt jetzt nur noch die Positionsänderung über Rechtsklick in einer Toolbar.
    Der verbleibende Button zum Ein/Ausblenden lässt sich nicht mehr entfernen, und nur noch innerhalb der nav-bar verschieben, aber sonst... ;)
    Besser schaff ich's alleine nicht. 8)

    JavaScript
    // Additional toolbars
    // Buttons to turn toolbar On/Off, right-click/context menu item to switch toolbar position
    
    // Use filename starting with 00 for custom button functions !! =>
    // 00_extra_toolbars_V14.uc.js
    
    // Based on: 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// Latest versions and icons =>
    // Forum topic: https://www.camp-firefox.de/forum/thema/139927-eigene-zusatzleisten-ab-ff-143/
    // Kudos to Aris and Mitleser
    
    // ATTENTION: Some system buttons can still be moved to additional/custom toolbars, but they will have no function.
    // There is a patch by @BrokenHeart: https://www.camp-firefox.de/forum/thema/138875-fix-toolbar-buttons-reagieren-nicht-mehr-ab-ff-134/
    // Different patch re. the issue by Aris included in this script, experimental
    
    // Version V14
    
    (function() {
    
        if (location.href !== 'chrome://browser/content/browser.xhtml')
            return;
    
    // User settings
    // After script changes, restart with Clear StartUp Cache => about:support
    
       // Custom Icons, expected in profile-name/chrome/icons folder ("icons" folder needs to be created)
            // get path to profile folder
            let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
            // path to icon folder named "icons" inside profile folder
            let IconPath = '/chrome/icons/';
    
            // On/Off Button
            // Custom icon file
            let Icon_tb = 'toolbar_4.svg';
            // Firefox icon
            let Icon_tb_Fx = 'chrome://browser/skin/sidebars-right.svg';
            // false = use Firefox Icon, true = Custom Icon
            let new_tb_icon  = false;
            // Complete path to icon
            let ImagePath = ProfilePath + IconPath + Icon_tb;
    
            // Position switch button
            // Custom icon file
            let Icon_sw = 'toolbar_switch_4.svg';
            // Firefox icon
            let Icon_sw_Fx = 'chrome://global/skin/icons/arrow-right.svg';
            // false: use Firefox Icon, true: Custom Icon
            let new_tb_icon_sw  = false;
            // Complete path to icon
            let ImagePathSW = ProfilePath + IconPath + Icon_sw;
    
       // Custom background color: false = Off ; true = On (overwrites themes)
            let new_tb_color = false;
            // background color if true
            let new_tb_bg_color = 'hsla(200, 45%, 87%, 1)';
    
       // Border width, 0px = off
            let new_tb_border_width = '1px';
            // Border color
            //let new_tb_border_color = 'red';                                              // Fixed color
            //let new_tb_border_color = 'var(--sidebar-border-color)';                      // Firefox default
            let new_tb_border_color = 'color-mix(in srgb, currentColor 30%, transparent)';  // Custom self-adjusting color
    
    // Size of toolbar and buttons changes, must be px values, all 3 settings are related ==>
    
            // Change button sizes via padding, 8px default
            let new_tb_btn_size = '6px';
    
            // Distance between buttons, 2px default
            let new_tb_distance = '5px';
    
            // Width vertical toolbar / height horizontal toolbar, increased by this value on both sides
            // Increase distance of buttons to edges, 0px => toolbar size = button size
            let new_tb_size = '1px';
    
    // Expert mode ===>>>
    // Saving changes, initial states ==>
    
       // true = save states toolbar On/Off / position on quitting Firefox, false = don't save (prefs deleted)
            // 2x restart required once after change, to make the the option stick
            let new_tb_save = true;
    
       // Initial state toolbar visibility: 0 = On, 1 = Off, only if new_tb_save = false (not saved)
            let new_tb_off = 0;
       // Position initial state: 0 = right, 1 = left, 2 = bottom, only if new_tb_save = false (not saved)
            let new_tb_loc = 0;
    
       // Extra: false = Button switches toolbar On/Off / changes Position for all open windows ; true = only active window
            let new_tb_uno = false;       // On/Off Button
            let new_tb_uno_sw = false;    // Position button
    
    // Possible problem solutions, if required, experimental ==>
    
       // Fix #1 for themes with low/ tiling background images, true / false, best to only use one of both
            let theme_fix = true;
            // Fix #2, overwrites Fix #1
            let theme_fix_2 = false;
    
       // Adjustments for Restore 'Space & Separator' items script for Firefox 102+ by Aris, true / false
            // https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/space_and_separator_restorer.uc.js
            let separator_fix = true;
    
    // End of user settings
    
            if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
            	Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
            }
    
            const pref_newtoolbar_state = "userchrome.newtoolbar.enabled";
    
            let ntb_box = document.createXULElement('toolbox');
            ntb_box.id = 'toolbox_new';
            ntb_box.setAttribute('orient','horizontal');
    
            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');
            // ntb.setAttribute('toolbarname', 'New_Toolbar_T');
            // ntb.setAttribute('toolboxid', 'navigator-toolbox');
            ntb.setAttribute('label', 'New Toolbar');
            ntb.setAttribute('orient', 'vertical');
            ntb.setAttribute("accesskey","");
    
            ntb_box.appendChild(ntb);
            document.getElementById('browser').parentNode.appendChild(ntb_box);
    
            CustomizableUI.registerArea('newtoolbar', {legacy: true});
            CustomizableUI.registerToolbarNode(ntb);
    
            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.top + 'px');
                } catch (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);
    
        //On/Off button
        try {
            CustomizableUI.createWidget({
              id: 'NewToolbar_button',
              defaultArea: CustomizableUI.AREA_NAVBAR,
              tooltiptext: 'Toolbar On',
              label: 'Toggle New Toolbar',
              removable: false,
            });
        } catch(e) { }
    
        // Button function
        NewToolbar_button.addEventListener('click', event => {
            if (event.button === 0 ) {
              if (!new_tb_uno) {
                tb_toggle();
              }
              else {
                tb_toggle_uno();
              };
              if (NewToolbar_button.classList.contains("off-mode_btn")) {
                 NewToolbar_button.setAttribute("tooltiptext", "Toolbar Off");
                }
              else {
                NewToolbar_button.setAttribute("tooltiptext", "Toolbar On");
              };
            }
         });
    
        function tb_toggle() {
           for (let win of Services.wm.getEnumerator("navigator:browser")) {
             const toolbar = win.document.getElementById("newtoolbar");
             const browserArea = win.document.getElementById("browser");
             const button = win.document.getElementById("NewToolbar_button");
             toolbar.classList.toggle("off-mode");
             browserArea.classList.toggle("off-mode_b");
             button.classList.toggle("off-mode_btn");
             const ntb_visible = !toolbar.classList.contains("off-mode");
             Services.prefs.setBoolPref(pref_newtoolbar_state, ntb_visible);
             }
        };
    
        function tb_toggle_uno() {
             newtoolbar.classList.toggle("off-mode");
             browser.classList.toggle("off-mode_b");
             NewToolbar_button.classList.toggle("off-mode_btn");
             const ntb_visible = !newtoolbar.classList.contains("off-mode");
             Services.prefs.setBoolPref(pref_newtoolbar_state, ntb_visible);
        };
    
        // Position initial state
        if (new_tb_loc === 0) {
             toolbox_new.classList.add("right_mode");
             browser.classList.add("right_mode_b");
             NewToolbar_button.classList.add("right_mode_btn");
           }
        else 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");
           }
    
        let toolbarEnabled = true;
        try {
            toolbarEnabled = Services.prefs.getBoolPref(pref_newtoolbar_state);
        } catch(e) {
            Services.prefs.setBoolPref(pref_newtoolbar_state, new_tb_off === 0);
            toolbarEnabled = new_tb_off === 0;
        }
        if (!toolbarEnabled) {
            newtoolbar.classList.add("off-mode");
            browser.classList.add("off-mode_b");
            NewToolbar_button.classList.add("off-mode_btn");
            NewToolbar_button.setAttribute("tooltiptext", "Toolbar Off");
        }
    
        // Icon
        if (new_tb_icon) {
             NewToolbar_button.classList.add("icon_mode");
           }
        // Background color
        if (new_tb_color) {
             newtoolbar.classList.add("ntb_bg_color");
           }
    
        // Code by Aris => Attach handlers for buttons moved outside #navigator-toolbox
        // Based on: https://searchfox.org/firefox-main/source/browser/base/content/navigator-toolbox.js
        const customHandlers = {
        	  "unified-extensions-button": (el, e) => gUnifiedExtensions.togglePanel(e),
        	  "fxa-toolbar-menu-button":   (el, e) => gSync.toggleAccountPanel(el, e),
        	  "firefox-view-button":       (el, e) => FirefoxViewHandler.openToolbarMouseEvent(e),
        	  "downloads-button":          (el, e) => DownloadsIndicatorView.onCommand(e),
        	  "pageActionButton":          (el, e) => BrowserPageActions.mainButtonClicked(e),
        	  "alltabs-button":            (el, e) => gTabsPanel.showAllTabsPanel(e, "alltabs-button"),
        	  "library-button":            (el, e) => PanelUI.showSubView("appMenu-libraryView", el, e),
        	  "import-button":             (el, e) => MigrationUtils.showMigrationWizard(window, {
      	  entrypoint: MigrationUtils.MIGRATION_ENTRYPOINTS.BOOKMARKS_TOOLBAR,
      	  }),
        };
    		document.getElementById("newtoolbar").addEventListener("mousedown", (e) => {
    		  const button = e.target.closest("toolbarbutton");
    		  if (button?.id && customHandlers[button.id]) customHandlers[button.id](button, e);
    		});
    
    // Position switch menu item
        const pref_position = "userchrome.newtoolbar.position";
        function getPositionPref() {
            try {
                return Services.prefs.getCharPref(pref_position);
            } catch (e) {
                return "right"; // Standardwert
            }
        }
        function setPositionPref(value) {
            Services.prefs.setCharPref(pref_position, value);
        }
    
         // Context menu menuitem alt
         let refItemSW = document.createXULElement("menuitem");
         refItemSW.setAttribute('id', 'NewToolbar_position_Con');
         refItemSW.setAttribute('closemenu', 'none');
         refItemSW.setAttribute('label', 'Toolbar Position');
         refItemSW.classList.add('menuitem-iconic');
    
         let refItemSW_A = document.getElementById('toolbar-context-menu');
    
         let refItemSW_S = document.querySelector('.viewCustomizeToolbar');
         refItemSW_A.insertBefore(refItemSW, refItemSW_S);
    
         let menuseparator_sw = document.createXULElement("menuseparator");
         menuseparator_sw.setAttribute('id', 'sw_sep');
         refItemSW_A.insertBefore(menuseparator_sw, refItemSW.nextSibling);
    
         function applyPosition(pos) {
            toolbox_new.classList.remove("left_mode", "bottom_mode", "right_mode");
            browser.classList.remove("left_mode_b", "bottom_mode_b", "right_mode_b");
            NewToolbar_button.classList.remove("left_mode_btn", "bottom_mode_btn", "right_mode_btn");
            NewToolbar_position_Con.classList.remove("left_mode_sw", "bottom_mode_sw", "right_mode_sw");
            if (pos === "left") {
                toolbox_new.classList.add("left_mode");
                browser.classList.add("left_mode_b");
                NewToolbar_button.classList.add("left_mode_btn");
                NewToolbar_position_Con.classList.add("left_mode_sw");
            } else if (pos === "bottom") {
                toolbox_new.classList.add("bottom_mode");
                browser.classList.add("bottom_mode_b");
                NewToolbar_button.classList.add("bottom_mode_btn");
                NewToolbar_position_Con.classList.add("bottom_mode_sw");
            } else if (pos === "right") {
                toolbox_new.classList.add("right_mode");
                browser.classList.add("right_mode_b");
                NewToolbar_button.classList.add("right_mode_btn");
                NewToolbar_position_Con.classList.add("right_mode_sw");
            }
         }
         let savedPos = getPositionPref();
         applyPosition(savedPos);
    
         document.getElementById("NewToolbar_position_Con").addEventListener('click', event => {
            if (event.button === 0 || event.button === 2) {
              if (!new_tb_uno_sw) {
                poser();
              }
              else {
                poser_uno();
              };
            }
         });
    
         function poser() {
    			 for (let win of Services.wm.getEnumerator("navigator:browser")) {
               const toolbox = win.document.getElementById("toolbox_new");
               const browserArea = win.document.getElementById("browser");
               const button = win.document.getElementById("NewToolbar_button");
               const button_con = win.document.getElementById("NewToolbar_position_Con");
               if (toolbox.classList.contains("right_mode")) {
                    toolbox.classList.replace("right_mode", "left_mode");
                    browserArea.classList.replace("right_mode_b", "left_mode_b");
                    button.classList.replace("right_mode_btn", "left_mode_btn");
                    button_con.classList.replace("right_mode_sw", "left_mode_sw");
                    setPositionPref("left");
                   }
               else if (toolbox.classList.contains("left_mode")) {
                    toolbox.classList.replace("left_mode", "bottom_mode");
                    browserArea.classList.replace("left_mode_b", "bottom_mode_b");
                    button.classList.replace("left_mode_btn", "bottom_mode_btn");
                    button_con.classList.replace("left_mode_sw", "bottom_mode_sw");
                    setPositionPref("bottom");
                   }
               else if (toolbox.classList.contains("bottom_mode")) {
                    toolbox.classList.replace("bottom_mode", "right_mode");
                    browserArea.classList.replace("bottom_mode_b", "right_mode_b");
                    button.classList.replace("bottom_mode_btn", "right_mode_btn");
                    button_con.classList.replace("bottom_mode_sw", "right_mode_sw");
                    setPositionPref("right");
                   }
                 }
               };
    
         function poser_uno() {
               if (toolbox_new.classList.contains("right_mode")) {
                    toolbox_new.classList.replace("right_mode", "left_mode");
                    browser.classList.replace("right_mode_b", "left_mode_b");
                    NewToolbar_button.classList.replace("right_mode_btn", "left_mode_btn");
                    NewToolbar_position_Con.classList.replace("right_mode_sw", "left_mode_sw");
                    setPositionPref("left");
                   }
               else if (toolbox_new.classList.contains("left_mode")) {
                    toolbox_new.classList.replace("left_mode", "bottom_mode");
                    browser.classList.replace("left_mode_b", "bottom_mode_b");
                    NewToolbar_button.classList.replace("left_mode_btn", "bottom_mode_btn");
                    NewToolbar_position_Con.classList.replace("left_mode_sw", "bottom_mode_sw");
                    setPositionPref("bottom");
                   }
               else if (toolbox_new.classList.contains("bottom_mode")) {
                    toolbox_new.classList.replace("bottom_mode", "right_mode");
                    browser.classList.replace("bottom_mode_b", "right_mode_b");
                    NewToolbar_button.classList.replace("bottom_mode_btn", "right_mode_btn");
                    NewToolbar_position_Con.classList.replace("bottom_mode_sw", "right_mode_sw");
                    setPositionPref("right");
                   }
               };
    
        // Icon Position menuitem
        if (new_tb_icon_sw) {
             NewToolbar_position_Con.classList.add("icon_mode_sw");
           }
    
        // On quitting Firefox: delete Prefs, if new_tb_save = false
        if (!new_tb_save) {
             Services.obs.addObserver(function observer(subject, topic, data) {
                 if (topic === "quit-application-granted") {
                     try {
                         Services.prefs.clearUserPref(pref_newtoolbar_state);
                         Services.prefs.clearUserPref(pref_position);
                     } catch (e) { }
                     Services.obs.removeObserver(observer, "quit-application-granted");
                 }
             }, "quit-application-granted");
          };
    
    
    let css =`
    
    #main-window {
        --ug-newbar_basewidth: calc(2 * ${new_tb_btn_size} + 16px);  /* Minimalgroesse = Groesse Buttons */
        --ug-newbar_width: calc(var(--ug-newbar_basewidth) + ${new_tb_border_width} + 2 * `+new_tb_size+`);
    }
    
    /*- Buttons -*/
    
    /* Buttons sizes */
    #newtoolbar {
        --toolbarbutton-inner-padding: ${new_tb_btn_size} !important;
    	 	--toolbarbutton-outer-padding: 0px !important;
    }
    /*  On/Off Button  */
    #NewToolbar_button .toolbarbutton-icon {
        list-style-image: url("${Icon_tb_Fx}");
    }
    #NewToolbar_button.icon_mode .toolbarbutton-icon {
        list-style-image: url("${ImagePath}");
    }
    #NewToolbar_button.off-mode_btn:not(:hover, :active) .toolbarbutton-icon {
        opacity: 0.4;
    }
    
    /*  Button adjustments to Toolbar Position  */
    #NewToolbar_button.left_mode_btn .toolbarbutton-icon,
    #NewToolbar_position_Con.left_mode_sw :is(image, img) {
        transform: rotate(180deg);
    }
    #NewToolbar_button.bottom_mode_btn .toolbarbutton-icon,
    #NewToolbar_position_Con.bottom_mode_sw :is(image, img) {
        transform: rotate(90deg);
    }
    
    #NewToolbar_position_Con {
        -moz-context-properties: fill, fill-opacity !important;
        fill: currentColor !important;
    }
    
    #NewToolbar_position_Con :is(image, img) {
        list-style-image: url("${Icon_sw_Fx}");
        content: url("${Icon_sw_Fx}") !important;
    }
    #NewToolbar_position_Con.icon_mode_sw :is(image, img) {
        list-style-image: url("${ImagePathSW}");
        content: url("${ImagePathSW}") !important;
    }
    
    #unified-extensions-button[hidden] {
        visibility: visible !important;
        display: flex !important;
    }
    
    /*--  Browser adjustments  --*/
    
    #browser.right_mode_b {
        transition: padding-right 0.25s ease !important;
    }
    #browser.left_mode_b {
        transition: padding-left 0.25s ease !important;
    }
    #browser.bottom_mode_b {
        transition: padding-bottom 0.25s ease !important;
    }
    #browser:not(.off-mode_b).right_mode_b {
        padding-right: var(--ug-newbar_width) !important;
    }
    #browser:not(.off-mode_b).left_mode_b {
        padding-left: var(--ug-newbar_width) !important;
    }
    #browser:not(.off-mode_b).bottom_mode_b {
        padding-bottom: var(--ug-newbar_width) !important;
    }
    
    /*--  Basics / Right  --*/
    
    #toolbox_new {
        position: fixed;
        z-index: 2 !important;
        display: flex;
        width: fit-content;
        top: var(--height_newbar_top);
        right: 0px;
    }
    #newtoolbar {
        display: flex;
        /*min-width: var(--ug-newbar_basewidth) !important;*/
        min-width: var(--ug-newbar_width) !important;
        width: var(--ug-newbar_width) !important;
        min-height: var(--ug-newbar_basewidth) !important;
        height: var(--height_newbar) !important;
        align-items: center !important;
        overflow: hidden !important;
        padding-block: 8px;
        border-width: 0px;
        border-style: solid !important;
        border-color: ${new_tb_border_color} !important;
        border-left-width: ${new_tb_border_width};
        border-right-width: 0px;
        margin-inline: 0px;
    }
    
    #toolbox_new:not(.bottom_mode) #newtoolbar:not([customizing]) {
        max-width: var(--ug-newbar_width) !important;
        transition: width 0.25s ease, max-width 0.25s ease, min-width 0.25s ease, border-left-width 0.125s ease;
    }
    
    #toolbox_new #newtoolbar:not([customizing]).off-mode {
        min-width: 0px !important;
        width: 0px !important;
        max-width: 0px !important;
        min-height: unset !important;
        max-height: unset !important;
        border-width: 0px !important;
        box-shadow: none !important;
    }
    
    #newtoolbar:not([customizing]).off-mode > :is(.toolbarbutton-1, toolbaritem) {
        opacity: 0 !important;
    }
    #newtoolbar > :is(.toolbarbutton-1, toolbaritem),
    #newtoolbar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
        margin-block: ${new_tb_distance} !important;
        margin-inline: var(--toolbarbutton-outer-padding) !important;
        transition: opacity 0.125s ease;
    }
    
    /*--  Left  --*/
    
    #toolbox_new.left_mode {
        right: unset;
        left: 0px;
    }
    #toolbox_new.left_mode #newtoolbar:not([customizing]) {
        border-left-width: 0px;
        border-right-width: ${new_tb_border_width};
        transition: width 0.25s ease, max-width 0.25s ease, min-width 0.25s ease, border-right-width 0.125s ease;
    }
    
    /*--  Bottom  --*/
    
    #toolbox_new.bottom_mode {
        top: unset;
        bottom: 0px;
    }
    #toolbox_new.bottom_mode #newtoolbar:not([customizing]) {
        flex-direction: row !important;
        min-height: 0px !important;
        height: var(--ug-newbar_width) !important;
        max-height: var(--ug-newbar_width) !important;
        min-width: 0px !important;
        width: 100vw !important;
        padding-block: 0px;
        padding-inline: 8px;
        border-inline-width: 0px;
        border-top-width: ${new_tb_border_width};
        /*justify-content: center !important;*/    /* Inhalt mittig, optional */
        transition: height 0.25s ease, max-height 0.25s ease, min-height 0.25s ease, border-top-width 0.125s ease !important;
    }
    #toolbox_new.bottom_mode #newtoolbar:not([customizing]).off-mode {
        min-height: 0px !important;
        height: 0px !important;
        max-height: 0px !important;
        max-width: unset !important;
    }
    #toolbox_new.bottom_mode #newtoolbar:not([customizing]) > :is(.toolbarbutton-1, toolbaritem),
    #toolbox_new.bottom_mode #newtoolbar:not([customizing]) toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
        margin-block: var(--toolbarbutton-outer-padding) !important;
        margin-inline: ${new_tb_distance} !important;
    }
    
    /*--  Fullscreen  --*/
    
    /* 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  --*/
    
    #main-window[customizing] #toolbox_new {
        top: unset !important;
        bottom: 0 !important;
        right: 0 !important;
        left: unset !important;
    }
    #newtoolbar[customizing] {
        height: calc(100vh - var(--height_newbar_c)) !important;
        width: initial !important;
        box-shadow: inset 0px 1px ${new_tb_border_color};
        transition: none !important;
    }
    #main-window:not([customizing]) #newtoolbar[customizing].off-mode {
        min-width: 0px !important;
        width: 0px !important;
        min-height: 0px !important;
        height: 0px !important;
        border-width: 0px !important;
    }
    #customization-container {
        margin-right: var(--ug-newbar_width) !important;
    }
    
    /*-  Background oolors themes  -*/
    
    /* Custom toolbar background color if enabled */
    #newtoolbar.ntb_bg_color {
        background-color: ${new_tb_bg_color} !important;
    }
    
    /*- Background themes, if background images are tiled, try theme_fix options above -*/
    
    :root[lwtheme] #newtoolbar:not(.ntb_bg_color) {
        background-color: var(--lwt-accent-color, var(--toolbar-bgcolor)) !important;
    }
    :root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color) {
        background-image: var(--lwt-header-image) !important;
        background-position: right 0px top 0px !important;
    }
    
    /* Icon colors */
    /*
    .squareClass {
        fill: green;
    }
    .strichClass {
        fill: purple;
    }
    .strichClassW {
        fill: cyan;
    }
    .arrowClass {
        fill: orange;
    }
    */
    
      `;
    
    if (theme_fix) {
      css += `
    /*-  Fix #1 for themes with tiled background images  -*/
    
    :root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color) {
        background: var(--lwt-header-image) !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: right 0px top 0px !important;
    }
    :root[lwtheme][lwtheme-image] #toolbox_new.bottom_mode #newtoolbar:not(.ntb_bg_color) {
        background-size: auto !important;
    }
     `;
    }
    
    if (theme_fix_2) {
      css += `
    /*-  Fix #2 for themes with tiled background images  -*/
    
    :root[lwtheme][lwtheme-image] #toolbox_new #newtoolbar:not(.ntb_bg_color) {
         background: transparent !important;
    }
    :root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color)::before {
        content: "" ;
        position: absolute;
        top: 0;
        right: 0;
        width: var(--height_newbar) !important;
        height: var(--ug-newbar_width) !important;
        pointer-events: none;
        z-index: -1 !important;
        background: var(--lwt-header-image) !important;
        background-repeat: no-repeat !important;
        transform: rotate(-90deg) translateX(var(--ug-newbar_width)) !important;
        transform-origin: 100% 100% !important;
        transition: margin 0.25s ease;
    }
    :root[lwtheme][lwtheme-image] #toolbox_new.bottom_mode #newtoolbar:not(.ntb_bg_color, [customizing])::before {
        transform: scaleX(-1) !important;
        transform-origin: 50% 50% !important;
        width: 100% !important;
    }
    :root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color)[customizing]::before {
        width: calc(100vh - var(--height_newbar_c)) !important;
    }
    #newtoolbar:not([customizing]).off-mode::before {
        min-width: 0px !important;
        margin-inline: 0px calc(0px - var(--ug-newbar_width));
    }
    #toolbox_new.left_mode #newtoolbar:not([customizing]).off-mode::before {
        margin-inline: calc(0px - var(--ug-newbar_width)) 0;
    }
    #toolbox_new.bottom_mode #newtoolbar:not([customizing]).off-mode::before {
        min-height: 0px !important;
        margin-inline: 0px;
        margin-block: 0px calc(0px - var(--ug-newbar_width)) !important;
    }
     `;
    }
    
    if (separator_fix) {
      css += `
    /* Adjustments for Separator Scripts  */
    
    #newtoolbar toolbarseparator {
        width: calc(var(--ug-newbar_width) - ${new_tb_border_width} - 6px) !important;
        margin: 5px 0px !important;
        border-block-color: hsl(0, 0%, 0%, 0.45) hsl(0, 0%, 100%, 0.55) !important;
        transition: width 0.125s ease !important;
    }
    #newtoolbar :is(toolbarspacer, toolbarspring, toolbarseparator) {
        min-width: 0px !important;
    }
    #newtoolbar:not([customizing]).off-mode toolbarseparator {
        width: 0px !important;
    }
    #toolbox_new.bottom_mode #newtoolbar:not([customizing]) toolbarseparator {
        transform: rotate(-90deg) !important;
        margin: 0px !important;
    }
    #newtoolbar[customizing] toolbarseparator {
        margin-block: 16px !important;
    }
     `;
    }
    
      const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
      const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
      sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
    
    })();
    Alles anzeigen


    Icons: icons.zip

  • Neue Quicklink-Button

    • Horstmann
    • 24. November 2025 um 18:08
    Zitat von Mira_Belle


    So funktioniert es

    Prima! :)

    Weil ich mir die eh schon gebastelt habe, hier noch 2 Varianten - pures Horst-I ! :D

    Die Funktion ist auch mit im Einstellungen Bereich, wenn schon. ;)
    Keine Ahnung ob das immer klappt, aber so muss der User gar nicht mehr nach unten.

    Die Bezeichnungen sind klar differenziert, damit man auch weiss was wo benutzt wird, und den Code verstehen kann, s. #25.
    Bei so kleinen Codes nur verwirrend, bei längeren ist zB 20x button für komplett verschiedene Anwendungen ein Graus.

    Id ohne Bindestriche, weil JS; bei style.MozContextProperties = 'fill,..., falls das tatsächlich irgendwo gebraucht wird, nehmen wir stroke-opacity gleich noch mit dazu.

    Ein kleiner Bug besteht weiter, die Rechtsklickfunktion auf dem Button wird manchmal erst nach 2mal Verschieben, Neustart etc. aktiv, aber das ist kein Beinbruch.

    #1, wie deiner bzw. aus #10:

    JavaScript
    // Button Test #1
    
    (function() {
    
      if (!window.gBrowser)
    	return;
    
      // Erlaubt korrekte .svg Icons Darstellung in allen UI Bereichen
    	if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
    		Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
    	};
    
          // User Einstellungen
    
          // Button #id
          let btn_id = 'link_button_cf';
    
          // Icon
          const btn_icon = 'flower-satt32.png';  // Name+Dateiendung des Symbols
          const iconPath = '/chrome/icons/'; // Pfad zum Ordner der das Icon beinhaltet
          const curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir)); // Pfad zum Profil
          // Kompletter Pfad zum Icon =>
          const ImagePath = curProfDir + iconPath + btn_icon;
    
          const btn_label = 'camp-firefox.de';  // Bezeichnung
          const btn_tooltiptext = 'Forum - camp-firefox.de';  // Tooltip
    
          // Funktion
          function btn_func() {
              openTrustedLinkIn('https://www.camp-firefox.de/forum/', "tab");
            };
    
          // User Einstellungen Ende
    
      // Button
    	try {
          CustomizableUI.createWidget({
             id: btn_id,
             defaultArea: CustomizableUI.AREA_NAVBAR,
             label: btn_label,
             tooltiptext: btn_tooltiptext,
             onCreated: (this_button) => {
                this_button.style.MozContextProperties = 'fill, stroke, fill-opacity, stroke-opacity';
                this_button.style.listStyleImage = 'url("' + ImagePath + '")';
                this_button.style.minWidth = 'fit-content';
              }
          });
    	} catch(e) {};
    
      (function add_button() {
            let btn_exists = document.getElementById(btn_id);
            if (btn_exists) {
              btn_exists.addEventListener('click', event => {
                if (event.button === 0) {
                      btn_func();
                    }
              });
            } 
            else {
              setTimeout(add_button, 100);
            }
        })();
    
    })();
    Alles anzeigen

    #2, benutzt Codeteile von BrokenHeart:

    JavaScript
    // Button Test #2, Kudos BrokenHeart
    
    (function() {
    
      if (!window.gBrowser)
    	return;
    
          // Erlaubt korrekte .svg Icons Darstellung in allen UI Bereichen
        	if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
        		Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
        	};
    
          // User Einstellungen
    
          // Button #id
          let btn_id = 'link_button_cf';
    
          // Icon
          const btn_icon = 'flower-satt32.png';  // Name+Dateiendung des Symbols
          const iconPath = '/chrome/icons/'; // Pfad zum Ordner der das Icon beinhaltet
          const curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir)); // Pfad zum Profil
          // Kompletter Pfad zum Icon =>
          const ImagePath = curProfDir + iconPath + btn_icon;
    
          const btn_label = 'camp-firefox.de';  // Bezeichnung
          const btn_tooltiptext = 'Forum - camp-firefox.de';  // Tooltip
    
          // Funktion
          function btn_func() {
              openTrustedLinkIn('https://www.camp-firefox.de/forum/', "tab");
            };
    
          // User Einstellungen Ende
    
          // Button
        	try {
              CustomizableUI.createWidget({
                 id: btn_id,
                 defaultArea: CustomizableUI.AREA_NAVBAR,
                 label: btn_label,
                 tooltiptext: btn_tooltiptext,
                 onCreated: (this_button) => {
                    this_button.style.MozContextProperties = 'fill, stroke, fill-opacity, stroke-opacity';
                    this_button.style.listStyleImage = 'url("' + ImagePath + '")';
                    this_button.style.minWidth = 'fit-content';
                 }
              });
        	} catch(e) {}
    
          function click_button() {
              document.getElementById(btn_id).addEventListener('click', event => {
                  if (event.button === 0) {
                     btn_func();
                  }
                });
              };
    
          if (window.readyState !== "loading") {
        		setTimeout(click_button, 500);
            }
          else {
        	  window.addEventListener( "DOMContentLoaded", click_button );
            };
          window.addEventListener('aftercustomization', () => {
        		setTimeout(() => click_button(), 100)
            });
    
    })();
    Alles anzeigen

    Icon: flower-satt32.png.zip

  • Neue Quicklink-Button

    • Horstmann
    • 24. November 2025 um 11:35
    Zitat von Mira_Belle

    Kurze Bewertung von perplexy (KI)
    Anmerkung!
    Variante 1 => Dein Code aus #20
    Variante 2 => hänge ich mal unten an.

    Nur kurz zum Verständnis: du meinst evtl. meinen Code aus #10, nicht #20 (ist auch dein Posting)?

    In deiner Variante musst du in Zeile 41 den Kommentar // entfernen sonst ist button nicht definiert.
    Ist dann eigentlich genau wie mein Code aus #10. :/

    Re. AI: jemand den ich kenne hat das für Fx ab und zu mal probiert, AI kapiert die Feinheiten der UI nicht, besonders das Customize Zeug, und den Unterschied zw. selber gemachten und Fx Buttons.


    Zitat von milupo

    Ich weiß nicht, ob das überhaupt geht: Am Anfang werden Variablen (id, link, label, tooltip, tooltiptext) Werte zugewiesen und im Nachhinein die Variablen-Namen direkt als Parameter angegeben, statt ihrer Werte: Zeile 25, 27, 28, 44, 46. Und die Eigenschaften, denen das zugewiesen wird, haben auch noch die gleichen Namen wie die oben definierten Variablen.

    Das geht schon, ist mE nur sehr verwirrend.
    Der eine Vorteil der Variablen ist, dass User Einstellung oben zusammengefasst dargestellt und veränderbar sind; für einen neuen Button kann man dann nur diese Zeilen anpassen, und fertig.
    Die Button Funktion könnte man auch noch nach oben ziehen.

    Ob man das jetzt braucht für relativ kurze und einfache Buttonscripts ist eine andere Frage. ;)

  • Neue Quicklink-Button

    • Horstmann
    • 23. November 2025 um 23:00
    Zitat von Mira_Belle

    Wofür ist der ganze Bitch-Code?

    Habe jetzt mal nur den Code aus #10
    nach : "catch(e) {};" angepasst und übernommen, (danke dafür)
    und damit besteht es den Elchtest und auch den Funktionstest.
    (Sofortige Funktion nach verschieben aus dem Anpassfenster)

    Der macht das gleiche wie der aus #10, nur evtl. besser, bin noch dran das fein einzustellen.
    Der heisst nur so weil mich die Buttons in letzter Zeit so gequält haben. ;)

  • Neue Quicklink-Button

    • Horstmann
    • 23. November 2025 um 21:57
    Zitat von Mira_Belle

    Also, entweder besteht das Skript den Elchtest,
    oder der Button ist ohne Neustart sofort funktionstüchtig.

    Bei mir funktioniert meine Version aus #10 für beides, der maßgebliche Unterschied zu deinem Script ist nur unten im Block für die Funktion. :/

    Hier noch schnell eine Variante, die Codeteile von BrokenHeart benutzt, aber erst mal nur ganz grob.
    Das scheint auch generell noch die Macke mit dem Rechtsklick/Kontextmenü abzudecken.
    Auch hier sind die Änderungen nur im setTimeout Bereich, der Rest an Änderungen ist visueller Kram den ich separat nochmal ansprechen würde.

    Ansonsten solltest du einfach deinen Code zw. Zeilen 19 und 65 rein tauschen können.

    JavaScript
    // Nur Test !!!!!
    
    (function() {
    
      if (!window.gBrowser)
    	return;
    
    	if (window.readyState !== "loading")
    		setTimeout( fix_bitch_btn, 500 );
        else
    		window.addEventListener( "DOMContentLoaded", fix_bitch_btn );
    
    	window.addEventListener('aftercustomization', () =>
    		setTimeout(() => fix_bitch_btn(), 100 )
    	)
    
    	function fix_bitch_btn() {
    
          // Erlaubt korrekte .svg Icons Darstellung in allen UI Bereichen
        	if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
        		Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
        	};
    
          // User Einstellungen
    
          // Button #id
          let button_id = 'link_button_cf';
    
          // Icon
          let icon = 'flower-satt32.png';  // Name+Dateiendung des Symbols
          let iconPath = '/chrome/icons/'; // Pfad zum Ordner der das Icon beinhaltet
          let curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir)); // Pfad zum Profil
          let ImagePath = curProfDir + iconPath + icon; // Kompletter Pfad zum Icon
    
          // User Einstellungen Ende
    
          // Button
        	try {
              CustomizableUI.createWidget({
                 id: button_id,
                 defaultArea: CustomizableUI.AREA_NAVBAR,
                 label: 'camp-firefox.de',
                 tooltiptext: 'Forum - camp-firefox.de',
                 onCreated: (button) => {
                    //button.style.MozContextProperties = 'fill, stroke, fill-opacity, stroke-opacity';
                    button.style.listStyleImage = 'url("' + ImagePath + '")';
                    button.style.minWidth = 'fit-content';
                 }
              });
        	} catch(e) {}
    
            //let this_button = document.getElementById(button_id);
              //this_button.addEventListener('click', event => {
    
          document.getElementById(button_id).addEventListener('click', event => {
              if (event.button === 0) {
                 //btn_func();
                 openTrustedLinkIn('https://www.camp-firefox.de/forum/', "tab");
              }
            });
    
           // function btn_func() {
           //      openTrustedLinkIn('https://www.camp-firefox.de/forum/', "tab");
           //  }
    
     }
    
    })();
    Alles anzeigen

    Mein offizielles Testicon: flower-satt32.png.zip

  • Neue Quicklink-Button

    • Horstmann
    • 23. November 2025 um 20:09
    Zitat von Mira_Belle

    Bitte testen.

    Elchtest, leider nein, das alte Problem. :|
    Ich dreh mich damit auch dauernd im Kreis.

  • Neue Quicklink-Button

    • Horstmann
    • 23. November 2025 um 18:27
    Zitat von Mira_Belle

    Nun muss ich alle "Buttons" noch einmal überarbeiten.

    Nicht so schnell, wart erstmal ab ob andere User das Ganze bestätigen können oder dazu kommentieren!
    Auf keinen Fall solltest du vorschnell alles umbauen, basierend auf meinem Amateurcode, deine und Mitleser 's Vorlagen sind prima! :!:

    Übrigens: bis auf einen (mit dieser Lösung) haben alle meine selbergemachten Buttons das Problem - und es hat mich eigentlich nie gestört. ;)


    Übrigens #2: ähnliche Probleme haben Buttons in Aris Scripts und vielen anderen auch; der timeout bzw. das Aufrufen des addEventListener sollte vermutlich anders gelöst werden las bei mir - BrokenHeart!!! ;)

  • Neue Quicklink-Button

    • Horstmann
    • 23. November 2025 um 18:00

    Ich glaub mein Elch pfeift mal wieder. :whistling:

    Ein altes Problem mit vielen Buttons: wir nehmen ein Script für einen dieser Buttons (zB das erste aus #1), Neustart von Fx, und der Button ist in der Symbolleiste.

    Jetzt entfernen wir den Button aus der Symbolleiste, mit Rechtsklick - aus Symbolleiste entfernen - oder indem wir ihn im Anpassenfenster aus der Symbolleiste bzw. aus dem Overflowmenü rausziehen, zu den anderen unbenutzten Buttons: der Button ist weg aus der UI.

    Nachdem Fx ein oder ein paar Mal beendet wurde, wollen wir irgendwann den Button wieder benutzen, und ziehen ihn im Anpassenfenster zurück in eine Symbolleiste/das Overflowmenü, der Button taucht dort auf. :)

    Aber: der Button hat keine Funktion. 8|
    Wir müssen Fx nochmal neustarten, nur damit die Funktion wieder hergestellt wird. X/

    Das jedenfalls meine Beobachtung. :/

    Es sei denn, was hier das Problem teils löst (Rechtsklick braucht noch Neustart, Icon anpassen):

    JavaScript
    // Nur Test !!!!!
    
    (function() {
    
      if (!window.gBrowser)
    	return;
    
      // Erlaubt korrekte .svg Icons Darstellung in allen UI Bereichen
    	if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
    		Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
    	};
    
      // User Einstellungen
    
      // Button #id
      let button_id = 'link_button_cf';
    
      // Icon
      let icon = 'flower-satt32.png';  // Name+Dateiendung des Symbols
      let iconPath = '/chrome/icons/'; // Pfad zum Ordner der das Icon beinhaltet
      let curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir)); // Pfad zum Profil
      let ImagePath = curProfDir + iconPath + icon; // Kompletter Pfad zum Icon
    
      // User Einstellungen Ende
    
      // Button
    	try {
          CustomizableUI.createWidget({
             id: button_id,
             defaultArea: CustomizableUI.AREA_NAVBAR,
             label: 'camp-firefox.de',
             tooltiptext: 'Forum - camp-firefox.de',
             onCreated: (button) => {
                //button.style.MozContextProperties = 'fill, stroke, fill-opacity, stroke-opacity';
                button.style.listStyleImage = 'url("' + ImagePath + '")';
                button.style.minWidth = 'fit-content';
             }
          });
    	} catch(e) {};
    
      (function add_button() {
            let btn_exists = document.getElementById(button_id);
            if (btn_exists) {
              btn_exists.addEventListener('click', event => {
                if (event.button === 0) {
                  openTrustedLinkIn('https://www.camp-firefox.de/forum/', "tab");
                }
              });
            } else {
              setTimeout(add_button, 100);
            }
        })();
    
    })();
    Alles anzeigen
  • Eigene Zusatzleisten ab ff 143+

    • Horstmann
    • 21. November 2025 um 21:31
    Zitat von Mira_Belle


    Für mich ist "mein" Firefox perfekt.

    Meins für mich auch - ich benutze übrigens gar keine Zusatzleisten. 8)
    Die letzte grössere Script Neuanschaffung bei mir waren die Bookmarks-Count Dinger, die bei mir nur in der Lesezeichenleiste aktiviert sind - und ich benutze die Lesezeichenleiste fast nie. ;)

    Ist halt ein Hobby. :)

  • Eigene Zusatzleisten ab ff 143+

    • Horstmann
    • 21. November 2025 um 18:00
    Zitat von Mira_Belle

    Sorry, z.Z. habe ich wenig Zeit und habe auch, danke an Mitleser, gerade eigene Projekte.

    Das war absolut kein Vorwurf, keiner hat ein Anrecht auf Aufmerksamkeit oder Support
    Benutze aber täglich noch eine Menge Scripts und Lösungen von dir! :)

  • Eigene Zusatzleisten ab ff 143+

    • Horstmann
    • 21. November 2025 um 17:19

    Aus einer anderen Richtung kommend, sowas funktioniert generell, wenn man den Positionsbutton komplett aus Symbolleisten entfernt, s. Zeile 284 und 340 für den timeout.

    Nur die Funktion für das Menuitem wird dann eingeschränkt - die letzte Einstellung wird nicht mehr gespeichert, und der Positionswechsel funktioniert, aber nur noch im Originalfenster! X(

    Das war die letzte Frage, versprochen! ;)

    Nur als Test:

    JavaScript
    // Test
    
    (function() {
        if (location.href !== 'chrome://browser/content/browser.xhtml')
            return;
    
    // User settings
    // After script changes, restart with Clear StartUp Cache => about:support
    
       // Custom Icons, expected in profile-name/chrome/icons folder ("icons" folder needs to be created)
            let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
            let IconPath = '/chrome/icons/';
    
            // On/Off Button
            // Custom icon file
            let Icon_tb = 'toolbar_4.svg';
            // Firefox icon
            let Icon_tb_Fx = 'chrome://browser/skin/sidebars-right.svg';
            // false = use Firefox Icon, true = Custom Icon
            let new_tb_icon  = false;
            let ImagePath = ProfilePath + IconPath + Icon_tb;
    
            // Position switch button
            // Custom icon file
            let Icon_sw = 'toolbar_switch_4.svg';
            // Firefox icon
            let Icon_sw_Fx = 'chrome://global/skin/icons/arrow-right.svg';
            // false: use Firefox Icon, true: Custom Icon
            let new_tb_icon_sw  = false;
            let ImagePathSW = ProfilePath + IconPath + Icon_sw;
    
       // Custom background color: false = Off ; true = On (overwrites themes)
            let new_tb_color = false;
            // background color if true
            let new_tb_bg_color = 'hsla(200, 45%, 87%, 1)';
    
       // Border width, 0px = off
            let new_tb_border_width = '1px';
            // Border color
            //let new_tb_border_color = 'red';                                              // Fixed color
            //let new_tb_border_color = 'var(--sidebar-border-color)';                      // Firefox default
            let new_tb_border_color = 'color-mix(in srgb, currentColor 30%, transparent)';  // Custom self-adjusting color
    
    // Size of toolbar and buttons changes, must be px values, all 3 settings are related ==>
    
            // Change button sizes via padding, 8px default
            let new_tb_btn_size = '6px';
    
            // Distance between buttons, 2px default
            let new_tb_distance = '5px';
    
            // Width vertical toolbar / height horizontal toolbar, increased by this value on both sides
            // Increase distance of buttons to edges, 0px => toolbar size = button size
            let new_tb_size = '1px';
    
    // Expert mode ===>>>
    // Saving changes, initial states ==>
    
       // true = save states toolbar On/Off / position on quitting Firefox, false = don't save (prefs deleted)
            // 2x restart required once after change, to make the the option stick
            let new_tb_save = true;
    
       // Initial state toolbar visibility: 0 = On, 1 = Off, only if new_tb_save = false (not saved)
            let new_tb_off = 0;
       // Position initial state: 0 = right, 1 = left, 2 = bottom, only if new_tb_save = false (not saved), or new_tb_btn_sw = false
            let new_tb_loc = 0;
    
       // Position Switch button: true = Show, false = Hide
            let new_tb_btn_sw = true;
    
       // Extra: false = Button switches toolbar On/Off / changes Position for all open windows ; true = only active window
            let new_tb_uno = false;       // On/Off Button
            let new_tb_uno_sw = false;    // Position button
    
    // Possible problem solutions, if required, experimental ==>
    
       // Fix #1 for themes with low/ tiling background images, true / false, best to only use one of both
            let theme_fix = true;
            // Fix #2, overwrites Fix #1
            let theme_fix_2 = false;
    
       // Adjustments for Restore 'Space & Separator' items script for Firefox 102+ by Aris, true / false
            // https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/space_and_separator_restorer.uc.js
            let separator_fix = true;
    
    // End of user settings
    
            if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
            	Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
            }
    
            const pref_newtoolbar_state = "userchrome.newtoolbar.enabled";
    
            let ntb_box = document.createXULElement('toolbox');
            ntb_box.id = 'toolbox_new';
            ntb_box.setAttribute('orient','horizontal');
    
            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');
            ntb.setAttribute('toolbarname', 'New Toolbar');
            ntb.setAttribute('label', 'New Toolbar');
            ntb.setAttribute('orient', 'vertical');
            ntb.setAttribute("accesskey","");
    
            ntb_box.appendChild(ntb);
            document.getElementById('browser').parentNode.appendChild(ntb_box);
    
            CustomizableUI.registerArea('newtoolbar', {legacy: true});
            CustomizableUI.registerToolbarNode(ntb);
    
            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.top + 'px');
                } catch (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);
    
        //On/Off button
        try {
            CustomizableUI.createWidget({
              id: 'NewToolbar_button',
              defaultArea: CustomizableUI.AREA_NAVBAR,
              tooltiptext: 'Toolbar On',
              label: 'Toggle New Toolbar',
            });
        } catch(e) { }
    
        // Button function
         NewToolbar_button.addEventListener('click', event => {
            if (event.button === 0 ) {
              if (!new_tb_uno) {
                tb_toggle();
              }
              else {
                tb_toggle_uno();
              };
              if (NewToolbar_button.classList.contains("off-mode_btn")) {
                 NewToolbar_button.setAttribute("tooltiptext", "Toolbar Off");
                }
              else {
                NewToolbar_button.setAttribute("tooltiptext", "Toolbar On");
              };
            }
         });
    
        function tb_toggle() {
           for (let win of Services.wm.getEnumerator("navigator:browser")) {
             const toolbar = win.document.getElementById("newtoolbar");
             const browserArea = win.document.getElementById("browser");
             const button = win.document.getElementById("NewToolbar_button");
             toolbar.classList.toggle("off-mode");
             browserArea.classList.toggle("off-mode_b");
             button.classList.toggle("off-mode_btn");
             const ntb_visible = !toolbar.classList.contains("off-mode");
             Services.prefs.setBoolPref(pref_newtoolbar_state, ntb_visible);
             }
        };
    
        function tb_toggle_uno() {
             newtoolbar.classList.toggle("off-mode");
             browser.classList.toggle("off-mode_b");
             NewToolbar_button.classList.toggle("off-mode_btn");
             const ntb_visible = !newtoolbar.classList.contains("off-mode");
             Services.prefs.setBoolPref(pref_newtoolbar_state, ntb_visible);
        };
    
        // Position initial state
        if (new_tb_loc === 0) {
             toolbox_new.classList.add("right_mode");
             browser.classList.add("right_mode_b");
             NewToolbar_button.classList.add("right_mode_btn");
           }
        else 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");
           }
    
        let toolbarEnabled = true;
        try {
            toolbarEnabled = Services.prefs.getBoolPref(pref_newtoolbar_state);
        } catch(e) {
            Services.prefs.setBoolPref(pref_newtoolbar_state, new_tb_off === 0);
            toolbarEnabled = new_tb_off === 0;
        }
        if (!toolbarEnabled) {
            newtoolbar.classList.add("off-mode");
            browser.classList.add("off-mode_b");
            NewToolbar_button.classList.add("off-mode_btn");
            NewToolbar_button.setAttribute("tooltiptext", "Toolbar Off");
        }
    
        // Icon
        if (new_tb_icon) {
             NewToolbar_button.classList.add("icon_mode");
           }
        // Background color
        if (new_tb_color) {
             newtoolbar.classList.add("ntb_bg_color");
           }
    
        // Code by Aris => Attach handlers for buttons moved outside #navigator-toolbox
        // Based on: https://searchfox.org/firefox-main/source/browser/base/content/navigator-toolbox.js
        const customHandlers = {
        	  "unified-extensions-button": (el, e) => gUnifiedExtensions.togglePanel(e),
        	  "fxa-toolbar-menu-button":   (el, e) => gSync.toggleAccountPanel(el, e),
        	  "firefox-view-button":       (el, e) => FirefoxViewHandler.openToolbarMouseEvent(e),
        	  "downloads-button":          (el, e) => DownloadsIndicatorView.onCommand(e),
        	  "pageActionButton":          (el, e) => BrowserPageActions.mainButtonClicked(e),
        	  "alltabs-button":            (el, e) => gTabsPanel.showAllTabsPanel(e, "alltabs-button"),
        	  "library-button":            (el, e) => PanelUI.showSubView("appMenu-libraryView", el, e),
        	  "import-button":             (el, e) => MigrationUtils.showMigrationWizard(window, {
      	  entrypoint: MigrationUtils.MIGRATION_ENTRYPOINTS.BOOKMARKS_TOOLBAR,
      	  }),
        };
    		document.getElementById("newtoolbar").addEventListener("mousedown", (e) => {
    		  const button = e.target.closest("toolbarbutton");
    		  if (button?.id && customHandlers[button.id]) customHandlers[button.id](button, e);
    		});
    
    // Position switch button
        const pref_position = "userchrome.newtoolbar.position";
        function getPositionPref() {
            try {
                return Services.prefs.getCharPref(pref_position);
            } catch (e) {
                return "right"; // Standardwert
            }
        }
        function setPositionPref(value) {
            Services.prefs.setCharPref(pref_position, value);
        }
    
        try {
            CustomizableUI.createWidget({
              id: 'NewToolbar_position',
              defaultArea: CustomizableUI.AREA_NAVBAR,
    	  	    label: "Position New Toolbar",
    	  	    tooltiptext: 'Position New toolbar',
            });
         } catch(e) { };
    
         // Context menu menuitem alt
         let refItemSW = document.createXULElement("menuitem");
         refItemSW.setAttribute('id', 'NewToolbar_position_Con');
         refItemSW.setAttribute('closemenu', 'none');
         refItemSW.setAttribute('label', 'Toolbar Position');
         refItemSW.classList.add('menuitem-iconic');
    
         let refItemSW_A = document.getElementById('toolbar-context-menu');
    
         let refItemSW_S = document.querySelector('.viewCustomizeToolbar');
         refItemSW_A.insertBefore(refItemSW, refItemSW_S);
    
         let menuseparator_sw = document.createXULElement("menuseparator");
         menuseparator_sw.setAttribute('id', 'sw_sep');
         refItemSW_A.insertBefore(menuseparator_sw, refItemSW.nextSibling);
    
    // //fix 1 oben
      (function add_button() {
            let btn_exists = document.getElementById('NewToolbar_position');
            //let btn_exists_C = document.getElementById('NewToolbar_position_Con');
            if (btn_exists) {
          //if (btn_exists || btn_exists_C) {
    
            //    setTimeout(() => {
        		// CustomizableUI.registerArea('newtoolbar', {legacy: true});
        	  // },2000);
    
         function applyPosition(pos) {
            toolbox_new.classList.remove("left_mode", "bottom_mode", "right_mode");
            browser.classList.remove("left_mode_b", "bottom_mode_b", "right_mode_b");
            NewToolbar_button.classList.remove("left_mode_btn", "bottom_mode_btn", "right_mode_btn");
            NewToolbar_position.classList.remove("left_mode_sw", "bottom_mode_sw", "right_mode_sw");
            NewToolbar_position_Con.classList.remove("left_mode_sw", "bottom_mode_sw", "right_mode_sw");
            if (pos === "left") {
                toolbox_new.classList.add("left_mode");
                browser.classList.add("left_mode_b");
                NewToolbar_button.classList.add("left_mode_btn");
                NewToolbar_position.classList.add("left_mode_sw");
                NewToolbar_position_Con.classList.add("left_mode_sw");
            } else if (pos === "bottom") {
                toolbox_new.classList.add("bottom_mode");
                browser.classList.add("bottom_mode_b");
                NewToolbar_button.classList.add("bottom_mode_btn");
                NewToolbar_position.classList.add("bottom_mode_sw");
                NewToolbar_position_Con.classList.add("bottom_mode_sw");
            } else if (pos === "right") {
                toolbox_new.classList.add("right_mode");
                browser.classList.add("right_mode_b");
                NewToolbar_button.classList.add("right_mode_btn");
                NewToolbar_position.classList.add("right_mode_sw");
                NewToolbar_position_Con.classList.add("right_mode_sw");
            }
         }
         let savedPos = getPositionPref();
         applyPosition(savedPos);
    
        // Button function
         NewToolbar_position.addEventListener('click', event => {
            if (event.button === 0 ) {
              if (!new_tb_uno_sw) {
                poser();
              }
              else {
                poser_uno();
              };
            }
         });
    
        // Icon Position
        if (new_tb_icon_sw) {
             NewToolbar_position.classList.add("icon_mode_sw");
           }
    //fix 1 unten B
      } else {
        setTimeout(add_button, 400);
      }
      })();
    
         document.getElementById("NewToolbar_position_Con").addEventListener('click', event => {
            if (event.button === 0 ) {
              if (!new_tb_uno_sw) {
                poser();
              }
              else {
                poser_uno();
              };
            }
         });
    
         function poser() {
    			 for (let win of Services.wm.getEnumerator("navigator:browser")) {
               const toolbox = win.document.getElementById("toolbox_new");
               const browserArea = win.document.getElementById("browser");
               const button = win.document.getElementById("NewToolbar_button");
               const button_sw = win.document.getElementById("NewToolbar_position");
               const button_con = win.document.getElementById("NewToolbar_position_Con");
               if (toolbox.classList.contains("right_mode")) {
                    toolbox.classList.replace("right_mode", "left_mode");
                    browserArea.classList.replace("right_mode_b", "left_mode_b");
                    button.classList.replace("right_mode_btn", "left_mode_btn");
                    button_sw.classList.replace("right_mode_sw", "left_mode_sw");
                    button_con.classList.replace("right_mode_sw", "left_mode_sw");
                    setPositionPref("left");
                   }
               else if (toolbox.classList.contains("left_mode")) {
                    toolbox.classList.replace("left_mode", "bottom_mode");
                    browserArea.classList.replace("left_mode_b", "bottom_mode_b");
                    button.classList.replace("left_mode_btn", "bottom_mode_btn");
                    button_sw.classList.replace("left_mode_sw", "bottom_mode_sw");
                    button_con.classList.replace("left_mode_sw", "bottom_mode_sw");
                    setPositionPref("bottom");
                   }
               else if (toolbox.classList.contains("bottom_mode")) {
                    toolbox.classList.replace("bottom_mode", "right_mode");
                    browserArea.classList.replace("bottom_mode_b", "right_mode_b");
                    button.classList.replace("bottom_mode_btn", "right_mode_btn");
                    button_sw.classList.replace("bottom_mode_sw", "right_mode_sw");
                    button_con.classList.replace("bottom_mode_sw", "right_mode_sw");
                    setPositionPref("right");
                   }
                 }
               };
    
         function poser_uno() {
               if (toolbox_new.classList.contains("right_mode")) {
                    toolbox_new.classList.replace("right_mode", "left_mode");
                    browser.classList.replace("right_mode_b", "left_mode_b");
                    NewToolbar_button.classList.replace("right_mode_btn", "left_mode_btn");
                    NewToolbar_position.classList.replace("right_mode_sw", "left_mode_sw");
                    NewToolbar_position_Con.classList.replace("right_mode_sw", "left_mode_sw");
                    setPositionPref("left");
                   }
               else if (toolbox_new.classList.contains("left_mode")) {
                    toolbox_new.classList.replace("left_mode", "bottom_mode");
                    browser.classList.replace("left_mode_b", "bottom_mode_b");
                    NewToolbar_button.classList.replace("left_mode_btn", "bottom_mode_btn");
                    NewToolbar_position.classList.replace("left_mode_sw", "bottom_mode_sw");
                    NewToolbar_position_Con.classList.replace("left_mode_sw", "bottom_mode_sw");
                    setPositionPref("bottom");
                   }
               else if (toolbox_new.classList.contains("bottom_mode")) {
                    toolbox_new.classList.replace("bottom_mode", "right_mode");
                    browser.classList.replace("bottom_mode_b", "right_mode_b");
                    NewToolbar_button.classList.replace("bottom_mode_btn", "right_mode_btn");
                    NewToolbar_position.classList.replace("bottom_mode_sw", "right_mode_sw");
                    NewToolbar_position_Con.classList.replace("bottom_mode_sw", "right_mode_sw");
                    setPositionPref("right");
                   }
               };
    
        // Icon Position menuitem
        if (new_tb_icon_sw) {
             NewToolbar_position_Con.classList.add("icon_mode_sw");
           }
    
        // Hide switch button
        if (!new_tb_btn_sw) {
            NewToolbar_position.style.setProperty('display', 'none');
        }
    
        // On quitting Firefox: delete Prefs, if new_tb_save = false
        if (!new_tb_save) {
             Services.obs.addObserver(function observer(subject, topic, data) {
                 if (topic === "quit-application-granted") {
                     try {
                         Services.prefs.clearUserPref(pref_newtoolbar_state);
                         Services.prefs.clearUserPref(pref_position);
                     } catch (e) { }
                     Services.obs.removeObserver(observer, "quit-application-granted");
                 }
             }, "quit-application-granted");
          };
    
    //fix 1 unten
      // } else {
      //   setTimeout(add_button, 400);
      // }
      // })();
    
    let css =`
    
    #main-window {
        --ug-newbar_basewidth: calc(2 * ${new_tb_btn_size} + 16px);  /* Minimalgroesse = Groesse Buttons */
        --ug-newbar_width: calc(var(--ug-newbar_basewidth) + ${new_tb_border_width} + 2 * `+new_tb_size+`);
    }
    
    /*- Buttons -*/
    
    /* Buttons sizes */
    #newtoolbar {
        --toolbarbutton-inner-padding: ${new_tb_btn_size} !important;
    	 	--toolbarbutton-outer-padding: 0px !important;
    }
    /*  On/Off Button  */
    #NewToolbar_button .toolbarbutton-icon {
        list-style-image: url("${Icon_tb_Fx}");
    }
    #NewToolbar_button.icon_mode .toolbarbutton-icon {
        list-style-image: url("${ImagePath}");
    }
    #NewToolbar_button.off-mode_btn:not(:hover, :active) .toolbarbutton-icon {
        opacity: 0.4;
    }
    /*  Switch Button  */
    #NewToolbar_position .toolbarbutton-icon {
        list-style-image: url("${Icon_sw_Fx}");
    }
    #NewToolbar_position.icon_mode_sw .toolbarbutton-icon {
        list-style-image: url("${ImagePathSW}");
    }
    /*  Button adjustments to Toolbar Position  */
    :is(#NewToolbar_button.left_mode_btn, #NewToolbar_position.left_mode_sw) .toolbarbutton-icon,
    #NewToolbar_position_Con.left_mode_sw :is(image, img) {
        transform: rotate(180deg);
    }
    :is(#NewToolbar_button.bottom_mode_btn, #NewToolbar_position.bottom_mode_sw) .toolbarbutton-icon,
    #NewToolbar_position_Con.bottom_mode_sw :is(image, img) {
        transform: rotate(90deg);
    }
    
    #NewToolbar_position_Con {
        -moz-context-properties: fill, fill-opacity !important;
        fill: currentColor !important;
    }
    
    #NewToolbar_position_Con :is(image, img) {
        list-style-image: url("${Icon_sw_Fx}");
        content: url("${Icon_sw_Fx}") !important;
    }
    #NewToolbar_position_Con.icon_mode_sw :is(image, img) {
        list-style-image: url("${ImagePathSW}");
        content: url("${ImagePathSW}") !important;
    }
    
    /*:root[customizing] */
    /*
    toolbarpaletteitem[place="palette"] #NewToolbar_position {
        outline: 2px solid red !important;
        pointer-events: none !important;
    }
    */
    
    #unified-extensions-button[hidden] {
        visibility: visible !important;
        display: flex !important;
    }
    
    /*--  Browser adjustments  --*/
    
    #browser.right_mode_b {
        transition: padding-right 0.25s ease !important;
    }
    #browser.left_mode_b {
        transition: padding-left 0.25s ease !important;
    }
    #browser.bottom_mode_b {
        transition: padding-bottom 0.25s ease !important;
    }
    #browser:not(.off-mode_b).right_mode_b {
        padding-right: var(--ug-newbar_width) !important;
    }
    #browser:not(.off-mode_b).left_mode_b {
        padding-left: var(--ug-newbar_width) !important;
    }
    #browser:not(.off-mode_b).bottom_mode_b {
        padding-bottom: var(--ug-newbar_width) !important;
    }
    
    /*--  Basics / Right  --*/
    
    #toolbox_new {
        position: fixed;
        z-index: 2 !important;
        display: flex;
        width: fit-content;
        top: var(--height_newbar_top);
        right: 0px;
    }
    #newtoolbar {
        display: flex;
        min-width: var(--ug-newbar_basewidth) !important;
        width: var(--ug-newbar_width) !important;
        min-height: var(--ug-newbar_basewidth) !important;
        height: var(--height_newbar) !important;
        align-items: center !important;
        overflow: hidden !important;
        padding-block: 8px;
        border-width: 0px;
        border-style: solid !important;
        border-color: ${new_tb_border_color} !important;
        border-left-width: ${new_tb_border_width};
        border-right-width: 0px;
        margin-inline: 0px;
    }
    
    #toolbox_new:not(.bottom_mode) #newtoolbar:not([customizing]) {
        max-width: var(--ug-newbar_width) !important;
        transition: width 0.25s ease, max-width 0.25s ease, min-width 0.25s ease, border-left-width 0.125s ease;
    }
    
    #toolbox_new #newtoolbar:not([customizing]).off-mode {
        min-width: 0px !important;
        width: 0px !important;
        max-width: 0px !important;
        min-height: unset !important;
        max-height: unset !important;
        border-width: 0px !important;
        box-shadow: none !important;
    }
    
    #newtoolbar:not([customizing]).off-mode > :is(.toolbarbutton-1, toolbaritem) {
        opacity: 0 !important;
    }
    #newtoolbar > :is(.toolbarbutton-1, toolbaritem),
    #newtoolbar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
        margin-block: ${new_tb_distance} !important;
        margin-inline: var(--toolbarbutton-outer-padding) !important;
        transition: opacity 0.125s ease;
    }
    
    /*--  Left  --*/
    
    #toolbox_new.left_mode {
        right: unset;
        left: 0px;
    }
    #toolbox_new.left_mode #newtoolbar:not([customizing]) {
        border-left-width: 0px;
        border-right-width: ${new_tb_border_width};
        transition: width 0.25s ease, max-width 0.25s ease, min-width 0.25s ease, border-right-width 0.125s ease;
    }
    
    /*--  Bottom  --*/
    
    #toolbox_new.bottom_mode {
        top: unset;
        bottom: 0px;
    }
    #toolbox_new.bottom_mode #newtoolbar:not([customizing]) {
        flex-direction: row !important;
        min-height: 0px !important;
        height: var(--ug-newbar_width) !important;
        max-height: var(--ug-newbar_width) !important;
        min-width: 0px !important;
        width: 100vw !important;
        padding-block: 0px;
        padding-inline: 8px;
        border-inline-width: 0px;
        border-top-width: ${new_tb_border_width};
        /*justify-content: center !important;*/    /* Inhalt mittig, optional */
        transition: height 0.25s ease, max-height 0.25s ease, min-height 0.25s ease, border-top-width 0.125s ease !important;
    }
    #toolbox_new.bottom_mode #newtoolbar:not([customizing]).off-mode {
        min-height: 0px !important;
        height: 0px !important;
        max-height: 0px !important;
        max-width: unset !important;
    }
    #toolbox_new.bottom_mode #newtoolbar:not([customizing]) > :is(.toolbarbutton-1, toolbaritem),
    #toolbox_new.bottom_mode #newtoolbar:not([customizing]) toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
        margin-block: var(--toolbarbutton-outer-padding) !important;
        margin-inline: ${new_tb_distance} !important;
    }
    
    /*--  Fullscreen  --*/
    
    /* 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  --*/
    
    #main-window[customizing] #toolbox_new {
        top: unset !important;
        bottom: 0 !important;
        right: 0 !important;
        left: unset !important;
    }
    #newtoolbar[customizing] {
        height: calc(100vh - var(--height_newbar_c)) !important;
        box-shadow: inset 0px 1px ${new_tb_border_color};
        transition: none !important;
    }
    #main-window:not([customizing]) #newtoolbar[customizing].off-mode {
        min-width: 0px !important;
        width: 0px !important;
        min-height: 0px !important;
        height: 0px !important;
        border-width: 0px !important;
    }
    #customization-container {
        margin-right: var(--ug-newbar_width) !important;
    }
    
    /*-  Background oolors themes  -*/
    
    /* Custom toolbar background color if enabled */
    #newtoolbar.ntb_bg_color {
        background-color: ${new_tb_bg_color} !important;
    }
    
    /*- Background themes, if background images are tiled, try theme_fix options above -*/
    
    :root[lwtheme] #newtoolbar:not(.ntb_bg_color) {
        background-color: var(--lwt-accent-color, var(--toolbar-bgcolor)) !important;
    }
    :root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color) {
        background-image: var(--lwt-header-image) !important;
        background-position: right 0px top 0px !important;
    }
    
    /* Icon colors */
    /*
    .squareClass {
        fill: green;
    }
    .strichClass {
        fill: purple;
    }
    .strichClassW {
        fill: cyan;
    }
    .arrowClass {
        fill: orange;
    }
    */
    
      `;
    
    if (theme_fix) {
      css += `
    /*-  Fix #1 for themes with tiled background images  -*/
    
    :root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color) {
        background: var(--lwt-header-image) !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: right 0px top 0px !important;
    }
    :root[lwtheme][lwtheme-image] #toolbox_new.bottom_mode #newtoolbar:not(.ntb_bg_color) {
        background-size: auto !important;
    }
     `;
    }
    
    if (theme_fix_2) {
      css += `
    /*-  Fix #2 for themes with tiled background images  -*/
    
    :root[lwtheme][lwtheme-image] #toolbox_new #newtoolbar:not(.ntb_bg_color) {
         background: transparent !important;
    }
    :root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color)::before {
        content: "" ;
        position: absolute;
        top: 0;
        right: 0;
        width: var(--height_newbar) !important;
        height: var(--ug-newbar_width) !important;
        pointer-events: none;
        z-index: -1 !important;
        background: var(--lwt-header-image) !important;
        background-repeat: no-repeat !important;
        transform: rotate(-90deg) translateX(var(--ug-newbar_width)) !important;
        transform-origin: 100% 100% !important;
        transition: margin 0.25s ease;
    }
    :root[lwtheme][lwtheme-image] #toolbox_new.bottom_mode #newtoolbar:not(.ntb_bg_color, [customizing])::before {
        transform: scaleX(-1) !important;
        transform-origin: 50% 50% !important;
        width: 100% !important;
    }
    :root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color)[customizing]::before {
        width: calc(100vh - var(--height_newbar_c)) !important;
    }
    #newtoolbar:not([customizing]).off-mode::before {
        min-width: 0px !important;
        margin-inline: 0px calc(0px - var(--ug-newbar_width));
    }
    #toolbox_new.left_mode #newtoolbar:not([customizing]).off-mode::before {
        margin-inline: calc(0px - var(--ug-newbar_width)) 0;
    }
    #toolbox_new.bottom_mode #newtoolbar:not([customizing]).off-mode::before {
        min-height: 0px !important;
        margin-inline: 0px;
        margin-block: 0px calc(0px - var(--ug-newbar_width)) !important;
    }
     `;
    }
    
    if (separator_fix) {
      css += `
    /* Adjustments for Separator Scripts  */
    
    #newtoolbar toolbarseparator {
        width: calc(var(--ug-newbar_width) - ${new_tb_border_width} - 6px) !important;
        margin: 5px 0px !important;
        border-block-color: hsl(0, 0%, 0%, 0.45) hsl(0, 0%, 100%, 0.55) !important;
        transition: width 0.125s ease !important;
    }
    #newtoolbar :is(toolbarspacer, toolbarspring, toolbarseparator) {
        min-width: 0px !important;
    }
    #newtoolbar:not([customizing]).off-mode toolbarseparator {
        width: 0px !important;
    }
    #toolbox_new.bottom_mode #newtoolbar:not([customizing]) toolbarseparator {
        transform: rotate(-90deg) !important;
        margin: 0px !important;
    }
    #newtoolbar[customizing] toolbarseparator {
        margin-block: 16px !important;
    }
     `;
    }
    
      const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
      const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
      sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
    
    })();
    Alles anzeigen
  • Eigene Zusatzleisten ab ff 143+

    • Horstmann
    • 20. November 2025 um 22:30
    Zitat von Mira_Belle

    Du hast Dich da ganz schön verbissen!

    Wieder mal. ^^

    Aber sonst war's immer ein Teil von einem unserer Community Projekte mit Mitstreitern, nur das hier braucht anscheinend kaum einer. :|

  • Eigene Zusatzleisten ab ff 143+

    • Horstmann
    • 20. November 2025 um 20:46
    Zitat von Horstmann

    A propos, ein Bug: keiner der beiden Buttons für die Leiste darf komplett aus den Symbolleisten oder dem Overflowmenü entfernt werden, sonst zerschiesst es den Code nach Neustart. =O
    Das lässt sich korrigieren wenn man im Anpassenfenster den betroffenen Button wieder in eine Leiste zieht und neu startet, nervt aber.

    Ein Problem mit dem ich schon 1000x gekämpft habe; scheint dass alle eigenen Buttons (mit wie von mir benutzten Buttoncodes), die nur im Anpassenbereich (#customization-palette) abgelegt sind, mit Verzögerung (lazy) geladen werden, und dann deren Referenz in Funktionen etc. gebrochen wird => Errors, und der Rest vom Script wird stillgelegt. ?(
    Vorschläge willkommen. ;)

    Nach viel zu vielen Versuchen das Problem zu lösen, diverse Versionen von Timeouts etc. sind generell eine mögliche Lösung.

    Aber - und das gilt für alle Zusatzleisten Scripts die ich getestet habe, inkl. Aris's- falls das Entfernen der Toolbarbuttons via Verzögerungen des Ladens der Leiste an sich den Kollaps vermeidet - selber erstellte Buttons werden dann nicht, oder nur verspätet, oder in einem neuen Fenster dargestellt. :/

    Helfen könnte uU alle in der Zusatzleiste vorhandenen Buttons neu zu laden, oder mit Verzögerung in die Zusatzleiste zu stellen, beim Start von Firefox.

    Lösungen herzlich willkommen. ;)

  • Eigene Zusatzleisten ab ff 143+

    • Horstmann
    • 19. November 2025 um 21:49

    Hier dann mit Kontextmenü Eintrag; den Bug aus #130 konnte ich nicht (sauber) abschaffen, also hab ich das mal beiseite gelassen.
    Wenn jemand eine Idee hat, wie man das Verschieben eines Buttons nur in die customization-palette verhindern kann, ähnlich evtl. wie bei Extension Buttons, nur zu. ;)

    Dank Mitleser's Tips lässt sich jetzt auch die Position im Kontextmenü durchschalten, ohne dass das Popup dabei schliesst.
    Sonst sind Funktion, Einstellungen und CSS für den Rest unverändert.

    JavaScript
    // Additional toolbars
    // Buttons to turn toolbar On/Off, or switch toolbar position
    
    // Use filename starting with 00 for custom button functions !! =>
    // 00_extra_toolbars_V13.uc.js
    
    // BUG: Both buttons included in the script must not be moved out of either any toolbars or the overflow menu!!!
    // If you do so by accident, move the button back using customize mode, and restart
    
    // Based on: 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// Latest versions and icons =>
    // Forum topic: https://www.camp-firefox.de/forum/thema/139927-eigene-zusatzleisten-ab-ff-143/
    // Kudos to Aris and Mitleser
    
    // ATTENTION: Some system buttons can still be moved to additional/custom toolbars, but they will have no function.
    // There is a patch by @BrokenHeart: https://www.camp-firefox.de/forum/thema/138875-fix-toolbar-buttons-reagieren-nicht-mehr-ab-ff-134/
    // Different patch re. the issue by Aris included in this script, experimental
    
    // Version V13
    
    (function() {
        if (location.href !== 'chrome://browser/content/browser.xhtml')
            return;
    
    // User settings
    // After script changes, restart with Clear StartUp Cache => about:support
    
       // Custom Icons, expected in profile-name/chrome/icons folder ("icons" folder needs to be created)
            let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
            let IconPath = '/chrome/icons/';
    
            // On/Off Button
            // Custom icon file
            let Icon_tb = 'toolbar_4.svg';
            // Firefox icon
            let Icon_tb_Fx = 'chrome://browser/skin/sidebars-right.svg';
            // false = use Firefox Icon, true = Custom Icon
            let new_tb_icon  = false;
            let ImagePath = ProfilePath + IconPath + Icon_tb;
    
            // Position switch button
            // Custom icon file
            let Icon_sw = 'toolbar_switch_4.svg';
            // Firefox icon
            let Icon_sw_Fx = 'chrome://global/skin/icons/arrow-right.svg';
            // false: use Firefox Icon, true: Custom Icon
            let new_tb_icon_sw  = false;
            let ImagePathSW = ProfilePath + IconPath + Icon_sw;
    
       // Custom background color: false = Off ; true = On (overwrites themes)
            let new_tb_color = false;
            // background color if true
            let new_tb_bg_color = 'hsla(200, 45%, 87%, 1)';
    
       // Border width, 0px = off
            let new_tb_border_width = '1px';
            // Border color
            //let new_tb_border_color = 'red';                                              // Fixed color
            //let new_tb_border_color = 'var(--sidebar-border-color)';                      // Firefox default
            let new_tb_border_color = 'color-mix(in srgb, currentColor 30%, transparent)';  // Custom self-adjusting color
    
    // Size of toolbar and buttons changes, must be px values, all 3 settings are related ==>
    
            // Change button sizes via padding, 8px default
            let new_tb_btn_size = '6px';
    
            // Distance between buttons, 2px default
            let new_tb_distance = '5px';
    
            // Width vertical toolbar / height horizontal toolbar, increased by this value on both sides
            // Increase distance of buttons to edges, 0px => toolbar size = button size
            let new_tb_size = '1px';
    
    // Expert mode ===>>>
    // Saving changes, initial states ==>
    
       // true = save states toolbar On/Off / position on quitting Firefox, false = don't save (prefs deleted)
            // 2x restart required once after change, to make the the option stick
            let new_tb_save = true;
    
       // Initial state toolbar visibility: 0 = On, 1 = Off, only if new_tb_save = false (not saved)
            let new_tb_off = 0;
       // Position initial state: 0 = right, 1 = left, 2 = bottom, only if new_tb_save = false (not saved), or new_tb_btn_sw = false
            let new_tb_loc = 0;
    
       // Position Switch button: true = Show, false = Hide
            let new_tb_btn_sw = true;
    
       // Extra: false = Button switches toolbar On/Off / changes Position for all open windows ; true = only active window
            let new_tb_uno = false;       // On/Off Button
            let new_tb_uno_sw = false;    // Position button
    
    // Possible problem solutions, if required, experimental ==>
    
       // Fix #1 for themes with low/ tiling background images, true / false, best to only use one of both
            let theme_fix = true;
            // Fix #2, overwrites Fix #1
            let theme_fix_2 = false;
    
       // Adjustments for Restore 'Space & Separator' items script for Firefox 102+ by Aris, true / false
            // https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/space_and_separator_restorer.uc.js
            let separator_fix = true;
    
    // End of user settings
    
            if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
            	Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
            }
    
            const pref_newtoolbar_state = "userchrome.newtoolbar.enabled";
    
            let ntb_box = document.createXULElement('toolbox');
            ntb_box.id = 'toolbox_new';
            ntb_box.setAttribute('orient','horizontal');
    
            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');
            ntb.setAttribute('toolbarname', 'New Toolbar');
            ntb.setAttribute('label', 'New Toolbar');
            ntb.setAttribute('orient', 'vertical');
            ntb.setAttribute("accesskey","");
    
            ntb_box.appendChild(ntb);
            document.getElementById('browser').parentNode.appendChild(ntb_box);
    
            CustomizableUI.registerArea('newtoolbar', {legacy: true});
            CustomizableUI.registerToolbarNode(ntb);
    
            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.top + 'px');
                } catch (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);
    
        //On/Off button
        try {
            CustomizableUI.createWidget({
              id: 'NewToolbar_button',
              defaultArea: CustomizableUI.AREA_NAVBAR,
              tooltiptext: 'Toolbar On',
              label: 'Toggle New Toolbar',
            });
        } catch(e) { }
    
        // Button function
         NewToolbar_button.addEventListener('click', event => {
            if (event.button === 0 ) {
              if (!new_tb_uno) {
                tb_toggle();
              }
              else {
                tb_toggle_uno();
              };
              if (NewToolbar_button.classList.contains("off-mode_btn")) {
                 NewToolbar_button.setAttribute("tooltiptext", "Toolbar Off");
                }
              else {
                NewToolbar_button.setAttribute("tooltiptext", "Toolbar On");
              };
            }
         });
    
        function tb_toggle() {
           for (let win of Services.wm.getEnumerator("navigator:browser")) {
             const toolbar = win.document.getElementById("newtoolbar");
             const browserArea = win.document.getElementById("browser");
             const button = win.document.getElementById("NewToolbar_button");
             toolbar.classList.toggle("off-mode");
             browserArea.classList.toggle("off-mode_b");
             button.classList.toggle("off-mode_btn");
             const ntb_visible = !toolbar.classList.contains("off-mode");
             Services.prefs.setBoolPref(pref_newtoolbar_state, ntb_visible);
             }
        };
    
        function tb_toggle_uno() {
             newtoolbar.classList.toggle("off-mode");
             browser.classList.toggle("off-mode_b");
             NewToolbar_button.classList.toggle("off-mode_btn");
             const ntb_visible = !newtoolbar.classList.contains("off-mode");
             Services.prefs.setBoolPref(pref_newtoolbar_state, ntb_visible);
        };
    
        // Position initial state
        if (new_tb_loc === 0) {
             toolbox_new.classList.add("right_mode");
             browser.classList.add("right_mode_b");
             NewToolbar_button.classList.add("right_mode_btn");
           }
        else 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");
           }
    
        let toolbarEnabled = true;
        try {
            toolbarEnabled = Services.prefs.getBoolPref(pref_newtoolbar_state);
        } catch(e) {
            Services.prefs.setBoolPref(pref_newtoolbar_state, new_tb_off === 0);
            toolbarEnabled = new_tb_off === 0;
        }
        if (!toolbarEnabled) {
            newtoolbar.classList.add("off-mode");
            browser.classList.add("off-mode_b");
            NewToolbar_button.classList.add("off-mode_btn");
            NewToolbar_button.setAttribute("tooltiptext", "Toolbar Off");
        }
    
        // Icon
        if (new_tb_icon) {
             NewToolbar_button.classList.add("icon_mode");
           }
        // Background color
        if (new_tb_color) {
             newtoolbar.classList.add("ntb_bg_color");
           }
    
        // Code by Aris => Attach handlers for buttons moved outside #navigator-toolbox
        // Based on: https://searchfox.org/firefox-main/source/browser/base/content/navigator-toolbox.js
        const customHandlers = {
        	  "unified-extensions-button": (el, e) => gUnifiedExtensions.togglePanel(e),
        	  "fxa-toolbar-menu-button":   (el, e) => gSync.toggleAccountPanel(el, e),
        	  "firefox-view-button":       (el, e) => FirefoxViewHandler.openToolbarMouseEvent(e),
        	  "downloads-button":          (el, e) => DownloadsIndicatorView.onCommand(e),
        	  "pageActionButton":          (el, e) => BrowserPageActions.mainButtonClicked(e),
        	  "alltabs-button":            (el, e) => gTabsPanel.showAllTabsPanel(e, "alltabs-button"),
        	  "library-button":            (el, e) => PanelUI.showSubView("appMenu-libraryView", el, e),
        	  "import-button":             (el, e) => MigrationUtils.showMigrationWizard(window, {
      	  entrypoint: MigrationUtils.MIGRATION_ENTRYPOINTS.BOOKMARKS_TOOLBAR,
      	  }),
        };
    		document.getElementById("newtoolbar").addEventListener("mousedown", (e) => {
    		  const button = e.target.closest("toolbarbutton");
    		  if (button?.id && customHandlers[button.id]) customHandlers[button.id](button, e);
    		});
    
    // Position switch button
        const pref_position = "userchrome.newtoolbar.position";
        function getPositionPref() {
            try {
                return Services.prefs.getCharPref(pref_position);
            } catch (e) {
                return "right"; // Standardwert
            }
        }
        function setPositionPref(value) {
            Services.prefs.setCharPref(pref_position, value);
        }
    
        try {
            CustomizableUI.createWidget({
              id: 'NewToolbar_position',
              defaultArea: CustomizableUI.AREA_NAVBAR,
    	  	    label: "Position New Toolbar",
    	  	    tooltiptext: 'Position New toolbar',
            });
         } catch(e) { };
    
         // Context menu menuitem
         let refItemSW = document.createXULElement("menuitem");
         refItemSW.setAttribute('id', 'NewToolbar_position_Con');
         refItemSW.setAttribute('closemenu', 'none');
         refItemSW.setAttribute('label', 'Toolbar Position');
         refItemSW.classList.add('menuitem-iconic');
    
         let refItemSW_A = document.getElementById('toolbar-context-menu');
    
         let refItemSW_S = document.querySelector('.viewCustomizeToolbar');
         refItemSW_A.insertBefore(refItemSW, refItemSW_S);
    
         let menuseparator_sw = document.createXULElement("menuseparator");
         menuseparator_sw.setAttribute('id', 'sw_sep');
         refItemSW_A.insertBefore(menuseparator_sw, refItemSW.nextSibling);
    
         NewToolbar_position_Con.addEventListener('click', event => {
           if (event.button === 0 ) {
             if (!new_tb_uno_sw) {
               poser();
             }
             else {
               poser_uno();
             };
           }
         });
    
         function applyPosition(pos) {
            toolbox_new.classList.remove("left_mode", "bottom_mode", "right_mode");
            browser.classList.remove("left_mode_b", "bottom_mode_b", "right_mode_b");
            NewToolbar_button.classList.remove("left_mode_btn", "bottom_mode_btn", "right_mode_btn");
            NewToolbar_position.classList.remove("left_mode_sw", "bottom_mode_sw", "right_mode_sw");
            NewToolbar_position_Con.classList.remove("left_mode_sw", "bottom_mode_sw", "right_mode_sw");
            if (pos === "left") {
                toolbox_new.classList.add("left_mode");
                browser.classList.add("left_mode_b");
                NewToolbar_button.classList.add("left_mode_btn");
                NewToolbar_position.classList.add("left_mode_sw");
                NewToolbar_position_Con.classList.add("left_mode_sw");
            } else if (pos === "bottom") {
                toolbox_new.classList.add("bottom_mode");
                browser.classList.add("bottom_mode_b");
                NewToolbar_button.classList.add("bottom_mode_btn");
                NewToolbar_position.classList.add("bottom_mode_sw");
                NewToolbar_position_Con.classList.add("bottom_mode_sw");
            } else if (pos === "right") {
                toolbox_new.classList.add("right_mode");
                browser.classList.add("right_mode_b");
                NewToolbar_button.classList.add("right_mode_btn");
                NewToolbar_position.classList.add("right_mode_sw");
                NewToolbar_position_Con.classList.add("right_mode_sw");
            }
         }
         let savedPos = getPositionPref();
         applyPosition(savedPos);
    
        // Button function
         NewToolbar_position.addEventListener('click', event => {
            if (event.button === 0 ) {
              if (!new_tb_uno_sw) {
                poser();
              }
              else {
                poser_uno();
              };
            }
         });
    
         function poser() {
    			 for (let win of Services.wm.getEnumerator("navigator:browser")) {
               const toolbox = win.document.getElementById("toolbox_new");
               const browserArea = win.document.getElementById("browser");
               const button = win.document.getElementById("NewToolbar_button");
               const button_sw = win.document.getElementById("NewToolbar_position");
               const button_con = win.document.getElementById("NewToolbar_position_Con");
               if (toolbox.classList.contains("right_mode")) {
                    toolbox.classList.replace("right_mode", "left_mode");
                    browserArea.classList.replace("right_mode_b", "left_mode_b");
                    button.classList.replace("right_mode_btn", "left_mode_btn");
                    button_sw.classList.replace("right_mode_sw", "left_mode_sw");
                    button_con.classList.replace("right_mode_sw", "left_mode_sw");
                    setPositionPref("left");
                   }
               else if (toolbox.classList.contains("left_mode")) {
                    toolbox.classList.replace("left_mode", "bottom_mode");
                    browserArea.classList.replace("left_mode_b", "bottom_mode_b");
                    button.classList.replace("left_mode_btn", "bottom_mode_btn");
                    button_sw.classList.replace("left_mode_sw", "bottom_mode_sw");
                    button_con.classList.replace("left_mode_sw", "bottom_mode_sw");
                    setPositionPref("bottom");
                   }
               else if (toolbox.classList.contains("bottom_mode")) {
                    toolbox.classList.replace("bottom_mode", "right_mode");
                    browserArea.classList.replace("bottom_mode_b", "right_mode_b");
                    button.classList.replace("bottom_mode_btn", "right_mode_btn");
                    button_sw.classList.replace("bottom_mode_sw", "right_mode_sw");
                    button_con.classList.replace("bottom_mode_sw", "right_mode_sw");
                    setPositionPref("right");
                   }
                 }
               };
    
         function poser_uno() {
               if (toolbox_new.classList.contains("right_mode")) {
                    toolbox_new.classList.replace("right_mode", "left_mode");
                    browser.classList.replace("right_mode_b", "left_mode_b");
                    NewToolbar_button.classList.replace("right_mode_btn", "left_mode_btn");
                    NewToolbar_position.classList.replace("right_mode_sw", "left_mode_sw");
                    NewToolbar_position_Con.classList.replace("right_mode_sw", "left_mode_sw");
                    setPositionPref("left");
                   }
               else if (toolbox_new.classList.contains("left_mode")) {
                    toolbox_new.classList.replace("left_mode", "bottom_mode");
                    browser.classList.replace("left_mode_b", "bottom_mode_b");
                    NewToolbar_button.classList.replace("left_mode_btn", "bottom_mode_btn");
                    NewToolbar_position.classList.replace("left_mode_sw", "bottom_mode_sw");
                    NewToolbar_position_Con.classList.replace("left_mode_sw", "bottom_mode_sw");
                    setPositionPref("bottom");
                   }
               else if (toolbox_new.classList.contains("bottom_mode")) {
                    toolbox_new.classList.replace("bottom_mode", "right_mode");
                    browser.classList.replace("bottom_mode_b", "right_mode_b");
                    NewToolbar_button.classList.replace("bottom_mode_btn", "right_mode_btn");
                    NewToolbar_position.classList.replace("bottom_mode_sw", "right_mode_sw");
                    NewToolbar_position_Con.classList.replace("bottom_mode_sw", "right_mode_sw");
                    setPositionPref("right");
                   }
               };
    
        // Icon
        if (new_tb_icon_sw) {
             NewToolbar_position.classList.add("icon_mode_sw");
             NewToolbar_position_Con.classList.add("icon_mode_sw");
           }
    
        // Hide switch button
        if (!new_tb_btn_sw) {
            NewToolbar_position.style.setProperty('display', 'none');
        }
    
        // On quitting Firefox: delete Prefs, if new_tb_save = false
        if (!new_tb_save) {
             Services.obs.addObserver(function observer(subject, topic, data) {
                 if (topic === "quit-application-granted") {
                     try {
                         Services.prefs.clearUserPref(pref_newtoolbar_state);
                         Services.prefs.clearUserPref(pref_position);
                     } catch (e) { }
                     Services.obs.removeObserver(observer, "quit-application-granted");
                 }
             }, "quit-application-granted");
          };
    
    let css =`
    
    #main-window {
        --ug-newbar_basewidth: calc(2 * ${new_tb_btn_size} + 16px);  /* Minimalgroesse = Groesse Buttons */
        --ug-newbar_width: calc(var(--ug-newbar_basewidth) + ${new_tb_border_width} + 2 * `+new_tb_size+`);
    }
    
    /*- Buttons -*/
    
    /* Buttons sizes */
    #newtoolbar {
        --toolbarbutton-inner-padding: ${new_tb_btn_size} !important;
    	 	--toolbarbutton-outer-padding: 0px !important;
    }
    /*  On/Off Button  */
    #NewToolbar_button .toolbarbutton-icon {
        list-style-image: url("${Icon_tb_Fx}");
    }
    #NewToolbar_button.icon_mode .toolbarbutton-icon {
        list-style-image: url("${ImagePath}");
    }
    #NewToolbar_button.off-mode_btn:not(:hover, :active) .toolbarbutton-icon {
        opacity: 0.4;
    }
    /*  Switch Button  */
    #NewToolbar_position .toolbarbutton-icon {
        list-style-image: url("${Icon_sw_Fx}");
    }
    #NewToolbar_position.icon_mode_sw .toolbarbutton-icon {
        list-style-image: url("${ImagePathSW}");
    }
    /*  Button adjustments to Toolbar Position  */
    :is(#NewToolbar_button.left_mode_btn, #NewToolbar_position.left_mode_sw) .toolbarbutton-icon,
    #NewToolbar_position_Con.left_mode_sw :is(image, img) {
        transform: rotate(180deg);
    }
    :is(#NewToolbar_button.bottom_mode_btn, #NewToolbar_position.bottom_mode_sw) .toolbarbutton-icon,
    #NewToolbar_position_Con.bottom_mode_sw :is(image, img) {
        transform: rotate(90deg);
    }
    
    #NewToolbar_position_Con {
        -moz-context-properties: fill, fill-opacity !important;
        fill: currentColor !important;
    }
    
    #NewToolbar_position_Con :is(image, img) {
        list-style-image: url("${Icon_sw_Fx}");
        content: url("${Icon_sw_Fx}") !important;
    }
    #NewToolbar_position_Con.icon_mode_sw :is(image, img) {
        list-style-image: url("${ImagePathSW}");
        content: url("${ImagePathSW}") !important;
    }
    
    /*:root[customizing] */
    /*
    toolbarpaletteitem[place="palette"] #NewToolbar_position {
        outline: 2px solid red !important;
        pointer-events: none !important;
    }
    */
    
    #unified-extensions-button[hidden] {
        visibility: visible !important;
        display: flex !important;
    }
    
    /*--  Browser adjustments  --*/
    
    #browser.right_mode_b {
        transition: padding-right 0.25s ease !important;
    }
    #browser.left_mode_b {
        transition: padding-left 0.25s ease !important;
    }
    #browser.bottom_mode_b {
        transition: padding-bottom 0.25s ease !important;
    }
    #browser:not(.off-mode_b).right_mode_b {
        padding-right: var(--ug-newbar_width) !important;
    }
    #browser:not(.off-mode_b).left_mode_b {
        padding-left: var(--ug-newbar_width) !important;
    }
    #browser:not(.off-mode_b).bottom_mode_b {
        padding-bottom: var(--ug-newbar_width) !important;
    }
    
    /*--  Basics / Right  --*/
    
    #toolbox_new {
        position: fixed;
        z-index: 2 !important;
        display: flex;
        width: fit-content;
        top: var(--height_newbar_top);
        right: 0px;
    }
    #newtoolbar {
        display: flex;
        min-width: var(--ug-newbar_basewidth) !important;
        width: var(--ug-newbar_width) !important;
        min-height: var(--ug-newbar_basewidth) !important;
        height: var(--height_newbar) !important;
        align-items: center !important;
        overflow: hidden !important;
        padding-block: 8px;
        border-width: 0px;
        border-style: solid !important;
        border-color: ${new_tb_border_color} !important;
        border-left-width: ${new_tb_border_width};
        border-right-width: 0px;
        margin-inline: 0px;
    }
    
    #toolbox_new:not(.bottom_mode) #newtoolbar:not([customizing]) {
        max-width: var(--ug-newbar_width) !important;
        transition: width 0.25s ease, max-width 0.25s ease, min-width 0.25s ease, border-left-width 0.125s ease;
    }
    
    #toolbox_new #newtoolbar:not([customizing]).off-mode {
        min-width: 0px !important;
        width: 0px !important;
        max-width: 0px !important;
        min-height: unset !important;
        max-height: unset !important;
        border-width: 0px !important;
        box-shadow: none !important;
    }
    
    #newtoolbar:not([customizing]).off-mode > :is(.toolbarbutton-1, toolbaritem) {
        opacity: 0 !important;
    }
    #newtoolbar > :is(.toolbarbutton-1, toolbaritem),
    #newtoolbar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
        margin-block: ${new_tb_distance} !important;
        margin-inline: var(--toolbarbutton-outer-padding) !important;
        transition: opacity 0.125s ease;
    }
    
    /*--  Left  --*/
    
    #toolbox_new.left_mode {
        right: unset;
        left: 0px;
    }
    #toolbox_new.left_mode #newtoolbar:not([customizing]) {
        border-left-width: 0px;
        border-right-width: ${new_tb_border_width};
        transition: width 0.25s ease, max-width 0.25s ease, min-width 0.25s ease, border-right-width 0.125s ease;
    }
    
    /*--  Bottom  --*/
    
    #toolbox_new.bottom_mode {
        top: unset;
        bottom: 0px;
    }
    #toolbox_new.bottom_mode #newtoolbar:not([customizing]) {
        flex-direction: row !important;
        min-height: 0px !important;
        height: var(--ug-newbar_width) !important;
        max-height: var(--ug-newbar_width) !important;
        min-width: 0px !important;
        width: 100vw !important;
        padding-block: 0px;
        padding-inline: 8px;
        border-inline-width: 0px;
        border-top-width: ${new_tb_border_width};
        /*justify-content: center !important;*/    /* Inhalt mittig, optional */
        transition: height 0.25s ease, max-height 0.25s ease, min-height 0.25s ease, border-top-width 0.125s ease !important;
    }
    #toolbox_new.bottom_mode #newtoolbar:not([customizing]).off-mode {
        min-height: 0px !important;
        height: 0px !important;
        max-height: 0px !important;
        max-width: unset !important;
    }
    #toolbox_new.bottom_mode #newtoolbar:not([customizing]) > :is(.toolbarbutton-1, toolbaritem),
    #toolbox_new.bottom_mode #newtoolbar:not([customizing]) toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
        margin-block: var(--toolbarbutton-outer-padding) !important;
        margin-inline: ${new_tb_distance} !important;
    }
    
    /*--  Fullscreen  --*/
    
    /* 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  --*/
    
    #main-window[customizing] #toolbox_new {
        top: unset !important;
        bottom: 0 !important;
        right: 0 !important;
        left: unset !important;
    }
    #newtoolbar[customizing] {
        height: calc(100vh - var(--height_newbar_c)) !important;
        box-shadow: inset 0px 1px ${new_tb_border_color};
        transition: none !important;
    }
    #main-window:not([customizing]) #newtoolbar[customizing].off-mode {
        min-width: 0px !important;
        width: 0px !important;
        min-height: 0px !important;
        height: 0px !important;
        border-width: 0px !important;
    }
    #customization-container {
        margin-right: var(--ug-newbar_width) !important;
    }
    
    /*-  Background oolors themes  -*/
    
    /* Custom toolbar background color if enabled */
    #newtoolbar.ntb_bg_color {
        background-color: ${new_tb_bg_color} !important;
    }
    
    /*- Background themes, if background images are tiled, try theme_fix options above -*/
    
    :root[lwtheme] #newtoolbar:not(.ntb_bg_color) {
        background-color: var(--lwt-accent-color, var(--toolbar-bgcolor)) !important;
    }
    :root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color) {
        background-image: var(--lwt-header-image) !important;
        background-position: right 0px top 0px !important;
    }
    
    /* Icon colors */
    /*
    .squareClass {
        fill: green;
    }
    .strichClass {
        fill: purple;
    }
    .strichClassW {
        fill: cyan;
    }
    .arrowClass {
        fill: orange;
    }
    */
    
      `;
    
    if (theme_fix) {
      css += `
    /*-  Fix #1 for themes with tiled background images  -*/
    
    :root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color) {
        background: var(--lwt-header-image) !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: right 0px top 0px !important;
    }
    :root[lwtheme][lwtheme-image] #toolbox_new.bottom_mode #newtoolbar:not(.ntb_bg_color) {
        background-size: auto !important;
    }
     `;
    }
    
    if (theme_fix_2) {
      css += `
    /*-  Fix #2 for themes with tiled background images  -*/
    
    :root[lwtheme][lwtheme-image] #toolbox_new #newtoolbar:not(.ntb_bg_color) {
         background: transparent !important;
    }
    :root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color)::before {
        content: "" ;
        position: absolute;
        top: 0;
        right: 0;
        width: var(--height_newbar) !important;
        height: var(--ug-newbar_width) !important;
        pointer-events: none;
        z-index: -1 !important;
        background: var(--lwt-header-image) !important;
        background-repeat: no-repeat !important;
        transform: rotate(-90deg) translateX(var(--ug-newbar_width)) !important;
        transform-origin: 100% 100% !important;
        transition: margin 0.25s ease;
    }
    :root[lwtheme][lwtheme-image] #toolbox_new.bottom_mode #newtoolbar:not(.ntb_bg_color, [customizing])::before {
        transform: scaleX(-1) !important;
        transform-origin: 50% 50% !important;
        width: 100% !important;
    }
    :root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color)[customizing]::before {
        width: calc(100vh - var(--height_newbar_c)) !important;
    }
    #newtoolbar:not([customizing]).off-mode::before {
        min-width: 0px !important;
        margin-inline: 0px calc(0px - var(--ug-newbar_width));
    }
    #toolbox_new.left_mode #newtoolbar:not([customizing]).off-mode::before {
        margin-inline: calc(0px - var(--ug-newbar_width)) 0;
    }
    #toolbox_new.bottom_mode #newtoolbar:not([customizing]).off-mode::before {
        min-height: 0px !important;
        margin-inline: 0px;
        margin-block: 0px calc(0px - var(--ug-newbar_width)) !important;
    }
     `;
    }
    
    if (separator_fix) {
      css += `
    /* Adjustments for Separator Scripts  */
    
    #newtoolbar toolbarseparator {
        width: calc(var(--ug-newbar_width) - ${new_tb_border_width} - 6px) !important;
        margin: 5px 0px !important;
        border-block-color: hsl(0, 0%, 0%, 0.45) hsl(0, 0%, 100%, 0.55) !important;
        transition: width 0.125s ease !important;
    }
    #newtoolbar :is(toolbarspacer, toolbarspring, toolbarseparator) {
        min-width: 0px !important;
    }
    #newtoolbar:not([customizing]).off-mode toolbarseparator {
        width: 0px !important;
    }
    #toolbox_new.bottom_mode #newtoolbar:not([customizing]) toolbarseparator {
        transform: rotate(-90deg) !important;
        margin: 0px !important;
    }
    #newtoolbar[customizing] toolbarseparator {
        margin-block: 16px !important;
    }
     `;
    }
    
      const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
      const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
      sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
    
    })();
    Alles anzeigen

    icons.zip

  • Eigene Zusatzleisten ab ff 143+

    • Horstmann
    • 19. November 2025 um 19:51
    Zitat von FuchsFan

    Ich gehe davon aus, um einen Ordner im Explorer zu öffnen, dann muss wohl in Zeile 20 etwas anderes stehen. Probiert habe ich schon, aber dann öffnet sich sofort beim Foxstart der angegebene Ordner. Wer gibt den passenden Hinweis?

    Zitat von Horstmann

    Das weiss ich leider nicht; dazu gibt es ne Menge Info im Forum, aber hab's selber noch nicht probiert

    Das ist mir alles bekannt, ich kann in dein Script in die betreffende Zeile eintragen was ich will, auf true stellen, und es funktioniert nicht. Komisch?

    In meinem Script müsstest du wohl auch IconPath ändern, oder ImagePath.
    Aber bitte keine Fragen zu Dateipfaden oder Details zu dem Script von Mitleser hier - das hatte er netterweise als Referenz gepostet - das sind komplett separate Themen. 8)

  • Eigene Zusatzleisten ab ff 143+

    • Horstmann
    • 19. November 2025 um 17:35
    Zitat von Mitleser
    Zitat von FuchsFan

    Dann wandert er in das Überhangmenü.

    Ist bei LINUX nicht so und der Button wird lediglich verkleinert und wandert eben nicht in das Überhangmenü; deshalb die Frage ob das auf dem MAC ebenso ist.
    Zur Sicherheit sollte man also das: button.style.minWidth = 'fit-content'; lieber nicht löschen!

    Hmm, das wusste ich nicht. :/
    Am Mac ist es wie von FuchsFan beschrieben.

    Zitat von FuchsFan

    Gib mir doch bitte mal einen Rat, wie der Pfad zu einem eigenen Icon aussehen müsste, a) wenn im Ordner icons, und b) wenn in einem externen Ordner vorhanden. Ich mühe mich schon eine Weile damit ab, es will nicht klappen.:/

    Das weiss ich leider nicht; dazu gibt es ne Menge Info im Forum, aber hab's selber noch nicht probiert - und es ist komplett off-topic. ;)
    Hier ein alter Beitrag aus meiner Sammlung; aber bitte bei Bedarf ein eigenes Thema eröffnen zu Dateipfaden.

  • Eigene Zusatzleisten ab ff 143+

    • Horstmann
    • 19. November 2025 um 12:47
    Zitat von Mitleser

    Ein Beispiel eines einfachen widgets vom typ button wäre (besteht auch den Elchtest) :

    Prima Vorlage! :)
    Wenn du eine JS freundliche ID benutzt, zB ohne Bindestriche im Namen, kannst du die übrigens in vielen (nicht allen) Fällen direkt ohne getElement... benutzen, wie sowas (plus kleine unnötige Spielerei für die Styles).

    Fill etc. Properties direkt für Buttons solltest du eigentlich nicht brauchen, wenn das SVG korrekte Einträge hat, oder? :/

    JavaScript
    // Test
    
    (function() {
      if (!window.gBrowser)
    	return;
    const
    // ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
           id = 'Fedia_button', // Id des Buttons
           link = 'fedia.io/m/FirefoxCSS', // Linkziel des Buttons
           label = 'Quicklink: Fedia', // Bezeichnung des Buttons
           tooltiptext = 'Quicklink:\nfedia.io/m/FirefoxCSS',
    // Icon-------------------------------------------------------
           icon = '16-Fedia_Logo.svg',  // [Name.Dateiendung] des Symbols
    
       iconPath = '/chrome/icons/', // Pfad zum Ordner der das Icon beinhaltet
    // ■■ END UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
     curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
    
    	if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
    		Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
    	}
    
    //BUTTON
    try {
        CustomizableUI.createWidget({
          id: id,
          defaultArea: CustomizableUI.AREA_NAVBAR,
          tooltiptext: tooltiptext,
          label: label,
             onCreated: (button) => {
              let styles = {
                  listStyleImage: 'url("' + curProfDir + iconPath + icon + '")',
                  fill: 'orange',
                  outline: '1px solid orange',
                  outlineOffset: '-1px',
                  //minWidth: 'fit-content',
                  };
              Object.assign(button.style, styles);
            }
        });
    } catch(e) { }
    
    //click
    Fedia_button.addEventListener('click', () => {
    	if (event.button === 0) {
           	 event.target.ownerGlobal.openTrustedLinkIn(link, "tab");
    	}
    });
    
    })();
    Alles anzeigen
  • Eigene Zusatzleisten ab ff 143+

    • Horstmann
    • 19. November 2025 um 09:57
    Zitat von Mitleser

    oder auch das (leider keine Quelle):

    Genial, das ist super Info! :thumbup:
    Mögliche Quelle hier.

  • Eigene Zusatzleisten ab ff 143+

    • Horstmann
    • 18. November 2025 um 19:08
    Zitat von FuchsFan

    Dann mach hin!;):D

    Kleiner Finger => Hand weg. ;)

    Mal auf die Schnelle, nur als zip Datei zum Testen bei Interesse, um nicht zuviel Codeversionen offiziell zu machen:

    00-toolbar_test-96-RC-12-weiter-context3.uc.js.zip

    Alle Einstellungen und CSS sind quasi identisch, nur mit zusätzlichem Code für das menuitem.
    Geht hier am Mac soweit in Fx 145.

  • Eigene Zusatzleisten ab ff 143+

    • Horstmann
    • 18. November 2025 um 15:11
    Zitat von FuchsFan

    Das funktioniert mit Win11 perfekt. Das Sahnehäuptchen wäre natürlich, wenn im Kontextmenü dann auch angezeigt wird (rechts/links/unten) wo sich die Toolbar befindet. Im Button kann man das zwar auch erkennen, aber wenn schon, dann schon richtig.;)

    Du glaubst ja wohl nicht etwa, dass ich das nicht schon in Arbeit hätte? ;)
    Es ist nur wirklich schwer zu testen am Mac, wegen den OS Unterschieden.

    Zitat von Mitleser

    Foto

    :thumbup:

Unterstütze uns!

Jährlich (2025)

107,3 %

107,3% (697,41 von 650 EUR)

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