Move Vivaldi Button on Main Toolbar [Left|Right]

[luetage]

@skribb Should work:

(function () {

    function style() {
        const style = document.createElement('style');
        style.type = 'text/css';
        style.id = 'mvVivbtn';
        style.innerHTML = `.vivaldi {position: relative;}`;
        document.getElementsByTagName('head')[0].appendChild(style);
    };

    function mvVivbtn() {
        style();
        var btn = document.querySelector(".vivaldi");
        btn.setAttribute('tabindex', '-1');
        var bar = document.querySelector(".toolbar-addressbar");
        var div = document.createElement('div');
        div.classList.add('button-toolbar');
        bar.appendChild(div);
        div.appendChild(btn);
    }

    setTimeout(function wait() {
        const browser = document.getElementById('browser');
        if (browser) {
              mvVivbtn();
        }
        else {
             setTimeout(wait, 300);
        }
    });

    })();

[skribb]

@luetage that is soooooooooooooo good

thanks a million

[luetage]

@Hadden89 I edited the initial code too, there is no need to make the button a child of the main toolbar. It even seems detrimental, at least on Gnome the new version triggers the menu with shortcut (alt), while the original version doesn't. Something I came to realise just now.

[Hadden89]

@luetage Windows trigger the menu anyway, but I'll update the code

[ChimeraLove]

Hello,

I would love your help in moving the Vivaldi button to the vertical panel above the bookmarks button.

I don't know js, and was trying to play with panelbtn and .switch with no luck

Thanks!

[luetage]

@ChimeraLove

Here:

(function () {

    function style() {
        const style = document.createElement('style');
        style.type = 'text/css';
        style.id = 'mvVivbtn';
        style.innerHTML = `.vivaldi {position: relative;}`;
        document.getElementsByTagName('head')[0].appendChild(style);
    };

    function mvVivbtn() {
        style();
        var btn = document.querySelector('.vivaldi');
        btn.setAttribute('tabindex', '-1');
        var panel = document.getElementById('switch');
        panel.insertBefore(btn, panel.firstChild);
    }

    setTimeout(function wait() {
        const browser = document.getElementById('browser');
        if (browser) {
              mvVivbtn();
        }
        else {
             setTimeout(wait, 300);
        }
    });

    })();

[ChimeraLove]

@luetage Thank you! perfect

[EvilSpark]

Thanks a lot for this great Mod luetage.

[oudstand]

Did you adapt the mod for the latest update?

[Hadden89]

Don't seem to work anymore with latest snaps.

[sjudenim]

@Hadden89

That's because they've changed the .addressbar and .addressfield to .URLBar and .URLField

Just replace this line

       var bar = document.querySelector(".toolbar-addressbar");

with this

       var bar = document.querySelector(".UrlBar");

[midoni]

@luetage said in (Solved) Move Vivaldi Button on Main Toolbar [Left|Right]:

@skribb Should work:

…

Thanks a lot! But now the saved space is unused. How can the tabs use this space?

[Ivanwah]

Sorry for necroing. I found that this works until you go into full-screen mode (double clicking on a video or by pressing F11). After that the button returns to its original position. A button still stays in the toolbar but nothing happens when you click on it. Restarting Vivaldi fixes it and launching a new window fixes it only for that new window.

[jstlk4smth]

@sbernecchia, @Ivanwah
Next is tested on win10 viv5.1. Not fix, but it recreate viv button(delay 1-2sec) after returning to maximized or normal window mode and deleting one that not working. Rarely it stop working for me, but dunno what the reason.

on the right of urlbar:

(function () {

    function style() {
        const style = document.createElement('style');
        style.type = 'text/css';
        style.id = 'mvVivbtn';
        style.innerHTML = `.vivaldi {position: relative;}`;
        document.getElementsByTagName('head')[0].appendChild(style);
    };

    function mvVivbtn() {
        var btn = document.querySelector(".vivaldi");
        btn.setAttribute('tabindex', '-1');
        var bar = document.querySelector(".UrlBar");
        bar.appendChild(btn);
    }

    setTimeout(function wait() {
        const browser = document.getElementById('browser');
        if (browser) {
			style();
            mvVivbtn();
        }
        else {
             setTimeout(wait, 300);
        }
    });


	//bypass wrong main button movement after fullscreen
	var mutationObserver = new MutationObserver(function(mutations) {
	mutations.forEach(function(mutation) {
		setTimeout(function iwillcheck() {
			if(document.getElementById('browser').getAttribute('Class').includes("normal") || document.getElementById('browser').getAttribute('Class').includes("maximized")) {	
				mvVivbtn();
				let element = document.querySelectorAll(".vivaldi");
				if(element.length > 1){
					element[0].parentNode.removeChild(element[0]);
					};
			};
		}, 1000);
		});
	});

	setTimeout(function waitAndGo() {
		// Starts listening for changes.
		mutationObserver.observe(document.getElementById('browser'), {
		  attributes: true,//***
		  attributeOldValue: true,//***
		  attributeFilter: [ "class" ]
		});
	}, 1000);
    })();

