Panel Toggle to Address Bar

[luetage]

This mod moves the panel toggle from the status- to the address-bar, for easy access. The toggle has 2 states (on/off), and is being displayed directly above the panel. It works for panel on left or right side. If you change the panel position, opening a new window, or a browser restart, is needed for the panel toggle to switch sides.

/* Panel Toggle */

function panelToggle() {
    const adr = document.querySelector('.toolbar-addressbar.toolbar');
    var panel = document.getElementById('panels-container');
    var paneltog = document.querySelector('.paneltogglefooter');
    var panelsvg = document.querySelector('.paneltogglefooter svg');
    var panelpath = document.querySelector('.paneltogglefooter svg path');
    var sright = 'd: path("M20 8v10h-14v-10h14zm-2 8v-6h-4v6h4z")';
    var sleft = 'd: path("M20 8v10h-14v-10h14zm-8 8v-6h-4v6h4z")';
    paneltog.classList.add('button-toolbar');
    paneltog.classList.remove('button-toolbar-small');
    paneltog.style.order = 'unset';
    panelsvg.style.transform = 'none';
    panelsvg.setAttributeNS(null, 'viewBox', '0 0 26 26');

    if (panel.classList.contains('right')) {
        adr.appendChild(paneltog);
        var pof = sright;
        var pon = sleft;
    }
    else {
        adr.insertBefore(paneltog,adr.firstChild);
        var pof = sleft;
        var pon = sright;
    }
    if (panel.classList.contains('switcher')) {
        panelpath.style = pof;
    }
    else {
        panelpath.style = pon;
    }

    paneltog.addEventListener('click', function(event) {
        if (!event.altKey) {
            if (panel.classList.contains('switcher')) {
                panelpath.style = pon;
            }
            else {
                panelpath.style = pof;
            }
        }
    });
};

// Loop waiting for the browser to load the UI. You can call all functions from just one instance.

setTimeout(function wait() {
    const browser = document.getElementById('browser');
    if (browser) {
        panelToggle();
    }
    else {
        setTimeout(wait, 300);
    }
}, 300);

[luetage]

Small update to ensure the panel toggle doesn't trigger on alt-click, which is used to toggle the panel overlay mode on new versions of Vivaldi.

[iAN CooG]

very nice!

[GoldNoway]

@luetage Hey, awesome work! There's just one problem, I tried to install this script along with this one: https://forum.vivaldi.net/topic/22766/attack-on-the-status-bar
In this case, neither of them work and the status bar is back at the bottom

Hope you'll manage to fix that somehow

[luetage]

@goldnoway You can fix it yourself. It's a problem a few people had over the last couple of days with my mods (you could say it's my fault). You gotta delete one of the let adr = {} parts at the beginning of the loop – javascript doesn't like it if variables are declared like this multiple times. And as stated in the mods it's best to bring the loops together (but not needed). Another thing to mind is that code in the status bar mod hides the panel toggle. You gotta look through the css in the javascript file and delete the part that hides the panel toggle in footer, the other mod will then move it to address bar.

[GoldNoway]

@luetage Thanks! Just tried to remove one let adr = {}, then the other one, finally both of them. Unfortunately, that fixes everything except the Panel Toggle

[luetage]

@goldnoway Yeah, as said, for the panel toggle to work you have to unhide the toggle in the status bar mod. If you want to, I can take a look at it. Just paste your custom.js code on https://pastebin.com/ and post the link.

[GoldNoway]

@luetage Thanks! Just did that here: https://pastebin.com/8i9W4D21
Btw, is there a way to show links as in the "Show Status Info Overlay" option of the browser, down left?

[luetage]

@goldnoway This should work: https://pastebin.com/G5HAN5ze

[GoldNoway]

@luetage Given the circumstances, I think I found a way to obtain exactly what I need, I'll just need a little more help, but that shouldn't be hard for you.
My panel toggle is on the left on the address bar. What do I have to do to add a blank space before it, to obtain something like below?

Alternatively, something like that would be great too, perhaps better. Just need to push a little the icon to the right, really:

Thanks again

[luetage]

Try to insert paneltog.style = margin-left: 34px;

[GoldNoway]

@luetage Well, the icon disappeared
Thanks anyway!

[luetage]

@goldnoway If the icon disappeared, this means you have an error in there somewhere. Check console and come back with the error.

[GoldNoway]

@luetage I only found one error, and don't know if it's related:
Failed to load resource: net::ERR_BLOCKED_BY_CLIENT

Well, that's not a problem, unfortunately I had to let go the mod for which I needed to push the icon so I don't need it anymore. Thank you!