Add ability to set custom colors

[johngruen]

This issue comes from Discourse:

Just as it says - allow us to pick any color (or, optionally, enter RGB / HEX values directly for a particular color) instead of only using pre-defined colors.

[johngruen]

Would be cool, we could probably use an input type="Color" so long as the element display is somewhat customizable (i have no idea, but I assume we could hack it). Only issue i see is that we're currently declaring color vals in the SDK and WebExtensons bits of the experiment

[JohnLGalt]

Thanks, John. I hadn't had time yet to make it over here to post this as a request, was planning on doing so today - glad to see it made it over here already.

[jonathanKingston]

@johngruen to talk with the design team regarding more colours and the UX for this. Also looking at the different blue on blue tab highlight issues.

[smichel17]

I'd also like more colors (and icons). While custom colors would be nice, just adding a few (4?) more would go a long way in the short term.

[grahamperrin]

From the outset, consistently, I have wanted all containers to be colourless.

In the context of the location bar, that means black text (or whatever colour is used for the URL).

Similarly: icon-free · Issue #771 · mozilla/testpilot-containers

[grahamperrin]

… blue on blue …

Also there are issues with the turquoise, green and purple presets.

With Mozilla's Compact Light, blue, turquoise and green overlines are barely distinguishable from the blue of the tabs:

With Compact Dark, legibility of purple text on the dark background is poor:

[jonathanKingston]

Over line is being dropped for this exact reason.

On Mon, 28 Aug 2017, 17:15 Graham Perrin [email protected] wrote:

… blue on blue …

Also there are issues with the turquoise, green and purple presets.

With Mozilla's Compact Light, blue, turquoise and green overlines are barely distinguishable from the blue of the tabs:

[image: 2017-08-29 00 52 23 compact light] https://user-images.githubusercontent.com/192271/29798786-25434f76-8c57-11e7-8dcf-927203d0ff5d.png

With Compact Dark, legibility of purple text on the dark background is poor:

[image: 2017-08-29 00 53 42 compact dark] https://user-images.githubusercontent.com/192271/29798823-5ef56312-8c57-11e7-94ae-7b13fece3d51.png

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/mozilla/testpilot-containers/issues/391#issuecomment-325517819, or mute the thread https://github.com/notifications/unsubscribe-auth/AAUsLIQ445JGc7-QU6F_FeeXRO_-e2rhks5sc1gngaJpZM4MhDk3 .

[grahamperrin]

Thanks

Over line is being dropped …

Sorry, I missed that. I see overline mentioned in 13 and 708 (" … Position of the url bar indicator will be resolved elsewhere. …"), and I imagined seeing underline in the past, but I don't know where to track the resolution.

---

If purple remains amongst the presets, then I guess that users of Compact Dark might simply avoid it.

[grahamperrin]

… overline … underline … where to track …

Noted with thanks: Apply consistent underline to all firefox versions · Issue #779 · mozilla/testpilot-containers

[grahamperrin]

… Just a little wasted space where previously there was an icon …

– and:

… colourless. …

Here, for example:

I love a minimalist, functional toolbar. Essentials, left to right (ignoring unwanted ⓘ, book and mouse icons):

• a menu icon
• the name of the group
• the address
• the name of the container

– with consistency of colour (black) for the two names, the address and everything else except the padlock icon.

The restraint everywhere except the padlock area increases the likelihood of that one most important area catching the eye if ever there is, for example, a red alert.

Postscript

Snapped Padlocks 1.0.2 includes a faultless example of a red alert that's suitably restrained.

[mirdaki]

Hey all, dropping in to add that some of the current colors can be hard to differentiate for people with color blindness (friend was having trouble when I showed him containers). So either having more colors, custom colors, or colorless ways to differentiate containers would be really helpful on that front.

[grahamperrin]

Accessibility

Repo folks: please, can you create an accessibility label and apply it to (at least) this issue? Thanks.

@mirdaki smart, thanks.

Off-topic from colours, part of what's appropriate is probably impossible with e.g. WebExtensions APIs, so I'll add what's required to Bugzilla@Mozilla – probably next week, when I'll have access to hardware that will allow a good demonstration of a use case.

[grahamperrin]

Accessibility issue: need color universal design · Issue #1037 · mozilla/multi-account-containers

[gomopa]

I'm supporting this. Already opened a feature request for more colours: https://github.com/mozilla/multi-account-containers/issues/1101 but is unanswered

[grahamperrin]

… it seems, that it was deleted

It's linked from the line before my previous comment.

This issue 391 is the earlier of the two.

[grahamperrin]

… to Bugzilla@Mozilla – probably next week, …

Much later (!) than originally planned,

• Mozilla bug (enhancement request) 1440329 - Cohesive presentation of privacy- and security-related information, to the left (container information is abnormally distanced, separate, far right)