on the left, with new tab and trash buttons on the same line:

(function () {

    function style() {
        const style = document.createElement('style');
        style.type = 'text/css';
        style.id = 'mvVivbtn';
        style.innerHTML = `.vivaldi {position: relative;}`;
        document.getElementsByTagName('head')[0].appendChild(style);
		//next is for .button-toolbar(newtab btn and trash btn), w/o static it moves somewhere right
		const style2 = document.createElement('style');
        style2.type = 'text/css';
        style2.id = 'mvTbBBtns';
        style2.innerHTML = `.button-toolbar {position: static;}`;
        document.getElementsByTagName('head')[0].appendChild(style2);
    };

    function mvVivbtn() {
        var btn = document.querySelector(".vivaldi");
        btn.setAttribute('tabindex', '-1');
        var bar = document.querySelector(".toolbar-mainbar.toolbar-droptarget");
		bar.insertBefore(btn, bar.firstChild); //uuu
    }
	
	function mvPlusBtn() {
        var btn = document.querySelector(".newtab");
        btn.setAttribute('tabindex', '-1');
        var bar = document.querySelector(".toolbar-mainbar.toolbar-droptarget");
		bar.appendChild(btn);
    }

	function mvTrashBtn() {
        var btn = document.querySelector(".toggle-trash");
        btn.setAttribute('tabindex', '-1');
        var bar = document.querySelector(".toolbar-mainbar.toolbar-droptarget");
		bar.appendChild(btn);
    }


    setTimeout(function wait() {
        const browser = document.getElementById('browser');
        if (browser) {
			  style();
              mvVivbtn();
			  mvPlusBtn();
			  mvTrashBtn();
        } 
        else {
             setTimeout(wait, 300);
        }
    });
	
	//bypass wrong main button movement after fullscreen
	var mutationObserver = new MutationObserver(function(mutations) {
	mutations.forEach(function(mutation) {
		setTimeout(function iwillcheck() {
			if(document.getElementById('browser').getAttribute('Class').includes("normal") || document.getElementById('browser').getAttribute('Class').includes("maximized")) {	
				mvVivbtn();
				let element = document.querySelectorAll(".vivaldi");
				if(element.length > 1){
					element[1].parentNode.removeChild(element[1]);
					};
			};
		}, 1000);
		});
	});

	setTimeout(function waitAndGo() {
		// Starts listening for changes.
		mutationObserver.observe(document.getElementById('browser'), {
		  attributes: true,//***
		  attributeOldValue: true,//***
		  attributeFilter: [ "class" ]
		});
	}, 1000);

})();

based on previous code from this thread

[casc5962]

Is it possible to make the move for people who don't know how to code?

[jstlk4smth]

@casc5962 said in Move Vivaldi Button on Main Toolbar [Left|Right]:

Is it possible to make the move for people who don't know how to code?

Here version with settings. Change values at the top of script even before function, of vivButtonMode(1-3) and vivPosition(0,1,2,3,...etc).
Examples:

const vivButtonMode = 1;
const vivPosition = 3;

const vivButtonMode = 2;
const vivPosition = 3;

(if more than 4 extensions installed next example also can show how it works)
const vivButtonMode = 3;
const vivPosition = 2;

