AutoHide Tab Bar + Address Bar | Show on Hover

owhs

I made a version that is a "tab only" mode;

When active, it hides: address ui, bookmarks bars (if active), footer... Does NOT hide side panel
Activated by double clicking a tab
The address ui pops up when cursor is over tabs

https://gist.github.com/owhs/95e9a0c17fd57aca95577fd7e39dc188

demo

edit: note, it's not perfect, but i kept it as much css as possible, would be fixed by using slightly better js logic

owhs

@stardepp said in some javascript to automatically hide tab bar and address bar and show them by hovering:

@oudstand I like this mod very much.

Kindly asked: Is there a way to create a command chain for this mod, so that this key combination to create a button to place it e.g. on the status bar?

@stardepp said in some javascript to automatically hide tab bar and address bar and show them by hovering:

@oudstand In the meantime, I have come up with another solution. I have a programmable Logitech keyboard. I have set the key combination (Ctrl+Alt+F) to the F3 key. It works well.

made a toggle button in the panel - for my tab only version
demo

full version:
https://gist.github.com/owhs/84597d9614a021717d25f5e86420cf73

// select the flexible spacer div
var panelEl = document.querySelector("#panels-container .toolbar-panel>.toolbar-spacer-flexible");

// parseHTML:
var p = document.createElement("div");
p.innerHTML = '...';

// divider:
var div = p.children[0];
// inject divider before flexible spacer
panelEl.before(div);

// button, add before divider:
var btnC = p.children[0];
div.before(btnC);

// on button click do something
btnC.querySelector("button").addEventListener("click", ()=>toggleHide());

stardepp

oudstand

@stardepp said in some javascript to automatically hide tab bar and address bar and show them by hovering:

@oudstand In the meantime, I have come up with another solution. I have a programmable Logitech keyboard. I have set the key combination (Ctrl+Alt+F) to the F3 key. It works well.

If you change in this line:
(id, combination) => combination === "Ctrl+Alt+F" && toggleFullScreen() the Ctrl+Alt+F to F3 or another key combination , you can adjust the shortcut aswell

Abhimanyu

@oudstand @shenghuoyishujia thanks. One additional modification i would suggest be that whenever the mouse hovers over the tab and address bar, the window should remain static and only the tab and address bar should overlay(if that is the correct technical term) the window similar to firefox fullscreen mode.

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!