Added toggle in message menu to switch between HTML/Plain content parts (when available)

dev/Model/Message.js

@@ -3,12 +3,15 @@ import ko from 'ko';
 import { MessagePriority } from 'Common/EnumsUser';
 import { i18n } from 'Common/Translator';
 
+import { doc } from 'Common/Globals';
 import { encodeHtml } from 'Common/Html';
 import { isArray, arrayLength, forEachObjectEntry } from 'Common/Utils';
+import { plainToHtml } from 'Common/UtilsUser';
 
 import { serverRequestRaw } from 'Common/Links';
 
 import { FolderUserStore } from 'Stores/User/Folder';
+import { SettingsUserStore } from 'Stores/User/Settings';
 
 import { FileInfo } from 'Common/File';
 import { AttachmentCollectionModel } from 'Model/AttachmentCollection';
@@ -17,7 +20,36 @@ import { AbstractModel } from 'Knoin/AbstractModel';
 
 import PreviewHTML from 'Html/PreviewMessage.html';
 
+import { PgpUserStore } from 'Stores/User/Pgp';
+
 const
+	/*eslint-disable max-len*/
+	url = /(^|[\s\n]|\/?>)(https:\/\/[-A-Z0-9+\u0026\u2019#/%?=()~_|!:,.;]*[-A-Z0-9+\u0026#/%=~()_|])/gi,
+	email = /(^|[\s\n]|\/?>)((?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x21\x23-\x5b\x5d-\x7f]|\\[\x21\x23-\x5b\x5d-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x21-\x5a\x53-\x7f]|\\[\x21\x23-\x5b\x5d-\x7f])+)\]))/gi,
+
+	// Removes background and color
+	// Many e-mails incorrectly only define one, not both
+	// And in dark theme mode this kills the readability
+	removeColors = html => {
+		let l;
+		do {
+			l = html.length;
+			html = html
+				.replace(/(<[^>]+[;"'])\s*background(-[a-z]+)?\s*:[^;"']+/gi, '$1')
+				.replace(/(<[^>]+[;"'])\s*color\s*:[^;"']+/gi, '$1')
+				.replace(/(<[^>]+)\s(bg)?color=("[^"]+"|'[^']+')/gi, '$1');
+		} while (l != html.length)
+		return html;
+	},
+
+	hcont = Element.fromHTML('<div area="hidden" style="position:absolute;left:-5000px"></div>'),
+	getRealHeight = el => {
+		hcont.innerHTML = el.outerHTML;
+		const result = hcont.clientHeight;
+		hcont.innerHTML = '';
+		return result;
+	},
+
 	SignedVerifyStatus = {
 		UnknownPublicKeys: -4,
 		UnknownPrivateKey: -3,
@@ -36,6 +68,8 @@ const
 		});
 	};
 
+doc.body.append(hcont);
+
 export class MessageModel extends AbstractModel {
 	constructor() {
 		super();
@@ -44,6 +78,8 @@ export class MessageModel extends AbstractModel {
 
 		this.addObservables({
 			subject: '',
+			plain: '',
+			html: '',
 			size: 0,
 			spamScore: 0,
 			spamResult: '',
@@ -64,6 +100,7 @@ export class MessageModel extends AbstractModel {
 
 			isHtml: false,
 			hasImages: false,
+			hasExternals: false,
 
 			isPgpSigned: false,
 			isPgpEncrypted: false,
@@ -120,6 +157,8 @@ export class MessageModel extends AbstractModel {
 	clear() {
 		this._reset();
 		this.subject('');
+		this.html('');
+		this.plain('');
 		this.size(0);
 		this.spamScore(0);
 		this.spamResult('');
@@ -139,6 +178,7 @@ export class MessageModel extends AbstractModel {
 
 		this.isHtml(false);
 		this.hasImages(false);
+		this.hasExternals(false);
 		this.attachments(new AttachmentCollectionModel);
 
 		this.isPgpSigned(false);
@@ -361,6 +401,100 @@ export class MessageModel extends AbstractModel {
 		return [toResult, ccResult];
 	}
 
+	viewHtml() {
+		const body = this.body;
+		if (body && this.html()) {
+			let html = this.html().toString()
+				.replace(/font-size:\s*[0-9]px/g, 'font-size:11px')
+				// Strip utm_* tracking
+				.replace(/(\\?|&amp;|&)utm_[a-z]+=[a-z0-9_-]*/si, '$1');
+			if (SettingsUserStore.removeColors()) {
+				html = removeColors(html);
+			}
+
+			body.innerHTML = html;
+
+			body.classList.toggle('html', 1);
+			body.classList.toggle('plain', 0);
+
+			// Drop Microsoft Office style properties
+			const rgbRE = /rgb\((\d+),\s*(\d+),\s*(\d+)\)/g,
+				hex = n => ('0' + parseInt(n).toString(16)).slice(-2);
+			body.querySelectorAll('[style*=mso]').forEach(el =>
+				el.setAttribute('style', el.style.cssText.replace(rgbRE, (m,r,g,b) => '#' + hex(r) + hex(g) + hex(b)))
+			);
+
+			// showInternalImages
+			const findAttachmentByCid = cid => this.attachments().findByCid(cid);
+			body.querySelectorAll('[data-x-src-cid],[data-x-src-location],[data-x-style-cid]').forEach(el => {
+				const data = el.dataset;
+				if (data.xSrcCid) {
+					const attachment = findAttachmentByCid(data.xSrcCid);
+					if (attachment && attachment.download) {
+						el.src = attachment.linkPreview();
+					}
+				} else if (data.xSrcLocation) {
+					const attachment = this.attachments.find(item => data.xSrcLocation === item.contentLocation)
+						|| findAttachmentByCid(data.xSrcLocation);
+					if (attachment && attachment.download) {
+						el.loading = 'lazy';
+						el.src = attachment.linkPreview();
+					}
+				} else if (data.xStyleCid) {
+					const name = data.xStyleCidName,
+						attachment = findAttachmentByCid(data.xStyleCid);
+					if (attachment && attachment.linkPreview && name) {
+						el.setAttribute('style', name + ": url('" + attachment.linkPreview() + "');"
+							+ (el.getAttribute('style') || ''));
+					}
+				}
+			});
+
+			if (SettingsUserStore.showImages()) {
+				this.showExternalImages();
+			}
+
+			this.isHtml(true);
+			this.initView();
+			return true;
+		}
+	}
+
+	viewPlain() {
+		const body = this.body;
+		if (body && this.plain()) {
+			body.classList.toggle('html', 0);
+			body.classList.toggle('plain', 1);
+			body.innerHTML = plainToHtml(this.plain().toString())
+				// Strip utm_* tracking
+				.replace(/(\\?|&amp;|&)utm_[a-z]+=[a-z0-9_-]*/si, '$1')
+				.replace(url, '$1<a href="$2" target="_blank">$2</a>')
+				.replace(email, '$1<a href="mailto:$2">$2</a>');
+
+			this.isHtml(false);
+			this.hasImages(this.hasExternals());
+			this.initView();
+			return true;
+		}
+	}
+
+	initView() {
+		PgpUserStore.initMessageBodyControls(this.body, this);
+
+		// init BlockquoteSwitcher
+		this.body.querySelectorAll('blockquote:not(.rl-bq-switcher)').forEach(node => {
+			if (node.textContent.trim() && !node.parentNode.closest('blockquote')) {
+				let h = node.clientHeight || getRealHeight(node);
+				if (0 === h || 100 < h) {
+					const el = Element.fromHTML('<span class="rlBlockquoteSwitcher">•••</span>');
+					node.classList.add('rl-bq-switcher','hidden-bq');
+					node.before(el);
+					el.addEventListener('click', () => node.classList.toggle('hidden-bq'));
+				}
+			}
+		});
+	}
+
 	/**
 	 * @param {boolean=} print = false
 	 */
@@ -406,12 +540,16 @@ export class MessageModel extends AbstractModel {
 	 * @returns {MessageModel}
 	 */
 	populateByMessageListItem(message) {
+		this.clear();
+
 		if (message) {
 			this.folder = message.folder;
 			this.uid = message.uid;
 			this.hash = message.hash;
 			this.requestHash = message.requestHash;
 			this.subject(message.subject());
+			this.plain(message.plain());
+			this.html(message.html());
 
 			this.size(message.size());
 			this.spamScore(message.spamScore());
@@ -421,6 +559,7 @@ export class MessageModel extends AbstractModel {
 			this.dateTimeStampInUTC(message.dateTimeStampInUTC());
 			this.priority(message.priority());
 
+			this.hasExternals(message.hasExternals());
 			this.externalProxy = message.externalProxy;
 
 			this.emails = message.emails;
@@ -441,16 +580,7 @@ export class MessageModel extends AbstractModel {
 			this.checked(message.checked());
 			this.hasAttachments(message.hasAttachments());
 			this.attachments(message.attachments());
-		}
 
-		this.body = null;
-
-		this.draftInfo = [];
-		this.messageId = '';
-		this.inReplyTo = '';
-		this.references = '';
-
-		if (message) {
 			this.threads(message.threads());
 		}
 
@@ -460,11 +590,12 @@ export class MessageModel extends AbstractModel {
 	}
 
 	showExternalImages() {
-		if (this.body && this.hasImages()) {
+		const body = this.body;
+		if (body && this.hasImages()) {
 			this.hasImages(false);
-			this.body.rlHasImages = false;
+			body.rlHasImages = false;
 
-			let body = this.body, attr = this.externalProxy ? 'data-x-additional-src' : 'data-x-src';
+			let attr = this.externalProxy ? 'data-x-additional-src' : 'data-x-src';
 			body.querySelectorAll('[' + attr + ']').forEach(node => {
 				if (node.matches('img')) {
 					node.loading = 'lazy';
@@ -481,46 +612,6 @@ export class MessageModel extends AbstractModel {
 		}
 	}
 
-	showInternalImages() {
-		const body = this.body;
-		if (body && !body.rlInitInternalImages) {
-			const findAttachmentByCid = cid => this.attachments().findByCid(cid);
-
-			body.rlInitInternalImages = true;
-
-			body.querySelectorAll('[data-x-src-cid],[data-x-src-location],[data-x-style-cid]').forEach(el => {
-				const data = el.dataset;
-				if (data.xSrcCid) {
-					const attachment = findAttachmentByCid(data.xSrcCid);
-					if (attachment && attachment.download) {
-						el.src = attachment.linkPreview();
-					}
-				} else if (data.xSrcLocation) {
-					const attachment = this.attachments.find(item => data.xSrcLocation === item.contentLocation)
-						|| findAttachmentByCid(data.xSrcLocation);
-					if (attachment && attachment.download) {
-						el.loading = 'lazy';
-						el.src = attachment.linkPreview();
-					}
-				} else if (data.xStyleCid) {
-					const name = data.xStyleCidName,
-						attachment = findAttachmentByCid(data.xStyleCid);
-					if (attachment && attachment.linkPreview && name) {
-						el.setAttribute('style', name + ": url('" + attachment.linkPreview() + "');"
-							+ (el.getAttribute('style') || ''));
-					}
-				}
-			});
-		}
-	}
-
-	fetchDataFromDom() {
-		if (this.body) {
-			this.isHtml(!!this.body.rlIsHtml);
-			this.hasImages(!!this.body.rlHasImages);
-		}
-	}
-
 	/**
 	 * @returns {string}
 	 */

dev/Stores/User/Message.js

@@ -3,9 +3,8 @@ import { koComputable } from 'External/ko';
 
 import { Scope, Notification } from 'Common/Enums';
 import { MessageSetAction } from 'Common/EnumsUser';
-import { doc, $htmlCL, elementById } from 'Common/Globals';
+import { $htmlCL, elementById } from 'Common/Globals';
 import { arrayLength, pInt, pString, addObservablesTo, addComputablesTo, addSubscribablesTo } from 'Common/Utils';
-import { plainToHtml } from 'Common/UtilsUser';
 
 import {
 	getFolderInboxName,
@@ -28,47 +27,16 @@ import { MessageCollectionModel } from 'Model/MessageCollection';
 import { AppUserStore } from 'Stores/User/App';
 import { AccountUserStore } from 'Stores/User/Account';
 import { FolderUserStore } from 'Stores/User/Folder';
-import { PgpUserStore } from 'Stores/User/Pgp';
 import { SettingsUserStore } from 'Stores/User/Settings';
 import { NotificationUserStore } from 'Stores/User/Notification';
 
 //import Remote from 'Remote/User/Fetch'; Circular dependency
 
 const
-	hcont = Element.fromHTML('<div area="hidden" style="position:absolute;left:-5000px"></div>'),
-	getRealHeight = el => {
-		hcont.innerHTML = el.outerHTML;
-		const result = hcont.clientHeight;
-		hcont.innerHTML = '';
-		return result;
-	},
-	/*eslint-disable max-len*/
-	url = /(^|[\s\n]|\/?>)(https:\/\/[-A-Z0-9+\u0026\u2019#/%?=()~_|!:,.;]*[-A-Z0-9+\u0026#/%=~()_|])/gi,
-	email = /(^|[\s\n]|\/?>)((?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x21\x23-\x5b\x5d-\x7f]|\\[\x21\x23-\x5b\x5d-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x21-\x5a\x53-\x7f]|\\[\x21\x23-\x5b\x5d-\x7f])+)\]))/gi,
-	findEmailAndLinks = html => html
-		.replace(url, '$1<a href="$2" target="_blank">$2</a>')
-		.replace(email, '$1<a href="mailto:$2">$2</a>'),
-	isChecked = item => item.checked(),
-
-	// Removes background and color
-	// Many e-mails incorrectly only define one, not both
-	// And in dark theme mode this kills the readability
-	removeColors = html => {
-		let l;
-		do {
-			l = html.length;
-			html = html
-				.replace(/(<[^>]+[;"'])\s*background(-[a-z]+)?\s*:[^;"']+/gi, '$1')
-				.replace(/(<[^>]+[;"'])\s*color\s*:[^;"']+/gi, '$1')
-				.replace(/(<[^>]+)\s(bg)?color=("[^"]+"|'[^']+')/gi, '$1');
-		} while (l != html.length)
-		return html;
-	};
+	isChecked = item => item.checked();
 
 let MessageSeenTimer;
 
-doc.body.append(hcont);
-
 export const MessageUserStore = new class {
 	constructor() {
 		this.staticMessage = new MessageModel();
@@ -361,8 +329,6 @@ export const MessageUserStore = new class {
 	setMessage(data, cached, oMessage) {
 		let isNew = false,
 			json = data && data.Result,
-			messagesDom = this.messagesBodiesDom(),
-			selectedMessage = this.selectorMessageSelected(),
 			message = oMessage || this.message();
 
 		if (
@@ -371,9 +337,10 @@ export const MessageUserStore = new class {
 			message &&
 			message.folder === json.Folder
 		) {
-			const threads = message.threads();
-			if (message.uid != json.Uid && threads.includes(json.Uid)) {
-				message = oMessage ? null : MessageModel.reviveFromJson(json);
+			const threads = message.threads(),
+				messagesDom = this.messagesBodiesDom();
+			if (!oMessage && message.uid != json.Uid && threads.includes(json.Uid)) {
+				message = MessageModel.reviveFromJson(json);
 				if (message) {
 					message.threads(threads);
 					MessageFlagsCache.initMessage(message);
@@ -392,77 +359,31 @@ export const MessageUserStore = new class {
 					delete json.Flags;
 				}
 */
-				message.revivePropertiesFromJson(json);
+				isNew || message.revivePropertiesFromJson(json);
 				addRequestedMessage(message.folder, message.uid);
-
 				if (messagesDom) {
 					let id = 'rl-msg-' + message.hash.replace(/[^a-zA-Z0-9]/g, ''),
 						body = elementById(id);
 					if (body) {
 						message.body = body;
-						message.fetchDataFromDom();
+						message.isHtml(body.classList.contains('html'));
+						message.hasImages(body.rlHasImages);
 					} else {
-						let isHtml = (SettingsUserStore.viewHTML() || !json.Plain) && !!json.Html,
-							resultHtml = '';
-						if (isHtml) {
-							resultHtml = json.Html.toString().replace(/font-size:\s*[0-9]px/g,'font-size:11px');
-							if (SettingsUserStore.removeColors()) {
-								resultHtml = removeColors(resultHtml);
-							}
-						} else if (json.Plain) {
-							resultHtml = findEmailAndLinks(plainToHtml(json.Plain.toString()));
-						}
-
-						// Strip utm_* tracking
-						resultHtml = resultHtml.replace(/(\\?|&amp;|&)utm_[a-z]+=[a-z0-9_-]*/si, '$1');
-
 						body = Element.fromHTML('<div id="' + id + '" hidden="" class="b-text-part '
-							+ (isHtml ? 'html' : 'plain')
 							+ (message.isPgpSigned() ? ' openpgp-signed' : '')
 							+ (message.isPgpEncrypted() ? ' openpgp-encrypted' : '')
 							+ '">'
-							+ resultHtml
 							+ '</div>');
 
-						if (isHtml) {
-							// Drop Microsoft Office style properties
-							const rgbRE = /rgb\((\d+),\s*(\d+),\s*(\d+)\)/g,
-								hex = n => ('0' + parseInt(n).toString(16)).slice(-2);
-							body.querySelectorAll('[style*=mso]').forEach(el =>
-								el.setAttribute('style', el.style.cssText.replace(rgbRE, (m,r,g,b) => '#' + hex(r) + hex(g) + hex(b)))
-							);
-						}
-
-						body.rlIsHtml = isHtml;
 						body.rlHasImages = !!json.HasExternals;
+						message.hasImages(body.rlHasImages);
 
 						message.body = body;
-						message.fetchDataFromDom();
-
-						if (json.HasInternals) {
-							message.showInternalImages();
-						}
-
-						if (message.hasImages() && SettingsUserStore.showImages()) {
-							message.showExternalImages();
+						if (!SettingsUserStore.viewHTML() || !message.viewHtml()) {
+							message.viewPlain();
 						}
 
 						this.purgeMessageBodyCache();
-
-						PgpUserStore.initMessageBodyControls(body, message);
-
-						// init BlockquoteSwitcher
-						body.querySelectorAll('blockquote:not(.rl-bq-switcher)').forEach(node => {
-							if (node.textContent.trim() && !node.parentNode.closest('blockquote')) {
-								let h = node.clientHeight || getRealHeight(node);
-								if (0 === h || 100 < h) {
-									const el = Element.fromHTML('<span class="rlBlockquoteSwitcher">•••</span>');
-									node.classList.add('rl-bq-switcher','hidden-bq');
-									node.before(el);
-									el.addEventListener('click', () => node.classList.toggle('hidden-bq'));
-								}
-							}
-						});
 					}
 
 					messagesDom.append(body);
@@ -483,17 +404,17 @@ export const MessageUserStore = new class {
 					);
 				}
 
-				if (isNew) {
+				if (message && isNew) {
+					let selectedMessage = this.selectorMessageSelected();
 					if (
 						selectedMessage &&
-						message &&
 						(message.folder !== selectedMessage.folder || message.uid != selectedMessage.uid)
 					) {
 						this.selectorMessageSelected(null);
 						if (1 === this.list.length) {
 							this.selectorMessageFocused(null);
 						}
-					} else if (!selectedMessage && message) {
+					} else if (!selectedMessage) {
 						selectedMessage = this.list.find(
 							subMessage =>
 								subMessage &&

dev/Stores/User/Pgp.js

@@ -343,8 +343,7 @@ export const PgpUserStore = new class {
 		const cl = dom.classList,
 			signed = cl.contains('openpgp-signed'),
 			encrypted = cl.contains('openpgp-encrypted');
-		if ((encrypted || signed) && !dom.phpInited) {
-			dom.phpInited = 1;
+		if (encrypted || signed) {
 			const
 				domText = dom.textContent,
 				recipients = rainLoopMessage ? rainLoopMessage.getEmails(['from', 'to', 'cc']) : [],

snappymail/v/0.0.0/app/localization/ar-SA/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "المزيد من الرسائل",
 		"MENU_HEADERS": "Show message headers",
 		"MENU_VIEW_ORIGINAL": "إظهار المصدر",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": ".eml التنزيل كملف",
 		"MENU_FILTER_SIMILAR": "تصفية رسائل مثل هذه",
 		"MENU_PRINT": "طباعة",

snappymail/v/0.0.0/app/localization/bg-BG/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "Още съобщения",
 		"MENU_HEADERS": "Покажи хедъра на съобщението",
 		"MENU_VIEW_ORIGINAL": "Покажи източника",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": "Изтегли като .eml файл",
 		"MENU_FILTER_SIMILAR": "Филтрирай съобщения като това",
 		"MENU_PRINT": "Принтирай",

snappymail/v/0.0.0/app/localization/cs-CZ/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "Více zpráv",
 		"MENU_HEADERS": "Zobrazit hlavičku zprávy",
 		"MENU_VIEW_ORIGINAL": "Zobrazit zdroj",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": "Stáhnout jako soubor .eml",
 		"MENU_FILTER_SIMILAR": "Filtrovat zprávy jako tato",
 		"MENU_PRINT": "Tisknout",

snappymail/v/0.0.0/app/localization/da-DK/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "Flere meddelelser",
 		"MENU_HEADERS": "Vis meddelelseoplysninger",
 		"MENU_VIEW_ORIGINAL": "Vis kilder",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": "Hent som .eml fil",
 		"MENU_FILTER_SIMILAR": "Find lignende meddelelser",
 		"MENU_PRINT": "Udskriv",

snappymail/v/0.0.0/app/localization/de-DE/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "Mehr Nachrichten",
 		"MENU_HEADERS": "Kopfzeilen anzeigen",
 		"MENU_VIEW_ORIGINAL": "Original anzeigen",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": "Als .eml-Datei herunterladen",
 		"MENU_FILTER_SIMILAR": "Ähnliche Nachrichten",
 		"MENU_PRINT": "Drucken",

snappymail/v/0.0.0/app/localization/el-GR/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "Περισσότερα μηνύματα",
 		"MENU_HEADERS": "Εμφάνιση των επικεφαλίδων του μηνύματος",
 		"MENU_VIEW_ORIGINAL": "Εμφάνιση πηγαίου μηνύματος",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": "Μεταφόρτωση σαν αρχείο .eml",
 		"MENU_FILTER_SIMILAR": "Φιλτράρισμα μηνυμάτων όπως αυτό",
 		"MENU_PRINT": "Εκτύπωση",

snappymail/v/0.0.0/app/localization/en/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "More messages",
 		"MENU_HEADERS": "Show message headers",
 		"MENU_VIEW_ORIGINAL": "Show Source",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": "Download as .eml file",
 		"MENU_FILTER_SIMILAR": "Filter messages like this",
 		"MENU_PRINT": "Print",

snappymail/v/0.0.0/app/localization/es-ES/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "Más mensajes",
 		"MENU_HEADERS": "Mostrar los encabezados del mensaje",
 		"MENU_VIEW_ORIGINAL": "Mostrar original",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": "Descargar como archivo .eml",
 		"MENU_FILTER_SIMILAR": "Filtrar mensajes como este",
 		"MENU_PRINT": "Imprimir",

snappymail/v/0.0.0/app/localization/et-EE/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "Rohkem kirju",
 		"MENU_HEADERS": "Näita kirja päised",
 		"MENU_VIEW_ORIGINAL": "Näita lähteteksti",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": "Laadi alla .eml failina",
 		"MENU_FILTER_SIMILAR": "Filtreeri sarnased kirjad",
 		"MENU_PRINT": "Prindi",

snappymail/v/0.0.0/app/localization/fa-IR/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "پیام‌های بیشتر",
 		"MENU_HEADERS": "نمایش سرصفحه پیام",
 		"MENU_VIEW_ORIGINAL": "نمایش منبع",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": "دریافت با پسوند eml.",
 		"MENU_FILTER_SIMILAR": " فیلتر کردن پیام‌های مشابه",
 		"MENU_PRINT": "چاپ",

snappymail/v/0.0.0/app/localization/fi-FI/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "Lisää viestejä",
 		"MENU_HEADERS": "Näytä viestin tiedot",
 		"MENU_VIEW_ORIGINAL": "Näytä lähdekoodi",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": "Lataa .eml tiedostona",
 		"MENU_FILTER_SIMILAR": "Suodata samankaltaiset",
 		"MENU_PRINT": "Tulosta",

snappymail/v/0.0.0/app/localization/fr-FR/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "Plus de messages",
 		"MENU_HEADERS": "Voir les en-têtes du message",
 		"MENU_VIEW_ORIGINAL": "Voir la source",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": "Télécharger comme fichier .eml",
 		"MENU_FILTER_SIMILAR": "Filtrer les messages similaires",
 		"MENU_PRINT": "Imprimer",

snappymail/v/0.0.0/app/localization/hu-HU/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "További üzenetek",
 		"MENU_HEADERS": "Üzenet fejléc megjelenítése",
 		"MENU_VIEW_ORIGINAL": "Eredeti megjelenítése",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": ".eml fájl letöltés",
 		"MENU_FILTER_SIMILAR": "Hasonló üzenetek szűrése",
 		"MENU_PRINT": "Nyomtatás",

snappymail/v/0.0.0/app/localization/id-ID/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "Pesan lainnya",
 		"MENU_HEADERS": "Tampilkan header pesan",
 		"MENU_VIEW_ORIGINAL": "Tampilkan kode sumber",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": "Unduh sebagai berkas .eml",
 		"MENU_FILTER_SIMILAR": "Saring pesan seperti ini",
 		"MENU_PRINT": "Cetak",

snappymail/v/0.0.0/app/localization/is-IS/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "Fleiri skilaboð",
 		"MENU_HEADERS": "Sýna skilaboðahausa",
 		"MENU_VIEW_ORIGINAL": "Sýna upprunalegt",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": "Sækja sem .eml skrá",
 		"MENU_FILTER_SIMILAR": "Sía skilaboð eins og þessi",
 		"MENU_PRINT": "Prenta",

snappymail/v/0.0.0/app/localization/it-IT/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "Più messaggi",
 		"MENU_HEADERS": "Mostra le intestazioni del messaggio",
 		"MENU_VIEW_ORIGINAL": "Visualizza sorgente",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": "Scarica come file .eml",
 		"MENU_FILTER_SIMILAR": "Mostra messaggi come questo",
 		"MENU_PRINT": "Stampa",

snappymail/v/0.0.0/app/localization/ja-JP/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "さらに読み込む",
 		"MENU_HEADERS": "メールのヘッダーを表示",
 		"MENU_VIEW_ORIGINAL": "メールのソースを表示",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": ".emlファイルでダウンロード",
 		"MENU_FILTER_SIMILAR": "このようなメッセージをフィルタ",
 		"MENU_PRINT": "印刷",

snappymail/v/0.0.0/app/localization/ko-KR/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "다음 메시지",
 		"MENU_HEADERS": "메시지 헤더 보기",
 		"MENU_VIEW_ORIGINAL": "원본 보기",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": ".eml 파일로 다운로드",
 		"MENU_FILTER_SIMILAR": "이런 유형의 메시지에 필터 적용",
 		"MENU_PRINT": "인쇄",

snappymail/v/0.0.0/app/localization/lt-LT/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "Daugiau žinučių",
 		"MENU_HEADERS": "Rodyti pranešimų antraštės",
 		"MENU_VIEW_ORIGINAL": "Rodyti šaltinį",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": "Atsisiųsti .eml failą",
 		"MENU_FILTER_SIMILAR": "Filtruoti laiškus, kaip šis",
 		"MENU_PRINT": "Spausdinti",

snappymail/v/0.0.0/app/localization/lv-LV/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "More messages",
 		"MENU_HEADERS": "Rādīt ziņojuma galveni",
 		"MENU_VIEW_ORIGINAL": "Rādīt orģinālu",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": "Lejuplādēt kā .eml failu",
 		"MENU_FILTER_SIMILAR": "Atfiltrēt šādus ziņojumus",
 		"MENU_PRINT": "Printēt",

snappymail/v/0.0.0/app/localization/nb-NO/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "Flere meldinger",
 		"MENU_HEADERS": "Vis meldingshoder",
 		"MENU_VIEW_ORIGINAL": "Vis original",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": "Last ned som .eml-fil",
 		"MENU_FILTER_SIMILAR": "Filtrer slike meldinger",
 		"MENU_PRINT": "Skriv ut",

snappymail/v/0.0.0/app/localization/nl-NL/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "Meer berichten",
 		"MENU_HEADERS": "Toon berichtkoppen",
 		"MENU_VIEW_ORIGINAL": "Toon origineel",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": "Download als .eml bestand",
 		"MENU_FILTER_SIMILAR": "Filter gelijksoortige berichten",
 		"MENU_PRINT": "Afdrukken",

snappymail/v/0.0.0/app/localization/pl-PL/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "Więcej wiadomości",
 		"MENU_HEADERS": "Pokaż nagłówki wiadomości",
 		"MENU_VIEW_ORIGINAL": "Pokaż źródło",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": "Pobierz jako plik eml",
 		"MENU_FILTER_SIMILAR": "Filtruj podobne wiadomości",
 		"MENU_PRINT": "Drukuj",

snappymail/v/0.0.0/app/localization/pt-BR/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "Mais mensagens",
 		"MENU_HEADERS": "Mostrar cabeçalho das mensagens",
 		"MENU_VIEW_ORIGINAL": "Mostrar original",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": "Baixar como arquivo .eml",
 		"MENU_FILTER_SIMILAR": "Filtrar mensagens como esta",
 		"MENU_PRINT": "Imprimir",

snappymail/v/0.0.0/app/localization/pt-PT/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "Mais mensagens",
 		"MENU_HEADERS": "Mostrar título das mensagens",
 		"MENU_VIEW_ORIGINAL": "Mostrar original",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": "Transferir como ficheiro .eml",
 		"MENU_FILTER_SIMILAR": "Filtrar mensagens semelhantes a esta",
 		"MENU_PRINT": "Imprimir",

snappymail/v/0.0.0/app/localization/ro-RO/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "Mai multe mesaje",
 		"MENU_HEADERS": "Vezi titlurile",
 		"MENU_VIEW_ORIGINAL": "Vezi originalul",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": "Descărcați ca fișier eml",
 		"MENU_FILTER_SIMILAR": "Filtrează similarele",
 		"MENU_PRINT": "Printează",

snappymail/v/0.0.0/app/localization/ru-RU/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "Больше сообщений",
 		"MENU_HEADERS": "Просмотреть заголовки",
 		"MENU_VIEW_ORIGINAL": "Просмотреть оригинал",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": "Скачать как .eml файл",
 		"MENU_FILTER_SIMILAR": "Фильтровать похожие",
 		"MENU_PRINT": "Распечатать",

snappymail/v/0.0.0/app/localization/sk-SK/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "Ďalšie správy",
 		"MENU_HEADERS": "Zobraziť hlavičku správy",
 		"MENU_VIEW_ORIGINAL": "Zobraziť zdroj",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": "Prevziať ako súbor .eml",
 		"MENU_FILTER_SIMILAR": "Filtrovať správy ako táto",
 		"MENU_PRINT": "Tlačiť",

snappymail/v/0.0.0/app/localization/sl-SI/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "Več sporočil",
 		"MENU_HEADERS": "Pokaži glavo sporočila",
 		"MENU_VIEW_ORIGINAL": "Pokaži izvorno",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": "Prenesi kot .eml datoteko",
 		"MENU_FILTER_SIMILAR": "Filtriraj sporočila, kot je to",
 		"MENU_PRINT": "Natisni",

snappymail/v/0.0.0/app/localization/sv-SE/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "Mer meddelanden",
 		"MENU_HEADERS": "Visa meddelanderubriker",
 		"MENU_VIEW_ORIGINAL": "Visa källa",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": "Ladda ner som .eml fil",
 		"MENU_FILTER_SIMILAR": "Filtrera meddelanden som detta",
 		"MENU_PRINT": "Skriv ut",

snappymail/v/0.0.0/app/localization/tr-TR/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "More messages",
 		"MENU_HEADERS": "İleti başlıklarını göster",
 		"MENU_VIEW_ORIGINAL": "Kaynağı görüntüle",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": ".eml dosyası olarak indir",
 		"MENU_FILTER_SIMILAR": "Bunun gibi iletileri filtrele",
 		"MENU_PRINT": "yazdır",

snappymail/v/0.0.0/app/localization/uk-UA/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "ще листи",
 		"MENU_HEADERS": "Подивитися заголовки",
 		"MENU_VIEW_ORIGINAL": "Подивитися оригінал",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": "Завантажити як .eml файл",
 		"MENU_FILTER_SIMILAR": "Фільтрувати схожі",
 		"MENU_PRINT": "Надрукувати",

snappymail/v/0.0.0/app/localization/zh-CN/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "更多信息",
 		"MENU_HEADERS": "显示详细信息",
 		"MENU_VIEW_ORIGINAL": "显示原始内容",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": "作为 .eml 文件下载",
 		"MENU_FILTER_SIMILAR": "筛选类似邮件",
 		"MENU_PRINT": "打印邮件",

snappymail/v/0.0.0/app/localization/zh-TW/user.json

@@ -136,6 +136,8 @@
 		"BUTTON_THREAD_MORE": "More messages",
 		"MENU_HEADERS": "顯示詳細資訊",
 		"MENU_VIEW_ORIGINAL": "顯示原始內容",
+		"HTML_VIEW": "View HTML message",
+		"PLAIN_VIEW": "View plain text message",
 		"MENU_DOWNLOAD_ORIGINAL": "作為 .eml 文件下載",
 		"MENU_FILTER_SIMILAR": "過濾郵件如此",
 		"MENU_PRINT": "列印郵件",

snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html

@@ -135,6 +135,18 @@
 									<span data-i18n="MESSAGE/BUTTON_IN_NEW_WINDOW"></span>
 								</a>
 							</li>
+							<li role="presentation" data-bind="visible: message() && message().html() && !message().isHtml()">
+								<a target="_blank" href="#" tabindex="-1" data-bind="click: function () { message().viewHtml(); }">
+									<i class="fontastic">👁</i>
+									<span data-i18n="MESSAGE/HTML_VIEW"></span>
+								</a>
+							</li>
+							<li role="presentation" data-bind="visible: message() && message().plain() && message().isHtml()">
+								<a target="_blank" href="#" tabindex="-1" data-bind="click: function () { message().viewPlain(); }">
+									<i class="fontastic">👁</i>
+									<span data-i18n="MESSAGE/PLAIN_VIEW"></span>
+								</a>
+							</li>
 							<li class="dividerbar" role="presentation">
 								<a target="_blank" href="#" tabindex="-1" data-bind="attr: { href: viewViewLink }">
 									<i class="icon-file-code"></i>