Do you have anything else in your userChrome.css file?

Do you have anything else in your userChrome.css file?

I have a good amount of styles in the file. Do you want to see the file ?

Sure, I can take a look at it. I imagine there's either something else already styling tabs, or some syntax error preventing this style from taking any effect.

Sure, I can take a look at it. I imagine there's either something else already styling tabs, or some syntax error preventing this style from taking any effect.

I'm trying to add a collapsing to tabs groups but for now this issue; https://pastebin.com/cz59b72U

As far as I can tell, icon_only_tabs.css works as intended if I just add it to your userChrome.css file.

But what is this about tab groups? Are you talking about some extension or Firefox's own tab groups feature (which is totally not ready in Firefox 133) and what does that have to do with icon only tabs?

As far as I can tell, icon_only_tabs.css works as intended if I just add it to your userChrome.css file.

But what is this about tab groups? Are you talking about some extension or Firefox's own tab groups feature (which is totally not ready in Firefox 133) and what does that have to do with icon only tabs?

It comes from this post; https://www.reddit.com/r/FirefoxCSS/comments/1fvry4k/comment/lqg7znd/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button

There is accordion type viewing of favorite icons when in a tab list. It was mentioned this rule you have posted on your repository that one can accomplish this, although when applied doesn't appear to work ?

Icon_only_tabs.css is only supposed to make all tabs look as if they were pinned tabs, that is - to only show tab icon. And as far as I can tell, that works totally fine.

If you are trying to achieve something else then please explain clearly what that something is because quickly reading the post you linked doesn't really answer it very well if at all.

Icon_only_tabs.css is only supposed to make all tabs look as if they were pinned tabs, that is - to only show tab icon. And as far as I can tell, that works totally fine.

If you are trying to achieve something else then please explain clearly what that something is because quickly reading the post you linked doesn't really answer it very well if at all.

On that reddit post there is or was a way to which make the tab list showing only the favorite icon but upon hover it would expand the tab name and supposedly one of those css hacks on that reddit page would also show the thumbnail so double duty so to speak.

Although it was posted that your icon_only_tabs.css is capable of doing not both of that which I mentioned above but just expanding the tab to show the full tab name if its set to a favorite icon tab list or that's the way it was understood ?

If you add these rules after icon_only_tabs.css then the selected tab should expand to its normal size:

.tabbrowser-tab[selected]:not([pinned]){ min-width: 225px !important; }
.tab-icon-stack[selected]:not([pinned]) > *{ margin-inline-end: var(--tab-icon-end-margin) !important; }
.tab-label-container[selected]:not([pinned]),
.tab-close-button[selected]{ display: flex }

If you add these rules after icon_only_tabs.css then the selected tab should expand to its normal size:

.tabbrowser-tab[selected]:not([pinned]){ min-width: 225px !important; }
.tab-icon-stack[selected]:not([pinned]) > *{ margin-inline-end: var(--tab-icon-end-margin) !important; }
.tab-label-container[selected]:not([pinned]),
.tab-close-button[selected]{ display: flex }

Alright so I've done this;

.tab-content > :not(.tab-icon-stack){
  display: none
}
.tab-icon-image:not([src]){
  display: block !important;
}
.tab-icon-stack > *{ margin-inline: 0 !important; }
.tabbrowser-tab{
  flex-grow: 0 !important;
}

.tabbrowser-tab[fadein]{ min-width: calc(16px + 2 * 10px + 4px) !important; }
:root[uidensity="compact"] .tabbrowser-tab[fadein]{
  min-width: calc(16px + 2 * var(--tab-inline-padding,0px) + 4px) !important;
}
:root:not([uidensity="compact"]) .tab-content{ padding-inline: 10px !important; }
.tabbrowser-tab[selected]:not([pinned]){ min-width: 225px !important; }
.tab-icon-stack[selected]:not([pinned]) > *{ margin-inline-end: var(--tab-icon-end-margin) !important; }
.tab-label-container[selected]:not([pinned]),
.tab-close-button[selected]{ display: flex }

Although the tabs don't expand when I hover over ?

Sorry, somehow I was under impression that you wanted the tab to expand when it is selected. But since you want to expand on hover then add this instead:

.tabbrowser-tab:not([pinned]):hover{
  min-width: 225px !important;
  & .tab-icon-stack > *{
    margin-inline-end: var(--tab-icon-end-margin) !important;
  }
  & .tab-label-container,
    .tab-close-button{ display: flex !important }
}

Sorry, somehow I was under impression that you wanted the tab to expand when it is selected. But since you want to expand on hover then add this instead:

.tabbrowser-tab:not([pinned]):hover{
  min-width: 225px !important;
  & .tab-icon-stack > *{
    margin-inline-end: var(--tab-icon-end-margin) !important;
  }
  & .tab-label-container,
    .tab-close-button{ display: flex !important }
}

The tabs are not expanding out as in an accordion ?

What do you mean by "out"? Look, it would really help if you could specify in advance what kind of behavior you are trying to achieve. Add a sketch image if necessary.

What do you mean by "out"? Look, it would really help if you could specify in advance what kind of behavior you are trying to achieve. Add a sketch image if necessary.

This is how it looks when my tabs are a full view (expanded) with their respect tab names.

And so this is how it looks when collapsed. When I said out, although it wasn't clear. I meant when the tab list is collapsed, when I hover over the favorite icon in the tab list it expands seen above but with one exception, it doesn't expand all the tabs only the favorite icon which I'm hovered over.

Well okay, this clears out things a lot. icon_only_tabs.css does not support vertical tabs at all - although it sounds like it works somewhat.

Nonetheless, since vertical tabs is such a recent addition, if you are talking about some customization option you should mention that you need it for vertical tabs. Whatever kind of styling rules you need to add for vertical tabs are likely to be something very different than those for normal horizontal tabs.

As a sidenote, autohide_sidebar.css might work here as is depending on what kind of settings you are using for sidebar.

Actually, not autohide sidebar, but autohide_tabstoolbar_v2.css

Actually, not autohide sidebar, but autohide_tabstoolbar_v2.css

Based on this userChrome where do I add the above rules ? I tried arbitrarily two spots, it breaks my tab list ?

That link is private so I can't see what's in it. But I tested with the link you shared here - https://pastebin.com/cz59b72U and just adding contents of autohide_tabstoolbar_v2.css seems to work as I imagined that style would.

Then I noticed that that style has a selector #zen-essentials-container at the end - if that means that you are not actually using Firefox, but zen browser then really all bets are off - as far as I know, zen browser is in some ways quite different than Firefox and you should not expect that styles work equally in zen browser than they do in Firefox.

Unfortunately I cannot see that either. Although, the previous link is now accessible. When I try that and simply add rules from autohide_tabstoolbar_v2.css after it then vertical tabs do autohide - mostly how I would expect them to do. That requires that sidebar is set to expanded state - the other state is to simply show only icons, so it doesn't make sense to do any autohiding there.

Do you know how to get the tab to expand out as in this image. The issue is the tab list menu is one menu regardless if FireFox or Zen or what have you. Therefore tab out or expanding the tab will essentially expand the whole tab list, instead of strictly the tab to which I'm hovering over.

This is really my goal with tab lists allowing me to keep the tab list as just a favorite icon but hover over to see the tab name quickly.

If that's what you are after then you need to do something quite different than what any of my existing styles are doing. I made a mockup of how that could go, but it will only work if the sidebar tabs are on right side of window, and the sidebar has to be in its expanded state.