[feature-request] Tag certain bugs as NSFW and hide images by default?

[miketaylr]

Often we get reports related to NSFW websites. They can sometimes contain screenshots that are adult-oriented. I wonder if we could add a status-nsfw (or similar, status is probably the wrong prefix), and it would overlay an opaque graphic over any embedded images. You could then click the image to display it, but they would be hidden by default.

(or maybe we have a settings panel somewhere where you opt-in to always see, dunno)

Useful if you're debugging websites and have children around, or are in a public space.

One example is webcompat/web-bugs#2428.

Low priority, but it might be a nice feature to add.

[hallvors]

👍 :)

I don't think this label needs a prefix - it can be simply "nsfw" IMO. Possibly "note-nsfw" but I don't think we will have a group of such labels.

This can be added in a very simple way - so simple we could make it a good-first-patch I think:

1. Add CSS to censor images by default inside body.wc-js-nsfw (or something like that) (where "censor" can be opacity:0.02)
2. Add CSS to show image anyway if it has a "showme" class
3. Add JS to add the wc-js-nsfw classname to BODY if the issue we're loading has a nsfw tag
4. Add JS to add the "showme" class to IMG if it's clicked.

We probably should insert an explanation somewhere saying why the images are hidden.

[miketaylr]

Buzzfeed has an implementation of this: https://www.buzzfeed.com/katienotopoulos/play-23-rounds-of-the-deadliest-game-ever?utm_term=.stpjYylBX#.ttvG7j5Ml

(There's a site bug in Firefox, so open this in Chrome to see it in its full glory.)

[miketaylr]

There's a site bug in Firefox

https://bugzilla.mozilla.org/show_bug.cgi?id=1275069

[miketaylr]

webcompat/web-bugs#2700 is a good example of where this would be useful (hint: it has a nsfw screenshot in the bug report).

[karlcow]

@miketaylr agreed. The choice of colors on this website is disturbing :p

[miketaylr]

hehe

[miketaylr]

So this is like 90% done, but I'm struggling with how to nicely indicate "click to reveal" (because I suck at UI).

[miketaylr]

Let's start with this, then someone with actual skills can improve it:

[hallvors]

Seems superb to me :)

[miketaylr]

Cool, thanks! Just need to write some tests now.

[karlcow]

The way the messaging is done on the site The Big Picture is not bad.
For example: http://archive.boston.com/bigpicture/2008/11/congos_crisis_worsens.html