Solved Put only Reload button and an extension button in between Address field and Search field
-
Hi,
I'm right-handed and would certainly feel it's more convinient to put the Reload button in between the Address field and search field.
I found the following code in this forum. But it moves all the navigation buttons in between address field and search field. That's not what I want. I just want to move the Reload button.
.UrlBar-AddressField {order: -1;}
I also use an extension by the name of "Paste and Go", which, as its name indicates, pastes anything in clipboard to the Address field and then open it in a new tab, if set so.
Can the button of that extension also be placed in between the Address field and the Search field?
Thanks
-
This can be done in latest Snapshot, can be archived.
-
@drkh Nowadays navigation buttons are inside their own toolbar, which makes it hard to change the order of single items. It is possible by creating a new toolbar, placing it between address and search field and then moving the button out of the original toolbar and into the new one. But then again, why not reload with a keyboard shortcut (single key) or mouse gesture?
I’d also like to mention using an extension to paste & go is a waste of resources. You can do so with command chains. See https://forum.vivaldi.net/topic/63828/command-chain-recipes/33 (open clipboard in new tab) and https://forum.vivaldi.net/topic/63828/command-chain-recipes/11 (open selection).
-
Really great to know those two nice command chains!
I added them and played with them for a while quite happily.
Thank you very much.
-
-
@drkh A demo? Sure. Try
.UrlBar-AddressField {order: -1;}
and then hide everything but the reload button with right click. -
Ok, I decided to do it. The mod moves a custom number of buttons to a second toolbar.
// Second Toolbar // version 2022.4.0 // https://forum.vivaldi.net/post/560359 // Adds a second toolbar to the UrlBar and moves »numberOfButtons« from the // original toolbar to it. (function secondToolbar() { function addToolbar(adr) { const check = document.querySelector(".vm-st-move"); if (!check) { const div = document.createElement("div"); div.classList.add( "toolbar", "toolbar-droptarget", "toolbar-mainbar", "toolbar-large", "vm-st-move" ); adr.parentNode.insertBefore(div, adr.nextSibling); const target = document.querySelector(".vm-st-move"); const numberOfButtons = 2; // change number of buttons to be moved for (let i = 0; i < numberOfButtons; i++) { const btn = document.querySelector( ".UrlBar .toolbar-mainbar .button-toolbar button" ); target.appendChild(btn.parentNode); } } } let appendChild = Element.prototype.appendChild; Element.prototype.appendChild = function () { if (arguments[0].tagName === "DIV") { setTimeout( function () { if (this.classList.contains("UrlBar-AddressField")) { addToolbar(this); } }.bind(this, arguments[0]) ); } return appendChild.apply(this, arguments); }; })();
-
-
Very interesting and very wonderful!
So... if the 5th (Reload) and the 6th (Home Page) toolbar buttons are to be re-positioned, what in the JS codes should we alter?
-
@drkh Well, you said you wanted to move only reload. But I changed the script so that you can move any number of buttons now. To move the buttons they have to be placed first in the UI (shift‐click and drag&drop).
-
I do only want to move the Reload button. The Home Page button was also mentioned because I was curious if more than one button can be moved. Now you proved that:
On my URL bar, now the Reload button sits between Address and Search bars... a lot closer to my right hand.
Great! Thank you very much.
-
@drkh Well, I started to use it myself now. These days I’m reluctant to change my setup, but bringing some of the status bar buttons up into a second main bar makes quite some sense. Combined with urlbar-spacing this gives a nice result.
-
-
@drkh You can make more room by using the extension toggle. I set it to toggle hidden extensions and hide all but one extension. Some kind of extensions manager is useful too to disable extensions you don’t use all the time (saves both resources and space). And yeah, the search field isn’t all that useful in my opinion. I don’t use the address field to search either, quick commands is all I need.
-
Right. Perhaps it's time to learn more of the quick commands.
-
Now I have installed a few extensions regarding internet connection, such as a proxy extension and an HTTP request modifier.
I would like to place the icons of those extensions between the Address field and the Search field.
Could you help me?
Thanks in advance.
-
@drkh No, sorry. Trying to pull extensions out of the extension toolbar is a very bad idea and will lead to crashes. Hard pass. The only option is to move the whole extension toolbar between address field and search field.
-
@luetage Lead to crash? I'll certainly want to avoid that! Thanks for telling me.
-
@drkh The current script can lead to crashes too. Try and move one of the buttons out of the second toolbar… I had a version up that checks for the move and which caught the error, but it left an artifact where the button was before and the move didn’t work in the first place. The browser didn’t crash then, but the window needed to be refreshed nevertheless, therefore I decided not to implement it. Anyway, as long as you don’t try to move the buttons all is fine, but it shows why it’s a bad idea to place buttons outside of their natural container. The extension toolbar is even less forgiving, unlike the address bar it is being removed when opening a mail tab or when hiding the UI—this means it tries to remove buttons that aren’t there anymore and the process crashes.
-
@luetage Currently there is only one button (Reload) relocated to between the Address and Seach fields. So far, so good.
Thanks for explanation. Really good to know.
-
This can be done in latest Snapshot, can be archived.
-
Why move the reload button? It makes more sense to me to have it next to the forward button. Back, forward, and reload all reload pages. It makes sense for them to be grouped together.
-