AutoHide Tab Bar + Address Bar | Show on Hover

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);
        }
    }
})();

n8chavez

Thank you. It is better. I think there is still an issue, though I'm not just if it's this or vivaldi in general. If you open a panel and then move your mouse away from the panel, the space that the panel was taking up is still "blocked out", used. If you manually close the panel, the same way you opened it, that blocked space is gone. Odd.

oudstand

@n8chavez sorry but I can't reproduce your problem. Maybe I don't fully understand it.

n8chavez

As you can see from the image below, the notes panel is expanded and I'm using your js mode. The panel has a certain width.

Screenshot 2024-05-15 103133.png

This screenshot shows the panel closed using the mod by not hovering over it any longer. This is not a manual panel close, which is done by again clicking the panel icon that is currently open. Here, the width of the panel still remains, as though it were open. But it's not open.

Screenshot 2024-05-15 103155.png

That black area on the left doesn't exist if the panel is manually closed.

Screenshot 2024-05-15 104033.png

I hope I explained it well enough.

oudstand

@n8chavez that helps. I was using floating panels and then there is no problem. As a workaround you could use floating panels, then everything works fine. How would you expect would not floating panels behave?

n8chavez

I guess I'd assume both manually closing the panel and automatically closing the panel, using your mod, would behave the same way; without the black area being there. If it's not being used why take up the space?

oudstand

@n8chavez that's a bit tricky. I'll take a look soon. As mentioned if you use floating panels (you can enable it via settings or quick command F2) then it already works fine.

KushalAgarwal

Heyy I'm kind of a noob so can anyone explain how to do this on linux? I couldn't find browser.html and how do I link it to it?

Aaron

@KushalAgarwal
As I recall browser.html was the file used in the old version, which is no longer available. You just need to focus on /opt/vivaldi/resources/vivaldi/window.html

KushalAgarwal

Ok thanks! But where do I put the .js file?

DoctorG

@KushalAgarwal https://forum.vivaldi.net/topic/10549/modding-vivaldi

gryzor

Maybe the OP should be updated with the newest code? Too many snippets floating in this thread

That said, looks awesome, gonna try this now!

KushalAgarwal

It's amazing but is there any way to like make the hover transition smoother?

oudstand

I've improved the look a bit and also the transition should look better now.

/**
 * 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
        bookmarkBarPadding = '6px', // 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 || 0)}px); 
                    opacity: 0;
                }
            }

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

            #header .vivaldi {
                margin-top: 3px;
            }

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

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

            .bookmark-bar-top-off .mainbar {
                padding-bottom: 5px;
                background: var(--colorAccentBg);
            }

            .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 (bookmarkBarPadding) {
        style += `.fullscreen-listener-enabled .bookmark-bar {
            height: auto;
            padding-top: ${bookmarkBarPadding};
            padding-bottom: calc(${bookmarkBarPadding} / 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);
        }
    }
})();

vascormbaptista

some really weird behaviour is happening, it does not happen all the time but, sometimes, if I hover to the absolute top it will show the address bar, but when I go to hover on the actual address to change it, it closes, and it does not seem to be fixed unless i close the browser...

tryptech

@oudstand The functionality is great, but when I use this with a modified window.html, it breaks new windows, addon popup windows, settings in a new window, etc.

oudstand

@tryptech what do you mean with "it breaks"?

tryptech

@oudstand This is a new window:

I am unable to drag it around nor interact with it (ctrl+l, ctrl+t, ctrl+n, shortcuts generally don't work.

This is a settings window:

Similar problems to the new window. I am unable to interact with it. If settings opens in a tab instead, it functions normally.

oudstand

@tryptech You're sure it's caused by this mod? I never had this problems.

tryptech

@oudstand Yes, I believe it's this mod. I did a fresh install of Vivaldi on another computer, no signing in, no addons, no extensions, and the exact same behavior happens.

Vivaldi 6.8.3381.48 on Windows 11 23H2 and 24H2

EDIT: I was loading the JS in the <head> of window.html. Moving it to <body> fixed it, disregard the issue.