Theme support for Left sided Window Controls

[sannidhyaroy]

I'm running Firefox on Fedora Workstation 39 and the the theme works fine (there are minor bugs but I don't really mind them), except the window controls placement. Since, I have the WhiteSur theme installed for Gnome and have the window controls on the left side using the Gnome Tweaks app, the back, forward and refresh buttons and the window controls buttons (close, minimize, maximize) overlap with each other. There is also this unwanted space on the right side after the menu button. Also, I did enable the mac_buttons.css by uncommenting in the userChrome.css file but the window controls doesn't seem to change. I don't know how to inspect the sidebar to edit the css, so can you point me out how I can get this to work properly?

[sannidhyaroy]

Alright, I fixed the issues after digging into the css and trying my best to tweak it. I'll share the fix here, so others can try it if they experience the same issue.

• First, turn off the theme, so that you can customize the toolbar. To turn off the theme, go to the chrome folder in your Firefox profile directory and rename the userChrome.css to userChrome.css.bak and then restart Firefox.
• Next, click on the hamburger menu > More tools > Customize toolbar.... Then re-arrange the toolbar widget in this order: url-bar spacer 'show sidebars'-button back forward reload extensions-button overflow-menu hamburger-menu. Basically, the spacer should be after the url bar whereas the README of this guide said to place the spacer after the back forward reload buttons.
• Now you can enable the theme (by renaming the userChrome.css.bak back to userChrome.css) and open the userChrome.css. Find the line width: calc(var(--sdbr-item-wdt) - var(--wbtn-wdt)) !important; and change it to width: calc(var(--sdbr-item-wdt)) !important;. This will remove and fix the unwanted space on the right side of the hamburger menu.
• We're almost done! If you further want to get the macOS Window Controls look (since, enabling the mac_buttons.css wasn't working for me), add this css code to your userChrome.css file.
• That's it. Restart Firefox!

[sannidhyaroy]

Don't know why the mac_button.css wasn't working for me, but I suspect it was probably because it was only tested with KDE Plasma Desktop Environment as per this #5 issue, whereas I was on Fedora running on Vanilla Gnome. One more thing to keep in mind is that second-last point in the solution that I shared above regarding the macOS Window Controls would only work if your Gnome Theme has the Window Controls from macOS (like I have WhiteSur GTK theme installed).

[sirlan-ff00ff]

(Sorry for the late response) if you want you could add the extra CSS and alternate width calculation as part of the repo, would be fine in having the alternate layout in the guide as well