AutoHide Tab Bar + Address Bar | Show on Hover

[oudstand]

@muchosoft replace function addFullScreenListener() { ... } with this:

function addFullScreenListener() {
    app.classList.add("fullscreen-listener-enabled");
    webView.addEventListener("pointerenter", hide);
    hoverDiv.addEventListener("pointerenter", show);
    hidePanels && panelHoverDiv.addEventListener("pointerenter", showLeft);
    hide();
}

[oudstand]

I've fixed the position of the status bar and also added a small gap to the top and bottom of the bookmark bar, when the fullscreen listener is enabled.
If you don't want the spacing above and below the bookmark bar or want to change the size, you can edit the bookmarBarPadding at the top. You can either set the padding to a value you like or set it to bookmarBarPadding = undefined; if you want to remove it.

/**
 * Forum link: https://forum.vivaldi.net/topic/92477/some-javascript-to-automatically-hide-tab-bar-and-address-bar-and-show-them-by-hovering
 * Hides the tab bar and address bar when not hovering
 */
(function checkWebViewForFullscreen() {
    const webView = document.querySelector("#webview-container"),
        hidePanels = true,
        marginLeft = 'var(--edge-like-border-radius) / 2',
        bookmarBarPadding = '3px';

    if (!webView) {
        setTimeout(checkWebViewForFullscreen, 1337);
        return;
    }

    let app = document.querySelector("#app"),
        header = document.querySelector("#header"),
        mainBar = document.querySelector(".mainbar"),
        bookmarkBar = document.querySelector(".bookmark-bar"),
        panelsContainer = document.querySelector("#panels-container"),
        fullscreenEnabled;

    chrome.storage.local.get("fullScreenModEnabled").then((value) => {
        fullscreenEnabled = value.fullScreenModEnabled || value.fullScreenModEnabled == undefined;
        if (fullscreenEnabled) {
            addFullScreenListener();
        }
    });

    vivaldi.tabsPrivate.onKeyboardShortcut.addListener(
        (id, combination) => combination === "Ctrl+Alt+F" && toggleFullScreen()
    );

    let style = `
        .fullscreen-listener-enabled #header, .fullscreen-listener-enabled .mainbar, .fullscreen-listener-enabled .bookmark-bar, .fullscreen-listener-enabled #panels-container { 
            transition: transform .5s, opacity .5s ease-in-out !important; 
        }
        .fullscreen-listener-enabled .mainbar {
            display: block;
        }

        .fullscreen-listener-enabled.hidden-top #header, .fullscreen-listener-enabled.hidden-top .mainbar, .fullscreen-listener-enabled.hidden-top .bookmark-bar { 
            transform: translateY(-${header.offsetHeight + mainBar.offsetHeight + bookmarkBar.offsetHeight}px) !important; 
            opacity: 0;
        }
        .fullscreen-listener-enabled.hidden-panel #panels-container { 
            transform: translateX(-100%); 
            opacity: 0;
        }
        .hidden-panel .panel-group{
            display: none;
        }

        .fullscreen-listener-enabled #main { 
            padding-top: 0 !important; 
        }

        .fullscreen-listener-enabled #header, .fullscreen-listener-enabled .mainbar, .fullscreen-listener-enabled .bookmark-bar { 
            z-index: 7;
        }
        .fullscreen-listener-enabled .mainbar { 
            margin-top: ${header.offsetHeight}px; 
        }
        .fullscreen-listener-enabled .bookmark-bar {
            margin-top: 0;
        }
        .fullscreen-listener-enabled #main, .fullscreen-listener-enabled .inner {
            position: absolute !important;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        .fullscreen-listener-enabled .extensionIconPopupMenu {
            z-index: 8;
        }

        .fullscreen-listener-enabled footer {
            margin-top: auto !important;
        }
    `;

    if (hidePanels) {
        style += `.fullscreen-listener-enabled #webview-container {
            margin-left: calc(-${panelsContainer.offsetWidth}px + ${marginLeft});
        }`;
    }

    if (bookmarBarPadding) {
        style += `.fullscreen-listener-enabled .bookmark-bar {
            height: auto;
            padding-top: ${bookmarBarPadding};
            padding-bottom: ${bookmarBarPadding};
        }`
    }

    const styleEl = document.createElement("style");
    styleEl.appendChild(document.createTextNode(style));

    document.head.appendChild(styleEl);

    const hoverDiv = document.createElement("div");
    hoverDiv.style.height = "9px";
    hoverDiv.style.width = "100vw";
    hoverDiv.style.position = "fixed";
    hoverDiv.style.left = "0";
    hoverDiv.style.top = "0";
    hoverDiv.style.zIndex = "10";
    document.body.insertBefore(hoverDiv, document.body.firstChild);

    const panelHoverDiv = document.createElement("div");
    if (hidePanels) {
        panelHoverDiv.style.height = "100%";
        panelHoverDiv.style.width = "1rem";
        panelHoverDiv.style.position = "fixed";
        panelHoverDiv.style.left = "0";
        hoverDiv.style.zIndex = "10";
        panelsContainer.before(panelHoverDiv);
    }

    function toggleFullScreen() {
        fullscreenEnabled = !fullscreenEnabled;
        fullscreenEnabled ? addFullScreenListener() : removeFullScreenListener();
        chrome.storage.local.set({fullScreenModEnabled: fullscreenEnabled})
    }

    function addFullScreenListener() {
        app.classList.add("fullscreen-listener-enabled");
        webView.addEventListener("pointerenter", hide);
        hoverDiv.addEventListener("pointerenter", showTop);
        hidePanels && panelHoverDiv.addEventListener("pointerenter", showLeft);
        hide();
    }

    function removeFullScreenListener() {
        app.classList.remove("fullscreen-listener-enabled");
        webView.removeEventListener("pointerenter", hide);
        hoverDiv.removeEventListener("pointerenter", showTop);
        hidePanels && panelHoverDiv.removeEventListener("pointerenter", showLeft);
        show();
    }

    function hide() {
        app.classList.add("hidden-top");

        if (hidePanels) {
            app.classList.add("hidden-panel");
        }
    }

    function show() {
        showTop();
        showLeft();
    }

    function showTop() {
        app.classList.remove("hidden-top");
    }

    function showLeft() {
        if (hidePanels) {
            app.classList.remove("hidden-panel");
        }
    }
})();