//tested on vivaldi 5.1.2567.39
//vivButtonMode = 1 - move button between global childNodes(blocks) of urlbar(casual separate blocks inside urlbar: "next\prev\home\reload" buttons| addressfield| userbutton| extensions)
//there was NO TESTS with blocks that added by other JS mods, so position results may be unexpected for "1" mode
//vivButtonMode = 2 - place viv button inside next\prev\home\reload buttons block and move it between only that block buttons
//vivButtonMode = 3 - place viv button inside extensions block and move it between only that block buttons
const vivButtonMode = 2;
//set the number of element(count starts from 0) before which you want to place the viv button inside the block which was chosen by vivButtonMode setting
//try different numbers: 0,1,2,3,...|  0 will place viv button at the beginning of the block
//IMPORTANT. if set value more than number of native elements in the block, then bypass for resetting viv button position after returning from fullscreen stop working. example: in "next\prev\home\etc" - block : 6 buttons. if set vivPosition = 7, then bypass stop working. for urlbar max number possibly is 4, for extensions depend on number of extensions, that are shown. Just test and find the edge values by yourself.
const vivPosition = 4;
//moveNewTabBut and moveTrashBut, enable(set 1) or disable(set 0) the move of New TAb and Trash buttons to the end of next\prev\home\reload - block and before addressfield block
//no settings for position of this 2 buttons added
(function () {

    function style() {
        const style = document.createElement('style');
        style.type = 'text/css';
        style.id = 'mvVivbtn';
        style.innerHTML = `.vivaldi {position: relative;}`;
        document.getElementsByTagName('head')[0].appendChild(style);
    };

    function mvVivbtn() {
        var btn = document.querySelector(".vivaldi");
        btn.setAttribute('tabindex', '-1');
        if(vivButtonMode == 1){
			var bar = document.querySelector(".UrlBar");
		}
		else if(vivButtonMode == 2){
			var bar = document.querySelector(".toolbar-mainbar.toolbar-droptarget");
		}
		else if(vivButtonMode == 3){
			var bar = document.querySelector(".toolbar-mainbar.toolbar-extensions");
		}
		bar.insertBefore(btn, bar.childNodes[vivPosition]); //uuu
    }

    setTimeout(function wait() {
        const browser = document.getElementById('browser');
        if (browser) {
			style();
            mvVivbtn();
        }
        else {
             setTimeout(wait, 300);
        }
    });


	//bypass wrong main button movement after fullscreen
	var mutationObserver = new MutationObserver(function(mutations) {
	mutations.forEach(function(mutation) {
		setTimeout(function iwillcheck() {
			if(document.getElementById('browser').getAttribute('Class').includes("normal") || document.getElementById('browser').getAttribute('Class').includes("maximized")) {	
				mvVivbtn();
				let element = document.querySelectorAll(".vivaldi");
				if(element.length > 1){
					element[1].parentNode.removeChild(element[1]);
					};
			};
		}, 1000);
		});
	});

	setTimeout(function waitAndGo() {
		// Starts listening for changes.
		mutationObserver.observe(document.getElementById('browser'), {
		  attributes: true,//***
		  attributeOldValue: true,//***
		  attributeFilter: [ "class" ]
		});
	}, 1000);
    })();

I have also found bug in my past version with new tab and trash buttons, that mess extension notifications to one point. Here it fixed + similar position settings also added.

//tested on vivaldi 5.1.2567.39
//vivButtonMode = 1 - move button between global childNodes(blocks) of urlbar(casual separate blocks inside urlbar: "next\prev\home\reload" buttons| addressfield| userbutton| extensions)
//there was NO TESTS with blocks that added by other JS mods, so position results may be unexpected for "1" mode
//vivButtonMode = 2 - place viv button inside next\prev\home\reload buttons block and move it between only that block buttons
//vivButtonMode = 3 - place viv button inside extensions block and move it between only that block buttons
const vivButtonMode = 1;
//set the number of element(count starts from 0) before which you want to place the viv button inside the block which was chosen by vivButtonMode setting
//try different numbers: 0,1,2,3,...|  0 will place viv button at the beginning of the block
//IMPORTANT. if set value more than number of native elements in the block, then bypass for resetting viv button position after returning from fullscreen stop working. example: in "next\prev\home\etc" - block : 6 buttons. if set vivPosition = 7, then bypass stop working. for urlbar max number possibly is 4, for extensions depend on number of extensions, that are shown. Just test and find the edge values by yourself.
const vivPosition = 0;
//moveNewTabBut and moveTrashBut, enable(set 1) or disable(set 0) the move of New TAb and Trash buttons
//other settings similar to vivButton
const moveNewTabBut = 1;
const modeNewTab = 2;
const positionNewTabBut = 6;

const moveTrashBut = 1;
const modeTrashBut = 2;
const positionTrashBut = 6;

