From 0ab09711a495c815633cf14b2f7f856b59e2285b Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@signal.org>
Date: Fri, 30 Jul 2021 11:37:03 -0700
Subject: [PATCH] Track performance of message sends

---
 ts/components/CompositionInput.tsx     | 13 ++++++++++---
 ts/components/conversation/Message.tsx | 15 ++++++++++++++-
 ts/models/conversations.ts             |  3 +++
 ts/views/conversation_view.ts          | 26 +++++++++++++++++---------
 4 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/ts/components/CompositionInput.tsx b/ts/components/CompositionInput.tsx
index cab654002c..604b9a066a 100644
--- a/ts/components/CompositionInput.tsx
+++ b/ts/components/CompositionInput.tsx
@@ -74,7 +74,11 @@ export type Props = {
   ): unknown;
   onTextTooLong(): unknown;
   onPickEmoji(o: EmojiPickDataType): unknown;
-  onSubmit(message: string, mentions: Array<BodyRangeType>): unknown;
+  onSubmit(
+    message: string,
+    mentions: Array<BodyRangeType>,
+    timestamp: number
+  ): unknown;
   getQuotedMessage(): unknown;
   clearQuotedMessage(): unknown;
 };
@@ -218,6 +222,7 @@ export const CompositionInput: React.ComponentType<Props> = props => {
   };
 
   const submit = () => {
+    const timestamp = Date.now();
     const quill = quillRef.current;
 
     if (quill === undefined) {
@@ -226,8 +231,10 @@ export const CompositionInput: React.ComponentType<Props> = props => {
 
     const [text, mentions] = getTextAndMentions();
 
-    window.log.info(`Submitting a message with ${mentions.length} mentions`);
-    onSubmit(text, mentions);
+    window.log.info(
+      `CompositionInput: Submitting message ${timestamp} with ${mentions.length} mentions`
+    );
+    onSubmit(text, mentions, timestamp);
   };
 
   if (inputApi) {
diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
index e23199543e..6702cdab07 100644
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@@ -454,7 +454,7 @@ export class Message extends React.Component<Props, State> {
   }
 
   public componentDidUpdate(prevProps: Props): void {
-    const { canDeleteForEveryone, isSelected } = this.props;
+    const { canDeleteForEveryone, isSelected, status, timestamp } = this.props;
 
     this.startSelectedTimer();
 
@@ -468,6 +468,19 @@ export class Message extends React.Component<Props, State> {
     if (canDeleteForEveryone !== prevProps.canDeleteForEveryone) {
       this.startDeleteForEveryoneTimer();
     }
+
+    if (
+      prevProps.status === 'sending' &&
+      (status === 'sent' ||
+        status === 'delivered' ||
+        status === 'read' ||
+        status === 'viewed')
+    ) {
+      const delta = Date.now() - timestamp;
+      window.log.info(
+        `Message.tsx: Rendered 'send complete' for message ${timestamp}; took ${delta}ms`
+      );
+    }
   }
 
   public checkForHeightChange(prevProps: Props): void {
diff --git a/ts/models/conversations.ts b/ts/models/conversations.ts
index e743dbafc4..f40b94c613 100644
--- a/ts/models/conversations.ts
+++ b/ts/models/conversations.ts
@@ -3559,6 +3559,9 @@ export class ConversationModel extends window.Backbone
     const destination = this.getSendTarget()!;
     const recipients = this.getRecipients();
 
+    if (timestamp) {
+      window.log.info(`sendMessage: Queueing send with timestamp ${timestamp}`);
+    }
     this.queueJob('sendMessage', async () => {
       const now = timestamp || Date.now();
 
diff --git a/ts/views/conversation_view.ts b/ts/views/conversation_view.ts
index af9481f086..c5e914ed21 100644
--- a/ts/views/conversation_view.ts
+++ b/ts/views/conversation_view.ts
@@ -670,8 +670,9 @@ Whisper.ConversationView = Whisper.View.extend({
         this.sendStickerMessage({ packId, stickerId }),
       onSubmit: (
         message: string,
-        mentions: typeof window.Whisper.BodyRangesType
-      ) => this.sendMessage(message, mentions),
+        mentions: typeof window.Whisper.BodyRangesType,
+        timestamp: number
+      ) => this.sendMessage(message, mentions, { timestamp }),
       onEditorStateChange: (
         msg: string,
         bodyRanges: Array<typeof window.Whisper.BodyRangeType>,
@@ -3640,7 +3641,7 @@ Whisper.ConversationView = Whisper.View.extend({
     }
   },
 
-  async getUntrustedContacts(options: any = {}) {
+  async getUntrustedContacts(options: { force?: boolean } = {}) {
     const { model }: { model: ConversationModel } = this;
 
     // This will go to the trust store for the latest identity key information,
@@ -3781,8 +3782,13 @@ Whisper.ConversationView = Whisper.View.extend({
     return false;
   },
 
-  async sendMessage(message = '', mentions = [], options = {}) {
+  async sendMessage(
+    message = '',
+    mentions = [],
+    options: { timestamp?: number; force?: boolean } = {}
+  ) {
     const { model }: { model: ConversationModel } = this;
+    const timestamp = options.timestamp || Date.now();
 
     this.sendStart = Date.now();
 
@@ -3793,7 +3799,7 @@ Whisper.ConversationView = Whisper.View.extend({
       if (contacts && contacts.length) {
         const sendAnyway = await this.showSendAnywayDialog(contacts);
         if (sendAnyway) {
-          this.sendMessage(message, mentions, { force: true });
+          this.sendMessage(message, mentions, { force: true, timestamp });
           return;
         }
 
@@ -3822,7 +3828,11 @@ Whisper.ConversationView = Whisper.View.extend({
       }
 
       const attachments = await this.getFiles();
+      const sendHQImages =
+        window.reduxStore &&
+        window.reduxStore.getState().composer.shouldSendHighQualityAttachments;
       const sendDelta = Date.now() - this.sendStart;
+
       window.log.info('Send pre-checks took', sendDelta, 'milliseconds');
 
       model.sendMessage(
@@ -3833,10 +3843,8 @@ Whisper.ConversationView = Whisper.View.extend({
         undefined, // sticker
         mentions,
         {
-          sendHQImages:
-            window.reduxStore &&
-            window.reduxStore.getState().composer
-              .shouldSendHighQualityAttachments,
+          sendHQImages,
+          timestamp,
         }
       );