Firefox Proton: Center Tab Label

[Yaron10]

Hello,

The following CSS code used to center the tab label prior to Proton.

.tab-label { -moz-box-flex: 1 !important; text-align: center !important; }

Any idea how to achieve that in Proton?

Thank you.

[sean1138]

.tab-label-container.proton{display: grid;  place-items: center;}

works fine for one tab with short text, did the old way make a mess of tabs as seen above my 'test' tab?

[Yaron10]

Thanks for replying. I appreciate it.

I've also played with.tab-label-container.proton. The same mess.

.tab-label { -moz-box-flex: 1 !important; text-align: center !important; } worked properly pre-Proton.
You can disable Proton (in FF 89/90) and test it.

[sean1138]

doesn't mess up multiple tabs open

.tab-label-container.proton{display: grid;  place-items: center;}
.tab-text.tab-label{overflow:hidden;}

[Yaron10]

I've just quickly tested it. It looks great. 👍
Thank you so much.

It requires some fine-tuning.
My system is RTL (Right To Left), Hebrew.
Note the difference in the following links:

https://github.com/notepad-plus-plus/notepad-plus-plus

Proton Disabled

Proton Enabled

https://github.com/black7375/Firefox-UI-Fix

Proton Disabled

Proton Enabled

[sean1138]

removing .proton from the .tab-label-container selector works for both proton and disabled.

.tab-label-container{display: grid;  place-items: center;}
.tab-text.tab-label{overflow:hidden;}

[Yaron10]

This is what I get with Proton enabled.

[Yaron10]

.tab-label-container.proton { display: grid !important;  justify-items: safe center !important; }
.tab-label { overflow: hidden !important; }

Seems to work properly with Proton enabled.
Could you please test it?

Thank you.

[sean1138]

interesting, i was not aware of the safe keyword.
something that's driving me nuts is the tab text will jump when i mouse over it and i have no idea why it doesn't happen on my middle tab as seen in the video. It doesn't happen with proton disabled.
https://files.catbox.moe/qby8g0.mp4
the left tab i set labeldirection="rtl", middle and right tabs are both labeldirection="ltr".

using the safe option it looks like the text only gets centered if it's shorter than the width of the container.

i started using more specific selectors for the tabs on my end because if proton is enabled/disabled firefox has different elements displayed for the tab text. it hasn't helped me figure anything out really but might be noteworthy that firefox does this - it doesn't just remove the .proton class from the vbox element like i initially assumed when proton is disabled.

/*proton tabs*/
vbox.tab-label-container.proton{display: grid; justify-items: safe center;}
/* vbox.tab-label-container.proton{display: grid; place-items: center;} */
vbox.tab-label-container.proton .tab-text.tab-label{overflow:hidden;}
/*proton disabled tabs*/
hbox.tab-label-container{display: grid; place-items: center;}
hbox.tab-label-container .tab-text.tab-label{overflow:hidden;}

i found that when i added this rule

.tab-label-container{display: -moz-box !important;}

above the others and proton is enabled i was getting what looked like duplicate text on the tabs, almost looking like your last screenshot but not quite.

[Yaron10]

interesting, i was not aware of the safe keyword.

I'm not a pro and I wasn't even familiar with grid. :)
After reading your reply, I searched it and was lucky to come across safe center.
You deserve all the credit. Thank you.

using the safe option it looks like the text only gets centered if it's shorter than the width of the container.

This makes sense. 👍

something that's driving me nuts is the tab text will jump when i mouse over it and i have no idea why it doesn't happen on my middle tab as seen in the video. It doesn't happen with proton disabled.

I'm not sure I understand.
I suppose it doesn't happen without any modifications. Can you pinpoint the culprit code?

i found that when i added this rule
.tab-label-container{display: -moz-box !important;}
...

This has happened to me too in the past few days while playing with Proton.

[Yaron10]

the left tab i set labeldirection="rtl", middle and right tabs are both labeldirection="ltr".

Oops, I missed that part. Why should you do that? :)

[sean1138]

the left tab i set labeldirection="rtl", middle and right tabs are both labeldirection="ltr".

Oops, I missed that part. Why should you do that? :)

because you said your system is RTL, so i thought i should try to check that however i could in case it showed something different or weird. the tab text jumping a little bit when i mouseover a tab with centered text shorter than the width of the tab happens for me regardless of rtl or ltr set on the element.

[sean1138]

fixed it so the text doesn't move for me when mouseover a tab with centered text shorter than tab width with proton enabled. The issue was the tab close/X button image was getting wider when moused over to make it a bit easier to click (accessibility issue) so i figure just keep that close/X image the full width even when not moused over.

/*proton tabs center text if shorter than tab width*/
@media (-moz-proton){
  /* vbox.tab-label-container.proton{display: grid; justify-items: safe center;} */
  vbox.tab-label-container.proton{display: grid; place-items: safe center;}
  vbox.tab-label-container.proton .tab-text.tab-label{overflow:hidden;}
  /*keep the close X image the same/full width regardless of hover state so centered text doesn't jump when mouseover tab*/
  .tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-close-button{
    padding-inline-start: 7px !important;
    width: 24px !important;
  }
}
/*proton disabled tabs center text if shorter than tab width*/
hbox.tab-label-container{display: grid; place-items: center;}
hbox.tab-label-container .tab-text.tab-label{overflow:hidden;}

demo:
https://files.catbox.moe/hqhz58.mp4

[Yaron10]

I was about to type the following lines when I was notified of your last post. :)

I should have realized the jumping text is not an off-topic issue but caused by justify-items: safe center;.

I used only those two lines and got the same jumping problem.
Adding one piece of my code at a time, I came to the same conclusion. You need to add:

.tab-close-button
{
	width: unset !important;
	padding-inline-start: 7px !important;
}

Interestingly, you actually get 8px. I'm new to Windows 10 and I've observed (in the past few days playing with Proton) a similar behavior in other FF elements as well.

Well done! Thanks again.

[black7375]

Thank you to everyone who participated in the issue.
I'll add the following code to the wiki.
https://github.com/black7375/Firefox-UI-Fix/wiki/Tips#center-tab-label

.tab-label-container {
  display: grid;
  justify-items: safe center;
}
.tab-text.tab-label{
  overflow:hidden;
}

.tab-label-container:not([textoverflow]) + .tab-close-button { /* for textoverflow's clipped text */
  width: unset !important;
  padding-inline-start:  7px !important;
}

(Tomorrow I will do some more work for compatibility.)

---

@sean1138 You have been a great help in this issue and in #53, so I would like to add it to CREDITS list.
Would you like to fill out information?