Die Anpassung gibt es schon, in Zeile 57.
Ah, danke. Ich habe es nicht richtig hinbekommen, weil ich in Zeile 57 eine doppelte Zahl (35, 36) eingefügt habe. Also habe ich Folgendes gemacht:
let new_tb_size = '0px';const css =`
:root {
--ug-newbar_basewidth: 35px;
// --ug-newbar_basewidth: calc(2 * var(--toolbarbutton-inner-padding) + 16px);Deine Zeile 236 beinhaltet einen Syntax-Fehler, es gibt kein // in CSS.
Ah, danke. Ich habe es nicht richtig hinbekommen, weil ich in Zeile 57 eine doppelte Zahl (35, 36) eingefügt habe. Also habe ich Folgendes gemacht:
Codelet new_tb_size = '0px';Codeconst css =` :root { --ug-newbar_basewidth: 35px; // --ug-newbar_basewidth: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
Da wo // User Einstellungen Ende steht, sollte man aufhören im normalen Gebrauch. 
Also würde ich den Code flott rausnehmen, siehe auch Sören's Kommentar.
Die Leiste hat gerade Zahlen als Breite(Höhe bei bottom), um die Buttons zentriert zu halten, plus Trennlinie aussen.
Die Konkurrenz schläft nicht. 
Ganz nett, aber schlaffes Design.
Ist vermutlich viel besser; habe hier nur etwas Probleme mit eigenen Buttons - sogar auch ausserhalb der Leiste - die manchmal keine Funktion haben, auch nach Umbenennung des Scripts mit 000 am Anfang. 
Die Konkurrenz schläft nicht.
Die Aktivierung gelang mir nur einmal und mit Mühe. Danach waren mehrere Aktivierungsversuche erfolglos. Es gibt grafische Mängel bei der Hintergrundfarbe und die Trennlinien werden nicht korrekt angezeigt.
Ich habe mich für V7R2 entschieden. Bedeutet die 00 am Anfang des Namens übrigens, dass das Skript zuerst geladen wird?
Die Konkurrenz schläft nicht.
Die Aktivierung gelang mir nur einmal und mit Mühe. Danach waren mehrere Aktivierungsversuche erfolglos. Es gibt grafische Mängel bei der Hintergrundfarbe und die Trennlinien werden nicht korrekt angezeigt.
Ich habe mich für V7R2 entschieden. Bedeutet die 00 am Anfang des Namens übrigens, dass das Skript zuerst geladen wird?
Diese Probleme, traten die mit der neuen Aris Version auf, oder mit meiner V8 aus #73?
00 am Anfang des Namens lädt tatsächlich das Script früh, vor allem um die Funktion von Inhalten wie eigenen Buttons zu gewährleisten.
Diese Probleme, traten die mit der neuen Aris Version
Ja, mit der neuen Version von Aris
Ja
Danke; gut zu wissen. 
Evtl. die finale Version, ausser es gibt grobe Fehler, bevor jeder zu Aris wechselt.
Bitte die Kommentare in der User Einstellungen Sektion vor Änderungen lesen; zwei mögliche Lösungen für störrische Themes können optional benutzt werden, und für Lenny hätten wir noch eine Space & Separator Script Lösung #102 (gefühlt).
Dieses Script wurde auch gerade erneuert, immer noch buggy...
Einige weitere Optionen sind hinzugefügt, speziell für Abmessungen; eine Autovariante hätte ich auch dafür, aber so schwer ist es nicht das manuell zu regeln.
Sowas könnte Sinn machen noch mit rein zu packen, aber dazu braucht es Feedback.
Version 9:
// Zusaetzliche Toolbars wahlweise rechts, links, unten
// Use filename starting with 00 !! =>
// 00_extra_toolbars_V9.uc.js
// Basiert auf: https://www.camp-firefox.de/forum/thema/137714-seitennavigation-fly-out-menue
// Und Aris: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/addonbar_vertical.uc.js
// Forumthema: https://www.camp-firefox.de/forum/thema/139927-eigene-zusatzleisten-ab-ff-143/
// 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/
// Version V9 / Release 4
(function() {
if (location.href !== 'chrome://browser/content/browser.xhtml')
return;
// User Einstellungen
// Nach Script Aenderungen Neustart mit Start-Cache loeschen => about:support
// Moegliche Problemloesungen (s. unten) muessen wo noetig manuell an/ausgeschaltet werden
// Eigenes Icon, in Profilordner/chrome/icons Ordner
let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
let IconPath = '/chrome/icons/';
let Icon_tb = 'toolbar_n3.svg';
let ImagePath = ProfilePath + IconPath + Icon_tb;
// 0 Firefox Icon, 1 eigenes Icon benutzen
let new_tb_icon = 0;
// Position Startzustand: 0 Rechts, 1 Links, 2 Bottom
let new_tb_loc = 0;
// 0 letzter Zustand Leiste On/Off beim Beenden merken, 1 nicht merken
// 2x Neustart noetig, nur beim ersten Neuspeichern dieser Einstellung
let new_tb_save = 0;
// 0 Startzustand Leiste On, 1 Startzustand Off, bei new_tb_save = 1
let new_tb_off = 0;
// 0 Button schaltet Leiste fuer alle Fenster, 1 nur aktives Fenster
let new_tb_uno = 0;
// Eigene Hintergrundfarbe: 0 Off, 1 On
let new_tb_color = 0;
// Hintergrundfarbe bei On
let new_tb_bg_color = 'lightblue';
// Trennlinie Breite, 0px = off
let new_tb_border_width = '1px';
// Trennlinie Farbe
//let new_tb_border_color = 'grey';
let new_tb_border_color = 'color-mix(in srgb, currentColor 30%, transparent)';
// Groessen von Leiste und Buttons aendern, muss px Wert sein, auch bei 0px, manuell
// Groesse Buttons via padding aendern, 8px Standard, Abstand geringer, Leistengroesse wird mit angepasst!
let new_tb_btn_size = '6px';
// Abstand zwischen Buttons, 2px Standard
let new_tb_distance = '5px';
// Breite vertikale Leiste / Hoehe horizontale Leiste um diesen Wert erhoehen, bei 0px => Leistengroesse = Buttongroesse
let new_tb_size = '1px';
// Moegliche Problemloesungen, nur falls noetig, experimentell
// Fix #1 fuer Themes mit zu niedrigen/ gekachelten Hintergrund Bildern, true / false, besser nur eines benutzen
let theme_fix = false;
// Fix #2, ueberschreibt Fix #1
let theme_fix_2 = false;
// Anpassung fuer Restore 'Space & Separator' items script for Firefox 102+ by Aris, true / false
// Benutzung nicht empfohlen, Bugs, und toolbarspring fehlplaziert
// Tip: Separator, Space etc. im Anpassenfenster nur mit Rechtsklick aus Leiste entfernen
let separator_fix = true;
// User Einstellungen Ende
if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
}
const pref_newtoolbar_state = "userchrome.newtoolbar.enabled";
let toolbox_new = document.createXULElement('toolbox');
toolbox_new.setAttribute('id','toolbox_new');
toolbox_new.setAttribute('orient','horizontal');
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');
ntb.setAttribute('toolbarname', 'Addon Bars');
ntb.setAttribute('label', 'Addon Bars');
ntb.setAttribute('orient', 'vertical');
ntb.setAttribute("accesskey","");
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) { }
}
});
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 Funktion
if (new_tb_uno === 0) {
document.getElementById('NewToolbar_button').addEventListener('click', tb_toggle );
}
else if (new_tb_uno === 1) {
document.getElementById('NewToolbar_button').addEventListener('click', tb_toggle_uno );
}
function tb_toggle() {
let windows = Services.wm.getEnumerator(null);
while (windows.hasMoreElements()) {
let win = windows.getNext();
if (event.button === 0) {
const toolbar = win.document.getElementById("newtoolbar");
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_newtoolbar_state, ntb_visible);
}
}
};
function tb_toggle_uno() {
if (event.button === 0) {
const toolbar = document.getElementById("newtoolbar");
const browserArea = document.getElementById("browser");
const button = 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_newtoolbar_state, ntb_visible);
}
};
// Position Startzustand
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");
}
let toolbarEnabled = true;
try {
toolbarEnabled = Services.prefs.getBoolPref(pref_newtoolbar_state);
} catch(e) {
Services.prefs.setBoolPref(pref_newtoolbar_state, new_tb_off === 0); // Initialwert setzen
toolbarEnabled = new_tb_off === 0;
}
if (!toolbarEnabled) {
newtoolbar.classList.add("off-mode");
browser.classList.add("off-mode_b");
NewToolbar_button.classList.add("off-mode_btn");
}
// #1 Beim Beenden von Firefox: Prefs loeschen, falls new_tb_save === 1
if (new_tb_save === 1) {
Services.obs.addObserver(function observer(subject, topic, data) {
if (topic === "quit-application-granted") {
try {
Services.prefs.clearUserPref(pref_newtoolbar_state);
} catch (e) { }
Services.obs.removeObserver(observer, "quit-application-granted");
}
}, "quit-application-granted");
}
// Icon
if (new_tb_icon === 1) {
NewToolbar_button.classList.add("icon_mode");
}
// Hintergrundfarbe
if (new_tb_color === 1) {
newtoolbar.classList.add("ntb_bg_color");
}
const css =`
:root {
--ug-newbar_basewidth: calc(2 * var(--ug-newbar-button_inner_padding) + 16px);
--ug-newbar_width: calc(var(--ug-newbar_basewidth) + var(--ug-newbar_borderwidth) + 2 * var(--ug-newbar_add_width));
--ug-newbar-button_inner_padding: ${new_tb_btn_size}; /* Groesse Buttons */
--ug-newbar_add_width: `+new_tb_size+`; /* Breite / Hoehe erhoehen */
--ug-newbar_btnspace: ${new_tb_distance}; /* Abstand zw. Buttons */
--ug-newbar_borderwidth: ${new_tb_border_width}; /* Breite / Hoehe Trennlinie */
}
/*- Buttons Groesse -*/
#newtoolbar {
--toolbarbutton-inner-padding: var(--ug-newbar-button_inner_padding) !important;
--toolbarbutton-outer-padding: 0px !important;
}
/*- Button -*/
#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}");
}
#NewToolbar_button.off-mode_btn:not(:hover, :active) .toolbarbutton-icon {
opacity: 0.4;
}
#NewToolbar_button.left_mode_btn .toolbarbutton-icon {
transform: rotate(180deg);
}
#NewToolbar_button.bottom_mode_btn .toolbarbutton-icon {
transform: rotate(90deg);
}
/*-- Basis / Right --*/
#browser {
transition: padding 0.25s ease !important;
}
#browser:not(.off-mode_b) {
padding-right: var(--ug-newbar_width) !important;
}
#toolbox_new {
position: fixed;
z-index: 4 !important;
display: flex;
width: fit-content;
top: var(--height_newbar_top);
right: 0;
}
#newtoolbar {
display: flex;
min-width: var(--ug-newbar_basewidth) !important;
width: var(--ug-newbar_width);
min-height: var(--ug-newbar_basewidth) !important;
height: var(--height_newbar) !important;
align-items: center !important;
padding-block: 8px;
border: 0 solid ${new_tb_border_color};
border-inline-width: var(--ug-newbar_borderwidth) 0;
transition: width 0.25s ease, margin 0.25s ease /*,height 0.5s ease*/ ;
box-shadow: none !important;
}
#newtoolbar:not([customizing]).off-mode {
min-width: 0px !important;
margin-inline: 0 calc(0px - var(--ug-newbar_width));
}
#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: var(--ug-newbar_width) 0 !important;
}
#toolbox_new.left_mode {
left: 0;
}
.left_mode #newtoolbar:not([customizing]) {
border-left: none;
border-inline-width: 0 var(--ug-newbar_borderwidth);
}
.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: var(--ug-newbar_width) !important;
}
#toolbox_new.bottom_mode {
top: unset;
bottom: 0;
}
.bottom_mode #newtoolbar:not([customizing]) {
flex-direction: row !important;
height: var(--ug-newbar_width) !important;
width: 100vw;
padding-block: 0;
padding-inline: 8px;
border-inline-width: 0;
border-top-width: var(--ug-newbar_borderwidth);
/*justify-content: center !important;*/ /* Inhalt mittig, optional */
}
.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 --*/
/* Mac / nur Video Fullscreen */
#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 --*/
:root[customizing] #toolbox_new {
top: unset !important;
bottom: 0 !important;
right: 0 !important;
left: unset !important;
}
#newtoolbar[customizing] {
height: var(--height_newbar_c) !important;
}
#customization-container {
margin-right: var(--ug-newbar_width) !important;
}
/*- Farben Themes -*/
/* Eigene HG Farbe falls eingeschaltet */
#newtoolbar.ntb_bg_color {
background-color: ${new_tb_bg_color} !important;
}
/*- Farben Themes, falls Hintergrundbilder gekachelt, oben theme_fix versuchen -*/
:root[lwtheme] #newtoolbar:not(.ntb_bg_color) {
background-color: var(--lwt-accent-color, var(--toolbar-bgcolor)) !important;
}
:root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color) {
background-image: var(--lwt-header-image) !important;
background-position: right 0px top 0px !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;
}
*/
`;
let theme_fix_code = '';
if (theme_fix) {
theme_fix_code = `
/*- Fix #1 Hintergrundbilder fuer Themes mit gekachelten Bildern, falls eingeschaltet -*/
:root[lwtheme][lwtheme-image] #newtoolbar: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:not(.ntb_bg_color) {
background-size: auto !important;
}
`;
}
let theme_fix_code_2 = '';
if (theme_fix_2) {
theme_fix_code_2 = `
/*- Fix #2 Hintergrundbilder fuer Themes mit gekachelten Bildern, falls eingeschaltet -*/
:root[lwtheme][lwtheme-image] #toolbox_new #newtoolbar:not(.ntb_bg_color) {
background: transparent !important;
}
:root[lwtheme][lwtheme-image] #newtoolbar: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;
/*background-position: left 0px top 100% !important;*/
transform: rotate(-90deg) translateX(var(--ug-newbar_width)) !important;
transform-origin: 100% 100% !important;
}
:root[lwtheme][lwtheme-image] #toolbox_new.bottom_mode #newtoolbar:not(.ntb_bg_color)::before {
transform: scaleX(-1) !important;
transform-origin: 50% 50% !important;
width: 100% !important;
}
`;
}
let separator_fix_code = '';
if (separator_fix) {
separator_fix_code = `
/* Anpassung fuer Separator Scripts, falls eingeschaltet */
#newtoolbar toolbarseparator {
margin: 6px 0 !important;
width: calc(var(--ug-newbar_width) - var(--ug-newbar_borderwidth) - 6px) !important;
max-width: var(--ug-newbar_width) !important;
border-block-color: hsl(0, 0%, 0%, 0.55) hsl(0, 0%, 100%, 0.55) !important;
/*background-color: color-mix(in srgb, currentColor 70%, transparent) !important;
border: none !important;*/
}
#newtoolbar :is(toolbarspacer, toolbarspring, toolbarseparator) {
min-width: 1px !important;
}
.bottom_mode #newtoolbar:not([customizing]) toolbarseparator {
transform: rotate(-90deg) !important;
}
#newtoolbar[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));
const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(''+ css + theme_fix_code + theme_fix_code_2 + separator_fix_code));
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
})();Nur als Hinweis, stelle ich in Zeile 72 auf true, so bleibt beim Ausblenden die Leiste wieder sichtbar (Thema hatten wir schon).
Nur als Hinweis, stelle ich in Zeile 72 auf true, so bleibt beim Ausblenden die Leiste wieder sichtbar (Thema hatten wir schon).
Vielen Dank, gut beobachtet!
Fix für theme_fix_2 ist unterwegs!
Version 10/ Fix:
Bitte den Header und die Kommentare in der User Einstellungen Sektion vor Änderungen lesen; zwei mögliche Lösungen für störrische Themes können optional benutzt werden, und für Lenny hätten wir noch eine Space & Separator Script Lösung #102 (gefühlt).
Dieses Script wurde auch gerade erneuert.
Einige weitere Optionen sind hinzugefügt, speziell für Abmessungen; eine Autovariante hätte ich auch dafür, aber so schwer ist es nicht das manuell zu regeln.
Sowas könnte Sinn machen noch mit rein zu packen, aber dazu braucht es Feedback.
// Zusaetzliche Toolbars wahlweise rechts, links, unten
// Use filename starting with 00 for custom button functions !! =>
// 00_extra_toolbars_V10.uc.js
// 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
// Forumthema: https://www.camp-firefox.de/forum/thema/139927-eigene-zusatzleisten-ab-ff-143/
// Kudos an Aris und Mitleser fuer Vorarbeit, Loesungen und Tips
// 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/
// Version V10 / Release 5
(function() {
if (location.href !== 'chrome://browser/content/browser.xhtml')
return;
// User Einstellungen
// Nach Script Aenderungen Neustart mit Start-Cache loeschen => about:support
// Moegliche Problemloesungen (s. unten) muessen wo noetig manuell an/ausgeschaltet werden
// Eigenes Icon, in Profilordner/chrome/icons Ordner
let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
let IconPath = '/chrome/icons/';
let Icon_tb = 'toolbar_n3.svg';
let ImagePath = ProfilePath + IconPath + Icon_tb;
// 0 Firefox Icon, 1 eigenes Icon benutzen
let new_tb_icon = 0;
// Position Startzustand: 0 Rechts, 1 Links, 2 Bottom
let new_tb_loc = 0;
// 0 letzter Zustand Leiste On/Off beim Beenden merken, 1 nicht merken
// 2x Neustart noetig, nur beim ersten Neuspeichern dieser Einstellung
let new_tb_save = 0;
// 0 Startzustand Leiste On, 1 Startzustand Off, bei new_tb_save = 1
let new_tb_off = 0;
// 0 Button schaltet Leiste fuer alle Fenster, 1 nur aktives Fenster
let new_tb_uno = 0;
// Eigene Hintergrundfarbe: 0 Off, 1 On
let new_tb_color = 0;
// Hintergrundfarbe bei On
let new_tb_bg_color = 'lightblue';
// Trennlinie Breite, 0px = off
let new_tb_border_width = '1px';
// Trennlinie Farbe
//let new_tb_border_color = 'grey';
let new_tb_border_color = 'color-mix(in srgb, currentColor 30%, transparent)';
// Groessen von Leiste und Buttons aendern, muss px Wert sein, auch bei 0px, manuell
// Groesse Buttons via padding aendern, 8px Standard; Abstand, Leistengroesse wird mit geaendert
let new_tb_btn_size = '6px';
// Abstand zwischen Buttons, 2px Standard
let new_tb_distance = '5px';
// Breite vertikale Leiste / Hoehe horizontale Leiste um diesen Wert erhoehen, bei 0px => Leistengroesse = Buttongroesse
let new_tb_size = '1px';
// Moegliche Problemloesungen, nur falls noetig, experimentell
// Fix #1 fuer Themes mit zu niedrigen/ gekachelten Hintergrund Bildern, true / false, besser nur eines benutzen
let theme_fix = false;
// Fix #2, ueberschreibt Fix #1
let theme_fix_2 = false;
// Anpassung fuer 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
// Tip: Separator, Space etc. im Anpassenfenster nur mit Rechtsklick aus Leiste entfernen
let separator_fix = true;
// User Einstellungen Ende
if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
}
const pref_newtoolbar_state = "userchrome.newtoolbar.enabled";
let toolbox_new = document.createXULElement('toolbox');
toolbox_new.setAttribute('id','toolbox_new');
toolbox_new.setAttribute('orient','horizontal');
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');
ntb.setAttribute('toolbarname', 'Addon Bars');
ntb.setAttribute('label', 'Addon Bars');
ntb.setAttribute('orient', 'vertical');
ntb.setAttribute("accesskey","");
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) { }
}
});
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 Funktion
if (new_tb_uno === 0) {
document.getElementById('NewToolbar_button').addEventListener('click', tb_toggle );
}
else if (new_tb_uno === 1) {
document.getElementById('NewToolbar_button').addEventListener('click', tb_toggle_uno );
}
function tb_toggle() {
let windows = Services.wm.getEnumerator(null);
while (windows.hasMoreElements()) {
let win = windows.getNext();
if (event.button === 0) {
const toolbar = win.document.getElementById("newtoolbar");
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_newtoolbar_state, ntb_visible);
}
}
};
function tb_toggle_uno() {
if (event.button === 0) {
const toolbar = document.getElementById("newtoolbar");
const browserArea = document.getElementById("browser");
const button = 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_newtoolbar_state, ntb_visible);
}
};
// Position Startzustand
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");
}
let toolbarEnabled = true;
try {
toolbarEnabled = Services.prefs.getBoolPref(pref_newtoolbar_state);
} catch(e) {
Services.prefs.setBoolPref(pref_newtoolbar_state, new_tb_off === 0); // Initialwert setzen
toolbarEnabled = new_tb_off === 0;
}
if (!toolbarEnabled) {
newtoolbar.classList.add("off-mode");
browser.classList.add("off-mode_b");
NewToolbar_button.classList.add("off-mode_btn");
}
// #1 Beim Beenden von Firefox: Prefs loeschen, falls new_tb_save === 1
if (new_tb_save === 1) {
Services.obs.addObserver(function observer(subject, topic, data) {
if (topic === "quit-application-granted") {
try {
Services.prefs.clearUserPref(pref_newtoolbar_state);
} catch (e) { }
Services.obs.removeObserver(observer, "quit-application-granted");
}
}, "quit-application-granted");
}
// Icon
if (new_tb_icon === 1) {
NewToolbar_button.classList.add("icon_mode");
}
// Hintergrundfarbe
if (new_tb_color === 1) {
newtoolbar.classList.add("ntb_bg_color");
}
const css =`
:root {
--ug-newbar_basewidth: calc(2 * var(--ug-newbar-button_inner_padding) + 16px);
--ug-newbar_width: calc(var(--ug-newbar_basewidth) + var(--ug-newbar_borderwidth) + 2 * var(--ug-newbar_add_width));
--ug-newbar-button_inner_padding: ${new_tb_btn_size}; /* Groesse Buttons */
--ug-newbar_add_width: `+new_tb_size+`; /* Breite / Hoehe erhoehen */
--ug-newbar_btnspace: ${new_tb_distance}; /* Abstand zw. Buttons */
--ug-newbar_borderwidth: ${new_tb_border_width}; /* Breite / Hoehe Trennlinie */
}
/*- Buttons Groesse -*/
#newtoolbar {
--toolbarbutton-inner-padding: var(--ug-newbar-button_inner_padding) !important;
--toolbarbutton-outer-padding: 0px !important;
}
/*- Button -*/
#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}");
}
#NewToolbar_button.off-mode_btn:not(:hover, :active) .toolbarbutton-icon {
opacity: 0.4;
}
#NewToolbar_button.left_mode_btn .toolbarbutton-icon {
transform: rotate(180deg);
}
#NewToolbar_button.bottom_mode_btn .toolbarbutton-icon {
transform: rotate(90deg);
}
/*-- Basis / Right --*/
#browser {
transition: padding 0.25s ease !important;
}
#browser:not(.off-mode_b) {
padding-right: var(--ug-newbar_width) !important;
}
#toolbox_new {
position: fixed;
z-index: 4 !important;
display: flex;
width: fit-content;
top: var(--height_newbar_top);
right: 0;
}
#newtoolbar {
display: flex;
min-width: var(--ug-newbar_basewidth) !important;
width: var(--ug-newbar_width);
min-height: var(--ug-newbar_basewidth) !important;
height: var(--height_newbar) !important;
align-items: center !important;
padding-block: 8px;
border: 0 solid ${new_tb_border_color};
border-inline-width: var(--ug-newbar_borderwidth) 0;
transition: margin 0.25s ease;
box-shadow: none !important;
}
#newtoolbar:not([customizing]).off-mode {
min-width: 0px !important;
margin-inline: 0 calc(0px - var(--ug-newbar_width));
}
#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: var(--ug-newbar_width) 0 !important;
}
#toolbox_new.left_mode {
left: 0;
}
.left_mode #newtoolbar:not([customizing]) {
border-left: none;
border-inline-width: 0 var(--ug-newbar_borderwidth);
}
.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: var(--ug-newbar_width) !important;
}
#toolbox_new.bottom_mode {
top: unset;
bottom: 0;
}
.bottom_mode #newtoolbar:not([customizing]) {
flex-direction: row !important;
height: var(--ug-newbar_width) !important;
width: 100vw;
padding-block: 0;
padding-inline: 8px;
border-inline-width: 0;
border-top-width: var(--ug-newbar_borderwidth);
/*justify-content: center !important;*/ /* Inhalt mittig, optional */
}
.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 --*/
/* Mac / nur Video Fullscreen */
#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 --*/
:root[customizing] #toolbox_new {
top: unset !important;
bottom: 0 !important;
right: 0 !important;
left: unset !important;
}
#newtoolbar[customizing] {
height: var(--height_newbar_c) !important;
}
#customization-container {
margin-right: var(--ug-newbar_width) !important;
}
/*- Farben Themes -*/
/* Eigene HG Farbe falls eingeschaltet */
#newtoolbar.ntb_bg_color {
background-color: ${new_tb_bg_color} !important;
}
/*- Farben Themes, falls Hintergrundbilder gekachelt, oben theme_fix versuchen -*/
:root[lwtheme] #newtoolbar:not(.ntb_bg_color) {
background-color: var(--lwt-accent-color, var(--toolbar-bgcolor)) !important;
}
:root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color) {
background-image: var(--lwt-header-image) !important;
background-position: right 0px top 0px !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;
}
*/
`;
let theme_fix_code = '';
if (theme_fix) {
theme_fix_code = `
/*- Fix #1 Hintergrundbilder fuer Themes mit gekachelten Bildern, falls eingeschaltet -*/
:root[lwtheme][lwtheme-image] #newtoolbar: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:not(.ntb_bg_color) {
background-size: auto !important;
}
`;
}
let theme_fix_code_2 = '';
if (theme_fix_2) {
theme_fix_code_2 = `
/*- Fix #2 Hintergrundbilder fuer Themes mit gekachelten Bildern, falls eingeschaltet -*/
:root[lwtheme][lwtheme-image] #toolbox_new #newtoolbar:not(.ntb_bg_color) {
background: transparent !important;
}
:root[lwtheme][lwtheme-image] #newtoolbar: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;
/*background-position: left 0px top 100% !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.bottom_mode #newtoolbar:not(.ntb_bg_color, [customizing])::before {
transform: scaleX(-1) !important;
transform-origin: 50% 50% !important;
width: 100% !important;
}
:root[lwtheme][lwtheme-image] #newtoolbar:not(.ntb_bg_color)[customizing]::before {
width: var(--height_newbar_c) !important;
}
#newtoolbar:not([customizing]).off-mode::before {
min-width: 0px !important;
margin-inline: 0 calc(0px - var(--ug-newbar_width));
}
.left_mode #newtoolbar:not([customizing]).off-mode::before {
margin-inline: calc(0px - var(--ug-newbar_width)) 0;
}
.bottom_mode #newtoolbar:not([customizing]).off-mode::before {
min-height: 0px !important;
margin-inline: 0;
margin-block: 0 calc(0px - var(--ug-newbar_width)) !important;
}
`;
}
let separator_fix_code = '';
if (separator_fix) {
separator_fix_code = `
/* Anpassung fuer Separator Scripts, falls eingeschaltet */
#newtoolbar toolbarseparator {
margin: 6px 0 !important;
width: calc(var(--ug-newbar_width) - var(--ug-newbar_borderwidth) - 6px) !important;
max-width: var(--ug-newbar_width) !important;
border-block-color: hsl(0, 0%, 0%, 0.55) hsl(0, 0%, 100%, 0.55) !important;
/*background-color: color-mix(in srgb, currentColor 70%, transparent) !important;
border: none !important;*/
}
#newtoolbar :is(toolbarspacer, toolbarspring, toolbarseparator) {
min-width: 1px !important;
}
.bottom_mode #newtoolbar:not([customizing]) toolbarseparator {
transform: rotate(-90deg) !important;
}
#newtoolbar[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));
const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(''+ css + theme_fix_code + theme_fix_code_2 + separator_fix_code));
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
})();Version 10/ Fix:
