AutoHide Tab Bar + Address Bar | Show on Hover

vascormbaptista

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

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...