From ae08f74336d3aa24988f7f3dba7d817cd5c96741 Mon Sep 17 00:00:00 2001 From: Panagiotis <27917356+panoschal@users.noreply.github.com> Date: Wed, 3 Mar 2021 22:38:30 +0200 Subject: [PATCH 1/6] 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 | 11 ++++++- src/components/structures/ViewSource.js | 32 ++++++++++++++----- .../views/context_menus/MessageContextMenu.js | 12 ++----- .../views/dialogs/RoomSettingsDialog.js | 2 +- .../views/dialogs/UserSettingsDialog.js | 2 +- src/i18n/strings/en_EN.json | 4 ++- src/i18n/strings/en_US.json | 4 ++- 7 files changed, 44 insertions(+), 23 deletions(-) diff --git a/res/css/structures/_ViewSource.scss b/res/css/structures/_ViewSource.scss index 421d1f03cd..0cb5dd8f3a 100644 --- a/res/css/structures/_ViewSource.scss +++ b/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 { diff --git a/src/components/structures/ViewSource.js b/src/components/structures/ViewSource.js index 0b969784e5..866f2e0a0b 100644 --- a/src/components/structures/ViewSource.js +++ b/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'); + + const DecryptedSection = <> +
+
{_t("Decrypted event source")}
+ + { JSON.stringify(this.props.decryptedContent, null, 2) } + + ; + + const OriginalSection = <> +
+
{_t("Original event source")}
+ + { JSON.stringify(this.props.content, null, 2) } + + ; + return ( -
Room ID: { this.props.roomId }
-
Event ID: { this.props.eventId }
-
-
- - { JSON.stringify(this.props.content, null, 2) } - +
Room ID: { this.props.roomId }
+
Event ID: { this.props.eventId }
+ { this.props.isEncrypted && DecryptedSection } + { OriginalSection }
); diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js index 6b871e4f24..b002d1ec62 100644 --- a/src/components/views/context_menus/MessageContextMenu.js +++ b/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 { ); - if (mxEvent.getType() !== mxEvent.getWireType()) { - viewClearSourceButton = ( - - { _t('View Decrypted Source') } - - ); - } - 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 } diff --git a/src/components/views/dialogs/RoomSettingsDialog.js b/src/components/views/dialogs/RoomSettingsDialog.js index 9d9313f08f..368f2aeccd 100644 --- a/src/components/views/dialogs/RoomSettingsDialog.js +++ b/src/components/views/dialogs/RoomSettingsDialog.js @@ -116,7 +116,7 @@ export default class RoomSettingsDialog extends React.Component { return ( -
+
diff --git a/src/components/views/dialogs/UserSettingsDialog.js b/src/components/views/dialogs/UserSettingsDialog.js index 7164540aea..3291fa2387 100644 --- a/src/components/views/dialogs/UserSettingsDialog.js +++ b/src/components/views/dialogs/UserSettingsDialog.js @@ -155,7 +155,7 @@ export default class UserSettingsDialog extends React.Component { return ( -
+
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index fa7f446b7c..b777adcf0c 100644 --- a/src/i18n/strings/en_EN.json +++ b/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" } diff --git a/src/i18n/strings/en_US.json b/src/i18n/strings/en_US.json index a1275fb089..9dc6d18f8a 100644 --- a/src/i18n/strings/en_US.json +++ b/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" } From 0a1f372371a73736a720deface3564be172a9953 Mon Sep 17 00:00:00 2001 From: Panagiotis <27917356+panoschal@users.noreply.github.com> Date: Wed, 3 Mar 2021 23:26:31 +0200 Subject: [PATCH 2/6] fix: lint --- src/components/structures/ViewSource.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/ViewSource.js b/src/components/structures/ViewSource.js index 866f2e0a0b..b57efe1dd3 100644 --- a/src/components/structures/ViewSource.js +++ b/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, _td} from "../../languageHandler"; +import {_t} from "../../languageHandler"; import * as sdk from "../../index"; 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 3/6] feat: use
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 = <> -
-
{_t("Decrypted event source")}
- - { JSON.stringify(this.props.decryptedContent, null, 2) } - - ; - - const OriginalSection = <> -
-
{_t("Original event source")}
- - { JSON.stringify(this.props.content, null, 2) } - - ; + let content; + if (this.props.isEncrypted) { + content = <> +
+ + {_t("Decrypted event source")} + + + { JSON.stringify(this.props.decryptedContent, null, 2) } + +
+
+ + {_t("Original event source")} + + + { JSON.stringify(this.props.content, null, 2) } + +
+ ; + } else { + content = <> +
{_t("Original event source")}
+ + { JSON.stringify(this.props.content, null, 2) } + + ; + } return (
Room ID: { this.props.roomId }
Event ID: { this.props.eventId }
- { this.props.isEncrypted && DecryptedSection } - { OriginalSection } +
+ { content }
); From 725162ee0012c85111859fa54c9058462945e761 Mon Sep 17 00:00:00 2001 From: Panagiotis <27917356+panoschal@users.noreply.github.com> Date: Thu, 4 Mar 2021 00:09:00 +0200 Subject: [PATCH 4/6] fix: i18n strings --- src/i18n/strings/en_EN.json | 7 +++---- src/i18n/strings/en_US.json | 4 +--- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index b777adcf0c..c3752d7942 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2396,7 +2396,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", @@ -2652,6 +2651,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", @@ -2875,7 +2876,5 @@ "Esc": "Esc", "Enter": "Enter", "Space": "Space", - "End": "End", - "Decrypted event source": "Decrypted event source", - "Original event source": "Original event source" + "End": "End" } diff --git a/src/i18n/strings/en_US.json b/src/i18n/strings/en_US.json index 9dc6d18f8a..a1275fb089 100644 --- a/src/i18n/strings/en_US.json +++ b/src/i18n/strings/en_US.json @@ -650,7 +650,5 @@ "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", - "Decrypted event source": "Decrypted event source", - "Original event source": "Original event source" + "Changes your avatar in all rooms": "Changes your avatar in all rooms" } From 2c64dac5140004e41623d3337d163a9ed1d0babb Mon Sep 17 00:00:00 2001 From: Panagiotis <27917356+panoschal@users.noreply.github.com> Date: Fri, 5 Mar 2021 19:57:37 +0200 Subject: [PATCH 5/6] fix: show decrypted source on EditHistory -> ViewSource pass correct props to the component --- src/components/views/messages/EditHistoryMessage.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/views/messages/EditHistoryMessage.js b/src/components/views/messages/EditHistoryMessage.js index df27773a40..68a3c95745 100644 --- a/src/components/views/messages/EditHistoryMessage.js +++ b/src/components/views/messages/EditHistoryMessage.js @@ -77,6 +77,8 @@ 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.getType() !== this.props.mxEvent.getWireType(), + decryptedContent: this.props.mxEvent._clearEvent, }, 'mx_Dialog_viewsource'); }; From 7963d7f49ebc7da5387bd8037f14ce13ae4f55cd Mon Sep 17 00:00:00 2001 From: Panagiotis <27917356+panoschal@users.noreply.github.com> Date: Mon, 8 Mar 2021 21:21:37 +0200 Subject: [PATCH 6/6] address PR comments cleanup, change to isEncrypted, comments --- .../views/context_menus/MessageContextMenu.js | 15 ++------------- .../views/messages/EditHistoryMessage.js | 3 ++- 2 files changed, 4 insertions(+), 14 deletions(-) diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js index b002d1ec62..98d0aad578 100644 --- a/src/components/views/context_menus/MessageContextMenu.js +++ b/src/components/views/context_menus/MessageContextMenu.js @@ -130,20 +130,9 @@ 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(); - }; - - 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(), + isEncrypted: ev.isEncrypted(), // FIXME: _clearEvent is private - content: ev._clearEvent, + decryptedContent: ev._clearEvent, }, 'mx_Dialog_viewsource'); this.closeMenu(); }; diff --git a/src/components/views/messages/EditHistoryMessage.js b/src/components/views/messages/EditHistoryMessage.js index 68a3c95745..f37efe4800 100644 --- a/src/components/views/messages/EditHistoryMessage.js +++ b/src/components/views/messages/EditHistoryMessage.js @@ -77,7 +77,8 @@ 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.getType() !== this.props.mxEvent.getWireType(), + isEncrypted: this.props.mxEvent.isEncrypted(), + // FIXME: _clearEvent is private decryptedContent: this.props.mxEvent._clearEvent, }, 'mx_Dialog_viewsource'); };