Eigene Zusatzleisten ab ff 143+

Horstmann

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.

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

FuchsFan

Zitat von Horstmann

es gibt jetzt nur noch die Positionsänderung über Rechtsklick in einer Toolbar.

Finde ich gut so, und funktioniert hier in v147 ohne Probleme.

Horstmann

Zitat von FuchsFan

Finde ich gut so, und funktioniert hier in v147 ohne Probleme.

Wieder mal danke für's testen!
Die Anmerkungen für die Iconpfade habe ich auch etwas überarbeitet, hoffe das macht deinen direkten Dateipfad etwas einfacher einzusetzen, obwohl du das wohl schon geregelt hattest.

Mira_Belle

Hi Horstmann
Ich glaube, ich habe Verwendung für Dein Skript,
aber nicht so, wie Du es ausgearbeitet und zur Verfügung gestellt hast!

Daher habe ich noch mal daran Hand angelegt UND
eine Funktion hinzugefügt, die die Zusatzleiste automatisch wieder ausblendet!

Hier die Codefragmente:

JavaScript

    // Auto-Close Einstellungen
    let autoCloseTime = 5000;   // Zeit in Millisekunden, 0 = kein Auto-Close
    let intervalID = 0;

In die Settings einfügen.

Die Buttonfunktion mit diesem Code ersetzen:

JavaScript

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

        // Auto-Close für alle Fenster
        if (autoCloseTime > 0) {
        // Sicherstellen, dass der aktuelle Zustand sichtbar ist
        let anyVisible = false;
        for (let win of Services.wm.getEnumerator("navigator:browser")) {
            const toolbar = win.document.getElementById("newtoolbar");
            if (!toolbar.classList.contains("off-mode")) {
            anyVisible = true;
            break;
            }
        }

        // Falls sichtbar: Timer setzen, der wieder ausblendet
        if (anyVisible) {
            if (intervalID) {
            clearInterval(intervalID);
            intervalID = 0;
            }
            intervalID = event.target.ownerGlobal.setInterval(autoClose, autoCloseTime);
        } else {
            // Wenn nach dem Klick alles zu ist, Timer beenden
            if (intervalID) {
            clearInterval(intervalID);
            intervalID = 0;
            }
        }
        }
    }
    });

Alles anzeigen

Und die Zeitschleifenfunktion einfügen.
Direkt unter "function tb_toggle_uno()"

JavaScript

function autoClose() {
  if (!intervalID) {
    return;
  }

  let anyVisible = false;

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

    if (!toolbar.classList.contains("off-mode")) {
      // Leiste schließen
      toolbar.classList.add("off-mode");
      browserArea.classList.add("off-mode_b");
      button.classList.add("off-mode_btn");
      button.setAttribute("tooltiptext", "Toolbar Off");
    }

    // Prüfen, ob noch irgendwo sichtbar (sollte nach obigem eigentlich nicht vorkommen)
    if (!toolbar.classList.contains("off-mode")) {
      anyVisible = true;
    }
  }

  if (!anyVisible) {
    clearInterval(intervalID);
    intervalID = 0;
  }
}

Alles anzeigen

Wenn ich das komplette Skript einfügen soll, so gib Bescheid.

Horstmann

Zitat von Mira_Belle

Ich glaube, ich habe Verwendung für Dein Skript,

Prima!

Zitat von Mira_Belle

aber nicht so, wie Du es ausgearbeitet und zur Verfügung gestellt hast!
Daher habe ich noch mal daran Hand angelegt UND
eine Funktion hinzugefügt, die die Zusatzleiste automatisch wieder ausblendet!

Ketzerei!

Es sind eine Menge Einstellungen und Variablen in dem Script.
Mein Testprozedere für das Ding ist laaaang, mein Verdacht wäre dass nicht alle Varianten mit deinem Code bedient werden.

Aber - wenn deine Version, mit deinen Einstellungen, so für dich klappt, wunderbar!

Mira_Belle

Ich habe Deine Version 14 genutzt.
Egal ob links, rechts oder unten, es funktioniert.
Und für mich habe ich die Hintergrundfarbe der Leise noch geändert.

