FF 89 tab height

[532910]

With the new tab design introduces in firefox 89, it now takes significant more vertical space.

I found how to reduce a gap between tabs:

@media (-moz-proton) {
        .tab-background {
                margin: 0 !important;
/*              padding: 0 !important;*/
        }
        .tabbrowser-tab {
                margin: 0 !important;
                padding: 0 !important;
        }
}

But padding inside a tab is still big enough:

Is there a way to reduce it?

I believe this should be a part of Multirow tabs/Readme.md#tab-sizing.

[532910]

The tab container bar is also looks wrong now. While new ff completely hides it, it's shown on the top with Multirow. To put it bottom back:

.tab-context-line {
    -moz-box-ordinal-group: 2 !important;
}

[Izheil]

There is a variable in multirow tabs that allows you to do just that (although I had to update it right now for Proton), and that's --tab-min-height on the editable CSS variables section of the script.

I added a better explanation inside the files:

If you want a more compact view, you can toggle compact mode by setting [browser.compactmode.show] as
"true" on about:config, and then turn on compact density on the customize page (right click empty space
on tab bar -> Customize/personalize toolbar (should be the last option) -> Density select box).

Using compact view will make your tabs smaller in height in a more supported way than the variables
here can.

If you want a custom tab height smaller than the default but different than compact view, change the
"inherit" value in #TabsToolbar --tab-min-height variable to the value you want.

For reference, in Proton, the default heights by density are as follows:
- Compact mode: 29px
- Regular mode: 36px
- Touch mode: 41px

Note that with Proton, when there is media playing, the tab text will appear in 2 lines, and unlike
with compact mode this won't be changed to fit with a custom height set by this variable, so anything
lower than 30px might make the text to go outside the tab area.

The reason why this wasn't added on the readme was because it was easier to use compact mode before (and thus wasn't really needed to change it on multi-row), but I agree that since compact mode has been "hidden" and might dissapear in the future, I should add an explanation on how to change things on the readme.

If you want to make tabs more compact, using compact mode is still the better option (see the quote explanations), so I'd recommend you to use that if you want smaller tabs.

As for the tab container, it's not hidden by Proton (the new Firefox interface), as shown in some reddit threads that have been complaining about it for a while now, that's how it's suposed to look.

Multirow tab files don't do anything about container context lines because... well, it's not it's job, so there is nothing on its code that touches that.

[532910]

I missed the density setting. Thank you. Normal density is enough for me, but it doesn't affect the gap between tabs, that is very notable with multirow tab line. So I left:

.tab-background {
        margin: 0 !important;
        padding: 0 !important;
}
.tabbrowser-tab {
        margin: 1px !important;
        padding: 0 !important;
}

BTW, is it possible to make --tab-min-height customizable from userChrome.css? (To leave MultiRowTabLiteforFx.uc.js in original state.)

Indeed, multirow doesn't affect container context lines. But before v89 context line was on the bottom of the tab, and now it is moved above the top. With multiple tab rows this make confusing to understand which tab the line belongs to. So I moved it back:

.tab-context-line {
        -moz-box-ordinal-group: 2 !important;
        margin: 3px !important;
}

[Izheil]

That is something related to tab theming, not to multirow.

Multirow files is only suposed to show multiple rows of tabs, without touching how tabs look more than their density.

If you want tabs that look like photon, you may use Rounded-connected-tabs.as.css file, and just change the border-radius values to 0 so that the tabs are squared (or leave them as they are in the file already to have them stay rounded).

It also moves the container lines below so that it's similar to how Photon had it.

As for tab height, you can also use the --tab-min-height variable directly from userChrome.css, since the variable is directly used by Firefox.

/* Compact tabs */
#TabsToolbar {
        --tab-min-height: 29px !important;
}

[532910]

I'm not trying to say this is related to multirow. And not trying to bring photon back. Just like to share my minor customizations, possibly they will be useful for someone else who use multirow.

As for tab height, you can also use the --tab-min-height variable directly from userChrome.css, since the variable is directly used by Firefox.

I tried before the first time, and re-tried now again: it doesn't work for me. (But it works from MultiRowTabLiteforFx.uc.js)

[Izheil]

It won't work if you are using multirow, since the multirow file is loaded after userChrome, so the rules will override any that is specified on it.

If you removed multirow it would work.

If you still want to change the value from userChrome while also having multirow, leave the --tab-min-height of multirow as the default of inherit and set the selector to be :root on userChrome (thus it will be inherited from the root of the element) instead from #TabsToolbar.

/* Compact tabs */
:root {
  --tab-min-height: 29px !important;
}

As for the gaps between tabs, I mentioned Photon since it's how the interface used to be without the gaps, so if you want to remove the gap you can use Rounded-connected-tabs.as.css, or use the rules you already had.

Removing the gaps without "connecting" it to the toolbar would leave the rounded sections of the bottom of the tabs visible, while giving the sensation that it was partically connected to the toolbar, which wouldn't look too good in my opinion.

[JoshuaJSlone]

As for tab height, you can also use the --tab-min-height variable directly from userChrome.css, since the variable is directly used by Firefox.

/* Compact tabs */
#TabsToolbar {
        --tab-min-height: 29px !important;
}

I'll note that this seems to have its limits, though for a pretty niche group. I set my height even smaller than Compact (here --tab-min-height is 22px) but the bottom row of tabs seems to ignore it.

[Izheil]

Anything lower than 29px will require you to resize the other elements in the tabs toolbar (like the new tab button, any extension you might have pinned there, and the close/max/min buttons) so that the tab bar resizes accordingly.

This should work for the most part with 22px height:

/* Extra compact tabs, only use this if using lower than 29px (you might need to change some of the padding values) */
#tabs-newtab-button, #TabsToolbar .titlebar-button {
  max-height: var(--tab-min-height) !important
}

#tabbrowser-arrowscrollbox {
  height: var(--tab-min-height);
}

#TabsToolbar .toolbarbutton-icon, #tabs-newtab-button, #new-tab-button {
  height: var(--tab-min-height)  !important;
  width: var(--tab-min-height) !important;
}

#TabsToolbar toolbarbutton:not(.titlebar-button) .toolbarbutton-icon {
  padding: 2px !important;
}

#TabsToolbar-customization-target .webextension-browser-action .toolbarbutton-badge-stack {
  padding: 0 !important;
  min-height: var(--tab-min-height) !important;
  min-width: var(--tab-min-height) !important;
}

#TabsToolbar .titlebar-button {
  padding: 0 12px !important
}

#TabsToolbar .titlebar-button image {
  padding: 4px !important;
}

#TabsToolbar-customization-target .webextension-browser-action .toolbarbutton-badge-stack image, .titlebar-button image {
  margin: auto !important
}

#tabs-newtab-button {
  border-left: 5px solid transparent !important
}

For other heights lower than 29px you might need to change the padding values.

With that said, that should work as far as you are using the Rounded-connected-tabs.as.css to make tabs more compact.
I am not sure of the compatibility with other authors code for compact tabs, since the approaches might differ.

[JoshuaJSlone]

Hey, thanks a lot, man!