---

EDIT: fixed property bookmarkBarPadding wasn't used correctly

[vascormbaptista]

Does this work in snapshot? I tried it and it is not working

[oudstand]

I've fixed code that was only intended to work local only.

/**
 * Forum link: https://forum.vivaldi.net/topic/92477/some-javascript-to-automatically-hide-tab-bar-and-address-bar-and-show-them-by-hovering
 * Hides the tab bar and address bar when not hovering
 */
(function checkWebViewForFullscreen() {
    const webView = document.querySelector('#webview-container'),
        hidePanels = true,
        marginLeft = '0px',
        bookmarBarPadding = '3px';

    if (!webView) {
        setTimeout(checkWebViewForFullscreen, 1337);
        return;
    }

    let app = document.querySelector('#app'),
        header = document.querySelector('#header'),
        mainBar = document.querySelector('.mainbar'),
        bookmarkBar = document.querySelector('.bookmark-bar'),
        panelsContainer = document.querySelector('#panels-container'),
        fullscreenEnabled;

    chrome.storage.local.get('fullScreenModEnabled').then((value) => {
        fullscreenEnabled = value.fullScreenModEnabled || value.fullScreenModEnabled == undefined;
        if (fullscreenEnabled) {
            addFullScreenListener();
        }
    });

    vivaldi.tabsPrivate.onKeyboardShortcut.addListener((id, combination) => combination === 'Ctrl+Alt+F' && toggleFullScreen());

    let style = `
        .fullscreen-listener-enabled {
            #header, .mainbar, .bookmark-bar, #panels-container { 
                transition: transform .5s, opacity .5s ease-in-out !important; 
            }

            &.hidden-top {
                #header, .mainbar, .bookmark-bar { 
                    transform: translateY(-${header.offsetHeight + mainBar.offsetHeight + bookmarkBar.offsetHeight}px) !important; 
                    opacity: 0;
                    z-index: 7;
                }
            }

            #header, .mainbar, .bookmark-bar { 
                z-index: 7;
            }

            .mainbar {
                display: block;
                margin-top: ${header.offsetHeight}px; 
            }

            #main { 
                padding-top: 0 !important; 
            }

            .bookmark-bar {
                margin-top: 0;
            }

            #main, .inner {
                position: absolute !important;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }

            .extensionIconPopupMenu {
                z-index: 8;
            }

            footer {
                margin-top: auto !important;
            }

            &.hidden-panel #panels-container { 
                transform: translateX(-100%); 
                opacity: 0;
            }
        }

        .hidden-panel .panel-group {
            display: none;
        }
    `;

    if (hidePanels) {
        style += `.fullscreen-listener-enabled #webview-container {
            margin-left: calc(-${panelsContainer.offsetWidth}px + ${marginLeft});
        }`;
    }

    if (bookmarBarPadding) {
        style += `.fullscreen-listener-enabled .bookmark-bar {
            height: auto;
            padding-top: ${bookmarBarPadding};
            padding-bottom: ${bookmarBarPadding};
        }`;
    }

    const styleEl = document.createElement('style');
    styleEl.appendChild(document.createTextNode(style));

    document.head.appendChild(styleEl);

    const hoverDiv = document.createElement('div');
    hoverDiv.style.height = '9px';
    hoverDiv.style.width = '100vw';
    hoverDiv.style.position = 'fixed';
    hoverDiv.style.left = '0';
    hoverDiv.style.top = '0';
    hoverDiv.style.zIndex = '10';
    document.body.insertBefore(hoverDiv, document.body.firstChild);

    const panelHoverDiv = document.createElement('div');
    if (hidePanels) {
        panelHoverDiv.style.height = '100%';
        panelHoverDiv.style.width = '1rem';
        panelHoverDiv.style.position = 'fixed';
        panelHoverDiv.style.left = '0';
        hoverDiv.style.zIndex = '10';
        panelsContainer.before(panelHoverDiv);
    }

    function toggleFullScreen() {
        fullscreenEnabled = !fullscreenEnabled;
        fullscreenEnabled ? addFullScreenListener() : removeFullScreenListener();
        chrome.storage.local.set({fullScreenModEnabled: fullscreenEnabled});
    }

    function addFullScreenListener() {
        app.classList.add('fullscreen-listener-enabled');
        webView.addEventListener('pointerenter', hide);
        hoverDiv.addEventListener('pointerenter', showTop);
        hidePanels && panelHoverDiv.addEventListener('pointerenter', showLeft);
        hide();
    }

    function removeFullScreenListener() {
        app.classList.remove('fullscreen-listener-enabled');
        webView.removeEventListener('pointerenter', hide);
        hoverDiv.removeEventListener('pointerenter', showTop);
        hidePanels && panelHoverDiv.removeEventListener('pointerenter', showLeft);
        show();
    }

    function hide() {
        app.classList.add('hidden-top');

        if (hidePanels) {
            app.classList.add('hidden-panel');
        }
    }

    function show() {
        showTop();
        showLeft();
    }

    function showTop() {
        app.classList.remove('hidden-top');
    }

    function showLeft() {
        if (hidePanels) {
            app.classList.remove('hidden-panel');
        }
    }
})();

