window_control_placeholder_support + hide_tabs_with_one_tab_w_window_controls

[sdsucks]

i've been using these two codes together to make the navbar+urlbar+toolbar+window.control into one line.

it seems broken after updating my nightly yesterday.

now it looks like this.

the codes are up to date.

[MrOtherGuy]

Sweet! The one change I was waiting to eventually happen has finally landed. A lot of my styles are very likely to need to be changed but now that #titlebar container has been removed it makes certain things much simpler than they were before.

Only downside is that keeping compatibility with ESR128 can be kinda complicated.

[Tijs-B]

Another issue appears with window_control_placeholder_support + hide_tabs_toolbar_osx. The three colored mac window buttons appear in the center instead of the top left. It may be related. Screenshot:

Firefox Nightly 133.0a1 (2024-10-03) on macOS Sonoma 14.4

[MrOtherGuy]

Yeah, probably. There's at least 35 styles that will have issues regarding recent changes. Many of those could now be rewritten to be much simpler so I'll need to think how to do things. Chances are that I'm gonna write new styles that work with Firefox 133 and let the old ones be as is.

[MrOtherGuy]

@Tijs-B This isn't going to help hiding tabs if only one tab is visible, but since you sound to be using macOS would check how this works:

@media (-moz-bool-pref: "sidebar.verticalTabs"){
  #sidebar-main{
    visibility: collapse;
  }
}
@media not (-moz-bool-pref: "sidebar.verticalTabs"){
  #TabsToolbar{
    visibility: collapse;
  }
  :root[sizemode="fullscreen"] #nav-bar > .titlebar-buttonbox-container{
    display: flex !important;
  }
  :root[tabsintitlebar] #toolbar-menubar[autohide="true"] ~ #nav-bar{
    & > .titlebar-buttonbox-container{
      display: flex !important;
    }
    :root[sizemode="normal"] & {
      & > .titlebar-spacer{
        display: flex !important;
      }
    }
    :root[sizemode="maximized"] & {
      & > .titlebar-spacer[type="post-tabs"]{
        display: flex !important;
      }
    }
  }
}

This is essentially the only thing you would need for hiding tabs toolbar - no more placeholder_support sheet and all the other weird hackery. This would just work whether or not one has menubar enabled, but I have a suspicion it doesn't work on macOS. I'm fairly certain I know what needs to be done instead on macOS but I would rather not do it if it could be avoided.

[Tijs-B]

That looks like this:

The three buttons are gone now. I've got no experience in debugging these kinds of things, but if you want, I can look into it a bit deeper.

[MrOtherGuy]

Okay, that looks like what I expected... sad days. The solution is to duplicate most of the rules for macos, which is simple to do but it woul've been great to not need to do that.

[Tijs-B]

Alright, sucks. No hurry! Let me know if you need me to do anything. I've got no experience styling Firefox except for using this library, but I do have experience with CSS.

[MrOtherGuy]

Hmm, what about if you replace that one #toolbar-menubar[autohide="true"] with #toolbar-menubar:not([autohide="false"]) ?

Basically I don't really know in what state the menubar is on mac. The version I posted earlier likely isn't working because menubar doesn't have autohide attrbute with value true. I hypothesize that it might not have autohide attribute at all - and if it doesn't then this suggested change should work on mac as well as on linux and windows.

Also, please test in fullscreen, maximized and normal window modes, thanks!

[Tijs-B]

That seems to work for the normal window modes, but not for full screen. The screenshots:

Resized to a pretty small window:

Maximized to use the full screen size (if that's what you mean by maximized window mode?):

Full screen:

Full screen, when moving the mouse completely to the top of the screen actually shows the buttons:

Although I'm not sure if this has worked before the Firefox changes, with the old code, though. This may be on purpose, showing the buttons only when moving the mouse to the top of the screen to show the topmost bar macOS bar. (Though, on Pycharm which I happen to have open, the buttons are always shown in the top left).

[MrOtherGuy]

How does Firefox display window controls when fullscreen? Would it be expected to show them inside nav-bar or in that OS native bar thingy?

Also, maximized is kinda wrong as well. The empty space should be between window controls and first toolbar button, but now it's on the other side. That feels like we would need to write some separate rules depending on if the window controls are on left or right side anyway. And at that point might as well write separate ruleset for macos properly.

[Tijs-B]

How does Firefox display window controls when fullscreen? Would it be expected to show them inside nav-bar or in that OS native bar thingy?

Normal Firefox without any profile edits displays it the same when in fullscreen, so I guess that's okay:

Also, maximized is kinda wrong as well. The empty space should be between window controls and first toolbar button, but now it's on the other side

I think that's because I have an "empty space" element on my bar:

So, actually I don't see any issues here, with the latest version of the snippet with #toolbar-menubar:not([autohide="false"])

[Tijs-B]

For completeness, with a fresh Firefox profile (Firefox Nightly 133.0a1 on macOS Sonoma 14.4), and with this in userChrome.css:

@media (-moz-bool-pref: "sidebar.verticalTabs") {
  #sidebar-main {
    visibility: collapse;
  }
}
@media not (-moz-bool-pref: "sidebar.verticalTabs") {
  #TabsToolbar {
    visibility: collapse;
  }
  :root[sizemode="fullscreen"] #nav-bar > .titlebar-buttonbox-container {
    display: flex !important;
  }
  :root[tabsintitlebar] #toolbar-menubar:not([autohide="false"]) ~ #nav-bar {
    & > .titlebar-buttonbox-container {
      display: flex !important;
    }
    :root[sizemode="normal"] & {
      & > .titlebar-spacer {
        display: flex !important;
      }
    }
    :root[sizemode="maximized"] & {
      & > .titlebar-spacer[type="post-tabs"] {
        display: flex !important;
      }
    }
  }
}

results in this:

• small window:
• maximized window: (here indeed the space is gone to the right of the window buttons):
• fullscreen:
• fullscreen, moving mouse to the top bar:

[Tijs-B]

It's funny, when I move the window a bit downwards from the top of the screen, this happens:

https://github.com/user-attachments/assets/617e539e-a86f-4dc8-b29e-ce715814bc67

[MrOtherGuy]

For the sake of completeness, by "maximized" I mean when the window is resized to fill entire screen - on Windows and linux that happens with the middle window control button. By fullscreen I mean when you press F11 (don't know what an equivalent would be on Mac, but I do believe some kind of fullscreen feature does exist), fullscreen can also be activated with a button found on customizatuon palette.

I'm not sure if you are actually fullscreen because I believe bookmarks toolbar isn't supposed to be shown while fullscreen.

[Tijs-B]

Okay, then we have the same understanding of maximized. I'm pretty sure this is the correct "fullscreen": I can activate it by pressing the green button in the window buttons, or go to View -> Full screen (or the equivalent, in Dutch it's called "schermvullende weergave").