Firefox Tabs on Bottom

firefox-tabs-on-bottom.md

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

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:

5. [b] Add (or open) the ShadowFox_customization folder.
6. Add (or append) the code into a file called userChrome_customization.css
7. Save and launch the shadowfox-updater.
8. 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.

ScreenShot.jpg

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