Chat viewer: iframe sized to content

[benbucksch]

Reproduction

• In mail viewer, top right, switch to "Threaded" view (left button)
• Load a number of HTML emails from various companies

Actual result

• The UI changes: Fonts change, colors change, or size of the panels change, as you click on certain emails.
• This is because the CSS of the email leaks to the UI. Bad.

Expected result

• Nothing in the email content can influence anything outside the rectangle screen space assigned to it.

Cause

• For all other mail views, we use WebView.svelte, which uses Chrome <webview>, which is a better <iframe>. However, iframe and webview are sized by their parents only.
• In the threaded view, we want to show multiple messages, one after the other, and then scroll all messages together. Each message by itself needs to be jailed (which we can do with webview/iframe), and each message needs to be sized to its content, and be no taller than the message content requires. iframe cannot do the latter.
• We need to size WebView based on the content, not the parent.
• I've tried to follow https://stackoverflow.com/a/701521 in the past, but apparently unsuccessfully. I don't remember what the problem was. If this doesn't work, Google "iframe size to content".
• The message content must be jailed into a different security context than the UI (its parent container), which may complicate matters for JS-based solutions. postMessage(message, targetOrigin) might help. Ideally, we wouldn't need JS within the iframe, though.
• Consider speed. We might load dozens of messages or even thousands in a single thread. Constant resizing after load could be a problem.

[jermy-c]

Progress Update

1. Messages are loaded in <webview/> using the Shared/WebView Component
2. The height it sized to to the height of the content except when the content is minimal because there's min-height for the iframe within the . I'm still not sure how to set the min-height for the iframe that is within the webview. The min-height is 126px.

[jermy-c]

183

Known Issues:

• Webview element might be sized wider than max-width
• Very slow performance

Tried:

• document.body.scrollTop/scrollLeft gives an value of 0
• window.postMessage() gives a Origin Policy Error

TODO

• Use events instead of promises
• Improve performance
• Make the webview tag have a max-width of it's parent
• Resizable after load

[benbucksch]

Make the webview tag have a max-width of it's parent

Try to set the max-width at the start, before rendering, i.e. at the same time when we set the content, not in the resize handler.

Normal (non-hvbox-flex-grid) layout works by first determining the width, then the layout including line wraps happens, and then the height is a result of the content height. Without knowing the width, the browser doesn't know where to wrap lines and therefore doesn't know how many text lines there are and therefore cannot know the know the height. That's why the width needs to be set, before the height can be determined.

[benbucksch]

Hey Jeremy, thanks for PR #185 . It makes the sizing work much better. I just merged it. But still disabled for now.

[benbucksch]

Remaining issues that I could see:

• Speed
• There's unnecessary white space at the bottom of each msg.
  • Reproduction: Load test data, open Chat app, click on a person)
  • Screenshot:
• The width does not use the allowed width, but tries to be as small as possible, making the messages unnessarily thin and tall.
  • It also creates unnecessary horizontal scrollbars in some cases.
  • Screenshot: