Beiträge von Horstmann

Horstmann

Zitat von Mira_Belle

Horstmann Cool, das ist ja fast so, wie ich mir das vorgestellt habe!

Mit fast arbeiten wir hier nicht.

Aus dem Pfeil kann man auch einen zusätzlichen Button machen, der das ein/ausblenden bei click übernimmt; nur ein Button und hover Funktion, das wäre mir zu viel.

Horstmann

Nur als Variante, hier eine weitere einfache Version.
Position rechts/ links lässt sich im Script fest einstellen, die Leiste lässt sich per Button komplett ausschalten, fährt ansonsten bei hover über dem Reiter/Pfeil aus, und dann nach Wunsch verzögert wieder ein.

JavaScript

//Toggle newtoolbar 8 rechts/links

(function() {

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

        let ButtonIcon = 'flower-satt32.png';
        let Fly_Position = 0;  // 0 = right , 1 = left

        let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
        let IconPath = '/chrome/icons/';
        let ImagePath = ProfilePath + IconPath + ButtonIcon;

        let flybox_new = document.createXULElement('toolbox');
        flybox_new.setAttribute('orient','horizontal');
        flybox_new.setAttribute('id','flybox_new');

        let tb = document.createXULElement('toolbar');
        let tb_label = "New Toolbar";
        tb.id = 'new_flybar';

        tb.setAttribute('customizable', true);
        tb.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
        tb.setAttribute('orient', 'vertical');
        tb.setAttribute('mode', 'icons');
        tb.setAttribute("toolboxid","navigator-toolbox");
        tb.setAttribute('context', 'toolbar-context-menu');
        tb.setAttribute("toolbarname", tb_label);
        tb.setAttribute("label", tb_label);

	      flybox_new.appendChild(tb);
        document.getElementById('browser').parentNode.appendChild(flybox_new);

        CustomizableUI.registerArea('new_flybar', {legacy: true});
        CustomizableUI.registerToolbarNode(tb);

   try {
        CustomizableUI.createWidget({
            id: 'NewToolbar_fly_button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                    let toolbaritem = aDocument.createXULElement('toolbarbutton');
                    let props = {
                        id: 'NewToolbar_fly_button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        removable: true,
                        label: 'Toggle New Toolbar',
                        tooltiptext: 'Toggle New toolbar',
                        style: 'list-style-image: url("' + ImagePath + '");',
                    };
                    for(let p in props)
                        toolbaritem.setAttribute(p, props[p]);
                    return toolbaritem;
                }
        });
    } catch(e) { };

    document.getElementById('NewToolbar_fly_button').addEventListener( "click", flybar );
    function flybar() {
        if (event.button === 0 ) {
        new_flybar.classList.toggle("fly_off_mode");
       }
    };

    if (Fly_Position === 1) {
       flybox_new.classList.add("fly_left");
       }
    else {
       flybox_new.classList.remove("fly_left");
    };

const css =`


:root {
    --ug-newbar_width: 0px;
    --ug-newbar_inner_width: 38px;
    --ug-newbar_max_width: calc(var(--ug-newbar_inner_width) + 2*var(--ug-fly_border));

    --ug-arrow_width: 20px;
    --ug-arrow_height: 64px;

    --ug-newbar_bg_color: lightblue;
    --ug-newbar_radius: 8px;
    --ug-fly_border: 0px;
    --ug-fly_border_color: orange;
    --ug-fly_delay: 0.5s; /* animation delay when closing */
}

#flybox_new {
    position: fixed;
    display: flex;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 4 !important;
    height: fit-content;
    width: fit-content;
}

#new_flybar {
    display: flex;
    min-width: 0px !important;
    width: var(--ug-newbar_width);
    overflow: hidden !important;
    justify-content: center !important;
    padding-block: 4px;
    background-color: var(--ug-newbar_bg_color) !important;
    border-color: var(--ug-fly_border_color);
    border-style: solid !important;
    border-width: var(--ug-fly_border);
    border-radius: 0 0 0 var(--ug-newbar_radius);
    margin-inline: 0px calc(0px - 2*var(--ug-fly_border));
    transition: width 0.5s ease, margin 0.5s ease;
    transition-delay: var(--ug-fly_delay);
}

 #new_flybar:not([customizing]):hover {
    width: var(--ug-newbar_max_width);
    margin-inline: 0px calc(0px - 1*var(--ug-fly_border));
    transition-delay: 0s;
}

#new_flybar:not([customizing]).fly_off_mode {
    display: none !important;
}

#new_flybar > :is(.toolbarbutton-1, toolbaritem),
#new_flybar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
    margin-inline: 0px !important;
    margin-block: 2px !important;
    padding: 0px !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease;
    transition-delay: var(--ug-fly_delay);
}

#new_flybar:not([customizing]):hover > :is(.toolbarbutton-1, toolbaritem) {
    opacity: 1 !important;
    transition: opacity 0.5s ease;
    transition-delay: 0s;
}

/*---  arrow  ---*/

#new_flybar::before {
    content:"";
    display: flex;
    position: absolute;
    background-color: lightblue;
    top: 0px;
    left: calc(-0px - var(--ug-arrow_width) - 1*var(--ug-fly_border));
    height: var(--ug-arrow_height);
    width: calc(var(--ug-arrow_width) + 1*var(--ug-fly_border));
    background-image: url(chrome://global/skin/icons/arrow-left.svg);
    background-repeat: no-repeat;
    background-size: 16px;
    background-position-x: left calc(50% - 0.5*var(--ug-fly_border)) ;
    background-position-y: calc(50% - 10px);
    border-right-width: 0px !important;
    border-radius: var(--ug-newbar_radius) 0 0 var(--ug-newbar_radius);
    border: var(--ug-fly_border) solid var(--ug-fly_border_color);
    transition: right 0.5s ease, left 0.5s ease, margin 0.5s ease;
    transition-delay: var(--ug-fly_delay);
}

#new_flybar:hover::before {
    background-image: url(chrome://global/skin/icons/arrow-right.svg);
    transition-delay: 0s;
}

/*---  left  ---*/

:root:not([customizing]) #flybox_new.fly_left {
    left: 0;
}

#flybox_new.fly_left #new_flybar:not([customizing]) {
    border-radius: 0 0 var(--ug-newbar_radius) 0;
    margin-inline: calc(0px - 2*var(--ug-fly_border)) 0px;
}

#flybox_new.fly_left #new_flybar:not([customizing]):hover {
    width: var(--ug-newbar_max_width);
    margin-inline: calc(0px - 1*var(--ug-fly_border)) 0px;
}

#flybox_new.fly_left #new_flybar::before {
    left: unset;
    right: calc(-0px - var(--ug-arrow_width) - 1*var(--ug-fly_border));
    border-left-width: 0px !important;
    border-right-width: var(--ug-fly_border) !important;
    border-radius: 0 var(--ug-newbar_radius) var(--ug-newbar_radius) 0;
    background-image: url(chrome://global/skin/icons/arrow-right.svg);
    background-position-x: right calc(50% - 0.5*var(--ug-fly_border)) ;
}

 #flybox_new.fly_left #new_flybar:hover::before {
    background-image: url(chrome://global/skin/icons/arrow-left.svg);
}


/*---  customizing  ---*/

#new_flybar[customizing] {
    min-width: var(--ug-newbar_max_width) !important;
    min-height: var(--ug-newbar_max_width) !important;
    padding-bottom: 48px !important;
    border-radius: var(--ug-newbar_radius) 0 0 var(--ug-newbar_radius) !important;
}

#new_flybar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
    opacity: 1 !important;
}

#customization-content-container {
    margin-right: var(--ug-newbar_max_width) !important;
}

#new_flybar[customizing]::before {
    display: none !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

Test Icon: flower-satt.png.zip

Horstmann

Schön dass ihr euch wieder lieb habt.

Ich wollte nur kurz auf eine andere Thread hinweisen, in der man Mira's Frage bestimmt angehen könnten bei Interesse, ohne dass ein aktives Thema belastet wird.

Horstmann

Zitat von .DeJaVu

Danke. Das verschwindet also auch. Das werden einige nicht mögen.

Redest du mit mir?

Horstmann

Zitat von Mira_Belle

Misst, dann muss ich ja schon wieder Basteln.

Sollte eigentlich nur plug&play sein für deine Extras.

Horstmann

Version 16; wie Version 15, mit kleinem Theme Fix.

Es ist nur eine eigene Version, weil auch die inneren IDs für die Leiste geändert wurden, um potentielle Überschneidungen mit altem Aris Code zu vermeiden.

User Einstellungen können wie immer übernommen werden.

JavaScript

// Additional toolbars
// Buttons to turn toolbar On/Off, right-click/context menuitem to switch toolbar position

// Use filename starting with 00 for custom button functions !! =>
// 00_extra_toolbars_V16.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, Mitleser and Mira_Belle

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

(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, changes toolbar size as well
        let new_tb_btn_size = '6px';

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

        // Distance between buttons, 2px default
        let new_tb_distance = '5px';

// 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 = false;
        // 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_new_toolbar_state = "userchrome.new_toolbar.enabled";

        let ntb_box = document.createXULElement('toolbox');
        ntb_box.id = 'toolbox_new';
        ntb_box.setAttribute('orient','horizontal');

        let ntb = document.createXULElement('toolbar');
        ntb.id = 'new_toolbar';
        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('new_toolbar', {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,
          onCreated: (this_button) => {
             this_button.setAttribute('closemenu', 'none');
          }
        });
    } 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("new_toolbar");
         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_new_toolbar_state, ntb_visible);
         }
    };

    function tb_toggle_uno() {
         new_toolbar.classList.toggle("off-mode");
         browser.classList.toggle("off-mode_b");
         NewToolbar_button.classList.toggle("off-mode_btn");
         const ntb_visible = !new_toolbar.classList.contains("off-mode");
         Services.prefs.setBoolPref(pref_new_toolbar_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");
       }
    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_new_toolbar_state);
    } catch(e) {
        Services.prefs.setBoolPref(pref_new_toolbar_state, new_tb_off === 0);
        toolbarEnabled = new_tb_off === 0;
    }
    if (!toolbarEnabled) {
        new_toolbar.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) {
         new_toolbar.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("new_toolbar").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.new_toolbar.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
    let menuitem_SW = document.createXULElement("menuitem");
    menuitem_SW.setAttribute('id', 'NewToolbar_position_Con');
    menuitem_SW.setAttribute('closemenu', 'none');
    menuitem_SW.setAttribute('label', 'Toolbar Position');
    menuitem_SW.classList.add('menuitem-iconic');

    let menu_SW = document.getElementById('toolbar-context-menu');
    let separator_SW = document.querySelector('.viewCustomizeToolbar');
    menu_SW.insertBefore(menuitem_SW, separator_SW);

    let menuseparator_sw = document.createXULElement("menuseparator");
    menuseparator_sw.setAttribute('id', 'sw_separator');
    menu_SW.insertBefore(menuseparator_sw, menuitem_SW.nextSibling);

    // Button context menuitem removal disabled
    setTimeout(() => {
      let elementsArray = document.querySelectorAll("toolbarbutton");
      elementsArray.forEach(function(element) {

      let contexter = document.querySelector(".customize-context-removeFromToolbar");
      let contexter2 = document.querySelector(".customize-context-removeFromPanel");

      element.addEventListener('contextmenu', e => {
        	if (e.button === 2) {
              if (element.id === "NewToolbar_button") {
                  contexter.style.opacity = "0.5";
                  contexter.style.pointerEvents = "none";
                  contexter2.style.opacity = "0.5";
                  contexter2.style.pointerEvents = "none";
                  }
              else {
                  contexter.style.display = "flex";
                  contexter2.style.display = "flex";
                  contexter.style.opacity = "";
                  contexter.style.pointerEvents = "";
                  };
               }
           });
       });
    },100);

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

    // Move button back if removed from toolbars or overflow menu
    let previousPlacement = null;
    window.addEventListener("beforecustomization", () => {
      previousPlacement = CustomizableUI.getPlacementOfWidget("NewToolbar_button");
    });
    function ensureTestButtonNotInPalette() {
      let placement = CustomizableUI.getPlacementOfWidget("NewToolbar_button");
      if (!placement) {
        if (previousPlacement) {
          CustomizableUI.addWidgetToArea(
            "NewToolbar_button",
            previousPlacement.area,
            previousPlacement.position
          );
        } else {
          CustomizableUI.addWidgetToArea(
            "NewToolbar_button",
            CustomizableUI.AREA_NAVBAR
          );
        }
      }
    };
    window.addEventListener("aftercustomization", ensureTestButtonNotInPalette);

    // 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_new_toolbar_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 */
#new_toolbar {
    --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 adjusts to Toolbar Position  */

#NewToolbar_button .toolbarbutton-icon,
#NewToolbar_position_Con :is(image, img) {
    transition: transform 0.125s;
    transform: rotate(0deg);
}
#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(-270deg);
}
#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;
}
#new_toolbar {
    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, .top_mode) #new_toolbar: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 #new_toolbar: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;
}

#new_toolbar:not([customizing]).off-mode > :is(.toolbarbutton-1, toolbaritem) {
    opacity: 0 !important;
}
#new_toolbar > :is(.toolbarbutton-1, toolbaritem),
#new_toolbar 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 #new_toolbar: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 / Top --*/

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

#toolbox_new.top_mode #new_toolbar:not([customizing]),
#toolbox_new.bottom_mode #new_toolbar: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:where(.bottom_mode, .top_mode) #new_toolbar:not([customizing]).off-mode {
    min-height: 0px !important;
    height: 0px !important;
    max-height: 0px !important;
    max-width: unset !important;
}

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

/*--  Top  --*/

#toolbox_new.top_mode #new_toolbar:not([customizing]) {
    border-top-width: 0px;
    border-bottom-width: ${new_tb_border_width};
    transition: height 0.25s ease, max-height 0.25s ease, min-height 0.25s ease, border-bottom-width 0.125s ease !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;
}
#new_toolbar[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]) #new_toolbar[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 */
#new_toolbar.ntb_bg_color {
    background-color: ${new_tb_bg_color} !important;
}

/*- Background themes, if background images are tiled, try theme_fix options above -*/

:root[lwtheme] #new_toolbar:not(.ntb_bg_color) {
    background-color: var(--lwt-accent-color, var(--toolbar-bgcolor)) !important;
}
:root[lwtheme][lwtheme-image] #new_toolbar: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] #new_toolbar: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:is(.bottom_mode, .top_mode) #new_toolbar: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 #new_toolbar:not(.ntb_bg_color) {
     background: transparent !important;
}
:root[lwtheme][lwtheme-image] #new_toolbar: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, opacity 0.25s ease;
}
:root[lwtheme][lwtheme-image] #toolbox_new:is(.bottom_mode, .top_mode) #new_toolbar:not(.ntb_bg_color, [customizing])::before {
    transform: scaleX(-1) !important;
    transform-origin: 50% 50% !important;
    width: 100% !important;
    opacity: 1;
}
:root[lwtheme][lwtheme-image] #new_toolbar:not(.ntb_bg_color)[customizing]::before {
    width: calc(100vh - var(--height_newbar_c)) !important;
}
#new_toolbar:not([customizing]).off-mode::before {
    min-width: 0px !important;
    margin-inline: 0px calc(0px - var(--ug-newbar_width));
}
#toolbox_new.left_mode #new_toolbar:not([customizing]).off-mode::before {
    margin-inline: calc(0px - var(--ug-newbar_width)) 0;
}

#toolbox_new.bottom_mode #new_toolbar:not([customizing]).off-mode::before {
    min-height: 0px !important;
    margin-inline: 0px;
    margin-block: 0px calc(0px - var(--ug-newbar_width)) !important;
}

#toolbox_new.top_mode #new_toolbar:not([customizing]).off-mode::before {
    min-height: 0px !important;
    margin-inline: 0px;
    margin-block: calc(0px - var(--ug-newbar_width)) 0px !important;
    opacity: 0 !important;
}

 `;
}

