space showing between tabs on 1.24.0 of addon

[pyrates999]

I'm on Firefox 131.0.2.

There is now a space being shown between each tab on it's left and right side:

But not on the top and bottom.

Here is my preferences:

TMPpref.txt

This was not happening in 1.23.0.

[onemen]

What is you platform? Are you using special theme or styles?

this is how it look on my Windows 11

[pyrates999]

My OS is windows 10. Here is my chrome directory:

chrome.zip

I've configured it so that it looks like it did back in firefox 56, before firefox did any spacing between each tab.

[onemen]

I have tested your settings + chrome files on new profile I did not see any issue

• Download and install latest Development build
• Download and install latest Firefox scripts
• Open about:support page and click "Clear startup cache…" to force Firefox to load the installed scripts on the next startup.
• Open the browser console; look for error in your scripts, you may need to update some of your scripts

[pyrates999]

Ok, did that from the instructions here: https://github.com/xiaoxiaoflood/firefox-scripts?tab=readme-ov-file

It still looks the same with the space between each tab on the left and right side.

I also did this:

From: https://support.mozilla.org/en-US/kb/compact-mode-workaround-firefox

1. Type about:config in the address bar and press Return. A warning page may appear. Click Accept the Risk and Continue to go to the about:config page.
2. Find the browser.compactmode.show preference.
3. Switch the toggle to true and then close the tab.
4. Click on the menu button fx89menuButton to open the menu panel.
5. Click More Tools menu.
6. Choose Customize Toolbar.
7. At the bottom of the panel, click the Density button.
8. Choose Compact (not supported) from the menu options.
9. Click Done.

[onemen]

test how it look on new profile

[pyrates999]

After creating a new profile, and applying the files in chrome to it, it is the same result:

Here is the export of tab mix plus preferences along with my chrome directory zipped up:

chrome.zip TMPpref.txt

My tabs are set to minimum width of 120 and maximum width of 120 as I don't want them resized.

[pyrates999]

I suspect it has to do with the auto fit feature where you automatically resize each tab to fit on its row so there is no empty spaces. If you could tell me how to disable that, I can verify that is causing it or not.

[onemen]

set new tab button to be on the right side instead of after tabs

try to override this rule:

#tabbrowser-tabs[orient="horizontal"][multibar]:not([widthFitTitle]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[fadein]:not([pinned]) {
  max-width: var(--tabmix-overflow-max-width, 250px) !important;
}

look here for changes in css, change after September 10 are included in version 1.24: https://github.com/onemen/TabMixPlus/commits/main/addon/chrome/skin https://github.com/onemen/TabMixPlus/commits/main/addon/chrome/content/overlay

[pyrates999]

That didn't work either.

So I disabled the new tab button from not being shown at all. Then went to about:support and clicked on Clear Startup Cache..., and that worked:

[pyrates999]

This was not needed for version 1.23.0 though.

[pyrates999]

I think the new tab button is taking up more space then is needed.

And the button for listing all tabs can't be removed in customize.

[pyrates999]

Ok, If I set tab width minimum and maximum to 110 instead of 120 pixels, then it works. But I still prefer 120.

[pyrates999]

I set the new tab button on the left side and it looks to be quite wide:

[pyrates999]

Downgrading back to 1.23.0 fixes it.

[pyrates999]

I think I found where it's different. In 1.23.0, this is the right side of the tab bar:

In 1.24.0, it is thinner on the right side of the tab bar, causing spaces to be added between each tab on the left and right side:

[onemen]

I will try to look into it during the weekend...

[onemen]

OK, the issue was incompatibility between you custom userChrome.css

Add this rue after the rule for .tabbrowser-tab .tab-background {

#tabbrowser-tabs[orient="horizontal"][multibar]:not([widthFitTitle]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[fadein]:not([pinned]) .tab-background {
  max-width: var(--tabmix-overflow-max-width, var(--tab-min-width)) !important;
}

or you can remove max-width: 120px !important; from .tabbrowser-tab .tab-background

this css rule adjust the inner width for .tab-background to be the same as the width of the tab

[pyrates999]

Thank you very much! That fixes it :)

[pyrates999]

I added this to my chrome\userChrome.css

#tabbrowser-tabs[orient="horizontal"][multibar]:not([widthFitTitle]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[fadein]:not([pinned]) .tab-background { max-width: var(--tabmix-overflow-max-width, var(--tab-min-width)) !important; }

[onemen]

@pyrates999

I am planing to add option to turn this feature off, and also for users that set the same min and max width, i will adjust both min-width and max-width to a value the fit window width also fro the first row, to prevent the change in tab width when tabs moves to 2nd row. I will let you know if you need to update your userChrome.css, when this change lands in the development build

[pyrates999]

Thank you very much!

[onemen]

Download and install Development Build

update your userChrome.css

#tabbrowser-tabs[orient="horizontal"][multibar]:not([widthFitTitle]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[fadein]:not([pinned]) .tab-background {
  max-width: var(--tabmix-tab-overflow-width, var(--tab-min-width)) !important;
}

I didn't change the width for when there is only one row since everything move anyhow when the new tab and new tab button jump to the 2nd line

[pyrates999]

That works. How do I adjust the number of pixels wide that the side bar is? It was wider on 1.23.0. So I'd like to set it to that width again in pixels. Just need to know the value used and what to put in userChrome.css.

