From a962d97bfb624eb4ef5f27b746bdd0336fe08cb3 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Mon, 22 Feb 2016 12:43:05 -0800
Subject: [PATCH] Fix debug log submission loading UX

This flow broke a bit with transition to modal debug log.

Restructure such that the loading class can be applied to an appropriate
element inside the modal. Ensure that the input elements are hidden when
submit is clicked, the result elements are shown when the log upload is
completed.

// FREEBIE
---
 background.html            | 4 ++--
 js/views/debug_log_view.js | 9 +++++----
 stylesheets/_global.scss   | 5 +++--
 stylesheets/manifest.css   | 6 +++---
 4 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/background.html b/background.html
index d29ba7987..4dc616e95 100644
--- a/background.html
+++ b/background.html
@@ -321,8 +321,8 @@
         <button class='close'>{{ cancel }}</button>
       </div>
       <div class='result'>
-        <a target='_blank'></a>
-        <div><button class='close'>{{ close }}</button></div>
+        <a class='hide' target='_blank'></a>
+        <div class='hide'><button class='close'>{{ close }}</button></div>
       </div>
     </div>
   </script>
diff --git a/js/views/debug_log_view.js b/js/views/debug_log_view.js
index 81b5a9e58..ac9e086a0 100644
--- a/js/views/debug_log_view.js
+++ b/js/views/debug_log_view.js
@@ -30,12 +30,13 @@
         submit: function(e) {
             e.preventDefault();
             console.post(this.$('textarea').val()).then(function(url) {
-                this.$el.removeClass('loading');
-                var link = this.$('.result').show().find('a');
+                this.$('.loading').removeClass('loading');
+                var link = this.$('.result').find('a');
                 link.attr('href', url).text(url);
+                this.$('.result .hide').removeClass('hide');
             }.bind(this));
-            this.$('form').remove();
-            this.$el.addClass('loading');
+            this.$('.buttons, textarea').remove();
+            this.$('.result').addClass('loading');
         }
     });
 
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index 969e1d0d7..68bb0713c 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -451,9 +451,10 @@ $avatar-size: 44px;
   }
 
   .result {
-    display: none;
     text-align: center;
-    -webkit-user-select: text;
+    a {
+      -webkit-user-select: text;
+    }
   }
 }
 .modal {
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 9934dba47..bd682a01d 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -353,9 +353,9 @@ img.emoji {
     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; }
+  text-align: center; }
+  .debug-log .result a {
+    -webkit-user-select: text; }
 
 .modal {
   position: absolute;