feat: improve "view source"

display encrypted and decrypted event source on the same dialog
keep only one "View Source" action on event context menu

res/css/structures/_ViewSource.scss

@@ -22,9 +22,18 @@ limitations under the License.
     float: right;
 }
 
-.mx_ViewSource_label_bottom {
+.mx_ViewSource_separator {
     clear: both;
     border-bottom: 1px solid #e5e5e5;
+    padding-top: 0.7em;
+    padding-bottom: 0.7em;
+}
+
+.mx_ViewSource_heading {
+    font-size: $font-17px;
+    font-weight: 400;
+    color: $primary-fg-color;
+    margin-top: 0.7em;
 }
 
 .mx_ViewSource pre {

src/components/structures/ViewSource.js

@@ -19,7 +19,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import SyntaxHighlight from '../views/elements/SyntaxHighlight';
-import {_t} from "../../languageHandler";
+import {_t, _td} from "../../languageHandler";
 import * as sdk from "../../index";
 
 
@@ -29,20 +29,36 @@ export default class ViewSource extends React.Component {
         onFinished: PropTypes.func.isRequired,
         roomId: PropTypes.string.isRequired,
         eventId: PropTypes.string.isRequired,
+        isEncrypted: PropTypes.bool.isRequired,
+        decryptedContent: PropTypes.object,
     };
 
     render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        return (
-            <BaseDialog className="mx_ViewSource" onFinished={this.props.onFinished} title={_t('View Source')}>
-                <div className="mx_ViewSource_label_left">Room ID: { this.props.roomId }</div>
-                <div className="mx_ViewSource_label_right">Event ID: { this.props.eventId }</div>
-                <div className="mx_ViewSource_label_bottom" />
 
-                <div className="mx_Dialog_content">
+        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>
+        </>;
+
+        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>
             </BaseDialog>
         );

src/components/views/context_menus/MessageContextMenu.js

@@ -130,6 +130,8 @@ export default class MessageContextMenu extends React.Component {
             roomId: ev.getRoomId(),
             eventId: ev.getId(),
             content: ev.event,
+            isEncrypted: this.props.mxEvent.getType() !== this.props.mxEvent.getWireType(),
+            decryptedContent: ev._clearEvent,
         }, 'mx_Dialog_viewsource');
         this.closeMenu();
     };
@@ -309,7 +311,6 @@ export default class MessageContextMenu extends React.Component {
         let cancelButton;
         let forwardButton;
         let pinButton;
-        let viewClearSourceButton;
         let unhidePreviewButton;
         let externalURLButton;
         let quoteButton;
@@ -389,14 +390,6 @@ export default class MessageContextMenu extends React.Component {
             </MenuItem>
         );
 
-        if (mxEvent.getType() !== mxEvent.getWireType()) {
-            viewClearSourceButton = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onViewClearSourceClick}>
-                    { _t('View Decrypted Source') }
-                </MenuItem>
-            );
-        }
-
         if (this.props.eventTileOps) {
             if (this.props.eventTileOps.isWidgetHidden()) {
                 unhidePreviewButton = (
@@ -481,7 +474,6 @@ export default class MessageContextMenu extends React.Component {
                 { forwardButton }
                 { pinButton }
                 { viewSourceButton }
-                { viewClearSourceButton }
                 { unhidePreviewButton }
                 { permalinkButton }
                 { quoteButton }

src/components/views/dialogs/RoomSettingsDialog.js

@@ -116,7 +116,7 @@ export default class RoomSettingsDialog extends React.Component {
         return (
             <BaseDialog className='mx_RoomSettingsDialog' hasCancel={true}
                         onFinished={this.props.onFinished} title={_t("Room Settings - %(roomName)s", {roomName})}>
-                <div className='ms_SettingsDialog_content'>
+                <div className='mx_SettingsDialog_content'>
                     <TabbedView tabs={this._getTabs()} />
                 </div>
             </BaseDialog>

src/components/views/dialogs/UserSettingsDialog.js

@@ -155,7 +155,7 @@ export default class UserSettingsDialog extends React.Component {
         return (
             <BaseDialog className='mx_UserSettingsDialog' hasCancel={true}
                         onFinished={this.props.onFinished} title={_t("Settings")}>
-                <div className='ms_SettingsDialog_content'>
+                <div className='mx_SettingsDialog_content'>
                     <TabbedView tabs={this._getTabs()} initialTabId={this.props.initialTabId} />
                 </div>
             </BaseDialog>

src/i18n/strings/en_EN.json

@@ -2875,5 +2875,7 @@
     "Esc": "Esc",
     "Enter": "Enter",
     "Space": "Space",
-    "End": "End"
+    "End": "End",
+    "Decrypted event source": "Decrypted event source",
+    "Original event source": "Original event source"
 }

src/i18n/strings/en_US.json

@@ -650,5 +650,7 @@
     "Error upgrading room": "Error upgrading room",
     "Double check that your server supports the room version chosen and try again.": "Double check that your server supports the room version chosen and try again.",
     "Changes the avatar of the current room": "Changes the avatar of the current room",
-    "Changes your avatar in all rooms": "Changes your avatar in all rooms"
+    "Changes your avatar in all rooms": "Changes your avatar in all rooms",
+    "Decrypted event source": "Decrypted event source",
+    "Original event source": "Original event source"
 }