1491790 - Themes cannot read valid SVG or GIF Base64 data URI

Status: REOPENED

(WebExtensions :: Themes, enhancement, P5)

Description

[John Gruen [:jgruen]]

I noticed this while working on Firefox Color in Test Pilot. 

The theme API allows the use of base 64 data URIs for PNG, JPG, and GIF, but not for SVGs.

This is a valid extension:
https://gist.github.com/johngruen/ce6420ec48c4cbbd3a6b15c81d233ffc

And this is invalid
https://gist.github.com/johngruen/81003c4502792f00d736915efa861b95

Both Base64 data URIs are valid, but the SVG causes the webextension to be uninstallable.

Comment 1

[John Gruen [:jgruen]]

Note, if trying to pass in an SVG via the API i get an error like this: 

```
Type error for parameter details (Error processing images.additional_backgrounds.0: SyntaxError: String "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJPCEtLXBob3RvbiBjb2xvcjogZ3JlZW4tNTAtLT4NCgkuc3Qwe2ZpbGw6IzMwZTYwYjt9DQo8L3N0eWxlPg0KPGcgaWQ9IlhNTElEXzJfIj4NCgk8ZyBpZD0iWE1MSURfMTBfIj4NCgkJPHBhdGggaWQ9IlhNTElEXzE3NF8iIGNsYXNzPSJzdDAiIGQ9Ik0xMi45LDIuOFYxLjdoMC44YzAuNSwwLDAuOS0wLjQsMC45LTAuOWMwLTAuNS0wLjQtMC45LTAuOS0wLjloLTMuMkM5LjksMCw5LjUsMC40LDkuNSwwLjkNCgkJCXMwLjQsMC45LDAuOSwwLjloMC44djEuMWMtNS41LDAuNC05LjgsNS05L background.js:1
	makeError resource://gre/modules/Schemas.jsm:450:14
	throwError resource://gre/modules/Schemas.jsm:2196:11
	checkParameters/fixedArgs< resource://gre/modules/Schemas.jsm:2264:9
	map self-hosted:286:17
	checkParameters resource://gre/modules/Schemas.jsm:2257:17
	stub resource://gre/modules/Schemas.jsm:2340:23
	O moz-extension://8c630b93-f77d-5b4b-bc42-85178bbe141e/background.js:1:20993
	setTheme moz-extension://8c630b93-f77d-5b4b-bc42-85178bbe141e/background.js:1:18472
	b/< moz-extension://8c630b93-f77d-5b4b-bc42-85178bbe141e/background.js:1:18253
	apply self-hosted:4556:5
	applySafeWithoutClone resource://gre/modules/ExtensionCommon.jsm:527:16
	addListener/asyncWithoutClone/< resource://gre/modules/ExtensionCommon.jsm:2226:20
```

Comment 2

[John Gruen [:jgruen]]

Expanding this to include GIFs since these error as well.

Type error for parameter details (Error processing images.additional_backgrounds.0: SyntaxError: String "data:image/gif;base64,R0lGODlhAAOwAeZ/APzTovmqTP7t2vvMk/vEgvq8cvmyXPq1YvmtUvq5bPvBfPeSGv/9+vimQv/+/feOEf3myveQFPzRnPieMv/69P/48feRFvvJjfeWIPeSGP716f3euf/27P7x4f3gvfzYrfeOEP7p0fzWqPiaKv3hwPihOf7y5P7v3f3ozfvOmPzasfiZKP3ctveMDP3kxveYJfigNvicLv7s1v7q1PvGiPeUG//37viYJfeVH/eWIv705vijPPikP/eQEvq/d/moRveTG/3iw/eOFP/79/mvV/ibLP/7+Pq3Z/eQGP/28PzbtPq4ZviVHveSFvzcsveUGf7u4P7y6PvIhP7m0f3kwf7s0f3ewPeMEP704f3WsvmmSPzXpfzPo/ihO/3oxveWH/zHkv/78vifNPikOv/y7PibKvu+gPeSFP/7/PaME/q3XfeQGvq3cP/35veQFfiXKfqvYPmoP/mvTveWJ/eVHPeYIPilQPePE/eUFvePF/vasPeLEfigMfeUHf///////yH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtb

Comment 3

[Kris Maglione [:kmag]]

Support for data: URLs is there for legacy reasons, to make it easier to port lightweight themes. We don't want to encourage new uses. Images should be stored as files within the XPI, not as data: URLs.

Comment 4

[Les Orchard [:lorchard]]

> Images should be stored as files within the XPI, not as data: URLs.

In our particular use case for Firefox Color, we use data: URLs to enable users to import images from their local machine to add to the theme they're editing. Since Firefox Color is a hybrid web app with a companion add-on, we use data: URLs to grab images from an HTML file input element.

Is there an alternate way to handle these user-supplied images? (i.e. short of somehow generating an XPI?)

Comment 5

[Les Orchard [:lorchard]]

To elaborate: Firefox Color uses an add-on to accept messages from the Color website to dynamically change the current theme in response to user interactions with a theme editor. We can't really build a static XPI for this.

There is a notion to merge the website into the add-on itself. But I don't think that gets us away from needing data: URLs for accepting images imported by the user.

Comment 6

[Kris Maglione [:kmag]]

OK, I guess passing these dynamically might be a valid use case. But I don't want to support them in static manifests.

Comment 7

[Rob Wu [:robwu]]

The relevant piece of Firefox Color that depends on this is: https://github.com/mozilla/FirefoxColor/blob/9234696db11c5ff228eb87dd4b1e3a3ff4ae2e0b/src/lib/constants.js#L12