From ddf41de3fbd7a59eaf1886530545f394141c4eec Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Mon, 19 Oct 2020 09:35:16 +1100
Subject: [PATCH] add csp for image load from blob so attachments are loaded
 correctly

---
 about.html                                    |  2 +-
 background.html                               |  8 +--
 background_test.html                          |  7 +-
 debug_log.html                                |  2 +-
 js/views/inbox_view.js                        | 57 +---------------
 password.html                                 |  2 +-
 permissions_popup.html                        |  2 +-
 stylesheets/_conversation.scss                | 65 -------------------
 test/index.html                               |  6 +-
 .../conversation/SessionConversation.tsx      | 15 +++--
 10 files changed, 18 insertions(+), 148 deletions(-)

diff --git a/about.html b/about.html
index 078515f0c..6c1a9ddf8 100644
--- a/about.html
+++ b/about.html
@@ -7,7 +7,7 @@
             font-src 'self';
             form-action 'self';
             frame-src 'none';
-            img-src 'self';
+            img-src 'self' blob: data:;
             media-src 'self' blob:;
             object-src 'none';
             script-src 'self';
diff --git a/background.html b/background.html
index 4e6df89d3..b9a9f5299 100644
--- a/background.html
+++ b/background.html
@@ -13,7 +13,7 @@
             font-src 'self';
             form-action 'self';
             frame-src 'none';
-            img-src 'self';
+            img-src 'self' blob: data:;
             media-src 'self' blob:;
             object-src 'none';
             script-src 'self';
@@ -56,11 +56,7 @@
     <div class='lightbox-container'></div>
   </script>
 
-  <script type='text/x-tmpl-mustache' id='scroll-down-button-view'>
-    <button class='text module-scroll-down__button {{ buttonClass }}' alt='{{ moreBelow }}'>
-      <div class='module-scroll-down__icon'></div>
-    </button>
-  </script>
+
 
   <script type='text/x-tmpl-mustache' id='last-seen-indicator-view'>
     <div class='module-last-seen-indicator__bar'/>
diff --git a/background_test.html b/background_test.html
index 147e90d6b..a4caf9bd0 100644
--- a/background_test.html
+++ b/background_test.html
@@ -13,7 +13,7 @@
             font-src 'self';
             form-action 'self';
             frame-src 'none';
-            img-src 'self';
+            img-src 'self' blob: data:;
             media-src 'self' blob:;
             object-src 'none';
             script-src 'self' 'unsafe-eval';
@@ -55,11 +55,6 @@
     <div class='lightbox-container'></div>
   </script>
 
-  <script type='text/x-tmpl-mustache' id='scroll-down-button-view'>
-    <button class='text module-scroll-down__button {{ buttonClass }}' alt='{{ moreBelow }}'>
-      <div class='module-scroll-down__icon'></div>
-    </button>
-  </script>
 
   <script type='text/x-tmpl-mustache' id='last-seen-indicator-view'>
     <div class='module-last-seen-indicator__bar'/>
diff --git a/debug_log.html b/debug_log.html
index 498f67b8d..f0b7b0262 100644
--- a/debug_log.html
+++ b/debug_log.html
@@ -7,7 +7,7 @@
             font-src 'self';
             form-action 'self';
             frame-src 'none';
-            img-src 'self';
+            img-src 'self' blob: data:;
             media-src 'self' blob:;
             object-src 'none';
             script-src 'self';
diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js
index 61ae084c4..86585736d 100644
--- a/js/views/inbox_view.js
+++ b/js/views/inbox_view.js
@@ -81,10 +81,6 @@
   Whisper.AppLoadingScreen = Whisper.View.extend({
     templateName: 'app-loading-screen',
     className: 'app-loading-screen',
-    updateProgress() {},
-    render_attributes: {
-      message: i18n('loading'),
-    },
   });
 
   Whisper.InboxView = Whisper.View.extend({
@@ -140,13 +136,6 @@
       // FIXME: Fix this for new react views
       this.setupLeftPane();
     },
-    render_attributes: {
-      welcomeToSession: i18n('welcomeToSession'),
-    },
-    events: {
-      click: 'onClick',
-      'click .section-toggle': 'toggleSection',
-    },
     async setupLeftPane() {
       // Here we set up a full redux store with initial state for our LeftPane Root
       const convoCollection = getConversations();
@@ -339,37 +328,10 @@
         view.remove();
       }
     },
-    onProgress(count) {
-      const view = this.appLoadingScreen;
-      if (view) {
-        view.updateProgress(count);
-      }
-    },
-    focusConversation(e) {
-      if (e && this.$(e.target).closest('.placeholder').length) {
-        return;
-      }
-
-      this.$('#header, .gutter').addClass('inactive');
-      this.$('.conversation-stack').removeClass('inactive');
-    },
-    focusHeader() {
-      this.$('.conversation-stack').addClass('inactive');
-      this.$('#header, .gutter').removeClass('inactive');
-      this.$('.conversation:first .menu').trigger('close');
-    },
+    onProgress() {},
     reloadBackgroundPage() {
       window.location.reload();
     },
-    toggleSection(e) {
-      // Expand or collapse this panel
-      const $target = this.$(e.currentTarget);
-      const $next = $target.next();
-
-      // Toggle section visibility
-      $next.slideToggle('fast');
-      $target.toggleClass('section-toggle-visible');
-    },
     async openConversation(id, messageId) {
       // If we call this to create a new conversation, it can only be private
       // (group conversations are created elsewhere)
@@ -387,7 +349,6 @@
       }
 
       this.conversation_stack.open(conversation);