Setting the tab width to 120 for min and max worked perfectly before.

[pyrates999]

So when I have the option Tab width fills rows on overflow enabled and add this to my userChrome.css:

#tabbrowser-tabs[orient="horizontal"][multibar]:not([widthFitTitle]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[fadein]:not([pinned]) .tab-background { max-width: var(--tabmix-tab-overflow-width, var(--tab-min-width)) !important; }

I checked the width of the tabs, and they are 128 pixels instead of 120 pixels.

So whatever you did to add a space between each one before, if you can add an option to disable that entirely, so that it goes back to the behavior of the previous release, 1.23.0, that be great.

I even disabled the new tab button, and the layout of the tabs is even better because more can fit on one row, and the tabs are all 120 pixels wide.

[pyrates999]

Oh another thing I noticed is that there is a List All Tabs button in the tab bar that Tab Mix Plus seems to add. And if I right click on the area and select customize toolbar..., there is also a List All Tabs button that I could move to the tab bar.

This is the one that tab mix plus seems to include that I then can't remove:

And here is the List All Tabs button in the customize toolbar:

Both do the same thing.

[pyrates999]

Oh I can hide it if I set this in about:config to false:

browser.tabs.tabmanager.enabled

[pyrates999]

And something that has been annoying me. If I open up tab mix plus options, and I am already in Display with Tab Bar selected. I have to click on Tab twice before it will be selected.

[pyrates999]

So now that is done. If I have 3 buttons in the tab bar on the right side, the tabs width will be wider. If I only have 2 buttons in the tab bar on the right side, the tabs width will be set to what I have them in userChrome.css and in tab mix plus options.

Examples:

1. arrows, new tab button -> tabs width will be set to what I have them in userChrome.css and in tab mix plus options.
2. arrows, new tab button, list all tabs button -> tabs width will be increased from 120 pixels to 128 pixels.

So since I can't remove the arrows, I include the new tab button, but not the list all tabs button on the right side for now.

[onemen]

1. when you turn off Tab width fills rows on overflow --tabmix-tab-overflow-width is undefined so max-width: var(--tabmix-tab-overflow-width, var(--tab-min-width) will set max-width to be the same as min-width

2. List All Tabs button (red button in the image above), is build in from Firefox, you can not remove it, so we have an option to hide it in Display > Tab bar. Setting browser.tabs.tabmanager.enabled to false do the same

3. this is a bug that i need to fix

   And something that has been annoying me. If I open up tab mix plus options, and I am already in Display with Tab Bar selected. I have to click on Tab twice before it will be selected.

[pyrates999]

1. I have my max-width value set to 120, same as my min-width value. So it increasing it to 128 should be a bug.

2. Ah thank you. I didn't know where that was set.
3. Ok, thank you.

[onemen]

when you enable Tab width fills rows on overflow Tab mix will increase tab min-width to fill the row.

[pyrates999]

I've disabled that. Now each tab stays at 120 pixels wide.

This is what it looks like when I only have 2 items on the left side:

But when I have 3 items on the left side, this is what it looks like:

That is a lot of extra space. And I haven't added any blank spaces.

How do I remove this part of it?

[onemen]

This is how ti look for me when i enable Tab width fills rows on overflow

[pyrates999]

That image has 4 items on the side instead of 3.

Are your tabs 120 pixels wide?

If I add this to my userChrome.css as you said to:

#tabbrowser-tabs[orient="horizontal"][multibar]:not([widthFitTitle]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[fadein]:not([pinned]) .tab-background {
  max-width: var(--tabmix-tab-overflow-width, var(--tab-min-width)) !important;
}

It increases each tab to 128 pixels. I just want to remove the extra space that is added when 3 items are on the right side, without the tabs being increased to 128 pixels. The tabs should stay at 120 pixels. And there should be no extra space on the right side.

[pyrates999]

This is with Tab width fills rows on overflow disabled. And I did not add this to userChrome.css:

#tabbrowser-tabs[orient="horizontal"][multibar]:not([widthFitTitle]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[fadein]:not([pinned]) .tab-background {
  max-width: var(--tabmix-tab-overflow-width, var(--tab-min-width)) !important;
}

I think the extra space is added automatically when there are 3 or more items on the right side. You add room for 3 more. Which is for these options:

• new tab button
• close tab button
• all tabs button

And when all are ticked, there is room for one more on the right side:

If none are ticked, and I tick Extra spaces on both side, then it adds 4 extra spaces.

If I tick only one of these options with the list all tabs button from customize toolbar...:

• new tab button
• close tab button
• all tabs button

There are room for 3 additional items:

But then if I tick Extra spaces on both side, the room for 3 additional items changes to a slightly smaller value:

[pyrates999]

So to fix this, when there are 3 items, allocate 3 spaces. When there are 4 items, allocate 4 spaces, etc.

I see for when there are 1 or 2, the total space allocated is for 2 items. Hence why 2 items doesn't have any extra space added to it.

You can see it has allocated space for 2 items here when there is 1 or 2 items:

[pyrates999]

I'm not sure what the option Extra spaces on both sides is supposed to do here exactly.

[pyrates999]

If I disable tab mix plus, the sidebar now fits 3 items without adding extra spaces to it: