Dat kann der Horstmann nicht ändern, nur der Threadersteller
Wenn ich wie vorgeschlagen ab Beitrag 17 abtrenne, dann wärst du das.
Ihr müsst euch also einig werden, ob ich das so machen soll.
Mitleser hat schon recht. 
Könntest du bitte den Threadtitel "Eigene Zusatzleisten ab ff 143+" machen, falls sich das sinnvoll anhört? 
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.
// 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);
})();Dein Skript aus #22 funktioniert hier einwandfrei!
Auch im max. Modus. Wie teste ich den Vollbildmodus?
FF Version 143.0.4 (64-Bit)
AH, jetzt ja!
Vollbildmodus, da verschwinden die abgelegten "Buttons"!
Auch wird sie grau, die Leiste.
AH, jetzt ja!
Vollbildmodus, da verschwinden die abgelegten "Buttons"!
Huh? Nicht am Mac... 
Die Leiste selber ist aber noch sichtbar?
Vollbildmodus ist im Script nur für Fälle wie Youtube Player Vollbildmodus eingetragen (Leiste soll verschwinden); für Firefox Fenster Vollbildmodus sollte eigentlich alles normal sein....
Huh? Nicht am Mac...
Nein Windows 10.
Und Leiste ist vorhanden, aber eben grau und abgelegte Buttons sind auch nicht mehr zusehen.
Das mit dem Player muss ich dann noch testen.
Test abgeschlossen, Youtube Player im Vollbildmodus ohne störende Elemente.
Zum Skript, es ist bei einem Neustart des FF sichtbar, immer.
Wäre es nicht schön,
1. es würde sich den letzten Zustand merken
und/oder 2. man könnte eine Zeit definieren und die Leise würde wieder weg scrollen.
Alles anzeigenHuh? Nicht am Mac...
Nein Windows 10.
Und Leiste ist vorhanden, aber eben grau und abgelegte Buttons sind auch nicht mehr zusehen.Das mit dem Player muss ich dann noch testen.
Test abgeschlossen, Youtube Player im Vollbildmodus ohne störende Elemente.
Zum Skript, es ist bei einem Neustart des FF sichtbar, immer.
Wäre es nicht schön,
1. es würde sich den letzten Zustand merken
und/oder 2. man könnte eine Zeit definieren und die Leise würde wieder weg scrollen.
Danke für's testen!
Das Graue ist nicht die Leiste, sondern die erzeugte Browserlücke wo die Leiste sein sollte.
Sind denn bei dir alle anderen Toolbars sichtbar in deinem Firefox-Vollbild, Tabs, Adressleiste, und Lesezeichen?
Ist Titelleiste ein oder ausgeblendet?
Es wäre prima dazu einen Screenshot zu sehen!
Könnte OS abhängig sein (bin auf Mac).
Den Anfangszustand kann man im Script wählen, für Position und On/Off; weiss was du meinst, ist aber etwas kompliziert, haben andere Extraleisten glaub auch nicht.
Wegscrollen könnte man einbauen, aber erstmal muss das Ding überhaupt laufen.
Dann mal weiter im Text; ein neuer Test.
v143.0.4. Ich habe es durch Starten in der Konsole überprüft.
1* Die Toolbar funktioniert einwandfrei.
2* Der Name des Skripts sollte jedoch vertical_toolbar lauten und nicht extra_toolbar, da es so von mehr Benutzern über die Suche gefunden werden kann. Es gibt viele funktionierende horizontale Panels, aber fast keine vertikalen.
3* Und der Titel des Themas ist unglücklich gewählt.
4* Beide Varianten des Toggle Button Icons funktionieren einwandfrei, es gibt keine Fehler bei der Anzeige des Icons.
5* Die Toolbar passt sich perfekt an die Höhe des Fensters an, wenn die Anzeige der Bookmark bar und der oberen horizontalen Toolbar, die von einem anderen Skript erstellt wird, deaktiviert ist.
6* Auf der Toolbar werden Separators und Spaces, die von einem anderen Skript erstellt wurden, nicht angezeigt (bei Aris-t2 wurden sie angezeigt).
7* Ein weiterer Pluspunkt für mich ist, dass das Entfernen der Blöcke „Bottom” und „Full Screen” aus dem Code die Funktionalität nicht beeinträchtigt (ich mag keine überflüssigen Extras).
8* Wunderbare Arbeit! 
Ist evtl. besser einfach auf ein Update von Aris zu warten.
Dafür gibt es fast keine Hoffnung.
Für mich selbst habe ich in den Block /* Button Icon */ folgende Regel hinzugefügt
#NewToolbar_button {
transform: rotateY(180deg); /* this line only for left Toolbar */
fill: #16C50C !important; /* color of the icon */
}Dann mal weiter im Text; ein neuer Test.
v143.0.4. Ich habe es durch Starten in der Konsole überprüft.
Mal wieder top Rückmeldung, Danke!
Kurze Frage vorab: welches Betriebssystem benutzt du, und hast du beide der erwähnten Modi ausprobiert?
Bei mir am Mac kann ich weder Windows noch Linux testen, und Vollbild ist OS abhängig.
Vollbildmodus ist im Script nur für Fälle wie Youtube Player Vollbildmodus eingetragen (Leiste soll verschwinden).
Für Firefox Fenster Vollbildmodus (Menü > Ansicht > Vollbild ein, oder schräger Doppelpfeil Button) sollte die Leiste angezeigt werden, wenn andere Toolbars auch angezeigt sind ....
und Vollbild ist OS abhängig.
Unter Win11 mal getestet.
Vollbild (alle Leisten ausgeblendet): 
.....und normale Ansicht: 
Kurze Frage vorab:
1* Win10 und Win11, v143.0.4 und v140.3.1esr, Verhalten identisch.
2* Anzeige der Symbole Typ 1 und Typ 2, Anzeige der Leiste links und rechts – alles in Ordnung, keine Beanstandungen;
3* Vollbildmodus des Firefox-Fensters – Die Symbolleiste wird angezeigt, aber die Symbole darauf werden nicht angezeigt;
4* Vollbildmodus von YouTube – Die Symbolleiste wird ausgeblendet.
Es ging Horstmann um den Youtube Player im Vollbildmodus,
und da ist der graue Balken nicht vorhanden.
Also so wie es sein soll.
Der graue Balken soll nie zu sehen sein ohne den Leisteninhalt, das ist ein Bug.
Wenn alle anderen Leisten sichtbar sind, soll diese neue Leiste auch da sein, ansonsten komplett verschwinden.
Ich schau nochmal nach; könnte jemand auf Windows/Linux mal das in den CSS Teil packen, und Vollbildmoden testen, bevor ich einen neuen Komplettcode poste?
#main-window:is([chromehidden~="toolbar"]) #toolbox_new {
display: none !important;
}
#main-window:is([chromehidden~="toolbar"]) #browser {
padding: 0 !important;
}Oder:
:root:not([customizing]):is([chromehidden~="toolbar"],[sizemode="fullscreen"]) #toolbox_new,
#main-window:is([chromehidden~="toolbar"],[sizemode="fullscreen"]) #toolbox_new {
display: none !important;
}
:root:not([customizing]):is([chromehidden~="toolbar"],[sizemode="fullscreen"]) #toolbox_new,
#main-window:is([chromehidden~="toolbar"],[sizemode="fullscreen"]) #toolbox_new {
padding: 0 !important;
}könnte jemand auf Windows
Unter Nightly, der erste Eintrag bringt die Leiste an den unteren Rand, der zweite ohne Veränderung (Balken bleibt).
Nachtrag: Unterer Rand passierte, weil in dem Code die letzte Klammer fehlt, Balken bleibt auch hier.
Ich schau nochmal nach; könnte jemand auf Windows/Linux mal das in den CSS Teil packen, und Vollbildmoden testen, bevor ich einen neuen Komplettcode poste?
Mit dem ersten CSS wechselt die Toolbar in den Bottom Mode und wird nicht ausgeblendet. Mit dem zweiten CSS verhält es sich wie ohne dieses CSS.
Nur zur Info:
v140.3.1esr nur unter Windows 11, Toolbar links positioniert. Die Toolbar wird nicht vollständig ausgeblendet; ein 4–6 Pixel breiter Streifen bleibt sichtbar.
Erstmal danke an alle Tester!
Hier eine neue Testversion:
Für lenny2 einen Zusatz für das Aris Script , wenn es das denn ist.
Auf alle Wünsche kann ich nicht direkt eingehen, ist aber alles notiert.
Für die Vollbildgeschichte habe ich mal etwas reingebastelt, das evtl. als Basis funktioniert für Windows.
Fullscreen ist aber sehr OS abhängig, und ich bin am Mac.
Falls das so nicht funktioniert, müsste sich das ein geneigter Windows und evtl. Linux Coder der Sache annehmen.
Eine Menge JS und CSS Codes benutzen Provisorien für genau das, nur kann ich die halt nicht testen.
// Use filename starting with 00 !! =>
// 00_extra_toolbars_V4.uc.js
// Extra newtoolbars 8 => 10 / Toggle button on/off / Custom/browser height used / 143 kompatibel
// Fullscreen Testphase
// 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 4
(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 = 0; // 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 = off
//let new_tb_button_size = '0px'; // Button Groesse, normal 'inherit', kleiner '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);
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'],
});
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: 30px;
--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 */
}
/* Buttons kleiner */
#newtoolbar {
/*--toolbarbutton-inner-padding: 6px !important;*/
--toolbarbutton-outer-padding: 0px !important;
}
/* Anpassung fuer Restore 'Space & Separator' items script for Firefox 102+ by Aris */
#newtoolbar {
--ug-sep_distance: 2px; /* Distanz */
--ug-sep_width: 4px; /* schmaler */
}
#newtoolbar toolbarseparator {
margin-block: var(--ug-sep_distance) !important;
margin-inline: 0px !important;
width: calc(var(--ug-newbar_width) - var(--ug-sep_width)) !important;
}
.bottom_mode #newtoolbar:not([customizing]) toolbarseparator {
margin-block: 0px !important;
margin-inline: var(--ug-sep_distance) !important;
width: initial !important;
height: calc(var(--ug-newbar_width) - var(--ug-sep_width)) !important;
}
#newtoolbar toolbarspacer {
min-width: 0px !important;
width: 18px !important;
height: 18px !important;
}
#newtoolbar[customizing] :is(toolbarseparator, toolbarspacer) {
margin-block: 8px !important;
}
/* 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 {
min-width: 0px !important;
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 {
min-height: 0px !important;
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 */
#main-window[inDOMFullscreen]:not([customizing]) #toolbox_new {
visibility: collapse !important;
}
#main-window[inDOMFullscreen]:not([customizing]) #browser {
padding: 0 !important;
}
/* Windows Test */
@media (-moz-platform: windows) {
#main-window[inFullscreen]:not([customizing]) #toolbox_new {
visibility: collapse !important;
}
#main-window[inFullscreen]:not([customizing]) #browser {
padding: 0 !important;
}
}
/*-- customizing --*/
:root[customizing] #toolbox_new {
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);
})();Mit dem ersten CSS wechselt die Toolbar in den Bottom Mode und wird nicht ausgeblendet. Mit dem zweiten CSS verhält es sich wie ohne dieses CSS.
Nur zur Info:
v140.3.1esr nur unter Windows 11, Toolbar links positioniert. Die Toolbar wird nicht vollständig ausgeblendet; ein 4–6 Pixel breiter Streifen bleibt sichtbar.
Danke; FuchsFan hatte auf den Fehler im Code hingewiesen, korrigiert.
Der Screenshot ist sehr stark angeschnitten, kann ich leider nicht nachvollziehen.
Evtl. mal den gerade geposteten Code testen.
Evtl. mal den gerade geposteten Code testen
Gemacht, keine Probleme mehr erkannt, Leiste wird bei Vollbild ausgeblendet.
Für lenny2 einen Zusatz für das Aris Script , wenn es das denn ist.
In V4 werden jetzt Space aus diesem oder einem ähnlichen Skript angezeigt, Separator jedoch nicht.
Insgesamt gibt es keine Probleme mit dem V4 und es funktioniert ordnungsgemäß
Der Screenshot ist sehr stark angeschnitten, kann ich leider nicht nachvollziehen.
Nicht mehr relevant, dieser Grafikfehler ist in V4 nicht mehr vorhanden.
Mal reingegrätscht: Hier wird derzeit nur eine vertikale Zusatzleiste besprochen, die ich nicht nutzen möchte; Ich präferiere in Nightly und 143.0.4 eine horizontale Zusatzleiste UNTEN.
Wenn jemand daran interessiert ist, bitte mal melden, dann würde ich den verwendeten Code einstellen.
