Beiträge von Horstmann

Horstmann

Zitat von grisu2099

Bei meinem Test hat sich die Leiste über die vertikalen Tabs gelegt und diese quasi "zugedeckt". Außerdem verkleinert das Skript offenbar nicht den Inhaltsbreich des Browsers - sprich: Wenn auf einer Website der Inhalt bis weit an den Rand reicht, wird er ebenfalls durch die Leiste überdeckt...

Hmm, du bist aber nicht mit diesem Script unterwegs, statt dem von hier?

Hab gerade nochmal (am Mac) in Fx 145 getestet, scheint alles zu passen, inkl. Sidebar, vertikale Tabs, Browserinhalt.

Horstmann

Zitat von superbertel

Jetzt kommt der Obergag:
ich musste meinen PC neu aufsetzen, dabei habe ich die neueste Version 145.0 installiert und das Profil aus dem Ordner meiner alten Festplatte in den neuen Profilordner kopiert. Ergebnis: Tabs sind nebeneinander und die Tabs sehen auch etwas anders aus (Umrandung etc.). Daher ging ich davon aus, dass es mit der neuen Version zusammenhängen muss.
Jetzt habe ich mal auf meiner alten Festplatte die Version von 144.2 auf 145 upgegraded, und was soll ich sagen:
ALLES funktioniert wir bisher !!

Hattest du regelmässig den Start Cache gelöscht während dieser Vorgänge, via about:support ?

Und bitte immer auch Screenshots posten, Tabs untereinander/nebeneinander macht wenig Sinn ohne Kontext.
Vor allem auch weil Tabs nicht untereinander geöffnet werden können.

Zitat von Boersenfeger

lautet korrekt
security.allow_unsafe_dangerous_privileged_evil_eval

Lautet korrekt: Finger weg und Script umschreiben.

Horstmann

Etwas aufgeräumt, eine Ladung Code entfernt:

JavaScript

// Additional toolbars
// Buttons to turn toolbar On/Off, or switch toolbar position

// Use filename starting with 00 for custom button functions !! =>
// 00_extra_toolbars_V12.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 V12

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

// User settings
// After script changes, restart with Clear StartUp Cache => about:support

   // Custom Icons, expected in profile-name/chrome/icons folder ("icons" folder needs to be created)
        let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
        let IconPath = '/chrome/icons/';

        // On/Off Button
        // Custom icon file
        let Icon_tb = 'toolbar_4.svg';
        // Firefox icon
        let Icon_tb_Fx = 'chrome://browser/skin/sidebars-right.svg';
        // false = use Firefox Icon, true = Custom Icon
        let new_tb_icon  = false;
        let ImagePath = ProfilePath + IconPath + Icon_tb;

        // Position switch button
        // Custom icon file
        let Icon_sw = 'toolbar_switch_4.svg';
        // Firefox icon
        let Icon_sw_Fx = 'chrome://global/skin/icons/arrow-right.svg';
        // false: use Firefox Icon, true: Custom Icon
        let new_tb_icon_sw  = false;
        let ImagePathSW = ProfilePath + IconPath + Icon_sw;

   // Custom background color: false = Off ; true = On (overwrites themes)
        let new_tb_color = false;
        // background color if true
        let new_tb_bg_color = 'hsla(200, 45%, 87%, 1)';

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

// Size of toolbar and buttons changes, must be px values, all 3 settings are related ==>

        // Change button sizes via padding, 8px default
        let new_tb_btn_size = '6px';

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

        // Width vertical toolbar / height horizontal toolbar, increased by this value on both sides
        // Increase distance of buttons to edges, 0px => toolbar size = button size
        let new_tb_size = '1px';

// Expert mode ===>>>
// Saving changes, initial states ==>

   // true = save states toolbar On/Off / position on quitting Firefox, false = don't save (prefs deleted)
        // 2x restart required once after change, to make the the option stick
        let new_tb_save = true;

   // Initial state toolbar visibility: 0 = On, 1 = Off, only if new_tb_save = false (not saved)
        let new_tb_off = 0;
   // Position initial state: 0 = right, 1 = left, 2 = bottom, only if new_tb_save = false (not saved), or new_tb_btn_sw = false
        let new_tb_loc = 0;

   // Position Switch button: true = On, false = Remove
        let new_tb_btn_sw = true;

   // Extra: false = Button switches toolbar On/Off / changes Position for all open windows ; true = only active window
        let new_tb_uno = false;       // On/Off Button
        let new_tb_uno_sw = false;    // Position button

// Possible problem solutions, if required, experimental ==>

   // Fix #1 for themes with low/ tiling background images, true / false, best to only use one of both
        let theme_fix = true;
        // Fix #2, overwrites Fix #1
        let theme_fix_2 = false;

   // Adjustments for Restore 'Space & Separator' items script for Firefox 102+ by Aris, true / false
        // https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/space_and_separator_restorer.uc.js
        let separator_fix = true;

// End of user settings

        if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
        	Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
        }

        const pref_newtoolbar_state = "userchrome.newtoolbar.enabled";

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

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

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

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

        let observer_custom = new MutationObserver(function(mutations) {
          for (let mutation of mutations) {
            try {
              const customContainer = document.getElementById('customization-container');
              if (!customContainer) return;
              const rect = customContainer.getBoundingClientRect();
              document.getElementById('toolbox_new').style.setProperty('--height_newbar_c', rect.top + 'px');
            } catch (e) { }
          }
        });
        observer_custom.observe(document.querySelector('#main-window'), {
          attributes: true,
          attributeFilter: ['customizing'],
        });

        let navbar_size = document.getElementById("browser");
        let observer = new ResizeObserver(() => {
        let rect = navbar_size.getBoundingClientRect();
        document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.height + 'px');
        document.getElementById('toolbox_new').style.setProperty('--height_newbar_top', rect.top + 'px');
        });
        observer.observe(navbar_size);

    //On/Off button
    try {
        CustomizableUI.createWidget({
          id: 'NewToolbar_button',
          defaultArea: CustomizableUI.AREA_NAVBAR,
          tooltiptext: 'Toolbar On',
          label: 'Toggle New Toolbar',
          onBuild(doc) {
            let ntb_btn = doc.createXULElement('toolbarbutton');
            return ntb_btn;
          }
        });
    } catch(e) { }

    // Button function
     NewToolbar_button.addEventListener('click', event => {
        if (event.button === 0 ) {
          if (!new_tb_uno) {
            tb_toggle();
          }
          else {
            tb_toggle_uno();
          };
          if (NewToolbar_button.classList.contains("off-mode_btn")) {
             NewToolbar_button.setAttribute("tooltiptext", "Toolbar Off");
            }
          else {
            NewToolbar_button.setAttribute("tooltiptext", "Toolbar On");
          };
        }
     });

    function tb_toggle() {
       for (let win of Services.wm.getEnumerator("navigator:browser")) {
         const toolbar = win.document.getElementById("newtoolbar");
         const browserArea = win.document.getElementById("browser");
         const button = win.document.getElementById("NewToolbar_button");
         toolbar.classList.toggle("off-mode");
         browserArea.classList.toggle("off-mode_b");
         button.classList.toggle("off-mode_btn");
         const ntb_visible = !toolbar.classList.contains("off-mode");
         Services.prefs.setBoolPref(pref_newtoolbar_state, ntb_visible);
         }
    };

    function tb_toggle_uno() {
         newtoolbar.classList.toggle("off-mode");
         browser.classList.toggle("off-mode_b");
         NewToolbar_button.classList.toggle("off-mode_btn");
         const ntb_visible = !newtoolbar.classList.contains("off-mode");
         Services.prefs.setBoolPref(pref_newtoolbar_state, ntb_visible);
    };

    // Position initial state
    if (new_tb_loc === 0) {
         toolbox_new.classList.add("right_mode");
         browser.classList.add("right_mode_b");
         NewToolbar_button.classList.add("right_mode_btn");
       }
    else if (new_tb_loc === 1) {
         toolbox_new.classList.add("left_mode");
         browser.classList.add("left_mode_b");
         NewToolbar_button.classList.add("left_mode_btn");
       }
    else if (new_tb_loc === 2) {
         toolbox_new.classList.add("bottom_mode");
         browser.classList.add("bottom_mode_b");
         NewToolbar_button.classList.add("bottom_mode_btn");
       }

    let toolbarEnabled = true;
    try {
        toolbarEnabled = Services.prefs.getBoolPref(pref_newtoolbar_state);
    } catch(e) {
        Services.prefs.setBoolPref(pref_newtoolbar_state, new_tb_off === 0);
        toolbarEnabled = new_tb_off === 0;
    }
    if (!toolbarEnabled) {
        newtoolbar.classList.add("off-mode");
        browser.classList.add("off-mode_b");
        NewToolbar_button.classList.add("off-mode_btn");
        NewToolbar_button.setAttribute("tooltiptext", "Toolbar Off");
    }

    // Icon
    if (new_tb_icon) {
         NewToolbar_button.classList.add("icon_mode");
       }
    // Background color
    if (new_tb_color) {
         newtoolbar.classList.add("ntb_bg_color");
       }

    // Code by Aris => Attach handlers for buttons moved outside #navigator-toolbox
    // Based on: https://searchfox.org/firefox-main/source/browser/base/content/navigator-toolbox.js
    const customHandlers = {
    	  "unified-extensions-button": (el, e) => gUnifiedExtensions.togglePanel(e),
    	  "fxa-toolbar-menu-button":   (el, e) => gSync.toggleAccountPanel(el, e),
    	  "firefox-view-button":       (el, e) => FirefoxViewHandler.openToolbarMouseEvent(e),
    	  "downloads-button":          (el, e) => DownloadsIndicatorView.onCommand(e),
    	  "pageActionButton":          (el, e) => BrowserPageActions.mainButtonClicked(e),
    	  "alltabs-button":            (el, e) => gTabsPanel.showAllTabsPanel(e, "alltabs-button"),
    	  "library-button":            (el, e) => PanelUI.showSubView("appMenu-libraryView", el, e),
    	  "import-button":             (el, e) => MigrationUtils.showMigrationWizard(window, {
  	  entrypoint: MigrationUtils.MIGRATION_ENTRYPOINTS.BOOKMARKS_TOOLBAR,
  	  }),
    };
		document.getElementById("newtoolbar").addEventListener("mousedown", (e) => {
		  const button = e.target.closest("toolbarbutton");
		  if (button?.id && customHandlers[button.id]) customHandlers[button.id](button, e);
		});

