Suggestion: Containers colors not visible during screen sharing

[Zorakie]

Behavior/ "Issue"

When using Containers without the title/menu bar, the color border of the container is on the very top of the screen.
When having a meeting through Teams/Slack/Webex, basically any SW, that draws a border around your screen you are sharing, this container border is completely under the sharing screen border and you have no clue which container the tab actually belongs to.

Expected adjustment

Move the color border to the bottom, color the whole tab or just make other colorization (e.g. chrome SessionBox has colored dots over favicon).

Using regularly updated FF Developers edition with proton design enabled. Containers v7.4.0

Thanks!

[achernyakevich-sc]

There is a good article about how to customize tabs look&feel in new Proton UI of Firefox - https://www.userchrome.org/firefox-89-styling-proton-ui.html

In the constructor form you could change Container color line correspondingly to Move to bottom of tab. I expect it will help to resolve your issue.

As well it could make your tabs looking as you want and not as Proton's creators think you will like. :)

[mrgum]

Thanks for the above which helped solve the problem for me (it was a real pita for pair/team working etc). Here is a summary of the fix I have based on the userChrome tweaks. I've made the bar really thick and it adds 6px to top and bottom of tab (either side of the tab title) which makes the tab height a bit big, on a small screen that might be a problem. If it is you can make the tab-context-line height say 2px or further tweak the height of the tabs (https://www.howtogeek.com/334716/how-to-customize-firefoxs-user-interface-with-userchrome.css/ has loads of links) If time allows, which it rarely does, I'll figure out how to add remove the extra pixels above the text

quick fix to tab height is
:root {
--tab-min-height: 26px !important;
}

Anyway... Before and after

Howto...

find your profile folder by going to burger bar > help > more troubleshooting information (about:support)

go to about:config and enable it being used by setting toolkit.legacyUserProfileCustomizations.stylesheets to True
(legacy - I fear this setting may go away)

add a file chrome/userChrome.css

/*** Proton Tabs Tweaks ***/

/* Adjust tab corner shape, optionally remove space below tabs */

#tabbrowser-tabs {
--user-tab-rounding: 6px;
}

.tab-background {
border-radius: var(--user-tab-rounding) var(--user-tab-rounding) 0px 0px !important;
margin-block: 1px 0 !important;
}
#scrollbutton-up, #scrollbutton-down { /* 6/10/2021 /
border-top-width: 1px !important;
border-bottom-width: 0 !important;
}
/ Container color bar visibility */
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
margin: 0px max(calc(var(--user-tab-rounding) - 3px), 0px) !important;
}

/* Move container color bar to bottom of tab, the very bottom would be 2px
Leave a gap and make the bar really thick
*/

.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
margin-top: calc(var(--tab-min-height) - 6px) !important;
height: 6px !important;
}

[achernyakevich-sc]

@mrgum It looks like you have resolved your issue. :)

There is no reason to keep this issue open, so you could close it.

[mrgum]

@achernyakevich-sc wasn't my issue originally, but close anyway?

[achernyakevich-sc]

@mrgum Sorry, missed that it was not your one. As you are not the author you will not be able to close it.

@Zorakie I hope my advise and detailed CSS provided by @mrgum will help you and you will be able to close this issue. This way you will show other people who will search that the issue has solution as it is already closed. :)

[Zorakie]

Hi all, thank you for the provided help. I confirm that works, but before I close it, I do have one more topic to discuss, and that is the maintenance.

This is an issue, that potentially affects everyone while using any desktop sharing SW that renders border on your screen.
Also, I am not sure, how this will hold in the future. FF brings some design changes. FF bring some changes to the UI rwndering engine, or wahtever. And all people having this customization will have to adjust again.

So I am just putting this here to consider, if this thing should be rather maintained by the development team (or basically, they are already maintaining it, because somebody had to design it this way, so it is rather just a design change, but global).

[mrgum]

I worry that the setting toolkit.legacyUserProfileCustomizations.stylesheets that's required to use userChrome may go away, but I guess that's just something to keep an eye on?

Maybe we should raise an issue with firefox calling for the default position of the tab-context-line to be the bottom? Then close this?

[achernyakevich-sc]

@Zorakie probably some details about Firefox life-cycle would help you to understand. I will bring some below:

• in Firefox earlier the Photon UI system was used. This system described how Firefox UI looks like and how it could be customized (in add-ons or by theme designers).
• since version 89 the Proton (see difference between second symbols h and r) UI system was introduced. It provides new faster engine, some visual effects, new default location of buttons, etc. In later versions Proton was pushed as default. In later versions Photon was removed completely. This is quite natural life-cycle for deprecation and replacement.
• MAC add-on developers had implemented changes to match new UI guides and new version has all previous visual effects (like color on tab. etc.) but it become different (like color stripe on top instead of the bottom). All these based on standard styles used in Proton.
• page I referenced describe how tabs look&feel could be customized in scope of Proton UI system. So if default look&feel provided by MAC add-on does not match to your expectations you could customize it.
• Proton will be support for quite long time. So as you used customization based on it then you could expect it will work until Proton will be deprecated and removed completely. As it will be deprecated then new UI system will be introduced that will have own guidelines, rules and customization ways.
• it looks it will be for quite long time so you would do not worry about maintenance. :)

[achernyakevich-sc]

I worry that the setting toolkit.legacyUserProfileCustomizations.stylesheets that's required to use userChrome may go away, but I guess that's just something to keep an eye on?

This was turned off by default since version sixty something. Main reason was to do not search it by default and this way improve performance of Firefox start. As Proton is assuming possibility to be customized through this mechanism I would expect it will not be removed before something replacing Proton will be introduced. :)

Maybe we should raise an issue with firefox calling for the default position of the tab-context-line to be the bottom? Then close this?

Yes. You can raise but it is obviously not a bug but look&feel improvement request that could be pushed to the special discussion about improvement and features request that this repo has. Or you could even start the new one related to UI aspects.

[dannycolin]

This is an issue in Firefox itself. See https://bugzilla.mozilla.org/show_bug.cgi?id=1806732