1 files changed, 60 insertions, 38 deletions

diff --git a/web/src/js/components/FlowView/Messages.jsx b/web/src/js/components/FlowView/Messages.jsx
index 9de25b5b..93c52660 100644
--- a/web/src/js/components/FlowView/Messages.jsx
+++ b/web/src/js/components/FlowView/Messages.jsx
@@ -5,6 +5,7 @@ import { connect } from 'react-redux'
 import { RequestUtils, isValidHttpVersion, parseUrl } from '../../flow/utils.js'
 import { formatTimeStamp } from '../../utils.js'
 import ContentView from '../ContentView'
+import ContentViewOptions from '../ContentView/ContentViewOptions'
 import ValidateEditor from '../ValueEditor/ValidateEditor'
 import ValueEditor from '../ValueEditor/ValueEditor'
 
@@ -81,27 +82,37 @@ const Message = connect(
 export class Request extends Component {
     render() {
         const { flow, isEdit, updateFlow, uploadContent } = this.props
-
+        let noContent =  !isEdit && (flow.request.contentLength == 0 || flow.request.contentLength == null)
         return (
             <section className="request">
-                <ToggleEdit/>
-                <RequestLine
-                    flow={flow}
-                    readonly={!isEdit}
-                    updateFlow={updateFlow}/>
-                <Headers
-                    message={flow.request}
-                    readonly={!isEdit}
-                    onChange={headers => updateFlow({ request: { headers } })}
-                />
-
-                <hr/>
-                <ContentView
-                    readonly={!isEdit}
-                    flow={flow}
-                    onContentChange={content => updateFlow({ request: {content}})}
-                    uploadContent={content => uploadContent(flow, content, "request")}
-                    message={flow.request}/>
+                <article>
+                    <ToggleEdit/>
+                    <RequestLine
+                        flow={flow}
+                        readonly={!isEdit}
+                        updateFlow={updateFlow}/>
+                    <Headers
+                        message={flow.request}
+                        readonly={!isEdit}
+                        onChange={headers => updateFlow({ request: { headers } })}
+                    />
+
+                    <hr/>
+                    <ContentView
+                        readonly={!isEdit}
+                        flow={flow}
+                        onContentChange={content => updateFlow({ request: {content}})}
+                        message={flow.request}/>
+                </article>
+                {!noContent &&
+                    <footer>
+                        <ContentViewOptions
+                            flow={flow}
+                            readonly={!isEdit}
+                            message={flow.request}
+                            uploadContent={content => uploadContent(flow, content, "request")}/>
+                    </footer>
+                }
             </section>
         )
     }
@@ -137,27 +148,38 @@ Request = Message(Request)
 export class Response extends Component {
     render() {
         const { flow, isEdit, updateFlow, uploadContent } = this.props
+        let noContent =  !isEdit && (flow.response.contentLength == 0 || flow.response.contentLength == null)
 
         return (
             <section className="response">
-                <ToggleEdit/>
-                <ResponseLine
-                    flow={flow}
-                    readonly={!isEdit}
-                    updateFlow={updateFlow}/>
-                <Headers
-                    message={flow.response}
-                    readonly={!isEdit}
-                    onChange={headers => updateFlow({ response: { headers } })}
-                />
-                <hr/>
-                <ContentView
-                    readonly={!isEdit}
-                    flow={flow}
-                    onContentChange={content => updateFlow({ response: {content}})}
-                    uploadContent={content => uploadContent(flow, content, "response")}
-                    message={flow.response}
-                />
+                <article>
+                    <ToggleEdit/>
+                    <ResponseLine
+                        flow={flow}
+                        readonly={!isEdit}
+                        updateFlow={updateFlow}/>
+                    <Headers
+                        message={flow.response}
+                        readonly={!isEdit}
+                        onChange={headers => updateFlow({ response: { headers } })}
+                    />
+                    <hr/>
+                    <ContentView
+                        readonly={!isEdit}
+                        flow={flow}
+                        onContentChange={content => updateFlow({ response: {content}})}
+                        message={flow.response}
+                    />
+                </article>
+                {!noContent &&
+                    <footer >
+                        <ContentViewOptions
+                            flow={flow}
+                            message={flow.response}
+                            uploadContent={content => uploadContent(flow, content, "response")}
+                            readonly={!isEdit}/>
+                    </footer>
+                }
             </section>
         )
     }
@@ -194,7 +216,7 @@ ErrorView.propTypes = {
 
 export function ErrorView({ flow }) {
     return (
-        <section>
+        <section className="error">
             <div className="alert alert-warning">
                 {flow.error.msg}
                 <div>