Tabs are only color when mouse-over

[galmok]

Before submitting a bug report

• [X] I updated to the latest version of Multi-Account Container and tested if I can reproduce the issue
• [X] I searched for existing reports to see if it hasn't already been reported

Step to reproduce

I have defined a few containers, and while I can assign tabs to them, visually there is no change unless I mouse-over the tab. When I do mouse-over, I see the assigned color at the top of the tab (thin line).

Actual behavior

Visual cue is absent unless mouse-over tab or the tab is selected. Unselected tabs are not marked.

Expected behavior

Visual cue should be visible always and not just with mouse-over or if selected.

Additional informations

It used to work just fine, i.e. clear visual mark of the tab. Then after an update, only a line at the top was visible. Now, after yet another update, the line is only visible on mouse-over or if tab is selected.

Provide a copy of Troubleshooting Information page (optional)

No response

[ngdangtu-vn]

I don't think I have this problem. Visual display for tab containers always 1 line color above the tab:

I have used a clean profile but still not able to reproduce your bug. Could you elaborate on your spec? Mine spec is:

Firefox: 118.0.1 (Linux/Debian family)
Plugin: 8.1.2
- No theme installed
- No Facebook Container installed

[galmok]

Maybe it is VMWare that hides that 1 pixel line. Is it possible to have the whole tab header background colored instead of that single line? It used to be like that and then almost vanished. The (nearly) invisible coloring of the tab header makes the again fairly useless to me as I have to search for three right tab instead of being able to easily see it.

I may have an other add-on that adjusts tab width (to make them narrower of there are many) that may interfere, I am not sure (it is my computer at work).

[ngdangtu-vn]

Could you take a screenshot?

that 1 pixel line

On my 2k display it looks like 2~3px because I can feel rounded at start & end of the line.

Is it possible to have the whole tab header background colored instead of that single line?

I agree with you that it is a bit weak UX for this design. My assume is it was meant to support Firefox theme. If the whole tab background got color (not transparent), the Firefox theme will be likely killed off.

I prefer if possible, we could have a display option for user to decide by themselves.

[galmok]

[dannycolin]

You're using userchrome.css because this isn't what the tabs looks like in Firefox by default?

[galmok]

I believe I use an addon to make the tabs smaller. I might have used userchrome.css but I honestly do not know and where to look.

[dannycolin]

To disable the userChrome.css file:

1. type about:config in the urlbar and press the accept if you see a warning message.
2. search for toolkit.legacyUserProfileCustomizations.stylesheets and set it to false.
3. Then, remove (or rename) the userChrome.css file located inside the chrome folder in your Firefox profile folder.

• Documentation for about:config: https://support.mozilla.org/en-US/kb/about-config-editor-firefox#w_resetting-or-deleting-preferences
• Documentation on how to find your profile folder: https://support.mozilla.org/en-US/kb/profiles-where-firefox-stores-user-data.

[galmok]

This made the thin line visible, but the wasted space is just too much. The tab headers are the same size, but the space is used badly. Where I previously could see the icon and "Et", now I see the icon and half of "E" and it is even faded.

Is it possible to disable the fading and decrease the padding/margin without losing the container line at the top? Or even make the container be fully colored?

[achernyakevich-sc]

@galmok It looks like not an issue of the MAC add-on but add-on that makes tabs smaller. Looks like that add-on developers do not honor container colors.

I would recommend you to raise your issue to that add-on developer and close this one. :)

[galmok]

I have just found out how to live-debug userChrome.css using https://www.reddit.com/r/FirefoxCSS/comments/73dvty/tutorial_how_to_create_and_livedebug_userchromecss/ That is so powerful! I believe I may be able to use userChrome.css to get what I want. :) Thank you for your help.

[galmok]

Well, I tried to make the line higher with this:

.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
    height: 6px !important;
}

and it worked just fine! (normally it is 2px, but 6px is much better for me).

Now I just need to get the tab header separating lines back. But that is not relevant here. :)

[achernyakevich-sc]

@galmok Styling of tabs is out of MAC functionality. So this issue could be closed.

BTW: https://www.userchrome.org/firefox-89-styling-proton-ui.html#tabstyler - I used this to style my tabs like below:

[galmok]

Yes. I'll close it with this comment. When you have 12 windows with 50-300 tabs in each, you appreciate space not rested. I could not use your design because it wastes too much space. I am working on removing padding to get more tab icons and text visible. I don't need it pretty. I need it functional (for my use). ;⁠-⁠)

[dannycolin]

@galmok FYI, there's also https://chat.mozilla.org/#/room/#firefoxcss:mozilla.org. It's a chatroom on Mozilla Matrix server with other userchrome users. You can join it from the link mentioned or from any other Matrix client.