Was ich noch suche, wie ich die Höhe, bzw, die Breite verändern kann.

Und was mich dann auch noch interessiert, ob man diese Leiste auch oben in das Fenster integrieren könnte.
Aber DAS, das ist dann schon wieder eine größere Geschichte.

Horstmann

Zitat von Mira_Belle

Was ich noch suche, wie ich die Höhe, bzw, die Breite verändern kann.
Und was mich dann auch noch interessiert, ob man diese Leiste auch oben in das Fenster integrieren könnte.
Aber DAS, das ist dann schon wieder eine größere Geschichte.

Leiste oben wäre nicht so schwer, solange sie unter allen anderen Leisten sitzt, ist aber halt nicht vorgesehen.
Man könnte wohl das CSS für bottom Kram einfach komplett anpassen.

Höhe (horizontale Leiste) und Breite (vertikale Leiste) sind in Zeilen 64 - 74 einstellbar (Version 14 in #161), im speziellen Zeile 74.

Mira_Belle

Zitat von Horstmann

Höhe (horizontale Leiste) und Breite (vertikale Leiste) sind in Zeilen 64 - 74 einstellbar (Version 14 in #161), im speziellen Zeile 74.

Viel einfacher!!

JavaScript

 let new_toolbars_size = '16px';

In den Settings eingefügt und
"--ug-newbar_basewidth: calc(2 * ${new_tb_btn_size} + ${new_toolbars_size}); /* Minimalgroesse = Groesse Buttons */ "
geändert.

An "die Leiste oben" mache ich mich noch dran.
Denn da wäre sie mir lieber.
Aber dazu brauche ich Zeit, und die habe ich z.Z. nicht so wirklich.

Horstmann

Zitat von Mira_Belle

Zitat von Horstmann

Höhe (horizontale Leiste) und Breite (vertikale Leiste) sind in Zeilen 64 - 74 einstellbar (Version 14 in #161), im speziellen Zeile 74.

Viel einfacher!!
An "die Leiste oben" mache ich mich noch drann.

Wenn du grosse Buttons magst, klar, sonst halt Abstand in Zeile 74, oder beides; deswegen gibt es ja auch die Optionen, zum Feintuning.

Leiste nur oben gibt's auch hier; dafür könnte man auch mein JS für nur eine Leiste oben oder sonstwo anpassen, und sich den Grossteil des Codes zum Verschieben und Speichern sparen.

Horstmann

Zitat von Mira_Belle

An "die Leiste oben" mache ich mich noch dran.
Denn da wäre sie mir lieber.

Oder teste mal den Otto, nur für dich :

JavaScript

// Test Mira toolbar top
// 000_toolbar_top.uc.js

(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/';

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

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

// Initial states ==>

   // Initial state toolbar visibility: 0 = On, 1 = Off, only if new_tb_save = false (not saved)
        let new_tb_off = 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

// 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_top_state = "userchrome.newtoolbar_top.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_top';
        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('label', 'New Toolbar');
        ntb.setAttribute('orient', 'vertical');
        ntb.setAttribute("accesskey","");

        ntb_box.appendChild(ntb);
        document.getElementById('browser').parentNode.appendChild(ntb_box);

        CustomizableUI.registerArea('newtoolbar_top', {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_top_button',
          defaultArea: CustomizableUI.AREA_NAVBAR,
          tooltiptext: 'New Toolbar',
          label: 'Toggle New Toolbar',
          removable: false,
        });
    } catch(e) { }

    // Button function
    newtoolbar_top_button.addEventListener('click', event => {
        if (event.button === 0 ) {
          if (!new_tb_uno) {
            tb_toggle();
          }
          else {
            tb_toggle_uno();
          };
        }
     });

    function tb_toggle() {
       for (let win of Services.wm.getEnumerator("navigator:browser")) {
         const toolbar = win.document.getElementById("newtoolbar_top");
         const browserArea = win.document.getElementById("browser");
         const button = win.document.getElementById("newtoolbar_top_button");
         toolbar.classList.toggle("off-mode_top");
         browserArea.classList.toggle("off-mode_top_b");
         button.classList.toggle("off-mode_top_btn");
         const ntb_visible = !toolbar.classList.contains("off-mode_top");
         Services.prefs.setBoolPref(pref_newtoolbar_top_state, ntb_visible);
         }
    };

    function tb_toggle_uno() {
         newtoolbar_top.classList.toggle("off-mode_top");
         browser.classList.toggle("off-mode_top_b");
         newtoolbar_top_button.classList.toggle("off-mode_top_btn");
         const ntb_visible = !newtoolbar_top.classList.contains("off-mode_top");
         Services.prefs.setBoolPref(pref_newtoolbar_top_state, ntb_visible);
    };

    let toolbarEnabled = true;
    try {
        toolbarEnabled = Services.prefs.getBoolPref(pref_newtoolbar_top_state);
    } catch(e) {
        Services.prefs.setBoolPref(pref_newtoolbar_top_state, new_tb_off === 0);
        toolbarEnabled = new_tb_off === 0;
    }
    if (!toolbarEnabled) {
        newtoolbar_top.classList.add("off-mode_top");
        browser.classList.add("off-mode_top_b");
        newtoolbar_top_button.classList.add("off-mode_top_btn");
    }

    // Icon
    if (new_tb_icon) {
         newtoolbar_top_button.classList.add("icon_mode");
       }
    // Background color
    if (new_tb_color) {
         newtoolbar_top.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_top").addEventListener("mousedown", (e) => {
		  const button = e.target.closest("toolbarbutton");
		  if (button?.id && customHandlers[button.id]) customHandlers[button.id](button, e);
		});

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_top {
    --toolbarbutton-inner-padding: ${new_tb_btn_size} !important;
	 	--toolbarbutton-outer-padding: 0px !important;
}
/*  On/Off Button  */
#newtoolbar_top_button .toolbarbutton-icon {
    list-style-image: url("${Icon_tb_Fx}");
    transform: rotate(-90deg);
}
#newtoolbar_top_button.icon_mode .toolbarbutton-icon {
    list-style-image: url("${ImagePath}");
}
#newtoolbar_top_button.off-mode_top_btn:not(:hover, :active) .toolbarbutton-icon {
    opacity: 0.4;
}

