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.
JavaScript
// New switchable toolbar rechts/links – Version mit gleitendem Slide‑In/Out‑Effekt
(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 = '34px', // 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 toolbar = document.createXULElement('toolbar');
toolbar.id = 'new_flybar';
toolbar.setAttribute('orient', 'vertical');
toolbar.setAttribute('customizable', true);
toolbar.setAttribute('mode', 'icons');
toolbar.setAttribute('context', 'toolbar-context-menu');
toolbar.setAttribute('class','toolbar-primary chromeclass-toolbar browser-toolbar customization-target');
toolbar.setAttribute('toolboxid', 'navigator-toolbox');
toolbar.setAttribute('toolbarname', 'New Toolbar');
toolbar.setAttribute('label', 'New Toolbar');
let savedState = false;
try {
savedState = Services.prefs.getBoolPref("userChrome.newFlybar.off");
} catch(e) {}
if (savedState) toolbar.classList.add("fly_off_mode");
flybox_new.appendChild(toolbar);
document.getElementById('browser').parentNode.appendChild(flybox_new);
CustomizableUI.registerArea(toolbar.id, {legacy: true});
CustomizableUI.registerToolbarNode(toolbar);
try {
CustomizableUI.createWidget({
id,
defaultArea: CustomizableUI.AREA_NAVBAR,
label,
tooltiptext,
onCreated: (button) => {
button.style.MozContextProperties = 'fill, stroke, fill-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-border_width: 2px;
--ug-border_radius: 8px;
--ug-border_color: #f3a200;
}
#flybox_new {
position: fixed !important;
display: flex !important;
${isPosH === 0
? `right: 0 !important; margin-right: calc(-1 * var(--ug-border_width));`
: `left: 0 !important; margin-left: calc(-1 * var(--ug-border_width));`}
top: ${isPosV} !important;
transform: translateY(-${isPosV}) !important;
height: fit-content !important;
z-index: 4 !important;
}
#new_flybar {
display: flex;
width: var(--ug-toolbar_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-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 {
transform: ${isPosH === 0 ? 'translateX(100%)' : 'translateX(-100%)'};
opacity: 0;
border-width: 0 !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;
}
`;
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);
})();Skript ist unter Zuhilfenahme von KI entstanden.
PS:
Das mit dem Pfeil war wirklich eine blöde Idee,
aber hinterher ist man immer schlauer, heißt es doch, oder?
🦄️🫎️ 
en empfehlen die neueste Ausgabe aus