Anonymize content and UI for screenshots

[MadLittleMods]

Your use case

What would you like to do?

Anonymize content in Element with placeholder text blocks.

• Text: color block it out
• Images: Just filter: blur(4px); Or could use blurhash representations

Why would you like to do it?

When taking reproduction screenshots, it's pretty cumbersome to edit the DOM in order not to expose any private information. Or even more cumbersome and weird looking if you blur it out after the fact in photoshop.

I want realistic looking screenshots and often bugs occur in private rooms.

Using blur everywhere ruins the context and feel of the app.

How would you like to achieve it?

Here is the code I used for the mockup but it would probably better to customize the styles of some parts of the app to look better. Probably related to our skeleton UI styles already in place.

It would be great if it didn't require any additional markup. But in any case, it should be easily toggled on and off.

JavaScript to create screenshot mockup

function anonymizeContentInNode(node) {
  for (node = node.firstChild; node; node = node.nextSibling) {
    // Don't mangle styles
    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') || node.classList.contains('anonymous-text-space'))) {
      continue;
    }
    
    // Only text nodes
    if (node.nodeType === 3) {
        // No need to touch empty nodes
        if (node.textContent.trim().length === 0) {
          continue;
        }

        const newNodes = [];
        const template = document.createElement('template');
        node.textContent.split(/\s/).map((textPiece) => {
            const html = `<span class="anonymous-text-block">${textPiece}</span><span class="anonymous-text-space"></span>`;
            template.innerHTML = html;
            newNodes.push(...template.content.childNodes);
        });
        node.replaceWith(...newNodes);
    } else {
        anonymizeContentInNode(node);
    }
  }
}

anonymizeContentInNode(document.querySelector('.mx_RoomView_MessageList'));

// Add some CSS styles
document.body.insertAdjacentHTML('beforeend', `
<style>
.anonymous-text-block {
    background-color: currentColor;
    opacity: 0.65;
    border-radius: 4px;
}

.anonymous-text-space:after {
    content: ' ';
}

img {
  filter: blur(4px);
}
</style>
`);

Have you considered any alternatives?

No response

Additional context

Similar to the code syntax minimap styles you would see in a code editor (VSCode, Atom, Sublime):

Or placeholder content before a SPA hydrates with real content.

What are the keywords to find this kind of thing?

Here is what the skeleton UI looks like in Element:

---

• blurhash for text
• blacked-out redacted text
• skeleton UI

[t3chguy]

Duplicate of #9615