AutoHide Tab Bar + Address Bar | Show on Hover

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

[oudstand]

@nnty1763 I could fix your problem.

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

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

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

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

    let style = `
        .fullscreen-listener-enabled #header, .fullscreen-listener-enabled .mainbar, .fullscreen-listener-enabled .bookmark-bar, .fullscreen-listener-enabled #panels-container { 
            transition: transform .5s, opacity .5s ease-in-out !important; 
        }
        .fullscreen-listener-enabled .mainbar {
            display: block;
        }

        [hidden] { 
            transform: translateY(-${header.offsetHeight + mainBar.offsetHeight + bookmarkBar.offsetHeight}px) !important; 
            opacity: 0;
        }
        .hidden-panel { 
            transform: translateX(-100%); 
            opacity: 0;
        }
        .hidden-panel  .panel-group{
            display: none;
        }

        .fullscreen-listener-enabled #main { 
            padding-top: 0 !important; 
        }

        .fullscreen-listener-enabled #header, .fullscreen-listener-enabled .mainbar, .fullscreen-listener-enabled .bookmark-bar { 
            z-index: 7;
        }
        .fullscreen-listener-enabled .mainbar { 
            margin-top: ${header.offsetHeight}px; 
        }
        .fullscreen-listener-enabled .bookmark-bar {
            margin-top: 0;
        }
        .fullscreen-listener-enabled #main, .fullscreen-listener-enabled .inner {
            position: absolute !important;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    `;

    if(hidePanels) {
        style += `.fullscreen-listener-enabled #webview-container {
            margin-left: calc(-${panelsContainer.offsetWidth}px + ${marginLeft});
        }`;
    }

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

    document.head.appendChild(styleEl);

    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 = "10";
    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";
        hoverDiv.style.zIndex = "10";
        panelsContainer.before(panelHoverDiv); 
    }

    function toggleFullScreen() {
        fullscreenEnabled = !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 setFullscreenObserver() {
        if (this.fullscreenListenerSet) return;

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

[nnty1763]

@oudstand Amazing! Works perfectly
Thanks for the fix!

[oudstand]

I could improve the mods performance and made it less vulnerable for bugs like entering fullscreen.

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

    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;

    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, .fullscreen-listener-enabled .mainbar, .fullscreen-listener-enabled .bookmark-bar, .fullscreen-listener-enabled #panels-container { 
            transition: transform .5s, opacity .5s ease-in-out !important; 
        }
        .fullscreen-listener-enabled .mainbar {
            display: block;
        }

        .fullscreen-listener-enabled.hidden-top #header, .fullscreen-listener-enabled.hidden-top .mainbar, .fullscreen-listener-enabled.hidden-top .bookmark-bar { 
            transform: translateY(-${header.offsetHeight + mainBar.offsetHeight + bookmarkBar.offsetHeight}px) !important; 
            opacity: 0;
        }
        .fullscreen-listener-enabled.hidden-panel #panels-container { 
            transform: translateX(-100%); 
            opacity: 0;
        }
        .hidden-panel  .panel-group{
            display: none;
        }

        .fullscreen-listener-enabled #main { 
            padding-top: 0 !important; 
        }

        .fullscreen-listener-enabled #header, .fullscreen-listener-enabled .mainbar, .fullscreen-listener-enabled .bookmark-bar { 
            z-index: 7;
        }
        .fullscreen-listener-enabled .mainbar { 
            margin-top: ${header.offsetHeight}px; 
        }
        .fullscreen-listener-enabled .bookmark-bar {
            margin-top: 0;
        }
        .fullscreen-listener-enabled #main, .fullscreen-listener-enabled .inner {
            position: absolute !important;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        .fullscreen-listener-enabled .extensionIconPopupMenu {
            z-index: 8;
        }
    `;

    if(hidePanels) {
        style += `.fullscreen-listener-enabled #webview-container {
            margin-left: calc(-${panelsContainer.offsetWidth}px + ${marginLeft});
        }`;
    }

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

    document.head.appendChild(styleEl);

    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 = "10";
    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";
        hoverDiv.style.zIndex = "10";
        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);
        hidePanels && panelHoverDiv.addEventListener("pointerenter", showLeft);
        hide();
    }

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

    function hide() {
        app.classList.add("hidden-top");
       
        if (hidePanels) {
            app.classList.add("hidden-panel");
        }
    }

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

    function showTop() {
        app.classList.remove("hidden-top");
    }

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

[muchosoft]

Hello, I would like to know how I can do so that when the top is displayed when I put the mouse, the panel is also displayed

[oudstand]

@muchosoft replace function addFullScreenListener() { ... } with this:

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

[oudstand]

I've fixed the position of the status bar and also added a small gap to the top and bottom of the bookmark bar, when the fullscreen listener is enabled.
If you don't want the spacing above and below the bookmark bar or want to change the size, you can edit the bookmarBarPadding at the top. You can either set the padding to a value you like or set it to bookmarBarPadding = undefined; if you want to remove it.

/**
 * Forum link: https://forum.vivaldi.net/topic/92477/some-javascript-to-automatically-hide-tab-bar-and-address-bar-and-show-them-by-hovering
 * Hides the tab bar and address bar when not hovering
 */
(function checkWebViewForFullscreen() {
    const webView = document.querySelector("#webview-container"),
        hidePanels = true,
        marginLeft = 'var(--edge-like-border-radius) / 2',
        bookmarBarPadding = '3px';

    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;

    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, .fullscreen-listener-enabled .mainbar, .fullscreen-listener-enabled .bookmark-bar, .fullscreen-listener-enabled #panels-container { 
            transition: transform .5s, opacity .5s ease-in-out !important; 
        }
        .fullscreen-listener-enabled .mainbar {
            display: block;
        }

        .fullscreen-listener-enabled.hidden-top #header, .fullscreen-listener-enabled.hidden-top .mainbar, .fullscreen-listener-enabled.hidden-top .bookmark-bar { 
            transform: translateY(-${header.offsetHeight + mainBar.offsetHeight + bookmarkBar.offsetHeight}px) !important; 
            opacity: 0;
        }
        .fullscreen-listener-enabled.hidden-panel #panels-container { 
            transform: translateX(-100%); 
            opacity: 0;
        }
        .hidden-panel .panel-group{
            display: none;
        }

        .fullscreen-listener-enabled #main { 
            padding-top: 0 !important; 
        }

        .fullscreen-listener-enabled #header, .fullscreen-listener-enabled .mainbar, .fullscreen-listener-enabled .bookmark-bar { 
            z-index: 7;
        }
        .fullscreen-listener-enabled .mainbar { 
            margin-top: ${header.offsetHeight}px; 
        }
        .fullscreen-listener-enabled .bookmark-bar {
            margin-top: 0;
        }
        .fullscreen-listener-enabled #main, .fullscreen-listener-enabled .inner {
            position: absolute !important;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        .fullscreen-listener-enabled .extensionIconPopupMenu {
            z-index: 8;
        }

        .fullscreen-listener-enabled footer {
            margin-top: auto !important;
        }
    `;

    if (hidePanels) {
        style += `.fullscreen-listener-enabled #webview-container {
            margin-left: calc(-${panelsContainer.offsetWidth}px + ${marginLeft});
        }`;
    }

    if (bookmarBarPadding) {
        style += `.fullscreen-listener-enabled .bookmark-bar {
            height: auto;
            padding-top: ${bookmarBarPadding};
            padding-bottom: ${bookmarBarPadding};
        }`
    }

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

    document.head.appendChild(styleEl);

    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 = "10";
    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";
        hoverDiv.style.zIndex = "10";
        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);
        hidePanels && panelHoverDiv.addEventListener("pointerenter", showLeft);
        hide();
    }

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

    function hide() {
        app.classList.add("hidden-top");

        if (hidePanels) {
            app.classList.add("hidden-panel");
        }
    }

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

    function showTop() {
        app.classList.remove("hidden-top");
    }

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

