Moving the new tab button to the address bar

hlehyaric

@torpedopradera Please use code block to paste code in post:

```
code
code
code
```

code
code
code

Or use </> in formatting bar.

See here about Markdown.

It's far better and it's more readable.

nomadic

@torpedopradera I am away from my computer right now, but I can give you some guesses.

I would say remove this:

toolbar-tabbar > .newtab {
    /* right: 0px !important; */
	/* top: 0px !important; */
	right: 0px !important;
    position: absolute;
    width: 30px !important;
	}

And this

#tabs-container .newtab {
padding-left: 5px;
left: -38px !important;
}

They are both doing things that aren't needed anymore with the CSS I gave. You can do a search for newtab in the CSS and remove everything other than maybe the one that changes the SVG icon.

You can also try increasing the z-index value from 1 to something high like 100

I should be free in about 12 hours. If those suggestions don't work, I can help you then.

nomadic

@torpedopradera Well, unfortunately it looks like this can't be done with CSS alone Unless someone else can figure it out. I am a bit of a novice when it comes the web design, but from my research, it seems impossible (even with weird hacks like using transform and opacity: 0.99;)

The mod that places the Tab Bar below the Bookmark Bar requires the setting Tab Bar Position: [Bottom] which places the Tab Bar lower in the HTML hierarchy than the Address Bar. This messes up what I used in my CSS. No z-index value will make an element of the Tab Bar go above the Address Bar.

I did find that setting the z-index of the Address Bar to 0 allowed my CSS to work, but that breaks things... so many things... All the dropdowns from the Address Bar are hidden below other elements if you do that.

~~.UrlBar { z-index: 0; }~~

So, the content blocker, address suggestions, bookmark button, search suggestions, profile button, and extension popups are all useless with that "fix".

This leaves 5 options:
1 - Have the Tab Bar positioned on top
2 - Use a JavaScript Mod to make a new tab button in the Address Bar
3 - Have the new tab button placed statically somewhere else
4 - Never use any of the dropdowns/popups in the Address Bar (other than Site Info, that works )
5 - No mod

Sorry I wasn't able to fix it. That Tab Bar repositioning really threw a wrench into things.

torpedopradera

Thank you very much Nomadic.

Hours ago, before sleeping (I´m a spaniard) I I have been playing with the subject, trying your mod in a clean Vivaldi, and I found that it worked out of the box only in that setup, in wich the newtab button went from the tab bar to the address bar downwards.

But my layout, based in a more classic placing of toolbars achieved by means of the mod , discussed in

https://forum.vivaldi.net/topic/42105/tabs-below-address-bar-and-overlay-menus?lang=en-US&page=1

and a multiline tab bar, both requiere from tab-bar to be lowest one, and when the new tab button cross other bars upwards, everything falls apart.

I worked, as said, from a clean Vivaldi, eliminating any other references to newtab different than yours, in order to isolate the problem, and tweaking values, with no solution.

I´m a marine engineer, no a software engineer at all, and way, way more novice than you in this things, and that´s why your very elaborated conclusion came at no surprise.

I will work the solution number 2, to migrate both the newtab and the trashcan buttons to the adress with js.

It´s no portable, but i update the browsers 2-3 times a year and I consider it affordable.

Any starting point?

Regards

luetage

@torpedopradera You should have little issues with sync and trash button, other than styling and placing, but read my first reply again. The newtab button is likely a pain to move, it’s easier to make a new button.

torpedopradera

Make 2 new buttons with the adequate commands, and set the old ones as no visible, that is what I understood, am I wright?

luetage

@torpedopradera No, just one button in the toolbar for new tab, the sync‐and‐trash container can be moved as a whole.

nomadic

@torpedopradera said in Moving the new tab button to the address bar:

Any starting point?

For creating the new tab button you will need a few things:

The HTML -
- You can just copy the HTML structure from one of the existing buttons and modify it with the icon you want and some unique identifier like an id or class.
A click listener -
- You will need some action to be performed when you click on the button, so that is where a click event listener comes in. You will attach to the button by using the id or class from your HTML and it will then call a function you provide. Here is some info: https://www.w3schools.com/js/js_htmldom_eventlistener.asp
A way to create a new tab
- Since Vivaldi is built on Chromium and Vivaldi's interface is sort of like a Chrome extension, we can use Chrome's extension APIs. There is a function in the Tabs API for creating a new tab https://developer.chrome.com/extensions/tabs#method-create
  - Hint: the url for the Start Page is: chrome://vivaldi-webui/startpage
- You also might need to find the index of the current active tab if you want to place the new tab next to the active tab. This can be done with the query function https://developer.chrome.com/extensions/tabs#method-query
A way to add the button
- Some might call it the @luetage method because of the 300 ms timeout/ interval, but you just need a quick check to make sure the interface is loaded and ready to inject your custom button. You can see it at the end of most JS mods.

If you need a reference to look at, you can look at other people's mods. I have one that includes adding a button to the interface, listeners, using Chrome APIs, and the a timeout loop that waits for the browser interface here:
Zoom Controls in Address Bar with Slide Out Animation.
There is plenty of complicated stuff included in that mod, but if you look for those 4 things I mentioned, then you should hopefully be able to understand how it works.

If you need help, feel free to ask away. Good luck with your first JS mod

torpedopradera

Thanks again, Nomadic...I´m starting to believe that you are not any kind of novice...not at all !!!!

Modifiyng the icons is something I learnt just today...my first encounter with Inkscape and vector graphics...and all icons of the address tooolbar happily modified.

The rest of the process will take some time to digest, I will read carefully your post.

Kind regards !!!

nomadic

@torpedopradera No problem.

Sadly, I truly am a CSS novice. JavaScript is a lot easier for me since computer science was one of my majors in college. I barely understand the workings of CSS, but I am good at Googleing ( Startpage.com-ing? ) for the CSS that I need. A key skill for programming. Half my code and CSS could be found scattered about from answers on StackOverflow.

Most programmers will tell you that the secret to learning how to code is just messing around to see what works and what doesn't.

If you want the mod quickly, I could make it for you, but if you are willing to give it a try, it would be a great introduction for how to make a JS mod for Vivaldi.

torpedopradera

@nomadic Hi again, Nomadic.

I have to admit that the roadmap to your solution widely surpass my skills.

If you have the time and patience to write the script, you will make my day, nothing more I can say.

I am now trying an interim solution in my thread

https://forum.vivaldi.net/topic/53244/moving-an-extension-icon-to-the-left-of-the-address-bar-with-css/6

using an extension that provides a customizable icon, which I only have to move to the left side of the address toolbar.

For this I have found a script, that luetage finds to work but I´m not.

Thanks in advance

nomadic

@torpedopradera I decided to have a quick go at making a CSS mod instead of the JS mod I suggested. CSS mods are a lot easier to manage than JS mods because CSS stays around after a browser update.

Let me know if you still want the JS version.

If you are alright with continuing to use that extension, this should work:

.color-behind-tabs-off .mphgmadkligoedhahoinkjghofkpmedf.ExtensionIcon {
  background: var(--colorAccentBg);
}

.color-behind-tabs-on .mphgmadkligoedhahoinkjghofkpmedf.ExtensionIcon {
  background: var(--colorBg);
}

.toolbar-extensions .mphgmadkligoedhahoinkjghofkpmedf.ExtensionIcon {
  position: fixed;
  top: 37px;
  left: 0px;
  margin-left: 0 !important;
}

.UrlBar .toolbar-mainbar.toolbar-droptarget {
  padding-left: 34px;
}

And this is the setting I would use for a new tab as a startpage:

torpedopradera

@nomadic Hi Nomadic, I spent a good portion of yesterday tweaking things based on you code, and now is everything fine.

There´s no need for the js.

Luetage had said to me that moving extension icons to the left side was not posible with css, my happiness is now even greater

Thank you very much.

Regards