(function () {

    function style() {
        const style = document.createElement('style');
        style.type = 'text/css';
        style.id = 'mvVivbtn';
        style.innerHTML = `.vivaldi {position: relative;}`;
        document.getElementsByTagName('head')[0].appendChild(style);
		//next is for .button-toolbar(newtab btn and trash btn), w/o static it moves somewhere right
		const style2 = document.createElement('style');
        style2.type = 'text/css';
        style2.id = 'mvTbBBtns';
        style2.innerHTML = `.newtab {position: static;}`;
        document.getElementsByTagName('head')[0].appendChild(style2);
    };

    function mvVivbtn() {
        var btn = document.querySelector(".vivaldi");
        btn.setAttribute('tabindex', '-1');
		if(vivButtonMode == 1){
			var bar = document.querySelector(".UrlBar");
		}
		else if(vivButtonMode == 2){
			var bar = document.querySelector(".toolbar-mainbar.toolbar-droptarget");
		}
		else if(vivButtonMode == 3){
			var bar = document.querySelector(".toolbar-mainbar.toolbar-extensions");
		}
		bar.insertBefore(btn, bar.childNodes[vivPosition]); //uuu
    }
	
	function mvPlusBtn() {
        var btn = document.querySelector(".newtab");
        btn.setAttribute('tabindex', '-1');
		if(modeNewTab == 1){
			var bar = document.querySelector(".UrlBar");
		}
		else if(modeNewTab == 2){
			var bar = document.querySelector(".toolbar-mainbar.toolbar-droptarget");
		}
		else if(modeNewTab == 3){
			var bar = document.querySelector(".toolbar-mainbar.toolbar-extensions");
		};
		bar.insertBefore(btn, bar.childNodes[positionNewTabBut]);
    }

	function mvTrashBtn() {
        var btn = document.querySelector(".toggle-trash");
        btn.setAttribute('tabindex', '-1');
		if(modeTrashBut == 1){
			var bar = document.querySelector(".UrlBar");
		}
		else if(modeTrashBut == 2){
			var bar = document.querySelector(".toolbar-mainbar.toolbar-droptarget");
		}
		else if(modeTrashBut == 3){
			var bar = document.querySelector(".toolbar-mainbar.toolbar-extensions");
		};
		bar.insertBefore(btn, bar.childNodes[positionTrashBut]);
    }


    setTimeout(function wait() {
        const browser = document.getElementById('browser');
        if (browser) {
			style();
			if(moveNewTabBut){
			mvPlusBtn();
			};
			if(moveTrashBut){
			mvTrashBtn();
			};
			mvVivbtn();
        } 
        else {
            setTimeout(wait, 1000);
        }
    });
	
	//bypass wrong main button movement after fullscreen
	var mutationObserver = new MutationObserver(function(mutations) {
	mutations.forEach(function(mutation) {
		setTimeout(function iwillcheck() {
			if(document.getElementById('browser').getAttribute('Class').includes("normal") || document.getElementById('browser').getAttribute('Class').includes("maximized")) {	
				mvVivbtn();
				let element = document.querySelectorAll(".vivaldi");
				if(element.length > 1){
					element[1].parentNode.removeChild(element[1]);
					};
			};
		}, 1000);
		});
	});

	setTimeout(function waitAndGo() {
		// Starts listening for changes.
		mutationObserver.observe(document.getElementById('browser'), {
		  attributes: true,//***
		  attributeOldValue: true,//***
		  attributeFilter: [ "class" ]
		});
	}, 1000);

})();

[casc5962]

@jstlk4smth Thank you!

[drkh]

@jstlk4smth

Hi,

I ran your mod on 32-bit Vivaldi v5.1.2567.39 (same version as you used) under Windows 7 Home Pre x64 SP2, The mod codes are those shown below "I have also found bug in my past version..." in your last post.

There is one issue. When the moving of the New Tab button is disabled (const moveNewTabBut = 0), the New Tab button flashes into sight and then disappears.

When I ran the mod, Vivaldi v5.1.2567.39 had just been newly installed on my PC as standalone and everything of it was kept default.

Please take a look. Thank you.

[jstlk4smth]

@drkh Thank you for clear description. I have reproduced it on clear profile. The reason was the css multiline-tabs mod that was set in my main profile and somehow solved the problem with js. The following version works on a clean profile in my case.

//tested on vivaldi 5.1.2567.39
//vivButtonMode = 1 - move button between global childNodes(blocks) of urlbar(casual separate blocks inside urlbar: "next\prev\home\reload" buttons| addressfield| userbutton| extensions)
//there was NO TESTS with blocks that added by other JS mods, so position results may be unexpected for "1" mode
//vivButtonMode = 2 - place viv button inside next\prev\home\reload buttons block and move it between only that block buttons
//vivButtonMode = 3 - place viv button inside extensions block and move it between only that block buttons
const vivButtonMode = 1;
//set the number of element(count starts from 0) before which you want to place the viv button inside the block which was chosen by vivButtonMode setting
//try different numbers: 0,1,2,3,...|  0 will place viv button at the beginning of the block
//IMPORTANT. if set value more than number of native elements in the block, then bypass for resetting viv button position after returning from fullscreen stop working. example: in "next\prev\home\etc" - block : 6 buttons. if set vivPosition = 7, then bypass stop working. for urlbar max number possibly is 4, for extensions depend on number of extensions, that are shown. Just test and find the edge values by yourself.
const vivPosition = 0;
//moveNewTabBut and moveTrashBut, enable(set 1) or disable(set 0) the move of New TAb and Trash buttons
//other settings similar to vivButton
const moveNewTabBut = 0;
const modeNewTab = 2;
const positionNewTabBut = 6;

