AutoHide Tab Bar + Address Bar | Show on Hover

Abhimanyu

@oudstand @shenghuoyishujia Thanks. What modifications does one need to do if address and tab bars aren't on the top?

@outstand can you mention some other similar (mouse hover to reveal address/tab bar) projects as i was unable to find them on the forum.

stardepp

@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?

oudstand

@Abhimanyu I would have to check this in a week when I am back from vacation

oudstand

@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?

I also tried to this, but couldn't manage it. You would have to set the property into chromes local storage, but if you create a JS booklet and combine it with the command chains, then the scope is wrong.

stardepp

@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.

shenghuoyishujia

@Abhimanyu
I am sorry that I usually set my task bar of win11 hide automatically. So I never try to set address bar and tab bar at the bottom. And I wonder if this may conflict with task bar.

I sincerely hope the Vivaldi will have this feature out of box in the future.

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