AutoHide Tab Bar + Address Bar | Show on Hover
-
Thank you. It is better. I think there is still an issue, though I'm not just if it's this or vivaldi in general. If you open a panel and then move your mouse away from the panel, the space that the panel was taking up is still "blocked out", used. If you manually close the panel, the same way you opened it, that blocked space is gone. Odd.
-
@n8chavez sorry but I can't reproduce your problem. Maybe I don't fully understand it.
-
As you can see from the image below, the notes panel is expanded and I'm using your js mode. The panel has a certain width.
This screenshot shows the panel closed using the mod by not hovering over it any longer. This is not a manual panel close, which is done by again clicking the panel icon that is currently open. Here, the width of the panel still remains, as though it were open. But it's not open.
That black area on the left doesn't exist if the panel is manually closed.
I hope I explained it well enough.
-
@n8chavez that helps. I was using floating panels and then there is no problem. As a workaround you could use floating panels, then everything works fine. How would you expect would not floating panels behave?
-
I guess I'd assume both manually closing the panel and automatically closing the panel, using your mod, would behave the same way; without the black area being there. If it's not being used why take up the space?
-
@n8chavez that's a bit tricky. I'll take a look soon. As mentioned if you use floating panels (you can enable it via settings or quick command
F2
) then it already works fine. -
Heyy I'm kind of a noob so can anyone explain how to do this on linux? I couldn't find browser.html and how do I link it to it?
-
@KushalAgarwal
As I recall browser.html was the file used in the old version, which is no longer available. You just need to focus on /opt/vivaldi/resources/vivaldi/window.html -
Ok thanks! But where do I put the .js file?
-
-
Maybe the OP should be updated with the newest code? Too many snippets floating in this thread
That said, looks awesome, gonna try this now!
-
It's amazing but is there any way to like make the hover transition smoother?
-
I've improved the look a bit and also the transition should look better now.
/** * 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, // set to false to not hide the panels marginLeft = '0px', // set to '0px' to remove the margin left bookmarkBarPadding = '6px', // set to '0px' to remove the padding around the bookmark bar delay = 125; // set to 0 to remove the delay 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, showLeftTimeout, showTopTimeout; 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 || 0)}px); opacity: 0; } } #header, .mainbar { z-index: 8; } .bookmark-bar { z-index: 7; } #header .vivaldi { margin-top: 3px; } .hover-div { transition: visibility 0.5s ease-in-out; } &:not(.hidden-top) .hover-div { visibility: hidden; } .bookmark-bar-top-off .mainbar { padding-bottom: 5px; background: var(--colorAccentBg); } .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; } .panel-hover-div { transition: visibility 0.5s ease-in-out; } &:not(.hidden-panel) .panel-hover-div { visibility: hidden; } } #app:not(.fullscreen-listener-enabled) { .hover-div, .panel-hover-div { visibility: hidden; } } .hidden-panel .panel-group { display: none; } `; if (hidePanels) { style += `.fullscreen-listener-enabled #webview-container { margin-left: calc(-${panelsContainer.offsetWidth}px + ${marginLeft}); }`; } if (bookmarkBarPadding) { style += `.fullscreen-listener-enabled .bookmark-bar { height: auto; padding-top: ${bookmarkBarPadding}; padding-bottom: calc(${bookmarkBarPadding} / 2); }`; } const styleEl = document.createElement('style'); styleEl.appendChild(document.createTextNode(style)); document.head.appendChild(styleEl); const hoverDiv = document.createElement('div'); hoverDiv.style.height = '1.5rem'; hoverDiv.style.width = '100vw'; hoverDiv.style.position = 'fixed'; hoverDiv.style.left = '0'; hoverDiv.style.top = '0'; hoverDiv.style.zIndex = '10'; hoverDiv.className = 'hover-div'; document.querySelector('#app').appendChild(hoverDiv); const panelHoverDiv = document.createElement('div'); if (hidePanels) { panelHoverDiv.style.height = '100%'; panelHoverDiv.style.width = '1.5rem'; panelHoverDiv.style.position = 'fixed'; panelHoverDiv.style.left = '0'; panelHoverDiv.style.zIndex = '10'; panelHoverDiv.className = 'panel-hover-div'; 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); hoverDiv.addEventListener('pointerleave', clearTimeouts); if (hidePanels) { panelHoverDiv.addEventListener('pointerenter', showLeft); panelHoverDiv.addEventListener('pointerleave', clearTimeouts); } hide(); } function removeFullScreenListener() { app.classList.remove('fullscreen-listener-enabled'); webView.removeEventListener('pointerenter', hide); hoverDiv.removeEventListener('pointerenter', showTop); hoverDiv.removeEventListener('pointerleave', clearTimeouts); if (hidePanels) { panelHoverDiv.removeEventListener('pointerenter', showLeft); panelHoverDiv.removeEventListener('pointerleave', clearTimeouts); } show(); } function clearTimeouts() { if (showTopTimeout) clearTimeout(showTopTimeout); if (showLeftTimeout) clearTimeout(showLeftTimeout); } function hide() { app.classList.add('hidden-top'); if (hidePanels) app.classList.add('hidden-panel'); } function show() { showTop(); showLeft(); } function showTop() { showTopTimeout = setTimeout(() => app.classList.remove('hidden-top'), delay); } function showLeft() { if (hidePanels) { showLeftTimeout = setTimeout(() => app.classList.remove('hidden-panel'), delay); } } })();
-
some really weird behaviour is happening, it does not happen all the time but, sometimes, if I hover to the absolute top it will show the address bar, but when I go to hover on the actual address to change it, it closes, and it does not seem to be fixed unless i close the browser...
-
@oudstand The functionality is great, but when I use this with a modified window.html, it breaks new windows, addon popup windows, settings in a new window, etc.
-
@tryptech what do you mean with "it breaks"?
-
@oudstand This is a new window:
I am unable to drag it around nor interact with it (ctrl+l, ctrl+t, ctrl+n, shortcuts generally don't work.
This is a settings window:
Similar problems to the new window. I am unable to interact with it. If settings opens in a tab instead, it functions normally.
-
@tryptech You're sure it's caused by this mod? I never had this problems.
-
@oudstand Yes, I believe it's this mod. I did a fresh install of Vivaldi on another computer, no signing in, no addons, no extensions, and the exact same behavior happens.
Vivaldi 6.8.3381.48 on Windows 11 23H2 and 24H2
EDIT: I was loading the JS in the <head> of window.html. Moving it to <body> fixed it, disregard the issue.
-
@tryptech yeah the mods have to be added to the body.