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.
Da komme ich vielleicht noch darauf zurück, aber vorerst nicht!
Ich habe mit dem, mit Deinem Skript etwas herumgespielt.
Learning by doing, sozusagen.
Hier mal mein bisheriges Ergebnis, zu dem ich aber noch Fragen hätte!
JavaScript
//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 Path = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
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: 32px;
--ug-newbar_max_width: calc(var(--ug-newbar_inner_width) + 2*var(--ug-fly_border));
--ug-arrow_width: 20px;
--ug-arrow_height: 34px;
--ug-newbar_bg_color: #2b2b2b;
--ug-newbar_radius: 8px;
--ug-fly_border: 3px;
--ug-fly_border_color: orange;
--ug-fly_delay: 3s; /* 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-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: var(--ug-newbar_bg_color);
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-image: url("${Path}/Chevron-left.svg");
-moz-context-properties: fill, fill-opacity;
fill: #fafafa;
background-repeat: no-repeat;
background-size: 16px;
background-position-x: left calc(50% - 0.5*var(--ug-fly_border)) ;
background-position-y: calc(50% - 0px);
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);*/
background-image: url("${Path}/Chevron-right.svg");
-moz-context-properties: fill, fill-opacity;
fill: #fafafa;
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);
})();Es 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!
🦄️🫎️ 
en empfehlen die neueste Ausgabe aus