Keep inbox window open, but allow it to be hidden

As a chrome packaged app, we have to keep at least one window open in
order to maintain our websocket connection in the background page.

This change replaces the system window frame with custom buttons in the
inbox header, such that the 'close' button merely hides the window
rather than unloading it.

Fixes #237
FREEBIE

background.html

@@ -228,6 +228,10 @@
       </p>
     </div>
   </script>
+  <script type='text/x-tmpl-mustache' id='window-controls'>
+    <button class='minimize'>&minus;</button>
+    <button class='close'>&times;</button>
+  </script>
   <script type="text/javascript" src="js/components.js"></script>
   <script type="text/javascript" src="js/database.js"></script>
   <script type="text/javascript" src="js/storage.js"></script>
@@ -259,6 +263,7 @@
   <script type="text/javascript" src="js/views/message_list_view.js"></script>
   <script type="text/javascript" src="js/views/conversation_view.js"></script>
   <script type="text/javascript" src="js/views/new_conversation_view.js"></script>
+  <script type="text/javascript" src="js/views/window_controls_view.js"></script>
   <script type="text/javascript" src="js/views/inbox_view.js"></script>
   <script type="text/javascript" src="js/inbox_controller.js"></script>
 

js/index.js

@@ -23,7 +23,9 @@
         if (bg.textsecure.storage.user.getNumber() === undefined) {
             window.location = '/options.html';
         } else {
-            new bg.Whisper.InboxView().$el.prependTo(bg.$('body',document));
+            extension.windows.getCurrent(function(appWindow) {
+                new bg.Whisper.InboxView({appWindow: appWindow}).$el.prependTo(bg.$('body',document));
+            });
         }
     });
 }());

js/panel_controller.js

@@ -121,6 +121,7 @@
                 id: 'inbox',
                 url: 'index.html',
                 type: 'panel',
+                frame: 'none',
                 focused: true,
                 width: 260, // 280 for chat
                 height: 440 // 420 for chat

js/views/inbox_view.js

@@ -56,7 +56,7 @@
         Whisper.InboxView = Whisper.View.extend({
             template: $('#inbox').html(),
             className: 'inbox',
-            initialize: function () {
+            initialize: function (options) {
                 this.render();
 
                 this.newConversationView = new Whisper.NewConversationView();
@@ -76,6 +76,10 @@
                 extension.windows.beforeUnload(function() {
                     this.inbox.stopListening();
                 }.bind(this));
+
+                new Whisper.WindowControlsView({
+                    appWindow: options.appWindow
+                }).$el.appendTo(this.$('#header'));
             },
             events: {
                 'click .fab': 'showCompose',

js/views/window_controls_view.js

@@ -0,0 +1,38 @@
+/* vim: ts=4:sw=4:expandtab
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+(function () {
+    'use strict';
+    window.Whisper = window.Whisper || {};
+
+    Whisper.WindowControlsView = Whisper.View.extend({
+        className: 'window-controls',
+        template: $('#window-controls').html(),
+        initialize: function(options) {
+            this.appWindow = options.appWindow;
+            this.render();
+        },
+        events: {
+            'click .close': 'hide',
+            'click .minimize': 'minimize'
+        },
+        hide: function() {
+          this.appWindow.hide();
+        },
+        minimize: function() {
+          this.appWindow.minimize();
+        }
+    });
+})();

stylesheets/_global.scss

@@ -38,6 +38,7 @@ body {
   background: #f2f2f2;
   box-shadow: 0 -4px 3px 4px rgba(darken($header-color, 30%), 0.8);
   color: $blue;
+  -webkit-app-region: drag;
 }
 
 .title-text {

stylesheets/_index.scss

@@ -1,3 +1,11 @@
+.window-controls {
+  text-align: right;
+
+  button {
+    -webkit-app-region: no-drag;
+  }
+}
+
 .gutter {
   padding: $header-height 0 0;
 }
@@ -17,6 +25,7 @@
 .socket-status {
   float: left;
   padding: 6px;
+  -webkit-app-region: no-drag;
 
   * {
     cursor: pointer;

stylesheets/manifest.css

@@ -46,7 +46,8 @@ body {
   line-height: 24px;
   background: #f2f2f2;
   box-shadow: 0 -4px 3px 4px rgba(165, 165, 165, 0.8);
-  color: #2090ea; }
+  color: #2090ea;
+  -webkit-app-region: drag; }
 
 .title-text {
   display: block;
@@ -251,6 +252,11 @@ img.emoji {
   .attachment-preview img {
     width: 100%; }
 
+.window-controls {
+  text-align: right; }
+  .window-controls button {
+    -webkit-app-region: no-drag; }
+
 .gutter {
   padding: 36px 0 0; }
 
@@ -263,7 +269,8 @@ img.emoji {
 
 .socket-status {
   float: left;
-  padding: 6px; }
+  padding: 6px;
+  -webkit-app-region: no-drag; }
   .socket-status * {
     cursor: pointer;
     padding-left: 20px;