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,695
  • 134
  • 305
  • 337
Shakesbeer
  • 424

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
  • 45,159
  • 6
    Won't option two affect the whole browser window content? – Shakesbeer Aug 03 '21 at 20:04
  • I tried option one, even though the respective settings tab seems to have some bugs: When I had done the registry changes, the dropdown setting showed the compact mode option but claimed it is not supported. Anyway, at least the tab bar got more compact. But now the "text menu bar" (the one that says "Files, Edit, View, ...") has reappeared, it wasn' there before when I had disabled the window bar. – Shakesbeer Aug 03 '21 at 20:15
  • Now why is compact mode hidden by default? This is a good example for software creators' ignorance of the users' needs. Instead of giving the choice, they try to push something on us. Do FF developers think that everybody uses a touchscreen (I don't mention smartphones because there's a separate FF version for those) nowadays and that they can simply ignore the traditional desktop user, maybe we're out of fashion or what? i don't even mention the Ubuntu 18.04 "icons-GUI" (a decade after Microsoft's Windows 8)... SCNR, but all this "elephant fingers layout" all over the WWW makes me so angry! – Shakesbeer Aug 03 '21 at 20:34
  • 1
    @Shakesbeer I think "files, edit, and view" are part of the Title Bar. In any case, you can usually make this menu appear and disappear by pressing the ALT key. Alternatively, you can also Right-Click in the tab area and then check the "Menu" box to show this menu. – mchid Aug 04 '21 at 05:11
  • 2
    @Shakesbeer As for them removing Compact mode, I think they did this because it's not very compatible with themes. On my computer, it makes very little difference when I select Compact mode so I use the layout.css.devPixelsPerPx option to reduce the size. – mchid Aug 04 '21 at 05:13
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,289
  • I just noticed I had done that already and confused the window bar with the tabs bar (I will edit my question). I think disabling it may count as a way of shrinking it. But what about the tabs and menu bar size, I don't want to disable those bars. – Shakesbeer Aug 02 '21 at 23:13
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
  • 210
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