AutoHide Tab Bar + Address Bar | Show on Hover

[ydivho12123]

@oudstand
It's great now, but the page changes over and over again. Is it possible to change it so that whenever the mouse hovers over the tab and the address bar, the window should remain static and the address bar can be overlaid on top of the page content?

[oudstand]

@Abhimanyu @ydivho12123 I've tested a bit around and noticed, that it's not easily possible to make the header, URL bar and bookmarks float over the website. Setting them to display: absolute destroys the styling of the elements inside. When I've got more time I will take a look again.

[oudstand]

@Abhimanyu @ydivho12123 I had a spontaneous idea how to solve your request and it really worked. So here is my solution:

/**
 * 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");
    if (!webView) {
        setTimeout(checkWebViewForFullscreen, 1337);
        return;
    }

    const header = document.querySelector("#header"),
        browser = document.querySelector("#browser"),
        mainBar = document.querySelector(".mainbar"),
        bookmarkBar = document.querySelector(".bookmark-bar");

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

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

    const style = document.createElement("style");
    style.appendChild(document.createTextNode("[hidden] { transform: translateY(-100px) !important; }"));
    document.head.appendChild(style);

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

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

    function addFullScreenListener() {
        webView.addEventListener("pointerenter", hide);
        hoverDiv.addEventListener("pointerenter", show);
        hide();
    }

    function removeFullScreenListener() {
        webView.removeEventListener("pointerenter", hide);
        hoverDiv.removeEventListener("pointerenter", show);
        show();
    }

    function hide() {
        header.hidden = true;
        mainBar.hidden = true;
        bookmarkBar.hidden = true;
    }

    function show() {
        header.hidden = false;
        mainBar.hidden = false;
        bookmarkBar.hidden = false;

        browser.classList.remove("address-top-off");
        browser.classList.add("address-top");
    }

    function setMarginAndZIndex(shouldAdjustStyles) {
        const headerOffset = header.offsetHeight;
        const mainBarOffset = mainBar.offsetHeight;

        adjustStyles(header, shouldAdjustStyles, 0);
        adjustStyles(mainBar, shouldAdjustStyles, headerOffset);
        adjustStyles(bookmarkBar, shouldAdjustStyles, headerOffset + mainBarOffset);
    }

    function adjustStyles(element, shouldAdjustStyles, offset) {
        element.style.marginTop = shouldAdjustStyles && offset ? `${offset}px` : "";
        element.style.marginBottom = shouldAdjustStyles ? `-${offset + element.offsetHeight}px` : "";
        element.style.zIndex = shouldAdjustStyles ? 9 : "";
    }
})();

[ydivho12123]

@oudstand
There seems to be some problems with my side of the test, the style becomes frosted glass translucent after ctrl alt f is opened, and the tab bar does cover the page, but it doesn't have the previous function of automatically hiding the tab bar when the mouse moves out

[oudstand]

@ydivho12123 For me it's working fine. Can you post a screenshot? Do you use other mods, that might cause a problem with this?

[ydivho12123]

@oudstand
It's going to turn out like this. I used two mods, one is the js mod that you sent some time ago to hide the tab bar, and the other is the js mod that hides the panel (https://forum.vivaldi.net/post/696245)

[ydivho12123]

@ydivho12123
Which hidden tab js mod worked properly before, and the image was replaced with your new js code

[oudstand]

@ydivho12123 Currently I don't know why this happens on your device. The code to hide the tabs, main bar and book marks uses transform: translateY(-100px) !important; which moves the elements to the top out of the visible area. It shouldn't change the appearance of them. Also together with the other mod the code works for me. Do you have any CSS mods that cause this problem?

[ydivho12123]

@oudstand
A CSS mod is used, but it's a mod that modifies the panel, and it makes the panel hidden, so it shouldn't affect the tab bar (https://forum.vivaldi.net/post/672126)

1

The above two images are not using the new code and can be hidden normally

[oudstand]

@ydivho12123 Can you try this 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");
    if (!webView) {
        setTimeout(checkWebViewForFullscreen, 1337);
        return;
    }

    const header = document.querySelector("#header"),
        browser = document.querySelector("#browser"),
        mainBar = document.querySelector(".mainbar"),
        bookmarkBar = document.querySelector(".bookmark-bar");

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

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

    const style = document.createElement("style");
    style.appendChild(document.createTextNode("[hidden] { transform: translateY(-100px) !important; }"));
    document.head.appendChild(style);

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

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

    function addFullScreenListener() {
        webView.addEventListener("pointerenter", hide);
        hoverDiv.addEventListener("pointerenter", show);
        hide();
    }

    function removeFullScreenListener() {
        webView.removeEventListener("pointerenter", hide);
        hoverDiv.removeEventListener("pointerenter", show);
        show();
    }

    function hide() {
        header.hidden = true;
        mainBar.hidden = true;
        bookmarkBar.hidden = true;
    }

    function show() {
        header.hidden = false;
        mainBar.hidden = false;
        bookmarkBar.hidden = false;

        browser.classList.remove("address-top-off");
        browser.classList.add("address-top");
    }

    function setMarginAndZIndex(shouldAdjustStyles) {
        const headerOffset = header.offsetHeight;
        const mainBarOffset = mainBar.offsetHeight;

        adjustStyles(header, shouldAdjustStyles, 0);
        adjustStyles(mainBar, shouldAdjustStyles, headerOffset);
        adjustStyles(bookmarkBar, shouldAdjustStyles, headerOffset + mainBarOffset);
    }

    function adjustStyles(element, shouldAdjustStyles, offset) {
        if (!element) return;
        element.style.marginTop = shouldAdjustStyles && offset ? `${offset}px` : "";
        element.style.marginBottom = shouldAdjustStyles ? `-${offset + element.offsetHeight}px` : "";
        element.style.zIndex = shouldAdjustStyles ? 9 : "";
    }
})();

[ydivho12123]

@oudstand
Works perfectly, this change is so good that it works as expected, covering the page and hiding it. It's just that the code will set the browser to a transparent tab, which I didn't open in the first place. However, this can be solved by turning off the transparent label directly in the settings. So great! Thank you.

[oudstand]

@ydivho12123 I'm glad it works for you too

[nnty1763]

@oudstand I use it all the time, thank you.
When I exit the full screen view after watching a youtube video full screen, the bookmark bar appears in the header area!
It is fixed by rebooting, but is there any way to fix it?

[oudstand]

@nnty1763 I think I found a workaround for this:

/**
 * 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");
    if (!webView) {
        setTimeout(checkWebViewForFullscreen, 1337);
        return;
    }

    let header = document.querySelector("#header"),
        browser = document.querySelector("#browser"),
        mainBar = document.querySelector(".mainbar"),
        bookmarkBar = document.querySelector(".bookmark-bar"),
        fullscreenEnabled;

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

    chrome.webNavigation.onCompleted.addListener((details) => {
        let webview = document.querySelector(`.webpanel-content webview[src*="${details.url}"]`) ?? document.querySelector(`webview[tab_id="${details.tabId}"]`);        

        webview?.executeScript({code: `(${setFullscreenObserver})()`});
    });
  
    chrome.runtime.onMessage.addListener((message) => {
        if (message.fullscreenExit) {
            header = document.querySelector("#header");
            browser = document.querySelector("#browser");
            mainBar = document.querySelector(".mainbar");
            bookmarkBar = document.querySelector(".bookmark-bar");

            setMarginAndZIndex(fullscreenEnabled);
            fullscreenEnabled ? hide() : show();
        }
    });

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

    const style = document.createElement("style");
    style.appendChild(document.createTextNode("[hidden] { transform: translateY(-100px) !important; }"));
    document.head.appendChild(style);

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

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

    function addFullScreenListener() {
        webView.addEventListener("pointerenter", hide);
        hoverDiv.addEventListener("pointerenter", show);
        hide();
    }

    function removeFullScreenListener() {
        webView.removeEventListener("pointerenter", hide);
        hoverDiv.removeEventListener("pointerenter", show);
        show();
    }

    function hide() {
        header.hidden = true;
        mainBar.hidden = true;
        bookmarkBar.hidden = true;
    }

    function show() {
        header.hidden = false;
        mainBar.hidden = false;
        bookmarkBar.hidden = false;

        browser.classList.remove("address-top-off");
        browser.classList.add("address-top");
    }

    function setMarginAndZIndex(shouldAdjustStyles) {
        const headerOffset = header.offsetHeight;
        const mainBarOffset = mainBar.offsetHeight;

        adjustStyles(header, shouldAdjustStyles, 0);
        adjustStyles(mainBar, shouldAdjustStyles, headerOffset);
        adjustStyles(bookmarkBar, shouldAdjustStyles, headerOffset + mainBarOffset);
    }

    function adjustStyles(element, shouldAdjustStyles, offset) {
        if (!element) return;
        element.style.marginTop = shouldAdjustStyles && offset ? `${offset}px` : "";
        element.style.marginBottom = shouldAdjustStyles ? `-${offset + element.offsetHeight}px` : "";
        element.style.zIndex = shouldAdjustStyles ? 9 : "";
    }

    function setFullscreenObserver() {
        if (this.fullscreenListenerSet) return;

        document.addEventListener('fullscreenchange', () => {
            if(!document.webkitIsFullScreen) chrome.runtime.sendMessage({fullscreenExit: true});
        });
        this.fullscreenListenerSet = true;    
    }
})();

[nnty1763]

@oudstand Thanks for the quick fix!
The bookmark bar is now fixed, but when I go back from full screen, the overlay seems to collapse and the entire page goes down!

[oudstand]

@nnty1763 can you provide me a screenshot? For me it's working fine, at least with the latest Vivaldi Snapshot 6.7.3316.3.

[nnty1763]

@oudstand Clean install of Vivaldi Snapshot 6.7.3316.3. I ran it on the standalone version.

[oudstand]

@nnty1763 that's strange. I didn't change the way how to show and hide the elements and on my device it's working fine, therefore it's difficult for me to fix this bug.

[nnty1763]

@oudstand I'll try some things, thanks.

[oudstand]

I've added the option to also hide the panels on the left. If you don't want that, set hidePanels = false. By default a little border is on the left of the website, you can adjust or remove this by setting marginLeft = 0; or choose a size you like.

/**
 * 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,
        marginLeft = '0.5rem';

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

    let header = document.querySelector("#header"),
        browser = document.querySelector("#browser"),
        mainBar = document.querySelector(".mainbar"),
        bookmarkBar = document.querySelector(".bookmark-bar"),
        panelsContainer = document.querySelector("#panels-container"),
        fullscreenEnabled;

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

    chrome.webNavigation.onCompleted.addListener((details) => {
        let webview = document.querySelector(`.webpanel-content webview[src*="${details.url}"]`) ?? document.querySelector(`webview[tab_id="${details.tabId}"]`);        

        webview?.executeScript({code: `(${setFullscreenObserver})()`});
    });
  
    chrome.runtime.onMessage.addListener((message) => {
        if (message.fullscreenExit) {
            header = document.querySelector("#header");
            browser = document.querySelector("#browser");
            mainBar = document.querySelector(".mainbar");
            bookmarkBar = document.querySelector(".bookmark-bar");
            panelsContainer = document.querySelector("#panels-container");

            setMarginAndZIndex(fullscreenEnabled);
            fullscreenEnabled ? hide() : show();
        }
    });

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

    const style = document.createElement("style");
    style.appendChild(document.createTextNode(`
        .fullscreen-listener-enabled #header, .fullscreen-listener-enabled .mainbar, .fullscreen-listener-enabled .bookmark-bar, .fullscreen-listener-enabled #panels-container { transition: transform .5s !important; }
        [hidden] { transform: translateY(-100px) !important; }
        .hidden-panel { transform: translateX(-100%); }
        .fullscreen-listener-enabled #main { padding-top: 0 !important; }
    `));
    document.head.appendChild(style);

    const hoverDiv = document.createElement("div");
    hoverDiv.style.height = "9px";
    hoverDiv.style.width = "100vw";
    hoverDiv.style.position = "fixed";
    hoverDiv.style.left = "0";
    hoverDiv.style.top = "0";
    hoverDiv.style.zIndex = "1";
    hoverDiv.pointerEvents = "none";
    document.body.insertBefore(hoverDiv, document.body.firstChild);

    const panelHoverDiv = document.createElement("div");
    if (hidePanels) {        
        panelHoverDiv.style.height = "100%";
        panelHoverDiv.style.width = "1rem";
        panelHoverDiv.style.position = "fixed";
        panelHoverDiv.style.left = "0";
        panelHoverDiv.pointerEvents = "none";
        panelsContainer.before(panelHoverDiv); 
    }

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

    function addFullScreenListener() {
        document.querySelector("#app").classList.add("fullscreen-listener-enabled");
        webView.addEventListener("pointerenter", hide);
        hoverDiv.addEventListener("pointerenter", showTop);
        hidePanels && panelHoverDiv.addEventListener("pointerenter", showLeft);
        hide();
    }

    function removeFullScreenListener() {
        document.querySelector("#app").classList.remove("fullscreen-listener-enabled");
        webView.removeEventListener("pointerenter", hide);
        hoverDiv.removeEventListener("pointerenter", showTop);
        hidePanels && panelHoverDiv.removeEventListener("pointerenter", showLeft);
        show();
    }

    function hide() {
        header.hidden = true;
        mainBar.hidden = true;
        bookmarkBar.hidden = true;
       
        if (hidePanels) {
            panelsContainer.classList.add("hidden-panel");
        }
    }

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

    function showTop() {
        header.hidden = false;
        mainBar.hidden = false;
        bookmarkBar.hidden = false;

        browser.classList.remove("address-top-off");
        browser.classList.add("address-top");
    }

    function showLeft() {
        if (hidePanels) {
            panelsContainer.classList.remove("hidden-panel");
        }
    }

    function setMarginAndZIndex(shouldAdjustStyles) {
        const headerOffset = header.offsetHeight;
        const mainBarOffset = mainBar.offsetHeight;

        adjustStyles(header, shouldAdjustStyles, 0);
        adjustStyles(mainBar, shouldAdjustStyles, headerOffset);
        adjustStyles(bookmarkBar, shouldAdjustStyles, headerOffset + mainBarOffset);

        if (hidePanels) {
            webView.style.marginLeft = shouldAdjustStyles ? `calc(-${panelsContainer.offsetWidth}px + ${marginLeft})` : "";
        }
    }

    function adjustStyles(element, shouldAdjustStyles, offset) {
        if (!element) return;
        element.style.marginTop = shouldAdjustStyles && offset ? `${offset}px` : "";
        element.style.marginBottom = shouldAdjustStyles ? `-${offset + element.offsetHeight}px` : "";
        element.style.zIndex = shouldAdjustStyles ? 9 : "";
    }

    function setFullscreenObserver() {
        if (this.fullscreenListenerSet) return;

        document.addEventListener('fullscreenchange', () => {
            if(!document.webkitIsFullScreen) chrome.runtime.sendMessage({fullscreenExit: true});
        });
        this.fullscreenListenerSet = true;    
    }
})();