Feature Request: Setting for tab height

[zekeblue]

Possible? I run TST vertical on left and typically more tabs than are visible for the vertical space. The tab size is plenty big to read and work with. I would love to shrink the height by ~15-25%. Perhaps proportional to a configurable font size? Is there an About:xxxxx setting that could be used if it is not built into the settings UI? extensions.treestyletab.tabbar.heightextensions.treestyletab.tabbar.height doesn't do it (maybe that's for horizontal tabbar) Thanks.

screenshot may not indicate how big the tabs subjectively appear on my 20" 1600x900 monitor.
http://img685.imageshack.us/img685/14/tsttabsize.png

[Infocatcher]

For "Default (specified by the Theme)" style you can put something like following to userChrome.css:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
.tabbrowser-tab {
    padding-top: 0 !important;
    padding-bottom: 1px !important;
}
.tabbrowser-tab .tab-content {
    margin-top: -1px !important;
}

[zekeblue]

Thanks! This works as is for keeping much more in view. It reveals something that has been there for a while though. The left-side tree aligns towards the bottom instead of the top (see screen shot). I never bothered with it when I always had the column filled up. Is this a TST thing or would it be more in the styles domain?

http://img651.imageshack.us/img651/1192/tsttopspace.png

[Infocatcher]

In new versions tabs in Mixed style increased in height, so I wrote style:
Tree Style Tab: compact tabs

[zekeblue]

Thank you Infocatcher! I did lose that mod when updating. It would be hard to go back to fat tabs!

[muescha]

i like also to have a setting for the tab hight

why?
i installed informational tab and i like to have bigger thumbnails. but now increasing thumbnail size did not result in bigger tab height. so it looks ugly

(PS: i use metal theme)

[infinity0]

+1 for this. Recent versions of firefox have made the tabs obnoxiously large, no doubt the personal preference of some designer. I OTOH prefer to increase my productivity, instead of wasting screen space simply because someone else thinks it's too cluttered. At the moment I am using this workaround in userChrome.css:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/** Change the tab-bar height */
tab.tabbrowser-tab {
    height: 24px;
}

However, this only works when tabs are on the left or right (i.e. vertical). I tried for a few minutes to make it work even in horizontal mode, but it's much more tricky, and you need to override a bunch of extra things. I gave up because I don't use horizontal mode, but someone else is free to try - you may first need to do this to be able to inspect the browser chrome using the Browser Toolbox (I find DOM Inspector too primitive for this task).

It would be nice if TST made it easier for users to set the tab height, at least in vertical mode where the benefit is much greater (space is saved per-tab), and the cost of implementing it is much simpler (as I demonstrated above).

[piroor]

The cost to implement such a new "configuration feature" seems too large for its benefit.

[infinity0]

What about copying and adapting the code that already exists for the "tab width" configuration feature?

[piroor]

Currently the height of tabs can be controlled via userChrome.css by your hand completely. So, adding new configuration UI for it is just for lazy users who don't want to write userChrome.css by himself.

On the other hand, for technical reasons, the width of the tab bar is managed by the program itself, and it is hard to be controlled via userChrome.css. Moreover, TST sometimes wrongly set too large / too small width. The configuration UI is also required to fix such broken value, for emergency.

Note, any adding of new codes increases maintenance cost. I don't want to add needlessly rich configuration UIs which can be alternated with other major customization way except the "about:config".

[infinity0]

OK, I understand, thanks for the feedback. In case anyone is looking for this feature, I found Thin Tabs in the meantime which works well for vertical tabs and almost-OK for horizontal tabs. The benefit is more than just to avoid writing userChrome.css - each user has to figure that out for themselves, which can take a long time, especially if you don't know the technical details of how the firefox chrome works.

[piroor]

To be honest, I think that most TST users have less motivation to customize height of tabs - detault height of tabs should satisfy most people. Otherwise I should change default height of tabs to thinner (or thicker) to fit to actual usecases.

[X-Raym]

Even if it closed, and even if it can be modified by creating a file a putting some CSS code in it, I think it would be a cool feature to have this in menu. Lots of people don't even think to search for a solution on google if it is not proposed in the UI.
Just a matter of accessibility :)
Thanks for listening!

[seascape]

Can someone please provide working userChrome.css for changing (decreasing) tab height in the new webextension version? An hour of trying and I've failed.

FWIW I agree it would be a natural setting to include in the options UI. Many people who use vertical tabs do so expressly to make the most of screen real estate. For this reason I prefer my vertical tabs as short in height as possible.

[piroor]

TST 2.0 has ability to define user-defined style rules. This is an example to shrink tab height:

:root { --tab-height: 20px !important; }
.tab { height: 20px !important; }

[seascape]

Ah, thank you.

Speaking of the extra style rules, earlier I tried to enable the unread tab styling, but it doesn't seem to do anything when I uncomment it?

/* Show title of unread tabs with italic font */

.tab.unread .label {
  font-style: italic;
}

[Keith94]

I think it needs an !important; rule after it.

[X-Raym]

@piroor
But where should we put this user style ? I get stuck on this few days ago. :S

[seascape]

@X-Raym There is a text entry box in the options screen, under Advanced: Extra style rules for sidebar contents. Paste code into there.

@Keith94 Thank you but that didn't make the style-unread feature work, unfortunately. I wondered if the CSS was for a pre-WE version, perhaps.
I was wrong, this code does do something, just not what I expected. This code applies its style to new tabs you have not visited yet, but not all unloaded tabs. I always have many more of the latter than the former.

I wonder if unloaded tabs can currently be styled. But I think that is off-topic for this thread.

