1325057 - Contextual identities: Allow custom colors (container tabs)

Status: NEW

(Firefox :: Tabbed Browser, enhancement)

Description

[Patrick Westerhoff]

I’m really happy with how contextual identities are evolving and I’m currently trying to change my browsing workflow to embrace them completely, creating many specific custom identities (it’s so good that we can do that now).

However, there is the issue that the available eight colors simply do not work for me. My plan is to go beyond just eight identities and even if I didn’t, I would like to have different colors to be able to identify the container types better.

I already tried using the new WebExtensions API introduced with #1322856 to change my identities to use the colors I like. And it somewhat works: Setting custom (hex code) colors works, and retrieving the identities again also shows that they are stored correctly. But it seems that all UIs for container tabs simply do not support custom colors but just default to black.

So I would appreciate if the UIs could be amended to support custom colors instead of the fixed set of eight colors. Even if this is limited just to the API and not exposed using the standard customization dialog, this would already be very helpful.

(Ideally, this would also include custom icons, but I can see that being a bit more difficult, so I’m fine with the standard set for now.)

Comment 1

[:Gijs (he/him)]

baku, off-hand I don't know why this wouldn't already work. Do you?

Comment 2

[Patrick Westerhoff]

If it helps, this is the code I’m using to update the color:

    let cis = await browser.contextualIdentities.query({ name: 'Facebook' });
    if (cis.length) {
        await browser.contextualIdentities.update(cis[0].cookieStoreId, {
            color: '#FF9999'
        });
    }

I’ve also tried different values like RGBA values and other named HTML color names. It always defaults to black in the “New container tab” popup and the URL bar, and to no color at all above the tabs.

Comment 3

[Jonathan Kingston [:jkt] he/him]

The UX is defined from variables which use the named colours available, this was due to menu items needing a slightly different colour to the ones defined for icons.

This code can be seen here: https://dxr.mozilla.org/mozilla-central/source/browser/components/contextualidentity/content/usercontext.css


We would need to make a change to accept Hex codes as well as the named colours used here.

The colour will be set as the 'data-identity-color' which currently won't match which is what creates the black color which is the default for the SVG's

Comment 4

[:Gijs (he/him)]

(In reply to Jonathan Kingston [:jkt] from comment #3)
> The UX is defined from variables which use the named colours available, this
> was due to menu items needing a slightly different colour to the ones
> defined for icons.
> 
> This code can be seen here:
> https://dxr.mozilla.org/mozilla-central/source/browser/components/
> contextualidentity/content/usercontext.css
> 
> 
> We would need to make a change to accept Hex codes as well as the named
> colours used here.
> 
> The colour will be set as the 'data-identity-color' which currently won't
> match which is what creates the black color which is the default for the
> SVG's

Feels like we could detect either hex and/or rgb(a) schemes and just set the custom property directly?

Comment 5

[Jonathan Kingston [:jkt] he/him]

Yup we can :), it would probably add some scripting overhead which was rejected for perf before of setting the variables properties via inline styles however that might not be an issue now.

Comment 6

[Firefox Bug Husbandry Bot]

Bulk change per https://bugzilla.mozilla.org/show_bug.cgi?id=1401020