AutoHide Tab Bar + Address Bar | Show on Hover

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.

oudstand

@tryptech yeah the mods have to be added to the body.

nirin

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

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

I had been about to give up on vivaldi, when someone pointed me in the direction of your auto-hide script, which may (hopefully) make all the difference (if I can get it working haha). Is this the entire JS script that I need, or do I need to fold in other snippets (I notice this thread has a lot of different code snippets dotted around...)

Also a couple questions:

Is it possible for this to only work for the tabs sidebar (on vertical tabs, I don't use horizontal tabs).
I saw someone asking about making the tab sidbar work as an overlay, so it doesn't keep shifting page content when it opens and closes. Does this version still do that or is it other snippets?
I believe you added a delay on the panel appearing when the mouse is over it (which is fine), but is it also possible to add a customisable delay for when the mouse leaves the panel? I would like it if when the mouse leaves the panel, there is a short delay before it hides itself (so I dont' have to chase after it if the mouse drifted slightly off course).

Sorry for all the questions. I'll be home tonight to start trying to install it and get it working, was just hoping to make sure this solution will fix the issues I'm having with vivaldi! Thankyou

nirin

Ok so I got home before anyone replied so I thought I'd just give it a try and test it, and yeh this script is currently completely broken it seems. There were so many weird issues I had to screen record it as I don't think my descriptions would have helped otherwise!

https://youtu.be/1tG5O67Dy4U

The address bar is the only thing that gets hidden, and you can't actually reveal it along most of the top of the window, only the top part of the left vertical-tabs-bar will trigger the address bar to show up.

The vertical-tabs-bar never hides at all, but the tabs overrun the size of the tabs-bar now.

The right sidebar icons are all hidden, but the actual sidebar itself still seems to be there. I cant make the icons reveal themselves though.

I'll include a screenshot of the default setup to show what the screen -should- look like lol, but its very much the default vivaldi layout.

Screenshot 2024-07-24 004015.png

oudstand

@nirin Currently I've never tested it with vertical tabs and the web panels on the left. I use the horizontal tabs at the top and the web panels on the left. I'd have to invest some time to make it work for your setup as well. Since everyone can position everything somewhere else, it's hard to support all use cases. I'll think about it, if I can make adjustments to support more setups.

nirin

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

@nirin Currently I've never tested it with vertical tabs and the web panels on the left. I use the horizontal tabs at the top and the web panels on the left. I'd have to invest some time to make it work for your setup as well. Since everyone can position everything somewhere else, it's hard to support all use cases. I'll think about it, if I can make adjustments to support more setups.

Ahh ok, I appreciate you thinking it over. Trying to make vivaldi work for me as my brief trip to the Firefox camp ended up with disappointment (sidebery vertical tabs are way better than vivaldis, but firefox android browser is about 8 years behind the times on features I need aha).

Pesala

My CSS for this just broke with the latest Snapshot.

Bookmark Bar Overlay.png

Any tips I how to fix it?

/* Simple Automatic Bookmark-bar */
.bookmark-bar-top .bookmark-bar {margin-bottom: -28px; z-index: 1; transform: translateY(0); transition: transform 0.1s 0.5s !important;}
.bookmark-bar-top .bookmark-bar::before {content: ''; position: absolute; height: 12px; width: 100%; top: 100%;}
.bookmark-bar-top .bookmark-bar:not(:focus-within):not(:hover) {transform: translateY(-100%);  transition: transform 0.1s 0.5s !important;}
.mainbar > .toolbar-mainbar {background-color: var(--colorBg);}