add csp for image load from blob so attachments are loaded correctly

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';

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'/>

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'/>

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';

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) {
+    onProgress() {},
-      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');
-    },
     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({

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';

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';

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;

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"/>

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({
+      // reload as much messages as we had before the change.
-        messages: conversationModel.messageCollection.models,
+      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++) {