Changes in tab spacing in 27.7.0? (and can it be reverted) Topic is solved

[Ozzed]

Hi!

I have noticed that in the latest version for Windows, tabs seem to be spaced further apart, like the "gap" between them seems wider.

It used to look like this:



I like that, but now it looks like this:



Is there any way I can restore the appearance?

Kind regards

Ozzed

[New Tobin Paradigm]

It likely has to do with the proper rendering of border sizes which follow standards of 0-1 being 1 and 1.4 to 1 being 1 and 1.5 to 2.0 being 2.

Look more closely, the gap hasn't changed.. The borders are being.. Finally, properly rendered.

[Moonchild]

This would be because of the change in rounding of border widths, not because the spacing has changed.
I checked on Windows 10 myself and there is no issue; but if you're scaling the UI elements up to 1.5x or larger, the borders will be rounded up now, as they should.

[Ozzed]

This would be because of the change in rounding of border widths, not because the spacing has changed.
I checked on Windows 10 myself and there is no issue; but if you're scaling the UI elements up to 1.5x or larger, the borders will be rounded up now, as they should.

It likely has to do with the proper rendering of border sizes which follow standards of 0-1 being 1 and 1.4 to 1 being 1 and 1.5 to 2.0 being 2.

Look more closely, the gap hasn't changed.. The borders are being.. Finally, properly rendered.

RESOLVED INVALID

OK, so it is an intentional change. To me personally, what I care about is I liked the way it looked before, so being "properly" rendered pr not, is there a way to revert it to the old behavior? My scaling is indeed 125%.

[Moonchild]

You can use userchrome to make tab borders use a smaller base width so they won't round up at your zoom level, e.g. use 0.8px for tab borders.

[Ozzed]

You can use userchrome to make tab borders use a smaller base width so they won't round up at your zoom level, e.g. use 0.8px for tab borders.

Thanks! I have no previous experience with the userChrome.css-file but I created a new one in a new folder called chrome. So.. All I gotta do now is add one line with

tab borders 0.8px

Or am missing something in the syntax?

[Moonchild]

Actually, the thicker borders are a side-effect of the way we handle borders for tabs in the theme that should be addressed.
The border is actually 2 px wide, but only 1 px is visible -- scaling that up to 125% makes it round up a little too soon visually, so we need to tweak the theme a bit there.

You need to create a userChrome.css file (see elsewhere on the forum how to do this) and it should get a block in there to adjust the border width. Your feedback will be appreciated as to the results:

Code: Select all

.tabbrowser-tab,
.tabs-newtab-button {
 border: 1.6px solid !important;
}

[Ozzed]

Actually, the thicker borders are a side-effect of the way we handle borders for tabs in the theme that should be addressed.
The border is actually 2 px wide, but only 1 px is visible -- scaling that up to 125% makes it round up a little too soon visually, so we need to tweak the theme a bit there.

You need to create a userChrome.css file (see elsewhere on the forum how to do this) and it should get a block in there to adjust the border width. Your feedback will be appreciated as to the results:

Code: Select all

.tabbrowser-tab,
.tabs-newtab-button {
 border: 1.6px solid !important;
}

The css-file does seem to work as I'm getting results, but not what I expected. I copied your code snippet into the file (it's the only code in it) and I got the below result.

[Lootyhoof]

This should work:

Code: Select all

.tabbrowser-tab,
.tabs-newtab-button {
 border-width: 1.6px !important;
}

[Ozzed]

This should work:

Code: Select all

.tabbrowser-tab,
.tabs-newtab-button {
 border-width: 1.6px !important;
}

Yeah, I think this is the same as before So... your code snippet produces this result, which is what I was looking for. If there's a difference I really can't spot it.

[Moonchild]

Yeah sorry I shouldn't have included the "solid", that's what caused your border change.

[Ozzed]

Yeah sorry I shouldn't have included the "solid", that's what caused your border change.

Well, without the "solid" it does seem to work the way I want it to. Like it's back the way it was before the update to the newest version.

So if I understand you correctly you're working on a tweak for this, for a future version, and I should keep the css-file for now?

[Moonchild]

Yeah sorry I shouldn't have included the "solid", that's what caused your border change.

Well, without the "solid" it does seem to work the way I want it to. Like it's back the way it was before the update to the newest version.

So if I understand you correctly you're working on a tweak for this, for a future version, and I should keep the css-file for now?

Yup, correct. Issue #1584
Once that's in (next version) you can remove the userchrome workaround again.

[Ozzed]

Yeah sorry I shouldn't have included the "solid", that's what caused your border change.

Well, without the "solid" it does seem to work the way I want it to. Like it's back the way it was before the update to the newest version.

So if I understand you correctly you're working on a tweak for this, for a future version, and I should keep the css-file for now?

Yup, correct. Issue #1584
Once that's in (next version) you can remove the userchrome workaround again.

I have only updated my work computer so far (will update and test the home computer when I come home), but after the update, tabs still feel a bit wider apart than with the user chrome activated. In addition to that, the arrows at the left and right of the tab row now randomly still appear clickable even when the tabs are scrolled to the end (the arrows used to always be grayed out in that condition). No idea if it's a related bug or if I should start a new topic all together.

[Moonchild]

There is no difference with the userChrome activated - the theme uses the exact same values as you tested with.