AutoHide Tab Bar + Address Bar | Show on Hover

shenghuoyishujia

some javascript to automatically hide tab bar and address bar and show them by hovering

I really want bigger view. So I write this code to achieve it.

If you like the function, please give me a star on github.

Just create save the file and put it in the same dictionary with browser.html and edit window.html by inserting a script with src to load this file.

<!-- Vivaldi window document -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Vivaldi</title>
  <link rel="stylesheet" href="style/common.css" />
  <link rel="stylesheet" href="chrome://vivaldi-data/css-mods/css" />
</head>

<body>
  <script src="firefox_style_fullscreen.js"></script>
</body>

</html>

https://github.com/mannyzhuo/vivaldi_modification/blob/main/firefox_style_fullscreen.js

Demo:
alt text

--
ModEdit: Title

shenghuoyishujia

@Pathduck thank you

oudstand

Hey, I've adjusted your code to make it possible to toggle this feature on and off without closing the browser. The keyboard shortcut I chose is Ctrl+Alt+F, but this can be adjusted. Maybe you like 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
 */
let fullScreenInterval = setInterval(() => {
  const webView = document.querySelector("#webview-container");
  const header = document.querySelector("#header");
  const browser = document.querySelector("#browser");

  if (webView) {
    clearInterval(fullScreenInterval);
    let 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()
    );

    const style = document.createElement("style");
    style.appendChild(
      document.createTextNode("[hidden] { display: none !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;
      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;
      [...document.querySelectorAll(".tabbar-wrapper")].forEach(
        (item) => (item.hidden = true)
      );
      document.querySelector(".mainbar").hidden = true;
      document.querySelector(".bookmark-bar").hidden = true;
    }

    function show() {
      header.hidden = false;
      [...document.querySelectorAll(".tabbar-wrapper")].forEach(
        (item) => (item.hidden = false)
      );
      document.querySelector(".mainbar").hidden = false;
      document.querySelector(".bookmark-bar").hidden = false;
      browser.classList.remove("address-top-off");
      browser.classList.add("address-top");
    }
  }
}, 1111);

EDIT: I've updated the code to store the decision if the full screen mod is enabled or disabled in the local storage. Now the mod remembers if it is enabled or disabled after restarting Vivaldi.

shenghuoyishujia

@oudstand you are so great!

oudstand

@shenghuoyishujia Thank you

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