Overlay panels

AltCode

@luetage said in Overlay panels:

Panel Overlay Toggle

Now that version 2.0 is out, could something from this mod be salvaged so that it only adds the overlay toggle?

luetage

@altcode You wanna switch the actual settings with the button? I don't think that's easily possible.

AltCode

@luetage Well that's an awful shame. I'll surely miss that feature from the mod.

luetage

@altcode Yeah, I miss the button too. But when the overlay panel was introduced in Vivaldi, I realised that the mod didn't function perfectly anymore because of underlying changes in the css. I just switched to the Vivaldi panel overlay mode full time.

I tried to remove the overlay class from the panels container – this is the class that is added and removed when you click the radio button in settings, but sadly (and unlike other toggles eg status bar), the class change doesn't stick and the css doesn't switch. What we could try is use the vivaldi overlay by default and add/remove css code for the non overlay mode.

valiowk

@altcode said in Overlay panels:

@luetage said in Overlay panels:

Panel Overlay Toggle

Now that version 2.0 is out, could something from this mod be salvaged so that it only adds the overlay toggle?

Hover over the Show/Hide Panel button and you'll see that Alt-Click functions as overlay toggle.

luetage

Very good catch. I have the status bar moved and the panel toggle removed, that's why I never noticed. So this doesn't help me, but good to know Vivaldi has made it possible from the UI.

luetage

I take it back. This helps, because we can just simulate the alt-click on the panel toggle from our own button in the panels container. This way status bar doesn't need to be visible and we also don't need to use alt to toggle it.

/* Toggle Panel Overlay */

function overlayToggle() {

    function icn() {
        if (cont.classList.contains('overlay') && exec === 0 || !cont.classList.contains('overlay') && exec === 1) {
            pathS.setAttribute('d', circE);
        }
        else {
            pathS.setAttribute('d', circD);
        }
        exec = 1;
    };

    function simulateClick() {
        const toggle = document.querySelector('.paneltogglefooter');
        var evt = new MouseEvent("click", {
            bubbles: true,
            cancelable: true,
            view: window,
            altKey: true
        });
        icn();
        toggle.dispatchEvent(evt);
    };

    var exec = 0;
    const circE = 'M 13 13m -6, 0a 6,6 0 1,0 12,0a 6,6 0 1,0 -12,0 M 13 13m -4, 0a 4,4 0 1,0 8,0a 4,4 0 1,0 -8,0 M 13 13m -2, 0a 2,2 0 1,0 4,0a 2,2 0 1,0 -4,0';
    const circD = 'M 13 13m -5.5, 0a 5.5,5.5 0 1,0 11,0a 5.5,5.5 0 1,0 -11,0 M 13 13m -2, 0a 2,2 0 1,0 4,0a 2,2 0 1,0 -4,0';
    const cont = document.getElementById('panels-container');
    const switchS = document.getElementById('switch');
    var btnS = document.createElement('button');
    btnS.classList.add('preferences');
    btnS.id = 'overlayToggle';
    btnS.title = 'Toggle Overlay';
    btnS.setAttribute('tabindex', '-1');
    btnS.innerHTML = '<svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd"></path></svg>';
    switchS.lastChild.style = 'margin-top: 0px';
    switchS.insertBefore(btnS,switchS.lastChild);
    const pathS = document.querySelector('#overlayToggle svg path');
    icn();
    document.getElementById('overlayToggle').addEventListener('click', simulateClick);
};

// 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) {
        overlayToggle();
    }
    else {
        setTimeout(wait, 300);
    }
}, 300);

I quickly hacked this together from my original code, can probably be improved, but it works. It's good to have the button back, I missed it

Update – turns out I used a deprecated but still functioning version of mouse events originally, changed it to the new version.

AltCode

@luetage Great! Just one small problem though. The simulated alt-click seems to trigger the on/off state from one of your other mods, Panel Toggle to Address Bar.

luetage

@altcode Oh lol, makes sense because the toggle is actually clicked and Vivaldi doesn't account for this because they only have 1 button state for the toggle. I'll take a look at it.

Kein

Anyone has Working CSS for just permanent overlay for latest version?

luetage

@Kein Permanent overlay is an inbuilt Vivaldi function. No need to introduce a modification.

AltCode

@luetage This broke with the latest snapshots. Do you think will still fix it?

luetage

@AltCode It was the first mod I tried to fix when the changes hit. There are 2 issues: First of all the status bar is inaccessible when it's disabled, the html just isn't there, therefore we have no access to the panel toggle. But secondly, and more importantly, simulating clicks on the new toolbar buttons doesn't work and I don't know why. Personally I let it go and use the keyboard shortcut to toggle panel floating at the moment.

