Restore two column layout

Establishes basic functionality for viewing conversations in two column
mode, including message area and message list resizing, and maintaining
scroll position.

Various subviews need to be retooled but are more or less still
functional, i.e., new message, message detail, key verification, etc...

js/panel_controller.js

@@ -117,45 +117,7 @@
             conversation.fetchContacts();
         });
         conversation.fetchMessages();
-
-        var windowId = windowMap.windowIdFrom(modelId);
-
-        // prevent multiple copies of the same conversation from being opened
-        if (!windowId) {
-            // open the panel
-            extension.windows.open({
-                id: modelId,
-                url: 'conversation.html',
-                type: 'panel',
-                frame: 'none',
-                focused: true,
-                width: 300,
-                height: 440,
-                minWidth: 230,
-                minHeight: 73
-            }, function (windowInfo) {
-                windowId = windowInfo.id;
-                windowMap.add({ windowId: windowId, modelId: modelId });
-
-                windowInfo.onClosed.addListener(function () {
-                    onWindowClosed(windowId);
-                });
-
-                // close the panel if background.html is refreshed
-                extension.windows.beforeUnload(function() {
-                    // TODO: reattach after reload instead of closing.
-                    extension.windows.remove(windowId);
-                });
-            });
-        } else {
-            // focus the panel
-            extension.windows.focus(windowId, function (error) {
-                if (error) {
-                    closeConversation(windowId); // panel isn't actually open...
-                    openConversation(modelId); // ...and so we try again.
-                }
-            });
-        }
+        return conversation;
     };
 
     /* Inbox window controller */
@@ -170,7 +132,7 @@
                 type: 'panel',
                 frame: 'none',
                 focused: true,
-                width: 260,
+                width: 580,
                 height: 440,
                 minWidth: 230,
                 minHeight: 150

js/views/conversation_view.js

@@ -22,6 +22,9 @@
         className: function() {
             return [ 'conversation', this.model.get('type') ].join(' ');
         },
+        id: function() {
+            return 'conversation-' + this.model.cid;
+        },
         template: $('#conversation').html(),
         render_attributes: function() {
             return {
@@ -36,10 +39,6 @@
             this.render();
 
             this.appWindow = options.appWindow;
-            new Whisper.WindowControlsView({
-                appWindow: this.appWindow
-            }).$el.insertAfter(this.$('.menu'));
-
             this.fileInput = new Whisper.FileInputView({
                 el: this.$('.attachments'),
                 window: this.appWindow.contentWindow
@@ -85,7 +84,8 @@
             'click .hamburger': 'toggleMenu',
             'click .openInbox' : 'openInbox',
             'click' : 'onClick',
-            'select .entry': 'messageDetail'
+            'select .entry': 'messageDetail',
+            'force-resize': 'forceUpdateMessageFieldSize'
         },
 
         viewMembers: function() {
@@ -235,12 +235,15 @@
 
             $bottomBar.outerHeight(this.$messageField.outerHeight() + 1);
             var $bottomBarNewHeight = $bottomBar.outerHeight();
-            $discussionContainer.outerHeight(this.$el.outerHeight() - $bottomBarNewHeight - this.$('#header').outerHeight());
+            $discussionContainer.outerHeight(this.$el.outerHeight() - $bottomBarNewHeight - this.$('.conversation-header').outerHeight());
 
             this.view.scrollToBottomIfNeeded();
         },
 
         forceUpdateMessageFieldSize: function (event) {
+            if (this.$el.css('display') === 'none') {
+                return;
+            }
             this.view.scrollToBottomIfNeeded();
             window.autosize.update(this.$messageField);
             this.updateMessageFieldSize(event);

js/views/inbox_view.js

@@ -56,11 +56,32 @@
             }
         });
 
+        Whisper.ConversationStack = Whisper.View.extend({
+            className: 'conversation-stack',
+            open: function(conversation) {
+                var $el = this.$('#conversation-' + conversation.cid);
+                if ($el === null || $el.length === 0) {
+                    var view = new Whisper.ConversationView({
+                        model: conversation,
+                        appWindow: this.model.appWindow
+                    });
+                    $el = view.$el;
+                }
+                $el.prependTo(this.el);
+                $el.find('.message-list').trigger('reset-scroll');
+                $el.trigger('force-resize');
+            }
+        });
+
         Whisper.InboxView = Whisper.View.extend({
-            template: $('#inbox').html(),
+            template: $('#two-column').html(),
             className: 'inbox',
             initialize: function (options) {
                 this.render();
+                this.conversation_stack = new Whisper.ConversationStack({
+                    el: this.$('.conversation-stack'),
+                    model: { appWindow: options.appWindow }
+                });
 
                 this.newConversationView = new Whisper.NewConversationView({
                     appWindow: options.appWindow
@@ -91,7 +112,8 @@
                 'select .contact': 'openConversation',
             },
             openConversation: function(e, data) {
-                bg.openConversation(data.modelId);
+                var conversation = bg.openConversation(data.modelId);
+                this.conversation_stack.open(conversation);
                 this.hideCompose();
             },
             showCompose: function() {

js/views/message_list_view.js

@@ -17,10 +17,6 @@
     'use strict';
     window.Whisper = window.Whisper || {};
 
-    var scrollPosition,
-        scrollHeight,
-        shouldStickToBottom;
-
     Whisper.MessageListView = Whisper.ListView.extend({
         tagName: 'ul',
         className: 'message-list',
@@ -28,16 +24,24 @@
         events: {
             'add': 'scrollToBottom',
             'update *': 'scrollToBottom',
-            'scroll': 'measureScrollPosition'
+            'scroll': 'measureScrollPosition',
+            'reset-scroll': 'resetScrollPosition'
         },
         measureScrollPosition: function() {
-            scrollPosition = this.$el.scrollTop() + this.$el.outerHeight();
-            scrollHeight = this.el.scrollHeight;
-            shouldStickToBottom = scrollPosition === scrollHeight;
+            this.scrollPosition = this.$el.scrollTop() + this.$el.outerHeight();
+            this.scrollHeight = this.el.scrollHeight;
+            this.shouldStickToBottom = this.scrollPosition === this.scrollHeight;
+        },
+        resetScrollPosition: function() {
+            var scrollPosition = this.scrollPosition;
+            if (this.scrollHeight !== this.el.scrollHeight) {
+               scrollPosition = this.el.scrollHeight * this.scrollPosition / this.scrollHeight;
+            }
+            this.$el.scrollTop(scrollPosition - this.$el.outerHeight());
         },
         scrollToBottomIfNeeded: function() {
-            if (shouldStickToBottom) {
-                this.$el.scrollTop(scrollHeight);
+            if (this.shouldStickToBottom) {
+                this.$el.scrollTop(this.scrollHeight);
             }
         },
         scrollToBottom: function() {