From 7f8c76faca2508724ff7971abc5248e187b278be Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Mon, 22 Feb 2016 12:17:54 -0800
Subject: [PATCH] Make debug log as big as possible

Tweak style to make the modal reasonably wide/tall, and use flexbox
to automatically expand the textarea.

// FREEBIE
---
 background.html            | 16 +++++++++-------
 js/views/debug_log_view.js |  2 +-
 stylesheets/_global.scss   | 24 +++++++++++++++++-------
 stylesheets/manifest.css   | 18 +++++++++++++-----
 4 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/background.html b/background.html
index 97f6e43fc..d29ba7987 100644
--- a/background.html
+++ b/background.html
@@ -310,14 +310,16 @@
   </script>
   <script type='text/x-tmpl-mustache' id='debug-log'>
     <div class='content'>
-      <a class='x close'>&times;</a>
-      <h1>{{ title }}</h1>
-      <p> {{ debugLogExplanation }}</p>
-      <form>
-        <textarea rows='5'></textarea>
-        <input class='submit' type='submit' value='{{ submit }}' />
+      <div>
+        <a class='x close'>&times;</a>
+        <h1> {{ title }} </h1>
+        <p> {{ debugLogExplanation }}</p>
+      </div>
+      <textarea rows='5'></textarea>
+      <div class='buttons'>
+        <button class='submit'>{{ submit }}</button>
         <button class='close'>{{ cancel }}</button>
-      </form>
+      </div>
       <div class='result'>
         <a target='_blank'></a>
         <div><button class='close'>{{ close }}</button></div>
diff --git a/js/views/debug_log_view.js b/js/views/debug_log_view.js
index 3ebece35b..81b5a9e58 100644
--- a/js/views/debug_log_view.js
+++ b/js/views/debug_log_view.js
@@ -13,7 +13,7 @@
             this.$('textarea').val(console.get());
         },
         events: {
-            'submit': 'submit',
+            'click .submit': 'submit',
             'click .close': 'close'
         },
         render_attributes: {
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index 0612f4fa8..969e1d0d7 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -410,19 +410,29 @@ $avatar-size: 44px;
 }
 
 .debug-log {
-  &.modal .content {
-    max-width: 90%;
+  &.modal {
+    padding: 50px;
+
+    .content {
+      margin: 0;
+      max-width: 100%;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+
+      textarea {
+        flex-grow: 1;
+        width: 100%;
+        resize: none;
+      }
+    }
   }
 
   ::-webkit-scrollbar-thumb {
     background: rgba(0,0,0,0.15);
   }
 
-  textarea {
-    width: 100%;
-    resize: vertical;
-  }
-
   button, input[type=submit] {
     border-radius: 4px;
     border: solid 1px #ccc;
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index b4b234532..9934dba47 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -324,13 +324,21 @@ img.emoji {
 @keyframes rotate {
   to {
     transform: rotate(360deg); } }
-.debug-log.modal .content {
-  max-width: 90%; }
+.debug-log.modal {
+  padding: 50px; }
+  .debug-log.modal .content {
+    margin: 0;
+    max-width: 100%;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column; }
+    .debug-log.modal .content textarea {
+      flex-grow: 1;
+      width: 100%;
+      resize: none; }
 .debug-log ::-webkit-scrollbar-thumb {
   background: rgba(0, 0, 0, 0.15); }
-.debug-log textarea {
-  width: 100%;
-  resize: vertical; }
 .debug-log button, .debug-log input[type=submit] {
   border-radius: 4px;
   border: solid 1px #ccc;