// Position switch button

    const pref_position = "userchrome.newtoolbar.position";

    function getPositionPref() {
        try {
            return Services.prefs.getCharPref(pref_position);
        } catch (e) {
            return "right"; // Standardwert
        }
    }
    function setPositionPref(value) {
        Services.prefs.setCharPref(pref_position, value);
    }

    try {
        CustomizableUI.createWidget({
          id: 'NewToolbar_position',
          defaultArea: CustomizableUI.AREA_NAVBAR,
	  	    removable: true,
	  	    label: "Position New Toolbar", // button title
	  	    tooltiptext: 'Position New toolbar', // tooltip title
          onBuild(docs) {
            let btnsw = docs.createXULElement('toolbarbutton');
            return btnsw;
          }
        });
     } catch(e) { };

     function applyPosition(pos) {
        toolbox_new.classList.remove("left_mode", "bottom_mode", "right_mode");
        browser.classList.remove("left_mode_b", "bottom_mode_b", "right_mode_b");
        NewToolbar_button.classList.remove("left_mode_btn", "bottom_mode_btn", "right_mode_btn");
        NewToolbar_position.classList.remove("left_mode_sw", "bottom_mode_sw", "right_mode_sw");
        if (pos === "left") {
            toolbox_new.classList.add("left_mode");
            browser.classList.add("left_mode_b");
            NewToolbar_button.classList.add("left_mode_btn");
            NewToolbar_position.classList.add("left_mode_sw");
        } else if (pos === "bottom") {
            toolbox_new.classList.add("bottom_mode");
            browser.classList.add("bottom_mode_b");
            NewToolbar_button.classList.add("bottom_mode_btn");
            NewToolbar_position.classList.add("bottom_mode_sw");
        } else if (pos === "right") {
            toolbox_new.classList.add("right_mode");
            browser.classList.add("right_mode_b");
            NewToolbar_button.classList.add("right_mode_btn");
            NewToolbar_position.classList.add("right_mode_sw");
        }
     }
     let savedPos = getPositionPref();
     applyPosition(savedPos);

    // Button function
     NewToolbar_position.addEventListener('click', event => {
        if (event.button === 0 ) {
          if (!new_tb_uno_sw) {
            poser();
          }
          else {
            poser_uno();
          };
        }
     });

     function poser() {
			 for (let win of Services.wm.getEnumerator("navigator:browser")) {
           const toolbox = win.document.getElementById("toolbox_new");
           const browserArea = win.document.getElementById("browser");
           const button = win.document.getElementById("NewToolbar_button");
           const button_sw = win.document.getElementById("NewToolbar_position");

           if (toolbox.classList.contains("right_mode")) {
                toolbox.classList.replace("right_mode", "left_mode");
                browserArea.classList.replace("right_mode_b", "left_mode_b");
                button.classList.replace("right_mode_btn", "left_mode_btn");
                button_sw.classList.replace("right_mode_sw", "left_mode_sw");
                setPositionPref("left");
               }
           else if (toolbox.classList.contains("left_mode")) {
                toolbox.classList.replace("left_mode", "bottom_mode");
                browserArea.classList.replace("left_mode_b", "bottom_mode_b");
                button.classList.replace("left_mode_btn", "bottom_mode_btn");
                button_sw.classList.replace("left_mode_sw", "bottom_mode_sw");
                setPositionPref("bottom");
               }
           else if (toolbox.classList.contains("bottom_mode")) {
                toolbox.classList.replace("bottom_mode", "right_mode");
                browserArea.classList.replace("bottom_mode_b", "right_mode_b");
                button.classList.replace("bottom_mode_btn", "right_mode_btn");
                button_sw.classList.replace("bottom_mode_sw", "right_mode_sw");
                setPositionPref("right");
               }
             }
           };

     function poser_uno() {
           if (toolbox_new.classList.contains("right_mode")) {
                toolbox_new.classList.replace("right_mode", "left_mode");
                browser.classList.replace("right_mode_b", "left_mode_b");
                NewToolbar_button.classList.replace("right_mode_btn", "left_mode_btn");
                NewToolbar_position.classList.replace("right_mode_sw", "left_mode_sw");
                setPositionPref("left");
               }
           else if (toolbox_new.classList.contains("left_mode")) {
                toolbox_new.classList.replace("left_mode", "bottom_mode");
                browser.classList.replace("left_mode_b", "bottom_mode_b");
                NewToolbar_button.classList.replace("left_mode_btn", "bottom_mode_btn");
                NewToolbar_position.classList.replace("left_mode_sw", "bottom_mode_sw");
                setPositionPref("bottom");
               }
           else if (toolbox_new.classList.contains("bottom_mode")) {
                toolbox_new.classList.replace("bottom_mode", "right_mode");
                browser.classList.replace("bottom_mode_b", "right_mode_b");
                NewToolbar_button.classList.replace("bottom_mode_btn", "right_mode_btn");
                NewToolbar_position.classList.replace("bottom_mode_sw", "right_mode_sw");
                setPositionPref("right");
               }
           };

    // Icon
    if (new_tb_icon_sw) {
         NewToolbar_position.classList.add("icon_mode_sw");
       }

    // Remove switch button
    if (!new_tb_btn_sw) {
        NewToolbar_position.remove();
        Services.prefs.clearUserPref(pref_position);
    }

    // On quitting Firefox: delete Prefs, if new_tb_save = false
    if (!new_tb_save) {
         Services.obs.addObserver(function observer(subject, topic, data) {
             if (topic === "quit-application-granted") {
                 try {
                     Services.prefs.clearUserPref(pref_newtoolbar_state);
                     Services.prefs.clearUserPref(pref_position);
                 } catch (e) { }
                 Services.obs.removeObserver(observer, "quit-application-granted");
             }
         }, "quit-application-granted");
      };

