Mod: Removing Traffic Lights On Tab Bar

OakdaleFTL

@kutay That's what made my question "idle"... So: How do you move a window that uses your mod?

kutay

@OakdaleFTL So, ummmm. I use yabai and skhd both of which allow me to manage windows and spaces only using shortcuts. They also resize and move windows to cover the maximum amount of space on the screen. Therefore, I just don't move any windows manually, so I can use my mod without any restrictions.

Also, I think you can move your window using the bottom status bar by holding and dragging it. Or you can even move your window by holding and dragging a part of the browser that doesn't have a clickable thing on it.

OakdaleFTL

@kutay I was going to try your mod — but I can't locate the folder /Settings/Appearance/... let alone Custom UI Modifications.
Is it somewhere in /Vivaldi.app/Contents/ or in /Application\ Support/Vivaldi/?

(Please show full path... )

AltCode

@OakdaleFTL There seems to be a misunderstanding here, there is no /Settings/Appearance/ folder. After you've enabled the experiment, you have to go to the settings page, specifically vivaldi://setttings/appearance/ under Appearance > Custom UI Modifications. There you will see the following:
Screenshot 2023-06-25 at 21.01.09.png

For more detailed info see the Modding Vivaldi thread.

OakdaleFTL

@AltCode Hm. Some searching led me to /Applications/Vivaldi.app/Contents/Frameworks/Vivaldi Framework.framework/Versions/6.1.3035.100/Resources/vivaldi/user_files/... It works, with some odd side effects!
Screen Shot 2023-06-25 at 12.10.29 PM.png
(But this may be an interaction with the Rectangle app...)
And, of course, it has no effect on the windows opened in other profiles; so there's that!

Any ideas as to what happened?

nomadic

@OakdaleFTL That folder contains the files for Page Actions. If you add that folder under the custom UI Modifications option, you will get all sorts of side effects. You are seeing the Transform 3D page action in the screenshot.

You should create your own folder outside of the Vivaldi directory. It has been awhile since I last used a Mac, but if you have a documents folder, you could create a folder there called Vivaldi CSS Mods and put the CSS file there.

Here are some more detailed steps I wrote awhile ago for Windows, but it might help you somewhat: https://forum.vivaldi.net/post/360915

OakdaleFTL

@nomadic I thought that looked familiar!
Of course, the settings page wouldn't allow me to select the Vivaldi app, so I added it manually... (And now I know where the Page Actions CSS is stored!)
Thanks! I think I've got it now.

Screen Shot 2023-06-25 at 12.54.30 PM.png

@kutay said

I think you can move your window using the bottom status bar by holding and dragging it. Or you can even move your window by holding and dragging a part of the browser that doesn't have a clickable thing on it.

As advertised: Status Bar and Tab Bar and Address Bar non-clickable areas can be grabbed... No side effects noted! (See Note at end of post...)
Thanks!

Of course, removing the UI (via ⌘F10) brings the Stoplight back! Good thing, too: It's functionality is useful...
But the green button does not take your display out of full-screen view! In fact, all functionality of the Title Bar is gone, when in full-screen mode. (F10 and ^⌘F still work...) And double-clicking the Title Bar to fill the screen remains functional with the UI hidden.
(I use Reader Mode without the UI, usually. )

Screen Shot 2023-06-25 at 1.11.35 PM.png

Note: Hiding the Tab Bar instantiates the Stoplight on the Address Bar, where it remains fully functional!

Screen Shot 2023-06-25 at 2.14.47 PM.png

(Including assuming the Title Bar functionalities. Such also happens with the Tab Bar itself; and the Status Bar! ~~And one big Oops! Tool bars can no longer be edited...~~ Tool bars can only be edited via clickable elements.)

OakdaleFTL

@Kutay Do you have any idea what "broke" your mod on Vivaldi 6.7.3316.3 / Chrome 122.0.6261.158 ? (It still works fine on the current Stable Vivaldi 6.6.3271.57 / Chrome 122.0.6261.158.)

thedayismine

@kutay Any idea how to hide the titlebar when in fullscreen and hovering over the menu bar?

tobbelundberg

With some recent Vivaldi update this mod does not work for me anymore

Anyone know how to hide the stoplights now? I have this right now

tobbelundberg

Downgraded to version 6.6.3271.61 (from 6.7.3329.24) And things are back to working like they always were!

Doesn't feel great to not get new security updates and stuff, but it really bugged me to have the stop light icons being on top of my back/forward arrows and/or have that weird alignment where they're not vertically centered in the address bar

Much better!

Truemotion

Any fix for recent releases? They don't appear in developer mode anymore...

tobbelundberg

@Truemotion said in Mod: Removing Traffic Lights On Tab Bar:

They don't appear in developer mode anymore...

What do you mean "developer mode"?

I haven't dared trying to update. I'm afraid the mod will stop working again if I do

Truemotion

In the past, you could open the developer window and inspect the window buttons, so you would see where those buttons are in script for further css modding.

tobbelundberg

Ahh, yeah, exactly. They don't seem to be part of the JavaScript or CSS code anymore. I think they switched them to native controls, which is why we can't modify them anymore

I'm pretty sure they did that to implement this feature in Vivaldi 6.7

Tile apps with window split view on Mac: Window split screen view allows two sections, each displaying a different app, an addition that Mac users, especially those using big screens, will appreciate.

(quote and screenshot from this blog post https://vivaldi.com/blog/vivaldi-on-desktop-6-7/)

But I'm more than happy to give up that feature to be able to have better control over the traffic light buttons

tobbelundberg

Found another report of the same underlaying issue. So just cross-posting here for reference:
https://forum.vivaldi.net/topic/97607/button-top-margin-in-mac-6-7-version/9

qjava

@tobbelundberg You are right, Vivaldi no longer uses custom CSS to disguise as native macOS buttons. As of version 6.7, these are fully native macOS buttons with all their features. Therefore, all mods that modified this CSS will unfortunately not work
Since native buttons have a huge impact on the user experience and provide users with many features, the decision to switch to native beacons was really important. Not only does it provide cool window management features, but it also works with accessibility apps and third-party window managers.

tobbelundberg

@qjava Thanks for getting back to me.

all mods that modified this CSS will unfortunately not work

Yeah, and this includes all mods that want to change the height of the top bar, since the top offset of the buttons will look weird.
As you can see here

Since native buttons have a huge impact on the user experience

You are absolutely right. Unfortunately it's a bad impact in my case

it also works with accessibility apps and third-party window managers.

As you can see from my screenshots I don't even use the buttons at all, because I have my third-party window manager do the window management for me

Even without the native buttons it worked great with third-party window managers

So

Would you consider making it possible to hide the buttons?

Ideally with some way for JS code to replicate at least some of their basic functionality for users who need or want that. But even just being able to hide them at all would be great! Thanks

qjava

Well, I'd like to make it work for everyone, but while Vivaldi gives a lot of customization options, in some cases it's virtually impossible to make it work with custom UI modifications. For example, Vivaldi itself gives many options that affect the position of the traffic light (the position of the address bar, the position of the bookmarks bar and its visibility, etc.) and their handling is just complicated enough.

Even without the native buttons it worked great with third-party window managers

I'm glad it worked, but in our bug tracking system we had many bug reports of broken window managers or not working with our custom traffic light (e.g. Moom).

Would you consider making it possible to hide the buttons?

Personally, I would think that hiding the most obvious way to exit the app from the user is really confusing and shady
We can certainly consider this possibility, but we would have to evaluate the priorities of this (at this point) new feature.

tobbelundberg

@qjava said in Mod: Removing Traffic Lights On Tab Bar:

Personally, I would think that hiding the most obvious way to exit the app from the user is really confusing and shady
We can certainly consider this possibility, but we would have to evaluate the priorities of this (at this point) new feature.

Yeah, definitely not a feature most users would need. But just some way, no matter how convoluted, to hide the buttons would be great! I'd even entertain the possibility of building a custom version of the browser. I even downloaded the sources I could find, but that's where my efforts stopped at the time. But with some help/pointers I'd still be up for that.

What kind of JS <-> Native interface bindings do you have in place? Being able to hide the buttons, and then run some custom JS function to trigger them would be ideal I think.