Firefox Proton: center tab label

[Yaron10]

Hello,

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

Code: Select all

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

Any idea how to achieve that in Proton?

Thank you.

[morat]

The following entry works after I removed the align="start" attribute in the parent vbox.tab-label-container element.

Code: Select all

.tab-label {
  text-align: center !important;
}

I guess the tweak isn't possible using the userChrome.css file.

Similar thread: http://forums.mozillazine.org/viewtopic ... #p14894394

P.S.

Maybe there is a trick to workaround the align attribute of the xul:vbox tag.

Similar thread: http://forums.mozillazine.org/viewtopic ... #p14815952

[Yaron10]

@morat,

Thanks for replying. I appreciate it.

I haven't modified FF source files since FF 57.
I suppose that removing align="start" from tabbrowser-tab.js is not enough. Can you please elaborate?

[morat]

Sorry, I don't know a solution.

You can remove the align attribute using the Page Inspector tab in the Browser Toolbox utility.

i.e. right click on align="start" in parent vbox.tab-label-container element > Attributes > Remove Attribute "align"

Browser Toolbox
http://developer.mozilla.org/docs/Tools/Browser_Toolbox

Page Inspector - Element popup context menu
http://developer.mozilla.org/docs/Tools ... ntext_menu

[Yaron10]

So apparently it should also work by modifying tabbrowser-tab.js.

What else should I change so that FF reads the new modified file?
Hash? Module?

Thank you.

[morat]

Do you really want to hack the omni.ja file for a style tweak? Seems like too much trouble.

I think the omni.ja files are signed so the modifying hack may not be possible. I know I can't hack a signed extension so I assume I can't hack a signed omni.ja file. That's the whole point of signing.

[Yaron10]

@morat,

Thanks again. I've found a CSS solution. :)

Code: Select all

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

Seems to work properly with Proton enabled.

***

Credit and many thanks to @sean1138 in https://github.com/black7375/Firefox-UI-Fix/issues/71.

[morat]

Very nice. I shared the solution with charscot in the other thread.

[charscot]

Thanks for that worked for me. Many thanks for passing this info on.

[Yaron10]

My pleasure.

[Yaron10]

IMPORTANT.

You need to add:

Code: Select all

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

See the last comments in https://github.com/black7375/Firefox-UI-Fix/issues/71.