---

EDIT: fixed property bookmarkBarPadding wasn't used correctly

[vascormbaptista]

Does this work in snapshot? I tried it and it is not working

[oudstand]

I've fixed code that was only intended to work local only.

/**
 * 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 = '0px',
        bookmarBarPadding = '3px';

    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;

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

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

    let style = `
        .fullscreen-listener-enabled {
            #header, .mainbar, .bookmark-bar, #panels-container { 
                transition: transform .5s, opacity .5s ease-in-out !important; 
            }

            &.hidden-top {
                #header, .mainbar, .bookmark-bar { 
                    transform: translateY(-${header.offsetHeight + mainBar.offsetHeight + bookmarkBar.offsetHeight}px) !important; 
                    opacity: 0;
                    z-index: 7;
                }
            }

            #header, .mainbar, .bookmark-bar { 
                z-index: 7;
            }

            .mainbar {
                display: block;
                margin-top: ${header.offsetHeight}px; 
            }

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

            .bookmark-bar {
                margin-top: 0;
            }

            #main, .inner {
                position: absolute !important;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }

            .extensionIconPopupMenu {
                z-index: 8;
            }

            footer {
                margin-top: auto !important;
            }

            &.hidden-panel #panels-container { 
                transform: translateX(-100%); 
                opacity: 0;
            }
        }

        .hidden-panel .panel-group {
            display: none;
        }
    `;

    if (hidePanels) {
        style += `.fullscreen-listener-enabled #webview-container {
            margin-left: calc(-${panelsContainer.offsetWidth}px + ${marginLeft});
        }`;
    }

    if (bookmarBarPadding) {
        style += `.fullscreen-listener-enabled .bookmark-bar {
            height: auto;
            padding-top: ${bookmarBarPadding};
            padding-bottom: ${bookmarBarPadding};
        }`;
    }

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

    document.head.appendChild(styleEl);

    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 = '10';
    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';
        hoverDiv.style.zIndex = '10';
        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);
        hidePanels && panelHoverDiv.addEventListener('pointerenter', showLeft);
        hide();
    }

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

    function hide() {
        app.classList.add('hidden-top');

        if (hidePanels) {
            app.classList.add('hidden-panel');
        }
    }

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

    function showTop() {
        app.classList.remove('hidden-top');
    }

    function showLeft() {
        if (hidePanels) {
            app.classList.remove('hidden-panel');
        }
    }
})();

---

@vascormbaptista the mod itself should work on the latest Snapshot version. I've fixed a small styling problem. What exactly doesn't work for you?

[vascormbaptista]

@oudstand I just tried this code, it is not working for me either.... do you have discord? maybe you can help me out