1971095 - Tab Groups color is not the same when collapsed vs expanded

Status: RESOLVED WONTFIX

(Firefox :: Tabbed Browser, enhancement)

Description

[rhialto]

Attachment: Rhi.png

Steps to reproduce:

Create a Group Tab and select the Yellow color.

Actual results:

When Group Tab is expanded the tab color is #F5CC58.
When Group Tab is collapsed, the tab color is #985500.

Expected results:

Just like in Chrome, the color should remain the same.

I'm working on a stats Add-On for Tabs and Group Tabs (https://addons.mozilla.org/en-US/firefox/addon/tabstats/) and I was trying to replicate the same look (color) as when Group Tabs are collapsed and I could not get around this until I found out that unlike Chrome, FireFox change the color depending if a Group Tab is collapsed or expanded.

I was expecting it to be a standard among browsers. If FireFox wants to be different, and I don't have a problem with that, then it would great to also be able to query color() when Group Tab is collapsed so Add-Ons developpers would have more control on how to present Group Tabs.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Firefox::Tabbed Browser' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[rhialto]

Just in case someone looks at my add-on, I just uploaded v1.10 where I added a table with the color values I was looking for and for this, I had to check every color option manually one by one to get the colors used, which I could not find elsewhere. If any change is made to these colors in Firefox, I will need to adjust manually until we can get those values with a query.

Comment 3

[Alin Ilea, Desktop Test Engineering]

Hi,
I will mark this issue as NEW in order for it to get more visibility and waiting for the developer's opinion about it.

Thanks and have a nice day!

Comment 4

[Stephen Thompson [:sthompson]]

:rhialto Cool add-on!

Tab groups have 9 possible colors. For each tab group color, we use three shades of that color for different purposes. See bug 1937799 for similar feedback about how some shades of the "yellow" color look brown to some people. I agree with that feedback, but in some cases we picked very different shades of the same color in order to make sure that the text of the tab group name was always easy to read against the background color of the label.

See https://searchfox.org/mozilla-central/rev/96b60eb2246121c09203eaba74f9b3e8f626f44c/browser/themes/shared/tabbrowser/tabs.css#74-104 and https://searchfox.org/mozilla-central/rev/96b60eb2246121c09203eaba74f9b3e8f626f44c/toolkit/themes/shared/design-system/tokens-shared.css#110-227 for the current definition of the tab group colors in CSS.

I don't think we're likely to change the design pattern where we use different colors to help indicate that a group is expanded or collapsed. I also don't think you can reference the Firefox browser color CSS variables from your add-on in order to try to always match what Firefox does. Your best bet is probably to copy the color values from Firefox and include them in your add-on. https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabGroups/TabGroup has all of the information you would need (color and collapsed) to pick the right colors to use. Here are the CSS rules we use for tab groups in the browser https://searchfox.org/mozilla-central/rev/96b60eb2246121c09203eaba74f9b3e8f626f44c/browser/themes/shared/tabbrowser/tabs.css#1185-1194

Comment 5

[rhialto]

(In reply to Stephen Thompson [:sthompson] from comment #4)

:rhialto Cool add-on!

Thanks for all the infos. I'm pretty limited on advanced CSS. I took a look but could not fully understand. If you've read my add-on description I state I was enjoying programming when I was young and wanted to have a look if I could do something on my own with my basic knowledge and for the colors I ended up doing this after using a color picker tool to gets the colors :

const colorMap = {
   blue: { dark: '#0053CB', light: '#E2F7FF' },
   purple: { dark: '#8627A8', light: '#FFECFF' },
   cyan: { dark: '#007792', light: '#CFFFFF' },
   orange: { dark: '#AE2000', light: '#FFECD8' },
   yellow: { dark: '#985500', light: '#FFF4D0' },
   pink: { dark: '#AD0059', light: '#FFE8F4' },
   green: { dark: '#007700', light: '#E1FFE1' },
   grey: { dark: '#5E6A77', light: '#F2F9FF' },
   red: { dark: '#B20037', light: '#FFE8EA' },
};

I know it's not the place to get help on coding an add-on and since my add-on does what I wanted I'll leave it like this for now. Surely not perect nor ideal and later I may have to fix colors. I simply wanted to point out the differences compared to Chrome so a double-check could be done and you just did that so it's perfect.

I don't if it's me who should mark this as solved and how to do it so feel free to close this ticket. Thanks again!

Comment 6

[Stephen Thompson [:sthompson]]

Good luck with the add-on!