feat: traffic light position

[FabianLars]

closes #4789

[github-actions]

Package Changes Through 0e07439

There are 8 changes which include tauri with minor, tauri-runtime with minor, tauri-runtime-wry with minor, tauri-utils with minor, @tauri-apps/cli with minor, tauri-cli with minor, @tauri-apps/api with minor, tauri-bundler with patch

Planned Package Versions

The following package releases are the planned based on the context of changes in this pull request.

package	current	next
@tauri-apps/api	2.3.0	2.4.0
tauri-utils	2.2.0	2.3.0
tauri-bundler	2.2.4	2.2.5
tauri-runtime	2.4.0	2.5.0
tauri-runtime-wry	2.4.1	2.5.0
tauri-codegen	2.0.5	2.0.6
tauri-macros	2.0.5	2.0.6
tauri-plugin	2.0.5	2.0.6
tauri-build	2.0.6	2.0.7
tauri	2.3.1	2.4.0
@tauri-apps/cli	2.3.1	2.4.0
tauri-cli	2.3.1	2.4.0

Add another change file through the GitHub UI by following this link.

---

Read about change files or the docs at github.com/jbolda/covector

[alterhuman]

Hey, new to Tauri, been waiting for this to merge since a week. Is there a blocker for it to not be merged? Thanks.

[FabianLars]

my motivation was/is the main blocker tbh.

the pr didn't actually got delayed though, i always had 2.3 in mind at the earliest and PRs for that are yet to be merged (aiming for a patch release before that on the weekend).

you can test this already as long as you don't create your windows in js because i didn't add those apis yet. simply add this to your Cargo.toml and run cargo update tauri in your src-tauri dir

[patch.crates-io]
tauri = { git = "https://github.com/tauri-apps/tauri", branch = "traffic-lights-offset" }

If you do that, please report back whether you have issues or if it works fine (will accelerate the merge :P)

[alterhuman]

I tried to run it but the cli is not allowing adding "trafficLightPosition" in conf.json. Sorry new here, maybe I'm missing something obvious.

[FabianLars]

Ah right, my bad. For the config option you'll also need the CLI from git (the rust Apis should work without)

cargo install tauri-cli --debug --git https://github.com/tauri-apps/tauri --branch traffic-lights-offset

And then you'll use cargo tauri dev instead of npm run tauri dev or whatever you use atm.

[alterhuman]

Have updated CLI:

src-tauri git:(main) ✗ cargo install tauri-cli --debug --git https://github.com/tauri-apps/tauri --branch traffic-lights-offset

Updating git repository `https://github.com/tauri-apps/tauri`
Ignored package `tauri-cli v2.2.4 (https://github.com/tauri-apps/tauri?branch=traffic-lights-offset#ba941fa6)` is already installed, use --force to override

Still getting same error.
Error while using cargo tauri dev

unknown field `trafficLightPosition`, 
expected one of `label`, `create`, `url`, `user-agent`, `userAgent`, `drag-drop-enabled`...
found an unknown configuration field. 
This usually means that you are using a CLI version that is newer than `tauri-build` and is incompatible.
Please try updating the Rust crates by running `cargo update` in the Tauri app folder.

Have tried cargo clean and then update as well. It's probably still using

This is react + vite.

[alterhuman]

Figured it out, had to also override tauri-build

[patch.crates-io]
tauri-build = { git = "https://github.com/tauri-apps/tauri", branch = "traffic-lights-offset" }
tauri = { git = "https://github.com/tauri-apps/tauri", branch = "traffic-lights-offset" }

It's working. Will revert after testing.

[alterhuman]

No issues found, it's working correctly.

[FabianLars]

coolio, thanks for testing!

[tr3ysmith]

@FabianLars looking forward to this!! any updates on when it'll merge?

[FabianLars]

🤷

[thisislvca]

Dang! Came here to implement this but you've alr done it! Good job, as always 🔥

[FabianLars]

feel free to take a look at the implementation though! not too happy with the config implementation

[thisislvca]

Hmm I think it's a good starting point for now...

[qiuxchao]

Hey 👋, when can merge this?