#unified-extensions-button[hidden] {
    visibility: visible !important;
    display: flex !important;
}

/*--  Browser adjustments  --*/

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

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

/*--  Basics  --*/

#toolbox_new {
    position: fixed;
    z-index: 2 !important;
    display: flex;
    width: fit-content;
    top: var(--height_newbar_top);
    right: 0px;
}

#newtoolbar_top {
    display: flex;
    flex-direction: row !important;
    align-items: center !important;
    overflow: hidden !important;
    height: var(--ug-newbar_width) !important;
    min-height: var(--ug-newbar_basewidth) !important;
    max-height: var(--ug-newbar_width) !important;
    /*min-width: 0px !important;*/
    width: 100vw !important;
    padding-block: 0px;
    padding-inline: 8px;
    border-width: 0px;
    border-style: solid !important;
    border-color: ${new_tb_border_color} !important;
    border-bottom-width: ${new_tb_border_width};
    margin-inline: 0px;
    /*justify-content: center !important;*/    /* Inhalt mittig, optional */
}

#toolbox_new #newtoolbar_top:not([customizing]) {
    transition: height 0.25s ease, max-height 0.25s ease, min-height 0.25s ease, border-bottom-width 0.125s ease;
}

#toolbox_new.bottom_mode #newtoolbar_top:not([customizing]) > :is(.toolbarbutton-1, toolbaritem),
#toolbox_new.bottom_mode #newtoolbar_top:not([customizing]) toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
    margin-block: var(--toolbarbutton-outer-padding) !important;
    margin-inline: ${new_tb_distance} !important;
}

#toolbox_new #newtoolbar_top:not([customizing]).off-mode_top {
    min-height: 0px !important;
    max-height: 0px !important;
    border-width: 0px !important;
    box-shadow: none !important;
}