---

@vascormbaptista the mod itself should work on the latest Snapshot version. I've fixed a small styling problem. What exactly doesn't work for you?

[vascormbaptista]

@oudstand I just tried this code, it is not working for me either.... do you have discord? maybe you can help me out

[oudstand]

@vascormbaptista you can tell me your problem here, but with out saying what exactly isn't working, I can't help you.

[vascormbaptista]

@oudstand

Adding Functionality (JS)
There is only one single file in Vivaldi that you should ever need to modify. This file is called window.html and located at:

<YOURVIVALDIDIRECTORY>\Application<VERSION>\resources\vivaldi

You should back it up before you fiddle with it.

You did the backup, right? OK, here's the fun part:

Open window.html, and inside the <body> element add the following line:
<script src="custom.js"></script>
You can name the file as you want and also add multiple ones, one line at a time.

Add the custom.js file to the Vivaldi folder (alongside window.html)
-- and you're all set!```
code_text

this is what I did, I added your code to the custom.js script, but it did not work

[oudstand]

@vascormbaptista take a closer look at how to mod Vivaldi and how you can patch Vivaldi with a script (this is optional but easier).

[vascormbaptista]

@oudstand Adding Functionality (JS)
There is only one single file in Vivaldi that you should ever need to modify. This file is called window.html and located at:

