An "die Leiste oben" mache ich mich noch dran.
Denn da wäre sie mir lieber.
Oder teste mal den Otto, nur für dich 
:
JavaScript
// Test Mira toolbar top
// 000_toolbar_top.uc.js
(function() {
if (location.href !== 'chrome://browser/content/browser.xhtml')
return;
// User settings
// After script changes, restart with Clear StartUp Cache => about:support
// Custom Icons, expected in profile-name/chrome/icons folder ("icons" folder needs to be created)
// get path to profile folder
let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
// path to icon folder named "icons" inside profile folder
let IconPath = '/chrome/icons/';
// Custom icon file
let Icon_tb = 'toolbar_4.svg';
// Firefox icon
let Icon_tb_Fx = 'chrome://browser/skin/sidebars-right.svg';
// false = use Firefox Icon, true = Custom Icon
let new_tb_icon = false;
// Complete path to icon
let ImagePath = ProfilePath + IconPath + Icon_tb;
// Custom background color: false = Off ; true = On (overwrites themes)
let new_tb_color = false;
// background color if true
let new_tb_bg_color = 'hsla(200, 45%, 87%, 1)';
// Border width, 0px = off
let new_tb_border_width = '1px';
// Border color
//let new_tb_border_color = 'red'; // Fixed color
//let new_tb_border_color = 'var(--sidebar-border-color)'; // Firefox default
let new_tb_border_color = 'color-mix(in srgb, currentColor 30%, transparent)'; // Custom self-adjusting color
// Size of toolbar and buttons changes, must be px values, all 3 settings are related ==>
// Change button sizes via padding, 8px default
let new_tb_btn_size = '6px';
// Distance between buttons, 2px default
let new_tb_distance = '5px';
// Width vertical toolbar / height horizontal toolbar, increased by this value on both sides
// Increase distance of buttons to edges, 0px => toolbar size = button size
let new_tb_size = '1px';
// Initial states ==>
// Initial state toolbar visibility: 0 = On, 1 = Off, only if new_tb_save = false (not saved)
let new_tb_off = 0;
// Extra: false = Button switches toolbar On/Off / changes Position for all open windows ; true = only active window
let new_tb_uno = false; // On/Off Button
// Possible problem solutions, if required, experimental ==>
// Fix #1 for themes with low/ tiling background images, true / false, best to only use one of both
let theme_fix = true;
// Fix #2, overwrites Fix #1
let theme_fix_2 = false;
// Adjustments for Restore 'Space & Separator' items script for Firefox 102+ by Aris, true / false
// https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/space_and_separator_restorer.uc.js
let separator_fix = true;
// End of user settings
if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
}
const pref_newtoolbar_top_state = "userchrome.newtoolbar_top.enabled";
let ntb_box = document.createXULElement('toolbox');
ntb_box.id = 'toolbox_new';
ntb_box.setAttribute('orient','horizontal');
let ntb = document.createXULElement('toolbar');
ntb.id = 'newtoolbar_top';
ntb.setAttribute('customizable', true);
ntb.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
ntb.setAttribute('mode', 'icons');
ntb.setAttribute('context', 'toolbar-context-menu');
ntb.setAttribute('label', 'New Toolbar');
ntb.setAttribute('orient', 'vertical');
ntb.setAttribute("accesskey","");
ntb_box.appendChild(ntb);
document.getElementById('browser').parentNode.appendChild(ntb_box);
CustomizableUI.registerArea('newtoolbar_top', {legacy: true});
CustomizableUI.registerToolbarNode(ntb);
let observer_custom = new MutationObserver(function(mutations) {
for (let mutation of mutations) {
try {
const customContainer = document.getElementById('customization-container');
if (!customContainer) return;
const rect = customContainer.getBoundingClientRect();
document.getElementById('toolbox_new').style.setProperty('--height_newbar_c', rect.top + 'px');
} catch (e) { }
}
});
observer_custom.observe(document.querySelector('#main-window'), {
attributes: true,
attributeFilter: ['customizing'],
});
let navbar_size = document.getElementById("browser");
let observer = new ResizeObserver(() => {
let rect = navbar_size.getBoundingClientRect();
document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.height + 'px');
document.getElementById('toolbox_new').style.setProperty('--height_newbar_top', rect.top + 'px');
});
observer.observe(navbar_size);
//On/Off button
try {
CustomizableUI.createWidget({
id: 'newtoolbar_top_button',
defaultArea: CustomizableUI.AREA_NAVBAR,
tooltiptext: 'New Toolbar',
label: 'Toggle New Toolbar',
removable: false,
});
} catch(e) { }
// Button function
newtoolbar_top_button.addEventListener('click', event => {
if (event.button === 0 ) {
if (!new_tb_uno) {
tb_toggle();
}
else {
tb_toggle_uno();
};
}
});
function tb_toggle() {
for (let win of Services.wm.getEnumerator("navigator:browser")) {
const toolbar = win.document.getElementById("newtoolbar_top");
const browserArea = win.document.getElementById("browser");
const button = win.document.getElementById("newtoolbar_top_button");
toolbar.classList.toggle("off-mode_top");
browserArea.classList.toggle("off-mode_top_b");
button.classList.toggle("off-mode_top_btn");
const ntb_visible = !toolbar.classList.contains("off-mode_top");
Services.prefs.setBoolPref(pref_newtoolbar_top_state, ntb_visible);
}
};
function tb_toggle_uno() {
newtoolbar_top.classList.toggle("off-mode_top");
browser.classList.toggle("off-mode_top_b");
newtoolbar_top_button.classList.toggle("off-mode_top_btn");
const ntb_visible = !newtoolbar_top.classList.contains("off-mode_top");
Services.prefs.setBoolPref(pref_newtoolbar_top_state, ntb_visible);
};
let toolbarEnabled = true;
try {
toolbarEnabled = Services.prefs.getBoolPref(pref_newtoolbar_top_state);
} catch(e) {
Services.prefs.setBoolPref(pref_newtoolbar_top_state, new_tb_off === 0);
toolbarEnabled = new_tb_off === 0;
}
if (!toolbarEnabled) {
newtoolbar_top.classList.add("off-mode_top");
browser.classList.add("off-mode_top_b");
newtoolbar_top_button.classList.add("off-mode_top_btn");
}
// Icon
if (new_tb_icon) {
newtoolbar_top_button.classList.add("icon_mode");
}
// Background color
if (new_tb_color) {
newtoolbar_top.classList.add("ntb_bg_color");
}
// Code by Aris => Attach handlers for buttons moved outside #navigator-toolbox
// Based on: https://searchfox.org/firefox-main/source/browser/base/content/navigator-toolbox.js
const customHandlers = {
"unified-extensions-button": (el, e) => gUnifiedExtensions.togglePanel(e),
"fxa-toolbar-menu-button": (el, e) => gSync.toggleAccountPanel(el, e),
"firefox-view-button": (el, e) => FirefoxViewHandler.openToolbarMouseEvent(e),
"downloads-button": (el, e) => DownloadsIndicatorView.onCommand(e),
"pageActionButton": (el, e) => BrowserPageActions.mainButtonClicked(e),
"alltabs-button": (el, e) => gTabsPanel.showAllTabsPanel(e, "alltabs-button"),
"library-button": (el, e) => PanelUI.showSubView("appMenu-libraryView", el, e),
"import-button": (el, e) => MigrationUtils.showMigrationWizard(window, {
entrypoint: MigrationUtils.MIGRATION_ENTRYPOINTS.BOOKMARKS_TOOLBAR,
}),
};
document.getElementById("newtoolbar_top").addEventListener("mousedown", (e) => {
const button = e.target.closest("toolbarbutton");
if (button?.id && customHandlers[button.id]) customHandlers[button.id](button, e);
});
let css =`
#main-window {
--ug-newbar_basewidth: calc(2 * ${new_tb_btn_size} + 16px); /* Minimalgroesse = Groesse Buttons */
--ug-newbar_width: calc(var(--ug-newbar_basewidth) + ${new_tb_border_width} + 2 * `+new_tb_size+`);
}
/*- Buttons -*/
/* Buttons sizes */
#newtoolbar_top {
--toolbarbutton-inner-padding: ${new_tb_btn_size} !important;
--toolbarbutton-outer-padding: 0px !important;
}
/* On/Off Button */
#newtoolbar_top_button .toolbarbutton-icon {
list-style-image: url("${Icon_tb_Fx}");
transform: rotate(-90deg);
}
#newtoolbar_top_button.icon_mode .toolbarbutton-icon {
list-style-image: url("${ImagePath}");
}
#newtoolbar_top_button.off-mode_top_btn:not(:hover, :active) .toolbarbutton-icon {
opacity: 0.4;
}
#unified-extensions-button[hidden] {
visibility: visible !important;
display: flex !important;
}
/*-- Browser adjustments --*/
#browser {
transition: padding-top 0.25s ease !important;
}
#browser:not(.off-mode_top_b) {
padding-top: var(--ug-newbar_width) !important;
}
/*-- Basics --*/
#toolbox_new {
position: fixed;
z-index: 2 !important;
display: flex;
width: fit-content;
top: var(--height_newbar_top);
right: 0px;
}
#newtoolbar_top {
display: flex;
flex-direction: row !important;
align-items: center !important;
overflow: hidden !important;
height: var(--ug-newbar_width) !important;
min-height: var(--ug-newbar_basewidth) !important;
max-height: var(--ug-newbar_width) !important;
/*min-width: 0px !important;*/
width: 100vw !important;
padding-block: 0px;
padding-inline: 8px;
border-width: 0px;
border-style: solid !important;
border-color: ${new_tb_border_color} !important;
border-bottom-width: ${new_tb_border_width};
margin-inline: 0px;
/*justify-content: center !important;*/ /* Inhalt mittig, optional */
}
#toolbox_new #newtoolbar_top:not([customizing]) {
transition: height 0.25s ease, max-height 0.25s ease, min-height 0.25s ease, border-bottom-width 0.125s ease;
}
#toolbox_new.bottom_mode #newtoolbar_top:not([customizing]) > :is(.toolbarbutton-1, toolbaritem),
#toolbox_new.bottom_mode #newtoolbar_top:not([customizing]) toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
margin-block: var(--toolbarbutton-outer-padding) !important;
margin-inline: ${new_tb_distance} !important;
}
#toolbox_new #newtoolbar_top:not([customizing]).off-mode_top {
min-height: 0px !important;
max-height: 0px !important;
border-width: 0px !important;
box-shadow: none !important;
}
#newtoolbar_top:not([customizing]).off-mode_top > :is(.toolbarbutton-1, toolbaritem) {
opacity: 0 !important;
}
#newtoolbar_top > :is(.toolbarbutton-1, toolbaritem),
#newtoolbar_top toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
margin-inline: ${new_tb_distance} !important;
margin-block: var(--toolbarbutton-outer-padding) !important;
transition: opacity 0.125s ease;
}
/*-- Fullscreen --*/
/* Mac / nur Video Fullscreen */
#main-window[inDOMFullscreen]:not([customizing]) #toolbox_new {
visibility: collapse !important;
}
#main-window[inDOMFullscreen]:not([customizing]) #browser {
padding: 0px !important;
}
/* Windows Fullscreen Video + Normal */
@media (-moz-platform: windows) {
#main-window[inFullscreen]:not([customizing]) #toolbox_new {
visibility: collapse !important;
}
#main-window[inFullscreen]:not([customizing]) #browser {
padding: 0px !important;
}
}
/*-- customizing --*/
#newtoolbar_top[customizing] {
transition: none !important;
}
#main-window:not([customizing]) #newtoolbar_top[customizing].off-mode_top {
min-height: 0px !important;
height: 0px !important;
max-height: 0px !important;
border-width: 0px !important;
}
#customization-container {
margin-top: var(--ug-newbar_width) !important;
}
/*- Background oolors themes -*/
/* Custom toolbar background color if enabled */
#newtoolbar_top.ntb_bg_color {
background-color: ${new_tb_bg_color} !important;
}
/*- Background themes, if background images are tiled, try theme_fix options above -*/
:root[lwtheme] #newtoolbar_top:not(.ntb_bg_color) {
background-color: var(--lwt-accent-color, var(--toolbar-bgcolor)) !important;
}
:root[lwtheme][lwtheme-image] #newtoolbar_top:not(.ntb_bg_color) {
background-image: var(--lwt-header-image) !important;
background-position: right 0px top 0px !important;
}
`;
if (theme_fix) {
css += `
/*- Fix #1 for themes with tiled background images -*/
:root[lwtheme][lwtheme-image] #newtoolbar_top:not(.ntb_bg_color) {
background: var(--lwt-header-image) !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: right 0px top 0px !important;
}
:root[lwtheme][lwtheme-image] #toolbox_new.bottom_mode #newtoolbar_top:not(.ntb_bg_color) {
background-size: auto !important;
}
`;
}
if (theme_fix_2) {
css += `
/*- Fix #2 for themes with tiled background images -*/
:root[lwtheme][lwtheme-image] #toolbox_new #newtoolbar_top:not(.ntb_bg_color) {
background: transparent !important;
}
:root[lwtheme][lwtheme-image] #newtoolbar_top:not(.ntb_bg_color)::before {
content: "" ;
position: absolute;
top: 0;
right: 0;
width: var(--height_newbar) !important;
height: var(--ug-newbar_width) !important;
pointer-events: none;
z-index: -1 !important;
background: var(--lwt-header-image) !important;
background-repeat: no-repeat !important;
transform: rotate(-90deg) translateX(var(--ug-newbar_width)) !important;
transform-origin: 100% 100% !important;
transition: margin 0.25s ease;
}
:root[lwtheme][lwtheme-image] #toolbox_new #newtoolbar_top:not(.ntb_bg_color, [customizing])::before {
transform: scaleX(-1) !important;
transform-origin: 50% 50% !important;
width: 100% !important;
}
:root[lwtheme][lwtheme-image] #newtoolbar_top:not(.ntb_bg_color)[customizing]::before {
width: calc(100vh - var(--height_newbar_c)) !important;
}
#newtoolbar_top:not([customizing]).off-mode_top::before {
min-width: 0px !important;
margin-inline: 0px calc(0px - var(--ug-newbar_width));
}
#toolbox_new #newtoolbar_top:not([customizing]).off-mode_top::before {
min-height: 0px !important;
margin-inline: 0px;
margin-block: 0px calc(0px - var(--ug-newbar_width)) !important;
}
`;
}
if (separator_fix) {
css += `
/* Adjustments for Separator Scripts */
#newtoolbar_top toolbarseparator {
width: calc(var(--ug-newbar_width) - ${new_tb_border_width} - 6px) !important;
margin: 5px 0px !important;
border-block-color: hsl(0, 0%, 0%, 0.45) hsl(0, 0%, 100%, 0.55) !important;
transition: width 0.125s ease !important;
}
#newtoolbar_top :is(toolbarspacer, toolbarspring, toolbarseparator) {
min-width: 0px !important;
}
#newtoolbar_top:not([customizing]).off-mode_top toolbarseparator {
width: 0px !important;
}
#toolbox_new #newtoolbar_top toolbarseparator {
transform: rotate(-90deg) !important;
margin: 0px !important;
}
#newtoolbar_top[customizing] toolbarseparator {
margin-inline: 16px !important;
}
`;
}
const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
})();
