AutoHide Tab Bar + Address Bar | Show on Hover

oudstand

@Luigi745 I've to check it out, but it's always difficult to add support for an other mod from a different person.

Luigi745

@oudstand said in AutoHide Tab Bar + Address Bar | Show on Hover:

@Luigi745 I've to check it out, but it's always difficult to add support for an other mod from a different person.

Anyway, thank you very much @oudstand for your commitment towards this community.

Majistic12

I tried for hours to get this to work, I don't understand anything at all, first of, how do I launch/execute the java script? how do I make sure its turned on? I went online and it says allow javascripts, okay, I did that, I have the java script, what do I do now? do I make a script to make the javascript work? it's a very unclear guide personally for me.

I don't know what to do on how to get this java script to run. Please tell me step by step because your demo is what I am exactly looking for and want.

TeacherManDan

@oudstand Hi, sorry for the delayed reply! So not the panel, but like right now mine goes from this

to this

daoziz

Hello, I have a couple of questions:

How can I hide only the address bar without hiding the tab bar?

When using a vertical tab bar, does this code still work?

CummingCowGirl

@daoziz said in AutoHide Tab Bar + Address Bar | Show on Hover:

How can I hide only the address bar without hiding the tab bar?

Auto-hiding the address bar would be nice to get the space for pages til I actually need the address bar. I have my address bar still at the top and tab bar on the bottom.

daoziz

This post is deleted!

daoziz

This post is deleted!

daoziz

@oudstand

The older version you provided previously allows the vertical tab bar to remain visible, but it hides the webpage title bar at the top of the browser. Additionally, elements like the address bar and panel bar that appear when triggered lack a proper background (they are transparent). Could you create a new version with the following options:

An option to keep the vertical tab bar always visible

An option to keep the top title bar always visible

Ensure triggered elements (e.g., address bar, panel bar) retain their normal background

This would create a perfect experience for me.

Moreover, triggering the bookmark bar is particularly difficult, likely due to its extremely narrow activation zone. It would be greatly appreciated if you could add an option to manually adjust the trigger area size for these auto-hidden elements.

I apologize for the numerous requests. I attempted to modify your code using ChatGPT to achieve these goals—I spent dozens of hours communicating with it, repeatedly asking for code revisions. I nearly drove it insane, but ultimately, we failed. We couldn’t produce functional code modifications, so I have no choice but to seek your assistance.

oudstand

@Majistic12 you can find a guide on how to apply JS mods here: https://forum.vivaldi.net/topic/10549/modding-vivaldi

oudstand

@TeacherManDan I can't reproduce this problem. With the mod enabled I still see the vertical tabs as on your first screen shot.

oudstand

@daoziz this code does work with vertical tabs and you can also avoid hiding the tabs if you set hideTabs to false.

To avoid specific elements from hiding requires a lot of work and testing since it isn't easy because every one has a different setup. Tabs can be top/left/right/bottom, address bar top/bottom, bookmarks top/bottom, some elements are hidden etc.

I've to take a look on this later because currently I don't have time for it.

EDIT: if you set updateHoverDivSize to false the size of the hovering elements are larger.

daoziz

@oudstand said in AutoHide Tab Bar + Address Bar | Show on Hover:

@daoziz this code does work with vertical tabs and you can also avoid hiding the tabs if you set hideTabs to false.

To avoid specific elements from hiding requires a lot of work and testing since it isn't easy because every one has a different setup. Tabs can be top/left/right/bottom, address bar top/bottom, bookmarks top/bottom, some elements are hidden etc.

I've to take a look on this later because currently I don't have time for it.

EDIT: if you set updateHoverDivSize to false the size of the hovering elements are larger.

Thank you for your reply! Regarding the browser title bar removal issue, I discovered that deleting position: absolute from .mainbar in function generalCSS() restores the title bar. However, this is clearly not an ideal fix—while the title bar reappears, the title text remains missing (the bar is empty). I’m unsure if this introduces other issues, but I look forward to your improvements in the future.

Additionally, while the updateHoverDivSize option does address the narrow trigger zones, the absence of the title bar creates a new problem: accidental triggering at the top-left corner when switching workspaces.

Root Cause:
The original title bar occupied a horizontal space, which pushed the vertical tab bar’s content (workspaces + tabs) downward, preventing accidental activation of the address bar.

