Popout inbox

Rather than opening the inbox in its own window, let it appear as a
browser action popup by default, but allow promotion to its own window
if requested.

background.html

@@ -163,6 +163,7 @@
   <script type="text/x-tmpl-mustache" id="inbox">
     <div class='title-bar' id='header'>
       <div class='socket-status'></div>
+      <button class='popout hide'></button>
     </div>
     <div class='gutter'>
         <div class='conversations scrollable'></div>

js/background.js

@@ -67,8 +67,6 @@
             });
         });
 
-        extension.browserAction(window.openInbox);
-
         // refresh views
         var views = extension.windows.getViews();
         for (var i = 0; i < views.length; ++i) {

js/index.js

@@ -20,10 +20,23 @@
 
     window.Whisper = window.Whisper || {};
     if (bg.textsecure.storage.getUnencrypted("number_id") === undefined) {
-        window.location = '/options.html';
+        extension.navigator.tabs.create('/options.html');
+        window.close();
     } else {
         new bg.Whisper.InboxView().$el.prependTo(bg.$('body',document));
         bg.textsecure.storage.putUnencrypted("unreadCount", 0);
         extension.navigator.setBadgeText("");
+
+        window.addEventListener('beforeunload', function () {
+            chrome.browserAction.setPopup({popup: 'index.html'}); // pop in
+        });
+
+        extension.windows.getCurrent(function (windowInfo) {
+            if (windowInfo.type === 'normal') {
+                bg.$('body', document).addClass('pop-in');
+            } else {
+                bg.$('.popout', document).remove();
+            }
+        });
     }
 }());

js/panel_controller.js

@@ -129,6 +129,12 @@
         }
     };
 
+    window.popoutInbox = function() {
+        chrome.browserAction.setPopup({popup: ''});
+        extension.browserAction(window.openInbox);
+        window.openInbox();
+    };
+
     // make sure windows are cleaned up on close
     extension.windows.onClosed(function (windowId) {
         if (windowMap.windowId[windowId]) {

js/views/inbox_view.js

@@ -80,6 +80,10 @@
         events: {
             'click .fab': 'showCompose',
             'select .contact': 'openConversation',
+            'click .popout': 'popout'
+        },
+        popout: function() {
+            bg.popoutInbox();
         },
         openConversation: function(e, data) {
             bg.openConversation(data.modelId);

manifest.json

@@ -16,7 +16,8 @@
         "default_icon": {
             "19": "icon.png"
         },
-        "default_title": "TextSecure"
+        "default_title": "TextSecure",
+        "default_popup": "index.html"
     },
 
     "background": {

stylesheets/_index.scss

@@ -95,6 +95,11 @@ input.search {
 }
 
 .index {
+  &.pop-in {
+    min-height: 330px;
+    min-width: 260px;
+  }
+
   color: $grey_d;
   background: #eee;
 
@@ -136,3 +141,12 @@ input.search {
       font-weight: bold;
     }
 }
+
+.popout {
+  float: right;
+  background: url('/images/popout.png') no-repeat center center;
+  display: none;
+}
+.title-bar:hover .popout {
+  display: inline-block;
+}

stylesheets/manifest.css

@@ -319,6 +319,9 @@ input.search {
 .index {
   color: #454545;
   background: #eee; }
+  .index.pop-in {
+    min-height: 330px;
+    min-width: 260px; }
   .index .new-group-update-form {
     display: none;
     padding: 0.5em; }
@@ -345,6 +348,14 @@ input.search {
 .conversations .unread .contact-details .last-timestamp {
   font-weight: bold; }
 
+.popout {
+  float: right;
+  background: url("/images/popout.png") no-repeat center center;
+  display: none; }
+
+.title-bar:hover .popout {
+  display: inline-block; }
+
 .conversation {
   padding: 36px 0; }
   .conversation .file-input .close {