A lot of things have changed since 2017. ;-)

However, this CSS code --

  #tabbrowser-tabs { visibility: collapse !important; }

-- should still hide the tabs. Is the problem that it leaves a blank space in the title bar?

(I run Windows, so I'm never sure if I can replicate problems experienced by Mac users.)

The author of Tree Style Tab has some rules on his wiki that you could try:

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

Note: if you quote a URL in a reply here your post won't appear immediately, it will be directed to a link moderation queue.

Thank you @jscher2000. I had a look, but I did not try it yet as I would not like to mess it up. It is on OSX, and the userChrome.css file has a similar use as in Windows.

What happened to me was that I was - apparently - logged out of my account and saw just the "default" Firefox appearance and settings (as well as no user logged in). I would not like to mess this up.

Thus I wanted to ask, in the userChrome.css file, should I add anything in addition to the code you gave, to not mess up my current layout, color and customization?

1. main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {

 opacity: 0;
 pointer-events: none;

}

1. main-window:not([tabsintitlebar="true"]) #TabsToolbar {

   visibility: collapse !important;

}

I am *not* a programmer, so userChrome.css is still unclear to me.

Hi Castor, userChrome.css works the same way on Mac and Windows, but the rules for the layout are different between the two platforms, so some rules don't have the same effects.

Are you saying that you already have a userChrome.css file and you need to know whether it is safe to add more rules? I'm not sure what you mean in this part:

Thus I wanted to ask, in the userChrome.css file, should I add anything in addition to the code you gave, to not mess up my current layout, color and customization?

The code you quoted --

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

-- is very specific to the tab bar.

I realize CSS and especially CSS related to the user interface is a rare language with limited documentation. Here's how I read it:

The first rule is for the case where the tabs are in the title bar (the title is not shown in the title bar). In this case, the tabs are made invisible and unclickable. (There's an exception if the bar has extra drag space, but I'm not sure why that would be turned on.)

The second rule is for the case where the tabs are below the title bar (the title is shown in the bar). In this case, the title bar is collapsed so it should have a zero height.

Thank you for the clear explanation. I do not have a userChrome.css file. When I created it (inside of a chrome folder as instructed), I added one simple line (the one at the beginning of the thread), changed FF settings to check that the userChrome.css file at startup (under about:config>userprof) and it messed with all of my preferences, making FF on restart look as if I had just installed it, logging me out of the Firefox Support account as well.

Sorry if I was not clear enough before. I suspect that I need to somehow copy the current CSS format of my FF and paste it directly into the newly created userChrome.css file. Otherwise, only adding one (or two) lines makes everything go back to the default. In other words, with this thread I wanted to ask if there is any other FF file which contains my current CSS, as I suspect I need to add more to the newly created CSS than just adding the specified code above.

Hi Castor, adding a userChrome.css file should only affect the appearance of certain areas of the browser and shouldn't modify whether your personal data is present or whether you are connected to your Firefox Account. That sounds more like Firefox started up in a fresh profile.

The CSS built in to Firefox is extremely voluminous spread over numerous files, and stored together in a compressed file. It wouldn't be practical to paste it into userChrome.css, and that should never be needed anyway.

(1) Does your Firefox still start normally with

toolkit.legacyUserProfileCustomizations.stylesheets => false

Assuming so...

(2) Is it possible that your userChrome.css file is not plain text and contains formatting codes? You could try regenerating the file using my page here:

https://www.userchrome.org/download-userchrome-css.html

Thanks,

I resolved the issue with your instructions (and the code given on the Github section you gave above). Interestingly, the code I added to your CSS file also removed the icons which I had on the same level as the tabs (that is possible on OSX). I resolved this by dragging them down again in standard settings.

This is a big coincidence that the creator of the website I used for instructions also reacted to this thread. Thanks again.

Castor,

I'm looking to get the same results but have zero knowledge of the things mentioned in your post. Just want to know if you were able to achieve what you wanted, before diving into the process.

If you can share an image of the result that would be awesome.

@ehecati127, open about:support in FF, then click open profile folder and create a folder called chrome and create userChrome.css file or copy paste the one given above in the link. /Users/user/Library/Application Support/Firefox/Profiles/{yourProfileName}/chrome/userChrome.css

Then, my code (works for mac):

/* Replace this SAMPLE CONTENT with your own CSS */

/* No blue swipe on tabs when loaded */
.tabbrowser-tab .tab-loading-burst {
  display: none !important;
}

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

#TabsToolbar[inFullscreen]{
  display: none !important; 
}

haha can't believe Castor went back and replied. totally awesome of you guys in this whole post, everyone was very helpful. Unfortunately Castor I copied and pasted exactly that into the userchromecss (also on mac) but I guess it doesn't work anymore? Also after looking further into the issue, I used the other guys site that generates a userscript but I guess there were errors in the formatting of the css code. for example it kept giving an error on the "Use of !important"

nonetheless, I don't really know what could be the case or if you ran into this and maybe have an updated idea wanted to kind of probe this post with that question maybe get some help. Thanks in advance guys.

haha can't believe Castor went back and replied. totally awesome of you guys in this whole post, everyone was very helpful. Unfortunately Castor I copied and pasted exactly that into the userchromecss (also on mac) but I guess it doesn't work anymore? Also after looking further into the issue, I used the other guys site that generates a userscript but I guess there were errors in the formatting of the css code. for example it kept giving an error on the "Use of !important"

Don't worry about error messages in the Ace editor. You need !important to make sure you override built-in styles.

The rules refer to an attribute called tabsintitlebar which is no longer used (checking in Firefox 84 on Windows). So I tried removing all references to that. This also caused the three "window buttons" to disappear. I've noted the part that causes that:

/* Hide all tabs and tab bar buttons */
#main-window:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
  opacity: 0;
  pointer-events: none;
}

/* This makes the bar shorter vertically but removes the 3 window buttons */
#main-window #TabsToolbar {
  visibility: collapse !important;
}

/* For full screen mode */
#TabsToolbar[inFullscreen]{
  display: none !important; 
}