const moveTrashBut = 1;
const modeTrashBut = 2;
const positionTrashBut = 6;

(function () {

    function style() {
        const style = document.createElement('style');
        style.type = 'text/css';
        style.id = 'mvVivbtn';
        style.innerHTML = `.vivaldi {position: relative;}`;
        document.getElementsByTagName('head')[0].appendChild(style);
    };

	function style2() {
		//next is for .newtab btn, w/o static it moves somewhere right
		const style2 = document.createElement('style');
        style2.type = 'text/css';
        style2.id = 'mvTbBBtns';
        style2.innerHTML = `.newtab {position: static;}`;
        document.getElementsByTagName('head')[0].appendChild(style2);
    };

    function mvVivbtn() {
        var btn = document.querySelector(".vivaldi");
        btn.setAttribute('tabindex', '-1');
		if(vivButtonMode == 1){
			var bar = document.querySelector(".UrlBar");
		}
		else if(vivButtonMode == 2){
			var bar = document.querySelector(".toolbar-mainbar.toolbar-droptarget");
		}
		else if(vivButtonMode == 3){
			var bar = document.querySelector(".toolbar-mainbar.toolbar-extensions");
		}
		bar.insertBefore(btn, bar.childNodes[vivPosition]); //uuu
    }
	
	function mvPlusBtn() {
        var btn = document.querySelector(".newtab");
        btn.setAttribute('tabindex', '-1');
		if(modeNewTab == 1){
			var bar = document.querySelector(".UrlBar");
		}
		else if(modeNewTab == 2){
			var bar = document.querySelector(".toolbar-mainbar.toolbar-droptarget");
		}
		else if(modeNewTab == 3){
			var bar = document.querySelector(".toolbar-mainbar.toolbar-extensions");
		};
		bar.insertBefore(btn, bar.childNodes[positionNewTabBut]);
    }

	function mvTrashBtn() {
        var btn = document.querySelector(".toggle-trash");
        btn.setAttribute('tabindex', '-1');
		if(modeTrashBut == 1){
			var bar = document.querySelector(".UrlBar");
		}
		else if(modeTrashBut == 2){
			var bar = document.querySelector(".toolbar-mainbar.toolbar-droptarget");
		}
		else if(modeTrashBut == 3){
			var bar = document.querySelector(".toolbar-mainbar.toolbar-extensions");
		};
		bar.insertBefore(btn, bar.childNodes[positionTrashBut]);
    }


    setTimeout(function wait() {
        const browser = document.getElementById('browser');
        if (browser) {
			style();
			if(moveNewTabBut){
			style2();
			mvPlusBtn();
			};
			if(moveTrashBut){
			mvTrashBtn();
			};
			mvVivbtn();
        } 
        else {
            setTimeout(wait, 1000);
        }
    });
	
	//bypass wrong main button movement after fullscreen
	var mutationObserver = new MutationObserver(function(mutations) {
	mutations.forEach(function(mutation) {
		setTimeout(function iwillcheck() {
			if(document.getElementById('browser').getAttribute('Class').includes("normal") || document.getElementById('browser').getAttribute('Class').includes("maximized")) {	
				mvVivbtn();
				let element = document.querySelectorAll(".vivaldi");
				if(element.length > 1){
					element[1].parentNode.removeChild(element[1]);
					};
			};
		}, 1000);
		});
	});

	setTimeout(function waitAndGo() {
		// Starts listening for changes.
		mutationObserver.observe(document.getElementById('browser'), {
		  attributes: true,//***
		  attributeOldValue: true,//***
		  attributeFilter: [ "class" ]
		});
	}, 1000);

})();

I have also noticed little aesthetic bug - if go(f11) in full screen from clear start page - vivaldi button appears before address field, but not respond. Not critical imho, since by default there is no vivaldi button without mods.

[drkh]

@jstlk4smth

Thank you for so quick a reply.

The New Tab button now appears, as can be seen in this picture of my UI:

But... can the "window control buttons" also be moved down to the right of the "hide extension" button, and then the header get removed?

(Long story. It's something about moving Tab bar below Address bar, which I've done, as also can be seen in the above picture.)