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-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!