<YOURVIVALDIDIRECTORY>\Application<VERSION>\resources\vivaldi

You should back it up before you fiddle with it.

You did the backup, right? OK, here's the fun part:

Open window.html, and inside the <body> element add the following line:
<script src="custom.js"></script>
You can name the file as you want and also add multiple ones, one line at a time.

Add the custom.js file to the Vivaldi folder (alongside window.html)
-- and you're all set!

I followed these steps in the first link you sent me, It did not work.
I tried to folllow the steps in the 2nd link
but I don't understand because this is quite vague

Place this script in the folder which contains the *.js files to install.
Edit the installPath variable to point to your Vivaldi application.
Double‐click the file to install modifications.

i've followed the first two steps but, what should I do with the script? in what format should I save it so I can double click it!?

[oudstand]

For the first approach:
Inside of <YOURVIVALDIDIRECTORY>\Application<VERSION>\resources\vivaldi you create a file and call it custom.js and paste the code I've provided into it. Then you add the line <script src="custom.js"></script> to the window.html. It should look like this:

<!-- Vivaldi window document -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Vivaldi</title>
<link rel="stylesheet" href="style/common.css" />
<link rel="stylesheet" href="chrome://vivaldi-data/css-mods/css" />
</head>
<body>
<script src="custom.js"></script>
</body>
</html>

For the second approach:
you have to save the file as batch file *.bat. Then you can double click and start it. Make sure you use the latest version of the code in patch Vivaldi with a script. I'm using it like this:

:: end Vivaldi ::
taskkill /F /IM vivaldi.exe /T

@echo off
setlocal enabledelayedexpansion

:: This is a list of your Vivaldi installations' Application folders (you can use the Vivaldi folder, too, but it takes longer to find the file):
set installPaths="D:\Anwendungen\Vivaldi\Application" 

:: Don't alter anything below this point ;)



set nrOfInstalls=0
set "SuccessfulPatched=Couldn't Patch :^("

for %%i in (%installPaths%) do (
	<NUL set /p=Searching for newest window.html in %%~dpi... 
	set /a nrOfInstalls=nrOfInstalls+1

	set installPath=%%~dpi
	set latestVersionFolder=

	for /f "tokens=*" %%a in ('dir /a:-d /b /s "!installPath!"') do (
		if "%%~nxa"=="window.html" set latestVersionFolder=%%~dpa
	)

	if not defined latestVersionFolder (
		set cnt=any
		echo.
		echo Couldn't find it. :(
		echo Is !installPath! the correct Vivaldi Application folder?
		echo.
	) else (
		echo Found it.
		echo.

		if exist !latestVersionFolder!\window.bak.html (
			echo Backup is already in place.
		) else (
			echo Creating a backup of your original window.html file.
			copy /y "!latestVersionFolder!\window.html" "!latestVersionFolder!\window.bak.html"
		)
		echo.
	)	
)

