Merge branch 'master' of ssh.github.com:mitmproxy/mitmproxy

libmproxy/web/static/app.css

@@ -271,7 +271,8 @@ header .menu {
 }
 .flow-detail {
   width: 100%;
-  overflow: auto;
+  overflow-x: auto;
+  overflow-y: scroll;
 }
 .flow-detail nav {
   background-color: #F2F2F2;

libmproxy/web/static/app.js

@@ -1195,23 +1195,56 @@ var Image = React.createClass({displayName: "Image",
         }
     },
     render: function () {
-        var message_name = this.props.flow.request === this.props.message ? "request" : "response";
+        var url = MessageUtils.getContentURL(this.props.flow, this.props.message);
-        var url = "/flows/" + this.props.flow.id + "/" + message_name + "/content";
         return React.createElement("div", {className: "flowview-image"}, 
             React.createElement("img", {src: url, alt: "preview", className: "img-thumbnail"})
         );
     }
 });
 
+var RawMixin = {
+    getInitialState: function () {
+        return {
+            content: undefined
+        }
+    },
+    requestContent: function (nextProps) {
+        this.setState({content: undefined});
+        var request = MessageUtils.getContent(nextProps.flow, nextProps.message);
+        request.done(function (data) {
+            this.setState({content: data});
+        }.bind(this)).fail(function (jqXHR, textStatus, errorThrown) {
+            this.setState({content: "AJAX Error: " + textStatus});
+        }.bind(this));
+
+    },
+    componentWillMount: function () {
+        this.requestContent(this.props);
+    },
+    componentWillReceiveProps: function (nextProps) {
+        if (nextProps.message !== this.props.message) {
+            this.requestContent(nextProps);
+        }
+    },
+    render: function () {
+        if (!this.state.content) {
+            return React.createElement("div", {className: "text-center"}, 
+                React.createElement("i", {className: "fa fa-spinner fa-spin"})
+            );
+        }
+        return this.renderContent();
+    }
+};
+
 var Raw = React.createClass({displayName: "Raw",
+    mixins: [RawMixin],
     statics: {
         matches: function (message) {
             return true;
         }
     },
-    render: function () {
+    renderContent: function () {
-        //FIXME
+        return React.createElement("pre", null, this.state.content);
-        return React.createElement("div", null, "raw");
     }
 });
 
@@ -4426,6 +4459,7 @@ module.exports = (function() {
 
 },{"../flow/utils.js":21}],21:[function(require,module,exports){
 var _ = require("lodash");
+var $ = require("jquery");
 
 var MessageUtils = {
     getContentType: function (message) {
@@ -4461,6 +4495,18 @@ var MessageUtils = {
             }
         }
         return false;
+    },
+    getContentURL: function(flow, message){
+        if(message === flow.request){
+            message = "request";
+        } else if (message === flow.response){
+            message = "response";
+        }
+        return "/flows/" + flow.id + "/" + message + "/content";
+    },
+    getContent: function(flow, message){
+        var url = MessageUtils.getContentURL(flow, message);
+        return $.get(url);
     }
 };
 
@@ -4492,7 +4538,7 @@ module.exports = {
     MessageUtils: MessageUtils
 };
 
-},{"lodash":"lodash"}],22:[function(require,module,exports){
+},{"jquery":"jquery","lodash":"lodash"}],22:[function(require,module,exports){
 
 var _ = require("lodash");
 var $ = require("jquery");

web/src/css/flowdetail.less

@@ -5,7 +5,8 @@
 
 .flow-detail {
     width: 100%;
-    overflow: auto;
+    overflow-x: auto;
+    overflow-y: scroll;
 
     nav {
         background-color: #F2F2F2;

web/src/js/components/flowview/contentview.js

@@ -12,23 +12,56 @@ var Image = React.createClass({
         }
     },
     render: function () {
-        var message_name = this.props.flow.request === this.props.message ? "request" : "response";
+        var url = MessageUtils.getContentURL(this.props.flow, this.props.message);
-        var url = "/flows/" + this.props.flow.id + "/" + message_name + "/content";
         return <div className="flowview-image">
             <img src={url} alt="preview" className="img-thumbnail"/>
         </div>;
     }
 });
 
+var RawMixin = {
+    getInitialState: function () {
+        return {
+            content: undefined
+        }
+    },
+    requestContent: function (nextProps) {
+        this.setState({content: undefined});
+        var request = MessageUtils.getContent(nextProps.flow, nextProps.message);
+        request.done(function (data) {
+            this.setState({content: data});
+        }.bind(this)).fail(function (jqXHR, textStatus, errorThrown) {
+            this.setState({content: "AJAX Error: " + textStatus});
+        }.bind(this));
+
+    },
+    componentWillMount: function () {
+        this.requestContent(this.props);
+    },
+    componentWillReceiveProps: function (nextProps) {
+        if (nextProps.message !== this.props.message) {
+            this.requestContent(nextProps);
+        }
+    },
+    render: function () {
+        if (!this.state.content) {
+            return <div className="text-center">
+                <i className="fa fa-spinner fa-spin"></i>
+            </div>;
+        }
+        return this.renderContent();
+    }
+};
+
 var Raw = React.createClass({
+    mixins: [RawMixin],
     statics: {
         matches: function (message) {
             return true;
         }
     },
-    render: function () {
+    renderContent: function () {
-        //FIXME
+        return <pre>{this.state.content}</pre>;
-        return <div>raw</div>;
     }
 });
 

web/src/js/flow/utils.js

@@ -1,4 +1,5 @@
 var _ = require("lodash");
+var $ = require("jquery");
 
 var MessageUtils = {
     getContentType: function (message) {
@@ -34,6 +35,18 @@ var MessageUtils = {
             }
         }
         return false;
+    },
+    getContentURL: function(flow, message){
+        if(message === flow.request){
+            message = "request";
+        } else if (message === flow.response){
+            message = "response";
+        }
+        return "/flows/" + flow.id + "/" + message + "/content";
+    },
+    getContent: function(flow, message){
+        var url = MessageUtils.getContentURL(flow, message);
+        return $.get(url);
     }
 };