AltCode

@luetage said in Overlay panels:

But secondly, and more importantly, simulating clicks on the new toolbar buttons doesn't work and I don't know why.

Option-clicking on the panel button completely broke in the 2.4 snapshots. Maybe that's why you couldn't simulate it?

luetage

@AltCode No it didn't, or better, it wasn't. You just found a regression introduced by one of the latest releases. Option clicking is indeed broken now, but when I tried to fix the mod it still worked. In any case, even simulating just a left click doesn't work (without any modifiers).

luetage

@AltCode Ok, all credit to helmers for giving insight, click events can be simulated with pointerdown and pointerup now, the mod works again. The one thing you have to do, if you don't keep the status bar at all times visible is moving the panel toggle to the address bar. In the address bar it's being hidden with css but can still be targeted by the javascript. To get back the paneltoggle in the status bar you can just reset the status bar with right click. This effectively doubles the paneltoggle (one hidden in address bar, one visible in status bar).

/* Panel Overlay Toggle */

function overlayToggle() {

    function icn() {
        if (cont.classList.contains('overlay') && exec === 0 || !cont.classList.contains('overlay') && exec === 1) {
            pathS.setAttribute('d', circE);
        }
        else {
            pathS.setAttribute('d', circD);
        }
        exec = 1;
    };

    function simulateClick() {
        const toggle = document.querySelector('.panel-clickoutside-ignore button');
        var down = new PointerEvent('pointerdown', {
            bubbles: true,
            cancelable: true,
            pointerType: "mouse",
            altKey: true
        });
        var up = new PointerEvent('pointerup', {
            bubbles: true,
            cancelable: true,
            pointerType: "mouse",
            altKey: true
        });
        icn();
        toggle.dispatchEvent(down);
        toggle.dispatchEvent(up);
    };

    var exec = 0;
    const style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = '.toolbar-addressbar .panel-clickoutside-ignore.button-toolbar {width: 0px !important;visibility: hidden;}';
    document.getElementsByTagName('head')[0].appendChild(style);
    const circE = 'M 13 13m -6, 0a 6,6 0 1,0 12,0a 6,6 0 1,0 -12,0 M 13 13m -4, 0a 4,4 0 1,0 8,0a 4,4 0 1,0 -8,0 M 13 13m -2, 0a 2,2 0 1,0 4,0a 2,2 0 1,0 -4,0';
    const circD = 'M 13 13m -5.5, 0a 5.5,5.5 0 1,0 11,0a 5.5,5.5 0 1,0 -11,0 M 13 13m -2, 0a 2,2 0 1,0 4,0a 2,2 0 1,0 -4,0';
    const cont = document.getElementById('panels-container');
    const switchS = document.getElementById('switch');
    var btnS = document.createElement('button');
    btnS.classList.add('preferences');
    btnS.id = 'overlayToggle';
    btnS.title = 'Toggle Overlay';
    btnS.setAttribute('tabindex', '-1');
    btnS.innerHTML = '<svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd"></path></svg>';
    switchS.lastChild.style = 'margin-top: 0px';
    switchS.insertBefore(btnS,switchS.lastChild);
    const pathS = document.querySelector('#overlayToggle svg path');
    icn();
    document.getElementById('overlayToggle').addEventListener('click', simulateClick);
};

// 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) {
        overlayToggle();
    }
    else {
        setTimeout(wait, 300);
    }
}, 300);

AltCode

@luetage Now all I have to do is wait for alt-clicking to be fixed; the mod currently doesn't work in the stable version because of this bug, but in the latest snapshot it works as intended.

The one thing you have to do, if you don't keep the status bar at all times visible is moving the panel toggle to the address bar. In the address bar it's being hidden with css but can still be targeted by the javascript.

I personally keep the panel toggle in the address bar (your other mod was greatly appreciated btw). If I delete the following line, will the mod stop hiding the button from the address bar or is there anything else that I need to remove?

style.innerHTML = '.toolbar-addressbar .panel-clickoutside-ignore.button-toolbar {width: 0px !important;visibility: hidden;}';

luetage

@AltCode You can take the whole passage out, everything between var exec = 0; and const circE = ...

nparekh

This post is deleted!

Kein

@luetage said in Overlay panels:

@Kein Permanent overlay is an inbuilt Vivaldi function. No need to introduce a modification.

That is not exactly true. When you bring up the sidebar it still reduces viewport by the bar size. It is quite annoying. I'd change the css myself but the trick for inspection of vivaldi elements with dev tools does not work for me and never worked.