let css =`

#main-window {
    --ug-newbar_basewidth: calc(2 * ${new_tb_btn_size} + 16px);  /* Minimalgroesse = Groesse Buttons */
    --ug-newbar_width: calc(var(--ug-newbar_basewidth) + ${new_tb_border_width} + 2 * `+new_tb_size+`);
}

/*- Buttons -*/

/* Buttons sizes */
#newtoolbar {
    --toolbarbutton-inner-padding: ${new_tb_btn_size} !important;
	 	--toolbarbutton-outer-padding: 0px !important;
}
/*  On/Off Button  */
#NewToolbar_button .toolbarbutton-icon {
    list-style-image: url("${Icon_tb_Fx}");
}
#NewToolbar_button.icon_mode .toolbarbutton-icon {
    list-style-image: url("${ImagePath}");
}
#NewToolbar_button.off-mode_btn:not(:hover, :active) .toolbarbutton-icon {
    opacity: 0.4;
}
/*  Switch Button  */
#NewToolbar_position .toolbarbutton-icon {
    list-style-image: url("${Icon_sw_Fx}");
}
#NewToolbar_position.icon_mode_sw .toolbarbutton-icon {
    list-style-image: url("${ImagePathSW}");
}
/*  Button adjustments to Toolbar Position  */
:is(#NewToolbar_button.left_mode_btn, #NewToolbar_position.left_mode_sw) .toolbarbutton-icon {
    transform: rotate(180deg);
}
:is(#NewToolbar_button.bottom_mode_btn, #NewToolbar_position.bottom_mode_sw) .toolbarbutton-icon {
    transform: rotate(90deg);
}

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

/*--  Browser adjustments  --*/

#browser.right_mode_b {
    transition: padding-right 0.25s ease !important;
}
#browser.left_mode_b {
    transition: padding-left 0.25s ease !important;
}
#browser.bottom_mode_b {
    transition: padding-bottom 0.25s ease !important;
}
#browser:not(.off-mode_b).right_mode_b {
    padding-right: var(--ug-newbar_width) !important;
}
#browser:not(.off-mode_b).left_mode_b {
    padding-left: var(--ug-newbar_width) !important;
}
#browser:not(.off-mode_b).bottom_mode_b {
    padding-bottom: var(--ug-newbar_width) !important;
}

/*--  Basics / Right  --*/

#toolbox_new {
    position: fixed;
    z-index: 2 !important;
    display: flex;
    width: fit-content;
    top: var(--height_newbar_top);
    right: 0px;
}
#newtoolbar {
    display: flex;
    min-width: var(--ug-newbar_basewidth) !important;
    width: var(--ug-newbar_width) !important;
    min-height: var(--ug-newbar_basewidth) !important;
    height: var(--height_newbar) !important;
    align-items: center !important;
    overflow: hidden !important;
    padding-block: 8px;
    border-width: 0px;
    border-style: solid !important;
    border-color: ${new_tb_border_color} !important;
    border-left-width: ${new_tb_border_width};
    border-right-width: 0px;
    margin-inline: 0px;
}

#toolbox_new:not(.bottom_mode) #newtoolbar:not([customizing]) {
    max-width: var(--ug-newbar_width) !important;
    transition: width 0.25s ease, max-width 0.25s ease, min-width 0.25s ease, border-left-width 0.125s ease;
}

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

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

/*--  Left  --*/

#toolbox_new.left_mode {
    right: unset;
    left: 0px;
}
#toolbox_new.left_mode #newtoolbar:not([customizing]) {
    border-left-width: 0px;
    border-right-width: ${new_tb_border_width};
    transition: width 0.25s ease, max-width 0.25s ease, min-width 0.25s ease, border-right-width 0.125s ease;
}

/*--  Bottom  --*/

#toolbox_new.bottom_mode {
    top: unset;
    bottom: 0px;
}
#toolbox_new.bottom_mode #newtoolbar:not([customizing]) {
    flex-direction: row !important;
    min-height: 0px !important;
    height: var(--ug-newbar_width) !important;
    max-height: var(--ug-newbar_width) !important;
    min-width: 0px !important;
    width: 100vw !important;
    padding-block: 0px;
    padding-inline: 8px;
    border-inline-width: 0px;
    border-top-width: ${new_tb_border_width};
    /*justify-content: center !important;*/    /* Inhalt mittig, optional */
    transition: height 0.25s ease, max-height 0.25s ease, min-height 0.25s ease, border-top-width 0.125s ease !important;
}
#toolbox_new.bottom_mode #newtoolbar:not([customizing]).off-mode {
    min-height: 0px !important;
    height: 0px !important;
    max-height: 0px !important;
    max-width: unset !important;
}
#toolbox_new.bottom_mode #newtoolbar:not([customizing]) > :is(.toolbarbutton-1, toolbaritem),
#toolbox_new.bottom_mode #newtoolbar:not([customizing]) toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
    margin-block: var(--toolbarbutton-outer-padding) !important;
    margin-inline: ${new_tb_distance} !important;
}

/*--  Fullscreen  --*/

/* Mac / nur Video Fullscreen */
#main-window[inDOMFullscreen]:not([customizing]) #toolbox_new {
    visibility: collapse !important;
}
#main-window[inDOMFullscreen]:not([customizing]) #browser {
    padding: 0 !important;
}
/* Windows Fullscreen Video + Normal */
@media (-moz-platform: windows) {
#main-window[inFullscreen]:not([customizing]) #toolbox_new {
    visibility: collapse !important;
}
#main-window[inFullscreen]:not([customizing]) #browser {
    padding: 0 !important;
}
}

/*--  customizing  --*/

#main-window[customizing] #toolbox_new {
    top: unset !important;
    bottom: 0 !important;
    right: 0 !important;
    left: unset !important;
}
#newtoolbar[customizing] {
    height: calc(100vh - var(--height_newbar_c)) !important;
    box-shadow: inset 0px 1px ${new_tb_border_color};
    transition: none !important;
}
#main-window:not([customizing]) #newtoolbar[customizing].off-mode {
    min-width: 0px !important;
    width: 0px !important;
    min-height: 0px !important;
    height: 0px !important;
    border-width: 0px !important;
}
#customization-container {
    margin-right: var(--ug-newbar_width) !important;
}

/*-  Background oolors themes  -*/

/* Custom toolbar background color if enabled */
#newtoolbar.ntb_bg_color {
    background-color: ${new_tb_bg_color} !important;
}

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

:root[lwtheme] #newtoolbar:not(.ntb_bg_color) {
    background-color: var(--lwt-accent-color, var(--toolbar-bgcolor)) !important;
}
:root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color) {
    background-image: var(--lwt-header-image) !important;
    background-position: right 0px top 0px !important;
}

/* Icon colors */
/*
.squareClass {
    fill: green;
}
.strichClass {
    fill: purple;
}
.strichClassW {
    fill: cyan;
}
.arrowClass {
    fill: orange;
}
*/

  `;

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

:root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color) {
    background: var(--lwt-header-image) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: right 0px top 0px !important;
}
:root[lwtheme][lwtheme-image] #toolbox_new.bottom_mode #newtoolbar:not(.ntb_bg_color) {
    background-size: auto !important;
}
 `;
}

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

:root[lwtheme][lwtheme-image] #toolbox_new #newtoolbar:not(.ntb_bg_color) {
     background: transparent !important;
}
:root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color)::before {
    content: "" ;
    position: absolute;
    top: 0;
    right: 0;
    width: var(--height_newbar) !important;
    height: var(--ug-newbar_width) !important;
    pointer-events: none;
    z-index: -1 !important;
    background: var(--lwt-header-image) !important;
    background-repeat: no-repeat !important;
    transform: rotate(-90deg) translateX(var(--ug-newbar_width)) !important;
    transform-origin: 100% 100% !important;
    transition: margin 0.25s ease;
}
:root[lwtheme][lwtheme-image] #toolbox_new.bottom_mode #newtoolbar:not(.ntb_bg_color, [customizing])::before {
    transform: scaleX(-1) !important;
    transform-origin: 50% 50% !important;
    width: 100% !important;
}
:root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color)[customizing]::before {
    width: calc(100vh - var(--height_newbar_c)) !important;
}
#newtoolbar:not([customizing]).off-mode::before {
    min-width: 0px !important;
    margin-inline: 0px calc(0px - var(--ug-newbar_width));
}
#toolbox_new.left_mode #newtoolbar:not([customizing]).off-mode::before {
    margin-inline: calc(0px - var(--ug-newbar_width)) 0;
}
#toolbox_new.bottom_mode #newtoolbar:not([customizing]).off-mode::before {
    min-height: 0px !important;
    margin-inline: 0px;
    margin-block: 0px calc(0px - var(--ug-newbar_width)) !important;
}
 `;
}

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

#newtoolbar toolbarseparator {
    width: calc(var(--ug-newbar_width) - ${new_tb_border_width} - 6px) !important;
    margin: 5px 0px !important;
    border-block-color: hsl(0, 0%, 0%, 0.45) hsl(0, 0%, 100%, 0.55) !important;
    transition: width 0.125s ease !important;
}
#newtoolbar :is(toolbarspacer, toolbarspring, toolbarseparator) {
    min-width: 0px !important;
}
#newtoolbar:not([customizing]).off-mode toolbarseparator {
    width: 0px !important;
}
#toolbox_new.bottom_mode #newtoolbar:not([customizing]) toolbarseparator {
    transform: rotate(-90deg) !important;
    margin: 0px !important;
}
#newtoolbar[customizing] toolbarseparator {
    margin-block: 16px !important;
}
 `;
}

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

})();

Alles anzeigen

Icons:

icons_4.zip

Horstmann

Zitat von Sören Hentzschel

wall of text

Vom Händy gepostet?
Formatieren bitteschön!

Horstmann

Zitat von mr.b.

Frage zur Info: ist inzwischen das Problem mit dem Leerraum unterhalb der festgepinnten Tabs gelöst?

Sieht nach mehrzeiligen Tabs aus, das ist glaub ich ein anderes Thema.

Horstmann

Oha, aber das funktioniert - am Mac, Titelleiste an oder aus, drag geht, und der Doppelklick vom Script:

JavaScript

let cssIn =`
		#toolbar-menubar:not([autohide]) #TabsToolbar {
			-moz-window-dragging: no-drag !important;
		}
	`;

Vermutlich nutzlos für Windows, aber der Punkt ist dass es wohl Selektoren gibt für eine versteckte Titelleiste, s. evtl. auch hier.

Horstmann

Zitat von BrokenHeart

Das "draggen" natürlich nicht. Aber ich kenne keine (CSS-)Eigenschaft, die nur den Doppelklick abschaltet
Wie sieht es denn unter macOS aus, funktioniert es da (ohne 'no-drag')?

Ich wusste doch da war was mit dem drag, danke für die Erinnerung!
Und nein, es funktioniert nicht in macOS ohne das drag CSS, bei ausgeschalteter Titelleiste...

Horstmann

Zitat von BrokenHeart

Zitat von 2002Andreas

Geht doch, warum nicht gleich so

Vielen Dank, aber jetzt geht das Ziehen('drag') über die Tableiste nicht mehr. Was ein Problem darstellen kann, wenn man keine Menüleiste und keine Titelleiste nutzt (Standard!).

Braucht es das -moz-window-dragging: no-drag !important; für die Funktion denn?

Vermutlich ja, aber das CSS könnte sich evtl. einschränken lassen mit sowas wie chromehidden Dingens (Fachbegriff), oder was ihr Windows Heiden sonst noch benutzt.

Horstmann

Zitat von FuchsFan

Zitat von Horstmann

Mir ist das auch hier schon aufgefallen; meine Vermutung war aber dass du einfach den Screenshot rechts zu stark angeschnitten hattest.

Nein, hier hatte ich das Script getestet, nur den Hintergrund geändert, sonst nichts. So ist es jetzt mit ein paar Änderungen, Breite kann ja beliebig angepasst werden.

Sieht so aus wie der erste Screenshot.

Ich behaupte mal, deine Buttons sind generell nach rechts und von oben aus versetzt, um ca. 1-2px, via Script oder CSS, und evtl. mit margin.

Aber wenn's gefällt ist ja alles gut.

Horstmann

Zitat von FuchsFan

Zitat von Mitleser

Für Buttons, die in der Breite von den Standardbuttons abweichen kann in der '■UserConfiguration TOOLBAR■' --vt-toolbar-min-width: 32px; /*Leistenbreite bei mouseout*/ angepasst werden. Dann würde auch der rechte Rand des Buttons sichtbar sein.

Die Breite hatte ich schon geändert, aber das sind nicht die einzelnen Button. Das sieht so aus:

Mir ist das auch hier schon aufgefallen; meine Vermutung war aber dass du einfach den Screenshot rechts zu stark angeschnitten hattest.
Die Buttons sollten horizontal zentriert sein, in beiden Scripts.

Falls du CSS benutzt, das generell die horizontale Position von Buttons und/oder Toolbarinhalten manipuliert, dann wäre das evtl. nicht kompatibel mit vertikalen Toolbars.
Kann man korrigieren, dazu müsste man aber deinen entsprechenden Code kennen.

Horstmann

Zitat von Mitleser

EDIT: Wobei sich mir das return button; nicht erschließt.

Gut erkannt, die Zeile macht nichts, ist nur übriggeblieben beim (groben) Test.

Horstmann

Zitat von FuchsFan

Zitat von Horstmann

Wenn du die Border sichtbar haben möchtest, kannst du die Farbe in Zeile 53 fest eingeben

Danke für deine Hinweise, mache ich dann noch. Auf die Schnelle hatte ich das Script erst einmal nur eingefügt, um zu prüfen ob es alles funktioniert.

Kommando zurück - s. Fix in #112, ist jetzt auch in #106.
Zum Entfernen der Border die new_tb_border_width auf 0px setzen, ansonsten müsste sie jetzt automatisch gesetzt und an Themes angepasst sein.

Und danke wieder mal für's Testen!

Horstmann

Zitat von Mitleser

Und ja, wieder den 🫎️-Test nicht bestanden!

Hmm, nur mal grob getestet (Änderungen in Zeilen 96-112, 176/177):

JavaScript

// JavaScript Document
// 00_FlyVertToolbarWithButton_lite.uc.js
// FF 139+
// Vers. 4.1

// Quelle: https://www.....

// Idee von Horstmann: https://www.camp-firefox.de/forum/thema/137714-seitennavigation-fly-out-men%C3%BC/?postID=1246875#post1246875

// Das Script erstellt eine - über dem Seiteninhalt liegende - vertikale Toolbar, die sich per Button ein/ausblenden lässt. Im eingeblendeten Zustand sind nur die Buttons sichtbar, beim Mouseover auf die B.'s werden die Labels aller B.'s 'ausgeklappt'. Die Verzögerungszeit vom Mouseover bis zum 'Ausklappzeitpunkt' der Labels kann konfiguriert werden [transition-delay]. Z.B so, dass die Labels der Buttons erst nach > 5.0s mouseover sichtbar sind - also eigentlich nie; oder nach < 0.5s - fast sofort.
// Die vertikale Position (oben/unten) ist prozentual einstellbar. Die TB ist in der in der Höhe flexibel (je nach Anzahl der Buttons).
// Die horizontale Position der TB (links/rechts) ist per Rechtsklick wählbar.
// Der On/Off-Status sowie die horizontale Position der TB werden beim Beenden des Browsers gespeichert und beim Start wiederhergestellt.
// Beide Funktionen arbeiten in einem zweiten geöffneten Fenster unabhängig vom Ersten.
// Das .svg-Icon des Buttons zum Ein/Ausblenden der Bar kann - je nach Hover-Zustand - mit zwei unterschiedlichen Farben gefüllt werden [fill/stroke].

// ACHTUNG: Einige Systembuttons lassen sich in zusätzliche/eigene Tb's zwar noch verschieben, haben aber KEINE Funktion. Dazu gibt es einen Patch von @BrokenHeart:  https://www.camp-firefox.de/forum/thema/138875-fix-toolbar-buttons-reagieren-nicht-mehr-ab-ff-134/

(function() {
  if (!window.gBrowser)
	return;
const
// ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
         id = 'vert_toolbar_button', // Id des Buttons
      label = 'Vertikale Overlay Toolbar', // Bezeichnung des Buttons
tooltiptext = 'Vertikale Overlay Toolbar\n\nLinksklick: ein/aus\nRechtsklick: links/rechts',
// Icon-------------------------------------------------------
       icon = '16_ci-bar-right_moz.svg', // [Name.Dateiendung] des Symbols
   iconPath = '/chrome/icons/', // Pfad zum Ordner der das Icon beinhaltet
  iconColOu = 'currentColor', // Farbe des Icons (nur .svg-Datei mit [moz-context-properties], bei anderen Icons hat const iconColOu keine Funktion)
  iconColOv = '#9aff9a', // Farbe des Icons beim Überfahren des Buttons (nur .svg-Datei mit [moz-context-properties], bei anderen Icons hat const iconColOv keine Funktion)
// Toolbar----------------------------------------------------
	 isPosV = '50%', // für Toolbar mittig zur Fensterhöhe;
//   isPosV = '0%',     für Toolbar am oberen Fensterrand;
//   isPosV = '100%',   für Toolbar am unteren Fensterrand;
// ■■ END UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));

//Pref '.svg.context-...' prüfen/setzen
if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
	Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
}
//userPrefs
Services.prefs.getDefaultBranch('userchrome.flyvert-toolbar.').setBoolPref('visible', true);
Services.prefs.getDefaultBranch('userchrome.flyvert-toolbar.').setBoolPref('horizontal', true); //true=left/false=right

const
boolPrefVis = 'userchrome.flyvert-toolbar.visible',
 getPrefVis = Services.prefs.getBoolPref(boolPrefVis),
 setPref = Services.prefs.setBoolPref,

boolPrefHor = 'userchrome.flyvert-toolbar.horizontal',
 getPrefHor = Services.prefs.getBoolPref(boolPrefHor);
//TOOLBAR
const toolbar = document.createXULElement('toolbar');
      toolbar.id = 'vert_toolbar';
	  toolbar.setAttribute('orient', 'vertical');
      toolbar.setAttribute('customizable', true);
	  toolbar.setAttribute('mode', 'icons');
	  toolbar.setAttribute('class','toolbar-primary chromeclass-toolbar browser-toolbar customization-target');
//TOOLBOX
const toolbox = document.createXULElement('toolbox');
	  toolbox.id = 'vert_toolbox';
      toolbox.setAttribute('orient','mirror');

	  toolbox.appendChild(toolbar);

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

CustomizableUI.registerArea('vert_toolbar', {legacy: true});
CustomizableUI.registerToolbarNode(toolbar);
//start on/off
switch (getPrefVis) {
	case true:
		vert_toolbar.classList.toggle('button-on');
	break;
	case false:
		vert_toolbar.classList.toggle('button-off');
	break;
};
//start1 left/right
switch (getPrefHor) {
	case true:
		isPosH = 'L';
		vert_toolbar.classList.toggle('bar-left');
		vert_toolbox.classList.toggle('bar-left');
	break;
	case false:
		isPosH = 'R';
		vert_toolbar.classList.toggle('bar-right');
		vert_toolbox.classList.toggle('bar-right');
	break;
};
//BUTTON

try {
CustomizableUI.createWidget({
    id: id,
    defaultArea: CustomizableUI.AREA_NAVBAR,
    label: label,
    tooltiptext: tooltiptext,
    onCreated: (button) => {
		button.style.MozContextProperties = 'fill, stroke, fill-opacity';
		button.style.listStyleImage = 'url("' + curProfDir + iconPath + icon + '")';
		button.style.stroke = iconColOu;
		button.style.minWidth = 'fit-content';
    return button;
    }
    });
  } catch(e) { }

let button = document.getElementById('vert_toolbar_button');

//start2 left/right
switch (getPrefHor) {
	case true:
		button.classList.toggle('bar-left');
	break;
	case false:
		button.classList.toggle('bar-right');
	break;
};
//over
button.addEventListener('mouseover', () => {
		button.style.stroke = iconColOv;
});
//out
button.addEventListener('mouseout', () => {
		button.style.stroke = iconColOu;
});
//contextmenu
button.addEventListener('contextmenu', e => {
	if (event.button === 2) {
		e.preventDefault();
	}
});
//click
button.addEventListener('click', () => {
	if (event.button === 0) {
		event.target.ownerGlobal.vert_toolbar.classList.toggle('button-off');
		event.target.ownerGlobal.vert_toolbar.classList.toggle('button-on');

			const getPrefVis = Services.prefs.getBoolPref(boolPrefVis);
			switch (getPrefVis) {
				case true:
					setPref(boolPrefVis, false);
				break;
				case false:
					setPref(boolPrefVis, true);
				break;
			}
	}
	else
	if ((event.button === 2) && (event.target.ownerGlobal.vert_toolbar.classList.contains('button-on') === true )) {
		event.target.ownerGlobal.vert_toolbar.classList.toggle('bar-left');
		event.target.ownerGlobal.vert_toolbar.classList.toggle('bar-right');
		event.target.ownerGlobal.vert_toolbox.classList.toggle('bar-left');
		event.target.ownerGlobal.vert_toolbox.classList.toggle('bar-right');
		event.target.ownerGlobal.vert_toolbar_button.classList.toggle('bar-left');
		event.target.ownerGlobal.vert_toolbar_button.classList.toggle('bar-right');

			const getPrefHor = Services.prefs.getBoolPref(boolPrefHor);
			switch (getPrefHor) {
				case true:
					isPosH = 'R';
					setPref(boolPrefHor, false);
				break;
				case false:
					isPosH = 'L';
					setPref(boolPrefHor, true);
				break;
			}
		css();
	}
});
	//}
// });
function css (){
var css =`
	#vert_toolbar {
