Merge pull request #5713 from panoschal/improve-view-source

Display decrypted and encrypted event source on the same dialog

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 {
@@ -34,3 +43,7 @@ limitations under the License.
     word-wrap: break-word;
     white-space: pre-wrap;
 }
+
+.mx_ViewSource_details {
+    margin-top: 0.8em;
+}

src/components/structures/ViewSource.js

@@ -29,20 +29,49 @@ 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">
+        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>
+                    <div className="mx_ViewSource_separator" />
+                    { content }
                 </div>
             </BaseDialog>
         );

src/components/views/context_menus/MessageContextMenu.js

@@ -130,18 +130,9 @@ export default class MessageContextMenu extends React.Component {
             roomId: ev.getRoomId(),
             eventId: ev.getId(),
             content: ev.event,
-        }, 'mx_Dialog_viewsource');
+            isEncrypted: ev.isEncrypted(),
-        this.closeMenu();
-    };
-
-    onViewClearSourceClick = () => {
-        const ev = this.props.mxEvent.replacingEvent() || this.props.mxEvent;
-        const ViewSource = sdk.getComponent('structures.ViewSource');
-        Modal.createTrackedDialog('View Clear Event Source', '', ViewSource, {
-            roomId: ev.getRoomId(),
-            eventId: ev.getId(),
             // FIXME: _clearEvent is private
-            content: ev._clearEvent,
+            decryptedContent: ev._clearEvent,
         }, 'mx_Dialog_viewsource');
         this.closeMenu();
     };
@@ -309,7 +300,6 @@ export default class MessageContextMenu extends React.Component {
         let cancelButton;
         let forwardButton;
         let pinButton;
-        let viewClearSourceButton;
         let unhidePreviewButton;
         let externalURLButton;
         let quoteButton;
@@ -389,14 +379,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 +463,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/components/views/messages/EditHistoryMessage.js

@@ -77,6 +77,9 @@ export default class EditHistoryMessage extends React.PureComponent {
             roomId: this.props.mxEvent.getRoomId(),
             eventId: this.props.mxEvent.getId(),
             content: this.props.mxEvent.event,
+            isEncrypted: this.props.mxEvent.isEncrypted(),
+            // FIXME: _clearEvent is private
+            decryptedContent: this.props.mxEvent._clearEvent,
         }, 'mx_Dialog_viewsource');
     };
 

src/i18n/strings/en_EN.json

@@ -2395,7 +2395,6 @@
     "Cancel Sending": "Cancel Sending",
     "Forward Message": "Forward Message",
     "Pin Message": "Pin Message",
-    "View Decrypted Source": "View Decrypted Source",
     "Unhide Preview": "Unhide Preview",
     "Share Permalink": "Share Permalink",
     "Share Message": "Share Message",
@@ -2656,6 +2655,8 @@
     "User menu": "User menu",
     "Community and user menu": "Community and user menu",
     "Could not load user profile": "Could not load user profile",
+    "Decrypted event source": "Decrypted event source",
+    "Original event source": "Original event source",
     "Verify this login": "Verify this login",
     "Session verified": "Session verified",
     "Failed to send email": "Failed to send email",