findstr /v custom.js "!latestVersionFolder!\window.html" > temp0.txt

setlocal disabledelayedexpansion 


(
  FOR /F "tokens=*" %%A IN (temp0.txt) DO (
  	IF "%%A" EQU "</body>" (
      echo ^<script src="custom.js"^>^</script^>
    )
    ECHO %%A
  )
) >temp.txt


setlocal enabledelayedexpansion 



type *.js > !latestVersionFolder!\custom.js
move /Y temp.txt "!latestVersionFolder!window.html"
del temp0.txt
echo.
echo Copied files^^!


set cnt=0
for %%A in (*.js) do set /a cnt+=1
set "SuccessfulPatched=Succesfully Patched"


echo.
echo.
echo All done^^! :)   !SuccessfulPatched! !cnt! .js files^^!
echo.
echo.

:: Start Vivaldi ::
echo Start Vivaldi^^!
cd ..
cd Application
start vivaldi.exe
timeout 5
exit

Keep in mind to update the installPaths variable.

---

I'm using the approach with the batch file to do the update my JS mods (much easier once you set it up).

[vascormbaptista]

I've tried option 1 and it does not work...

[vascormbaptista]

@vascormbaptista do you have any social media at all? it would be a lot faster to just have a conversation in a chat vs posting images in a forum.........

[oudstand]

@vascormbaptista did you restart your browser?

[oudstand]

@vascormbaptista Maybe we can chat on monday, before I've got no time.

---

EDIT: go to your Vivaldi forum settings and remove the checkbox from "Only allow chat messages from users I follow." then we can chat on Vivaldi forum

[vascormbaptista]

@oudstand done

[oudstand]

@vascormbaptista did you save your settings in at the bottom of the page? I get a notification that you didn't update your settings.

[vascormbaptista]

@oudstand fixed!

[oudstand]

I've added a small delay before showing the hidden elements. In my opinion it's useful if you move the cursor out of the browser and want to avoid showing something accidentally. You can adjust this feature if you set delay = 0; or any time you like. Besides that the code contains some improvements that the tabs weren't clickable because the hover element was positioned on top of them.

/**
 * Forum link: https://forum.vivaldi.net/topic/92477/some-javascript-to-automatically-hide-tab-bar-and-address-bar-and-show-them-by-hovering
 * Hides the tab bar and address bar when not hovering
 */
