Seitennavigation - Fly Out Menü

Mitleser

Update von 00_FlyVertToolbarWithButton_lite.uc.js vom 2025-11-07 gibt es jetzt (und für zukünftige Versionen nur noch) in Beitrag #1 in diesem Thema:
Schaltbare vertikale Overlay-Zusatzleiste !

Horstmann

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.

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 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);

})();

Alles anzeigen

Test Icon: flower-satt.png.zip

Mira_Belle

Horstmann Cool, das ist ja fast so, wie ich mir das vorgestellt habe!

Horstmann

Zitat von Mira_Belle

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.

Mitleser

Update von 00_FlyVertToolbarWithButton_lite.uc.js vom 2025-12-05 gibt es jetzt (und für zukünftige Versionen nur noch) in Beitrag #1 in diesem Thema:
Schaltbare vertikale Overlay-Zusatzleiste !

Mira_Belle

Zitat von Horstmann

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);

})();

Alles anzeigen

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!

Horstmann

Zitat von Mira_Belle

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!

Alles anzeigen

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.

Mira_Belle

Danke Horstmann
Mit margin-inline: 0px !important; das Problem mit der Ausrichtung gelöst!

Und da das Problem mit der Hintergrundfarbe in Deinem vorgeschlagenen Skript,
wie auch in Mitlesers Skript vorhanden war/ist, konnte die Ursache ja nur im Skript
für die eigenen Buttons liegen.
Habe den Fehler lokalisieren können und werde dahingehen alle "Buttons" überarbeiten.

Horstmann

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.

JavaScript

// Toggle newtoolbar 9 rechts/links, extra button instead of hover
// 00_flybar_V9.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 =`

: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);
    margin-inline: 0px calc(0px - 2*var(--ug-fly_border));
    transition: width 0.5s ease, margin 0.5s ease, border-color 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;
}

#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);
    right: calc(0px - var(--ug-fly_border));
    top: calc(0px - 2*var(--toolbarbutton-inner-padding) - 16px - 6px - 0*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-bottom-color: transparent;
}

#flybox_new:not(.fly_InOut_mode) #ntb_flyInOut_btn {
    list-style-image: var(--ug-arrow_left) !important;
    width: calc(var(--ug-newbar_max_width) - 14px);
}

#ntb_flyInOut_btn image {
    margin-block: 6px !important;
}

#flybox_new:not(.fly_InOut_mode) #ntb_flyInOut_btn image {
    --toolbarbutton-inner-padding: 8px 2px !important;
}

/*-  gap filler  -*/

#ntb_flyInOut_btn::before {
    content:"";
    display: flex;
    position: absolute;
    background-color: var(--ug-fly_border_color);
    bottom: calc(0px - var(--ug-fly_border));
    left: calc(0px - var(--ug-fly_border));
    height: var(--ug-fly_border);
    width: var(--ug-fly_border);
    transition: left 0.5s ease !important;
}

#flybox_new:not(.fly_InOut_mode) #ntb_flyInOut_btn::before {
    left: calc(2*var(--ug-fly_border));
}

/*---  left  ---*/

:root:not([customizing]) #flybox_new.fly_left {
    right: unset;
    left: 0px;
}

#flybox_new.fly_left #ntb_flyInOut_btn,
#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;
}

#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 {
    list-style-image: var(--ug-arrow_left) !important;
}


#flybox_new.fly_left #ntb_flyInOut_btn::before {
    right: calc(0px - var(--ug-fly_border));
    transition: right 0.5s ease !important;
}

#flybox_new.fly_left #flybox_new:not(.fly_InOut_mode) #ntb_flyInOut_btn::before {
    right: calc(2*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);

})();

Alles anzeigen

Testicon: icons.zip

Mira_Belle

Die Version aus #22 funktionierte wunderbar!
Von der Optik gefiel sie mir auch.

Nun sehe ich Deine neue Variante, und dachte, cool, übertrage doch einfach den Code für das "Klicken" auf den Pfeil.

Falsch gedacht!!
Das CSS ist ja sowas von anders! Da steige ich nicht durch.
Und leider gefällt mir die Optik nicht!
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.

Horstmann

Zitat von Mira_Belle

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.

button.css.zip

Mira_Belle

Zitat von Horstmann

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.

Schade, aber so sind die "Geschmäcker" halt verschieden.
Is´ so!

Zitat von Horstmann

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 da ich mit CSS irgendwie auf Kriegsfuß stehe, wenn es um so aufwändigen und komplexen Code geht,
bleibe ich erst einmal bei meiner Interpretation Deiner Leiste.

Aber vielen lieben Dank für die zusätzliche Leiste.