Multi-row tabs does not work properly With Waterfox G5

[KhurramFHassan]

I have installed TMP following your instruction on Waterfox G5.0.1 and would like to use multi-row tabs with all rows visible. However, it is not working properly. It only shows 2 rows of tabs with an up arrow and a disabled down arrow. It only shows the 1st four rows; I have 6 rows in all. Waterfox just updated today; so probably it needs to be fixed in TMP.

Khurram

[lanmaster]

After update from Waterfox 4.1.5 to 5.0.1 i see that ui is broken too. Tabs in lowest row is not clickable and cannot scroll tabs on mouse wheel. Only fisrt up row is working. Also there is only 2 rows visible at one time.

[onemen]

I will have to check what has changed in Waterfox 5

[onemen]

As a temporary workaround, try to set userChrome.theme.enable to false

Report if it work for you.

[KhurramFHassan]

Setting userChrome.theme.enable to false works. Thanks.

[117649]

@onemen WF use a modified version of lepton as it's default theme. But I don't have problem with lepton on FF. I guess this is mostly a css problem reference the original lepton may be helpful.

[onemen]

@117649 , see this comment Waterfox/issues/2780

[lanmaster]

As a temporary workaround, try to set userChrome.theme.enable to false

Report if it work for you.

It work. Thanks!

[117649]

@117649 , see this comment Waterfox/issues/2780

I see, it's of photon-style of lepton. But I'm using proton-style thus I'm not affected.

[onemen]

@117649 and anyone that want to test the patch see #169

[black7375]

Hello, I'am lepton theme author.
Is #TabsToolbar[multibar] that you can check when it's multi row mode in TabMixPlus?
If it's right, I think lepton theme can do the patch.

[onemen]

@black7375,

Hello, I'am lepton theme author.
Is #TabsToolbar[multibar] that you can check when it's multi row mode in TabMixPlus?
If it's right, I think lepton theme can do the patch.

Yes,
I have the patch ready see #169.
The main issue I have with Waterfox userChrome.css implementation is that many rule have an !imporant and it is very hard to modify for other theme/extensions

[onemen]

Try this new test version

It should solve the main issue with Multi-row.

Waterfox added many preferences in about:config to control its theme, look for all preferences that start with userchrome.
You can toggle these preferences and see if it work/look better. some changes only take effect after restart.

[black7375]

Unfortunately, due to the CSS loading order of Firefox, the style will not be applied unless !important is used.

• https://github.com/black7375/Firefox-UI-Fix/blob/master/docs/Restrictions.md#css-loading-order

I'll see if I can increase compatibility with TMP on the weekend.

[black7375]

@onemen I have a question.

For now, I've checked most of the other compatibility.
Only one new tab button shape is left.

The shape of #tabs-newtab-button is crushed, and it seems to be due to the following code.

TabMixPlus/addon/chrome/content/overlay/multirow.css

Lines 22 to 24 in 2d97d67

	.tabbrowser-tab {
	height: var(--tab-min-height_mlt);
	}

Is --tab-min-height_mlt important part in TMP?
Can it be removed from the TMP to reduce the conflict?

If it's impossible, height is planning to force an unset in Lepton.

[117649]

@black7375

If it's impossible, height is planning to force an unset in Lepton.

If I'm not making a mistak extensions.tabmix.tabBarMode is 2 means multi line mode.
You should be able to make specific rules for the situation with that pref.

[onemen]

Yes, --tab-min-height_mlt is important, I am using it to set tab height for multi-row.
I set --tab-min-height_mlt to be --tab-min-height + 2 * -tab-block-margin.
the default -tab-block-margin In Firefox proton is 4px but i am changing it to 1px for multi-row, without it the vertical gap between to rows will be 8px.

[black7375]

I'll come up with a way to avoid conflict or bypass tomorrow. Thank you for your quick reply.

[onemen]

@black7375,

Is there a way for me to test the new style ?

[black7375]

I've created a temporary branch.
https://github.com/black7375/Firefox-UI-Fix/tree/tmp

In my environment, the following code just works and fixes the UI crash.

#TabsToolbar[multibar] .tabbrowser-tab { 
  height: unset !important; 
}

---

More contexts

Lepton works on assuming that the height of the tab bar is var(--tab-min-height).
var(--tab-block-margin) is just used to adjust the background margin.
https://github.com/mozilla/gecko-dev/blob/32fd7c9b165d9202f441cdc7f68aca11065a1d37/browser/themes/shared/tabs.css#L541-L544

This was to handle the connected tab and the float tab at the same height.

[black7375]

Now, It seems to work well with multi-row in my environment !!
https://github.com/black7375/Firefox-UI-Fix/releases/tag/v6.3.0

[onemen]

@black7375

let me know how it work with Tab mix latest version

[black7375]

The old version was clearly working.
https://www.reddit.com/r/FirefoxCSS/comments/y61hw2/lepton_now_support_tabmixplus/

Strangely, the new version doesn't work in Pure Firefox.

[onemen]

I was pushed b1d46ba.
maybe this commit mess things up.
can you test if reverting the commit help?

[black7375]

Yes. Today I'm busy, so I'll tell you after the test tomorrow.

[black7375]

It has been confirmed to work well.

---

It's a mistake made by adjusting the value of browser.tabs.tabMinWidth

[onemen]

Thank you for your help