1134512 - Support background-image with URLs in styling console

Status: RESOLVED DUPLICATE of bug 1579663

(DevTools :: Console, enhancement, P3)

Description

[Jordan Santell [:jsantell] [@jsantell]]

bug 823097 which added styling support specifically blocks out url references and wondering if we can revisit for cool stuff like:

http://www.clicktorelease.com/tools/augmented-console/v2/

Comment 1

[Brian Grinstead [:bgrins]]

Is this trying to render a data URI or an external resource?

Comment 2

[Jordan Santell [:jsantell] [@jsantell]]

In this case, a canvas rendered to a data URI

Comment 3

[Panos Astithas (he/him) [:past] (please ni?)]

The concerns in bug 823097 were security-related, but rather vague to be honest. I think we can do this if we are careful.

Comment 4

[Brian Grinstead [:bgrins]]

Yeah, we can surely allow data URIs

Comment 5

[Michal Čaplygin [:myf]]

(In reply to Brian Grinstead [:bgrins] from comment #4)

Yeah, we can surely allow data URIs

From what I've just tried in Firefox 77 Data-URIs are allowed already:

console.log('red dot from datauri: %c ', `background: url("data:image/png;base64,iVBORw0KGgo\
AAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAAB\
JRU5ErkJggg==") no-repeat white center; padding: 20px; display: inline-block; border: 2px solid green;`);

↑ This currently works both in Fx and Chrome, so hypothetically you could fetch or generate image and serialize it into base64 datauri before feeding the console, but haven't tried nor seen it working in the demo.

For parity, Chrome supports displaying images "from web", even from third party origins, so ↓ this URL loading works in Chrome (coincidentally, version I tested was v.77):

console.log('image from gravatar.com: %c ', `background: url("https://secure.gravatar.com/avatar/\
70dab6b4ee5773925737dadc06911817?d=mm&size=64") no-repeat white center; padding: 20px; display: inline-block;
border: 2px solid green;`);

Comment 6

[Daniel Veditz [:dveditz]]

This was fixed in bug 1579663 around Firefox 73. I don't know why they didn't dupe that one here since this bug was brought up in comment 1.