Spacing issue

[DavyRay]

I just updated the script from v4.05 to v4.17. Mainly because the addon update screen was all wacky.

I tried as best I could to match the settings from v4.05 but a couple of things are off.

1- The active tab is bright while all the others are dark. It never used to be like that. See what it looks like now. Note the blue line under the tab. That is because I use something called Multi-Account Containers. The problem is with the dark tabs is that the blue line (or orange depending on what I am using) is hard to see. The titles of the tabs are black on dark gray. It makes it hard to see properly. While my original style made no distinction between active tab vs the rest, i don't mind the dark tab, if i could make it not as dark.

.

2- The height of the tab itself in v4.17 is shorter than v4.05. Is there a way to make the tab taller?

Thanks!

[Aris-t2]

Could you test 4.1.8 release?

[DavyRay]

I am not sure what changed. So far as I can tell nothing changed. The height of the tabs still looks the same between 4.17 and 4.18 .. and the dark tabs are still too dark. Still hard to read the black text on it. Or perhaps there is another setting somewhere?

[Aris-t2]

I'm not sure, if the issue is caused by your configuration of userChrome.css or by the active theme.

Is it possible to post a screenshot of how the default setup looks without modifying userChrome.css?

[DavyRay]

This is what it looks like with your addon removed.

I also have this code in the my_userChrome.css file:

.tab-background { -moz-box-direction: reverse } /* to place color bar on multipcontainer on top instead of bottom */

/* to remove limitation of sidebar size */

#sidebar {
max-width: none !important;
min-width: 0px !important;
}

#tabbrowser-tabs .tab-context-line {display: none;} /* 2px container line */

#tabbrowser-tabs .tab-background {border-bottom: solid 2px var(--identity-icon-color) !important;} /* 2px highlight line for active tab */

#TabsToolbar .tabbrowser-tab {
padding-inline: 1px !important;
}

****** EDIT ******

