Consider an option to send a screenshot with rageshakes

[turt2live]

Like the mobile apps

[turt2live]

likely pair this with #9615

cc @MadLittleMods

[MadLittleMods]

For reference, in the anonymized screenshot demo, for the "Submit debug logs" modal mockup, I used html-to-image. I also looked at html2image.

Code to create the screenshot mockup

// Import html-to-image

// Open the "Submit debug logs" modal (rageshake)

(async () => {
  document.querySelector('.mx_RoomView_MessageList').style.removeProperty('height');

  const dataUrl = await htmlToImage.toPng(document.querySelector('body'), {
    filter: (node) => {
      // Hide the noscript warning that Element has
      const isNoScript = node.tagName && node.tagName.toLowerCase() === 'noscript';
      // Hide the rageshake modal itself so we can screenshot what's under it
      const isModal = node.classList && node.classList.contains('mx_Dialog_wrapper');
      return !(isNoScript || isModal);
    }
  });

  var img = new Image();
  img.src = dataUrl;
  img.style.maxWidth = '500px';
  img.style.maxHeight = '300px';
  img.style.objectFit = 'contain';
  img.style.border = '1px solid #000';
  img.style.filter = 'none';
  document.querySelector('.mx_Dialog_content').appendChild(img);
})();