Add UI for submitting debug logs

Fixes #343

// FREEBIE

background.html

@@ -4,11 +4,10 @@
   <meta charset='utf-8'>
   <script type='text/x-tmpl-mustache' id='two-column'>
     <div class='title-bar' id='header'>
-      <div class='menu'>
+      <div class='global-menu menu'>
         <button class='hamburger'></button>
         <ul class='menu-list'>
-            <li><a class='new-group'>Create Group</a></li>
-            <li><a class='settings'>Settings</a></li>
+            <li><a class='show-debug-log'>Submit debug log</a></li>
         </ul>
       </div>
       <span class='title-text'>Signal</span>
@@ -256,6 +255,18 @@
     <button class='minimize'>&minus;</button>
     <button class='close'>&times;</button>
   </script>
+  <script type='text/x-tmpl-mustache' id='debug-log'>
+    <h1> Submit Debug Log </h1>
+    <form>
+      <textarea rows="5"></textarea>
+      <input class="submit" type='submit' value='Create Public Gist' />
+      <button class='close'>Cancel</button>
+    </form>
+    <div class='result'>
+      <a target='_blank'></a>
+      <div><button class='close'>Got it!</button></div>
+    </div>
+  </script>
   <script type="text/javascript" src="js/debugLog.js"></script>
   <script type="text/javascript" src="js/components.js"></script>
   <script type="text/javascript" src="js/database.js"></script>
@@ -273,6 +284,7 @@
   <script type="text/javascript" src="js/panel_controller.js"></script>
 
   <script type="text/javascript" src="js/views/whisper_view.js"></script>
+  <script type="text/javascript" src="js/views/debug_log_view.js"></script>
   <script type="text/javascript" src="js/views/toast_view.js"></script>
   <script type="text/javascript" src="js/views/attachment_preview_view.js"></script>
   <script type="text/javascript" src="js/views/file_input_view.js"></script>

js/views/debug_log_view.js

@@ -0,0 +1,35 @@
+/*
+ * vim: ts=4:sw=4:expandtab
+ */
+(function () {
+    'use strict';
+    window.Whisper = window.Whisper || {};
+
+    Whisper.DebugLogView = Whisper.View.extend({
+        templateName: 'debug-log',
+        className: 'debug-log',
+        initialize: function() {
+            this.render();
+            this.$('textarea').val(console.get());
+        },
+        events: {
+            'submit': 'submit',
+            'click .close': 'close'
+        },
+        close: function(e) {
+            e.preventDefault();
+            this.remove();
+        },
+        submit: function(e) {
+            e.preventDefault();
+            console.post(this.$('textarea').val()).then(function(url) {
+                this.$el.removeClass('loading');
+                var link = this.$('.result').show().find('a');
+                link.attr('href', url).text(url);
+            }.bind(this));
+            this.$('form').remove();
+            this.$el.addClass('loading');
+        }
+    });
+
+})();

js/views/inbox_view.js

@@ -71,7 +71,7 @@
         });
 
         Whisper.InboxView = Whisper.View.extend({
-            template: $('#two-column').html(),
+            templateName: 'two-column',
             className: 'inbox',
             initialize: function (options) {
                 this.render();
@@ -105,6 +105,9 @@
                 }).$el.appendTo(this.$('#header'));
             },
             events: {
+                'click': 'closeMenu',
+                'click .hamburger': 'toggleMenu',
+                'click .show-debug-log': 'showDebugLog',
                 'click .fab': 'showCompose',
                 'select .gutter .contact': 'openConversation'
             },
@@ -121,6 +124,18 @@
             },
             hideCompose: function() {
                 this.newConversationView.$el.remove();
+            },
+            toggleMenu: function() {
+                this.$('.global-menu .menu-list').toggle();
+            },
+            showDebugLog: function() {
+                this.$('.debug-log').remove();
+                new Whisper.DebugLogView().$el.appendTo(this.el);
+            },
+            closeMenu: function(e) {
+                if (e && !$(e.target).hasClass('hamburger')) {
+                    this.$('.global-menu .menu-list').hide();
+                }
             }
         });
     });

stylesheets/_global.scss

@@ -409,3 +409,43 @@ $avatar-size: 44px;
     to { transform: rotate(360deg); }
   }
 }
+
+.debug-log {
+  position: absolute;
+  width: 100%;
+  height: calc(100% - 1 * #{$header-height});
+  top: $header-height;
+  left: 0;
+  padding: 1em;
+  background: $grey_l;
+  z-index: 1;
+  overflow-y: auto;
+
+  textarea {
+    width: 100%;
+    resize: vertical;
+  }
+
+  button, input[type=submit] {
+    border-radius: 4px;
+    border: solid 1px #ccc;
+    cursor: pointer;
+    margin: 1em auto;
+    padding: 1em;
+    font-family: inherit;
+    color: $grey;
+    background: $grey_l;
+    box-shadow: 0 0 10px -5px rgba($grey, 0.5);
+
+    &:hover {
+      color: black;
+      box-shadow: 0 0 10px -3px rgba($grey, 0.7);
+    }
+  }
+
+  .result {
+    display: none;
+    text-align: center;
+    -webkit-user-select: text;
+  }
+}

stylesheets/manifest.css

@@ -360,6 +360,37 @@ img.emoji {
 @keyframes rotate {
   to {
     transform: rotate(360deg); } }
+.debug-log {
+  position: absolute;
+  width: 100%;
+  height: calc(100% - 1 * 36px);
+  top: 36px;
+  left: 0;
+  padding: 1em;
+  background: #f3f3f3;
+  z-index: 1;
+  overflow-y: auto; }
+  .debug-log textarea {
+    width: 100%;
+    resize: vertical; }
+  .debug-log button, .debug-log input[type=submit] {
+    border-radius: 4px;
+    border: solid 1px #ccc;
+    cursor: pointer;
+    margin: 1em auto;
+    padding: 1em;
+    font-family: inherit;
+    color: #616161;
+    background: #f3f3f3;
+    box-shadow: 0 0 10px -5px rgba(97, 97, 97, 0.5); }
+    .debug-log button:hover, .debug-log input[type=submit]:hover {
+      color: black;
+      box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7); }
+  .debug-log .result {
+    display: none;
+    text-align: center;
+    -webkit-user-select: text; }
+
 .gutter {
   background: #f3f3f3;
   padding: 36px 0 0; }