From 9f8fdb2dfbc994e1f3f21bf4a00493dd590b1481 Mon Sep 17 00:00:00 2001
From: the-djmaze <>
Date: Mon, 26 Sep 2022 11:06:42 +0200
Subject: [PATCH] Use HTML details/summary elements for blockquote switcher

---
 dev/Model/Message.js                 | 19 ++++++-------------
 dev/Styles/User/MessageView.less     |  6 +-----
 dev/View/User/MailBox/MessageView.js |  2 +-
 3 files changed, 8 insertions(+), 19 deletions(-)

diff --git a/dev/Model/Message.js b/dev/Model/Message.js
index 5e11db4de..84b715c70 100644
--- a/dev/Model/Message.js
+++ b/dev/Model/Message.js
@@ -496,16 +496,13 @@ export class MessageModel extends AbstractModel {
 
 	initView() {
 		// init BlockquoteSwitcher
-		this.body.querySelectorAll('blockquote:not(.rl-bq-switcher)').forEach(node => {
+		this.body.querySelectorAll('blockquote').forEach(node => {
 			if (node.textContent.trim()) {
-//			if (node.textContent.trim() && !node.parentNode.closest('blockquote')) {
-				node.removeAttribute('style')
 				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'));
+					const el = Element.fromHTML('<details class="sm-bq-switcher"><summary>•••</summary></details>');
+					node.replaceWith(el);
+					el.append(node);
 				}
 			}
 		});
@@ -613,7 +610,6 @@ export class MessageModel extends AbstractModel {
 			let attr = 'data-x-src',
 				src, useProxy = !!SettingsGet('UseLocalProxyForExternalImages');
 			body.querySelectorAll('img[' + attr + ']').forEach(node => {
-				node.loading = 'lazy';
 				src = node.getAttribute(attr);
 				node.src = useProxy ? proxy(src) : src;
 			});
@@ -632,11 +628,8 @@ export class MessageModel extends AbstractModel {
 	bodyAsHTML() {
 		if (this.body) {
 			let clone = this.body.cloneNode(true);
-			clone.querySelectorAll('blockquote.rl-bq-switcher').forEach(
-				node => node.classList.remove('rl-bq-switcher','hidden-bq')
-			);
-			clone.querySelectorAll('.rlBlockquoteSwitcher').forEach(
-				node => node.remove()
+			clone.querySelectorAll('.sm-bq-switcher').forEach(
+				node => node.replaceWith(node.lastElementChild)
 			);
 			return clone.innerHTML;
 		}
diff --git a/dev/Styles/User/MessageView.less b/dev/Styles/User/MessageView.less
index c15b4c03c..3b4f631b4 100644
--- a/dev/Styles/User/MessageView.less
+++ b/dev/Styles/User/MessageView.less
@@ -331,7 +331,7 @@ html.rl-no-preview-pane {
 		border-bottom: 1px solid #ddd;
 	}
 
-	.rlBlockquoteSwitcher {
+	.sm-bq-switcher > summary {
 		border: 1px solid #999;
 		display: block;
 		width: 3em;
@@ -369,10 +369,6 @@ html.rl-no-preview-pane {
 			margin: 0;
 		}
 
-		.rl-bq-switcher.hidden-bq {
-			display: none;
-		}
-
 		&.html {
 
 			img {
diff --git a/dev/View/User/MailBox/MessageView.js b/dev/View/User/MailBox/MessageView.js
index 8f930712d..10f3995b8 100644
--- a/dev/View/User/MailBox/MessageView.js
+++ b/dev/View/User/MailBox/MessageView.js
@@ -394,7 +394,7 @@ export class MailMessageView extends AbstractViewRight {
 		registerShortcut('b', '', [Scope.MessageList, Scope.MessageView], () => {
 			const message = currentMessage();
 			if (message?.body) {
-				message.body.querySelectorAll('.rlBlockquoteSwitcher').forEach(node => node.click());
+				message.body.querySelectorAll('.sm-bq-switcher > summary').forEach(node => node.click());
 				return false;
 			}
 		});