Overlay panels

MatyCZ

@altcode @Kein @luetage fullscreen and right side fix:

#main .inner {
	position: relative;
}

 /* Overlay */
#panels-container {
	position: absolute;
	z-index: 1;
	top: 1px;
	bottom: 0;
}
#panels-container.right {
	right: 0;
}

 /* Overlay - Sides */
#main.left #webview-container {
	margin-left: 34px;
}
#main.right #webview-container {
	margin-right: 34px;
}

 /* Fullscreen */
#browser.fullscreen #webview-container {
	margin-left: 0;
	margin-right: 0;
}
#browser.fullscreen #panels-container {
	position: relative;
}

AltCode

@matycz Thanks! This works so much better.

Recnamoruen

@valaya I would somehow love to be able to do this.

retoree

@recnamoruen ~~I did it. Only few tests, to make sure it's work as intended everywhere. Here we go!~~
Please, try this custom JS mod made by @luetage.

/* SIDEBAR */
#main .inner {
    position: relative;
}
#panels-container {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
}
#browser:not(.minimal-ui) .toolbar-addressbar.toolbar {
    z-index:3
}
#panels-container.right {
    right: 0;
}
#panels-container.left + #webview-container, #panels-container.left ~ #tabs-container.left {
    margin-left: 34px;
}
#panels-container.right ~ #webview-container, #panels-container.right ~ #tabs-container.right {
    margin-right: 34px;
}
#browser.tabs-right #webview-container {
    margin-right: 0;
}
#panels-container.left.switcher + #webview-container, #panels-container.left.switcher ~ #tabs-container.left {
    margin-left: 0;
}
#panels-container.right.switcher ~ #webview-container, #panels-container.right.switcher ~ #tabs-container.right {
    margin-right: 0;
}
#browser.tabs-right #webview-container {
    margin-right: 0;
}
#browser.fullscreen #webview-container, #browser.fullscreen #tabs-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
#browser.fullscreen #panels-container {
    position: relative;
}

luetage

@gshawm Tell us which version you are on, what code you are using, and what other mods you have implemented. Otherwise no one will be able to look into this.

luetage

@gshawm I deleted all of my css and put your code in. Overlaying panels works as expected. I'm on 1.13 too, although the snapshot. But it makes no difference since snapshot and stable are, for the moment, basically the same version. This leads me to believe that you either have an error in your implementation with browser.html, or it's a windows issue I cannot test.

Edit: Go into the application directory and post your current contents of browser.html, just to make sure.

luetage

I don't, I'm European ^^
Well, I don't know if that's the cause, but write the custom.css line below the common.css line (instead of above) and save, just to make sure that this is not your issue.

iAN CooG

@gshawm said in Overlay panels:

<link rel="stylesheet" href="style/custom.css" />
<link rel="stylesheet" href="style/common.css" />

these are inverted, put custom.css below common.css

luetage

@retoree found a really clean solution for overlaying panels. I wanted to integrate this in my setup, but not permanently, since the standard panel behaviour makes sense in many situations. That's why I coded a button to switch between both modes. It's a javascript mod, which injects the needed css into the browser, right from this script (no additional code in custom.css file needed).

Panel Overlay Toggle

setTimeout(function wait() {
	var adr = document.querySelector(".toolbar-addressbar.toolbar");
	if (adr != null) {


// Panel Overlay Toggle

		var switchS = document.getElementById('switch');
		var btnS = document.createElement('button');
		var svgS = document.createElementNS("http://www.w3.org/2000/svg", "svg");
		var pathS = document.createElementNS("http://www.w3.org/2000/svg", "path");
		var circE = "d: path('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'); fill-rule: evenodd";
		var circD = "d: path('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'); fill-rule: evenodd";
		var csso = '#main .inner{position:relative}#panels-container{position:absolute;z-index:2;top:0;bottom:0}#browser:not(.minimal-ui) .toolbar-addressbar.toolbar{z-index:3}#panels-container.right{right:0}#panels-container.left + #webview-container,#panels-container.left ~ #tabs-container.left{margin-left:34px}#panels-container.right ~ #webview-container,#panels-container.right ~ #tabs-container.right{margin-right:34px}#browser.tabs-right #webview-container{margin-right:0}#panels-container.left.switcher + #webview-container,#panels-container.left.switcher ~ #tabs-container.left{margin-left:0}#panels-container.right.switcher ~ #webview-container,#panels-container.right.switcher ~ #tabs-container.right{margin-right:0}#browser.tabs-right #webview-container{margin-right:0}#browser.fullscreen #webview-container,#browser.fullscreen #tabs-container{margin-left:0 !important;margin-right:0 !important}#browser.fullscreen #panels-container{position:relative}';
		btnS.classList.add('preferences');
		btnS.id = 'overlay';
		btnS.setAttribute("tabindex", "-1");
		svgS.setAttributeNS(null, "width", "26");
		svgS.setAttributeNS(null, "height", "26");
		svgS.setAttributeNS(null, "viewBox", "0 0 26 26");
		switchS.lastChild.style = "margin-top: 0px";
		switchS.insertBefore(btnS,switchS.lastChild);
		btnS.appendChild(svgS);
		svgS.appendChild(pathS);
		
		// startup setting
		var styleS = document.createElement('style');
		styleS.type = 'text/css';
		styleS.innerHTML = '';
		document.getElementsByTagName('head')[0].appendChild(styleS);
		btnS.setAttribute("title", "Enable Overlay");
		pathS.style = circD;
		var mode = 0;
		
		// toggle logic
		document.getElementById('overlay').addEventListener('click', function() {
			if (mode == 0) {
				styleS.innerHTML = csso;
				btnS.setAttribute("title", "Disable Overlay");
				pathS.style = circE;
				mode = 1;
			}
			else {
				styleS.innerHTML = '';
				btnS.setAttribute("title", "Enable Overlay");
				pathS.style = circD;
				mode = 0;
			}
		});


	}
	else {
		setTimeout(wait, 300);
	}
}, 300);

