fix flow edit

3 files changed, 26 insertions, 16 deletions

diff --git a/web/src/css/flowdetail.less b/web/src/css/flowdetail.less
index 3d9fadb0..d450bca5 100644
--- a/web/src/css/flowdetail.less
+++ b/web/src/css/flowdetail.less
@@ -64,17 +64,6 @@
     }
 }
 
-.header-table .inline-input {
-    display: inline-block;
-    width: 100%;
-    height: 100%;
-}
-
-.header-colon {
-    position: absolute;
-    opacity: 0;
-}
-
 .view-options {
     margin-top: 10px;
 }
@@ -117,6 +106,19 @@
     .header-value {
 
     }
+
+    // This exists so that you can copy
+    // and paste headers out of mitmweb.
+    .header-colon {
+        position: absolute;
+        opacity: 0;
+    }
+
+    .inline-input {
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+    }
 }
 
 .connection-table, .timing-table {
diff --git a/web/src/js/components/ContentView/ContentLoader.jsx b/web/src/js/components/ContentView/ContentLoader.jsx
index 697085a9..094ce18b 100644
--- a/web/src/js/components/ContentView/ContentLoader.jsx
+++ b/web/src/js/components/ContentView/ContentLoader.jsx
@@ -22,12 +22,15 @@ export default View => class extends React.Component {
     }
 
     componentWillMount() {
-        this.startRequest(this.props)
+        this.updateContent(this.props)
     }
 
     componentWillReceiveProps(nextProps) {
-        if (nextProps.message.contentHash !== this.props.message.contentHash) {
-            this.startRequest(nextProps)
+        if (
+            nextProps.message.content !== this.props.message.content ||
+            nextProps.message.contentHash !== this.props.message.contentHash
+        ) {
+            this.updateContent(nextProps)
         }
     }
 
@@ -37,13 +40,17 @@ export default View => class extends React.Component {
         }
     }
 
-    startRequest(props) {
+    updateContent(props) {
         if (this.state.request) {
             this.state.request.abort()
         }
+        // We have a few special cases where we do not need to make an HTTP request.
         if(props.message.contentLength === 0 || props.message.contentLength === null){
             return this.setState({request: undefined, content: ""})
         }
+        if(props.message.content !== undefined) {
+            return this.setState({request: undefined, content: props.message.content})
+        }
 
         let requestUrl = MessageUtils.getContentURL(props.flow, props.message)
 
diff --git a/web/src/js/components/FlowView/Headers.jsx b/web/src/js/components/FlowView/Headers.jsx
index e46b939d..2e181383 100644
--- a/web/src/js/components/FlowView/Headers.jsx
+++ b/web/src/js/components/FlowView/Headers.jsx
@@ -126,7 +126,8 @@ export default class Headers extends Component {
                                 onDone={val => this.onChange(i, 0, val)}
                                 onRemove={event => this.onRemove(i, 0, event)}
                                 onTab={event => this.onTab(i, 0, event)}
-                            /><span className="header-colon">:</span>
+                            />
+                            <span className="header-colon">:</span>
                         </td>
                         <td className="header-value">
                             <HeaderEditor