#newtoolbar_top:not([customizing]).off-mode_top > :is(.toolbarbutton-1, toolbaritem) {
    opacity: 0 !important;
}
#newtoolbar_top > :is(.toolbarbutton-1, toolbaritem),
#newtoolbar_top toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
    margin-inline: ${new_tb_distance} !important;
    margin-block: var(--toolbarbutton-outer-padding) !important;
    transition: opacity 0.125s ease;
}

/*--  Fullscreen  --*/

/* Mac / nur Video Fullscreen */
#main-window[inDOMFullscreen]:not([customizing]) #toolbox_new {
    visibility: collapse !important;
}
#main-window[inDOMFullscreen]:not([customizing]) #browser {
    padding: 0px !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: 0px !important;
}
}

/*--  customizing  --*/

#newtoolbar_top[customizing] {
    transition: none !important;
}

#main-window:not([customizing]) #newtoolbar_top[customizing].off-mode_top {
    min-height: 0px !important;
    height: 0px !important;
    max-height: 0px !important;
    border-width: 0px !important;
}
#customization-container {
    margin-top: var(--ug-newbar_width) !important;
}

/*-  Background oolors themes  -*/

/* Custom toolbar background color if enabled */
#newtoolbar_top.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_top:not(.ntb_bg_color) {
    background-color: var(--lwt-accent-color, var(--toolbar-bgcolor)) !important;
}
:root[lwtheme][lwtheme-image] #newtoolbar_top:not(.ntb_bg_color) {
    background-image: var(--lwt-header-image) !important;
    background-position: right 0px top 0px !important;
}

  `;

if (theme_fix) {
  css += `
/*-  Fix #1 for themes with tiled background images  -*/

:root[lwtheme][lwtheme-image] #newtoolbar_top: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_top: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_top:not(.ntb_bg_color) {
     background: transparent !important;
}
:root[lwtheme][lwtheme-image] #newtoolbar_top: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 #newtoolbar_top:not(.ntb_bg_color, [customizing])::before {
    transform: scaleX(-1) !important;
    transform-origin: 50% 50% !important;
    width: 100% !important;
}
:root[lwtheme][lwtheme-image] #newtoolbar_top:not(.ntb_bg_color)[customizing]::before {
    width: calc(100vh - var(--height_newbar_c)) !important;
}
#newtoolbar_top:not([customizing]).off-mode_top::before {
    min-width: 0px !important;
    margin-inline: 0px calc(0px - var(--ug-newbar_width));
}

#toolbox_new #newtoolbar_top:not([customizing]).off-mode_top::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_top 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_top :is(toolbarspacer, toolbarspring, toolbarseparator) {
    min-width: 0px !important;
}
#newtoolbar_top:not([customizing]).off-mode_top toolbarseparator {
    width: 0px !important;
}
#toolbox_new #newtoolbar_top toolbarseparator {
    transform: rotate(-90deg) !important;
    margin: 0px !important;
}
#newtoolbar_top[customizing] toolbarseparator {
    margin-inline: 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

Mira_Belle

Danke Horstmann.

