#222: Added HTML previews to profiler

kiler129 commented 6 years ago

After couple of attempts I made the previews, which I believe are easy to use and actually help.

General look & feel

Fo the simplest e-mail the preview looks like that:

The preview also works properly with normal-sized e-mails: big-mail The preview supports main body & alternative parts. I tested it with HTML up to 6MB, which by itself is painful to scroll - no problems whatsoever.

Bonuses

While developing the feature and getting feedback I extended the preview by two small additions:

Hovering over preview shows checkerboard pattern when e-mail body contains no explicit background defined:
Link to open preview in new window and actually test its responsiveness:

Implementation notes

Content is stored in an attribute, since using fake <script type="text/x-preview">...</script> failed if e-mail contained </script> for obvious reasons
- Using data: protocol will be better (since requires no JS), but IE or Edge doesn't support text/html payloads
- Data URI are limited to 2MB in Chrome. Attributes length doesn't seem to be a problem (tested with 6MB raw HTML)
- Base64 encoding will be probably more elegant, but built-in atob() decoding function doesn't support UTF-8 (sic!) and TextDecoder is not supported in IE or Edge.
- Solution was tested with 6MB payload in IE 11, Edge 14/15/16, FF 56 & 38, Chrome 63 & 43, Opera 48 & 29, Safari 11 & 7, Chrome Mobile 62 (Android), Safari Mobile 8.0. Every browser ~~survived~~ rendered the previews properly.
- I'm a backend developer - if I did something stupid let me know ;-)

//Fixes #222

javiereguiluz commented 6 years ago

I appreciate your work here ... but I'm proposing an alternative solution to this in #228. Let the community decide which of the solutions should be merged. Thanks!

fabpot commented 6 years ago

Thanks you both for proposing a fix to the issue. Having 2 proposals makes my life more complex :) I need to choose one implementation. I think I prefer @javiereguiluz's one as it also makes headers better and the code is simpler. Thanks @kiler129 for working on this.

kiler129 commented 6 years ago

@fabpot: Too bad inferior solution, which doesn’t work in some browsers and with bigger payload while creating double scrolling was chosen. I guess it was a waste of time doing something properly instead of half-ass.

But you’re the maintainer so what I can say...

javiereguiluz commented 6 years ago

@kiler129 it's true that your solution based on data attributes has more browser support than my solution based on <iframe src data>. I know that you are frustrated for not having merged your proposal. What if you submit a new PR to do that change (use data instead of src)? If you can't or are angry to do it, I think I can make it myself. Thanks!

symfony / swiftmailer-bundle