15

I am running Firefox 90.0 on Ubuntu Mate 18.04 32-bit.

It seems that Firefox's tabs and menu bar are optimized for smartphones, as they are twice as high as the bars of all other programs.

My netbook has a small screen, and so I'd like to reduce them to ordinary size.

How/is that possible?

karel
  • 122,292
  • 133
  • 301
  • 332
Shakesbeer
  • 424
  • 1
  • 4
  • 12

4 Answers4

35

OPTION ONE:

First, go to about:config in your URL bar.

Then, search for browser.compactmode.show and change the value to true .

Finally, go to the Hamburger-Menu > More-tools > Customize-toolbar and at the bottom of the page, click Density and select Compact.

OPTION TWO:

First, go to about:config in your URL bar.

Then, search for layout.css.devPixelsPerPx

Finally, double click on the value and change it to less than 1.0. After you set the value, press ENTER to apply the changes. For example, you can use 0.75 or if that is too big, you could try 0.5.

NOTE: although the OPTION TWO will affect the whole browser window content like webpages, you can go to about:preferences#general in your URL bar and adjust the "Default zoom" percent to offset the adjusted size

OPTION THREE (probably the best option):

The following solution was originally posted on the Firefox help forums by user cor-el.

  • Edit or create the following file using your favorite text editor (nano is used in this example). It should be noted that the file path will be different if you use the Snap version of Firefox!:
nano ~/.mozilla/firefox/*/chrome/userChrome.css
  • Add the following lines under the @namespace line (note that the @namespace line is included in the example):
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */


/* ROOT - VARS */
*|*:root {
 --tab-min-height:      25px !important; /* adjust */
 --tab-min-width:       60px !important; /* adjust */
}

/* TABS: height */
#tabbrowser-tabs,
#tabbrowser-tabs > #tabbrowser-arrowscrollbox,
.tabbrowser-tabs .tabbrowser-tab {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}
  1. When you are done editing the file, first make sure Firefox is closed. Then, press CTRL+o to save your file and press CTRL+x to exit nano.

If your user has multiple Firefox profiles saved, nano will automatically open the next profile css file after you press CTRL+x.

And again if you're not using the Snap version of Firefox, and also if that css file doesn't already exist, just allow nano to create the file and then copy and paste the example above (and remember to include the @namespace line if one does not already exist!).

For the Snap version, you will need to find out the default location of your userChrome.css file and then add the contents above as described.

I consider this the best option because it independently reduces the height of the tab bar without scaling other aspects of the browser or web content.

mchid
  • 44,904
  • 8
  • 102
  • 162
5

If you are referring to the header bar in Firefox v90 then there are facilities to remove it.

  • Click on the 3 lines (so called hamburger) icon to open Firefox menu.
  • Click More Tools then "Customise …” menu option to open new Customise Firefox tab.
  • Finally un-check the “Title Bar” check-box in the bottom-left.

reference

graham
  • 13,061
1

Here is a Firefox userChrome.css file that reduces the tab and navigation bar heights to increase available screen space:

SlimBarsFirefox

:root {
  --tab-max-height: 24px !important;
  --tab-min-height: 0 !important;
  --urlbar-toolbar-height: var(--tab-max-height) !important;
}

/* Bar resizing */
#nav-bar,
.toolbar-items,
.titlebar-buttonbox-container,
.tab-content,
.tab-background,
.tab-label-container {
  height: var(--tab-max-height);
}
.tab-background {
  margin: 0 !important;
}
.tab-secondary-label {
  font-size: .5em !important;
  margin: -.6em 0 .5em !important;
}


/* Selection highlight /
#nav-bar toolbaritem,
#nav-bar toolbarbutton {
  --focus-outline: none;
  --slimbar-highlight-color: color-mix(in srgb, var(--lwt-toolbar-field-highlight) 40%, var(--toolbar-bgcolor));
  / --toolbar-field-focus-background-color: var(--slimbar-highlight-color); */
}
#nav-bar toolbaritem:focus-visible,
#nav-bar toolbarbutton:focus-visible,
#nav-bar toolbaritem #identity-icon-box:focus-visible,
#nav-bar toolbaritem #star-button-box:focus-visible,
#nav-bar toolbaritem .unified-extensions-item-action-button:focus-visible {
  background-color: var(--slimbar-highlight-color) !important;
}
J. Mini
  • 190
Zyox
  • 11
0

Simple and fast solution:

Head to about:config in Firefox, search for browser.uidensity and change the value from 0 to 1.

You should see the change immediately. 

Hossein Shojaeifar
  • 1