/* ■■ START UserConfiguration TOOLBAR ■■■■■■■■■■■■■■■■■■■■■■■ Dark Theme */
		--vt-toolbar-min-width: 32px; /*Leistenbreite bei mouseout*/
		--vt-toolbar-max-width: 260px; /*Leistenbreite bei mouseover*/
		--vt-delay_min_max-width: 1.5s; /*Verzögerung bei mouseover*/
		--vt-row-height: 32px; /*Zeilenhöhe*/
		--vt-bg-color: orange; /*Leistenhintergrundfarbe*/
		--vt-bg-color-hover: #57575766; /*Zeilenhintergrundfarbe bei mouseover*/
		--vt-border-width: 0; /*Leistenrandbreite*/
		--vt-border-radius: 4px; /*Leistenrandeckenhalbdurchmesser*/
		--vt-border-color: purple; /*Leistenrandfarbe*/
		--vt-customizing-bg-color: orange; /*Leistenhintergrundfarbe im Anpassenfenster*/
		--vt-customizing-border-color: #E9E9E9; /*Leistenrandfarbe im Anpassenfenster*/
		--vt-toolbarbutton-inner-padding: 8px; /*Zentrierungsmöglichkeit der eingefügten Buttons (wenn Buttonbreite < 32px => --vt-toolbarbutton-inner-padding < 8px) */
/* ■■ END UserConfiguration TOOLBAR ■■■■■■■■■■■■■■■■■■■■■■■■■ */
	}
	#vert_toolbox {
		position: fixed !important;
		display: flex !important;
		top: ${isPosV} !important;
		transform: translateY(-${isPosV}) !important;
		height: fit-content !important;
		width: fit-content !important;
		z-index: 2 !important;
	}

	#vert_toolbox.bar-left {
		left: 0 !important;
		right: unset !important;
	}
	#vert_toolbox.bar-right {
		right: 0 !important;
		left: unset !important;
	}

	#vert_toolbar {
		display: flex !important;
		width: var(--vt-toolbar-min-width) !important;
		padding: 0 !important;
		background-color: var(--vt-bg-color) !important;
		border: var(--vt-border-width) solid var(--vt-border-color) !important;
		transition: width 0.5s ease-in-out 0.2s !important;
	}

	#vert_toolbar.bar-right {
		border-top-right-radius: 0 !important;
		border-top-left-radius: var(--vt-border-radius) !important;
		border-bottom-right-radius: 0 !important;
		border-bottom-left-radius: var(--vt-border-radius) !important;
	}
	#vert_toolbar.bar-left {
		border-top-left-radius: 0 !important;
		border-top-right-radius: var(--vt-border-radius) !important;
		border-bottom-left-radius: 0 !important;
		border-bottom-right-radius: var(--vt-border-radius) !important;
	}

	#vert_toolbar:not([customizing]):hover {
		width: var(--vt-toolbar-max-width) !important;
		transition-delay: var(--vt-delay_min_max-width) !important;
	}

	#vert_toolbar.bar-left {
		margin-right: calc(var(--vt-toolbar-min-width) * -1) !important;
		margin-left: unset !important;
	}
	#vert_toolbar.bar-right {
		margin-left: calc(var(--vt-toolbar-min-width) * -1) !important;
		margin-right: unset !important;
	}

	#vert_toolbar.button-on {
		display: flex !important;
	}
	#vert_toolbar.button-off  {
		display: none !important;
	}

	#vert_toolbar:not([customizing]) .toolbarbutton-1  {
		justify-content: flex-start !important;
		min-width: var(--vt-toolbar-min-width) !important;
		height: var(--vt-row-height) !important;
		min-height: var(--vt-row-height) !important;
		max-height: var(--vt-row-height) !important;
		overflow: hidden !important;
		border: none !important;
		box-shadow: none !important;
		--toolbarbutton-inner-padding: var(--vt-toolbarbutton-inner-padding) !important;
	 	--toolbarbutton-outer-padding: 0 !important;
	 	--toolbarbutton-border-radius: 0 !important;
	}
	#vert_toolbar:not([customizing]) .toolbarbutton-1:hover {
		background-color: var(--vt-bg-color-hover) !important;
	}

	#vert_toolbar:not([customizing]).bar-left .toolbarbutton-1:first-of-type {
		border-top-right-radius: var(--vt-border-radius) !important;
		border-top-left-radius: 0 !important;
	}
	#vert_toolbar:not([customizing]).bar-right .toolbarbutton-1:first-of-type {
		border-top-right-radius: 0 !important;
		border-top-left-radius: var(--vt-border-radius)!important;
	}
	#vert_toolbar:not([customizing]).bar-left .toolbarbutton-1:last-of-type {
		border-bottom-left-radius: 0 !important;
		border-bottom-right-radius: var(--vt-border-radius) !important;
	}
	#vert_toolbar:not([customizing]).bar-right .toolbarbutton-1:last-of-type {
		border-bottom-left-radius: var(--vt-border-radius) !important;
		border-bottom-right-radius: 0 !important;
	}

	#vert_toolbar:not([customizing]) .toolbarbutton-1 .toolbarbutton-text {
		display: flex !important;
		opacity: 0 !important;
		transition: opacity 0.5s ease-in-out 0.18s !important;
		text-overflow: ellipsis !important;
		align-items: center !important;
		padding: 0 !important;
	 	border-radius: 0 !important;
	}
	#vert_toolbar:not([customizing]):hover .toolbarbutton-1 .toolbarbutton-text {
		opacity: 1 !important;
		transition: opacity 0.5s ease-in-out 0.2s !important;
	}
	#vert_toolbar[customizing] {
		min-width: 38px !important;
		max-width: 38px !important;
		margin-right: 40px !important;
		margin-left: 40px !important;
		padding-bottom: 38px !important;
		background: var(--vt-customizing-bg-color) !important;
		border: 1px dashed var(--vt-customizing-border-color) !important;
	}

	#vert_toolbar_button.bar-left .toolbarbutton-icon {
		transform: scaleX(-1) !important;
	}
	#vert_toolbar_button.bar-right .toolbarbutton-icon {
		transform: scaleX(1) !important;
	}
