Add fingerprinting watermark when requested

[tabatkins]

whatwg/infra#20 suggests Bikeshed auto-handling fingerprinting watermarks. whatwg/whatwg.org#64 is an SVG of the fingerprint icon. Example usage is at https://html.spec.whatwg.org/multipage/webappapis.html#a-plausible-language.

Tentative plan is:

1. Look for elements with class=tracking-vector.
2. Append a link-image with the fingerprint, pointing to some Infra explanation of the concept.
3. If at least one shows up, trigger Bikeshed-specific styling to put it in the margin. Same as other styles, you can turn it off if you have your own.
4. If at least two show up, put the SVG as a defs instead, and make the instances just have a use.
5. Add a "Fingerprint Image" metadata, taking a url, so you can point it to a specific image, instead of the Bikeshed-generated SVG.

[zcorpan]

When using the image inline you need to add these attributes to the <svg>

width="46" height="64" role="img" aria-label="(This is a fingerprinting vector.)"

[zcorpan]

Ping.

[annevk]

@tabatkins ping?

[annevk]

So FWIW, I think we want to slightly change this based on feedback. It's useful to have both "fingerprinting vector" and "tracking vector". The latter being a superset for some cases that are not covered by fingerprinting alone. See whatwg/infra#115 (comment).

[marcoscaceres]

Could this be a general "base.css" thing? w3c/tr-design#162

[annevk]

That could work for W3C documents and should probably be tracked separately.

Also, I don't think we need the complexity for now from my comment above. Doing "tracking vector" alone should be sufficient for the foreseeable future and encompasses both.

[annevk]

@tabatkins ping and thank you!

[tabatkins]

All right, phew, I took two years to do something that was only thirty minutes of actual work. As of f5a6d58 you can now activate the tracking-vector icon automatically.

This isn't documented yet, because I haven't adjusted the default Bikeshed stylesheets to accommodate it yet, but:

• by default, anything with class=tracking-vector will get a tracking-vector icon added as its first child (ideal for positioning into the margin with a position:absolute; left: XXXpx;)
• you can change the class with Fingerprint Class: foo. Passing "none" will turn off the feature entirely.
• by default the image is a local SVG. You can change it to an image of your choice with Fingerprint Image: https://example.com/foo.
• by default the hovertext/alt is the same as what HTML currently uses. You can change it with Fingerprint Title: here's a custom title.

Even without any styling it's not unusable, just a little awkward as the big fingerprint sits at the start of the paragraph.

Before y'all start to use it you'll want to adapt your styles accordingly. You don't store your stylesheet in Bikeshed, so that's up to y'all.

---

Keeping this open so I can remember to finish integrating it into Bikeshed's stylesheet and document it.

[annevk]

Thank you! Some feedback:

• Could you rename various things from "fingerprint" to "tracking vector" so we have a single name for the concept?
• Could you add the link to https://infra.spec.whatwg.org/#privacy as suggested in OP? (This will require Define fingerprinting vector whatwg/infra#115 to be merged.)
• Perhaps this link could have the class=tracking-vector similar to HTML and we have some kind of macro instruction attribute on the parent? That would make it simpler to keep HTML consistent with the rest.

[tabatkins]

I don't know what you mean by the last bullet point.

[annevk]

@tabatkins <div insert-tracking-vector> resulting in <div><a class=tracking-vector ...

[annevk]

Hey @tabatkins, is all clear now?

[tabatkins]

Ah yeah, that's clear enough. Happy to update.

[annevk]

Great, so pretty please update it?

[annevk]

@tabatkins heya, happy new year! Care to make the remaining tweaks?

[tabatkins]

All right, I've tweaked things a bit:

• Everything says "Tracking Vector" now; the metadatas are "Tracking Vector Class", etc.
• Use a tracking-vector boolean attribute on the container element to trigger it; this is removed during processing and won't show up in the output. Tracking Vector Class now controls which class is put on the image, instead (defaulting to class="tracking-vector").
• I'm still not linking to anything, because there's still nothing to link to. Merge that Infra patch and I'll add a link.

[tabatkins]

All fixed!