Minimize, Maximize, and Close buttons disappeared in FF65.0 with userChrome.css styling. Fix included

[Ligerx]

Short description

Yesterday, I noticed that the minimize, maximize, and close button on firefox disappeared.

I've been using the below userChrome.css tweak to hide the tab bar.

https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#hide-horizontal-tabs-at-the-top-of-the-window-1349

#1349

It seems like Firefox has moved the min/max/close buttons into the #TabsToolbar element, so the above CSS was hiding both.

Solution

I tweaked the css selector to fix it, so here's what I'm using now

#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
  opacity: 0;
  pointer-events: none;
}

instead of the old

#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar {
  opacity: 0;
  pointer-events: none;
}

#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}

Request

My guess is other people are facing the same issue, so hopefully they can just copy over my fix. Could you update your docs to reflect this?
https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#hide-horizontal-tabs-at-the-top-of-the-window-1349

Environment

• Platform (OS): Windows 10
• Version of Firefox: 65.0
• Version (or revision) of Tree Style Tab: 2.7.18

[piroor]

I'm inactive to update CSS code snippets in the wiki because I don't use them, so I hope that people who using the page maintain it by self. Could you feedback your knowledge?

[Ligerx]

I'd be happy to update the snippets page. I will wait a week or two first.

I want to make sure that other people are facing the same issue before updating the docs. So anyone reading, please give a thumbs up or a comment

[remmah]

I'm currently having success on macOS 10.14.3 / FIrefox 65.0 using an older snippet:

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

#TabsToolbar {
    visibility: collapse !important;
}

I think this only works because I have the Title Bar checkbox selected in the Customize Firefox options.

[bl4ckout31]

@Ligerx I had the same problem with the same environment and your fix worked, thanks!

[BinarySplit]

I'm on MacOS 10.13.6 and was facing this issue. @Ligerx's fix works for me.

[Atticus-]

Works great, thanks so much! Is there a reason to keep the :not([extradragspace="true"]) part around? Right now it looks like the Drag Space checkbox just toggles tabs' visibility in the title bar.

@remmah I noticed the same thing, however the title bar shown is the default MacOS titlebar instead of Firefox's styled one. If you've got the dark theme applied, for example, Firefox's titlebar is preferable.

[Ligerx]

@Atticus- I'm also wondering the same thing about the :not([extradragspace="true"]) part, which is why I wanted to keep this issue open. Hopefully someone who knows can chime in lol

[Dystopian]

@Ligerx you shouldn't remove #main-window:not([tabsintitlebar="true"]) code part. It disables TabsToolbar when Title Bar checkbox is selected in the Customize settings. And that's what @remmah #2147 (comment) is talking about.

[Lej77]

@Atticus- I think that the :not([extradragspace="true"]) selector was only there to allow showing the tabs in the title bar without having to modify userChrome.css and restarting the browser so it should be safe to remove. It probably originates from my comment in #1672.

[Ligerx]

Great, thanks for all the comments. @Lej77 I've kept the :not([extradragspace="true"]) part and included a little explanation on how enabling drag space will show your tabs again.

The wiki has been updated in this change, and then I fixed a navigation link I broke in another change

[real-or-random]

@Ligerx you shouldn't remove #main-window:not([tabsintitlebar="true"]) code part. It disables TabsToolbar when Title Bar checkbox is selected in the Customize settings. And that's what @remmah #2147 (comment) is talking about.

I had to remove #main-window:not([tabsintitlebar="true"]) after updating to Firefox 133 on Linux. Otherwise I see a grey bar when the "Title Bar" checkbox in "Customize Toolbar..." is not selected. (Asking here if others see the same before editing the wiki.)

[n1ghthavvk]

I had the same issue after updating to Firefox 133. My navbar exhibited an unnecessary margin-top-like phenomenon. Since I also use custom CSS to move my titlebar buttons (specifically the close button, such that it can be clicked just whishing the mouse into the absolute corner), and also hide the sidebar header for TreeStyleTab, I had to fix the former as well (while the latter continued working without issues).

Thank you for the initial fix of the first issue. Here's my current userChrome.css:
userChrome.css.txt

/* Hide tabs at the top of the window */
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
	opacity: 0;
	pointer-events: none;
}
  
#TabsToolbar {
	visibility: collapse !important;
}

/* Keep titlebar buttons visible and adequately sized */
#toolbar-menubar {
	overflow: visible !important;
}
  
.titlebar-close, .titlebar-restore, .titlebar-min, .titlebar-max {
	height: 40px;
}

/* https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#for-only-tree-style-tab-sidebar-1397 */
/* Hide sidebar header for TreeStyleTab */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
	display: none;
}

/* https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#move-minimizerestoreclose-window-buttons-to-the-right-of-hamburger-menu-after-hiding-horizontal-tabs */
/* Adding empty space for buttons */
#nav-bar {
	margin-right: 140px;
}

#titlebar {
	appearance: none !important;
	height: 0;
}

/* Fix for main menu calling by Alt button */
#titlebar > #toolbar-menubar {
	margin-top: 0;
}

/* Move minimize/restore/close buttons to empty space */
#TabsToolbar > .titlebar-buttonbox-container {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
}

And here's how it looks now (tabnames and bookmarks blanked for privacy):

It's back to working perfectly.

[real-or-random]

/* Hide tabs at the top of the window */
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
	opacity: 0;
	pointer-events: none;
}

Is there a specific reason why you changed it to [tabsintitlebar="true"] (removing the not)? Does it work for you also when removing the condition entirely?