`;
var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
};

css();

})();

Alles anzeigen

Horstmann

Zitat von Fritz80

aber nur so groß das nur ein Icon drauf passt.

Hört sich nach diesem Script an.
Dort lassen sich Buttons aber im Anpassenfenster zufügen, die Leistenhöhe ist dort aber nur so hoch wie der Inhalt.

Zitat von FuchsFan

Ohne eine Änderung am Script, es wird alles angezeigt.

Nur die verdammte Border nicht, die Trennlinie an der jeweiligen Aussenkante zum Inhalt hin.
Ich hatte vergessen das auf meiner Testmaschine mit Fx 144 noch anzupassen...

~~Wenn du die Border sichtbar haben möchtest, kannst du die Farbe in Zeile 53 fest eingeben, zB~~ ~~'grey', s. auch Zeile 52 als Beispiel.~~
~~Irgendwie holt sich die Leiste dafür nicht die~~ ~~currentColor~~ ~~aus Fx in den neusten Versionen.~~
~~Falls du eh keine Border möchtest, am besten die~~ ~~new_tb_border_width~~ ~~auf 0px setzen, sonst gibt es einen leichten Versatz der Buttons.~~

~~Edit: Oder mal~~ ~~'var(--sidebar-border-color)'~~ ~~testen.~~

Edit: es war nur der border-style zu überschreiben, hat mit den Farben nix zu tun.
Ist nur geändert in Zeile 509 bis 511, in Beitrag #106.

//let new_tb_border_color = 'var(--sidebar-border-color)'; ist oben als Farboption zugefügt, das benutzt Fx für die Sidebarborder.

Horstmann

Zitat von Boersenfeger

Ändere vielleicht in Zeile 1 den Namen in Additional Toolbars

Erledigt.
Und ein kleiner Patch.

Horstmann

Was ist besser als zuviel Code?
Noch mehr Code!

JS Code Optimierung ist offenbar nicht gerade meine Stärke, v.a. das Speichern von Preferenzen macht mir Mühe, aber 1-2 Dinge wollte ich noch probieren. Verbesserungsvorschläge wie immer willkommen!

Hier also eine neue Version, mit zusätzlichem Button um die Position der Leiste direkt im Browser zu verändern, einem Codeteil von Aris um evtl. die Funktion bestimmter Buttons zu ermöglichen, und einige kleine Verbesserungen.

JavaScript

// Additional toolbars
// Buttons to turn toolbar on/off, or switch toolbar position

// Use filename starting with 00 for custom button functions !! =>
// 00_extra_toolbars_V11.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 by Aris included in this script, experimental

// Version V11 / Release 6

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

// User settings
// After script changes, restart with Clear StartUp Cache => about:support

   // Custom Icon, expected in profile-name/chrome/icons folder ("icons" folder needs to be created)
        let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
        let IconPath = '/chrome/icons/';

        // On/Off Button
        // Custom icon
        let Icon_tb = 'toolbar_n3d.svg';
        // 0 use Firefox Icon, 1 Custom Icon
        let new_tb_icon  = 0;
        let ImagePath = ProfilePath + IconPath + Icon_tb;

        // Position switch button
        // Custom icon
        let Icon_sw = "toolbar_switch_2b.svg"
        // 0 use Firefox Icon, 1 Custom Icon
        let new_tb_icon_sw  = 0;
        let ImagePathSW = ProfilePath + IconPath + Icon_sw;

   // Custom background color: 0 Off, 1 On, overwrites themes
        let new_tb_color = 0;
        // background color if On
        let new_tb_bg_color = 'lightblue';

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

// Size of toolbar and buttons changes, must be px value, 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
        // Increase distance of buttons to edges, 0px => toolbar size = button size
        let new_tb_size = '1px';

// Expert mode =>
// Save changes, initial states; 0 default (toolbar right, On, all changes saved, switch all open windows)

   // 0 save states toolbar On/Off / position on quitting Firefox, 1 don't save (prefs deleted)
        // 2x restart required once after change, to make the the option stick
        let new_tb_save = 0;

   // 0 initial state toolbar On, 1 initial state Off, only if new_tb_save = 1 (not saved)
        let new_tb_off = 0;
   // Position initial state: 0 right, 1 left, 2 bottom, only if new_tb_save = 1 (not saved), or new_tb_btn_sw = false
        let new_tb_loc = 0;

   // Position Switch button: true = on, false = remove
        let new_tb_btn_sw = true;

   // Extra: 0 Button switches toolbar On/Off / Position for all open windows, 1 only active window
        let new_tb_uno = 0;       // On/Off Button
        let new_tb_uno_sw = 0;    // Position button

// Possible problem solutions, if required, experimental

   // Fix #1 for themes with low/ tiling background images, true/ false, best to only use one of both
        let theme_fix = true;
        // Fix #2, overwrites Fix #1
        let theme_fix_2 = false;

   // Adjustments for Restore 'Space & Separator' items script for Firefox 102+ by Aris, true / false
        // https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/space_and_separator_restorer.uc.js
        let separator_fix = true;

// End of user settings

        if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
        	Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
        }

        const pref_newtoolbar_state = "userchrome.newtoolbar.enabled";

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

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

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

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

        let observer_custom = new MutationObserver(function(mutations) {
          for (let mutation of mutations) {
            try {
              const customContainer = document.getElementById('customization-container');
              if (!customContainer) return;
              const rect = customContainer.getBoundingClientRect();
              document.getElementById('toolbox_new').style.setProperty('--height_newbar_c', rect.top + 'px');
            } catch (e) { }
          }
        });
        observer_custom.observe(document.querySelector('#main-window'), {
          attributes: true,
          attributeFilter: ['customizing'],
        });

        let navbar_size = document.getElementById("browser");
        let observer = new ResizeObserver(() => {
        let rect = navbar_size.getBoundingClientRect();
        document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.height + 'px');
        document.getElementById('toolbox_new').style.setProperty('--height_newbar_top', rect.top + 'px');
        });
        observer.observe(navbar_size);

    //On/Off button
    try {
        CustomizableUI.createWidget({
          id: 'NewToolbar_button',
          defaultArea: CustomizableUI.AREA_NAVBAR,
          tooltiptext: 'Toolbar On',
          label: 'Toggle New Toolbar',
          onBuild(doc) {
            let ntb_btn = doc.createXULElement('toolbarbutton');
            return ntb_btn;
          }
        });
    } catch(e) { }

    // Button function
     NewToolbar_button.addEventListener('click', event => {
        if (event.button === 0 ) {
          if (new_tb_uno === 0) {
            tb_toggle();
          }
          else if (new_tb_uno === 1) {
            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 === 1) {
         toolbox_new.classList.add("left_mode");
         browser.classList.add("left_mode_b");
         NewToolbar_button.classList.add("left_mode_btn");
       }
    else if (new_tb_loc === 2) {
         toolbox_new.classList.add("bottom_mode");
         browser.classList.add("bottom_mode_b");
         NewToolbar_button.classList.add("bottom_mode_btn");
       }

    let toolbarEnabled = true;
    try {
        toolbarEnabled = Services.prefs.getBoolPref(pref_newtoolbar_state);
    } catch(e) {
        Services.prefs.setBoolPref(pref_newtoolbar_state, new_tb_off === 0);
        toolbarEnabled = new_tb_off === 0;
    }
    if (!toolbarEnabled) {
        newtoolbar.classList.add("off-mode");
        browser.classList.add("off-mode_b");
        NewToolbar_button.classList.add("off-mode_btn");
        NewToolbar_button.setAttribute("tooltiptext", "Toolbar Off");
    }

    // Icon
    if (new_tb_icon === 1) {
         NewToolbar_button.classList.add("icon_mode");
       }
    // Background color
    if (new_tb_color === 1) {
         newtoolbar.classList.add("ntb_bg_color");
       }

    // Attach handlers for buttons moved outside #navigator-toolbox, Code by Aris
    // https://searchfox.org/firefox-main/source/browser/base/content/navigator-toolbox.js
    const customHandlers = {
    	  "unified-extensions-button": (el, e) => gUnifiedExtensions.togglePanel(e),
    	  "fxa-toolbar-menu-button":   (el, e) => gSync.toggleAccountPanel(el, e),
    	  "firefox-view-button":       (el, e) => FirefoxViewHandler.openToolbarMouseEvent(e),
    	  "downloads-button":          (el, e) => DownloadsIndicatorView.onCommand(e),
    	  "pageActionButton":          (el, e) => BrowserPageActions.mainButtonClicked(e),
    	  "alltabs-button":            (el, e) => gTabsPanel.showAllTabsPanel(e, "alltabs-button"),
    	  "library-button":            (el, e) => PanelUI.showSubView("appMenu-libraryView", el, e),
    	  "import-button":             (el, e) => MigrationUtils.showMigrationWizard(window, {
  	  entrypoint: MigrationUtils.MIGRATION_ENTRYPOINTS.BOOKMARKS_TOOLBAR,
  	  }),
    };
		document.getElementById("newtoolbar").addEventListener("mousedown", (e) => {
		  const button = e.target.closest("toolbarbutton");
		  if (button?.id && customHandlers[button.id]) customHandlers[button.id](button, e);
		});

// Position switch button

    const pref_position = "userchrome.newtoolbar.position";

    function getPositionPref() {
        try {
            return Services.prefs.getCharPref(pref_position);
        } catch (e) {
            return "right"; // Standardwert
        }
    }
    function setPositionPref(value) {
        Services.prefs.setCharPref(pref_position, value);
    }

    try {
        CustomizableUI.createWidget({
          id: 'NewToolbar_position',
          defaultArea: CustomizableUI.AREA_NAVBAR,
	  	    removable: true,
	  	    label: "Position New Toolbar", // button title
	  	    tooltiptext: 'Position New toolbar', // tooltip title
          onBuild(docs) {
            let btnsw = docs.createXULElement('toolbarbutton');
            return btnsw;
          }
        });
     } catch(e) { };

     function applyPosition(pos) {
        toolbox_new.classList.remove("left_mode", "bottom_mode", "right_mode");
        browser.classList.remove("left_mode_b", "bottom_mode_b", "right_mode_b");
        NewToolbar_button.classList.remove("left_mode_btn", "bottom_mode_btn", "right_mode_btn");
        NewToolbar_position.classList.remove("left_mode_sw", "bottom_mode_sw", "right_mode_sw");
        if (pos === "left") {
            toolbox_new.classList.add("left_mode");
            browser.classList.add("left_mode_b");
            NewToolbar_button.classList.add("left_mode_btn");
            NewToolbar_position.classList.add("left_mode_sw");
        } else if (pos === "bottom") {
            toolbox_new.classList.add("bottom_mode");
            browser.classList.add("bottom_mode_b");
            NewToolbar_button.classList.add("bottom_mode_btn");
            NewToolbar_position.classList.add("bottom_mode_sw");
        } else if (pos === "right") {
            toolbox_new.classList.add("right_mode");
            browser.classList.add("right_mode_b");
            NewToolbar_button.classList.add("right_mode_btn");
            NewToolbar_position.classList.add("right_mode_sw");
        }
     }
     let savedPos = getPositionPref();
     applyPosition(savedPos);

    // Button function
     NewToolbar_position.addEventListener('click', event => {
        if (event.button === 0 ) {
          if (new_tb_uno_sw === 0) {
            poser();
          }
          else if (new_tb_uno_sw === 1) {
            poser_uno();
          };
          aha();
        }
     });

     // Animations for switch limited
     function aha() {
        browser.classList.add("switch_mode");
        toolbox_new.classList.add("switch_mode_tb");
        setTimeout(() => {
           browser.classList.remove("switch_mode");
           toolbox_new.classList.remove("switch_mode_tb");
        },100);
      };

     function poser() {
			 for (let win of Services.wm.getEnumerator("navigator:browser")) {
           const toolbox = win.document.getElementById("toolbox_new");
           const browserArea = win.document.getElementById("browser");
           const button = win.document.getElementById("NewToolbar_button");
           const button_sw = win.document.getElementById("NewToolbar_position");
           if (toolbox.classList.contains("left_mode")) {
                toolbox.classList.replace("left_mode", "bottom_mode");
                browserArea.classList.replace("left_mode_b", "bottom_mode_b");
                button.classList.replace("left_mode_btn", "bottom_mode_btn");
                button_sw.classList.replace("left_mode_sw", "bottom_mode_sw");
                setPositionPref("bottom");
               }
           else if (toolbox.classList.contains("bottom_mode")) {
                toolbox.classList.remove("bottom_mode");
                browserArea.classList.remove("bottom_mode_b");
                button.classList.remove("bottom_mode_btn");
                button_sw.classList.remove("bottom_mode_sw");
                setPositionPref("right");
               }
           else {
                toolbox.classList.add("left_mode");
                browserArea.classList.add("left_mode_b");
                button.classList.add("left_mode_btn");
                button_sw.classList.add("left_mode_sw");
                setPositionPref("left");
               }
             }
           };

     function poser_uno() {
           if (toolbox_new.classList.contains("left_mode")) {
                toolbox_new.classList.replace("left_mode", "bottom_mode");
                browser.classList.replace("left_mode_b", "bottom_mode_b");
                NewToolbar_button.classList.replace("left_mode_btn", "bottom_mode_btn");
                NewToolbar_position.classList.replace("left_mode_sw", "bottom_mode_sw");
                setPositionPref("bottom");
               }
           else if (toolbox_new.classList.contains("bottom_mode")) {
                toolbox_new.classList.remove("bottom_mode");
                browser.classList.remove("bottom_mode_b");
                NewToolbar_button.classList.remove("bottom_mode_btn");
                NewToolbar_position.classList.remove("bottom_mode_sw");
                setPositionPref("right");
               }
           else {
                toolbox_new.classList.add("left_mode");
                browser.classList.add("left_mode_b");
                NewToolbar_button.classList.add("left_mode_btn");
                NewToolbar_position.classList.add("left_mode_sw");
                setPositionPref("left");
               }
           };

    // Icon
    if (new_tb_icon_sw === 1) {
         NewToolbar_position.classList.add("icon_mode_sw");
       }

    // Remove switch button
    if (!new_tb_btn_sw) {
    const no_switch = document.getElementById("NewToolbar_position");
        no_switch.remove();
        Services.prefs.clearUserPref(pref_position);
    }
    
    // On quitting Firefox: delete Prefs, if new_tb_save = 1
    if (new_tb_save === 1) {
         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 =`
