754539 - Use a patterned background for transparent images in standalone view

Status: NEW

(Firefox :: Theme, defect)

Description

[Alfred Kayser]

Spin off from 754133:
Use to get a patterned background like in image editors (PSD, Paint.net, etc):
background:-moz-Dialog url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEWgoKClpaUrSK7yAAAAAnRSTlNkFG3Yt+YAAAAPSURBVHheY2D4jxXhEgYAfr8P8SM7T18AAAAASUVORK5CYII=);

Comment 1

[Alfred Kayser]

Attachment: Some examples using a patterned background

Comment 2

[Alfred Kayser]

Attachment: Another elephant to test...

Note the effect during a reload when using a slow line...
Other examples to test: 
http://forum.cheatengine.org/files/trollface.large_426.png
http://pirlwww.lpl.arizona.edu/~perry/Messenger/Global_mosaic1.jpg

Comment 3

[u428464]

This mockup illustrates what could also be done : https://people.mozilla.com/~shorlander/files/stand-alone-image/stand-alone-image-01.html

Comment 4

[Virtual_ManPL [:Virtual] 🇵🇱 - (please needinfo? me - so I will see your comment/reply/question/etc.)]

But why not using adaptive background color mentioned in bug #713555 ? Won't it be a best idea for this 'multi-transparent' issue ?

Mockup looks nice :)
But still need user interaction...

Comment 5

[Alfred Kayser]

This bug is about using a patterned background, so that it doesn't require interactin (like in comment #3) or adaptive calculation (where sometime one wants to have a contrast color, or sometimes a better fitting...)

Comment 6

[Alfred Kayser]

Another good example to test the patterned background with:
http://www.livepino.it/stuff/livepino.logo.white.png

(Install Nautipolis to get a patterned background to transparent images).

Comment 7

[Patrick Storz]

Attachment: userContent.css to change some styles defined in TopLevelImageDocument.css

Hi, check out the CSS I attached (it's a quick hack you can put into userContent.css to easily change some of the styles defined in chrome://global/skin/media/TopLevelImageDocument.css

It changes overall style of image pages a bit making it look much better in my opinion.

The clou however is, that images are displayed with white background by default (that simply looks best for most images) but on mouseover on the image itself the background is replaced by a checkeboard-style pattern.

This allows to perfectly observe transparent images (even such unfortunate cases like white text on transparency) while not needing some nasty hacks (like the noisy light gray introduced in bug 793366).

Comment 8

[Patrick Storz]

Attachment: Screenshot with the above CSS applied to userContent.css

This screenshot shows the custom CSS in action: Transparency can be seen perfectly when hovering over the image.

Note the nice and clean appearance (no artificial noise in the background) as well as the slightly brighter background and the subtle box shadow (synchronizing the image page with pages showing the internal video player).

Comment 9

[Patrick Storz]

Attachment: Nicer solution than with userContent.css that gives patterned background

With this tiny little add-on the same effect is achieved as with my previously posted CSS.

Comment 10

[Robin Whittleton]

Dupe of bug #214965 ?

Comment 11

[Patrick Storz]

Bug #214965 has product field set to "Core Graveyard". I assumed that meant basically the other bug was obsolete anyway and should R.I.P.?


Regarding a possible solution:
In the meantime I updated my add-on and it's also hosted on AMO now:
https://addons.mozilla.org/addon/nicermediapages/

So until Firefox provides native support for a patterned background for transparent images, we can use it to achieve what is requested in this bug.

Comment 12

[WfJjrdAr]

(In reply to Alfred Kayser from comment #0)

Use to get a patterned background like in image editors (PSD, Paint.net, etc)

Did I understand your suggestion correctly: display transparent areas of images not in gray (dfdfdf / e2e2e2 / e3e3e3 / e4e4e4 / e5e5e5 / e6e6e6 / e7e7e7), but in a checkered cell, as in Adobe Illustrator and Adobe Photoshop?

Examples

(In reply to Patrick Storz from comment #7)

Attached image Screenshot with the above CSS applied to userContent.css — Details

Can you make based on this css userstyle on userstyles.org or userstyles.world?