if (separator_fix) {
  css += `
/* Adjustments for Separator Scripts  */

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

Horstmann

Zitat von Mira_Belle

Zitat von Horstmann

Mira_Belle , siehst du das Problem bei dir, rechte Leiste wird nicht komplett ausgeblendet mit #185, mit oder ohne Theme?

Weder mit Theme noch mit eigener Backgroud-Farbe!

Hast Du jetzt eine neue, überarbeitete Version?
Wegen des Themebug! Welchem Themebug?

Danke für den Test!

Die korrigierte Version kommt zügig; der Themebug ist sehr spezifisch, nur bei theme_fix_2 mit Toolbar oben, das Ausschalten ist defekt.

Horstmann

Zitat von FuchsFan

Fehler gefunden! Im css-Code, der ursprünglich für die Addonbar von Aris ausgelegt war, gab es diesen Eintrag (wird nicht mehr benötigt), der das Problem verursachte. Übrigens war es schon in früheren Versionen auch so, ist mir nur nicht aufgefallen, weil die Leiste in der Regel offen war. Nun bleibt die v15 installiert, und läuft. Danke!

Uuuuunglaublich...
Dabei geb ich mir eigentlich Mühe so was wie IDs möglichst einzigartig zu halten...

Danke für die Detektivarbeit!

Die ID schreib ich um nur für alle Fälle, und den Theme Bug hab ich dadurch ja auch gefunden.

Horstmann

Zitat von FuchsFan

Zitat von Horstmann

Ich bin mir auch immer noch nicht sicher mit deinen angeschnittenen Buttons, da ist irgendein Code im Gange der die Dinger verschiebt.

Deine Vermutung hat sich bestätigt, da muss ich noch am css-Code arbeiten. Sorry, da hätte ich ja auch selbst mal schauen können.

Aber in Version 14 gab's das Problem noch nicht?

Man weiss nie wann ein anderer Code dazwischen schiesst; wenn ich deinen dafür verantwortlichen Button/Leisten Code kennen würde, könnte man das sicher lösen in meinem Script , auch für potentiell ähnliche Probleme anderer User in der Zukunft.

Horstmann

Zitat von FuchsFan

Zitat von Horstmann

Edit: hast du theme_fix_2 auf true? Da gibt's jetzt einen Bug ...
Falls ja, probier mal bitte auf false.

War auf false, auf true gestellt, dann ist es wie gewünscht, Leiste vollständig ausgeblendet.

Jetzt ist es noch komplizierter.

Eigentlich sollte es evtl. Probleme geben, wenn theme_fix_2 auf true steht! - und nur bei Leiste oben - sonst nicht.
Da ist der Bug den ich finden kann.
Ich bin mir auch immer noch nicht sicher mit deinen angeschnittenen Buttons, da ist irgendein Code im Gange der die Dinger verschiebt.

Vielleicht hören wir noch von anderen Testern ; Version 15 aus #185 sollte eigentlich keine Probleme machen dieser Art in der Standardeinstellung - theme_fix_2 = false - auch nicht mit Themes.

Mira_Belle , siehst du das Problem bei dir, rechte Leiste wird nicht komplett ausgeblendet mit #185, mit oder ohne Theme?

Horstmann

Zitat von FuchsFan

Bei deiner Version, und auch bei der aus #185 bleibt rechts nach Ausblendung ein Rest übrig. Nur rechts, bei anderen Positionen nicht. Wie und wo könnte man das korrigieren?

Ich hab das mal im aktuellen Fx Release und Nightly getestet, und kann das Problem nicht sehen, Mira scheint's auch nicht.
Hast du irgendwas am CSS geändert im Script, und gab's das Problem in der Version 14 (#161) nicht?

Sind evtl. 2 Leistenscripts gleichzeitig aktiv, mal ein anderes Theme probiert?

Edit: hast du theme_fix_2 auf true? Da gibt's jetzt einen Bug ...
Falls ja, probier mal bitte auf false.

Horstmann

Zitat von Mira_Belle

Das CSS muss weg und /-- Top (NEU) --/ muss zu /*-- Top (NEU) --*/ geändert werden.
Ich und CSS, tz, tz, tz.

Ich hab dann nochmal geschaut, und eine Ladung weiterer Fehler und Änderungen gefunden in #173, die das CSS so ziemlich zerkloppen.

Mein Vorschlag wäre, meine letzte Version von #185 zu nehmen, und dort dein JS Verschwinden Dingens einzubauen.
Vom CSS würde ich eher wegbleiben, ausser um die Position von Hintergundbilder zu ändern o.ä.; die gegenseitigen Abhängigkeiten innerhalb des CSS sind nicht leicht zu erkennen.

Deinen Zusatz für die Anpassung der Buttongrösse würde ich rauslassen, die Funktion ist schon da, und nicht zufällig so aufgebaut.

Eine grobe Version mit (nicht kompletten!) Korrekturen von deiner #173 hänge ich mal an, nur angetestet (Icons anpassen).

00-toolbar_test-mira-fix2.uc.js.zip

Horstmann

Zitat von FuchsFan

wo stelle ich das automatische Ausblenden der Toolbar ab.

In meinen Scripts gibt es kein automatisches Ausblenden, nur in dem von Mira.

Horstmann

Schlag auf Schlag geht das hier.

Gar nicht gut an der letzten Version war, dass sich der Button nicht mehr in andere Toolbars oder das Overflow Menü verschieben liess.
Das geht jetzt wieder, und falls der Button aus den oben genannten entfernt wurde, poppt er zurück an seine alte Position, sobald man aus dem Anpassenfenster herausgeht.
(Hat nur minimale Bugs, merkt evtl. keiner... ).

Und eine zusätzliche Position für die Leiste oben ist auch dabei, danke an Mira_Belle für die Vorarbeit.

Sonst sind die Einstellungen die gleichen, und können übernommen werden.

JavaScript

// Additional toolbars
// Buttons to turn toolbar On/Off, right-click/context menuitem to switch toolbar position

// Use filename starting with 00 for custom button functions !! =>
// 00_extra_toolbars_V15.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, Mitleser and Mira_Belle

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

(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, changes toolbar size as well
        let new_tb_btn_size = '6px';

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

        // Distance between buttons, 2px default
        let new_tb_distance = '5px';

// 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 = false;
        // 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('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,
          onCreated: (this_button) => {
             this_button.setAttribute('closemenu', 'none');
          }
        });
    } 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");
       }
    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");
       }

    // 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
    let menuitem_SW = document.createXULElement("menuitem");
    menuitem_SW.setAttribute('id', 'NewToolbar_position_Con');
    menuitem_SW.setAttribute('closemenu', 'none');
    menuitem_SW.setAttribute('label', 'Toolbar Position');
    menuitem_SW.classList.add('menuitem-iconic');

    let menu_SW = document.getElementById('toolbar-context-menu');
    let separator_SW = document.querySelector('.viewCustomizeToolbar');
    menu_SW.insertBefore(menuitem_SW, separator_SW);

    let menuseparator_sw = document.createXULElement("menuseparator");
    menuseparator_sw.setAttribute('id', 'sw_separator');
    menu_SW.insertBefore(menuseparator_sw, menuitem_SW.nextSibling);

    // Button context menuitem removal disabled
    setTimeout(() => {
      let elementsArray = document.querySelectorAll("toolbarbutton");
      elementsArray.forEach(function(element) {

      let contexter = document.querySelector(".customize-context-removeFromToolbar");
      let contexter2 = document.querySelector(".customize-context-removeFromPanel");

      element.addEventListener('contextmenu', e => {
        	if (e.button === 2) {
              if (element.id === "NewToolbar_button") {
                  contexter.style.opacity = "0.5";
                  contexter.style.pointerEvents = "none";
                  contexter2.style.opacity = "0.5";
                  contexter2.style.pointerEvents = "none";
                  }
              else {
                  contexter.style.display = "flex";
                  contexter2.style.display = "flex";
                  contexter.style.opacity = "";
                  contexter.style.pointerEvents = "";
                  };
               }
           });
       });
    },100);

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

    // Move button back if removed from toolbars or overflow menu
    let previousPlacement = null;
    window.addEventListener("beforecustomization", () => {
      previousPlacement = CustomizableUI.getPlacementOfWidget("NewToolbar_button");
    });
    function ensureTestButtonNotInPalette() {
      let placement = CustomizableUI.getPlacementOfWidget("NewToolbar_button");
      if (!placement) {
        if (previousPlacement) {
          CustomizableUI.addWidgetToArea(
            "NewToolbar_button",
            previousPlacement.area,
            previousPlacement.position
          );
        } else {
          CustomizableUI.addWidgetToArea(
            "NewToolbar_button",
            CustomizableUI.AREA_NAVBAR
          );
        }
      }
    };
    window.addEventListener("aftercustomization", ensureTestButtonNotInPalette);

    // 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 adjusts to Toolbar Position  */

#NewToolbar_button .toolbarbutton-icon,
#NewToolbar_position_Con :is(image, img) {
    transition: transform 0.125s;
    transform: rotate(0deg);
}
#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(-270deg);
}
#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, .top_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 / Top --*/

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

#toolbox_new.top_mode #newtoolbar:not([customizing]),
#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:where(.bottom_mode, .top_mode) #newtoolbar:not([customizing]).off-mode {
    min-height: 0px !important;
    height: 0px !important;
    max-height: 0px !important;
    max-width: unset !important;
}

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

/*--  Top  --*/

#toolbox_new.top_mode #newtoolbar:not([customizing]) {
    border-top-width: 0px;
    border-bottom-width: ${new_tb_border_width};
    transition: height 0.25s ease, max-height 0.25s ease, min-height 0.25s ease, border-bottom-width 0.125s ease !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;
}

  `;

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:is(.bottom_mode, .top_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:is(.bottom_mode, .top_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:is(.bottom_mode, .top_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:where(.bottom_mode, .top_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

Horstmann

Zitat von Mira_Belle

Neuer Versuch.

Eins noch, du hast da in Zeile 671 einen dicken Schnitzer drin; /-- Top (NEU) --/ sollte /*-- Top (NEU) --*/ heissen.
673 bis 676 müssten dann vermutlich raus.

Horstmann

Zitat von Mira_Belle

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.

Ich weiss nicht wie viele Buttons du zu versorgen hast, ich habe nicht sehr viele, und dafür ein angepasstes Overflow Menü mit momentan 2 Spalten (nur CSS), das kann man (fast) beliebig erweitern.

Praktisch könnte für dich auch die Leiste von Mitleser sein, ist schlanker im Auftritt, oder was das nur mit Erscheinen bei hover arbeitet.
Für eine nächste Version könnte ich eine Option für oben mit reinpacken, du hast das ja schon gut vorexerziert, nur das Ding mit dem automatisch Verschwinden mach ich leider nicht.

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.

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.

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?

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

Beiträge von Horstmann

Seitennavigation - Fly Out Menü

Seitennavigation - Fly Out Menü

Schaltbare vertikale Overlay-Zusatzleiste

Tableiste unten per CSS-Code, oder per Skript.

Eigene Zusatzleisten

Eigene Zusatzleisten

Eigene Zusatzleisten

Eigene Zusatzleisten

Eigene Zusatzleisten

Eigene Zusatzleisten

Eigene Zusatzleisten

Eigene Zusatzleisten

Eigene Zusatzleisten

Eigene Zusatzleisten

Eigene Zusatzleisten

Eigene Zusatzleisten

Eigene Zusatzleisten

Eigene Zusatzleisten

Eigene Zusatzleisten

Eigene Zusatzleisten