:root {
    --ug-newbar_basewidth: calc(2 * var(--ug-newbar-button_inner_padding) + 16px);  /* Minimalgroesse = Groesse Buttons */
    --ug-newbar_width: calc(var(--ug-newbar_basewidth) + var(--ug-newbar_borderwidth) + 2 * var(--ug-newbar_add_width));
    --ug-newbar-button_inner_padding: ${new_tb_btn_size};         /* Groesse Buttons */
    --ug-newbar_add_width: `+new_tb_size+`;                       /* Breite / Hoehe erhoehen */
    --ug-newbar_btnspace: ${new_tb_distance};                     /* Abstand zw. Buttons */
    --ug-newbar_borderwidth: ${new_tb_border_width};              /* Breite / Hoehe Trennlinie */
}

/*- Buttons -*/

/* Buttons sizes */
#newtoolbar {
    --toolbarbutton-inner-padding: var(--ug-newbar-button_inner_padding) !important;
	 	--toolbarbutton-outer-padding: 0px !important;
}

/*  On/Off Button  */
#NewToolbar_button .toolbarbutton-icon {
    list-style-image: url("chrome://browser/skin/sidebars-right.svg");
}
#NewToolbar_button.icon_mode .toolbarbutton-icon {
    list-style-image: url("${ImagePath}");
}
#NewToolbar_button.off-mode_btn:not(:hover, :active) .toolbarbutton-icon {
    opacity: 0.4;
}
/*  Switch Button  */
#NewToolbar_position .toolbarbutton-icon {
    /*list-style-image: url("chrome://global/skin/icons/chevron.svg");*/
    list-style-image: url("chrome://global/skin/icons/arrow-right.svg");
}
#NewToolbar_position.icon_mode_sw .toolbarbutton-icon {
    list-style-image: url("${ImagePathSW}");
}
/*  Button adjustments to Toolbar Position  */
:is(#NewToolbar_button.left_mode_btn, #NewToolbar_position.left_mode_sw) .toolbarbutton-icon {
    transform: rotate(180deg);
}
:is(#NewToolbar_button.bottom_mode_btn, #NewToolbar_position.bottom_mode_sw) .toolbarbutton-icon {
    transform: rotate(90deg);
}

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

/*--  Basics / Right  --*/

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

/* Switch animation */
#browser.switch_mode {
    transition: padding 0.25s ease-in !important;
}
#toolbox_new.switch_mode_tb #newtoolbar:not([customizing]) {
    min-width: 0px !important;
    width: 0px !important;
    overflow: hidden !important;
    border-width: 0px !important;
    box-shadow: none !important;
    transition: none !important;
}
#toolbox_new.switch_mode_tb:not(.bottom_mode) #newtoolbar:not([customizing]) {
    max-width: var(--ug-newbar_width) !important;
}
#toolbox_new.switch_mode_tb.bottom_mode #newtoolbar:not([customizing]) {
    min-height: 0px !important;
    height: 0px !important;
    transition: none !important;
}

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

#toolbox_new {
    position: fixed;
    z-index: 2 !important;
    display: flex;
    width: fit-content;
    top: var(--height_newbar_top);
    right: 0px;
}
#newtoolbar {
    display: flex;
    min-width: var(--ug-newbar_basewidth) !important;
    width: var(--ug-newbar_width) !important;
    min-height: var(--ug-newbar_basewidth) !important;
    height: var(--height_newbar) !important;
    align-items: center !important;
    padding-block: 8px;
    /*border: 0px solid;*/
    border-width: 0px;
    border-style: solid !important;   
    border-color: ${new_tb_border_color} !important;
    border-left-width: var(--ug-newbar_borderwidth);
    border-right-width: 0px;
    margin-inline: 0px ;
}
#newtoolbar:not([customizing]) {
    transition: width 0.25s ease, min-width 0.25s ease, border-left-width 0.125s ease;
}
#newtoolbar:not([customizing]).off-mode {
    min-width: 0px !important;
    width: 0px !important;
    overflow: hidden !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: var(--ug-newbar_btnspace) !important;
    margin-inline: var(--toolbarbutton-outer-padding) !important;
    transition: opacity 0.125s ease;
}

/*--  Left  --*/

#browser:not(.off-mode_b).left_mode_b {
    padding-left: var(--ug-newbar_width) !important;
}
#toolbox_new.left_mode {
    right: unset;
    left: 0px;
}
#toolbox_new.left_mode #newtoolbar:not([customizing]) {
    border-left-width: 0px;
    border-right-width: var(--ug-newbar_borderwidth);
    transition: width 0.25s ease, min-width 0.25s ease, border-right-width 0.125s ease;
}

/*--  Bottom  --*/

