Treestyletab: 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 https://github.com/piroor/treestyletab/issues/2147#issuecomment-461710319 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