From dabf153e9291e4477446f474a3b0dc3cd176dad9 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Fri, 9 Sep 2016 19:40:35 -0700
Subject: [PATCH] Change raw view to textarea for better performance

---
 app/components/RequestUrlBar.js          | 26 +++++++++++++-----------
 app/components/base/Dropdown.js          |  1 +
 app/components/viewers/ResponseViewer.js |  8 ++++----
 app/css/components/urlbar.less           | 10 +++++++--
 4 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/app/components/RequestUrlBar.js b/app/components/RequestUrlBar.js
index 0e8c588369..114bf1b2f5 100644
--- a/app/components/RequestUrlBar.js
+++ b/app/components/RequestUrlBar.js
@@ -34,8 +34,7 @@ class RequestUrlBar extends Component {
     const hasError = !url;
 
     return (
-      <form className={classnames({'urlbar': true, 'urlbar--error': hasError})}
-            onSubmit={this._handleFormSubmit.bind(this)}>
+      <div className={classnames({'urlbar': true, 'urlbar--error': hasError})}>
         <Dropdown>
           <button type="button">
             <div className="tall">
@@ -56,16 +55,19 @@ class RequestUrlBar extends Component {
             ))}
           </ul>
         </Dropdown>
-        <div className="form-control">
-          <input
-            ref={n => this.input = n}
-            type="text"
-            placeholder="https://api.myproduct.com/v1/users"
-            defaultValue={url}
-            onChange={e => this._handleUrlChange(e.target.value)}/>
-        </div>
-        <button type="submit" className="urlbar__send-button">Send</button>
-      </form>
+        <form onSubmit={this._handleFormSubmit.bind(this)}>
+          <div className="form-control">
+            <input
+              ref={n => this.input = n}
+              type="text"
+              placeholder="https://api.myproduct.com/v1/users"
+              defaultValue={url}
+              onClick={e => e.preventDefault()}
+              onChange={e => this._handleUrlChange(e.target.value)}/>
+          </div>
+          <button type="submit">Send</button>
+        </form>
+      </div>
     );
   }
 }
diff --git a/app/components/base/Dropdown.js b/app/components/base/Dropdown.js
index 41ce7259f3..9415575865 100644
--- a/app/components/base/Dropdown.js
+++ b/app/components/base/Dropdown.js
@@ -62,6 +62,7 @@ class Dropdown extends Component {
     return (
       <div className={classes}
            onClick={this._handleClick.bind(this)}
+           onMouseDown={e => e.preventDefault()}
            ref={n => this._node = n}>
         {this.props.children}
         <div className="dropdown__backdrop"></div>
diff --git a/app/components/viewers/ResponseViewer.js b/app/components/viewers/ResponseViewer.js
index 9e2c74077c..15cb92732e 100644
--- a/app/components/viewers/ResponseViewer.js
+++ b/app/components/viewers/ResponseViewer.js
@@ -62,10 +62,10 @@ class ResponseViewer extends Component {
         );
       default: // Raw
         return (
-          <pre className="scrollable wide tall selectable monospace pad"
-               style={{fontSize: editorFontSize}}>
-            {body}
-          </pre>
+          <textarea className="scrollable wide tall selectable monospace pad no-resize"
+                    defaultValue={body}
+                    style={{fontSize: editorFontSize}}>
+          </textarea>
         )
     }
   }
diff --git a/app/css/components/urlbar.less b/app/css/components/urlbar.less
index 8ecc656b29..ccdd8dbf09 100644
--- a/app/css/components/urlbar.less
+++ b/app/css/components/urlbar.less
@@ -54,7 +54,7 @@
     min-width: 0;
   }
 
-  .urlbar__send-button {
+  form button {
     padding-right: @padding-md;
     padding-left: @padding-md;
   }
@@ -65,7 +65,13 @@
     display: inline-block;
   }
 
-  .urlbar__send-button,
+  form {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+  }
+
+  form button,
   & > .dropdown {
     height: 100%;