#browser:not(.off-mode_b).bottom_mode_b {
    padding-inline: 0px !important;
    padding-bottom: var(--ug-newbar_width) !important;
}
#toolbox_new.bottom_mode {
    top: unset;
    bottom: 0px;
}
#toolbox_new.bottom_mode #newtoolbar:not([customizing]) {
    flex-direction: row !important;
    min-height: 0px !important;
    height: var(--ug-newbar_width) !important;
    max-height: var(--ug-newbar_width) !important;
    min-width: 0px !important;
    width: 100vw !important;
    padding-block: 0;
    padding-inline: 8px;
    border-inline-width: 0px;
    border-top-width: var(--ug-newbar_borderwidth);
    /*justify-content: center !important;*/    /* Inhalt mittig, optional */
    transition: height 0.25s ease, max-height 0.25s ease, min-height 0.25s ease, border-top-width 0.125s ease !important;
}
#toolbox_new.bottom_mode #newtoolbar:not([customizing]).off-mode {
    min-height: 0px !important;
    height: 0px !important;
    max-height: 0px !important;
}
#toolbox_new.bottom_mode #newtoolbar:not([customizing]) > :is(.toolbarbutton-1, toolbaritem),
#toolbox_new.bottom_mode #newtoolbar:not([customizing]) toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
    margin-block: var(--toolbarbutton-outer-padding) !important;
    margin-inline: var(--ug-newbar_btnspace) !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  --*/

:root[customizing] #toolbox_new {
    top: unset !important;
    bottom: 0 !important;
    right: 0 !important;
    left: unset !important;
}
#newtoolbar[customizing] {
    height: calc(100vh - var(--height_newbar_c)) !important;
    box-shadow: inset 0px 1px ${new_tb_border_color};
    transition: none !important;
}
#customization-container {
    margin-right: var(--ug-newbar_width) !important;
}

/*-  Colors themes  -*/

/* Custom toolbar background color if enabled */
#newtoolbar.ntb_bg_color {
    background-color: ${new_tb_bg_color} !important;
}

/*- Colors themes, if background images are tiled, try theme_fix 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, if enabled -*/

:root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color) {
    background: var(--lwt-header-image) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: right 0px top 0px !important;
}
:root[lwtheme][lwtheme-image] #toolbox_new.bottom_mode #newtoolbar:not(.ntb_bg_color) {
    background-size: auto !important;
}
 `;
}

if (theme_fix_2) {
  css += `
/*-  Fix #2 for themes with tiled background images, if enabled -*/

:root[lwtheme][lwtheme-image] #toolbox_new #newtoolbar:not(.ntb_bg_color) {
     background: transparent !important;
}
:root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color)::before {
    content: "" ;
    position: absolute;
    top: 0;
    right: 0;
    width: var(--height_newbar) !important;
    height: var(--ug-newbar_width) !important;
    pointer-events: none;
    z-index: -1 !important;
    background: var(--lwt-header-image) !important;
    background-repeat: no-repeat !important;
    transform: rotate(-90deg) translateX(var(--ug-newbar_width)) !important;
    transform-origin: 100% 100% !important;
    transition: margin 0.25s ease;
}
:root[lwtheme][lwtheme-image] #toolbox_new.bottom_mode #newtoolbar:not(.ntb_bg_color, [customizing])::before {
    transform: scaleX(-1) !important;
    transform-origin:  50% 50% !important;
    width: 100% !important;
}
:root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color)[customizing]::before {
    width: calc(100vh - var(--height_newbar_c)) !important;
}
#newtoolbar:not([customizing]).off-mode::before {
    min-width: 0px !important;
    margin-inline: 0 calc(0px - var(--ug-newbar_width));
}
#toolbox_new.left_mode #newtoolbar:not([customizing]).off-mode::before {
    margin-inline: calc(0px - var(--ug-newbar_width)) 0;
}
#toolbox_new.bottom_mode #newtoolbar:not([customizing]).off-mode::before {
    min-height: 0px !important;
    margin-inline: 0;
    margin-block: 0 calc(0px - var(--ug-newbar_width)) !important;
}
 `;
}

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

#newtoolbar toolbarseparator {
    width: calc(var(--ug-newbar_width) - var(--ug-newbar_borderwidth) - 6px) !important;
    margin: 5px 0px !important;
    border-block-color: hsl(0, 0%, 0%, 0.45) hsl(0, 0%, 100%, 0.55) !important;
    transition: width 0.125s ease !important;
}
#newtoolbar :is(toolbarspacer, toolbarspring, toolbarseparator) {
    min-width: 0px !important;
}
#newtoolbar:not([customizing]).off-mode toolbarseparator {
    width: 0px !important;
}
#toolbox_new.bottom_mode #newtoolbar:not([customizing]) toolbarseparator {
    transform: rotate(-90deg) !important;
    margin: 0px !important;
}
#newtoolbar[customizing] toolbarseparator {
    margin-block: 16px !important;
}
 `;
}

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

})();

Alles anzeigen

Icons:
icons.zip

Horstmann

Zitat von Mira_Belle

Und wie erstelle ich mir einen neuen, zusätzlichen Separator?
Der soll dann zwischen "Untersuchen" und "Tab schließen" sein.

Zitat von Mira_Belle

Und auf vielfachen Wunsch, ein Screenshot.

Der macht jetzt auch keinen Sinn mehr...

JS, der müsste dann wohl zusammen mit #context-inspect und order gleich verschoben werden.

JavaScript

// context_sep.uc.js

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

   let refItem1 = document.getElementById('context-inspect');
   let menuseparator_inspect = document.createXULElement("menuseparator");
	 menuseparator_inspect.setAttribute('id', 'inspect_sep');
	 refItem1.parentNode.insertBefore(menuseparator_inspect, refItem1);

   // Style nur fuer Test
   inspect_sep.setAttribute("style", "outline: 1px solid orange; outline-offset: -1px;" );

   // Separator vor erstem Child nach context-inspect
   // let refItem1 = document.getElementById('context-inspect');
   // let menuseparator_inspect = document.createXULElement("menuseparator");
	 // menuseparator_inspect.setAttribute('id', 'inspect_sep');
	 // refItem1.parentNode.insertBefore(menuseparator_inspect, refItem1.nextSibling);

   // Separator vor context-closetab
   // let refItem2 = document.getElementById('context-closetab');
   // let menuseparator_closetab = document.createXULElement("menuseparator");
	 // menuseparator_closetab.setAttribute('id', 'closetab_sep');
	 // refItem.parentNode.insertBefore(menuseparator_closetab, refItem2);
   // closetab_sep.setAttribute("style", "outline: 1px solid orange; outline-offset: -1px;" );

})();

Alles anzeigen

Horstmann

Zitat von Mira_Belle

Und wie erstelle ich mir einen neuen, zusätzlichen Separator?
Der soll dann zwischen "Untersuchen" und "Tab schließen" sein.

So eine XXXX, ich wusste das einmal

Da wäre ein Screenshot wirklich hilfreich, deine letzten haben die beiden nicht direkt untereinander.

Was ist eigentlich context-closetab, ist das von Fx oder ein Script? Kann das nirgends finden.

Horstmann

Zitat von Mira_Belle
So, habe mal etwas aufgeräumt!
Code
#contentAreaContextMenu > menuseparator:nth-child(127) {
Nun passt es.

Haben Fx Menüseparatoren nicht eigentlich eine ID?

Falls ein Script einen Separator reinmogelt, am besten immer eine ID mit dazupacken.

Horstmann

Zitat von Mira_Belle

Aber ich möchte jene Einträge nicht einfach vom Ende an den Anfang verschieben, sondern mitten rein!
Also genauer gesagt direkt vor dem Eintrag "Untersuchen".
Und das bekomme ich per CSS einfach nicht hin.

Das mit CSS festzulegen könnte gehen, aber falls ja wäre das vermutlich ein ziemliches Gehampel.
Abgesehen von Erweiterungen die dazwischen kommen können, haben nicht alle Kontextmenüs die gleichen (aktivierten) Inhalte, je nach Anwendung.

Mit JS sollte es klappen, im Prinzip so wie hier, die beiden Zeilen am Ende setzen den Eintrag vor "Untersuchen".

Edit: Komme mit JS nicht an die Erweiterung ran, aber Andreas hat's evtl. schon mit CSS gelöst.
Meine Test-Variante:

CSS

#context-inspect {
  order: 1 !important;
}

#context-inspect ~ :is(menuitem:not(#simple-translate_sienori-menuitem-_translatePage,
#simple-translate_sienori-menuitem-_translateLink,
#simple-translate_sienori-menuitem-_translateText), 
menuseparator) {
    order: 2 !important;
}

Beiträge von Horstmann

Eigene Zusatzleisten ab ff 143+

Mehrzeilige Tableiste für aktuelle Firefox-Versionen

Eigene Zusatzleisten ab ff 143+

Entwickler-Werkzeuge..Stilbearbeitung..Vorschau geht nicht

Mehrzeilige Tableiste für aktuelle Firefox-Versionen

Doppelklick auf die Tableiste neuen Tab öffnen.js

Doppelklick auf die Tableiste neuen Tab öffnen.js

Doppelklick auf die Tableiste neuen Tab öffnen.js

Schaltbare vertikale Overlay-Zusatzleiste

Schaltbare vertikale Overlay-Zusatzleiste

Schaltbare vertikale Overlay-Zusatzleiste

Eigene Zusatzleisten ab ff 143+

Schaltbare vertikale Overlay-Zusatzleiste

Eigene Zusatzleisten ab ff 143+

Eigene Zusatzleisten ab ff 143+

Eigene Zusatzleisten ab ff 143+

Kontextmenü anpassen

Kontextmenü anpassen

Kontextmenü anpassen

Kontextmenü anpassen