AutoHide Tab Bar + Address Bar | Show on Hover

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

oudstand

@Pesala I think you're talking about this mod.

Edit: for me the mod is still working.

JoakimCh

I don't know if the original mod still works (but at least this post got me to install Vivaldi and probably migrate to it).

Here is my CSS mod to do the same:
https://forum.vivaldi.net/topic/99996/css-mod-to-hide-the-main-user-interface-until-you-move-the-cursor-to-the-top

JoakimCh

@nirin Mine will work, but not hide the vertical tab bar. Is that a feature you would like? If so, then I could look into it some day.

maulikbhattt

This post is deleted!

dvvv

I made a script to auto hide vertical tab bar.

PingoBlue

Being able to auto-hide the search bar (with maximize, close, minimize, extensions and other buttons) + side bar + tab list would be awesome. We would practically have 100% of the space used for the pages and for those who enjoy a focus mode it would be interesting too.

It seems some friends have posted some css as an alternative, hopefully I can do all this in one css.

PingoBlue

@oudstand Thanks for the code

I use vertical tabs. Is there any way to move the mouse to the corner where the tabs are and have them appear? using this code, I can only access them by moving the mouse to the address area, I can't do it directly by trying to move the mouse over the area that would be the vertical tabs.

In addition, it would be interesting if the area were small, because if it is large and I try to access some part of a site, it will display the vertical tabs and I will not be able to interact with a part of the site. You've done this with the address bar, which is great.

It would also be great to have the same behavior with the tool panel, so that 100% of the space would be used.

PingoBlue

I was able to modify the code to adapt to vertical tabs. However, I still haven't managed to make the toolbar hide if the mouse isn't over it.

It would also be interesting if all these items had floating behavior when displayed, i.e. overlaying rather than forcing resizing of the sites

/**

 */
let fullScreenInterval = setInterval(() => {
  const webView = document.querySelector("#webview-container");
  const header = document.querySelector("#header");
  const browser = document.querySelector("#browser");
  if (webView) {
    clearInterval(fullScreenInterval);
    let 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()
    );
    const style = document.createElement("style");
    style.appendChild(
      document.createTextNode("[hidden] { display: none !important; }")
    );
    document.head.appendChild(style);


    const topHoverDiv = document.createElement("div");
    topHoverDiv.style.height = "9px";
    topHoverDiv.style.width = "100vw";
    topHoverDiv.style.position = "fixed";
    topHoverDiv.style.left = "0";
    topHoverDiv.style.top = "0";
    topHoverDiv.style.zIndex = 1;

    const leftHoverDiv = document.createElement("div");
    leftHoverDiv.style.height = "100vh";
    leftHoverDiv.style.width = "9px";
    leftHoverDiv.style.position = "fixed";
    leftHoverDiv.style.left = "0";
    leftHoverDiv.style.top = "0";
    leftHoverDiv.style.zIndex = 1;


    document.body.insertBefore(topHoverDiv, document.body.firstChild);
    document.body.insertBefore(leftHoverDiv, document.body.firstChild);

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

    function addFullScreenListener() {
      webView.addEventListener("pointerenter", hide);
      topHoverDiv.addEventListener("pointerenter", show);
      leftHoverDiv.addEventListener("pointerenter", show);  // Adicionar listener para o hover lateral
      hide();
    }

    function removeFullScreenListener() {
      webView.removeEventListener("pointerenter", hide);
      topHoverDiv.removeEventListener("pointerenter", show);
      leftHoverDiv.removeEventListener("pointerenter", show);  // Remover listener do hover lateral
      show();
    }

    function hide() {
      header.hidden = true;
      [...document.querySelectorAll(".tabbar-wrapper")].forEach(
        (item) => (item.hidden = true)
      );
      document.querySelector(".mainbar").hidden = true;
      document.querySelector(".bookmark-bar").hidden = true;
    }

    function show() {
      header.hidden = false;
      [...document.querySelectorAll(".tabbar-wrapper")].forEach(
        (item) => (item.hidden = false)
      );
      document.querySelector(".mainbar").hidden = false;
      document.querySelector(".bookmark-bar").hidden = false;
      browser.classList.remove("address-top-off");
      browser.classList.add("address-top");
    }
  }
}, 1111);

oudstand

@PingoBlue what exactly do you mean with the "tool panel"? If I use this mod, everything is hidden, at least if you use the tabs on the top.
I don't know if I will have enough time to adjust this mod to support horizontal and vertical tabs.

PingoBlue

@oudstand

I'm referring to the toolbar that the arrow is pointing to.
I use vertical tabs, maybe that's why it's not being hidden normally.
Thanks for your generosity

oudstand

