2044712 - Expose colors and icons to extensions

Status: RESOLVED FIXED

(WebExtensions :: General, enhancement)

Description

[Andrea Marchesini [:baku]]

Currently, there is no exposed way to discover which colors and icons are available for add-ons to use with containers (there is just an MDN page).

This issue proposes exposing the complete list of available container colors and icons through a public API, so that add-ons can reliably use supported options.

Comment 1

[Andrea Marchesini [:baku]]

Attachment: Bug 2044712 - Containers: expose colors and icons to extensions

Comment 2

[Rob Wu [:robwu]]

Depending on the shape of the API, this could also potentially fix bug 1405780.

Although this is a Container feature, I'd like to move this to WebExtensions::General because it is about an external facing extension API, and putting it there would make it easier to follow up with documentation needs. Does that sound good to you?

Comment 3

[Rob Wu [:robwu]]

Adding dev-doc-needed so that this API can be documented.

The API does not introduce a new image format, it just returns a list of objects describing the supported color names and icons.
This bug will therefore not fix bug 1405780.

The note below is merely informative, it should NOT be documented on MDN as part of the public API because its behavior may be subject to change.

The way that the multi-account container extension colorizes their icons right now is through a SVG filter, introduced in https://github.com/mozilla/multi-account-containers/commit/53363865cb722e124f40da9f1d01a499f9fd4732

A fully-self contained example based on that technique is the following, showing a red briefcase (instead of black):

data:text/html,<div style='
width: 32px;
height: 32px;
background-image: url("resource://usercontext-content/briefcase.svg");
fill: red;
filter: url(&apos;data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="fill"><feComposite in="FillPaint" in2="SourceGraphic" operator="in"/></filter></svg>&num;fill&apos;);
'></div>

or even just an <img> instead of a background image:

data:text/html,<img src="resource://usercontext-content/briefcase.svg"
style='fill: red;
filter: url(&apos;data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="fill"><feComposite in="FillPaint" in2="SourceGraphic" operator="in"/></filter></svg>&num;fill&apos;);
'>

I hardcoded resource://usercontext-content/briefcase.svg in the above examples, but with the new API one could just fill in iconUrl and color.
This depends on the ability to specify an additional SVG filter to apply to the existing SVG. In HTML of extension pages that works because we can use HTML, but in browser UI that does not work, hence bug 1405780 remains open.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/3986803a1592
https://hg.mozilla.org/integration/autoland/rev/3002dc848bc0
Containers: expose colors and icons to extensions r=extension-reviewers,robwu

Comment 5

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/3002dc848bc0

Comment 6

[rbloor]

Documentation updates in:

• (BCD) Bug 2044712 Add contextualIdentities.getSupportedColors and contextulIdentities.getSupportedIcons for Firefox 153 #29814
• (content Bug 2044712 methods to get contextual identities icons and colors #44372