A few notes:

The overlay toggle button is at the bottom of the panel container (above preferences button) and has two states. 2 rings means enabled, 1 ring/donut shape means disabled.

The startup setting section in the code determines which mode your panel starts up with (new window, browser restart, etc.). Above code starts up in standard mode and you have to press the button to get into panel overlay mode. If you want to startup with overlay mode, replace the startup setting section with following code:

                // startup in overlay mode
		var styleS = document.createElement('style');
		styleS.type = 'text/css';
		styleS.innerHTML = csso;
		document.getElementsByTagName('head')[0].appendChild(styleS);
                btnS.setAttribute("title", "Disable Overlay");
		pathS.style = circE;
		var mode = 1;

If you are running any other javascript mods, which rely on a timeout function, you can just use a single timeout function and run both mods inside it. There is really no reason to have two different functions doing the same thing (waiting for Vivaldi to load the UI).
This code can be used to inject any css really. It's a good way to toggle mods and might be of help in other projects.

I hope you guys find this useful ^^

iAN CooG

@luetage It doesnt' work for me, I've tried it as standalone custom.js and no custom.css, no visible change, no extra button. Vivaldi 1.13 on win7.

luetage

@ian-coog Hmm, interesting. I just did the same to check if my setup was enabling something that isn't possible for others. Deleted my custom.css, deleted my custom.js code, pasted the code from my post -- and it works.... hard to tell what's going wrong for you. I'm on latest snapshot and osx.

Do you even see the button? If not inspect and check console if you get any errors.

iAN CooG

@luetage thanks for the tip on actually checking the console, I failed to copy whole code, last line was missing. Now I actually see the button and it's toggling the overlay status. Still, if "use animation" is on, it's wobbling a bit the screen everytime I activate it as overlay. Not a biggie.

luetage

@ian-coog The wobbling you are describing happens because of the css, has nothing to do with the javascript mod. It's the different margins and the fact the panel container itself doesn't overlay, but only the panels.

luetage

I updated the code, didn't really like the full circle for "enabled" and exchanged the svg -- new image in original post. Also changed the button titles to explain what they are doing.

luetage

I thought about the wobbling @iAN-CooG mentioned, caused by the top:1px command in @retoree's code when switching between modes. My thinking is this error isn't caused by the overlay code, but it's an error in Vivaldi's code. The panel always overlaps the address bar, when running Vivaldi normally, just no one notices, because the address bar hides this mistake. Therefore it would be logical to take the command out of retoree's code and run it separated just in the standard custom.css file by default. Doing this nothing "wobbles" when switching modes, and everything works normally and as it should. We could potentially just file a bugreport for this and see, if the Vivaldi devs fix it.

Anyway, if anyone wants a fix right now: Cut
.address-top.bookmark-bar-bottom #panels-container,.address-top.bookmark-bar-off #panels-container{top: 1px} from the javascript mod and copy it into your custom.css file.

In the meantime I would like to know what everyone thinks about this (could as well be I'm wrong), and if we should file a bugreport for it.

AltCode

@luetage This doesn't remove the wobbling, it's still there, but the only difference is that it's now at the bottom near the status bar rather than the top.

luetage

@altcode You're correct -- but I have no explanation right now gotta look into it.

edit: this does the trick

/* panel overlay fix */
.address-top.bookmark-bar-bottom #panels-container, .address-top.bookmark-bar-off #panels-container {
	top: 1px;
	bottom: -1px;
}

Introduces a nice little wobble on bottom, when toggling the bookmarks bar. I wonder if there is a perfect version. Anyway, I think this is Vivaldi's fault

luetage

Seems like the top:1 bit isn't needed at all.
.toolbar-addressbar.toolbar{z-index:2} seems to do the trick nicely. Hides the overlaying part of the panel behind the address bar, and this is also what Vivaldi does in the standard setup. A thank you @sjudenim for pointing out that blaming the devs is no solution Haven't found a downside to this yet, please tell me if you notice anything.

I have edited the overlay panel toggle setup accordingly on page 2.
https://forum.vivaldi.net/topic/10590/overlay-panels/36?page=2

iAN CooG

I'm just testing it again - without even understanding what was wrong with original Christoph142's css mod which perfectly works for me -
Now for me it's wobbling in every case, overlay enabled or disabled, animations disabled helps a bit but still, the original and very simple css mod is perfectly steady.
I've tried changing the panels side on the left, as I prefer them on the right, doesn't help much, the lateral wobbling everytime it's switched on/off it unbearable to me

luetage

@ian-coog Don't know how you managed that. Neither left nor right side "wobbles" with new code anymore. That isn't even possible, because the top: 1px code has been removed.

edit: Oh, you mean lateral. Of course lateral the size of the site content is adjusted, whenever you show or hide the panel container. That was one of the requests in the thread retoree fulfilled. The original code not only overlaps with the address bar, but also the panel container overlaps the site content and hides 34px of it. If you don't care about that you obviously don't need anything else. But even their code could use an addressbar with higher z-index, just to get rid of that one problem. Read the thread and you will understand how we ended up here ^^