Mira_Belle , siehst du das Problem bei dir, rechte Leiste wird nicht komplett ausgeblendet mit #185, mit oder ohne Theme?
Weder mit Theme noch mit eigener Backgroud-Farbe!
Hast Du jetzt eine neue, überarbeitete Version?
Wegen des Themebug! Welchem Themebug?
Danke für den Test! 
Die korrigierte Version kommt zügig; der Themebug ist sehr spezifisch, nur bei theme_fix_2 mit Toolbar oben, das Ausschalten ist defekt. 
Die korrigierte Version kommt zügig; der Themebug ist sehr spezifisch, nur bei theme_fix_2 mit Toolbar oben, das Ausschalten ist defekt.
Misst, dann muss ich ja schon wieder Basteln. 
Misst, dann muss ich ja schon wieder Basteln.
Sollte eigentlich nur plug&play sein für deine Extras. 
Sollte eigentlich nur plug&play sein für deine Extras.
Nicht ganz, Du hast ja IDs geändert. Habe ich aber hinbekommen.
Aus "newtoolbar" wurde ja "new_toolbar".
Ein kleiner Update zu Weihnachten.
Die Icons sind etwas besser eingebunden, das Kontext-Menü Item zur Positionierung der Toolbar taucht nur noch bei Rechtsklick auf den Button oder in die Toolbar auf (anderen Menüs wird es nicht mehr aufgezwungen), und eine Ladung kleinerer Änderungen.
Funktion und Usereinstellungen sind ansonsten unverändert, und können von früheren Versionen direkt übernommen werden.
// Additional toolbar
// Choice of vertical left, right, or horizontal bottom, top position
// Button to turn toolbar On/Off
// Switch toolbar position via right-click/contextmenu, only available on this button and this toolbar
// Use filename starting with 00 for custom button functions !! =>
// 00_extra_toolbars_V17c.uc.js
// Based on:
// 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
// Kudos to Aris, Mitleser and Mira_Belle
// ATTENTION: Some system buttons can still be moved to additional/custom toolbars, but they will have no function.
// There is a patch by @BrokenHeart: https://www.camp-firefox.de/forum/thema/138875-fix-toolbar-buttons-reagieren-nicht-mehr-ab-ff-134/
// Different patch re. the issue by Aris included in this script, experimental
// Version V17c
(function() {
if (location.href !== 'chrome://browser/content/browser.xhtml')
return;
// User settings
// After script changes, restart with Clear StartUp Cache => about:support
// Icons
// false = use Firefox Icon, true = Custom Icon
let custom_tb_icon = false; // On/Off Button
let custom_tb_icon_sw = false; // Position switch button
// Custom icon files
let Icon_tb = 'toolbar_4.svg'; // On/Off Button
let Icon_sw = 'toolbar_switch_4.svg'; // Position switch menuitem
// Firefox icons
let Icon_tb_Fx = 'chrome://browser/skin/sidebars-right.svg'; // On/Off Button
let Icon_sw_Fx = 'chrome://global/skin/icons/arrow-right.svg'; // Position switch menuitem
// Custom Icons expected in profile-name/chrome/icons folder ("icons" folder needs to be created)
// Path to icon folder named "icons" inside profile folder
let IconPath = '/chrome/icons/';
// Custom background color: false = Off ; true = On (overwrites themes)
let new_tb_color = false;
// background color if true
let new_tb_bg_color = 'hsla(200, 45%, 87%, 1)';
// Border width, 0px = off
let new_tb_border_width = '1px';
// Border color
//let new_tb_border_color = 'red'; // Fixed color
//let new_tb_border_color = 'var(--sidebar-border-color)'; // Firefox default
let new_tb_border_color = 'color-mix(in srgb, currentColor 30%, transparent)'; // Custom self-adjusting color
// Size of toolbar and buttons changes, must be px values, all 3 settings are related ==>
// Change button sizes via padding, 8px default, changes toolbar size as well
let new_tb_btn_size = '6px';
// Width vertical toolbar / height horizontal toolbar, increased by this value on both sides
// Increases distance of buttons to edges, 0px => toolbar size = button size
let new_tb_size = '1px';
// Distance between buttons, 2px default, doesn't change toolbar size
let new_tb_distance = '5px';
// Expert mode ===>>>
// Saving changes, initial states ==>
// true = save states toolbar On/Off / position on quitting Firefox, false = don't save (prefs deleted)
// 2x restart required once after change, to make the the option stick
let new_tb_save = true;
// Initial state toolbar visibility: 0 = On, 1 = Off, only if new_tb_save = false (not saved)
let new_tb_off = 0;
// Position initial state: 0 = right, 1 = left, 2 = bottom, 3 = top, only if new_tb_save = false (not saved)
let new_tb_loc = 0;
// Extra: false = Button switches toolbar On/Off / changes Position for all open windows ; true = only active window
let new_tb_uno = false; // On/Off Button
let new_tb_uno_sw = false; // Position button
// Possible problem solutions, if required, experimental ==>
// Fix #1 for themes with low/ tiling background images, true / false, best to only use one of both
let theme_fix = false;
// Fix #2, overwrites Fix #1
let theme_fix_2 = false;
// Adjustments for Restore 'Space & Separator' items script for Firefox 102+ by Aris, true / false
// https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/space_and_separator_restorer.uc.js
let separator_fix = true;
// End of user settings
// Icons stuff
// Get path to profile folder
let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
let ImagePath = ProfilePath + IconPath + Icon_tb;
if (!custom_tb_icon) {
ImagePath = Icon_tb_Fx;
}
let ImagePathSW = ProfilePath + IconPath + Icon_sw;
if (!custom_tb_icon_sw) {
ImagePathSW = Icon_sw_Fx;
}
// Enable .svg icons properties
if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
}
// Toolbar
const pref_new_toolbar_state = "userchrome.new_toolbar.enabled";
let ntb_box = document.createXULElement('toolbox');
ntb_box.id = 'toolbox_new';
ntb_box.setAttribute('orient','horizontal');
let ntb = document.createXULElement('toolbar');
ntb.id = 'new_toolbar';
ntb.setAttribute('customizable', true);
ntb.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
ntb.setAttribute('mode', 'icons');
ntb.setAttribute('context', 'toolbar-context-menu');
ntb.setAttribute('label', 'New Toolbar');
ntb.setAttribute('orient', 'vertical');
ntb.setAttribute("accesskey","");
ntb_box.appendChild(ntb);
document.getElementById('browser').parentNode.appendChild(ntb_box);
CustomizableUI.registerArea('new_toolbar', {legacy: true});
CustomizableUI.registerToolbarNode(ntb);
let observer_custom = new MutationObserver(function(mutations) {
for (let mutation of mutations) {
try {
const customContainer = document.getElementById('customization-container');
if (!customContainer) return;
const rect = customContainer.getBoundingClientRect();
document.getElementById('toolbox_new').style.setProperty('--height_newbar_c', rect.top + 'px');
} catch (e) { }
}
});
observer_custom.observe(document.querySelector('#main-window'), {
attributes: true,
attributeFilter: ['customizing'],
});
let navbar_size = document.getElementById("browser");
let observer = new ResizeObserver(() => {
let rect = navbar_size.getBoundingClientRect();
document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.height + 'px');
document.getElementById('toolbox_new').style.setProperty('--height_newbar_top', rect.top + 'px');
});
observer.observe(navbar_size);
//On/Off button
try {
CustomizableUI.createWidget({
id: 'NewToolbar_button',
defaultArea: CustomizableUI.AREA_NAVBAR,
tooltiptext: 'Toolbar On',
label: 'Toggle New Toolbar',
onCreated: (this_button) => {
this_button.setAttribute('closemenu', 'none');
this_button.style.MozContextProperties = 'fill, stroke, fill-opacity, stroke-opacity';
this_button.style.listStyleImage = 'url("' + ImagePath + '")';
this_button.style.minWidth = 'fit-content';
}
});
} catch(e) { }
// Button function
NewToolbar_button.addEventListener('click', event => {
if (event.button === 0 ) {
if (!new_tb_uno) {
tb_toggle();
}
else {
tb_toggle_uno();
};
if (NewToolbar_button.classList.contains("off-mode_btn")) {
NewToolbar_button.setAttribute("tooltiptext", "Toolbar Off");
}
else {
NewToolbar_button.setAttribute("tooltiptext", "Toolbar On");
};
}
});
function tb_toggle() {
for (let win of Services.wm.getEnumerator("navigator:browser")) {
const toolbar = win.document.getElementById("new_toolbar");
const browserArea = win.document.getElementById("browser");
const button = win.document.getElementById("NewToolbar_button");
toolbar.classList.toggle("off-mode");
browserArea.classList.toggle("off-mode_b");
button.classList.toggle("off-mode_btn");
const ntb_visible = !toolbar.classList.contains("off-mode");
Services.prefs.setBoolPref(pref_new_toolbar_state, ntb_visible);
}
};
function tb_toggle_uno() {
new_toolbar.classList.toggle("off-mode");
browser.classList.toggle("off-mode_b");
NewToolbar_button.classList.toggle("off-mode_btn");
const ntb_visible = !new_toolbar.classList.contains("off-mode");
Services.prefs.setBoolPref(pref_new_toolbar_state, ntb_visible);
};
// Position initial state
if (new_tb_loc === 0) {
toolbox_new.classList.add("right_mode");
browser.classList.add("right_mode_b");
NewToolbar_button.classList.add("right_mode_btn");
}
else if (new_tb_loc === 1) {
toolbox_new.classList.add("left_mode");
browser.classList.add("left_mode_b");
NewToolbar_button.classList.add("left_mode_btn");
}
else if (new_tb_loc === 2) {
toolbox_new.classList.add("bottom_mode");
browser.classList.add("bottom_mode_b");
NewToolbar_button.classList.add("bottom_mode_btn");
}
else if (new_tb_loc === 3) {
toolbox_new.classList.add("top_mode");
browser.classList.add("top_mode_b");
NewToolbar_button.classList.add("top_mode_btn");
}
let toolbarEnabled = true;
try {
toolbarEnabled = Services.prefs.getBoolPref(pref_new_toolbar_state);
} catch(e) {
Services.prefs.setBoolPref(pref_new_toolbar_state, new_tb_off === 0);
toolbarEnabled = new_tb_off === 0;
}
if (!toolbarEnabled) {
new_toolbar.classList.add("off-mode");
browser.classList.add("off-mode_b");
NewToolbar_button.classList.add("off-mode_btn");
NewToolbar_button.setAttribute("tooltiptext", "Toolbar Off");
}
// Background color
if (new_tb_color) {
new_toolbar.classList.add("ntb_bg_color");
}
// Code by Aris => Attach handlers for buttons moved outside #navigator-toolbox
const customHandlers = {
"unified-extensions-button": (el, e) => gUnifiedExtensions.togglePanel(e),
"fxa-toolbar-menu-button": (el, e) => gSync.toggleAccountPanel(el, e),
"firefox-view-button": (el, e) => FirefoxViewHandler.openToolbarMouseEvent(e),
"downloads-button": (el, e) => DownloadsIndicatorView.onCommand(e),
"pageActionButton": (el, e) => BrowserPageActions.mainButtonClicked(e),
"alltabs-button": (el, e) => gTabsPanel.showAllTabsPanel(e, "alltabs-button"),
"library-button": (el, e) => PanelUI.showSubView("appMenu-libraryView", el, e),
"import-button": (el, e) => MigrationUtils.showMigrationWizard(window, {
entrypoint: MigrationUtils.MIGRATION_ENTRYPOINTS.BOOKMARKS_TOOLBAR,
}),
};
document.getElementById("new_toolbar").addEventListener("mousedown", (e) => {
const button = e.target.closest("toolbarbutton");
if (button?.id && customHandlers[button.id]) customHandlers[button.id](button, e);
});
// Position switch context menu item
const pref_position = "userchrome.new_toolbar.position";
function getPositionPref() {
try {
return Services.prefs.getCharPref(pref_position);
} catch (e) {
return "right"; // Standardwert
}
}
function setPositionPref(value) {
Services.prefs.setCharPref(pref_position, value);
}
let menuitem_SW = document.createXULElement("menuitem");
menuitem_SW.setAttribute('id', 'NewToolbar_position_Con');
menuitem_SW.setAttribute('closemenu', 'none');
menuitem_SW.setAttribute('label', 'Toolbar Position');
menuitem_SW.style.setProperty('-moz-context-properties', 'fill, stroke, fill-opacity, stroke-opacity');
menuitem_SW.classList.add('menuitem-iconic');
let menu_SW = document.getElementById('toolbar-context-menu');
let separator_SW = document.querySelector('.viewCustomizeToolbar');
menu_SW.insertBefore(menuitem_SW, separator_SW);
let menuseparator_sw = document.createXULElement("menuseparator");
menuseparator_sw.setAttribute('id', 'sw_separator');
menu_SW.insertBefore(menuseparator_sw, menuitem_SW.nextSibling);
// Context menuitem only vivible in this button and toolbar
menu_SW.addEventListener("popupshowing", (event) => {
let trigger = menu_SW.triggerNode;
let isntbButton = trigger && trigger.id === "NewToolbar_button";
let isInsideNewToolbar = false;
if (trigger) {
let toolbar = trigger.closest("#new_toolbar");
isInsideNewToolbar = !!toolbar;
}
let visible = isntbButton || isInsideNewToolbar;
menuitem_SW.hidden = !visible;
menuseparator_sw.hidden = !visible;
});
// Disable menuitems for moving button out of toolbars or overflow menu
if (menu_SW) {
menu_SW.addEventListener("popupshowing", onContextMenuShowing);
}
let overflowMenu = document.getElementById("customizationPanelItemContextMenu");
if (overflowMenu) {
overflowMenu.addEventListener("popupshowing", onContextMenuShowing);
}
function onContextMenuShowing(event) {
const menu = event.currentTarget;
const trigger = menu.triggerNode;
if (!trigger) return;
const isPopupButtonOrWrapper =
trigger.id === "NewToolbar_button" ||
trigger.id === "wrapper-NewToolbar_button" ||
!!trigger.closest?.("#wrapper-NewToolbar_button, #NewToolbar_button");
const removeFromToolbarItem =
menu.querySelector(".customize-context-removeFromToolbar");
const removeFromPanelItem =
menu.querySelector(".customize-context-removeFromPanel");
const moveToPanelItem =
menu.querySelector(".customize-context-moveToPanel");
const inNewToolbar = trigger.closest("#new_toolbar");
const tbLike = trigger.closest(
"#NewToolbar_button, #wrapper-NewToolbar_button, toolbarbutton, toolbarpaletteitem, toolbaritem, .toolbarbutton-1"
);
if (inNewToolbar && !tbLike) {
if (removeFromToolbarItem)
removeFromToolbarItem.setAttribute("disabled", "true");
if (removeFromPanelItem)
removeFromPanelItem.setAttribute("disabled", "true");
if (moveToPanelItem)
moveToPanelItem.setAttribute("disabled", "true");
return;
}
function setStateForItem(item) {
if (!item) return;
if (isPopupButtonOrWrapper) {
item.setAttribute("disabled", "true");
} else {
item.removeAttribute("disabled");
}
}
setStateForItem(removeFromToolbarItem);
setStateForItem(removeFromPanelItem);
};
// functions position
function applyPosition(pos) {
toolbox_new.classList.remove("left_mode", "bottom_mode", "right_mode", "top_mode");
browser.classList.remove("left_mode_b", "bottom_mode_b", "right_mode_b", "top_mode_b");
NewToolbar_button.classList.remove("left_mode_btn", "bottom_mode_btn", "right_mode_btn", "top_mode_btn");
NewToolbar_position_Con.classList.remove("left_mode_sw", "bottom_mode_sw", "right_mode_sw", "top_mode_sw");
if (pos === "left") {
toolbox_new.classList.add("left_mode");
browser.classList.add("left_mode_b");
NewToolbar_button.classList.add("left_mode_btn");
NewToolbar_position_Con.classList.add("left_mode_sw");
} else if (pos === "bottom") {
toolbox_new.classList.add("bottom_mode");
browser.classList.add("bottom_mode_b");
NewToolbar_button.classList.add("bottom_mode_btn");
NewToolbar_position_Con.classList.add("bottom_mode_sw");
} else if (pos === "top") {
toolbox_new.classList.add("top_mode");
browser.classList.add("top_mode_b");
NewToolbar_button.classList.add("top_mode_btn");
NewToolbar_position_Con.classList.add("top_mode_sw");
} else if (pos === "right") {
toolbox_new.classList.add("right_mode");
browser.classList.add("right_mode_b");
NewToolbar_button.classList.add("right_mode_btn");
NewToolbar_position_Con.classList.add("right_mode_sw");
}
}
let savedPos = getPositionPref();
applyPosition(savedPos);
document.getElementById("NewToolbar_position_Con").addEventListener('click', event => {
if (event.button === 0 || event.button === 2) {
if (!new_tb_uno_sw) {
poser();
}
else {
poser_uno();
};
}
});
function poser() {
for (let win of Services.wm.getEnumerator("navigator:browser")) {
const toolbox = win.document.getElementById("toolbox_new");
const browserArea = win.document.getElementById("browser");
const button = win.document.getElementById("NewToolbar_button");
const button_con = win.document.getElementById("NewToolbar_position_Con");
if (toolbox.classList.contains("right_mode")) {
toolbox.classList.replace("right_mode", "left_mode");
browserArea.classList.replace("right_mode_b", "left_mode_b");
button.classList.replace("right_mode_btn", "left_mode_btn");
button_con.classList.replace("right_mode_sw", "left_mode_sw");
setPositionPref("left");
}
else if (toolbox.classList.contains("left_mode")) {
toolbox.classList.replace("left_mode", "bottom_mode");
browserArea.classList.replace("left_mode_b", "bottom_mode_b");
button.classList.replace("left_mode_btn", "bottom_mode_btn");
button_con.classList.replace("left_mode_sw", "bottom_mode_sw");
setPositionPref("bottom");
}
else if (toolbox.classList.contains("bottom_mode")) {
toolbox.classList.replace("bottom_mode", "top_mode");
browserArea.classList.replace("bottom_mode_b", "top_mode_b");
button.classList.replace("bottom_mode_btn", "top_mode_btn");
button_con.classList.replace("bottom_mode_sw", "top_mode_sw");
setPositionPref("top");
}
else if (toolbox.classList.contains("top_mode")) {
toolbox.classList.replace("top_mode", "right_mode");
browserArea.classList.replace("top_mode_b", "right_mode_b");
button.classList.replace("top_mode_btn", "right_mode_btn");
button_con.classList.replace("top_mode_sw", "right_mode_sw");
setPositionPref("right");
}
}
};
function poser_uno() {
if (toolbox_new.classList.contains("right_mode")) {
toolbox_new.classList.replace("right_mode", "left_mode");
browser.classList.replace("right_mode_b", "left_mode_b");
NewToolbar_button.classList.replace("right_mode_btn", "left_mode_btn");
NewToolbar_position_Con.classList.replace("right_mode_sw", "left_mode_sw");
setPositionPref("left");
}
else if (toolbox_new.classList.contains("left_mode")) {
toolbox_new.classList.replace("left_mode", "bottom_mode");
browser.classList.replace("left_mode_b", "bottom_mode_b");
NewToolbar_button.classList.replace("left_mode_btn", "bottom_mode_btn");
NewToolbar_position_Con.classList.replace("left_mode_sw", "bottom_mode_sw");
setPositionPref("bottom");
}
else if (toolbox_new.classList.contains("bottom_mode")) {
toolbox_new.classList.replace("bottom_mode", "top_mode");
browser.classList.replace("bottom_mode_b", "top_mode_b");
NewToolbar_button.classList.replace("bottom_mode_btn", "top_mode_btn");
NewToolbar_position_Con.classList.replace("bottom_mode_sw", "top_mode_sw");
setPositionPref("top");
}
else if (toolbox_new.classList.contains("top_mode")) {
toolbox_new.classList.replace("top_mode", "right_mode");
browser.classList.replace("top_mode_b", "right_mode_b");
NewToolbar_button.classList.replace("top_mode_btn", "right_mode_btn");
NewToolbar_position_Con.classList.replace("top_mode_sw", "right_mode_sw");
setPositionPref("right");
}
};
// Move button back if removed from toolbars or overflow menu
let previousPlacement = null;
window.addEventListener("beforecustomization", () => {
previousPlacement = CustomizableUI.getPlacementOfWidget("NewToolbar_button");
});
function ensureTestButtonNotInPalette() {
let placement = CustomizableUI.getPlacementOfWidget("NewToolbar_button");
if (!placement) {
if (previousPlacement) {
CustomizableUI.addWidgetToArea(
"NewToolbar_button",
previousPlacement.area,
previousPlacement.position
);
} else {
CustomizableUI.addWidgetToArea(
"NewToolbar_button",
CustomizableUI.AREA_NAVBAR
);
}
}
};
window.addEventListener("aftercustomization", ensureTestButtonNotInPalette);
// On quitting Firefox: delete Prefs, if new_tb_save = false
if (!new_tb_save) {
Services.obs.addObserver(function observer(subject, topic, data) {
if (topic === "quit-application-granted") {
try {
Services.prefs.clearUserPref(pref_new_toolbar_state);
Services.prefs.clearUserPref(pref_position);
} catch (e) { }
Services.obs.removeObserver(observer, "quit-application-granted");
}
}, "quit-application-granted");
};
let css =`
#main-window {
--ug-newbar_basewidth: calc(2 * ${new_tb_btn_size} + 16px); /* Minimalgroesse = Groesse Buttons */
--ug-newbar_width: calc(var(--ug-newbar_basewidth) + ${new_tb_border_width} + 2 * `+new_tb_size+`);
}
/*- Buttons -*/
/* Buttons sizes */
#new_toolbar {
--toolbarbutton-inner-padding: ${new_tb_btn_size} !important;
--toolbarbutton-outer-padding: 0px !important;
}
/* On/Off Button */
#NewToolbar_button.off-mode_btn:not(:hover, :active) .toolbarbutton-icon {
opacity: 0.4;
}
/* Button adjusts to Toolbar Position */
#NewToolbar_button.left_mode_btn .toolbarbutton-icon,
#NewToolbar_position_Con.left_mode_sw :is(image, img) {
transform: rotate(180deg);
}
#NewToolbar_button.bottom_mode_btn .toolbarbutton-icon,
#NewToolbar_position_Con.bottom_mode_sw :is(image, img) {
transform: rotate(90deg);
}
#NewToolbar_button.top_mode_btn .toolbarbutton-icon,
#NewToolbar_position_Con.top_mode_sw :is(image, img) {
transform: rotate(-90deg);
}
/* Menuitem */
#NewToolbar_position_Con :is(image, img) {
fill: currentColor !important;
list-style-image: url("${ImagePathSW}");
content: url("${ImagePathSW}") !important;
}
#main-window[customizing] :is(#NewToolbar_position_Con, #sw_separator) {
display: none !important;
}
#unified-extensions-button[hidden] {
visibility: visible !important;
display: flex !important;
}
/*-- Browser adjustments --*/
#browser.right_mode_b {
transition: padding-right 0.25s ease !important;
}
#browser.left_mode_b {
transition: padding-left 0.25s ease !important;
}
#browser.bottom_mode_b {
transition: padding-bottom 0.25s ease !important;
}
#browser.top_mode_b {
transition: padding-top 0.25s ease !important;
}
#browser:not(.off-mode_b).right_mode_b {
padding-right: var(--ug-newbar_width) !important;
}
#browser:not(.off-mode_b).left_mode_b {
padding-left: var(--ug-newbar_width) !important;
}
#browser:not(.off-mode_b).bottom_mode_b {
padding-bottom: var(--ug-newbar_width) !important;
}
#browser:not(.off-mode_b).top_mode_b {
padding-top: var(--ug-newbar_width) !important;
}
/*-- Basics / Right --*/
#toolbox_new {
position: fixed;
z-index: 2 !important;
display: flex;
width: fit-content;
top: var(--height_newbar_top);
right: 0px;
}
#new_toolbar {
display: flex;
min-width: var(--ug-newbar_width) !important;
width: var(--ug-newbar_width) !important;
min-height: var(--ug-newbar_basewidth) !important;
height: var(--height_newbar) !important;
align-items: center !important;
overflow: hidden !important;
padding-block: 8px;
border-width: 0px;
border-style: solid !important;
border-color: ${new_tb_border_color} !important;
border-left-width: ${new_tb_border_width};
border-right-width: 0px;
margin-inline: 0px;
padding-inline: 0px;
}
#toolbox_new:not(.bottom_mode, .top_mode) #new_toolbar:not([customizing]) {
max-width: var(--ug-newbar_width) !important;
transition: width 0.25s ease, max-width 0.25s ease, min-width 0.25s ease, border-left-width 0.125s ease;
}
#toolbox_new #new_toolbar:not([customizing]).off-mode {
min-width: 0px !important;
width: 0px !important;
max-width: 0px !important;
min-height: unset !important;
max-height: unset !important;
border-width: 0px !important;
box-shadow: none !important;
}
#new_toolbar:not([customizing]).off-mode > :is(.toolbarbutton-1, toolbaritem) {
opacity: 0 !important;
}
#new_toolbar > :is(.toolbarbutton-1, toolbaritem),
#new_toolbar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
margin-block: ${new_tb_distance} !important;
margin-inline: var(--toolbarbutton-outer-padding) !important;
transition: opacity 0.125s ease;
}
/*-- Left --*/
#toolbox_new.left_mode {
right: unset;
left: 0px;
}
#toolbox_new.left_mode #new_toolbar:not([customizing]) {
border-left-width: 0px;
border-right-width: ${new_tb_border_width};
transition: width 0.25s ease, max-width 0.25s ease, min-width 0.25s ease, border-right-width 0.125s ease;
}
/*-- Bottom / Top --*/
#toolbox_new.bottom_mode {
top: unset;
bottom: 0px;
}
#toolbox_new.top_mode #new_toolbar:not([customizing]),
#toolbox_new.bottom_mode #new_toolbar:not([customizing]) {
flex-direction: row !important;
min-height: 0px !important;
height: var(--ug-newbar_width) !important;
max-height: var(--ug-newbar_width) !important;
min-width: 0px !important;
width: 100vw !important;
padding-block: 0px;
padding-inline: 8px;
border-inline-width: 0px;
border-top-width: ${new_tb_border_width};
/*justify-content: center !important;*/ /* content centererd, optional */
transition: height 0.25s ease, max-height 0.25s ease, min-height 0.25s ease, border-top-width 0.125s ease !important;
}
#toolbox_new:where(.bottom_mode, .top_mode) #new_toolbar:not([customizing]).off-mode {
min-height: 0px !important;
height: 0px !important;
max-height: 0px !important;
max-width: unset !important;
}
#toolbox_new:where(.bottom_mode, .top_mode) #new_toolbar:not([customizing]) > :is(.toolbarbutton-1, toolbaritem) {
margin-block: var(--toolbarbutton-outer-padding) !important;
margin-inline: ${new_tb_distance} !important;
}
/*-- Top --*/
#toolbox_new.top_mode #new_toolbar:not([customizing]) {
border-top-width: 0px;
border-bottom-width: ${new_tb_border_width};
transition: height 0.25s ease, max-height 0.25s ease, min-height 0.25s ease, border-bottom-width 0.125s ease !important;
}
/*-- Fullscreen --*/
/* Mac / Video Fullscreen only */
#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: 0px !important;
right: 0px !important;
left: unset !important;
}
#new_toolbar[customizing] {
height: calc(100vh - var(--height_newbar_c)) !important;
width: initial !important;
transition: none !important;
}
#new_toolbar[customizing]::after {
content:"";
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 100%;
outline: calc(-1 * ${new_tb_border_width} + 1px) solid ${new_tb_border_color};
pointer-events: none;
}
#main-window:not([customizing]) #new_toolbar[customizing].off-mode {
min-width: 0px !important;
width: 0px !important;
min-height: 0px !important;
height: 0px !important;
border-width: 0px !important;
}
#customization-container {
margin-right: var(--ug-newbar_width) !important;
}
/*- Background colors -*/
/* Custom toolbar background color if enabled */
#new_toolbar.ntb_bg_color {
background-color: ${new_tb_bg_color} !important;
}
/*- Background themes, if background images are tiled, try theme_fix options above -*/
:root[lwtheme] #new_toolbar:not(.ntb_bg_color) {
background-color: var(--lwt-accent-color, var(--toolbar-bgcolor)) !important;
}
:root[lwtheme][lwtheme-image] #new_toolbar:not(.ntb_bg_color) {
background-image: var(--lwt-header-image) !important;
background-position: right 0px top 0px !important;
}
/*- test colors -*/
/*
#new_toolbar image {
outline: 1px solid green !important;
outline-offset: -1px !important;
}
*/
`;
if (theme_fix) {
css += `
/*- Fix #1 for themes with tiled background images -*/
:root[lwtheme][lwtheme-image] #new_toolbar:not(.ntb_bg_color) {
background: var(--lwt-header-image) !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: right 0px top 0px !important;
}
:root[lwtheme][lwtheme-image] #toolbox_new:is(.bottom_mode, .top_mode) #new_toolbar:not(.ntb_bg_color) {
background-size: auto !important;
}
`;
}
if (theme_fix_2) {
css += `
/*- Fix #2b width for themes with tiled background images -*/
:root[lwtheme][lwtheme-image] #toolbox_new #new_toolbar:not(.ntb_bg_color) {
background: transparent !important;
}
:root[lwtheme][lwtheme-image] #new_toolbar:not(.ntb_bg_color)::before {
content: "" ;
position: absolute;
top: 0px;
right: 0px;
min-width: var(--height_newbar) !important;
width: var(--height_newbar) !important;
min-height: var(--ug-newbar_width) !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;
}
:root[lwtheme][lwtheme-image] #new_toolbar:not(.ntb_bg_color, [customizing])::before {
transition: height 0.25s ease, max-height 0.25s ease, min-height 0.25s ease, margin-top 0.25s ease;
margin-top: 0px;
}
:root[lwtheme][lwtheme-image] #new_toolbar:not(.ntb_bg_color, [customizing]).off-mode::before {
min-height: 0px !important;
height: 0px !important;
max-height: 0px !important;
margin-top: var(--ug-newbar_width);
}
:root[lwtheme][lwtheme-image] #toolbox_new:is(.bottom_mode, .top_mode) #new_toolbar:not(.ntb_bg_color, [customizing])::before {
transform: scaleX(-1) !important;
transform-origin: 50% 50% !important;
min-height: var(--ug-newbar_width) !important;
height: var(--ug-newbar_width) !important;
min-width: 0px !important;
width: 100vw !important;
transition: height 0.25s ease, max-height 0.25s ease, min-height 0.25s ease;
margin-top: unset;
}
:root[lwtheme][lwtheme-image] #toolbox_new:is(.bottom_mode, .top_mode) #new_toolbar:not(.ntb_bg_color, [customizing]).off-mode::before {
min-height: 0px !important;
height: 0px !important;
max-height: 0px !important;
margin-top: unset;
}
:root[lwtheme][lwtheme-image] #new_toolbar:not(.ntb_bg_color)[customizing]::before {
width: calc(100vh - var(--height_newbar_c)) !important;
}
#main-window:not([customizing]) #toolbox_new #new_toolbar:not(.ntb_bg_color)[customizing].off-mode::before {
min-width: 0px !important;
width: 0px !important;
min-height: 0px !important;
max-height: 0px !important;
height: 0px !important;
border-width: 0px !important;
margin-top: unset !important;
}
`;
}
if (separator_fix) {
css += `
/* Adjustments for Separator Scripts */
#new_toolbar toolbarseparator {
width: calc(var(--ug-newbar_width) - ${new_tb_border_width} - 6px) !important;
margin: 5px 0px !important;
border-block-color: hsl(0, 0%, 0%, 0.45) hsl(0, 0%, 100%, 0.55) !important;
transition: width 0.125s ease !important;
}
#new_toolbar :is(toolbarspacer, toolbarspring, toolbarseparator) {
min-width: 0px !important;
}
#new_toolbar:not([customizing]).off-mode toolbarseparator {
width: 0px !important;
}
#toolbox_new:where(.bottom_mode, .top_mode) #new_toolbar:not([customizing]) toolbarseparator {
transform: rotate(-90deg) !important;
margin: 0px !important;
}
#new_toolbar[customizing] toolbarseparator {
margin-block: 16px !important;
}
`;
}
const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
})();Icons, unverändert: icons.zip
Ein kleiner Update
Knapp 1000 Zeilen für eine Leiste? Geht auch kürzer (CSS muss angepasst werden):
/* Statusleiste für Firefox, für Änderungen ab 118/119:
https://www.camp-firefox.de/forum/thema/112673-userchrome-js-scripte-f%C3%BCr-den-fuchs-diskussion/?postID=1234805#post1234805*/
(function() {
if (location != 'chrome://browser/content/browser.xhtml')
return;
var tb = document.createXULElement('toolbar');
tb.id = 'new-toolbar';
tb.setAttribute('customizable', true);
tb.setAttribute('mode', 'icons');
tb.setAttribute("context","toolbar-context-menu");
var vbox = document.createXULElement('vbox');
document.getElementById('browser').parentNode.insertBefore( vbox, null);
vbox.appendChild(tb);
CustomizableUI.registerArea('new-toolbar', {legacy: true});
CustomizableUI.registerToolbarNode(tb);
})();#new-toolbar{
background-color: gray !important;
border: none !important;
border-top: 1px solid orange !important;
box-shadow: none !important;
--toolbarbutton-inner-padding: 6px !important;
--toolbarbutton-outer-padding: 0px !important;
overflow: hidden !important;
bottom: 0 !important;
height: 0px !important;
min-height: 0px !important;
max-height: 0px !important;
margin-top: -4px !important;
margin-bottom: 0px !important;
opacity: 0 !important;
transition: height .1s linear .1s, min-height .1s linear .1s, max-height .1s linear .1s, opacity .1s linear .1s, margin-top .1s linear .1s !important;
}
#new-toolbar:hover {
height: 22px !important;
min-height: 22px !important;
max-height:22px !important;
margin-top: 1px !important;
opacity: 1 !important;
transition: height .3s linear .3s, min-height .3s linear .3s, max-height .3s linear .3s, opacity .3s linear .3s, margin-top .3s linear .3s !important;
overflow: hidden !important;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#new-toolbar {
background-color: gray!important;
max-height: 22px!important;
box-shadow: none !important;
overflow: hidden!important;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#new-toolbar toolbarbutton .toolbarbutton-icon {
margin-bottom: -3px !important;
margin-top: -3px !important;
overflow: hidden !important;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#new-toolbar toolbarbutton,
#new-toolbar .toolbarbutton-1 {
height: 22px !important;
min-height: 22px !important;
max-height: 22px !important;
overflow: hidden !important;
min-width: fit-content !important;
}
#new-toolbar toolbarbutton:hover,
#new-toolbar .toolbarbutton-1:hover {
background-color: lightgray !important;
}
#new-toolbar toolbarbutton:active,
#new-toolbar .toolbarbutton-1:active {
background-color: lightgray !important;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#new-toolbar .toolbarbutton-1 {
margin-top: -2px !important;
}
#new-toolbar toolbarbutton {
margin-bottom: -1px !important;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
:root[customizing] #new-toolbar{
height: 22px !important;
min-height: 22px !important;
max-height: 22px !important;
margin-top: 0px !important;
opacity: 1 !important;
transition: none !important;
}
:root[customizing] #new-toolbar:hover{
height: 22px !important;
min-height: 22px !important;
max-height: 22px !important;/**/
margin-top: 0px !important;
opacity: 1 !important;
transition: none !important;
}
Knapp 1000 Zeilen für eine Leiste? Geht auch kürzer (CSS muss angepasst werden):
Die beiden Scripts kann man nicht so ganz direkt vergleichen.
Optimieren könnte man bei mir vieles, wie so oft erwähnt, aber du weisst besser als ich, dass die ganzen Optionen und Features nicht von alleine auftauchen. 
Wenn es aber schon ein Script sein soll, das mit dem hier quasi nix zu tun hat - kein hover Gedöns in diesem Ding - dann muss man das nicht so aufblähen:
(function() {
if (location.href !== 'chrome://browser/content/browser.xhtml')
return;
let null_box = document.createXULElement('toolbox');
null_box.id = 'nullbox_new';
null_box.setAttribute('orient','horizontal');
let nulltb = document.createXULElement('toolbar');
nulltb.id = 'Null_toolbar';
nulltb.setAttribute('customizable', true);
nulltb.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
nulltb.setAttribute('mode', 'icons');
nulltb.setAttribute('context', 'toolbar-context-menu');
nulltb.setAttribute('label', 'New Toolbar');
nulltb.setAttribute('orient', 'horizontal');
nulltb.setAttribute("accesskey","");
null_box.appendChild(nulltb);
document.getElementById('browser').parentNode.appendChild(null_box);
CustomizableUI.registerArea('Null_toolbar', {legacy: true});
CustomizableUI.registerToolbarNode(nulltb);
let css =`
#nullbox_new {
--base_height: 32px;
--extra_height: 1px;
}
#Null_toolbar {
z-index: 4 !important;
overflow: hidden !important;
background-color: lightblue !important;
min-width: 64px !important;
width: 100% !important;
min-height: var(--base_height) !important;
height: calc(var(--base_height) + 2*var(--extra_height)) !important;
align-items: center !important;
padding-block: var(--extra_height);
padding-inline: 8px;
border-style: solid !important;
border-color: grey;
border-width: 0px;
border-top-width: 1px;
opacity: 1 !important;
margin-bottom: 0px !important;
transition: height 0.3s ease, min-height 0.3s ease,
opacity 0.3s ease,
margin-bottom 0.3s ease,
border-color 0.3s ease !important;
}
#Null_toolbar:not(:hover, [customizing]) {
min-height: 0px !important;
height: 0px !important;
max-height: 0px !important;
border-color: transparent !important;
opacity: 0 !important;
margin-bottom: calc(-2*var(--extra_height)) !important;
}
#Null_toolbar::before {
content:"";
position: absolute;
background-color: transparent;
bottom: 0px;
left: 0px;
height: 12px;
width: 100%;
z-index: -1 !important;
-moz-window-dragging: no-drag;
}
#Null_toolbar[customizing] {
transition: none !important;
}
`;
const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
})();Simple Versionen gibt's ja auch schon ein paar in dieser Thread, aber wenn du die aktuelle optimieren willst, hau rein. 