– @mirdaki there's yellow text on white background in the first two screenshots. More generally it'll be good for people with an eye (or ear) for accessibility to consider how things might look (or sound) if there's to be greater cohesion.

Colourless

It's possible to manually edit a file – there's an example at https://github.com/mozilla/multi-account-containers/issues/984#issuecomment-348807006 – but (as indicated in the reply to my comment) it can be a bad idea, if not performed with care.

[mirdaki]

@grahamperrin I totally agree the yellow on white is a bad contrast. Even without being color blind I have trouble reading it from a distance. Granted, themes can change the white background so yellow could work sometimes.

In regards to placing the info on the left, I'm not sure how much it would do. I don't feel like most people associate the left side with security/privacy information, because I don't think most people pay attention to that (granted people using containers are probably more advanced and would have that association). Staying on the right may even help them stand out as they wouldn't be competing as heavily with other icons. I could be wrong of course. Doing some user testing is probably the only way to find out for sure.

[stoically]

Since I didn't saw it mentioned here, here's a CSS-only way to change container colors:

---

open about:profiles, click on "open directory" for your active profiles root directory, open or create the chrome folder, create userChrome.css in it, with the content:

[data-identity-color="red"] {
  --identity-tab-color: #000000 !important;
  --identity-icon-color: #000000 !important;
}

Adjust #000000 to your liking. "red" can be any color you can set as container color, so you can overwrite different colors. Restart browser to see the changes.

Pro-Tip: Click the Firefox Menu, Select "Web Developer", Select "Browser Toolbox", Confirm the Dialog with OK. The Element-Picker (Top-Left) can select any Firefox Menu and reveal the underlying CSS that you can overwrite with userChrome.css

Source: https://www.reddit.com/r/unixporn/comments/78m6t1/oc_firefox_dark_theme/

[WimSKW]

@stoically While the CSS hack sort of works, it only changes the color on the container tab itself; it doesn't change the color in the Multi-Account Containers dialog box... It remains a hack, not a solution. Thanks anyway for sharing! (Note to my fellow colorblinds, the 8 pre-defined colors are named: "blue", "turquoise", "green", "yellow", "orange", "red", "pink", "purple".)

[devvythelopper]

Is there a plan on implementing this?

[jamesinc]

+1 for at least more than 8 colours. It would be easy if we could just specify arbitrary colours, but e.g. in my use-case I have 16 different contexts I want to be able to run where each is a pair of related contexts, so ideally I'd setup my tabs with light purple/dark purple, light green/dark green, pink/red, light blue/dark blue, and so on. Hex codes, colour wheel, or even just supporting all of the 147 named colours, anything beats having to manually edit the extensions config files.

[silverwings15]

+1 for customizable colors, would be so very helpful

[Kolobamanacas]

Before I read all the comments, I thought that fully customizable colors is overkill. Anyway somethings definitely should be done, at least adding much more colors. My personal issue is that I'm using dark theme everywhere where it's possible, and all the available colors are too bright. So, yup, it would nice feature to have.

[grahamperrin]

https://github.com/mozilla/multi-account-containers/issues/391#issuecomment-325485077

From the outset, consistently, I have wanted all containers to be colourless.

In the context of the location bar, that means black text (or whatever colour is used for the URL).

▶ Containers Helper

– it's not only for ending colour variations, but it does meet my need.

[weyCC81]

I would also like to have more options. As I understand the concerns of colorblind people, I would suggest adding line-style.

• https://www.w3schools.com/css/css_border.asp
• dotted - Defines a dotted border
• dashed - Defines a dashed border
• solid - Defines a solid border

with 10x colors and 3x styles I would have 30 options instead of 10 ... (I do not really use icon's as I can not see them when the tab is open).

[houdayec]

• Colors too bright when using Dark Mode
• as @weyCC81 said, you should think about colorblind people
• add more colors to palette (predefined is a great start, custom is awesome)

Containers have a lot of potential but it is not prioritized at all, too bad..

[santo998]

It would be useful to just ADD more colors to the containers. i.e.: red, black and blue.

[awilkins]

I'd love this extension to have the ability to set an arbitrary colour for a given tab, since it can already pick from the palette available and set the icon and name.

https://addons.mozilla.org/en-GB/firefox/addon/open-url-in-container/

That would make e.g. scripting it to log into specific AWS accounts in separate containers with a colour generated from hashing the profile name nice and simple.

[BlooDCrescent]

Would be cool to finally see custom colors after 5 years of waiting instead of watching Mozilla VPN ads :)

[luminant]

I just noticed you've removed white color. I only tried to manage a container to check some settings and puuuf, the white color was gone... Like it wouldn't be bad enough for not giving us more colors but you also take away those we are used to. I don't know much of a coding but I can only imagine it must be really hard and time-consuming taken that this issue has been open for 5 years.