Ich wollte mir aber alle Optionen offenhalten.
War aber eine schwere Geburt.

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() {

Alles anzeigen

Horstmann

Zitat von Mira_Belle

Danke Horstmann.

Ich wollte mir aber alle Optionen offenhalten.
War aber eine schwere Geburt.

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() {

Alles anzeigen

Du hast den header kopiert?

Mira_Belle

Zitat von Horstmann

Du hast den header kopiert?

Verflixt, sieht wohl so aus.

Neuer Versuch.

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_V(was_auch_immer).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

// Basierend auf Version V14 von @Horstmann

(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 = 'sidebars-right.svg';
        // Firefox icon
        let Icon_tb_Fx = 'chrome://browser/skin/sidebars-right.svg';
        // false = use Firefox Icon, true = Custom Icon
        let new_tb_icon  = true;
        // Complete path to icon
        let ImagePath = ProfilePath + IconPath + Icon_tb;

        // Position switch button
        // Custom icon file
        let Icon_sw = 'default-browser-red.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 = true;
        // background color if true
        //let new_tb_bg_color = 'hsla(200, 45%, 87%, 1)';
        let new_tb_bg_color = '#4D4D4D';

    // Border width, 0px = off
        let new_tb_border_width = '1px';
        // Border color
        //let new_tb_border_color = 'red';
        //let new_tb_border_color = 'var(--sidebar-border-color)';
        let new_tb_border_color = 'color-mix(in srgb, currentColor 30%, transparent)';

    // 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 = '4px';

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

        let new_toolbars_size = '16px';

    // 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 = false;     // true

    // Initial state toolbar visibility: 0 = On, 1 = Off, only if new_tb_save = false (not saved)
        let new_tb_off = 1;     // 0

    // Position initial state: 0 = right, 1 = left, 2 = bottom, 3 = top (NEU), 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
        let separator_fix = true;

    // Auto-Close Einstellungen
        let autoCloseTime = 3000;   // 0 = kein Auto-Close / >0 Zeit in Millisekunden /5000 => 5sec
        let intervalID = 0;

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

            // Auto-Close für alle Fenster
            if (autoCloseTime > 0) {
                // Sicherstellen, dass der aktuelle Zustand sichtbar ist
                let anyVisible = false;
                for (let win of Services.wm.getEnumerator("navigator:browser")) {
                    const toolbar = win.document.getElementById("newtoolbar");
                    if (!toolbar.classList.contains("off-mode")) {
                    anyVisible = true;
                    break;
                    }
                }

                // Falls sichtbar: Timer setzen, der wieder ausblendet
                if (anyVisible) {
                    if (intervalID) {
                    clearInterval(intervalID);
                    intervalID = 0;
                    }
                    intervalID = event.target.ownerGlobal.setInterval(autoClose, autoCloseTime);
                } else {
                // Wenn nach dem Klick alles zu ist, Timer beenden
                    if (intervalID) {
                    clearInterval(intervalID);
                    intervalID = 0;
                    }
                }
            }
        }
    });

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

    function autoClose() {
        if (!intervalID) {
            return;
        }

        let anyVisible = false;

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

            if (!toolbar.classList.contains("off-mode")) {
                // Leiste schließen
                toolbar.classList.add("off-mode");
                browserArea.classList.add("off-mode_b");
                button.classList.add("off-mode_btn");
                button.setAttribute("tooltiptext", "Toolbar Off");
            }

            if (!toolbar.classList.contains("off-mode")) {
                anyVisible = true;
            }
        }

        if (!anyVisible) {
            clearInterval(intervalID);
            intervalID = 0;
        }
    }

    // Position initial state (um „top“ erweitert)
    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");
    }
    else if (new_tb_loc === 3) { // NEU für oben
        toolbox_new.classList.add("top_mode");
        browser.classList.add("top_mode_b");
        NewToolbar_button.classList.add("top_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");
    }

    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";
        }
    }
    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", "top_mode"); // NEU top_mode
        browser.classList.remove("left_mode_b", "bottom_mode_b", "right_mode_b", "top_mode_b");
        NewToolbar_button.classList.remove("left_mode_btn", "bottom_mode_btn", "right_mode_btn", "top_mode_btn");
        NewToolbar_position_Con.classList.remove("left_mode_sw", "bottom_mode_sw", "right_mode_sw", "top_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 === "top") { // NEU
            toolbox_new.classList.add("top_mode");
            browser.classList.add("top_mode_b");
            NewToolbar_button.classList.add("top_mode_btn");
            NewToolbar_position_Con.classList.add("top_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();
        };
        }
    });

    // Zyklus right -> left -> bottom -> top -> right
    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", "top_mode");
                browserArea.classList.replace("bottom_mode_b", "top_mode_b");
                button.classList.replace("bottom_mode_btn", "top_mode_btn");
                button_con.classList.replace("bottom_mode_sw", "top_mode_sw");
                setPositionPref("top");
            }
            else if (toolbox.classList.contains("top_mode")) {
                toolbox.classList.replace("top_mode", "right_mode");
                browserArea.classList.replace("top_mode_b", "right_mode_b");
                button.classList.replace("top_mode_btn", "right_mode_btn");
                button_con.classList.replace("top_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", "top_mode");
            browser.classList.replace("bottom_mode_b", "top_mode_b");
            NewToolbar_button.classList.replace("bottom_mode_btn", "top_mode_btn");
            NewToolbar_position_Con.classList.replace("bottom_mode_sw", "top_mode_sw");
            setPositionPref("top");
        }
        else if (toolbox_new.classList.contains("top_mode")) {
            toolbox_new.classList.replace("top_mode", "right_mode");
            browser.classList.replace("top_mode_b", "right_mode_b");
            NewToolbar_button.classList.replace("top_mode_btn", "right_mode_btn");
            NewToolbar_position_Con.classList.replace("top_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} + ${new_toolbars_size});  /* 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_button.top_mode_btn .toolbarbutton-icon,
        #NewToolbar_position_Con.top_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.top_mode_b {
            transition: padding-top 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;
        }
        #browser:not(.off-mode_b).top_mode_b {
            padding-top: 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_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;
        }

        /-- Top (NEU) --/

        #toolbox_new.top_mode {
            top: 0px;
            bottom: unset;
        }

        #toolbox_new.top_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;
            padding-right: 100vw !important;
        }
        #toolbox_new.top_mode #newtoolbar:not([customizing]).off-mode {
            min-height: 0px !important;
            height: 0px !important;
            max-height: 0px !important;
            max-width: unset !important;
        }
        #toolbox_new.top_mode #newtoolbar:not([customizing]) > :is(.toolbarbutton-1, toolbaritem),
        #toolbox_new.top_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 colors 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: left 0px top 0px !important;
        }
    `;

    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

Besser?
Besser!

Horstmann

Zitat von Mira_Belle

Zitat von Horstmann

Du hast den header kopiert?

Verflixt, sieht wohl so aus.
Neuer Versuch.

Wenn du jetzt noch den header so ändern könntest, dass es absolut klar ist dass das keine meiner Versionen vom Code ist.

00_extra_toolbars_Vxx.uc.js und Version Vxx würde ich mir gerne vorbehalten.

Mira_Belle

Zitat von Horstmann

Wenn du jetzt noch den header so ändern könntest, dass es absolut klar ist dass das keine meiner Versionen vom Code ist.

Jawoll, wird gemacht.

-----------------------------------------------------

Erledigt. Recht so?

Horstmann

Zitat von Mira_Belle

Erledigt. Recht so?

Besser.

Wen du jetzt mal noch eben schauen würdest, wie das Ding im Anpassenfenster aussieht.
Ein paar Kleinigkeiten fehlen noch, aber sonst sieht das halbwegs ordentlich aus.

Übrigens: vom Anpassenfenster abgesehen, eine Menge unsichtbare Arbeit steckt auch in den transitions, die sind teils zerschossen.

Die new_toolbars_size Geschichte ist schon abgedeckt durch die anderen Optionen für die Grösse; der Wert steht auf 16px im Original, weil --ug-newbar_basewidth ein modifizierter Fx Original-Code für die Berechnung von Buttons ist.

Mira_Belle

Zitat von Horstmann

Übrigens: vom Anpassenfenster abgesehen

CSS ist nicht so mein Ding.
Ich bin schon froh, dass die Leiste oben angezeigt wird.
So im Groben und Ganzen erfüllt sie jetzt, für mich, ihren Zweck
und für Deine Arbeit danke ich Dir.
Ohne Dich, bzw. Deine Leiste, wäre meine Adressleiste und auch die Menüleiste
immer noch voll von Buttons.
So konnte ich einige "auslagern", jene, die ich nicht ganz so oft nutze (brauche).

Und ich bin immer noch am Ausprobieren, an welcher Stelle die Zusatzleiste für mich
am besten passt. Favoriten, rechts oder oben.