Firefox 89 (proton) Style Snippets

[berchierm]

Hi,
Here is my version of the Firefox Styles Snippets to hide the tab bar in Firefox 89+ (proton UI).
I had to redo it because the one provided in the wiki don't work anymore with the new UI.

/* Hide the tabs when Sidebery visible */
#main-window[titlepreface*="Sidebery"] #TabsToolbar-customization-target {
    height: 0 !important;
    overflow: hidden;
}

/* Make the application min-maximize-close buttons height match the address bar */
#main-window[titlepreface*="Sidebery"] #TabsToolbar .titlebar-buttonbox-container {
    height: 40px;
}

/* Push up the address bar */
#main-window[titlepreface*="Sidebery"] #nav-bar {
    margin-top: -41px;
}

/* Reduce width of address bar so app buttons have enought room to appear */
#main-window[titlepreface*="Sidebery"] #nav-bar-customization-target {
    max-width: calc(100vw - 230px);
}

Probably not the best css but it seems to work so~

As explained in the wiki, the code should go into the userChrome.css and the toolkit.legacyUserProfileCustomizations.stylesheets setting in about:config needs to be true.

I didn't use any animation, mainly because I didn't had the motivation to dig this deep, and also because I don't switch between horizontal and vertical mode often, I just needed a way to switch the view without editing back the userChrome.css.

Feel free to use it, adapt it, publish it in the wiki !

Edit: added printscreen

[barravi]

Doesn't seem to work on OSX. Both the wiki version and this update (which I hoped would fix the issue).

Not only that, but for some weird reason the #main-window selector doesn't do much, even if I remove the [titlepreface] attribute.

Anyone has any idea ?

[ckolderup]

I know it's been almost a year, but in case you're still wondering, or if anyone else comes across this looking for answers, I had to modify the above code to make it work nicely on macOS. The relevant portions of my userChrome.css, working on Firefox 103.x as of August 2022, are below.

NOTE: this code uses the titlepreface trick to support automatically hiding/showing the top tab bar with a zero-width space as the configured preface. If you use something different, you'll want to replace the invisible character that's between the quotes in each of the [titlepreface*=""] blocks below.

/* Hide the tabs when Sidebery visible */
#main-window[titlepreface*="​"] #TabsToolbar-customization-target {
    height: 0 !important;
    overflow: hidden;
}

/* Make the application min-maximize-close buttons height match the address bar */
#main-window[titlepreface*="​"] #TabsToolbar .titlebar-buttonbox-container {
    height: 40px;
}

/* Push up the address bar */
#main-window[titlepreface*="​"] #nav-bar {
    margin-top: -39px;
}

/* Reduce width of address bar so app buttons have enought room to appear */
#main-window[titlepreface*="​"] #nav-bar-customization-target {
    padding-left: 75px;
    max-width: calc(100vw - 75px);
}

[unrealbanter]

I'm a noob with FF, would I put this in a file or is there a way to reference a userscript? Not sure of the directories.

[niun]

You can enter about:support in your address bar of firefox. On this site Firefox shows its profile folder (something like that, in my german firefox it is Profilordner). In this directory is a sub-directory chrome (or you need to create it). In there, you put the file named userChrome.css . You need to restart firefox after putting your CSS in this file (or is there a way to reload this file without restarting firefox?).

[Glandos]

For those who are reluctant to change their window title, here is the use of ZERO WIDTH SPACE:

#main-window[titlepreface^="​"] #TabsToolbar {
  display: none;
}

The attribute is not empty, it contains the unicode character U+200B which is a space with a width of 0. To insert it in Sidebery preface value, copy/paste with quotes around the character, and then remove them with delete/backspace.

[niun]

Thank you, this is working nice for me on Windows 10, Firefox 101 and Sidebery v5 beta.

However when no pinned tab were active, the native pinned tabs were hovering over the Sidebery sidebar header (not always reproducible, I don't understand...). To hide them I added the following:

#main-window[titlepreface*="Sidebery"] #tabbrowser-tabs {
    visibility: collapse;
}

[vincehi]

My hack for macos

#main-window:not([inFullscreen="true"]) #navigator-toolbox {
	display: flex
}
#main-window:not([inFullscreen="true"]) #titlebar {
	width: 66px;
	background: var(--toolbar-bgcolor);
}
#main-window #TabsToolbar > *:not(.titlebar-buttonbox-container) {
	display: none;
}
#main-window:not([inFullscreen="true"]) #nav-bar {
	width: calc(100% - 66px)
}

#main-window[inFullscreen="true"] #TabsToolbar {
	display: none
}

You can add titlepreface if you want

[vincehi]

Hello every,
I have a good idea of how to do something nice on top of the sidebar extension. I'm posting a gif here to see if anyone is interested in me continuing the work.
The idea is to make the tabs disappear completely. Then at the hover open the side bar.
It's a first draft but it works well.
What I'm thinking of doing in the future:

• create a repo.
• I'm thinking of expanding the with colapsed to see the tab icons as well (the tabs without the tree).

[unrealbanter]

Wow this looks amazing! I'd love to try that.

[michalfita]

TBH looks like completely new browser... It looks like browser I'm looking for...