Window controls missing on macOS

[qwertychouskie]

Describe the bug
Window controls are missing on macOS.

To Reproduce
Install theme on macOS

Expected behavior
Window controls exist

Screenshots

Setup information

• OS: macOS 14.4.1
• Installation method: Manual
• Firefox version: 124.0.2
• Theme version: master
• Optional features enabled: gnomeTheme.bookmarksToolbarUnderTabs = true, gnomeTheme.normalWidthTabs = true

Additional context
Sadly I have to use macOS for work

[rafaelmardojai]

The theme has the --gnome-navbar-csd-offset CSS var to know how much offset the navbar needs to show the window controls. The theme sets the value of this var based on the linux-only -moz-gtk-csd-minimize-button, -moz-gtk-csd-maximize-button and -moz-gtk-csd-close-button media queries. Then it uses the -moz-gtk-csd-reversed-placement to know if the offset needs to go in the start or end.

Said that, if you know some macOS-only media query in Firefox we could use it to set --gnome-navbar-csd-offset with some value that works for macOS, and I guess it would also need to set the offset in the start.

Otherwise you can add custom styles on top of the theme to fix your issue:

/* Window controls offset */
:root[tabsintitlebar]:not([inFullscreen]) #nav-bar {
    padding-left: 117px !important;
    padding-right: 3px !important;
}

[rafaelmardojai]

Looking at https://github.com/mozilla/gecko-dev/blob/f602853ba8d55ba157e2a74d9b571615f6ed97b8/layout/style/test/chrome/chrome-only-media-queries.js looks like we might have some alternatives.

Can you check if the following code works?

@media (-moz-platform: macos) {
	:root {
		--gnome-navbar-csd-offset: 117px;
	}
	:root[tabsintitlebar]:not([inFullscreen]) #nav-bar {
		padding-left: var(--gnome-navbar-csd-offset) !important;
		padding-right: 3px !important;
	}
	:root[tabsintitlebar] #titlebar .titlebar-buttonbox-container {
		left: 0;
		right: auto !important;
	}
}

[qwertychouskie]

Put that in customChrome.css, got this result:

[rafaelmardojai]

Hmm, so it works fine (adding the offset) but there are no window controls. I would need to inspect the UI I guess, but I don't have macOS, so we're at a dead end.

[qwertychouskie]

Hmm, so it works fine (adding the offset) but there are no window controls. I would need to inspect the UI I guess, but I don't have macOS, so we're at a dead end.

I have an older Macbook that I can set up remote desktop on if you wanted to use that to test on.

[ChrisW-B]

This seems to get the gnome style buttons workable/visible:

@media (-moz-platform: macos) {
    :root {
        --gnome-navbar-csd-offset: 120px;
    }
    :root[tabsintitlebar]:not([inFullscreen]) #nav-bar {
        padding-left: var(--gnome-navbar-csd-offset) !important;
        padding-right: 3px !important;
    }
    :root[tabsintitlebar] #titlebar .titlebar-buttonbox-container {
        left: 0;
        right: auto !important;
    }

    :root[tabsintitlebar] #titlebar .titlebar-buttonbox {
        display: flex !important;
    }

    :root[tabsintitlebar] #titlebar .titlebar-button.titlebar-min,
    :root[tabsintitlebar] #titlebar .titlebar-button.titlebar-max,
    :root[tabsintitlebar] #titlebar .titlebar-button.titlebar-close {
        display: flex !important;
    }

    :root[tabsintitlebar] #titlebar .titlebar-button.titlebar-close {
        order: 1;
    }

    :root[tabsintitlebar] #titlebar .titlebar-button.titlebar-min {
        order: 2;
    }

    :root[tabsintitlebar] #titlebar .titlebar-button.titlebar-max {
        order: 3;
    }

    :root[tabsintitlebar]
        #titlebar
        #TabsToolbar
        .titlebar-buttonbox-container:not(#hack) {
        display: block !important;
    }

    :root[tabsintitlebar] .titlebar-buttonbox {
        position: absolute;
        top: -46px;
    }
}

I can make a PR if this is something you want, I'm not sure if you have a variable for the #nav-bar height, which is where that -46px is coming from.

I also added another 3px to --gnome-navbar-csd-offset as the button padding overlapped the maximize button on hover.

I wrote this in Nightly (127.0a1 (2024-04-30) (64-bit)) - I haven't tested it anywhere else

[qwertychouskie]

This seems to get the gnome style buttons workable/visible:

@media (-moz-platform: macos) {
    :root {
        --gnome-navbar-csd-offset: 120px;
    }
    :root[tabsintitlebar]:not([inFullscreen]) #nav-bar {
        padding-left: var(--gnome-navbar-csd-offset) !important;
        padding-right: 3px !important;
    }
    :root[tabsintitlebar] #titlebar .titlebar-buttonbox-container {
        left: 0;
        right: auto !important;
    }

    :root[tabsintitlebar] #titlebar .titlebar-buttonbox {
        display: flex !important;
    }

    :root[tabsintitlebar] #titlebar .titlebar-button.titlebar-min,
    :root[tabsintitlebar] #titlebar .titlebar-button.titlebar-max,
    :root[tabsintitlebar] #titlebar .titlebar-button.titlebar-close {
        display: flex !important;
    }

    :root[tabsintitlebar] #titlebar .titlebar-button.titlebar-close {
        order: 1;
    }

    :root[tabsintitlebar] #titlebar .titlebar-button.titlebar-min {
        order: 2;
    }

    :root[tabsintitlebar] #titlebar .titlebar-button.titlebar-max {
        order: 3;
    }

    :root[tabsintitlebar]
        #titlebar
        #TabsToolbar
        .titlebar-buttonbox-container:not(#hack) {
        display: block !important;
    }

    :root[tabsintitlebar] .titlebar-buttonbox {
        position: absolute;
        top: -46px;
    }
}

I can make a PR if this is something you want, I'm not sure if you have a variable for the #nav-bar height, which is where that -46px is coming from.

I also added another 3px to --gnome-navbar-csd-offset as the button padding overlapped the maximize button on hover.

I wrote this in Nightly (127.0a1 (2024-04-30) (64-bit)) - I haven't tested it anywhere else

I can confirm that this makes the buttons show up, but they all seem shifted too far to the right, and more importantly, I can't click on any of the tabs beneath the window buttons.

[rafaelmardojai]

Since Firefox recently changed its window controls layout, how is this looking in Firefox 133?

[C7XL]

Since Firefox recently changed its window controls layout, how is this looking in Firefox 133?

Still missing the buttons.

[rafaelmardojai]

You're not applying any extra CSS right? Like the one above.

[C7XL]

You're not applying any extra CSS right? Like the one above.

No, this is the default one.