-      // this.focusConversation();
     },
     closeConversation(conversation) {
       if (conversation) {
@@ -395,22 +356,6 @@
         this.conversation_stack.close(conversation);
       }
     },
-    closeRecording(e) {
-      if (e && this.$(e.target).closest('.capture-audio').length > 0) {
-        return;
-      }
-      this.$('.conversation:first .recorder').trigger('close');
-    },
-    onClick(e) {
-      this.closeRecording(e);
-    },
-    showToastMessageInGutter(message) {
-      const toast = new Whisper.MessageToastView({
-        message,
-      });
-      toast.$el.appendTo(this.$('.gutter'));
-      toast.render();
-    },
   });
 
   Whisper.ExpiredAlertBanner = Whisper.View.extend({
diff --git a/password.html b/password.html
index 0d131e92b..a399efe5b 100644
--- a/password.html
+++ b/password.html
@@ -7,7 +7,7 @@
             font-src 'self';
             form-action 'self';
             frame-src 'none';
-            img-src 'self';
+            img-src 'self' blob: data:;
             media-src 'self' blob:;
             object-src 'none';
             script-src 'self';
diff --git a/permissions_popup.html b/permissions_popup.html
index 239762e8b..f1fe49dfa 100644
--- a/permissions_popup.html
+++ b/permissions_popup.html
@@ -7,7 +7,7 @@
             font-src 'self';
             form-action 'self';
             frame-src 'none';
-            img-src 'self';
+            img-src 'self' blob: data:;
             media-src 'self' blob:;
             object-src 'none';
             script-src 'self';
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 8e546a1b7..587912005 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -1,74 +1,9 @@
-.conversation {
-  background-color: $color-white;
-  height: 100%;
-  position: relative;
-
-  .panel,
-  .panel-wrapper {
-    overflow-y: scroll;
-  }
-
-  .panel {
-    .container {
-      padding-top: 20px;
-      max-width: 750px;
-      margin: 0 auto;
-      padding: 20px;
-    }
-  }
-
-  .main.panel,
-  .panel-wrapper {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    overflow: initial;
-  }
-
-  .conversation-content-left {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    width: 100%;
-  }
-
-  .main.panel {
-    @include themify($themes) {
-      border-top: themed('sessionBorder');
-      border-left: themed('sessionBorder');
-    }
-
-    .discussion-container {
-      flex-grow: 1;
-      position: relative;
-      max-width: 100%;
-      margin: 0;
-
-      .message-list {
-        -webkit-padding-start: 0px;
-        position: absolute;
-        top: 0;
-        height: 100%;
-        width: 100%;
-        margin: 0;
-        padding: 10px 0 0 0;
-        overflow-y: auto;
-        overflow-x: hidden;
-      }
-    }
-  }
-}
-
 .message-detail-wrapper {
   height: calc(100% - 48px);
   width: 100%;
   overflow-y: auto;
 }
 
-.discussion-container {
-  background-color: $color-white;
-}
-
 .message-container,
 .message-list {
   list-style: none;
diff --git a/test/index.html b/test/index.html
index c30978e3b..caf65bf97 100644
--- a/test/index.html
+++ b/test/index.html
@@ -43,11 +43,7 @@
     <div class="lightbox-container"></div>
   </script>
 
-  <script type="text/x-tmpl-mustache" id="scroll-down-button-view">
-    <button class="text module-scroll-down__button {{ buttonClass }}" alt="{{ moreBelow }}">
-      <div class="module-scroll-down__icon"></div>
-    </button>
-  </script>
+
 
   <script type="text/x-tmpl-mustache" id="last-seen-indicator-view">
     <div class="module-last-seen-indicator__bar"/>
diff --git a/ts/components/session/conversation/SessionConversation.tsx b/ts/components/session/conversation/SessionConversation.tsx
index e6d9f23f1..5f4ccd794 100644
--- a/ts/components/session/conversation/SessionConversation.tsx
+++ b/ts/components/session/conversation/SessionConversation.tsx
@@ -125,9 +125,12 @@ export class SessionConversation extends React.Component<Props, State> {
       this.state.conversationKey
     );
     conversationModel.on('change', () => {
-      this.setState({
-        messages: conversationModel.messageCollection.models,
-      });
+      // reload as much messages as we had before the change.
+      void this.getMessages(
+        this.state.messages.length ||
+          Constants.CONVERSATION.DEFAULT_MESSAGE_FETCH_COUNT,
+        2
+      );
     });
   }
 
@@ -155,7 +158,6 @@ export class SessionConversation extends React.Component<Props, State> {
   public render() {
     const {
       conversationKey,
-      doneInitialScroll,
       showRecordingView,
       showOptionsPane,
       quotedMessageProps,
@@ -300,12 +302,12 @@ export class SessionConversation extends React.Component<Props, State> {
   ) {
     const { conversationKey, messageFetchTimestamp } = this.state;
 
-    const timestamp = getTimestamp();
+    const timestamp = Date.now();
 
     // If we have pulled messages in the last interval, don't bother rescanning
     // This avoids getting messages on every re-render.
     const timeBuffer = timestamp - messageFetchTimestamp;
-    if (timeBuffer < fetchInterval) {
+    if (timeBuffer / 1000 < fetchInterval) {
       return { newTopMessage: undefined, previousTopMessage: undefined };
     }
 
@@ -325,6 +327,7 @@ export class SessionConversation extends React.Component<Props, State> {
 
     // Set first member of series here.
     const messageModels = messageSet.models.reverse();
+
     const messages = [];
     let previousSender;
     for (let i = 0; i < messageModels.length; i++) {