... daher würde ich den aktualisierten Code komplett übernehmen ...
OK, wird gemacht.
Sorry für das hin und her, aber manchmal braucht's ein paar Schritte mehr bis es passt. 
So sollte hoffentlich auch die Animation im Anpassenfenster klappen, wenn man Buttons in die Leiste zieht.
Bei Benutzung no width würde man dann translate damit ersetzen, wenn man das konsequent umsetzen würde.
Das wiederum kapiere ich nicht! no width ?
Ich werde die Version nutzen, die Du ursprünglich gepostest hat.
Von width hätte das heissen sollen,...
Eine wichtige Korrektur habe ich noch gemacht; wo jetzt :
width: calc(var(--ug-toolbar_width) + 2*var(--ug-fly_border_width)); steht, hatte ich die falsche Variable für border width benutzt ... 
Ganz dicker Fehler.
Plus noch ein paar Kleinigkeiten, daher würde ich den aktualisierten Code komplett übernehmen, mit deinen Präferenzen eben.
Am Rest hat sich nichts geändert.
Die transition für border-width läuft auch nicht sauber, weil flybox_new nicht animiert ist, würde ich evtl. rausnehmen.
Evtl. testen:
Danke.
Gerne doch. 
Ich hab mal noch etwas dazugeschrieben in's Script.
Wenn du in Zeile 113 die outline aktivierst, siehst du was passiert, der Container(?) #flybox_new behält Grösse und Position, da ja der Inhalt #new_flybar nur verschoben wird.
Mit display:none - oder in Zeile 141 width aktivieren als Test - wird die Grösse vom Container mit veringert.
Bei Benutzung no width würde man dann translate damit ersetzen, wenn man das konsequent umsetzen würde.
Sorry, #37 ...
Moment, ich sehe das gleiche Problem in deinem Originalscript, ohne meine Anpassungen.
Edit, nochmal Moment, ich sehe das Problem; denke es ist translate.
Display none ginge, lässt sich aber nicht animieren, ausser mit viel tricksen.
Evtl. testen:
// New switchable toolbar rechts/links – Version mit gleitendem Slide‑In/Out‑Effekt
// TEST mit Anpassenfenster
(function() {
if (!window.gBrowser)
return;
const
// ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
id = 'NewToolbar_fly_button',
label = 'Toggle New Toolbar',
tooltiptext = 'Toggle New toolbar',
// Icon-------------------------------------------------------
icon = 'Dock Side Right.svg', // Icon-Dateiname
//icon = 'flower-satt32.png';
iconPath = '/chrome/icons/',
visible = '38px', // Sichtbare Leistenbreite
isPosH = 0, // 0 = rechts, 1 = links
isPosV = '30%', // vertikale Position der Leiste
// isPosV = '0%', Leiste am oberen Fensterrand;
// isPosV = '50%', Leiste mittig zur Fensterhöhe;
// isPosV = '100%', Leiste am unteren Fensterrand;
delay = '0.6s'; // Dauer (schneller/langsamer)
// ■■ END UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
Services.prefs.setBoolPref('svg.context-properties.content.enabled', true);
}
const flybox_new = document.createXULElement('toolbox');
flybox_new.setAttribute('orient','horizontal');
flybox_new.id = 'flybox_new';
const fly_bar = document.createXULElement('toolbar');
fly_bar.id = 'new_flybar';
fly_bar.setAttribute('orient', 'vertical');
fly_bar.setAttribute('customizable', true);
fly_bar.setAttribute('mode', 'icons');
fly_bar.setAttribute('context', 'toolbar-context-menu');
fly_bar.setAttribute('class','toolbar-primary chromeclass-toolbar browser-toolbar customization-target');
fly_bar.setAttribute('toolboxid', 'navigator-toolbox');
fly_bar.setAttribute('toolbarname', 'New Toolbar');
fly_bar.setAttribute('label', 'New Toolbar');
let savedState = false;
try {
savedState = Services.prefs.getBoolPref("userChrome.newFlybar.off");
} catch(e) {}
if (savedState) fly_bar.classList.add("fly_off_mode");
flybox_new.appendChild(fly_bar);
document.getElementById('browser').parentNode.appendChild(flybox_new);
CustomizableUI.registerArea(fly_bar.id, {legacy: true});
CustomizableUI.registerToolbarNode(fly_bar);
try {
CustomizableUI.createWidget({
id,
defaultArea: CustomizableUI.AREA_NAVBAR,
label,
tooltiptext,
onCreated: (button) => {
button.style.MozContextProperties = 'fill, stroke, fill-opacity, stroke-opacity';
button.style.listStyleImage = 'url("' + curProfDir + iconPath + icon + '")';
button.style.minWidth = 'fit-content';
}
});
} catch(e) {};
document.getElementById('NewToolbar_fly_button').addEventListener("click", flybar);
function flybar(event) {
if (event.button === 0) {
const new_flybar = document.getElementById('new_flybar');
new_flybar.classList.toggle("fly_off_mode");
const state = new_flybar.classList.contains("fly_off_mode");
Services.prefs.setBoolPref("userChrome.newFlybar.off", state);
}
}
if (isPosH === 1)
flybox_new.classList.add("fly_left");
else
flybox_new.classList.remove("fly_left");
const css = `
:root {
--ug-toolbar_width: ${visible};
/*--ug-bg_fly_color: #2b2b2b;*/
--ug-bg_fly_color: lightblue;
--ug-fly_border_width: 2px;
--ug-border_radius: 8px;
--ug-border_color: #f3a200;
}
#flybox_new {
position: fixed !important;
display: flex !important;
${isPosH === 0
? `right: 0 ; margin-right: calc(-1 * var(--ug-fly_border_width));`
: `left: 0 ; margin-left: calc(-1 * var(--ug-fly_border_width));`}
top: ${isPosV} !important;
transform: translateY(-${isPosV}) !important;
height: fit-content !important;
z-index: 4 !important;
pointer-events: none;
/*outline: 4px solid red !important;*/
}
#new_flybar {
display: flex;
width: calc(var(--ug-toolbar_width) + 2*var(--ug-fly_border_width));
min-width: 0px !important;
overflow: hidden !important;
justify-content: center !important;
padding-block: 4px;
background-color: var(--ug-bg_fly_color) !important;
border: var(--ug-fly_border_width) solid var(--ug-border_color) !important;
${isPosH === 0
? `border-radius: var(--ug-border_radius) 0 0 var(--ug-border_radius);`
: `border-radius: 0 var(--ug-border_radius) var(--ug-border_radius) 0;`}
transition: transform ${delay} ease-in-out,
opacity ${delay} ease-in-out,
border-width ${delay} ease-in-out,
width ${delay} ease-in-out;
transform: translateX(0);
opacity: 1;
pointer-events: auto;
}
#new_flybar.fly_off_mode:not([customizing]) {
transform: ${isPosH === 0 ? 'translateX(100%)' : 'translateX(-100%)'};
opacity: 0;
border-width: 0px !important;
/*width: 0px !important;*/
}
#new_flybar > :is(.toolbarbutton-1, toolbaritem),
#new_flybar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
margin-inline: 0px !important;
margin-block: 2px !important;
padding: 0px !important;
/*transition: none;*/
}
/*--- customizing ---*/
#main-window[customizing] #flybox_new.fly_left {
left: unset !important;
right: 0px !important;
margin-inline: 0px calc(-1 * var(--ug-fly_border_width)) !important;
}
#new_flybar[customizing] {
align-items: center !important;
/*width: calc(var(--ug-toolbar_width) + 2*var(--ug-fly_border_width)) !important;*/
min-width: calc(var(--ug-toolbar_width) + 2*var(--ug-fly_border_width)) !important;
width: initial !important;
min-height: var(--ug-toolbar_width) !important;
padding-bottom: 48px !important;
border-radius: var(--ug-border_radius) 0 0 var(--ug-border_radius) !important;
transition: none !important;
}
#main-window:not([customizing]) #new_flybar.fly_off_mode[customizing] {
transition: none !important;
opacity: 0 !important;
}
#customization-content-container {
margin-right: var(--ug-toolbar_width) !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);
})();Horstmann Habe ich auch schon gemacht, ändert aber nichts.
Benutzt du das komplette Script aus #137, nicht nur Teile davon? 
Der Bereich, der von der Toolbar überdeckt wird, wird auch im ausgeblendeten Zustand "überdeckt"!
Was bedeutet, dass an dieser Stelle der Slider der Scrollbar nicht "angefasst" werden kann.
Gut beobachtet; in Zeile 134 aus #37, /*pointer-events: none;*/ , mal den Kommentar entfernen, also pointer-events: none;.
Das Scroll Feature funktioniert bei mir am Mac leider nicht.
Hast du das in einem neuen Profil (ohne andere Toolbars) getestet?
Funktioniert am Mac in Fx 145x, nur nicht auf meinem antiken System. 
Ich will aber nichts hören, hab extra die Testmaschine angeworfen.
Lange hat es gedauert, viel Versuche waren nötig, aber jetzt habe ich es!
Die zusätzliche Toolbar ist endlich so, wie sie für mich sein soll.
Ich danke Dir Horstmann und auch Mitleser für Eure Ideen und eigenen Umsetzungen einer solchen Leiste.Hier nun meine Interpretation der Codeschnipsel, die ich aus Euren Skripten bunt zusammen gewürfelt habe.
Wer es mal testen mag, bitte schön.
Prima zusammengewürfelt, da hab ich was draus gelernt!
Nur eines, die Breite passt sich nicht an die Borderbreite an (mal 8px testen), Zeile 111 könntest du zu sowas ändern :
width: calc(var(--ug-toolbar_width) + 2*var(--ug-border_width));
Und auch wenn ihr kein anständiges Anpassenfenster mögt , hier mal ein Vorschlag:
// New switchable toolbar rechts/links – Version mit gleitendem Slide‑In/Out‑Effekt
// TEST mit Anpassenfenster
(function() {
if (!window.gBrowser)
return;
const
// ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
id = 'NewToolbar_fly_button',
label = 'Toggle New Toolbar',
tooltiptext = 'Toggle New toolbar',
// Icon-------------------------------------------------------
icon = 'Dock Side Right.svg', // Icon-Dateiname
iconPath = '/chrome/icons/',
visible = '38px', // Sichtbare Leistenbreite
isPosH = 0, // 0 = rechts, 1 = links
isPosV = '30%', // vertikale Position der Leiste
// isPosV = '0%', Leiste am oberen Fensterrand;
// isPosV = '50%', Leiste mittig zur Fensterhöhe;
// isPosV = '100%', Leiste am unteren Fensterrand;
delay = '0.6s'; // Dauer (schneller/langsamer)
// ■■ END UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
Services.prefs.setBoolPref('svg.context-properties.content.enabled', true);
}
const flybox_new = document.createXULElement('toolbox');
flybox_new.setAttribute('orient','horizontal');
flybox_new.id = 'flybox_new';
const fly_bar = document.createXULElement('toolbar');
fly_bar.id = 'new_flybar';
fly_bar.setAttribute('orient', 'vertical');
fly_bar.setAttribute('customizable', true);
fly_bar.setAttribute('mode', 'icons');
fly_bar.setAttribute('context', 'toolbar-context-menu');
fly_bar.setAttribute('class','toolbar-primary chromeclass-toolbar browser-toolbar customization-target');
fly_bar.setAttribute('toolboxid', 'navigator-toolbox');
fly_bar.setAttribute('toolbarname', 'New Toolbar');
fly_bar.setAttribute('label', 'New Toolbar');
let savedState = false;
try {
savedState = Services.prefs.getBoolPref("userChrome.newFlybar.off");
} catch(e) {}
if (savedState) fly_bar.classList.add("fly_off_mode");
flybox_new.appendChild(fly_bar);
document.getElementById('browser').parentNode.appendChild(flybox_new);
CustomizableUI.registerArea(fly_bar.id, {legacy: true});
CustomizableUI.registerToolbarNode(fly_bar);
try {
CustomizableUI.createWidget({
id,
defaultArea: CustomizableUI.AREA_NAVBAR,
label,
tooltiptext,
onCreated: (button) => {
button.style.MozContextProperties = 'fill, stroke, fill-opacity, stroke-opacity';
button.style.listStyleImage = 'url("' + curProfDir + iconPath + icon + '")';
button.style.minWidth = 'fit-content';
}
});
} catch(e) {};
document.getElementById('NewToolbar_fly_button').addEventListener("click", flybar);
function flybar(event) {
if (event.button === 0) {
const new_flybar = document.getElementById('new_flybar');
new_flybar.classList.toggle("fly_off_mode");
const state = new_flybar.classList.contains("fly_off_mode");
Services.prefs.setBoolPref("userChrome.newFlybar.off", state);
}
}
if (isPosH === 1)
flybox_new.classList.add("fly_left");
else
flybox_new.classList.remove("fly_left");
const css = `
:root {
--ug-toolbar_width: ${visible};
--ug-bg_color: #2b2b2b;
--ug-fly_border_width: 2px;
--ug-border_radius: 8px;
--ug-border_color: #f3a200;
}
#flybox_new {
position: fixed !important;
display: flex !important;
${isPosH === 0
? `right: 0 ; margin-right: calc(-1 * var(--ug-fly_border_width));`
: `left: 0 ; margin-left: calc(-1 * var(--ug-fly_border_width));`}
top: ${isPosV} !important;
transform: translateY(-${isPosV}) !important;
height: fit-content !important;
z-index: 4 !important;
}
#new_flybar {
display: flex;
width: calc(var(--ug-toolbar_width) + 2*var(--ug-fly_border_width));
min-width: 0 !important;
overflow: hidden !important;
justify-content: center !important;
padding-block: 4px;
background-color: var(--ug-bg_color) !important;
border: var(--ug-fly_border_width) solid var(--ug-border_color) !important;
${isPosH === 0
? `border-radius: var(--ug-border_radius) 0 0 var(--ug-border_radius);`
: `border-radius: 0 var(--ug-border_radius) var(--ug-border_radius) 0;`}
transition: transform ${delay} ease-in-out,
opacity ${delay} ease-in-out,
border-width ${delay} ease-in-out;
transform: translateX(0);
opacity: 1;
}
#new_flybar.fly_off_mode:not([customizing]) {
transform: ${isPosH === 0 ? 'translateX(100%)' : 'translateX(-100%)'};
opacity: 0;
border-width: 0px !important;
/*pointer-events: none;*/
}
#new_flybar > :is(.toolbarbutton-1, toolbaritem),
#new_flybar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
margin-inline: 0px !important;
margin-block: 2px !important;
padding: 0px !important;
/*opacity: 1 !important;*/
transition: none;
}
/*--- customizing ---*/
#main-window[customizing] #flybox_new.fly_left {
left: unset !important;
right: 0px !important;
margin-inline: 0px calc(-1 * var(--ug-fly_border_width)) !important;
}
#new_flybar[customizing] {
align-items: center !important;
width: calc(var(--ug-toolbar_width) + var(--ug-fly_border_width)) !important;
min-height: var(--ug-toolbar_width) !important;
padding-bottom: 48px !important;
border-radius: var(--ug-border_radius) 0 0 var(--ug-border_radius) !important;
transition: none !important;
}
#main-window:not([customizing]) #new_flybar.fly_off_mode[customizing] {
transition: none !important;
opacity: 0 !important;
}
#customization-content-container {
margin-right: var(--ug-toolbar_width) !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);
})();Ansonste habe ich zB nur die --ug-border_width mit --ug-fly_border_width spezieller gemacht; ist meine Schuld, weil ich das auch vergessen hatte in meinen Vorlagen, aber diese :root Variablen können einen schnell austricksen.
Das gleiche mit IDs und manchen Klassen, da kann man sich schnell wundern, wenn ein anderes Script/CSS die gleichen benutzt.
Wenn man sich auskennt, kann so eine KI tatsächlich eine Hilfe sein, weil man dann auch erkennt, was die richtigen Ansätze sind und wo die KI etwas falsch „verstanden” hat. Aber gerade für jemanden, der sich im Thema überhaupt nicht sicher ist, richtet eine solche KI meiner Ansicht nach sogar einen nachhaltigen Schaden an, weil man dann falsche Dinge lernt und das verhindert, dass man sich verbessert.
Mein Reden.
Mein Problem mit AI(KI) ist aber eher das cui bono der Angelegenheit.
Es sieht mir teils aus wie ein neuer Krypto Boom, der jetzt schon artifizielle (...) Finanzmanipulationen auf höchster Investitionsebene betreibt, ein politisches Machtinstrument darstellt, und von einem sehr beschränkten Kreis nicht nur kontrolliert, sondern v.a. von dieser Seite vorangetrieben wird.
Ganz abgesehen von massivem Energiebedarf, dem evtl. signifikanten Verlust von Jobs, niedrigeren Ausbildungsniveaus und kulturellem Schaden, potentieller Nutzen von AI ist nicht für die Allgemeinheit gedacht.
Update am 2025-12-05: Neue Version (Die vertikale Position der Leiste kann jetzt gescrollt werden).
Das Scroll Feature funktioniert bei mir am Mac leider nicht.
Ansonsten, ein Vorschlag für das Anpassenfenster, du könntest mal probieren sowas unten in den CSS Block einzufügen, nur mal schnell getestet.
Damit sollte a) die Leiste in diesem Fenster immer sichtbar und an der gleichen Seite sein (rechts), und keine anderen Inhalte im Anpassenfenster verdecken können.
/*-- customizing --*/
:root[customizing] #vert_toolbox {
right: 0 !important;
left: unset !important;
}
#vert_toolbar[customizing] {
display: flex !important;
border-top-right-radius: 0 !important;
border-top-left-radius: var(--vt-border-radius) !important;
border-bottom-right-radius: 0 !important;
border-bottom-left-radius: var(--vt-border-radius) !important;
margin-left: calc(var(--vt-toolbar-min-width) * -1) !important;
margin-right: unset !important;
}
#customization-content-container {
margin-right: 32px !important;
}Schade, aber so sind die "Geschmäcker" halt verschieden.
Schwach geworden, wie immer ...
Hier dann die Leiste mit Button und das Ding sitzt aussen.
Wobei sich bei den Versionen mit Extra Button schon die Frage stellt, warum man nicht einfach den Hauptbutton benutzt, den zum komplett Ausschalten der Leiste.
// Toggle newtoolbar 10 rechts/links, extra button instead of hover, button outside
// 00_flybar_V10bo.uc.js
(function() {
if (location.href !== 'chrome://browser/content/browser.xhtml')
return;
// Custom Icon, expected in profile-name/chrome/icons folder ("icons" folder needs to be created)
let ButtonIcon = 'flower-satt32.png';
// start positions
let Fly_Position = 0; // 0 = right , 1 = left
let Fly_InOrOut = 0; // 0 = bar extended , 1 = bar collapsed
let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
let IconPath = '/chrome/icons/';
let ImagePath = ProfilePath + IconPath + ButtonIcon;
let flybox_new = document.createXULElement('toolbox');
flybox_new.setAttribute('orient','horizontal');
flybox_new.setAttribute('id','flybox_new');
let tb = document.createXULElement('toolbar');
let tb_label = "New Toolbar";
tb.id = 'new_flybar';
tb.setAttribute('customizable', true);
tb.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
tb.setAttribute('orient', 'vertical');
tb.setAttribute('mode', 'icons');
tb.setAttribute('context', 'toolbar-context-menu');
tb.setAttribute("toolbarname", tb_label);
tb.setAttribute("label", tb_label);
flybox_new.appendChild(tb);
document.getElementById('browser').parentNode.appendChild(flybox_new);
CustomizableUI.registerArea('new_flybar', {legacy: true});
CustomizableUI.registerToolbarNode(tb);
try {
CustomizableUI.createWidget({
id: 'NewToolbar_fly_button',
type: 'custom',
defaultArea: CustomizableUI.AREA_NAVBAR,
onBuild: function(aDocument) {
let toolbaritem = aDocument.createXULElement('toolbarbutton');
let props = {
id: 'NewToolbar_fly_button',
class: 'toolbarbutton-1 chromeclass-toolbar-additional',
removable: true,
label: 'Toggle New Toolbar',
tooltiptext: 'Toggle New toolbar',
style: 'list-style-image: url("' + ImagePath + '");',
};
for(let p in props)
toolbaritem.setAttribute(p, props[p]);
return toolbaritem;
}
});
} catch(e) { };
document.getElementById('NewToolbar_fly_button').addEventListener( "click", flybar );
function flybar() {
if (event.button === 0 ) {
new_flybar.classList.toggle("fly_off_mode");
}
};
if (Fly_Position === 1) {
flybox_new.classList.add("fly_left");
}
else {
flybox_new.classList.remove("fly_left");
};
try {
CustomizableUI.createWidget({
id: 'ntb_flyInOut_btn',
defaultArea: CustomizableUI.AREA_NAVBAR,
tooltiptext: 'Fly Me',
label: 'Fly Me',
removable: false,
});
} catch(e) { }
if (Fly_InOrOut === 1) {
flybox_new.classList.remove("fly_InOut_mode");
}
else {
flybox_new.classList.add("fly_InOut_mode");
};
// 1st child
let addy = document.getElementById('new_flybar');
let addybe = document.getElementById('ntb_flyInOut_btn');
addy.insertBefore(addybe, addy.firstChild);
document.getElementById('ntb_flyInOut_btn').addEventListener( "click", flyInOut);
function flyInOut() {
if (event.button === 0 ) {
flybox_new.classList.toggle("fly_InOut_mode");
}
};
const css =`
/* Button outside */
:root {
--ug-newbar_width: 0px;
--ug-newbar_inner_width: 36px; /* minimum 32px */
--ug-newbar_max_width: calc(var(--ug-newbar_inner_width) + 2*var(--ug-fly_border));
--ug-arrow_width: 26px;
--ug-arrow_left: url(chrome://global/skin/icons/arrow-left.svg);
--ug-arrow_right: url(chrome://global/skin/icons/arrow-right.svg);
--ug-newbar_bg_color: lightblue;
--ug-newbar_radius: 8px;
--ug-fly_border: 3px;
--ug-fly_border_color: orange;
}
#flybox_new {
position: fixed;
display: flex;
top: 50%;
right: 0px;
transform: translateY(-50%);
z-index: 4 !important;
height: fit-content;
width: fit-content;
}
#ntb_flyInOut_btn,
#new_flybar {
display: flex;
min-width: 0px !important;
width: var(--ug-newbar_width);
justify-content: center !important;
background-color: var(--ug-newbar_bg_color) !important;
border-color: var(--ug-fly_border_color);
border-style: solid !important;
border-width: var(--ug-fly_border);
transition: width 0.5s ease, margin 0.5s ease, padding 0.5s ease /*, left 0.5s ease, right 0.5s ease*/;
}
#new_flybar {
margin-inline: 0px calc(0px - 2*var(--ug-fly_border));
min-height: var(--ug-newbar_max_width) !important;
border-radius: 0 0 0 var(--ug-newbar_radius);
overflow: hidden !important;
padding-block: 4px;
}
#flybox_new.fly_InOut_mode #new_flybar:not([customizing]) {
width: var(--ug-newbar_max_width);
margin-inline: 0px calc(0px - var(--ug-fly_border));
}
#new_flybar > :is(.toolbarbutton-1, toolbaritem),
#new_flybar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
margin-inline: 0px !important;
margin-block: 2px !important;
padding-inline: 0px !important;
z-index: 6 !important;
}
#new_flybar:not([customizing]) toolbarbutton:not(#ntb_flyInOut_btn) {
transition: opacity 0.25s ease;
opacity: 0 !important;
}
#flybox_new.fly_InOut_mode #new_flybar toolbarbutton {
opacity: 1 !important;
}
/*--- arrow button ---*/
#flybox_new #ntb_flyInOut_btn {
position: absolute;
list-style-image: var(--ug-arrow_right);
left: calc(-1*var(--ug-arrow_width) - 1*var(--ug-fly_border));
top: calc(0px - var(--ug-fly_border));
box-sizing: content-box;
width: var(--ug-arrow_width);
border-radius: var(--ug-newbar_radius) 0 0 var(--ug-newbar_radius);
border-inline-width: var(--ug-fly_border) 0px;
margin-block: var(--ug-fly_border) !important;
}
#flybox_new #ntb_flyInOut_btn::after {
content:"";
position: absolute;
background-color: inherit;
right: calc(0px - 1*var(--ug-fly_border));
height: 100%;
width: var(--ug-fly_border);
}
#flybox_new:not(.fly_InOut_mode) #ntb_flyInOut_btn {
list-style-image: var(--ug-arrow_left) !important;
}
#ntb_flyInOut_btn image {
/* margin-inline: calc(var(--ug-fly_border)) !important; */
margin-block: 6px !important;
--toolbarbutton-inner-padding: 8px 2px !important;
}
/*--- left ---*/
:root:not([customizing]) #flybox_new.fly_left {
right: unset;
left: 0px;
}
#flybox_new.fly_left #new_flybar:not([customizing]) {
margin-inline: calc(0px - 2*var(--ug-fly_border)) 0px;
}
#flybox_new.fly_left #new_flybar {
border-radius: 0 0 var(--ug-newbar_radius) 0;
}
#flybox_new.fly_left.fly_InOut_mode #new_flybar:not([customizing]) {
margin-inline: calc(0px - var(--ug-fly_border)) 0px;
}
/*--- arrow button left ---*/
#flybox_new.fly_left #ntb_flyInOut_btn {
list-style-image: var(--ug-arrow_right) !important;
left: unset;
right: calc(-1*var(--ug-arrow_width) - 1*var(--ug-fly_border));
border-radius: 0 var(--ug-newbar_radius) var(--ug-newbar_radius) 0;
border-inline-width: 0px var(--ug-fly_border);
}
#flybox_new.fly_left.fly_InOut_mode #ntb_flyInOut_btn {
list-style-image: var(--ug-arrow_left) !important;
}
#flybox_new.fly_left #ntb_flyInOut_btn::after {
left: calc(0px - 1*var(--ug-fly_border));
}
/*-- Off --*/
#new_flybar:not([customizing]).fly_off_mode {
display: none !important;
}
/*--- customizing ---*/
#new_flybar[customizing] {
align-items: center !important;
min-width: var(--ug-newbar_max_width) !important;
width: calc(var(--ug-newbar_max_width) + var(--ug-fly_border)) !important;
min-height: var(--ug-newbar_max_width) !important;
padding-bottom: 48px !important;
padding-right: var(--ug-fly_border) !important;
border-radius: var(--ug-newbar_radius) 0 0 var(--ug-newbar_radius) !important;
border-color: var(--ug-fly_border_color);
}
#new_flybar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem),
#new_flybar toolbarpaletteitem[removable="false"]{
opacity: 1 !important;
}
#customization-content-container {
margin-right: var(--ug-newbar_max_width) !important;
}
#new_flybar[customizing] #ntb_flyInOut_btn {
display: none !important;
}
/*- test colors -*/
/*
#flybox_new image {
outline-offset: -1px !important;
outline: 1px solid green !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);
})();Icon: flower-satt.png.zip
Verrätst Du mir, wie man den Pfeil, bzw. diese Fläche wieder vor die Leiste bekommt.
Also das die Optik wieder genau der Optik aus #22 entspricht.
Du müsstest dir das selber anschauen, das CSS ist aufwendig, und ich biete momentan nur die existierenden Versionen an.
Mir gefällt es besser, wenn der Button nach dem Ausklappen nicht noch zusätzlich Platz in Richtung Browserinhalt einnimmt.
Im Prinzip musst du nur das ::before Element von #22 mit dem Button von #29 ersetzen, und dann halt basteln.
Hier wäre ein Anfang für ein alternatives CSS in deinem Sinne; eine komplette Anpassung ist mir zu viel Aufwand.
Und noch eine Variante, mit zusätzlichem Button direkt an der Leiste zum ein/ausfahren, statt hover.
Etwas grob, aber sollte im Prinzip klappen.
Nur Basisoptionen, kein Geschnösel.
// Toggle newtoolbar 10 rechts/links, extra button instead of hover, button inside
// 00_flybar_V10bi.uc.js
(function() {
if (location.href !== 'chrome://browser/content/browser.xhtml')
return;
// Custom Icon, expected in profile-name/chrome/icons folder ("icons" folder needs to be created)
let ButtonIcon = 'flower-satt32.png';
// start positions
let Fly_Position = 0; // 0 = right , 1 = left
let Fly_InOrOut = 0; // 0 = bar extended , 1 = bar collapsed
let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
let IconPath = '/chrome/icons/';
let ImagePath = ProfilePath + IconPath + ButtonIcon;
let flybox_new = document.createXULElement('toolbox');
flybox_new.setAttribute('orient','horizontal');
flybox_new.setAttribute('id','flybox_new');
let tb = document.createXULElement('toolbar');
let tb_label = "New Toolbar";
tb.id = 'new_flybar';
tb.setAttribute('customizable', true);
tb.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
tb.setAttribute('orient', 'vertical');
tb.setAttribute('mode', 'icons');
tb.setAttribute('context', 'toolbar-context-menu');
tb.setAttribute("toolbarname", tb_label);
tb.setAttribute("label", tb_label);
flybox_new.appendChild(tb);
document.getElementById('browser').parentNode.appendChild(flybox_new);
CustomizableUI.registerArea('new_flybar', {legacy: true});
CustomizableUI.registerToolbarNode(tb);
try {
CustomizableUI.createWidget({
id: 'NewToolbar_fly_button',
type: 'custom',
defaultArea: CustomizableUI.AREA_NAVBAR,
onBuild: function(aDocument) {
let toolbaritem = aDocument.createXULElement('toolbarbutton');
let props = {
id: 'NewToolbar_fly_button',
class: 'toolbarbutton-1 chromeclass-toolbar-additional',
removable: true,
label: 'Toggle New Toolbar',
tooltiptext: 'Toggle New toolbar',
style: 'list-style-image: url("' + ImagePath + '");',
};
for(let p in props)
toolbaritem.setAttribute(p, props[p]);
return toolbaritem;
}
});
} catch(e) { };
document.getElementById('NewToolbar_fly_button').addEventListener( "click", flybar );
function flybar() {
if (event.button === 0 ) {
new_flybar.classList.toggle("fly_off_mode");
}
};
if (Fly_Position === 1) {
flybox_new.classList.add("fly_left");
}
else {
flybox_new.classList.remove("fly_left");
};
try {
CustomizableUI.createWidget({
id: 'ntb_flyInOut_btn',
defaultArea: CustomizableUI.AREA_NAVBAR,
tooltiptext: 'Fly Me',
label: 'Fly Me',
removable: false,
});
} catch(e) { }
if (Fly_InOrOut === 1) {
flybox_new.classList.remove("fly_InOut_mode");
}
else {
flybox_new.classList.add("fly_InOut_mode");
};
// 1st child
let addy = document.getElementById('new_flybar');
let addybe = document.getElementById('ntb_flyInOut_btn');
addy.insertBefore(addybe, addy.firstChild);
document.getElementById('ntb_flyInOut_btn').addEventListener( "click", flyInOut);
function flyInOut() {
if (event.button === 0 ) {
flybox_new.classList.toggle("fly_InOut_mode");
}
};
const css =`
/* Botton inside */
:root {
--ug-newbar_width: 0px;
--ug-newbar_inner_width: 38px; /* minimum 32px */
--ug-newbar_max_width: calc(var(--ug-newbar_inner_width) + 2*var(--ug-fly_border));
--ug-arrow_left: url(chrome://global/skin/icons/arrow-left.svg);
--ug-arrow_right: url(chrome://global/skin/icons/arrow-right.svg);
--ug-newbar_bg_color: lightblue;
--ug-newbar_radius: 8px;
--ug-fly_border: 3px;
--ug-fly_border_color: orange;
}
#flybox_new {
position: fixed;
display: flex;
top: 50%;
right: 0px;
transform: translateY(-50%);
z-index: 4 !important;
height: fit-content;
width: fit-content;
}
#ntb_flyInOut_btn,
#new_flybar {
display: flex;
min-width: 0px !important;
width: var(--ug-newbar_width);
justify-content: center !important;
background-color: var(--ug-newbar_bg_color) !important;
border-color: var(--ug-fly_border_color);
border-style: solid !important;
border-width: var(--ug-fly_border);
transition: width 0.5s ease, margin 0.5s ease, padding 0.5s ease, border-radius 0.5s ease;
}
#new_flybar {
min-height: var(--ug-newbar_max_width) !important;
border-radius: 0 0 0 var(--ug-newbar_radius);
overflow: hidden !important;
border-top-color: transparent;
padding-block: 4px 4px;
margin-inline: 0px calc(0px - 2*var(--ug-fly_border));
}
#flybox_new.fly_InOut_mode #new_flybar:not([customizing]) {
width: var(--ug-newbar_max_width);
margin-inline: 0px calc(0px - var(--ug-fly_border));
}
#new_flybar > :is(.toolbarbutton-1, toolbaritem),
#new_flybar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
margin-inline: 0px !important;
margin-block: 2px !important;
padding-inline: 0px !important;
z-index: 6 !important;
}
#new_flybar:not([customizing]) toolbarbutton:not(#ntb_flyInOut_btn) {
transition: opacity 0.25s ease;
opacity: 0 !important;
}
#flybox_new.fly_InOut_mode #new_flybar toolbarbutton {
opacity: 1 !important;
}
/*--- arrow button ---*/
#ntb_flyInOut_btn {
position: absolute;
list-style-image: var(--ug-arrow_right);
top: calc(0px - 32px - 6px - 0*var(--ug-fly_border));
right: calc(0px - var(--ug-fly_border));
width: var(--ug-newbar_max_width);
border-radius: var(--ug-newbar_radius) 0 0 var(--ug-newbar_radius);
}
#flybox_new.fly_InOut_mode #ntb_flyInOut_btn {
border-radius: var(--ug-newbar_radius) 0 0 0;
}
#flybox_new:not(.fly_InOut_mode) #ntb_flyInOut_btn::after {
width: 0px;
}
#flybox_new:not(.fly_InOut_mode) #ntb_flyInOut_btn {
list-style-image: var(--ug-arrow_left) !important;
width: calc(var(--ug-newbar_max_width) - 12px);
}
#ntb_flyInOut_btn image {
margin-block: 6px !important;
transition: width 0.5s ease !important;
}
#flybox_new:not(.fly_InOut_mode) #ntb_flyInOut_btn image {
--toolbarbutton-inner-padding: 8px 2px !important;
}
/* gap */
#flybox_new #ntb_flyInOut_btn::after {
content:"";
/* display: none; */
position: absolute;
background:
linear-gradient(to right, var(--ug-fly_border_color) var(--ug-fly_border), var(--ug-newbar_bg_color) var(--ug-fly_border));
bottom: calc(0px - 1*var(--ug-fly_border));
right: calc(0px - 0*var(--ug-fly_border));
width: calc(100% + var(--ug-fly_border));
height: var(--ug-fly_border);
transition: width 0.5s ease;
}
/*--- left ---*/
:root:not([customizing]) #flybox_new.fly_left {
right: unset;
left: 0px;
}
#flybox_new.fly_left #new_flybar:not([customizing]) {
margin-inline: calc(0px - 2*var(--ug-fly_border)) 0px;
}
#flybox_new.fly_left #new_flybar {
border-radius: 0 0 var(--ug-newbar_radius) 0;
}
#flybox_new.fly_left.fly_InOut_mode #new_flybar:not([customizing]) {
margin-inline: calc(0px - var(--ug-fly_border)) 0px;
}
/*--- arrow button left ---*/
#flybox_new.fly_left #ntb_flyInOut_btn {
list-style-image: var(--ug-arrow_right) !important;
left: calc(0px - var(--ug-fly_border));
border-radius: 0 var(--ug-newbar_radius) var(--ug-newbar_radius) 0;
}
#flybox_new.fly_left.fly_InOut_mode #ntb_flyInOut_btn {
}
#flybox_new.fly_left.fly_InOut_mode #ntb_flyInOut_btn {
list-style-image: var(--ug-arrow_left) !important;
border-radius: 0 var(--ug-newbar_radius) 0 0;
}
/* gap left */
#flybox_new.fly_left #ntb_flyInOut_btn::after {
background:
linear-gradient(to left, var(--ug-fly_border_color) var(--ug-fly_border), var(--ug-newbar_bg_color) var(--ug-fly_border));
left: calc(0px - 0*var(--ug-fly_border));
}
/*-- Off --*/
#new_flybar:not([customizing]).fly_off_mode {
display: none !important;
}
/*--- customizing ---*/
#new_flybar[customizing] {
align-items: center !important;
width: calc(var(--ug-newbar_max_width) + var(--ug-fly_border)) !important;
min-height: var(--ug-newbar_max_width) !important;
padding-bottom: 48px !important;
padding-right: var(--ug-fly_border) !important;
border-radius: var(--ug-newbar_radius) 0 0 var(--ug-newbar_radius) !important;
border-color: var(--ug-fly_border_color);
}
#new_flybar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem),
#new_flybar toolbarpaletteitem[removable="false"]{
opacity: 1 !important;
}
#customization-content-container {
margin-right: var(--ug-newbar_max_width) !important;
}
#new_flybar[customizing] #ntb_flyInOut_btn {
display: none !important;
}
/*- test colors -*/
/*
#flybox_new image {
outline-offset: -1px !important;
outline: 1px solid green !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);
})();Testicon: icons.zip
Alles anzeigenEs funktioniert so weit alles recht gut, nur warum werden eigene Buttons anders behandelt als jene,
die von Erweiterungen stammen.Zum Beispiel werden die Buttons von Erweiterungen weiter rechts dargestellt.
Sie sind also etwas außerhalb der Mitte.
Dann "eigene" Buttons, deren Hintergrundfarbe, beim Hovern, entspricht nicht der im Skript definierten Farbe.
Bei einem roten Symbol im Button ist die "Hoverfarbe" dann auch leicht rötlich.
Bei blau bläulich und bei gelb eben gelblich.
Nur bei Buttons von Erweiterungen, da stimmt es!
Ich wage mal den Verdacht zu äussern, dass du Code benutzt der Buttons manipuliert.
So ungefähr 8000 Zeile an Code für Buttons, oder so.
Wenn du alles davon mal weglässt, gibt es dann die Probleme immer noch?
Oder, gibt es die Probleme auch, wenn du stattdessen mein Script von hier probierst?
Und was die Farben angeht: niemals benutzt man color um Icons zu färben, nur fill oder stroke, weil man sonst oft die gesamte Buttonfarbe manipuliert - Text und hover-Hintergrund.
Text kann man zur Not gezielt anpassen, color wird in Fx für alles Mögliche benutzt, und nicht für eigene Buttons etc. separiert.
Gefühlt 1000x habe ich darauf hingewiesen - also ca. 5-6x plus Windfaktor - aber das hält sich hartnäckig.
Edit: bei dir ca. in Zeile 134, füge mal margin-inline: 0px !important; in dem Code Block dazu, für den Abstand von Erweiterungen Items.
Horstmann Cool, das ist ja fast so, wie ich mir das vorgestellt habe!
Mit fast arbeiten wir hier nicht.
Aus dem Pfeil kann man auch einen zusätzlichen Button machen, der das ein/ausblenden bei click übernimmt; nur ein Button und hover Funktion, das wäre mir zu viel.
Nur als Variante, hier eine weitere einfache Version.
Position rechts/ links lässt sich im Script fest einstellen, die Leiste lässt sich per Button komplett ausschalten, fährt ansonsten bei hover über dem Reiter/Pfeil aus, und dann nach Wunsch verzögert wieder ein.
//Toggle newtoolbar 8 rechts/links
(function() {
if (location.href !== 'chrome://browser/content/browser.xhtml')
return;
let ButtonIcon = 'flower-satt32.png';
let Fly_Position = 0; // 0 = right , 1 = left
let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
let IconPath = '/chrome/icons/';
let ImagePath = ProfilePath + IconPath + ButtonIcon;
let flybox_new = document.createXULElement('toolbox');
flybox_new.setAttribute('orient','horizontal');
flybox_new.setAttribute('id','flybox_new');
let tb = document.createXULElement('toolbar');
let tb_label = "New Toolbar";
tb.id = 'new_flybar';
tb.setAttribute('customizable', true);
tb.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
tb.setAttribute('orient', 'vertical');
tb.setAttribute('mode', 'icons');
tb.setAttribute("toolboxid","navigator-toolbox");
tb.setAttribute('context', 'toolbar-context-menu');
tb.setAttribute("toolbarname", tb_label);
tb.setAttribute("label", tb_label);
flybox_new.appendChild(tb);
document.getElementById('browser').parentNode.appendChild(flybox_new);
CustomizableUI.registerArea('new_flybar', {legacy: true});
CustomizableUI.registerToolbarNode(tb);
try {
CustomizableUI.createWidget({
id: 'NewToolbar_fly_button',
type: 'custom',
defaultArea: CustomizableUI.AREA_NAVBAR,
onBuild: function(aDocument) {
let toolbaritem = aDocument.createXULElement('toolbarbutton');
let props = {
id: 'NewToolbar_fly_button',
class: 'toolbarbutton-1 chromeclass-toolbar-additional',
removable: true,
label: 'Toggle New Toolbar',
tooltiptext: 'Toggle New toolbar',
style: 'list-style-image: url("' + ImagePath + '");',
};
for(let p in props)
toolbaritem.setAttribute(p, props[p]);
return toolbaritem;
}
});
} catch(e) { };
document.getElementById('NewToolbar_fly_button').addEventListener( "click", flybar );
function flybar() {
if (event.button === 0 ) {
new_flybar.classList.toggle("fly_off_mode");
}
};
if (Fly_Position === 1) {
flybox_new.classList.add("fly_left");
}
else {
flybox_new.classList.remove("fly_left");
};
const css =`
:root {
--ug-newbar_width: 0px;
--ug-newbar_inner_width: 38px;
--ug-newbar_max_width: calc(var(--ug-newbar_inner_width) + 2*var(--ug-fly_border));
--ug-arrow_width: 20px;
--ug-arrow_height: 64px;
--ug-newbar_bg_color: lightblue;
--ug-newbar_radius: 8px;
--ug-fly_border: 0px;
--ug-fly_border_color: orange;
--ug-fly_delay: 0.5s; /* animation delay when closing */
}
#flybox_new {
position: fixed;
display: flex;
top: 50%;
right: 0;
transform: translateY(-50%);
z-index: 4 !important;
height: fit-content;
width: fit-content;
}
#new_flybar {
display: flex;
min-width: 0px !important;
width: var(--ug-newbar_width);
overflow: hidden !important;
justify-content: center !important;
padding-block: 4px;
background-color: var(--ug-newbar_bg_color) !important;
border-color: var(--ug-fly_border_color);
border-style: solid !important;
border-width: var(--ug-fly_border);
border-radius: 0 0 0 var(--ug-newbar_radius);
margin-inline: 0px calc(0px - 2*var(--ug-fly_border));
transition: width 0.5s ease, margin 0.5s ease;
transition-delay: var(--ug-fly_delay);
}
#new_flybar:not([customizing]):hover {
width: var(--ug-newbar_max_width);
margin-inline: 0px calc(0px - 1*var(--ug-fly_border));
transition-delay: 0s;
}
#new_flybar:not([customizing]).fly_off_mode {
display: none !important;
}
#new_flybar > :is(.toolbarbutton-1, toolbaritem),
#new_flybar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
margin-inline: 0px !important;
margin-block: 2px !important;
padding: 0px !important;
opacity: 0 !important;
transition: opacity 0.25s ease;
transition-delay: var(--ug-fly_delay);
}
#new_flybar:not([customizing]):hover > :is(.toolbarbutton-1, toolbaritem) {
opacity: 1 !important;
transition: opacity 0.5s ease;
transition-delay: 0s;
}
/*--- arrow ---*/
#new_flybar::before {
content:"";
display: flex;
position: absolute;
background-color: lightblue;
top: 0px;
left: calc(-0px - var(--ug-arrow_width) - 1*var(--ug-fly_border));
height: var(--ug-arrow_height);
width: calc(var(--ug-arrow_width) + 1*var(--ug-fly_border));
background-image: url(chrome://global/skin/icons/arrow-left.svg);
background-repeat: no-repeat;
background-size: 16px;
background-position-x: left calc(50% - 0.5*var(--ug-fly_border)) ;
background-position-y: calc(50% - 10px);
border-right-width: 0px !important;
border-radius: var(--ug-newbar_radius) 0 0 var(--ug-newbar_radius);
border: var(--ug-fly_border) solid var(--ug-fly_border_color);
transition: right 0.5s ease, left 0.5s ease, margin 0.5s ease;
transition-delay: var(--ug-fly_delay);
}
#new_flybar:hover::before {
background-image: url(chrome://global/skin/icons/arrow-right.svg);
transition-delay: 0s;
}
/*--- left ---*/
:root:not([customizing]) #flybox_new.fly_left {
left: 0;
}
#flybox_new.fly_left #new_flybar:not([customizing]) {
border-radius: 0 0 var(--ug-newbar_radius) 0;
margin-inline: calc(0px - 2*var(--ug-fly_border)) 0px;
}
#flybox_new.fly_left #new_flybar:not([customizing]):hover {
width: var(--ug-newbar_max_width);
margin-inline: calc(0px - 1*var(--ug-fly_border)) 0px;
}
#flybox_new.fly_left #new_flybar::before {
left: unset;
right: calc(-0px - var(--ug-arrow_width) - 1*var(--ug-fly_border));
border-left-width: 0px !important;
border-right-width: var(--ug-fly_border) !important;
border-radius: 0 var(--ug-newbar_radius) var(--ug-newbar_radius) 0;
background-image: url(chrome://global/skin/icons/arrow-right.svg);
background-position-x: right calc(50% - 0.5*var(--ug-fly_border)) ;
}
#flybox_new.fly_left #new_flybar:hover::before {
background-image: url(chrome://global/skin/icons/arrow-left.svg);
}
/*--- customizing ---*/
#new_flybar[customizing] {
min-width: var(--ug-newbar_max_width) !important;
min-height: var(--ug-newbar_max_width) !important;
padding-bottom: 48px !important;
border-radius: var(--ug-newbar_radius) 0 0 var(--ug-newbar_radius) !important;
}
#new_flybar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
opacity: 1 !important;
}
#customization-content-container {
margin-right: var(--ug-newbar_max_width) !important;
}
#new_flybar[customizing]::before {
display: none !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);
})();
Test Icon: flower-satt.png.zip
Schön dass ihr euch wieder lieb habt. 
Ich wollte nur kurz auf eine andere Thread hinweisen, in der man Mira's Frage bestimmt angehen könnten bei Interesse, ohne dass ein aktives Thema belastet wird.
Danke. Das verschwindet also auch. Das werden einige nicht mögen.
Redest du mit mir?
Misst, dann muss ich ja schon wieder Basteln.
Sollte eigentlich nur plug&play sein für deine Extras.
Version 16; wie Version 15, mit kleinem Theme Fix.
Es ist nur eine eigene Version, weil auch die inneren IDs für die Leiste geändert wurden, um potentielle Überschneidungen mit altem Aris Code zu vermeiden.
User Einstellungen können wie immer übernommen werden.
// Additional toolbars
// Buttons to turn toolbar On/Off, right-click/context menuitem to switch toolbar position
// Use filename starting with 00 for custom button functions !! =>
// 00_extra_toolbars_V16.uc.js
// Based on: 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// Latest versions and icons =>
// Forum topic: https://www.camp-firefox.de/forum/thema/139927-eigene-zusatzleisten-ab-ff-143/
// 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 V16
(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/';
// On/Off Button
// 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;
// Position switch button
// Custom icon file
let Icon_sw = 'toolbar_switch_4.svg';
// Firefox icon
let Icon_sw_Fx = 'chrome://global/skin/icons/arrow-right.svg';
// false = use Firefox Icon, true = Custom Icon
let new_tb_icon_sw = false;
// Complete path to icon
let ImagePathSW = ProfilePath + IconPath + Icon_sw;
// 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
// Increase distance of buttons to edges, 0px => toolbar size = button size
let new_tb_size = '1px';
// Distance between buttons, 2px default
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, 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
if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
}
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',
//removable: false,
onCreated: (this_button) => {
this_button.setAttribute('closemenu', 'none');
}
});
} 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) { // NEU für oben
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");
}
// Icon
if (new_tb_icon) {
NewToolbar_button.classList.add("icon_mode");
}
// Background color
if (new_tb_color) {
new_toolbar.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("new_toolbar").addEventListener("mousedown", (e) => {
const button = e.target.closest("toolbarbutton");
if (button?.id && customHandlers[button.id]) customHandlers[button.id](button, e);
});
// Position switch 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);
}
// Context menu 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.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);
// Button context menuitem removal disabled
setTimeout(() => {
let elementsArray = document.querySelectorAll("toolbarbutton");
elementsArray.forEach(function(element) {
let contexter = document.querySelector(".customize-context-removeFromToolbar");
let contexter2 = document.querySelector(".customize-context-removeFromPanel");
element.addEventListener('contextmenu', e => {
if (e.button === 2) {
if (element.id === "NewToolbar_button") {
contexter.style.opacity = "0.5";
contexter.style.pointerEvents = "none";
contexter2.style.opacity = "0.5";
contexter2.style.pointerEvents = "none";
}
else {
contexter.style.display = "flex";
contexter2.style.display = "flex";
contexter.style.opacity = "";
contexter.style.pointerEvents = "";
};
}
});
});
},100);
function applyPosition(pos) {
toolbox_new.classList.remove("left_mode", "bottom_mode", "right_mode", "top_mode"); // NEU 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") { // NEU
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();
};
}
});
// Zyklus right -> left -> bottom -> top -> right
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");
}
};
// Icon Position menuitem
if (new_tb_icon_sw) {
NewToolbar_position_Con.classList.add("icon_mode_sw");
}
// 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 .toolbarbutton-icon {
list-style-image: url("${Icon_tb_Fx}");
}
#NewToolbar_button.icon_mode .toolbarbutton-icon {
list-style-image: url("${ImagePath}");
}
#NewToolbar_button.off-mode_btn:not(:hover, :active) .toolbarbutton-icon {
opacity: 0.4;
}
/* Button adjusts to Toolbar Position */
#NewToolbar_button .toolbarbutton-icon,
#NewToolbar_position_Con :is(image, img) {
transition: transform 0.125s;
transform: rotate(0deg);
}
#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(-270deg);
}
#NewToolbar_button.top_mode_btn .toolbarbutton-icon,
#NewToolbar_position_Con.top_mode_sw :is(image, img) {
transform: rotate(-90deg);
}
#NewToolbar_position_Con {
-moz-context-properties: fill, fill-opacity !important;
fill: currentColor !important;
}
#NewToolbar_position_Con :is(image, img) {
list-style-image: url("${Icon_sw_Fx}");
content: url("${Icon_sw_Fx}") !important;
}
#NewToolbar_position_Con.icon_mode_sw :is(image, img) {
list-style-image: url("${ImagePathSW}");
content: url("${ImagePathSW}") !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_basewidth) !important;*/
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;
}
#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;*/ /* Inhalt mittig, 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),
#toolbox_new:where(.bottom_mode, .top_mode) #new_toolbar:not([customizing]) toolbarpaletteitem > :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 / 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 --*/
#main-window[customizing] #toolbox_new {
top: unset !important;
bottom: 0 !important;
right: 0 !important;
left: unset !important;
}
#new_toolbar[customizing] {
height: calc(100vh - var(--height_newbar_c)) !important;
width: initial !important;
box-shadow: inset 0px 1px ${new_tb_border_color};
transition: none !important;
}
#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 oolors themes -*/
/* 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;
}
`;
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 #2 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: 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, opacity 0.25s ease;
}
: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;
width: 100% !important;
opacity: 1;
}
:root[lwtheme][lwtheme-image] #new_toolbar:not(.ntb_bg_color)[customizing]::before {
width: calc(100vh - var(--height_newbar_c)) !important;
}
#new_toolbar:not([customizing]).off-mode::before {
min-width: 0px !important;
margin-inline: 0px calc(0px - var(--ug-newbar_width));
}
#toolbox_new.left_mode #new_toolbar:not([customizing]).off-mode::before {
margin-inline: calc(0px - var(--ug-newbar_width)) 0;
}
#toolbox_new.bottom_mode #new_toolbar:not([customizing]).off-mode::before {
min-height: 0px !important;
margin-inline: 0px;
margin-block: 0px calc(0px - var(--ug-newbar_width)) !important;
}
#toolbox_new.top_mode #new_toolbar:not([customizing]).off-mode::before {
min-height: 0px !important;
margin-inline: 0px;
margin-block: calc(0px - var(--ug-newbar_width)) 0px !important;
opacity: 0 !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);
})();