MadLittleMods
commented
2 years ago To add some keywords:
- Anonymize content and UI for screenshots
- color block font/text
- Related font:
Flow Circularor Dan Ross's other fonts
- Related font:
- blurhash for text
- blacked-out redacted text (like a CIA document, classified)
- censored text
- code editor minimap styles (VSCode, Atom, Sublime)
- skeleton UI
Screenshot mockup:
https://codepen.io/MadLittleMods/pen/VwyJEOE
You can also see a video demo of this in action: https://youtu.be/n78tHoCx1es?t=252
JavaScript to create screenshot mockup
```js // Wraps every text node with `span.anonymous-text-block` which can // be styled to make all text into color blocks to anonymize it. function anonymizeContentInNode(node) { // This is just nested here to make it easy to copy-paste a single function const template = document.createElement('template'); function createNodesFromHtml(html) { template.innerHTML = html; return template.content.childNodes; } // Loop through each child in the given node let nextSibling; for (node = node.firstChild; node; node = nextSibling) { // Record this before we potentially replace the node below and it will lose its siblings // and seems to freeze the browser. nextSibling = node.nextSibling; // Don't mangle styles and scripts if (node.tagName && ['style', 'script'].includes(node.tagName.toLowerCase())) { continue; } // Don't anonymize twice if this function is run more than once (while testing). // This is not related to the recursive nature of this function. if (node.classList && node.classList.contains('anonymous-text-block')) { continue; } // Only text nodes if (node.nodeType === 3) { const newNodes = []; // Split the text by whitespace [...node.textContent.matchAll(/(\s*)(\S*)(\s*)/g)].forEach(([_, padStart, text, padEnd]) => { // Ensure the white-space is maintained newNodes.push(...createNodesFromHtml(padStart)); // No need to touch empty nodes if (text.length !== 0) { const html = `${text}`; newNodes.push(...createNodesFromHtml(html)); } // Ensure the white-space is maintained newNodes.push(...createNodesFromHtml(padEnd)); }); // Replace the text node with our wrapped text that we can style with CSS node.replaceWith(...newNodes); } else { // Recursively call for each element anonymizeContentInNode(node); } } } anonymizeContentInNode(document.querySelector('body')); // Add some CSS styles document.body.insertAdjacentHTML('beforeend', ` `); document.body.classList.add('should-anonymize'); ```Right now it’s a general script that runs on any page and replaces all text nodes on the page. But we don’t need to replace all text nodes. The normal strings in the UI aren’t sensitive. We only need to apply this to user-generated content that is sensitive like messages, room names, and things like IP’s and keys in the settings, etc. So this could benefit from some deeper integration in Element itself.
Probably related to the skeleton UI (placeholder content before a SPA hydrates with real content) styles we already have in place:
Another example is the code syntax minimap styles you would see in a code editor (VSCode, Atom, Sublime):
When in this mode, it would also be interesting to add some event_id labels in the corner of each messages for better debugging. Possibly room_id's as well for the room list. That way you can easily correlate the logs to the screenshot.
JokerGermany
A devtools tool to temporarily switch all message text with lorem ipsum (plus generated avatars and display names) so that people can submit anonymised screen captures that don't look like a blurry disaster.