There are two containers for these buttons and #window-controls only apples to full screen mode. In normal or maximized mode you likely need to hide the other container.

#TabsToolbar .titlebar-buttonbox-container {display: none !important;}
#TabsToolbar #window-controls              {display: none !important;}

You can use the Browser Toolbox to check which selector to use.

• https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox

I tried adding those two lines, although the window-controls are still here.

I also used browser toolbox to see if I can identify the name for that container, and there is only one thing that's at the same position, called the tooltip.

So right now I have these lines in my userChrome.css

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

1. autohide-context { display:none!important; } /* hide context menuitem "Exit Full Screen Mode" */
2. window-controls { display:none!important; } /* hide window controls in full screen mode */
3. TabsToolbar .titlebar-buttonbox-container { display:none!important; }
4. TabsToolbar #window-controls { display:none!important; }
5. tooltip #window-control { display:none!important; }

and it is still the same. I still can't get those windows buttons to go away.

Does Firefox use your userChrome.css ?

Some test code:

.urlbar-input-box, .findbar-textbox {font-size: 12pt!important; font-family: "DejaVu Sans Mono"}

Is that line supposed to change the font and font size of my findbar?

If that's the case, does this mean my firefox isn't using my userChrome.css?

Ok, I didn't know I need to toggle toolkit.legacyUserProfileCustomizations.stylesheets in about:config

Now it's loading my userChrome.css, and the Windows controls are gone when I maximize my window, however, there's a weird spacing before my first tab.

I am able to remove the spacing with this line:

＃TabsToolbar .titlebar-spacer              { display:none!important; }

Now if only I can get them to only perform these lines when maximized...

I've tried

:root[sizemode="maximized"] #TabToolbar .titlebar-buttonbox-container { display:none!important;  }

and

＃main-window[sizemode="maximized"] #TabToolbar .titlebar-buttonbox-container { display:none!important;  }

neither worked.

Did you check this in the Browser Toolbox ?

• https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox