Dann mal weiter im Text; ein neuer Test.
Das Vollbildverhalten ist nur am Mac angestestet.
Das ist kein fertiges Script; nur ein Versuch, einige der in den letzten Wochen/Monaten erwähnten Probleme mit Zusatzleisten neu anzugehen.
Ist evtl. besser einfach auf ein Update von Aris zu warten. 
JavaScript
// Use filename starting with 00 !! =>
// 00_extra_toolbars_V3.uc.js
// Extra newtoolbars 8 => 10 / Toggle button on/off / Custom/browser height used / 143 kompatibel?
// Basiert auf: https://www.camp-firefox.de/forum/thema/137714-seitennavigation-fly-out-menue
// Aris: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/addonbar_vertical.uc.js
// ACHTUNG: Einige Systembuttons lassen sich in zusaetzliche/eigene Tb's zwar noch verschieben, haben aber KEINE Funktion.
// Dazu gibt es einen Patch von @BrokenHeart: https://www.camp-firefox.de/forum/thema/138875-fix-toolbar-buttons-reagieren-nicht-mehr-ab-ff-134/
// Kudos an Mitleser für Vorarbeit, Loesungen und Tips
// Nach Script Aenderungen Neustart mit Start-Cache loeschen => about:support
// Test 3
(function() {
if (location.href !== 'chrome://browser/content/browser.xhtml')
return;
// User Einstellungen
// Eigenes Icon in Profilordner/chrome/icons
let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
let IconPath = '/chrome/icons/';
let Icon_tb = 'flower-satt32.png';
let ImagePath = ProfilePath + IconPath + Icon_tb;
let new_tb_icon = 1; // 0 Firefox Icon, 1 Eigenes Icon
let new_tb_loc = 0; // Position Startzustand: 0 Rechts , 1 Links , 2 Bottom
let new_tb_off = 0; // 0 Startzustand On , 1 Startzustand Off
let new_tb_color = 1; // Hintergrundfarbe aendern: 0 Off , 1 On
let new_tb_bg_color = 'lightblue'; // Hintergrundfarbe bei On
let new_tb_distance = '2px'; // Abstand zw. Buttons, muss px Wert sein, auch bei 0px
let new_tb_size = '0px'; // Breite / Hoehe Leiste erhoehen, muss px Wert sein, auch bei 0px
let new_tb_border_color = 'grey'; // Trennlinien Farbe
let new_tb_border_width = '1px'; // Trennlinien Breite, muss px Wert sein, auch bei 0px
// User Einstellungen Ende
if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
}
let toolbox_new = document.createXULElement('toolbox');
toolbox_new.setAttribute('id','toolbox_new');
let ntb = document.createXULElement('toolbar');
ntb.id = 'newtoolbar';
ntb.setAttribute('customizable', true);
ntb.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
ntb.setAttribute('mode', 'icons');
ntb.setAttribute('context', 'toolbar-context-menu');
toolbox_new.appendChild(ntb);
document.getElementById('browser').parentNode.appendChild(toolbox_new);
// Test JS
// Alt, nicht 143 kompatibel
// let observer_custom = new MutationObserver(function(mutations) {
// mutations.forEach(function(mutation) {
// try {
// if(document.querySelector('#browser').getAttribute('hidden') || document.querySelector('#main-window').getAttribute('customizing')) {
// let custom_exists = document.getElementById('customization-container');
// let rect = custom_exists.getBoundingClientRect();
// document.getElementById('toolbox_new').style.setProperty('--height_newbar_c', rect.height + 'px');
// }
// } catch(e){}
// });
// });
//observer_custom.observe(document.querySelector('#main-window'), { attributes: true, attributeFilter: ['customizing'] });
//observer_custom.observe(document.querySelector('#main-window'), { attributeFilter: ['customizing'] });
// Neu, 143 kompatibel ?
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.height + 'px');
} catch (e) {
console.error("Fehler beim Setzen von --height_newbar_c:", e);
}
}
});
observer_custom.observe(document.querySelector('#main-window'), {
attributes: true,
attributeFilter: ['customizing'],
});
// Test JS Ende
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);
CustomizableUI.registerArea('newtoolbar', {legacy: true});
CustomizableUI.registerToolbarNode(ntb);
//On/off button
try {
CustomizableUI.createWidget({
id: 'NewToolbar_button',
type: 'custom',
defaultArea: CustomizableUI.AREA_NAVBAR,
onBuild: function(aDocument) {
let toolbaritem = aDocument.createXULElement('toolbarbutton');
let props = {
id: 'NewToolbar_button',
class: 'toolbarbutton-1 chromeclass-toolbar-additional',
removable: true,
label: 'Toggle New Toolbar',
tooltiptext: 'Toggle New toolbar',
};
for(let p in props)
toolbaritem.setAttribute(p, props[p]);
return toolbaritem;
}
});
} catch(e) { };
// button function
document.getElementById('NewToolbar_button').addEventListener('click', event => {
if (event.button === 0) {
newtoolbar.classList.toggle("off-mode");
browser.classList.toggle("off-mode_b");
}
});
// Icon
if (new_tb_icon === 1) {
NewToolbar_button.classList.add("icon_mode");
};
// Hintergrundfarbe
if (new_tb_color === 1) {
newtoolbar.style.backgroundColor = new_tb_bg_color;
};
// Positions Startzustand
if (new_tb_loc === 1) {
toolbox_new.classList.add("left_mode");
browser.classList.add("left_mode_b");
}
else if (new_tb_loc === 2) {
toolbox_new.classList.add("bottom_mode");
browser.classList.add("bottom_mode_b");
};
// On/off Startzustand
if (new_tb_off === 1) {
newtoolbar.classList.add("off-mode");
browser.classList.add("off-mode_b");
};
const css =`
:root {
--ug-newbar_basewidth: 36px;
--ug-newbar_width: calc(var(--ug-newbar_basewidth) + 2*var(--ug-newbar_add_width));
--ug-newbar_borderwidth: ${new_tb_border_width}; /* Breite / Hoehe Trennlinie */
--ug-newbar_add_width: ${new_tb_size}; /* Breite / Hoehe erhoehen */
--ug-newbar_btnspace: ${new_tb_distance}; /* Abstand zw. Buttons */
}
/* Trennlinie */
#newtoolbar {
--trenn-color: ${new_tb_border_color};
}
/* Button Icon */
#NewToolbar_button .toolbarbutton-icon {
list-style-image: url("chrome://browser/skin/sidebars-right.svg");
}
#NewToolbar_button.icon_mode .toolbarbutton-icon {
list-style-image: url("${ImagePath}");
}
/*-- Basis / Right --*/
#browser {
transition: padding 0.25s ease !important;
}
#browser:not(.off-mode_b) {
padding-right: calc(var(--ug-newbar_width) + var(--ug-newbar_borderwidth)) !important;
}
#toolbox_new {
position: fixed;
z-index: 4 !important;
display: flex;
width: fit-content;
top: var(--height_newbar_top);
right: 0;
}
#newtoolbar {
display: flex;
flex-direction: column;
min-width: fit-content !important;
width: var(--ug-newbar_width);
min-height: fit-content !important;
height: var(--height_newbar) !important;
padding-block: 8px;
box-shadow: calc(0px - var(--ug-newbar_borderwidth)) 0 var(--trenn-color);
transition: width 0.25s ease, margin 0.25s ease /*,height 0.5s ease*/ ;
align-items: center !important;
}
#newtoolbar:not([customizing]).off-mode {
margin-inline: 0 calc(0px - var(--ug-newbar_width));
box-shadow: none !important;
}
#newtoolbar > :is(.toolbarbutton-1, toolbaritem),
#newtoolbar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
margin-block: var(--ug-newbar_btnspace) !important;
}
/*-- Left --*/
#browser:not(.off-mode_b).left_mode_b {
padding-inline: calc(var(--ug-newbar_width) + var(--ug-newbar_borderwidth)) 0 !important;
}
#toolbox_new.left_mode {
left: 0;
}
.left_mode #newtoolbar:not([customizing]) {
box-shadow: var(--ug-newbar_borderwidth) 0 var(--trenn-color);
}
.left_mode #newtoolbar:not([customizing]).off-mode {
margin-inline: calc(0px - var(--ug-newbar_width)) 0;
}
/*-- Bottom --*/
#browser:not(.off-mode_b).bottom_mode_b {
padding-inline: 0 !important;
padding-bottom: calc(var(--ug-newbar_width) + var(--ug-newbar_borderwidth)) !important;
}
#toolbox_new.bottom_mode {
top: unset;
bottom: 0;
flex-direction: row;
width: fit-content;
}
.bottom_mode #newtoolbar:not([customizing]) {
flex-direction: row !important;
height: var(--ug-newbar_width) !important;
width: 100vw;
padding-block: 0;
padding-inline: 8px;
box-shadow: 0 calc(0px - var(--ug-newbar_borderwidth)) var(--trenn-color);
border: none;
}
.bottom_mode #newtoolbar:not([customizing]).off-mode {
margin-inline: 0;
margin-block: 0 calc(0px - var(--ug-newbar_width)) !important;
}
#toolbox_new.bottom_mode #newtoolbar > :is(.toolbarbutton-1, toolbaritem),
#toolbox_new.bottom_mode #newtoolbar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
margin-block: var(--toolbarbutton-outer-padding) !important;
margin-inline: var(--ug-newbar_btnspace) !important;
}
/*-- Fullscreen Test Mac --*/
:root[inDOMFullscreen] #toolbox_new {
display: none !important;
}
:root[inDOMFullscreen] #browser {
padding: 0 !important;
}
/*-- customizing --*/
:root[customizing] #toolbox_new {
bottom: 0 !important;
top: unset !important;
right: 0 !important;
left: unset !important;
}
#newtoolbar[customizing] {
height: var(--height_newbar_c) !important;
}
#customization-container {
margin-right: var(--ug-newbar_width) !important;
}
/*-- Testfarben --*/
#newtoolbar {
border-block: 8px solid orange;
}
/*
#newtoolbar > :is(.toolbarbutton-1, toolbaritem),
#newtoolbar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
outline: 1px solid red;
outline-offset: -1px;
}
*/
`;
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);
})();
