Skip to content

Instantly share code, notes, and snippets.

@aemonge
Last active November 22, 2022 10:09
Show Gist options
  • Save aemonge/8985086f781db50fbd718f6f1f67140a to your computer and use it in GitHub Desktop.
Save aemonge/8985086f781db50fbd718f6f1f67140a to your computer and use it in GitHub Desktop.
Firefox Tabs on Bottom

Firefox Tabs on Bottom

Moves the firefox tab-bar into the bottom of the screen, the idea is to emulate a letterboxing, such as film shot in a widescreen aspect ratio to standard-width video formats. Focusing all of your attention to the middle of the screen, therefore prioritizing content over the rest.

Result

ScreenShot

Install

Before you install

Mozilla plans to land a change in Firefox 69 that disables the loading of userChrome.css and userContent.css by default to improve performance. This modification has been done through edition of the userChrome.css, therefore you need to activate legacy userChrome.css

The preference in question is toolkit.legacyUserProfileCustomizations.stylesheets. Here is how you change its value:

  1. Load about:config in the Firefox address bar.
  2. Confirm that you will be careful.
  3. Search for toolkit.legacyUserProfileCustomizations.stylesheets using the search at the top.
  4. Toggle the preference. True means Firefox supports the CSS files, False that it ignores them.

Install

Once you have enabled the legacy CSS, edit the UserChrome.css by following this steps:

  1. Load about:profiles in the Firefox address bar.
  2. (optional) remove all but one profile, to make it easier.
  3. Open Root Directory in your file explorer
  4. Add (or open) the chrome folder.
  5. Add (or append) the code into a file called userChrome.css
  6. Save and restart Firefox.

If you've been blessed by the darkness, and you are using shadow-fox

Follow steps [1..4] continue as follows:

  1. [b] Add (or open) the ShadowFox_customization folder.
  2. Add (or append) the code into a file called userChrome_customization.css
  3. Save and launch the shadowfox-updater.
  4. Restart Firefox.

The Code

:root{
  --main-bg-color: #b79c74;
}
#main-window[sizemode="maximized"] #titlebar {
  height: calc(var(--tab-min-height) - 10px);
}
#main-window[sizemode="fullscreen"]  {
  height: 100vh !important;
}
#main-window {
  height: calc(100% - var(--tab-min-height)) !important;
  background-color: var(--main-bg-color) !important;
  margin-bottom: calc(10px - var(--tab-min-height));
}
#main-window[sizemode="maximized"] #titlebar {
  margin-bottom: calc(-16px - var(--tab-min-height));
}
#main-window #titlebar {
  margin-bottom: calc(2px - var(--tab-min-height));
}

#navigator-toolbox {
  display: block;
  width: 100vw;
}

#nav-bar {
  width: 100vw;
  margin-top: 27px; /* disable on mac fullscreen */
}

#main-window[sizemode="fullscreen"] #nav-bar {
  display: none;
}

#main-window[sizemode="normal"] #toolbar-menubar[autohide="true"] {
  height: calc(var(--tab-min-height) + var(--space-above-tabbar)) !important;
}

#TabsToolbar {
  display: grid;
  position: fixed;
  width: 100%;
  bottom: 0;
  grid-template-columns: repeat(3, auto);
  background-color: var(--main-bg-color) !important;
}

#TabsToolbar .titlebar-spacer {
  display: none;
}
#TabsToolbar .toolbar-items {
  grid-column: 1 / 100;
}

#main-window[privatebrowsingmode="temporary"] #TabsToolbar .toolbar-items {
  margin-bottom: -25px;
}

.private-browsing-indicator {
  grid-column: 99;
}

#TabsToolbar #window-controls,
#TabsToolbar .titlebar-buttonbox-container {
  grid-column: 100;
}

#main-window[sizemode="normal"] #titlebar #toolbar-menubar .titlebar-buttonbox-container[skipintoolbarset="true"] {
  display: none;
}


/**
 * OS Compatibillity
 */
#main-window { /* only for linux */
  height: calc(100% - calc(var(--tab-min-height) + 8px)) !important;
}

TODO

  • This was made in windows, and tested on Linux (xfce). MacOS is yet to be supported
  • Linux uses different font sizes and toolbar, we need a way to identify the size and adapt the content margins to it.
@MrTatiTunes
Copy link

MrTatiTunes commented Apr 22, 2021

Wow! You are great!!!
Recently Fire Nightly was updated to 90ish version, OFC disregarding all demands of users to let us choose the position of tab bar on screen... I had kind of weird but working userChrome CSS which was nicely positioning tab bar below bookmarks bar, and even marking nicely the active tab. I am Industrial designer and searching plenty articles and supplies for creating prototypes of machines and utilities. And need clear and usable with ease tool for browsing plenty at the same time tabs and windows...now my CSS positioning tabs out of fire window beyond the bottom edge.
Your version is much better than the Mozilla Corporation !!!
But if you check how many people are looking for tabs AT POSITION I DESCRIBED ABOVE YOU MAY TRY TO MAKE CSS which will fulfill this demand. Talking to those f**** id***** in Mozilla is pointless. Many tried and always answer is that this is against their project.

I can attach my code (but do not laugh on it, it has plenty of mistakes) but was working till 90ish version issued this week, was working on all versions of Firefox (surprisingly)of not our any more Firefox.
Message me I will send you this mentioned CSS... if you would like to take part in solving a problem for a hundred million Firefox uses unhappy with Mozilla.
There is a problem with your version
obraz
that when you try to get to = menu it closes the window, make menu always visible maybe this will help, I will use your CSS for now anyway on screen it shows invisible icons of full-screen close and windowed... probably there are more mistakes to work out...

@aemonge
Copy link
Author

aemonge commented May 10, 2021

Ohhh !!

Thanks a lot for the review, I'll see to free up some time this week and fix it. I've also notice other errors, with the latest updated.

@MrTatiTunes
Copy link

@aemonge

Ohhh !!

Thanks a lot for the review, I'll see to free up some time this week and fix it. I've also notice other errors, with the latest updated.

Nice, you got back to the subject.
Can't wait results!

@aemonge
Copy link
Author

aemonge commented Nov 22, 2022

Hi, @MrTatiTunes can you check if this last update has fixed it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment