diff --git a/background.html b/background.html
index 196b5fee..59fc3bab 100644
--- a/background.html
+++ b/background.html
@@ -4,11 +4,10 @@
+
@@ -273,6 +284,7 @@
+
diff --git a/js/views/debug_log_view.js b/js/views/debug_log_view.js
new file mode 100644
index 00000000..4fe1e7f0
--- /dev/null
+++ b/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');
+ }
+ });
+
+})();
diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js
index 63fe13cb..8d6ea238 100644
--- a/js/views/inbox_view.js
+++ b/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();
+ }
}
});
});
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index ec017e9b..508c0c0b 100644
--- a/stylesheets/_global.scss
+++ b/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;
+ }
+}
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 88dd6b39..7b99278a 100644
--- a/stylesheets/manifest.css
+++ b/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; }