From 6d792cc08cec87e5ad6a856c5e4c9e593ac974df Mon Sep 17 00:00:00 2001
From: Panagiotis <27917356+panoschal@users.noreply.github.com>
Date: Wed, 3 Mar 2021 23:48:39 +0200
Subject: [PATCH] feat: use <details> to hide encrypted block

---
 res/css/structures/_ViewSource.scss     |  4 +++
 src/components/structures/ViewSource.js | 47 ++++++++++++++++---------
 2 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/res/css/structures/_ViewSource.scss b/res/css/structures/_ViewSource.scss
index 0cb5dd8f3a..0126c16599 100644
--- a/res/css/structures/_ViewSource.scss
+++ b/res/css/structures/_ViewSource.scss
@@ -43,3 +43,7 @@ limitations under the License.
     word-wrap: break-word;
     white-space: pre-wrap;
 }
+
+.mx_ViewSource_details {
+    margin-top: 0.8em;
+}
diff --git a/src/components/structures/ViewSource.js b/src/components/structures/ViewSource.js
index b57efe1dd3..ca6c0d4226 100644
--- a/src/components/structures/ViewSource.js
+++ b/src/components/structures/ViewSource.js
@@ -36,29 +36,42 @@ export default class ViewSource extends React.Component {
     render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
 
-        const DecryptedSection = <>
-            <div className="mx_ViewSource_separator" />
-            <div className="mx_ViewSource_heading">{_t("Decrypted event source")}</div>
-            <SyntaxHighlight className="json">
-                { JSON.stringify(this.props.decryptedContent, null, 2) }
-            </SyntaxHighlight>
-        </>;
-
-        const OriginalSection = <>
-            <div className="mx_ViewSource_separator" />
-            <div className="mx_ViewSource_heading">{_t("Original event source")}</div>
-            <SyntaxHighlight className="json">
-                { JSON.stringify(this.props.content, null, 2) }
-            </SyntaxHighlight>
-        </>;
+        let content;
+        if (this.props.isEncrypted) {
+            content = <>
+                <details open className="mx_ViewSource_details">
+                    <summary>
+                        <span className="mx_ViewSource_heading">{_t("Decrypted event source")}</span>
+                    </summary>
+                    <SyntaxHighlight className="json">
+                        { JSON.stringify(this.props.decryptedContent, null, 2) }
+                    </SyntaxHighlight>
+                </details>
+                <details className="mx_ViewSource_details">
+                    <summary>
+                        <span className="mx_ViewSource_heading">{_t("Original event source")}</span>
+                    </summary>
+                    <SyntaxHighlight className="json">
+                        { JSON.stringify(this.props.content, null, 2) }
+                    </SyntaxHighlight>
+                </details>
+            </>;
+        } else {
+            content = <>
+                <div className="mx_ViewSource_heading">{_t("Original event source")}</div>
+                <SyntaxHighlight className="json">
+                    { JSON.stringify(this.props.content, null, 2) }
+                </SyntaxHighlight>
+            </>;
+        }
 
         return (
             <BaseDialog className="mx_ViewSource" onFinished={this.props.onFinished} title={_t('View Source')}>
                 <div className="mx_Dialog_content">
                     <div className="mx_ViewSource_label_left">Room ID: { this.props.roomId }</div>
                     <div className="mx_ViewSource_label_left">Event ID: { this.props.eventId }</div>
-                    { this.props.isEncrypted && DecryptedSection }
-                    { OriginalSection }
+                    <div className="mx_ViewSource_separator" />
+                    { content }
                 </div>
             </BaseDialog>
         );