(function checkWebViewForFullscreen() {
    const webView = document.querySelector('#webview-container'),
        hidePanels = true, // set to false to not hide the panels
        marginLeft = '0', // set to '0' to remove the margin left
        bookmarBarPadding = '3px', // set to '0' to remove the padding around the bookmark bar
        delay = 125; // set to 0 to remove the delay

    if (!webView) {
        setTimeout(checkWebViewForFullscreen, 1337);
        return;
    }

    let app = document.querySelector('#app'),
        header = document.querySelector('#header'),
        mainBar = document.querySelector('.mainbar'),
        bookmarkBar = document.querySelector('.bookmark-bar'),
        panelsContainer = document.querySelector('#panels-container'),
        fullscreenEnabled,
        showLeftTimeout,
        showTopTimeout;

    chrome.storage.local.get('fullScreenModEnabled').then((value) => {
        fullscreenEnabled = value.fullScreenModEnabled || value.fullScreenModEnabled == undefined;
        if (fullscreenEnabled) {
            addFullScreenListener();
        }
    });

    vivaldi.tabsPrivate.onKeyboardShortcut.addListener((id, combination) => combination === 'Ctrl+Alt+F' && toggleFullScreen());

    let style = `
        .fullscreen-listener-enabled {
            #header, .mainbar, .bookmark-bar, #panels-container { 
                transition: transform .5s, opacity .5s ease-in-out !important; 
            }

            &.hidden-top {
                #header, .mainbar, .bookmark-bar { 
                    transform: translateY(-${header.offsetHeight + mainBar.offsetHeight + bookmarkBar.offsetHeight}px) !important; 
                    opacity: 0;
                    z-index: 7;
                }
            }

            .hover-div {
                transition: visibility 0.5s ease-in-out;
            }

            &:not(.hidden-top) .hover-div {
                visibility: hidden;
            }

            #header, .mainbar, .bookmark-bar { 
                z-index: 7;
            }

            .mainbar {
                display: block;
                margin-top: ${header.offsetHeight}px; 
            }

            #main { 
                padding-top: 0 !important; 
            }

            .bookmark-bar {
                margin-top: 0;
            }

            #main, .inner {
                position: absolute !important;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }

            .extensionIconPopupMenu {
                z-index: 8;
            }

            footer {
                margin-top: auto !important;
            }

            &.hidden-panel #panels-container { 
                transform: translateX(-100%); 
                opacity: 0;
            }

            .panel-hover-div {
                transition: visibility 0.5s ease-in-out;
            }

            &:not(.hidden-panel) .panel-hover-div {
                visibility: hidden;
            }
        }

        #app:not(.fullscreen-listener-enabled) {
            .hover-div, .panel-hover-div {
                visibility: hidden;
            }
        }

        .hidden-panel .panel-group {
            display: none;
        }
    `;

    if (hidePanels) {
        style += `.fullscreen-listener-enabled #webview-container {
            margin-left: calc(-${panelsContainer.offsetWidth}px + ${marginLeft});
        }`;
    }

    if (bookmarBarPadding) {
        style += `.fullscreen-listener-enabled .bookmark-bar {
            height: auto;
            padding-top: ${bookmarBarPadding};
            padding-bottom: calc(${bookmarBarPadding} * 2);
        }`;
    }

    const styleEl = document.createElement('style');
    styleEl.appendChild(document.createTextNode(style));

    document.head.appendChild(styleEl);

    const hoverDiv = document.createElement('div');
    hoverDiv.style.height = '1.5rem';
    hoverDiv.style.width = '100vw';
    hoverDiv.style.position = 'fixed';
    hoverDiv.style.left = '0';
    hoverDiv.style.top = '0';
    hoverDiv.style.zIndex = '10';
    hoverDiv.className = 'hover-div';
    document.querySelector('#app').appendChild(hoverDiv);

    const panelHoverDiv = document.createElement('div');
    if (hidePanels) {
        panelHoverDiv.style.height = '100%';
        panelHoverDiv.style.width = '1.5rem';
        panelHoverDiv.style.position = 'fixed';
        panelHoverDiv.style.left = '0';
        panelHoverDiv.style.zIndex = '10';
        panelHoverDiv.className = 'panel-hover-div';
        panelsContainer.before(panelHoverDiv);
    }

    function toggleFullScreen() {
        fullscreenEnabled = !fullscreenEnabled;
        fullscreenEnabled ? addFullScreenListener() : removeFullScreenListener();
        chrome.storage.local.set({fullScreenModEnabled: fullscreenEnabled});
    }

    function addFullScreenListener() {
        app.classList.add('fullscreen-listener-enabled');
        webView.addEventListener('pointerenter', hide);
        hoverDiv.addEventListener('pointerenter', showTop);
        hoverDiv.addEventListener('pointerleave', clearTimeouts);
        if (hidePanels) {
            panelHoverDiv.addEventListener('pointerenter', showLeft);
            panelHoverDiv.addEventListener('pointerleave', clearTimeouts);
        }

        hide();
    }

    function removeFullScreenListener() {
        app.classList.remove('fullscreen-listener-enabled');
        webView.removeEventListener('pointerenter', hide);
        hoverDiv.removeEventListener('pointerenter', showTop);
        hoverDiv.removeEventListener('pointerleave', clearTimeouts);
        if (hidePanels) {
            panelHoverDiv.removeEventListener('pointerenter', showLeft);
            panelHoverDiv.removeEventListener('pointerleave', clearTimeouts);
        }

        show();
    }

    function clearTimeouts() {
        if (showTopTimeout) clearTimeout(showTopTimeout);
        if (showLeftTimeout) clearTimeout(showLeftTimeout);
    }

    function hide() {
        app.classList.add('hidden-top');
        if (hidePanels) app.classList.add('hidden-panel');
    }

    function show() {
        showTop();
        showLeft();
    }

    function showTop() {
        showTopTimeout = setTimeout(() => app.classList.remove('hidden-top'), delay);
    }

    function showLeft() {
        if (hidePanels) {
            showLeftTimeout = setTimeout(() => app.classList.remove('hidden-panel'), delay);
        }
    }
})();

---

EDIT: small bug fix, that the hover div took space while the mod wasn't enabled

[n8chavez]

@oudstand thank you for this! It's really cool. The only issue I have with it is that the space reserved for the panels doesn't enlarge only when needed and contract when not needed. That empty space is still always visible. I tried the newest version, even after the "bugfix", but it was still the same.

Other than that, great job.

[oudstand]

@n8chavez You're right. This code should fix it:

/**
 * Forum link: https://forum.vivaldi.net/topic/92477/some-javascript-to-automatically-hide-tab-bar-and-address-bar-and-show-them-by-hovering
 * Hides the tab bar and address bar when not hovering
 */
(function checkWebViewForFullscreen() {
    const webView = document.querySelector('#webview-container'),
        hidePanels = true, // set to false to not hide the panels
        marginLeft = '0px', // set to '0px' to remove the margin left
        bookmarBarPadding = '3px', // set to '0px' to remove the padding around the bookmark bar
        delay = 125; // set to 0 to remove the delay

    if (!webView) {
        setTimeout(checkWebViewForFullscreen, 1337);
        return;
    }

    let app = document.querySelector('#app'),
        header = document.querySelector('#header'),
        mainBar = document.querySelector('.mainbar'),
        bookmarkBar = document.querySelector('.bookmark-bar'),
        panelsContainer = document.querySelector('#panels-container'),
        fullscreenEnabled,
        showLeftTimeout,
        showTopTimeout;

    chrome.storage.local.get('fullScreenModEnabled').then((value) => {
        fullscreenEnabled = value.fullScreenModEnabled || value.fullScreenModEnabled == undefined;
        if (fullscreenEnabled) {
            addFullScreenListener();
        }
    });

    vivaldi.tabsPrivate.onKeyboardShortcut.addListener((id, combination) => combination === 'Ctrl+Alt+F' && toggleFullScreen());

    let style = `
        .fullscreen-listener-enabled {
            #header, .mainbar, .bookmark-bar, #panels-container { 
                transition: transform .5s, opacity .5s ease-in-out !important; 
            }

            &.hidden-top {
                #header, .mainbar, .bookmark-bar { 
                    transform: translateY(-${header.offsetHeight + mainBar.offsetHeight + bookmarkBar.offsetHeight}px) !important; 
                    opacity: 0;
                    z-index: 7;
                }
            }

            .hover-div {
                transition: visibility 0.5s ease-in-out;
            }

            &:not(.hidden-top) .hover-div {
                visibility: hidden;
            }

            #header, .mainbar, .bookmark-bar { 
                z-index: 7;
            }

            .mainbar {
                display: block;
                margin-top: ${header.offsetHeight}px; 
            }

            #main { 
                padding-top: 0 !important; 
            }

            .bookmark-bar {
                margin-top: 0;
            }

            #main, .inner {
                position: absolute !important;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }

            .extensionIconPopupMenu {
                z-index: 8;
            }

            footer {
                margin-top: auto !important;
            }

            &.hidden-panel #panels-container {
                transform: translateX(-100%); 
                opacity: 0;
            }

            .panel-hover-div {
                transition: visibility 0.5s ease-in-out;
            }

            &:not(.hidden-panel) .panel-hover-div {
                visibility: hidden;
            }
        }

        #app:not(.fullscreen-listener-enabled) {
            .hover-div, .panel-hover-div {
                visibility: hidden;
            }
        }

        .hidden-panel .panel-group {
            display: none;
        }
    `;

    if (hidePanels) {
        style += `.fullscreen-listener-enabled #webview-container {
            margin-left: calc(-${panelsContainer.offsetWidth}px + ${marginLeft});
        }`;
    }

    if (bookmarBarPadding) {
        style += `.fullscreen-listener-enabled .bookmark-bar {
            height: auto;
            padding-top: ${bookmarBarPadding};
            padding-bottom: calc(${bookmarBarPadding} * 2);
        }`;
    }

    const styleEl = document.createElement('style');
    styleEl.appendChild(document.createTextNode(style));

    document.head.appendChild(styleEl);

    const hoverDiv = document.createElement('div');
    hoverDiv.style.height = '1.5rem';
    hoverDiv.style.width = '100vw';
    hoverDiv.style.position = 'fixed';
    hoverDiv.style.left = '0';
    hoverDiv.style.top = '0';
    hoverDiv.style.zIndex = '10';
    hoverDiv.className = 'hover-div';
    document.querySelector('#app').appendChild(hoverDiv);

    const panelHoverDiv = document.createElement('div');
    if (hidePanels) {
        panelHoverDiv.style.height = '100%';
        panelHoverDiv.style.width = '1.5rem';
        panelHoverDiv.style.position = 'fixed';
        panelHoverDiv.style.left = '0';
        panelHoverDiv.style.zIndex = '10';
        panelHoverDiv.className = 'panel-hover-div';
        panelsContainer.before(panelHoverDiv);
    }

    function toggleFullScreen() {
        fullscreenEnabled = !fullscreenEnabled;
        fullscreenEnabled ? addFullScreenListener() : removeFullScreenListener();
        chrome.storage.local.set({fullScreenModEnabled: fullscreenEnabled});
    }

    function addFullScreenListener() {
        app.classList.add('fullscreen-listener-enabled');
        webView.addEventListener('pointerenter', hide);
        hoverDiv.addEventListener('pointerenter', showTop);
        hoverDiv.addEventListener('pointerleave', clearTimeouts);
        if (hidePanels) {
            panelHoverDiv.addEventListener('pointerenter', showLeft);
            panelHoverDiv.addEventListener('pointerleave', clearTimeouts);
        }

        hide();
    }

    function removeFullScreenListener() {
        app.classList.remove('fullscreen-listener-enabled');
        webView.removeEventListener('pointerenter', hide);
        hoverDiv.removeEventListener('pointerenter', showTop);
        hoverDiv.removeEventListener('pointerleave', clearTimeouts);
        if (hidePanels) {
            panelHoverDiv.removeEventListener('pointerenter', showLeft);
            panelHoverDiv.removeEventListener('pointerleave', clearTimeouts);
        }

        show();
    }

    function clearTimeouts() {
        if (showTopTimeout) clearTimeout(showTopTimeout);
        if (showLeftTimeout) clearTimeout(showLeftTimeout);
    }

    function hide() {
        app.classList.add('hidden-top');
        if (hidePanels) app.classList.add('hidden-panel');
    }

    function show() {
        showTop();
        showLeft();
    }

    function showTop() {
        showTopTimeout = setTimeout(() => app.classList.remove('hidden-top'), delay);
    }

    function showLeft() {
        if (hidePanels) {
            showLeftTimeout = setTimeout(() => app.classList.remove('hidden-panel'), delay);
        }
    }
})();