AutoHide Tab Bar + Address Bar | Show on Hover

[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

[oudstand]

@vascormbaptista you can tell me your problem here, but with out saying what exactly isn't working, I can't help you.

[vascormbaptista]

@oudstand

Adding Functionality (JS)
There is only one single file in Vivaldi that you should ever need to modify. This file is called window.html and located at:

<YOURVIVALDIDIRECTORY>\Application<VERSION>\resources\vivaldi

You should back it up before you fiddle with it.

You did the backup, right? OK, here's the fun part:

Open window.html, and inside the <body> element add the following line:
<script src="custom.js"></script>
You can name the file as you want and also add multiple ones, one line at a time.

Add the custom.js file to the Vivaldi folder (alongside window.html)
-- and you're all set!```
code_text

this is what I did, I added your code to the custom.js script, but it did not work

[oudstand]

@vascormbaptista take a closer look at how to mod Vivaldi and how you can patch Vivaldi with a script (this is optional but easier).