Eigene Zusatzleisten ab ff 143+

Fritz80

Im Moment geht es mir nur um dieses Script, die anderen sind alle nicht mehr aktuell.

grisu2099

Ist trotzdem besser in einem eigenen Thema aufgehoben...

2002Andreas

Zitat von Fritz80

Im Moment geht es mir nur um dieses Script

Welches genau nutzt du denn? Und welches Update hast du von welcher Firefox Version gemacht?

Du musst schon selber ein paar Informationen bringen, raten können wir nicht, und vor deinem PC sitzen wir auch nicht.

Sören Hentzschel

Zitat von Fritz80

Im Moment geht es mir nur um dieses Script, die anderen sind alle nicht mehr aktuell.

Darum geht es nicht. Wenn keine Scripts mehr funktionieren, hast du ein grundsätzliches Problem, was dann mit dem Script dieses Themas schlicht und ergreifend nichts zu tun hat. Und das ist dann für niemanden zielführend, das in diesem Thema zu diskutieren.

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

Boersenfeger

Ändere vielleicht in Zeile 1 den Namen in Additional Toolbars

Horstmann

Zitat von Boersenfeger

Ändere vielleicht in Zeile 1 den Namen in Additional Toolbars

Erledigt.
Und ein kleiner Patch.

Fritz80

Hat sich Erledigt die Toolbar ist da, aber nur so groß das nur ein Icon drauf passt.

FuchsFan

Zitat von Fritz80

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

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

2002Andreas

Zitat von FuchsFan

Ohne eine Änderung am Script

Niemand weiß welches Skript der User überhaupt nutzt. Die Frage danach wurde ja nicht beantwortet.

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.

FuchsFan

Zitat von 2002Andreas

Niemand weiß welches Skript der User überhaupt nutzt.

Da habe ich jetzt nicht drauf geachtet, mich nur auf das Script aus #106 konzentriert.

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.

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!

FuchsFan

Zitat von Horstmann

ansonsten müsste sie jetzt automatisch gesetzt und an Themes angepasst sein.

, passt!

Beitrag von Horstmann (6. November 2025 um 22:20)