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.
Version 17c:
// 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);
})();
Version 18; Code reduziert, Button im Overflowmenü kann auch Position ändern, weitere Optimierungen.
// Firefox Javascript, Additional toolbar
// Choice of vertical left, right, and 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_V18.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 by Aris re. the issue included in this script, experimental
// Version V18
(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, or absolute file path if custom_tb_icon/ custom_tb_icon_sw = false
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)
// Get path to profile folder
let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
// Path to icon folder named "icons" inside profile folder
let IconPath = '/chrome/icons/';
// Custom 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 + border
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: true = On, false = Off, only for new_tb_save = false (not saved)
let new_tb_off = true;
// Position initial state: right, left, bottom, top, only for new_tb_save = false (not saved)
let new_tb_loc = "right";
// 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
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")) {
NewToolbar_button.setAttribute("tooltiptext", "Toolbar Off");
}
else {
NewToolbar_button.setAttribute("tooltiptext", "Toolbar On");
};
}
});
const elsOff = [new_toolbar, browser, NewToolbar_button];
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, browserArea, button].forEach(el => el.classList.toggle("off_mode"));
const ntb_visible = !toolbar.classList.contains("off_mode");
Services.prefs.setBoolPref(pref_new_toolbar_state, ntb_visible);
}
}
function tb_toggle_uno() {
elsOff.forEach(el => el.classList.toggle("off_mode"));
const ntb_visible = !new_toolbar.classList.contains("off_mode");
Services.prefs.setBoolPref(pref_new_toolbar_state, ntb_visible);
}
let toolbarEnabled = true;
try {
toolbarEnabled = Services.prefs.getBoolPref(pref_new_toolbar_state);
} catch(e) {
Services.prefs.setBoolPref(pref_new_toolbar_state, new_tb_off);
toolbarEnabled = new_tb_off;
}
if (!toolbarEnabled) {
elsOff.forEach(el => el.classList.add("off_mode"));
NewToolbar_button.setAttribute("tooltiptext", "Toolbar Off");
}
// Position switch context menu item
// Save state
const pref_position = "userchrome.new_toolbar.position";
function getPositionPref() {
try {
return Services.prefs.getCharPref(pref_position);
} catch (e) {
return new_tb_loc; // Initial state
}
}
function setPositionPref(value) {
Services.prefs.setCharPref(pref_position, value);
}
// Toolbars menuitem
let menuitem_sw = document.createXULElement("menuitem");
menuitem_sw.setAttribute('id', 'NewToolbar_position_Con');
menuitem_sw.setAttribute('closemenu', 'none');
menuitem_sw.setAttribute('label', 'Toolbar Position');
menuitem_sw.style.setProperty('-moz-context-properties', 'fill, stroke, fill-opacity, stroke-opacity');
menuitem_sw.classList.add('menuitem-iconic');
let toolbarMenu = document.getElementById('toolbar-context-menu');
let sibling_sw = toolbarMenu.querySelector('.viewCustomizeToolbar');
let menuseparator_sw = document.createXULElement("menuseparator");
menuseparator_sw.setAttribute('id', 'sw_separator');
toolbarMenu.insertBefore(menuitem_sw, sibling_sw);
toolbarMenu.insertBefore(menuseparator_sw, menuitem_sw.nextSibling);
// Overflow menuitem
let menuitem_sw_Clone = menuitem_sw.cloneNode(true);
menuitem_sw_Clone.classList.add('NewToolbar_position_Con_Over');
let menuseparator_sw_Clone = menuseparator_sw.cloneNode(true);
let overflowMenu = document.getElementById("customizationPanelItemContextMenu");
let sibling_sw_over = overflowMenu.querySelector(".viewCustomizeToolbar");
overflowMenu.insertBefore(menuitem_sw_Clone, sibling_sw_over);
overflowMenu.insertBefore(menuseparator_sw_Clone, menuitem_sw_Clone.nextSibling);
let Menuitem_sw_over = document.querySelector(".NewToolbar_position_Con_Over");
// Apply all functions
if (toolbarMenu) {
toolbarMenu.addEventListener("popupshowing", onContextMenuShowing);
toolbarMenu.addEventListener("popupshowing", trigger_limit);
NewToolbar_position_Con.addEventListener('click', ntb_toggle);
}
if (overflowMenu) {
overflowMenu.addEventListener("popupshowing", onContextMenuShowing);
overflowMenu.addEventListener("popupshowing", trigger_limit);
Menuitem_sw_over.addEventListener('click', ntb_toggle);
}
// Context menuitem only vivible on this button and toolbar
function trigger_limit() {
let trigger = toolbarMenu.triggerNode || overflowMenu.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;
menuitem_sw_Clone.hidden = !visible;
menuseparator_sw_Clone.hidden = !visible;
};
// Disable menuitems for moving button out of toolbars or overflow menu
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
const els = [toolbox_new, browser, NewToolbar_button, NewToolbar_position_Con, Menuitem_sw_over];
// Apply saved state
function applyPosition(pos) {
if (pos === "left") {
els.forEach(el => el.classList.add("left_mode"));
} else if (pos === "bottom") {
els.forEach(el => el.classList.add("bottom_mode"));
} else if (pos === "top") {
els.forEach(el => el.classList.add("top_mode"));
} else if (pos === "right") {
els.forEach(el => el.classList.add("right_mode"));
}
}
let savedPos = getPositionPref();
applyPosition(savedPos);
function ntb_toggle() {
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");
const button_con_over = win.document.querySelector(".NewToolbar_position_Con_Over");
const elsW = [toolbox, browserArea, button, button_con, button_con_over];
if (toolbox.classList.contains("top_mode")) {
elsW.forEach(el => el.classList.replace("top_mode", "left_mode"));
setPositionPref("left");
}
else if (toolbox.classList.contains("left_mode")) {
elsW.forEach(el => el.classList.replace("left_mode", "bottom_mode"));
setPositionPref("bottom");
}
else if (toolbox.classList.contains("bottom_mode")) {
elsW.forEach(el => el.classList.replace("bottom_mode", "right_mode"));
setPositionPref("right");
}
else if (toolbox.classList.contains("right_mode")) {
elsW.forEach(el => el.classList.replace("right_mode", "top_mode"));
setPositionPref("top");
}
}
};
function poser_uno() {
if (toolbox_new.classList.contains("top_mode")) {
els.forEach(el => el.classList.replace("top_mode", "left_mode"));
setPositionPref("left");
}
else if (toolbox_new.classList.contains("left_mode")) {
els.forEach(el => el.classList.replace("left_mode", "bottom_mode"));
setPositionPref("bottom");
}
else if (toolbox_new.classList.contains("bottom_mode")) {
els.forEach(el => el.classList.replace("bottom_mode", "right_mode"));
setPositionPref("right");
}
else if (toolbox_new.classList.contains("right_mode")) {
els.forEach(el => el.classList.replace("right_mode", "top_mode"));
setPositionPref("top");
}
};
// 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);
// 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);
});
// Background color
if (new_tb_color) {
new_toolbar.classList.add("ntb_bg_color");
}
// 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 --*/
/* Button sizes */
#new_toolbar {
--toolbarbutton-inner-padding: ${new_tb_btn_size} !important;
--toolbarbutton-outer-padding: 0px !important;
}
/* On/Off Button */
#NewToolbar_button.off_mode:not(:hover, :active) .toolbarbutton-icon {
opacity: 0.4;
}
/* Button icon adjusts to Toolbar Position */
#NewToolbar_button.left_mode .toolbarbutton-icon,
#NewToolbar_position_Con.left_mode :is(image, img) {
transform: rotate(180deg);
}
#NewToolbar_button.bottom_mode .toolbarbutton-icon,
#NewToolbar_position_Con.bottom_mode :is(image, img) {
transform: rotate(90deg);
}
#NewToolbar_button.top_mode .toolbarbutton-icon,
#NewToolbar_position_Con.top_mode :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 {
transition: padding-right 0.25s ease !important;
}
#browser.top_mode {
transition: padding-top 0.25s ease !important;
}
#browser.left_mode {
transition: padding-left 0.25s ease !important;
}
#browser.bottom_mode {
transition: padding-bottom 0.25s ease !important;
}
#browser:not(.off_mode).right_mode {
padding-right: var(--ug-newbar_width) !important;
}
#browser:not(.off_mode).left_mode {
padding-left: var(--ug-newbar_width) !important;
}
#browser:not(.off_mode).bottom_mode {
padding-bottom: var(--ug-newbar_width) !important;
}
#browser:not(.off_mode).top_mode {
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;
margin-inline: 0px;
padding-block: 8px;
padding-inline: 0px;
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;
}
#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;
opacity: 1 !important;
transition: opacity 0.125s ease-out;
}
/*-- 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:is(.bottom_mode, .top_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 position, "center" or "flex-end", 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;
border-color: transparent !important;
}
#new_toolbar[customizing]::after {
content:"";
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: calc(100% - ${new_tb_border_width});
outline: 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 for 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;
}
Nach einem leisen Update V18 in #207, hier ein offizieller(er), Version 19.
Der Button lässt sich jetzt aus den Toolbars und dem Overflowmenü entfernen, ohne das Script zu zerschiessen; die Position lässt sich auch via Button im Overflowmenü ändern, der Code ist stramm gerafft, wenn auch nicht viel kürzer wegen der neuen Features, und eine Unmenge Kleinigkeiten.
Wie zuvor, Funktionen und Usereinstellungen sind generell gleich geblieben (Parameter teils anders ausgeführt), Icons auch.
Ein Bug ist hartnäckig: wenn man den Button mit Aus Symbolleiste entfernen rauswirft, und dann direkt per Anpassenfenster zurückbewegt, funktioniert der Rechtsklick/das Kontextmenü auf dem Button erst in einem neuen Fenster bzw. nach Neustart wieder. 
Hilfe herzlich willkommen!
Aber den Button sonst sauber entfernen zu können, und eine Menge Code damit zu sparen, könnte das Update wert sein.
Version 19:
// Firefox Javascript, Additional toolbar
// Choice of vertical left, right, and 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
// Preferences added by this script: userchrome.new_toolbar.position, userchrome.new_toolbar.enabled, see about:config
// Use filename starting with 00 for custom button functions !! =>
// 00_extra_toolbars_V19.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 by Aris re. the issue included in this script, experimental
// Changes: Position change works in overflow menu, button can be removed w/o breaking script, code optimizations, adjustments
// Version V19
(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, or absolute file path if custom_tb_icon/ custom_tb_icon_sw = false
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)
// Get path to profile folder
let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
// Path to icon folder named "icons" inside profile folder
let IconPath = '/chrome/icons/';
// Custom 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
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 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 + border
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 for toolbar On/Off and 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: true = On, false = Off ; only for new_tb_save = false (not saved)
let new_tb_off = true;
// Position initial state: right, left, bottom, top ; only for new_tb_save = false (not saved)
let new_tb_loc = "right";
// 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
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);
// Get dimensions for customizing mode
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'],
});
// Get dimensions for regular windows
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);
// Get status of customizing mode
const customizeObserver = new MutationObserver(mutations => {
for (let m of mutations) {
if (m.attributeName === "customizing") {
if (!document.documentElement.hasAttribute("customizing")) {
els = getEls();
applyPosition(getPositionPref());
}
}
}
});
customizeObserver.observe(document.documentElement, {
attributes: true,
attributeFilter: ["customizing"],
});
// 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) { }
(function add_button() {
let btn_exists = document.getElementById("NewToolbar_button");
if (btn_exists) {
// 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")) {
NewToolbar_button.setAttribute("tooltiptext", "Toolbar Off");
}
else {
NewToolbar_button.setAttribute("tooltiptext", "Toolbar On");
};
}
});
const elsOff = [new_toolbar, browser, NewToolbar_button];
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");
let button = win.document.getElementById("NewToolbar_button");
[toolbar, browserArea, button].forEach(el => el.classList.toggle("off_mode"));
const ntb_visible = !toolbar.classList.contains("off_mode");
Services.prefs.setBoolPref(pref_new_toolbar_state, ntb_visible);
}
}
function tb_toggle_uno() {
elsOff.forEach(el => el.classList.toggle("off_mode"));
const ntb_visible = !new_toolbar.classList.contains("off_mode");
Services.prefs.setBoolPref(pref_new_toolbar_state, ntb_visible);
}
let toolbarEnabled = true;
try {
toolbarEnabled = Services.prefs.getBoolPref(pref_new_toolbar_state);
} catch(e) {
Services.prefs.setBoolPref(pref_new_toolbar_state, new_tb_off);
toolbarEnabled = new_tb_off;
}
if (!toolbarEnabled) {
elsOff.forEach(el => el.classList.add("off_mode"));
NewToolbar_button.setAttribute("tooltiptext", "Toolbar Off");
}
} else {
setTimeout(add_button, 100);
}
})();
// Position switch via context menu
// Saved state
const pref_position = "userchrome.new_toolbar.position";
function getPositionPref() {
try {
return Services.prefs.getCharPref(pref_position);
} catch (e) {
return new_tb_loc; // Initial state
}
}
function setPositionPref(value) {
Services.prefs.setCharPref(pref_position, value);
}
// Toolbars menuitem
let menuitem_sw = document.createXULElement("menuitem");
menuitem_sw.setAttribute('id', 'NewToolbar_position_Con');
menuitem_sw.setAttribute('closemenu', 'none');
menuitem_sw.setAttribute('label', 'Toolbar Position');
menuitem_sw.style.setProperty('-moz-context-properties', 'fill, stroke, fill-opacity, stroke-opacity');
menuitem_sw.classList.add('menuitem-iconic');
let menuseparator_sw = document.createXULElement("menuseparator");
menuseparator_sw.setAttribute('id', 'sw_separator');
let toolbarMenu = document.getElementById('toolbar-context-menu');
toolbarMenu.insertBefore(menuitem_sw, toolbarMenu.firstChild);
toolbarMenu.insertBefore(menuseparator_sw, menuitem_sw.nextSibling);
// Overflow menuitem
let menuitem_sw_Clone = menuitem_sw.cloneNode(true);
menuitem_sw_Clone.classList.add('NewToolbar_position_Con_Over');
let menuseparator_sw_Clone = menuseparator_sw.cloneNode(true);
let overflowMenu = document.getElementById("customizationPanelItemContextMenu");
overflowMenu.insertBefore(menuitem_sw_Clone, overflowMenu.firstChild);
overflowMenu.insertBefore(menuseparator_sw_Clone, menuitem_sw_Clone.nextSibling);
let Menuitem_sw_over = document.querySelector(".NewToolbar_position_Con_Over");
// Apply functions
if (toolbarMenu) {
toolbarMenu.addEventListener("popupshowing", trigger_limit);
NewToolbar_position_Con.addEventListener('click', ntb_toggle);
}
if (overflowMenu) {
overflowMenu.addEventListener("popupshowing", trigger_limit);
Menuitem_sw_over.addEventListener('click', ntb_toggle);
}
// Context menuitem only visible on this button and toolbar
function trigger_limit() {
let trigger = toolbarMenu.triggerNode || overflowMenu.triggerNode;
let isntbButton = trigger && trigger.id === "NewToolbar_button";
let isInsideNewToolbar = false;
if (trigger) {
let toolbar = trigger.closest("#new_toolbar");
isInsideNewToolbar = !!toolbar;
// Minimize clutter in toolbar menu
const tb_buttons = trigger.closest(
"#NewToolbar_button, #wrapper-NewToolbar_button, toolbarbutton, toolbarpaletteitem, toolbaritem, .toolbarbutton-1"
);
if(toolbar && !tb_buttons){
toolbarMenu.classList.add("newtb-context");
}
else {
toolbarMenu.classList.remove("newtb-context");
}
}
let visible = isntbButton || isInsideNewToolbar;
menuitem_sw.hidden = !visible;
menuseparator_sw.hidden = !visible;
menuitem_sw_Clone.hidden = !visible;
menuseparator_sw_Clone.hidden = !visible;
};
// Functions position
function getEls(win) {
const d = win ? win.document : document;
const toolbox = d.getElementById("toolbox_new");
const browserArea = d.getElementById("browser");
const button = d.getElementById("NewToolbar_button");
const button_con = d.getElementById("NewToolbar_position_Con");
const button_con_over = d.querySelector(".NewToolbar_position_Con_Over");
if (!button) {
return [toolbox, browserArea, button_con, button_con_over];
}
return [toolbox, browserArea, button, button_con, button_con_over];
}
let els = getEls();
// Apply saved state
function applyPosition(pos) {
if (pos === "left") {
els.forEach(el => el.classList.add("left_mode"));
} else if (pos === "bottom") {
els.forEach(el => el.classList.add("bottom_mode"));
} else if (pos === "top") {
els.forEach(el => el.classList.add("top_mode"));
} else if (pos === "right") {
els.forEach(el => el.classList.add("right_mode"));
}
}
let savedPos = getPositionPref();
applyPosition(savedPos);
function ntb_toggle() {
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 els = getEls(win);
// const toolbox_new = win.document.getElementById("toolbox_new");
if (toolbox_new.classList.contains("top_mode")) {
els.forEach(el => el.classList.replace("top_mode", "left_mode"));
setPositionPref("left");
} else if (toolbox_new.classList.contains("left_mode")) {
els.forEach(el => el.classList.replace("left_mode", "bottom_mode"));
setPositionPref("bottom");
} else if (toolbox_new.classList.contains("bottom_mode")) {
els.forEach(el => el.classList.replace("bottom_mode", "right_mode"));
setPositionPref("right");
} else if (toolbox_new.classList.contains("right_mode")) {
els.forEach(el => el.classList.replace("right_mode", "top_mode"));
setPositionPref("top");
}
}
}
function poser_uno() {
const els = getEls(window);
// const toolbox_new = document.getElementById("toolbox_new");
if (toolbox_new.classList.contains("top_mode")) {
els.forEach(el => el.classList.replace("top_mode", "left_mode"));
setPositionPref("left");
} else if (toolbox_new.classList.contains("left_mode")) {
els.forEach(el => el.classList.replace("left_mode", "bottom_mode"));
setPositionPref("bottom");
} else if (toolbox_new.classList.contains("bottom_mode")) {
els.forEach(el => el.classList.replace("bottom_mode", "right_mode"));
setPositionPref("right");
} else if (toolbox_new.classList.contains("right_mode")) {
els.forEach(el => el.classList.replace("right_mode", "top_mode"));
setPositionPref("top");
}
}
// 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);
});
// Background color
if (new_tb_color) {
new_toolbar.classList.add("ntb_bg_color");
}
// 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 --*/
/* Button sizes */
#new_toolbar {
--toolbarbutton-inner-padding: ${new_tb_btn_size} !important;
--toolbarbutton-outer-padding: 0px !important;
/* Start/end toolbar padding */
--ug-newbar_padding: 8px 8px;
}
/* On/Off Button */
:root:not([customizing]) #NewToolbar_button.off_mode:not(:hover, :active) .toolbarbutton-icon {
opacity: 0.4;
}
/* Button icon adjusts to Toolbar Position */
#NewToolbar_button.left_mode .toolbarbutton-icon,
#NewToolbar_position_Con.left_mode :is(image, img) {
transform: rotate(180deg);
}
#NewToolbar_button.bottom_mode .toolbarbutton-icon,
#NewToolbar_position_Con.bottom_mode :is(image, img) {
transform: rotate(90deg);
}
#NewToolbar_button.top_mode .toolbarbutton-icon,
#NewToolbar_position_Con.top_mode :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;
}
#toolbar-context-menu.newtb-context > :not(#NewToolbar_position_Con, #sw_separator, .viewCustomizeToolbar) {
display: none !important;
}
#unified-extensions-button[hidden] {
visibility: visible !important;
display: flex !important;
}
/*-- Browser adjustments --*/
#browser.right_mode {
transition: padding-right 0.25s ease !important;
}
#browser.top_mode {
transition: padding-top 0.25s ease !important;
}
#browser.left_mode {
transition: padding-left 0.25s ease !important;
}
#browser.bottom_mode {
transition: padding-bottom 0.25s ease !important;
}
#browser:not(.off_mode).right_mode {
padding-right: var(--ug-newbar_width) !important;
}
#browser:not(.off_mode).left_mode {
padding-left: var(--ug-newbar_width) !important;
}
#browser:not(.off_mode).bottom_mode {
padding-bottom: var(--ug-newbar_width) !important;
}
#browser:not(.off_mode).top_mode {
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;
margin-inline: 0px;
padding-block: var(--ug-newbar_padding);
padding-inline: 0px;
border-width: 0px;
/*justify-content: center !important;*/ /* content position, "center" or "flex-end", optional */
border-style: solid !important;
border-color: ${new_tb_border_color} !important;
border-left-width: ${new_tb_border_width};
border-right-width: 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;
opacity: 1 !important;
transition: opacity 0.125s ease-out;
}
/*-- 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:is(.bottom_mode, .top_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: var(--ug-newbar_padding);
border-inline-width: 0px;
border-top-width: ${new_tb_border_width};
/*justify-content: center !important;*/ /* content position, "center" or "flex-end", 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: 0px !important;
}
/* Windows Fullscreen Video + Normal */
@media (-moz-platform: windows) {
#main-window[inFullscreen]:not([customizing]) #toolbox_new {
visibility: collapse !important;
}
#main-window[inFullscreen]:not([customizing]) #browser {
padding: 0px !important;
}
}
/*-- customizing --*/
#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;
border-color: transparent !important;
}
#new_toolbar[customizing]::after {
content:"";
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: calc(100% - ${new_tb_border_width});
outline: 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 for 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: icons.zip