[TteokbokkiNari]

"I wonder if unloaded tabs can currently be styled."
There is actually a code snippet for exactly that in the wiki.

.tab.discarded { opacity: 0.75; }

[seascape]

@TheSweetLily Oh, I was unaware of the wiki page. Thank you very much.

[X-Raym]

@seascape Here hat I see under the Advanced Panel:

I don't see any extra style rules for sidebar contents. Do I miss something obvious ?

(note I'm using the French version)

[piroor]

@X-Raym Your version is legacy TST 0.19 for Firefox 56- and this issue is about TST 2.0 for Firefox 57+.

[X-Raym]

@piroor Ok, then I'll wait until v57 is official. Thanks!

[magikmw]

This is an example to shrink tab height

I've modified it a bit, so pinned tab icons don't get squashed:

:root { --tab-height: 20px !important; }  
.tab:not(.pinned) { height: var(--tab-height) !important; }

Full tabs have no issues with favicons being smaller than 'normal' but pinned icons do, they get cut with margins.
Haven't found how to manipulate those icons with the custom styles, so any help is appreciated.

[kevinbeason]

These (especially the last one) worked perfectly in v57 for me. Much needed. Thank you!

[J-Griffin]

@magikmw 's solution works great!

[suiryc]

Thank @magikmw for sharing, and @piroor for making TST.

I see that the top bar tab height changes with the selected "Density" ("compact", "normal" or "touch") in the UI personalization. "compact" appears to be the closest to what I had in v56, which I can now achieve with a height of 27 pixels in the extra stye rules.
Would there be a way to link this top bar tab height to the TST one, and make the latter a bit more dynamic ?

[piroor]

Would there be a way to link this top bar tab height to the TST one, and make the latter a bit more dynamic ?

I think it is impossible, because there is no such WebExtensions API.

[dset0x]

@magikmw's solution is good for not having a gap between regular tabs and pinned tabs, but is there a way to have pinned tabs the same height without having a gap?

[magikmw]

I'm fairly sure that the gaps are still there due to how the pinned tab icons are placed, based on these few lines.
If I'm reading this right, each pinned tab is placed 'statically' at a certain point. It seems we'd have to rewrite how this placement works, or provide a variable to the function, from options, I assume?

[tbertels]

TST 2.0 has ability to define user-defined style rules. This is an example to shrink tab height:

You really should make it the default setting with 25px height. It seems to be the same as it was in the pre WebExtension versions.

And there's no need to collapse trees by default with that tab height (I don't think it was the default setting before).

[piroor]

@tbertels I think that the default height of tabs should match to Firefox 57's Photon design, instead of previous version of TST itself.

[tbertels]

Maybe an option with a checkbox could be added to restore the old design? CSS styling is too difficult for most users (finding the old design CSS rules + pasting them in the options).

[piroor]

Sorry, but it is different from TST's design policy. Basically I put configuration UIs only for limited cases:

• Behaviors which can't be determined whether choice is "recommended" generally.
• Behaviors which require some modifications of scripts.

Changing height of tabs seems relatively easier than other existing configs.

[ghost]

I'm not able to change the height of the tabs. I've tried all the methods I can find on this page as well as on the snippets page. I know that userChrome.css is working, because hiding the sidebar header works. Is there any way to debug whether the height CSS property actually makes it to the tab, kind of like the F12 dev tools? I have Firefox v58, but I get the same result on v57.

[tbertels]

It has to go in the Tree Style Tab settings.

[lbmaian]

The current CSS snippet that links to here has:

.tab {
  height: 25px;
}

But as of right now, that alone doesn't work.

It apparently needs to have a --tab-height with the same value:

.tab {
  height: 25px;
  --tab-height: 25px;
}

[zekeblue]

/* --Change tab height */
.tab {
height: 23px;
}

Works ok for me. Here are all of what I use to customize tab appearances. Lots to play with.

/* --Add private browsing indicator per tab */
.tab.private-browsing .label:before {
content: "🕶";
}

/* --Change tab height */
.tab {
height: 23px;
}

/* --Change title attributes of unread tabs */
.tab.unread .label {
font-style: italic;
/font-weight: bold;/
color: navy;
}

/* --Change title attributes of discarded tabs */
.tab.discarded {
opacity: 0.8;
background-color: white;
}
.tab.discarded .label {
/font-style: italic;/
color: dimgray;
}

/* --Change attributes of active tabs */
.tab.active {
background-color: Navy;
height: 23px;
}
.tab.active .label {
color: #FFFFFF;
font-weight: bold;
}

/* --Change attributes of group tabs */
.tab.group-tab {
background-color: #B5C1E3;
height: 23px;
}
.tab.group-tab .label {
color: black;
font-weight: bold;
}

/* --Change close button style #1564 /
.closebox::after {
/
There are some possible characters for this purpose:
https://en.wikipedia.org/wiki/X_mark */
content: "❌";
background: none;
line-height: 1;
mask: none;
text-align: center;
width: 1.3em;
}

[lbmaian]

Okay, I've done some testing here and there, and it looks like there's no need for a --tab-height, but changing height messed up the tree until its regenerated (like closing and reopening it).

[Makishima]

Could someone share a style that will be compatible with the new FF?
Groups is overlaping for now with .tab {height: XXpx;}

[tbertels]

Could someone share a style that will be compatible with the new FF?
Groups is overlaping for now with .tab {height: XXpx;}

I'm using this, it still works fine with Firefox 89:

:root {
  --tab-height: 25px !important;
}

.tab {
  height: var(--tab-height) !important;
}

[Makishima]

Thanks, I should restart FF to resolve overlapping