Move Vivaldi Button on Main Toolbar [Left|Right]

[luetage]

Try this:

(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.insertBefore(div, bar.firstChild);
        div.appendChild(btn);
    }

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

})();

[Hadden89]

@luetage Tnx, now is better; I only kept few margins for fine tuning and probably removed the last bits of bad code in my css

[skribb]

@luetage that's absolutely fabulous. what would someone who isn't a JS/CSS novice do to get the V button to the right of the extension buttons?

[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!