I removed my_userChrome.css ..... all that did was make the tabs less tall and I lost the multi-account container colour lines (the blue line in the screenshots.

So the gray bars and narrowness is not from there. Perhaps one of the options I enabled. So far as I know, I made the same changes that v4.05 had. Maybe I missed something, but not sure which option did this.

I am using LiteFox 2.0 theme.

[Aris-t2]

I meant a screenshot of the unmodified full setup of this projects files (without any other code).

I've tested a few tab appearance settings and themes with this result:

[DavyRay]

The above screen shot is your default project with no changes.

The above screenshot is FF default, with an empty Chrome folder.

The above screenshot is what I had with v4.05 installed.

[Aris-t2]

Looks like you used these in 4.0.5:
tabs_below_navigation_toolbar.css
classic_squared_tabs_australized.css
tabs_container_indicator_for_classic_squared_tabs.css

And you might have changed tab height in general_variables.css too.

[DavyRay]

i dont recall changing anything other than the my_userchrome.css ....

When I install a new version this is what I do:

• rename old Chrome folder to Chrome.405 with the version number
• Create new Chrome folder
• unzip latest version into that folder.
• copy my_userchrome.css from old folder to new
• open both userchrome.css from the old version and the current, and place the windows side by side
• manually page down each file one page at a time and compare so I can enable or disable settings so the new matches the old

I never went into general_variables. I would not even know what to touch. I would have sent a message here before thinking about changing anything. I know nothing about programming, so I would be very surprised if I would go in there to poke around. I am too afraid I'd break something and not know how to fix it.

I would be quite happy to have the tabs as big as they are if I do not have your script running. As soon as I install your script, even without me changing anything, the tab height shrinks and it goes dark.

I have:

@import "./css/tabs/classic_squared_tabs.css"; //
@import "./css/tabs/tabs_below_navigation_toolbar.css"; //

tabs_container_indicator_for_classic_squared_tabs.css --- Not enabled

The only option I have enabled in the other tab settings: @import "./css/tabs/tab_icon_colors.css"; /**/

[m4n8tpr4]

Here is an issue which might or might not be related.

I use tabs above the navigation toolbar, classic squared tabs. On my home computer and notebook, tab titles look like this, with the text vertically aligned in the middle:

However, on my work computer, it now looks like this, with the text aligned to the bottom:

This is quite perplexing, because all settings should be the same: the latest version of Windows 10 and FF v100.0 64-bit on all three machines, CustomCSS v4.1.7 is exactly the same (after customization, I copied the chrome library on my home computer into the chrome library on the other two machines), extensions are the same, toolbar is set up to look the same, all about:config settings containing the terms "proton" or "tabs" are identical, toolkit.legacyUserProfileCustomizations.stylesheets and browser.compactmode.show are set to "true" and browser.urlbar.update1 to "false".

I seem to remember that I had a similar issue after an earlier FF update maybe a year ago, and even wrote about it here; unfortunately, I couldn't find it in the archives, nor remember what was the solution. Any ideas? Maybe I overlooked another about:config setting?

[Aris-t2]

If both Firefox setups and versions are identical, this issue might by caused by a toolbar button on tabs toolbar.
Anything there to remove besides the two items before first tab?

[m4n8tpr4]

Belated reply but I was (and still am) travelling. This also means that now I can only check things on the problem computer (which is a laptop).

I checked, there is nothing to remove on the right side which I didn't include in the clip. However, you're still on to something, because if I remove both the new window & new private window icons from the tab row, vertical alignment returns to normal.

Meanwhile, I noticed another issue: menu items are also widely spaced. Here is both this issue and the previous:

I'll have to check how this looks on my home computers over the weekend.

Seeing your replies to DavyRay, I also experimented with tab height, but nothing worked. I have classic squared tabs, but whether I change classic_squared_tabs_tab_height or tab-min-height in general_variables.css or classic_squared_tabs_tab_height in classic_squared_tabs.css itself, or add your code to my_userContent.css, tab height remains the same.

[Aris-t2]

Any news regarding this issue?

[DavyRay]

How is it when I install your script, with no changes (default settings) the change is so drastic? the tabs go dark on me and they squish down.

Ultimately, what I want is the tabs to be higher. Either same height as if I had nothing in the Chrome directory, or maybe a little smaller. with my v4.05 it was perfect. So I am not sure what I missed to make it go dark, but the fact that it did that even without me making any changes has me curious.

[Aris-t2]

There might be a case with lw-themes and Firefox 100+ I did not catch yet. Test the newest 4.1.8.v3. It again fixes a case, where tabs might use a wrong color with "some" lw-themes.

[DavyRay]

As far as I can tell nothing changed. Even with v3 installed, and no other changes done on my part, the tabs are still not as tall as they should be, or are by default without anything in the Chrome folder. Only the active tab is light, while all the others are dark.

I then activated my preferences, but that did not make any difference.

Is there a way to simply make the tabs taller?

[Aris-t2]

You can change tab height inside /config/general_variables.css or by adding code to your userChrome.css / my_userChrome.css:

:root {
  --tab-min-height: 32px !important;
  --classic_squared_tabs_tab_height: 32px !important;
}

[DavyRay]

i added the code you gave me to my_userChrome.css ... now the tab height is back to normal.

[Aris-t2]

@DavyRay

I still can not reproduce your issue.
Post a link to the theme you are using and also upload your userChrome.css here.

[DavyRay]

Link to my theme: https://addons.mozilla.org/en-CA/firefox/addon/litefox/

in the attachment, I included 2 chrome files the one with 418 is the one with v3 I used ( I tried to match 405 and 418 as best I could. Some of the options are not physically located in the same place)... and the 405 is your version v4.05. it works fine. The colours are a little off in FF100, but it is better than v4.18. I only wanted to change it because the colours in the addons and theme menu are off.

But If you install my theme, and just add your Chrome file in its default state, you can tell the tab height and dark tabs.

Chrome.zip

[Aris-t2]

I suggest to disable classic_squared_tabs.css and switch to classic_squared_tabs_australized.css, default_tabs_enhanced.css or default_tabs_photon.css. They might be closer to what you have had before.

Not sure why the ui differs that much now, but it might be related to latest lw-theme changes by Mozilla.

[DavyRay]

That worked. Thanks!