@PingoBlue ah okay. I've got mine on the left and then it's working (at least with the tabs at the top)
I'll let you know if I find time to improve this mod to support multiple setups.

PingoBlue

@oudstand thaaanks

ekozcifci

@oudstand That is great mate, just asking, can we change the f11 to this?

oudstand

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

@oudstand That is great mate, just asking, can we change the f11 to this?

Sure, you just have to change line 33 from this:

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

to this:

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

Keep in mind that you have to remove the fullscreen keyboard shortcut in the Vivaldi settings.

applesnoranges

This works great for me when it comes to address bars, however I think all the code modification done for vertical tab is from the left side, any idea what I would need to edit for it to work on the right side vertical tabs?

oudstand

This is my first attempt to support ALL options in this mod. This means you can place the panels left or right, the address bar and bookmark bar top or bottom and the tabs top, left, right or bottom.

But if you change one of these options you have to restart Vivaldi. For the moment only floating panels are supported.

/**
 * 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
        verticalMargin = '0px', // 'var(--edge-like-border-radius) / 2', // 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;
    }

    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;

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

    vivaldi.tabsPrivate.onKeyboardShortcut.addListener((id, combination) => combination === 'F11' && 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: auto;
                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 ? 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);

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

        hide();
    }

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

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

        show();
    }

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

    function hide() {
        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');
    }

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

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

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

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

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

    function createHorizontalHoverDiv(position) {
        const hoverDiv = document.createElement('div');
        hoverDiv.style.height = '1.5rem';
        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%';
        hoverDiv.style.width = '1.5rem';
        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() {
        return `
            #header, .mainbar, .bookmark-bar, #panels-container {
                transition: transform .5s, opacity .5s ease-in-out !important;
            }

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

            .bookmark-bar  {
                z-index: 7;
            }

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

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

            #webview-container {
                position: fixed !important;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }

            #panels-container {
                position: fixed !important;
            }


            .extensionIconPopupMenu {
                z-index: 8;
            }

            footer {
                margin-top: auto !important;
            }

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

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

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

        if (addressBarTop) {
            topElements.push('.mainbar');
            height += mainBar?.offsetHeight || 0;
        }

        if (bookmarksTop && bookmarkBar) {
            topElements.push('.bookmark-bar');
            height += bookmarkBar?.offsetHeight || 0;
        }

        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 (bookmarksTop && addressBarTop) {
            css += `
                .bookmark-bar-top-off .mainbar {
                    padding-bottom: 5px;
                    background: var(--colorAccentBg);
                }
            `;
        }

        if (bookmarksTop) {
            css += `
                .bookmark-bar {
                    margin-top: 0;
                }
            `;
        }

        return css;
    }

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

        if (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 '';
        }

        let 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: fixed;
                    top: 0;
                    left: ${panelsLeft ? panelsContainer.offsetWidth : 0}px;
                    z-index: 1;
                    transition: transform .5s, opacity .5s ease-in-out !important;
                }
            `;
        }

        if (hidePanels && panelsLeft) {
            css +=  `
                #webview-container {
                    margin-left: ${verticalMargin};
                    /*margin-left: calc(-${panelsContainer.offsetWidth}px + ${verticalMargin});*/
                }
            `;
        }

        return css;
    }

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

        if (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: fixed;
                    top: 0;
                    right: ${!panelsLeft ? panelsContainer.offsetWidth : 0}px;
                    z-index: 1;
                    transition: transform .5s, opacity .5s ease-in-out !important;
                }
            `;
        }

        if (hidePanels && !panelsLeft) {
            css +=  `
                #webview-container {
                    margin-right: ${verticalMargin};
                    /*margin-left: calc(-${panelsContainer.offsetWidth}px + ${verticalMargin});*/
                }
            `;
        }

        return css;
    }

    function bottomCSS() {
        const bottomElements = [];
        let height = 0,
            tabbarWrapper;

        if (tabBarPosition === 'bottom') {
            bottomElements.push('#footer')
            tabbarWrapper = document.querySelector('#footer');
            height += tabbarWrapper?.offsetHeight || 0;
        }

        if (!addressBarTop) {
            bottomElements.push('.mainbar');
            height += mainBar?.offsetHeight || 0;
        }

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

        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 (!bookmarksTop && !addressBarTop) {
            css += `
                .bookmark-bar-bottom-off .mainbar {
                    padding-bottom: -5px;
                    background: var(--colorAccentBg);
                }
            `;
        }

        if (!bookmarksTop) {
            css += `
                .bookmark-bar {
                    margin-bottom: 0;
                }
            `;
        }

        return css;
    }
})();

Luigi745

@oudstand, thank you very much for your commitment.

This is one of the most useful scripts I have found in this forum.