Also, does anyone know how to implement a similar function on Windows, thank 🙏?

[FabianLars]

Hey 👋, when can merge this?

probably never

Also, does anyone know how to implement a similar function on Windows, thank 🙏?

what would that entail? Never seen buttons anywhere but directly in the upper right corner on windows. If you're asking for the buttons in general (for undecorated windows) and not their positioning (which this pr is about) then this is the tracking issue i think #4531 (waiting on upstream atm)

[qiuxchao]

what would that entail? Never seen buttons anywhere but directly in the upper right corner on windows. If you're asking for the buttons in general (for undecorated windows) and not their positioning (which this pr is about) then this is the tracking issue i think #4531 (waiting on upstream atm)

My demand is that I can customize the content on the right side of the macOS signal light or the left side of the Windows buttons, and the customization content is vertically aligned with the buttons.

Is there any recommended solution currently? Thanks

[FabianLars]

Most apps (outside of tauri land) simply render the button on Windows in their GUI itself. So in Tauri you'd disable decorations and make plain html buttons. The icons should be part of standard fonts present on every system (though I forgot its name). The only thing in Tauri you'll lose is the hover popup on the maximize button. For that I linked the issue above.
There's also this plugin which has a bit of a workaround for this as well which may be good enough for you https://github.com/clearlysid/tauri-plugin-decorum

Sorry that this was written so poorly, I'm on my phone and outside.

[qiuxchao]

Most apps (outside of tauri land) simply render the button on Windows in their GUI itself. So in Tauri you'd disable decorations and make plain html buttons. The icons should be part of standard fonts present on every system (though I forgot its name). The only thing in Tauri you'll lose is the hover popup on the maximize button. For that I linked the issue above.

I considered disabling the decoration, but I didn't use it because, as you said, it would cause the buttons to lose their native functionality.

This plugin solved my problem, thank you for the recommendation 😸

[FabianLars]

For v3 or v4 we'll really need to revise how Positions work in the config but i think for v2 this is good enough.

[thisislvca]

Yeah, LGTM. Thanks again for the awesome work Fabian!

[Legend-Master]

This probably should be gated with #[cfg(target_os = "macos")]?

[FabianLars]

None of the functions here are gated 🤷

[Legend-Master]

Well, gtk_window and default_vbox are (because of the dependency), anyways, just thought it's kinda weird when I updated the tauri-runtime-verso and seeing this not being gated while the other ones are, maybe we should start gating these in v3 like what we did for the other things (like set_activation_policy in Runtime and RuntimeHandle)

[Mehdi-Hp]

Solve: It was causing by unstable feature flag 👀

---

I'm a bit stuck and can't figure out what's wrong. It seems like traffic_light_position isn't working. Here's how I'm building my window.

let app_handle = APP_HANDLE.get().unwrap_or_log();
    tauri::WebviewWindowBuilder::new(
        app_handle,
        "main",
        tauri::WebviewUrl::App("/".to_owned().into()),
    )
    .visible(false)
    .background_throttling(BackgroundThrottlingPolicy::Throttle)
    .focused(false)
    .inner_size(1200.0, 720.0)
    .min_inner_size(920.0, 600.0)
    .transparent(true)
    .hidden_title(true)
    .title_bar_style(tauri::TitleBarStyle::Overlay)
    .decorations(true)
    .resizable(true)
    .accept_first_mouse(false)
    .traffic_light_position(tauri::LogicalPosition::new(24.0, 24.0))
    .build()
    .expect_or_log("Failed to build main window");

[haasal]

@FabianLars Again, thank you so much for implementing this. This option is not yet available in the tauri.conf.json, right? Is there anyone working on this? Otherwise I could take a look at this some time in the near future

[FabianLars]

it is avail in the config https://github.com/tauri-apps/tauri/pull/12366/files#diff-71422a00b887225bd5462224e0f300c1470207e43a997d3edc31317f48a14e98R427
i don't know why it doesn't show up on the website

[echelon]

I wanted to confirm what @Mehdi-Hp said for other people looking: the unstable feature flag makes this not work. I'll file a new ticket to report this.