In the current version, however, the title bar is removed, causing the workspace list to move to the very top. Adjusting updateHoverDivSize (to enlarge trigger zones) now makes it easy to accidentally trigger the address bar during workspace switching. Conversely, not adjusting it leaves the bookmark bar extremely hard to activate. This trade-off stems directly from the missing title bar.

Conclusion:
I hope the browser title bar can be retained (or made optional via a toggle). The webpage title itself serves a purpose, and its presence also helps prevent accidental triggers.

Of course, there’s no rush—please address this at your convenience. I apologize if any part of my explanation is unclear or incorrect due to my lack of coding knowledge and limited English. Thank you again for your assistance!

binite12

does this work anymore? I tried to add it but it doesn't seem to work...

DaniloAsanin

Hey! Love what you're doing with this mod, @oudstand - it's been a great addition since I discovered you can mod Vivaldi up the wazoo.

Could we get the latest stable version? I think I might've grabbed an older one, and honestly, I'd rather not dig through the entire thread trying to figure out if a deprecated version is what's causing my issue. Much appreciated! ️

Now onto the actual problem:
Whenever I open a new tab to the Start Page, the tab bar hides as expected, but the address bar stays visible. I prefer using the Start Page search instead, so ideally, the address bar should hide too.

Also - I sometimes use Vivaldi in fullscreen mode. Would it be possible to optimize the mod to behave the same way there as it does in normal mode?

Thanks again for your work!

oudstand

@daoziz I'll take a look at it

@DaniloAsanin thank you
That the address bar stays visible is a feature, but you can disable it if you set showAddressBarOnFocus to false at the top of the code.

Regarding the fullscreen mode: shouldn't it be the same if you just maximize the window and use this mod? I don't think it makes much sense to use both this mod and fullscreen. Since Vivaldi automatically hides all elements I'm not sure if I can get them back.

Latest code:

/**
 * 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'),
        bookmarkBarPadding = '6px', // set to '0px' to remove the padding around the bookmark bar
        showDelay = 125, // set to 0 to remove the delay
        hideDelay = 250, // set to 0 to remove the delay
        alwaysShowAddressBar = false, // always shows the address bar - set to true to enable the feature
        showAddressBarOnFocus = false, // shows the address bar on a new tab or if in focus - set to false to disable the feature
        showAddressBarPadding = 15, // moves the address bar on a new tab or if in focus to - positive and negative values are allowed
        updateHoverDivSize = false, // decreases the size for the hover divs in fullscreen mode - set ti false to disable the feature
        hidePanels = true, // set to false to not hide the panels
        hideTabs = true; // set to false to not hide the tabs - currently only works with vertical tabs

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

    const positions = ['top', 'bottom', 'left', 'right'],
        app = document.querySelector('#app'),
        browser = document.querySelector('#browser'),
        header = document.querySelector('#header'),
        mainBar = document.querySelector('.mainbar'),
        bookmarkBar = document.querySelector('.bookmark-bar'),
        panelsContainer = document.querySelector('#panels-container'),
        tabBarClassList = document.querySelector('#tabs-tabbar-container').classList,
        panelsLeft = document.querySelector('#panels-container').classList.contains('left'),
        tabBarPosition = positions.find(cls => tabBarClassList.contains(cls)),
        addressBarTop = browser.classList.contains('address-top'),
        bookmarksTop = browser.classList.contains('bookmark-bar-top');

    let fullscreenEnabled,
        showTopTimeout,
        showLeftTimeout,
        showRightTimeout,
        showBottomTimeout,
        hideTimeout;

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

    vivaldi.tabsPrivate.onKeyboardShortcut.addListener((id, combination) => combination === 'F11' && id === vivaldiWindowId && toggleFullScreen());

    let style = `
        .fullscreen-listener-enabled {
            ${generalCSS()}
            ${topCSS()}
            ${leftCSS()}
            ${rightCSS()}
            ${bottomCSS()}
        }

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

    if (bookmarkBarPadding) {
        style += `
            .fullscreen-listener-enabled .bookmark-bar {
                height: calc(30px + ${bookmarkBarPadding} + ${bookmarkBarPadding} / 2) !important;
                padding-top: ${bookmarkBarPadding};
                padding-bottom: calc(${bookmarkBarPadding} / 2);
            }
        `;
    }

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

    document.head.appendChild(styleEl);

    const hoverDivTop = createHorizontalHoverDiv('top'),
        hoverDivLeft = (hidePanels && panelsLeft) || tabBarPosition === 'left' ? createVerticalHoverDiv('left') : undefined,
        hoverDivRight = (hidePanels && !panelsLeft) || tabBarPosition === 'right' ? createVerticalHoverDiv('right') : undefined,
        hoverDivBottom = !addressBarTop || tabBarPosition === 'bottom' || !bookmarksTop || document.querySelector('#footer').childNodes.length ? createHorizontalHoverDiv('bottom') : undefined;

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

        if (hideDelay) {
            webView.addEventListener('pointerleave', clearHideTimeout);
        }

        hoverDivTop.addEventListener('pointerenter', showTop);
        hoverDivTop.addEventListener('pointerleave', clearTimeouts);

        if (hoverDivLeft) {
            hoverDivLeft.addEventListener('pointerenter', showLeft);
            hoverDivLeft.addEventListener('pointerleave', clearTimeouts);
        }

        if (hoverDivRight) {
            hoverDivRight.addEventListener('pointerenter', showRight);
            hoverDivRight.addEventListener('pointerleave', clearTimeouts);
        }

        if (hoverDivBottom) {
            hoverDivBottom.addEventListener('pointerenter', showBottom);
            hoverDivBottom.addEventListener('pointerleave', clearTimeouts);
        }

        if (updateHoverDivSize) addEventListener('resize', updateHoverDivs);

        hide();
    }

    function removeFullScreenListener() {
        app.classList.remove('fullscreen-listener-enabled');
        webView.removeEventListener('pointerenter', hide);

        if (hideDelay) {
            webView.removeEventListener('pointerleave', clearHideTimeout);
        }

        hoverDivTop.removeEventListener('pointerenter', showTop);
        hoverDivTop.removeEventListener('pointerleave', clearTimeouts);

        if (hoverDivLeft) {
            hoverDivLeft.removeEventListener('pointerenter', showLeft);
            hoverDivLeft.removeEventListener('pointerleave', clearTimeouts);
        }

        if (hoverDivRight) {
            hoverDivRight.removeEventListener('pointerenter', showRight);
            hoverDivRight.removeEventListener('pointerleave', clearTimeouts);
        }

        if (hoverDivBottom) {
            hoverDivBottom.removeEventListener('pointerenter', showBottom);
            hoverDivBottom.removeEventListener('pointerleave', clearTimeouts);
        }

        if (updateHoverDivSize) removeEventListener('resize', updateHoverDivs);

        show();
    }

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

    function clearHideTimeout() {
        if (hideTimeout) clearTimeout(hideTimeout);
    }

    function hide() {
        hideTimeout = setTimeout(() => {
            app.classList.add('hidden-top');
            if (hoverDivLeft) app.classList.add('hidden-left');
            if (hoverDivRight) app.classList.add('hidden-right');
            if (hoverDivBottom) app.classList.add('hidden-bottom');
        }, hideDelay);
    }

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

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

    function showLeft() {
        if (hoverDivLeft) {
            showLeftTimeout = setTimeout(() => app.classList.remove('hidden-left'), showDelay);
        }
    }

    function showRight() {
        if (hoverDivRight) {
            showRightTimeout = setTimeout(() => app.classList.remove('hidden-right'), showDelay);
        }
    }

    function showBottom() {
        if (hoverDivBottom) {
            showBottomTimeout = setTimeout(() => app.classList.remove('hidden-bottom'), showDelay);
        }
    }

    function isWindowMaximized() {
        return browser.classList.contains('maximized');
    }

    function setHorizontalHoverDivHeight(hoverDiv) {
        hoverDiv.style.height = updateHoverDivSize && isWindowMaximized() ? '1px' : '1.5rem';
    }

    function setVerticalHoverDivWidth(hoverDiv) {
        hoverDiv.style.width = updateHoverDivSize && isWindowMaximized() ? '1px' : '1.5rem'
    }

    function updateHoverDivs() {
        setTimeout(() => {
            setHorizontalHoverDivHeight(hoverDivTop);
            if (hoverDivLeft) setVerticalHoverDivWidth(hoverDivLeft);
            if (hoverDivRight) setVerticalHoverDivWidth(hoverDivRight);
            if (hoverDivBottom) setHorizontalHoverDivHeight(hoverDivBottom);
        }, 150);
    }

    function createHorizontalHoverDiv(position) {
        const hoverDiv = document.createElement('div');
        setHorizontalHoverDivHeight(hoverDiv);
        hoverDiv.style.width = '100vw';
        hoverDiv.style.position = 'fixed';
        hoverDiv.style.left = '0';
        hoverDiv.style.zIndex = '10';
        hoverDiv.style[position] = '0';
        hoverDiv.className = 'hover-div';
        hoverDiv.classList.add(position);
        document.querySelector('#app').appendChild(hoverDiv);
        return hoverDiv;
    }

    function createVerticalHoverDiv(position) {
        const hoverDiv = document.createElement('div');
        hoverDiv.style.height = '100%';
        setVerticalHoverDivWidth(hoverDiv);
        hoverDiv.style.position = 'fixed';
        hoverDiv.style.top = '0';
        hoverDiv.style.zIndex = '10';
        hoverDiv.style[position] = '0';
        hoverDiv.className = 'hover-div';
        hoverDiv.classList.add(position);
        document.querySelector('#app').appendChild(hoverDiv);
        return hoverDiv;
    }

    function generalCSS() {
        let css = `
            #header, .mainbar, .bookmark-bar, #panels-container {
                transition: transform .5s, opacity .5s ease-in-out !important;
            }

            #header, .mainbar {
                z-index: 8;
            }
            
            .mainbar {
                position: absolute;
                width: 100%;
            }

            .bookmark-bar  {
                position: absolute;
                left: 0;
                right: 0;
                z-index: 7;
            }

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

            #main {
                padding-top: 0 !important;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;

                .inner {
                    position: unset;                  
                }
            }

            .extensionIconPopupMenu, .button-popup {
                z-index: 8;
            }

            footer {
                margin-top: auto !important;
            }

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

        if (hidePanels) {
            css += `
            #panels-container {
                position: absolute !important;
            }
            `;
        }

        return css;
    }

    function topCSS() {
        const topElements = [];
        let height = 0;

        if (tabBarPosition === 'top' || !addressBarTop) {
            topElements.push('#header');
            height += getHeight(header);
        }

        if (addressBarTop) {
            topElements.push('.mainbar');
            height += getHeight(mainBar);
        }

        if (bookmarksTop && bookmarkBar) {
            topElements.push('.bookmark-bar');
            height += getHeight(bookmarkBar);
        }

        if (topElements.length === 0) {
            return '';
        }

        let css = `
            &.hidden-top {
                ${topElements.join(', ')} {
                    transform: translateY(-${height}px);
                    opacity: 0;
                }
            }

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

        if (addressBarTop) {
            if (alwaysShowAddressBar || showAddressBarOnFocus) {
                css += `
                &.hidden-top {
                    ${!alwaysShowAddressBar ? '#browser:has(.internal-page .startpage .SpeedDialView), #browser:has(.internal-page .startpage .Dashboard), #browser:has(.UrlBar-AddressField:focus-within) {' : ''}
                        .mainbar {
                            opacity: 1;

                            .UrlBar-AddressField {
                                position: absolute;
                                top: ${height + showAddressBarPadding}px;
                                left: 25vw;
                                right: 25vw;
                                width: 50vw !important;
                            }
                        }
                    ${!alwaysShowAddressBar ? '}' : ''}
                }
            `;
            }

            if (bookmarksTop) {
                css += `
                    .bookmark-bar-top-off .mainbar {
                        padding-bottom: 5px;
                        background: var(--colorAccentBg);
                    }
                `;
            }

            if (tabBarPosition === 'top') {
                css += `
                    .mainbar {
                        margin-top: ${getHeight(header)}px;
                    }
                `;
            }
        }

        if (bookmarksTop) {
            css += `
                .bookmark-bar {
                    top: 0;
                    margin-top: ${height - getHeight(bookmarkBar)}px;
                }
            `;
        }

        return css;
    }

    function leftCSS() {
        const leftElements = [];
        let css = '',
            width = 0,
            tabbarWrapper;

        if (hideTabs && tabBarPosition === 'left') {
            leftElements.push('.tabbar-wrapper');
            tabbarWrapper = document.querySelector('.tabbar-wrapper');
            width += tabbarWrapper.offsetWidth;
        }

        if (hidePanels && panelsLeft) {
            leftElements.push('#panels-container');
            width += panelsContainer.offsetWidth;
        }

        if (leftElements.length === 0) {
            return '';
        }

        css += `
            &.hidden-left {
                ${leftElements.join(', ')} {
                    transform: translateX(-${width}px);
                    opacity: 0;
                }
            }

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

        if (tabBarPosition === 'left') {
            css += `
                .tabbar-wrapper {
                    position: absolute;
                    top: 0;
                    left: ${panelsLeft ? panelsContainer.offsetWidth : 0}px;
                    z-index: 1;
                    transition: transform .5s, opacity .5s ease-in-out !important;

                    &  > .tabbar-wrapper {
                        position: static;
                    }
                }
            `;
        }

        return css;
    }

    function rightCSS() {
        const rightElements = [];
        let width = 0,
            tabbarWrapper;

        if (hideTabs && tabBarPosition === 'right') {
            rightElements.push('.tabbar-wrapper');
            tabbarWrapper = document.querySelector('.tabbar-wrapper');
            width += tabbarWrapper.offsetWidth;
        }

        if (hidePanels && !panelsLeft) {
            rightElements.push('#panels-container');
            width += panelsContainer.offsetWidth;
        }

        if (rightElements.length === 0) {
            return '';
        }

        let css = `
            &.hidden-right {
                ${rightElements.join(', ')} {
                    transform: translateX(${width}px);
                    opacity: 0;
                }
            }

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

        if (tabBarPosition === 'right') {
            css += `
                .tabbar-wrapper {
                    position: absolute;
                    top: 0;
                    right: ${!panelsLeft ? panelsContainer.offsetWidth : 0}px;
                    z-index: 1;
                    transition: transform .5s, opacity .5s ease-in-out !important;

                    &  > .tabbar-wrapper {
                        position: static;
                    }
                }
            `;
        }

        return css;
    }

    function bottomCSS() {
        const bottomElements = [],
            footer = document.querySelector('#footer');
        let height = 0;

        if (footer.childNodes.length) {
            bottomElements.push('#footer');
            height += getHeight(footer);
        }

        if (!addressBarTop) {
            bottomElements.push('.mainbar');
            height += getHeight(mainBar);
        }

        if (!bookmarksTop && bookmarkBar) {
            bottomElements.push('.bookmark-bar');
            height += getHeight(bookmarkBar);
        }

        if (bottomElements.length === 0) {
            return '';
        }

        let css = `
            &.hidden-bottom {
                ${bottomElements.join(', ')} {
                    transform: translateY(${height}px);
                    opacity: 0;
                }
            }

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

        if (tabBarPosition === 'bottom') {
            css += `
                #footer {
                    transition: transform .5s, opacity .5s ease-in-out !important;
                }
            `;
        }

        if (!addressBarTop) {
            css += `
                .mainbar {
                    margin-bottom: ${getHeight(footer)}px;
                }
            `;

            if (alwaysShowAddressBar || showAddressBarOnFocus) {
                css += `
                &.hidden-bottom {
                   ${!alwaysShowAddressBar ? '#browser:has(.internal-page .startpage), #browser:has(.UrlBar-AddressField:focus-within) {' : ''}
                        .mainbar {
                            opacity: 1;

                            .UrlBar-AddressField {
                                position: absolute;
                                bottom: ${getHeight(mainBar) + 10 + showAddressBarPadding}px;
                                left: 25vw;
                                right: 25vw;
                                width: 50vw !important;
                            }
                        }
                   ${!alwaysShowAddressBar ? '}' : ''}
                }
            `;
            }

            if (!bookmarksTop) {
                css += `
                    .bookmark-bar-bottom-off .mainbar {
                        padding-bottom: -5px;
                        background: var(--colorAccentBg);
                    }
                `;
            }
        }

        if (!bookmarksTop) {
            css += `
                .bookmark-bar {
                    bottom: ${getHeight(footer) + (!addressBarTop ? getHeight(mainBar) : 0)}px;
                    margin-bottom: 0;
                }
            `;
        }

        return css;
    }

    function getHeight(el) {
        return el?.offsetHeight || 0;
    }
})();

oudstand

@daoziz do you have your address bar at the bottom?

daoziz

@oudstand said in AutoHide Tab Bar + Address Bar | Show on Hover:

@daoziz do you have your address bar at the bottom?

My address bar is at the top, the bookmarks bar is at the bottom, the tab bar is on the left, and the panel bar is on the right.

DaniloAsanin

@daoziz You're weird man!

daoziz

@DaniloAsanin said in AutoHide Tab Bar + Address Bar | Show on Hover:

@daoziz You're weird man!

Haha. I moved the tab bar to the left because screens are wider now, and a vertical tab bar feels more comfortable. The address bar is in its default spot at the top—I never considered changing it. As for the bookmarks bar—if I could, I’d place it up there too (just below the tab bar) and have it auto-hide with the tabs, but that doesn’t seem possible. And the sidebar—I hardly ever use it, so I’ve tucked it on the right.