Need help rewriting my JavaScript mod to include mutation observer.
-
So I created this JS mod for Vivaldi that moves the hamburger menu to the right side of the navigation bar from the left side of the tab bar. However, these changes are reversed whenever I exit out of fullscreen mode. Someone on here suggested to use a mutation observer in JavaScript to re-inject the code whenever the user exits out of fullscreen mode.
Here is my current code without the mutation observer. While I have some programming experience with Visual Basic, Java, and C++, I am not an expert of JavaScript programming by any means. I am hoping someone can provide me the modified code with the mutation observer in order to solve my issue. Please and thank you.
function vivaldiIcon() { const adr = document.querySelector('.toolbar-mainbar') const menu = document.querySelector('.vivaldi'); document.querySelector('.vivaldi').style = 'position: relative;'; adr.appendChild(menu); document.querySelector('.linux #tabs-container:not(.none).top').style.paddingLeft = 0; }; let timer = setTimeout(function wait() { let adr = document.querySelector('.toolbar-mainbar'); if (adr) { vivaldiIcon(); clearTimeout(timer); } else { setTimeout(wait, 300); } }, 300); document.querySelector('.linux #tabs-container:not(.none).top').setAttribute( 'style', 'padding-left: 0 !important' );
-
-
@mgunt5 If I understand your request properly, it might be possible to do this purely via CSS, which might be more reliable than a javascript mod.
The following code works for me on windows 10. You might need to tweak the right/left values depending on your setup.
#titlebar button.vivaldi { right: 0px; left: unset; } #titlebar .window-buttongroup { right: 50px !important; } #tabs-container:not(.none).top { padding-left: 10px !important; padding-right: 200px !important; }
-
This post is deleted! -
@mgunt5 The menu button was moved from the left to right, but it is still in the title bar. I want the menu button moved down to the right side of the navigation bar (below the tab bar / title bar).
-
@mgunt5 Oh, I misunderstood your original post. For a mutation observer, something like this is needed:
function moveMenuToMainbar() { const adr = document.querySelector('.toolbar-mainbar:not(.toolbar-mailbar)') const menu = document.querySelector('.vivaldi'); menu.style = 'position: relative;'; adr.appendChild(menu); document.querySelector('#tabs-container:not(.none).top').style.paddingLeft = 0; }; const CHANGE_OBSERVER = new MutationObserver(moveMenuToMainbar); function initMoveMenuMod(){ const browser = document.querySelector("#browser"); if(browser){ CHANGE_OBSERVER.observe(browser, {attributes: true, attributeFilter: ["class"]}) moveMenuToMainbar(); } else { setTimeout(initMoveMenuMod, 500); } } setTimeout(initMoveMenuMod, 500);
In testing it, there seems to be some instability. I'm not sure what it causing it, but switching from fullscreen and back seems to cause a crash, though it does resolve itself quickly.
-
@LonM Is it possible that you can review the code to see what is causing the crash whenever the mutation observer event is triggered? Thank you so much so far, but I would really appreciate it if the code was bug free. It's amazing what you can do with Vivaldi.
-
I've had a look, and I can't figure out where the problem is. My guess is the vivaldi code is trying to do something with the button it expects to be there, and gets upset when it's not in the place it's supposed to be.
I tried again with CSS only. It's a bit of a cludge, but seems to work:
#titlebar button.vivaldi { right: 0px; left: unset; top: 33px; } #header { contain:none !important; z-index: 1; } .mainbar { padding-right: 50px; } #tabs-container { padding-left: 10px !important; }
-
@LonM Thank you. Haven't tried the CSS code yet.