Autohiding fullscreen UI


  • Moderator

    Sometimes I'm like "if I could just quickly switch to that one tab..." in fullscreen mode. But there's no UI. Of course, it's fullscreen. But what if there was? :cool:

    This mod makes Vivaldi's UI autohide instead of vanish in fullscreen mode. B)

    CSS:

    /* Declare variables: */
    #browser {
        --header-height: 37px;
        --header-height-offset: -36px;
    }
    #browser.tabs-top.tabs-at-edge {
        --header-height: 30px;
        --header-height-offset: -29px;
    }
    #browser.tabs-left, #browser.tabs-right, #browser.tabs-bottom {
        --header-height: 25px;
        --header-height-offset: -24px;
    }
    
    /* Style: */
    #browser.fullscreen.win #header {
    	display: block;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 1;
        background: var(--colorBg);
        transition: top 200ms;
        box-shadow: 0 0 1px #000;
    }
    
    #browser.fullscreen.win.tabs-left #header,
    #browser.fullscreen.win.tabs-right #header,
    #browser.fullscreen.win.tabs-bottom #header {
    	background: var(--colorAccentBg);
    }
    
    #browser.fullscreen:not(.fullscreenHoverUI) #header {
    	top: var(--header-height-offset);
    }
    
    #browser.fullscreen:not(.fullscreenHoverUI) #header,
    #browser.fullscreen:not(.fullscreenHoverUI) #tabs-container,
    #browser.fullscreen:not(.fullscreenHoverUI) .toolbar-addressbar,
    #browser.fullscreen:not(.fullscreenHoverUI) #panels-container,
    #browser.fullscreen:not(.fullscreenHoverUI) #main #tabs-container.left,
    #browser.fullscreen:not(.fullscreenHoverUI) #main #tabs-container.right,
    #browser.fullscreen:not(.fullscreenHoverUI) #main #tabs-container.bottom {
    	opacity: 0;
    	transition: top 200ms 500ms, right 200ms 500ms, bottom 200ms 500ms, left 200ms 500ms, opacity 0ms 700ms;
    }
    
    #browser.fullscreen.win #header > #tabs-container
    {
    	display: flex;
    }
    
    #browser.fullscreen #main #tabs-container.left,
    #browser.fullscreen #main #tabs-container.right,
    #browser.fullscreen #main #tabs-container.bottom {
    	display: flex;
    	transition: top 200ms, right 200ms, bottom 200ms, left 200ms;
    }
    #browser.fullscreen #main #tabs-container {
    	z-index: 1;
        position: fixed;
        bottom: 0;
        background: var(--colorBg);
    }
    #browser.fullscreen:not(.fullscreenHoverUI) #main #tabs-container.left {
        left: -100%;
    }
    #browser.fullscreen.fullscreenHoverUI #main #tabs-container.left {
        left: 0;
    }
    #browser.fullscreen #main #tabs-container.left, #browser.fullscreen #main #tabs-container.right {
        top: 59px;
    }
    #browser.fullscreen:not(.fullscreenHoverUI) #main #tabs-container.right {
        right: -100%;
    }
    #browser.fullscreen.fullscreenHoverUI #main #tabs-container.right {
        right: 0;
    }
    #browser.fullscreen:not(.fullscreenHoverUI) #main #tabs-container.bottom {
        bottom: -100%;
    }
    #browser.fullscreen #main #tabs-container.bottom {
        right: 0;
        left: 0;
    }
    
    #browser.fullscreen.win #header button.window-maximize::before {
    	position: relative;
    	top: 4px;
        left: -3px;
    	content: "↗";
    }
    #browser.fullscreen.win.win10 #header button.window-maximize::before {
        left: 8px;
    }
    #browser.fullscreen.win #header button.window-maximize::after {
    	position: relative;
    	top: -36px;
        left: 4px;
    	content: "↙";
    }
    #browser.fullscreen.win.win10 #header button.window-maximize::after {
    	top: -4px;
        left: -8px;
    }
    
    /* address bar */
    #browser.fullscreen.win #main .toolbar-addressbar {
    	display: flex;
    	position: fixed;
    	right: 0;
        left: 0;
        top: -40px;
    	z-index: 1;
    }
    #browser.fullscreen.fullscreenHoverUI.win #main .toolbar-addressbar {
    	transition: 200ms;
    	top: var(--header-height);
    }
    #browser.fullscreen.fullscreenHoverUI.win.tabs-left #main .toolbar-addressbar,
    #browser.fullscreen.fullscreenHoverUI.win.tabs-right #main .toolbar-addressbar,
    #browser.fullscreen.fullscreenHoverUI.win.tabs-bottom #main .toolbar-addressbar {
    	top:25px;
    }
    
    #browser.fullscreen.win #header > #tabs-container
    {
    	display: flex;
    }
    
    /* Remove spacing at edge of window: */
    
    #browser.win.win10.tabs-at-edge.fullscreen.tabs-top #header #titlebar .window-buttongroup button {
        height: 30px
    }
    .fullscreen.tabs-at-edge #tabs-container.top {
        padding-top: 0
    }
    .fullscreen.tabs-at-edge #tabs-container.bottom {
        padding: 0
    }
    .fullscreen.tabs-at-edge #tabs-container.bottom .tab-strip {
        margin: 0
    }
    .fullscreen.tabs-at-edge #tabs-container.top .tab-group-indicator {
        top: -2px
    }
    .fullscreen.tabs-at-edge #tabs-container.bottom .tab-group-indicator {
        bottom: -3px
    }
    #browser.win.fullscreen.tabs-at-edge .vivaldi {
        height: 30px
    }
    
    /* fullscreen button * /
    #browser.fullscreen.win #header button.window-fullscreen {
    	display: none;
    }
    
    #browser:not(.fullscreen).win.win10 #tabs-container.top {
        padding-right: 190px;
    }
    
    #browser:not(.fullscreen).win #tabs-container.top {
        padding-right: 150px;
    }*/
    

    JS:

     (function initialize() {
    	var windowbuttons = document.querySelector("#titlebar .window-buttongroup");
    	if (windowbuttons === null) {
    		window.setTimeout(initialize, 200);
    		return;
    	}
    
    	var fullscreenButton = document.createElement("button");
    	fullscreenButton.tabindex = -1;
    	fullscreenButton.className = "window-fullscreen";
    	fullscreenButton.innerHTML = "⤢";
    	fullscreenButton.addEventListener("click", function(){
    		if (typeof(document.body.requestFullscreen) === "function")	document.body.requestFullscreen();
    		else 														document.body.webkitRequestFullscreen();
    	}, false);
    
    	//windowbuttons.insertBefore(fullscreenButton, windowbuttons.firstChild); // needs app.window.fullscreen permission
    
    	document.querySelector("#webview-container").addEventListener("mouseleave", showUIinFullscreen, false);
    	document.querySelector("#webview-container").addEventListener("mouseenter", hideUIinFullscreen, false);
    
    	document.querySelector("button.window-maximize").addEventListener("click", leaveFullscreen, true);
    
    	document.addEventListener("keyup", function(e) {
    		if (e.key === "F11" && e.shiftKey === true)	{
    			if(document.querySelector("#browser.fullscreenHoverUI") === null)	showUIinFullscreen();
    			else																hideUIinFullscreen();
    		}
    	}, false);
    })();
    
    function showUIinFullscreen() {
        if(document.querySelector("#browser.fullscreen") === null)	return;
    
        document.querySelector("#browser").classList.add("fullscreenHoverUI");
    }
    
    function hideUIinFullscreen() {
    	document.querySelector("#browser").classList.remove("fullscreenHoverUI");
    }
    
    function leaveFullscreen() {
    	if 		(typeof(document.exitFullscreen) === "function") 		document.exitFullscreen();
    	else if (typeof(document.webkitExitFullscreen) === "function")	document.webkitExitFullscreen();
    }
    

    How to use:

    1. switch to fullscreen mode
    2. move your mouse to any corner of your screen or press {{Shift+F11}}

    Known "issues":

    • only tested on Windows
    • You need to double-click the "exit fullscreen" button (it has no functionality of its own - it triggers a native restore)
    • the internal patch that hides the cursor in fullscreen mode makes the UI show - you can use the {{Shift+F11}} shortcut for hiding it


  • GREAT work! :)

    Is there any way to make it retain the "Remove Tab Spacing in Maximized Windows" setting?
    Right now there's a gap above the tabs that I'd love to get rid off.

    Thanks in advance!

    Kris


  • Moderator

    Hi Kris,

    I added support for it and updated the script above ;)
    Note however, that this doesn't actually make switching tabs at the edge possible as there seems to be an about 5px tall unresponsive strip at the very top that also doesn't react to hover or right-clicks.



  • Thanks, that looks a lot better!
    The 5px unresponsive strip at the top is slightly annoying, but I guess I'll have to live with that ;)

    A few questions:

    1: See the horizontal line between the tabs and address bar:

    What do I need to change to fix this? :)
    http://image.prntscr.com/image/ba4b2007a2d64c588e5ac17630852b7e.png
    (for some reason it won't let me insert the screenshot into the post as an image).

    2. Is there any way to make the UI slide down at the press of a keyboard button?
    Say, if I press my keyboard macro for Focus Address Field, could this make the UI appear (without going out of fullscreen)?

    Kris



  • First of all I want to thank for making this awsm script
    but rightnow It's really buggy will you able to fix it Christoph142
    Plz see this gifv too see what's exactly I am dealing with!!
    https://gfycat.com/ImpassionedFaroffIriomotecat


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.