From ac5d74d42c0824b5789cc030bf39a447951e4804 Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Sat, 21 Mar 2015 21:55:02 +0100
Subject: web: fix bugs

---
 libmproxy/web/static/app.js       | 17 ++++++++++-------
 web/src/js/actions.js             |  1 +
 web/src/js/components/eventlog.js |  1 +
 web/src/js/components/header.js   |  2 +-
 web/src/js/components/mainview.js |  2 ++
 web/src/js/store/view.js          |  8 +++-----
 web/src/js/utils.js               |  1 +
 7 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/libmproxy/web/static/app.js b/libmproxy/web/static/app.js
index dae10a34..ef53c08f 100644
--- a/libmproxy/web/static/app.js
+++ b/libmproxy/web/static/app.js
@@ -421,6 +421,7 @@ module.exports = {
     ConnectionActions: ConnectionActions,
     FlowActions: FlowActions,
     StoreCmds: StoreCmds,
+    SettingsActions: SettingsActions,
     Query: Query
 };
 
@@ -622,6 +623,7 @@ var common = require("./common.js");
 var Query = require("../actions.js").Query;
 var VirtualScrollMixin = require("./virtualscroll.js");
 var views = require("../store/view.js");
+var _ = require("lodash");
 
 var LogMessage = React.createClass({displayName: "LogMessage",
     render: function () {
@@ -775,7 +777,7 @@ var EventLog = React.createClass({displayName: "EventLog",
 
 module.exports = EventLog;
 
-},{"../actions.js":2,"../store/view.js":19,"./common.js":4,"./virtualscroll.js":13,"react":"react"}],6:[function(require,module,exports){
+},{"../actions.js":2,"../store/view.js":19,"./common.js":4,"./virtualscroll.js":13,"lodash":"lodash","react":"react"}],6:[function(require,module,exports){
 var React = require("react");
 var _ = require("lodash");
 
@@ -1774,7 +1776,7 @@ var MainMenu = React.createClass({displayName: "MainMenu",
         this.setQuery(d);
     },
     onInterceptChange: function (val) {
-        SettingsActions.update({intercept: val});
+        actions.SettingsActions.update({intercept: val});
     },
     render: function () {
         var filter = this.getQuery()[Query.FILTER] || "";
@@ -2196,6 +2198,8 @@ var MainView = React.createClass({displayName: "MainView",
                     actions.FlowActions.revert(flow);
                 }
                 break;
+            case toputils.Key.SHIFT:
+                break;
             default:
                 console.debug("keydown", e.keyCode);
                 return;
@@ -4514,8 +4518,6 @@ var default_filt = function (elem) {
 
 function StoreView(store, filt, sortfun) {
     EventEmitter.call(this);
-    filt = filt || default_filt;
-    sortfun = sortfun || default_sort;
 
     this.store = store;
 
@@ -4539,10 +4541,10 @@ _.extend(StoreView.prototype, EventEmitter.prototype, {
         this.store.removeListener("recalculate", this.recalculate);
     },
     recalculate: function (filt, sortfun) {
-        filt = filt || default_filt;
-        sortfun = sortfun || default_sort;
+        filt = filt || this.filt || default_filt;
+        sortfun = sortfun || this.sortfun || default_sort;
         filt = filt.bind(this);
-        sortfun = sortfun.bind(this)
+        sortfun = sortfun.bind(this);
         this.filt = filt;
         this.sortfun = sortfun;
 
@@ -4633,6 +4635,7 @@ var Key = {
     TAB: 9,
     SPACE: 32,
     BACKSPACE: 8,
+    SHIFT: 16
 };
 // Add A-Z
 for (var i = 65; i <= 90; i++) {
diff --git a/web/src/js/actions.js b/web/src/js/actions.js
index 64cd68a7..1b29438c 100644
--- a/web/src/js/actions.js
+++ b/web/src/js/actions.js
@@ -117,5 +117,6 @@ module.exports = {
     ConnectionActions: ConnectionActions,
     FlowActions: FlowActions,
     StoreCmds: StoreCmds,
+    SettingsActions: SettingsActions,
     Query: Query
 };
\ No newline at end of file
diff --git a/web/src/js/components/eventlog.js b/web/src/js/components/eventlog.js
index 23508275..de69462b 100644
--- a/web/src/js/components/eventlog.js
+++ b/web/src/js/components/eventlog.js
@@ -3,6 +3,7 @@ var common = require("./common.js");
 var Query = require("../actions.js").Query;
 var VirtualScrollMixin = require("./virtualscroll.js");
 var views = require("../store/view.js");
+var _ = require("lodash");
 
 var LogMessage = React.createClass({
     render: function () {
diff --git a/web/src/js/components/header.js b/web/src/js/components/header.js
index d1684fb2..eca06e74 100644
--- a/web/src/js/components/header.js
+++ b/web/src/js/components/header.js
@@ -173,7 +173,7 @@ var MainMenu = React.createClass({
         this.setQuery(d);
     },
     onInterceptChange: function (val) {
-        SettingsActions.update({intercept: val});
+        actions.SettingsActions.update({intercept: val});
     },
     render: function () {
         var filter = this.getQuery()[Query.FILTER] || "";
diff --git a/web/src/js/components/mainview.js b/web/src/js/components/mainview.js
index 184ef49f..8eda2e9c 100644
--- a/web/src/js/components/mainview.js
+++ b/web/src/js/components/mainview.js
@@ -203,6 +203,8 @@ var MainView = React.createClass({
                     actions.FlowActions.revert(flow);
                 }
                 break;
+            case toputils.Key.SHIFT:
+                break;
             default:
                 console.debug("keydown", e.keyCode);
                 return;
diff --git a/web/src/js/store/view.js b/web/src/js/store/view.js
index 204d22da..d13822d5 100644
--- a/web/src/js/store/view.js
+++ b/web/src/js/store/view.js
@@ -14,8 +14,6 @@ var default_filt = function (elem) {
 
 function StoreView(store, filt, sortfun) {
     EventEmitter.call(this);
-    filt = filt || default_filt;
-    sortfun = sortfun || default_sort;
 
     this.store = store;
 
@@ -39,10 +37,10 @@ _.extend(StoreView.prototype, EventEmitter.prototype, {
         this.store.removeListener("recalculate", this.recalculate);
     },
     recalculate: function (filt, sortfun) {
-        filt = filt || default_filt;
-        sortfun = sortfun || default_sort;
+        filt = filt || this.filt || default_filt;
+        sortfun = sortfun || this.sortfun || default_sort;
         filt = filt.bind(this);
-        sortfun = sortfun.bind(this)
+        sortfun = sortfun.bind(this);
         this.filt = filt;
         this.sortfun = sortfun;
 
diff --git a/web/src/js/utils.js b/web/src/js/utils.js
index bcd3958d..48f69880 100644
--- a/web/src/js/utils.js
+++ b/web/src/js/utils.js
@@ -15,6 +15,7 @@ var Key = {
     TAB: 9,
     SPACE: 32,
     BACKSPACE: 8,
+    SHIFT: 16
 };
 // Add A-Z
 for (var i = 65; i <= 90; i++) {
-- 
cgit v1.2.3


From 02a61ea45dc1ca6d0c88b44adf83f68b791130e7 Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Sat, 21 Mar 2015 22:49:51 +0100
Subject: structure components

---
 libmproxy/protocol/http.py                 |    2 +
 libmproxy/web/static/app.js                | 1031 ++++++++++++++--------------
 web/src/js/components/flowdetail.js        |  399 -----------
 web/src/js/components/flowview/details.js  |  181 +++++
 web/src/js/components/flowview/index.js    |   74 ++
 web/src/js/components/flowview/messages.js |  102 +++
 web/src/js/components/flowview/nav.js      |   61 ++
 web/src/js/components/mainview.js          |    4 +-
 web/src/js/flow/utils.js                   |   12 +-
 9 files changed, 956 insertions(+), 910 deletions(-)
 delete mode 100644 web/src/js/components/flowdetail.js
 create mode 100644 web/src/js/components/flowview/details.js
 create mode 100644 web/src/js/components/flowview/index.js
 create mode 100644 web/src/js/components/flowview/messages.js
 create mode 100644 web/src/js/components/flowview/nav.js

diff --git a/libmproxy/protocol/http.py b/libmproxy/protocol/http.py
index 49310ec3..00086c21 100644
--- a/libmproxy/protocol/http.py
+++ b/libmproxy/protocol/http.py
@@ -119,6 +119,8 @@ class HTTPMessage(stateobject.StateObject):
         if short:
             if self.content:
                 ret["contentLength"] = len(self.content)
+            elif self.content == CONTENT_MISSING:
+                ret["contentLength"] = None
             else:
                 ret["contentLength"] = 0
         return ret
diff --git a/libmproxy/web/static/app.js b/libmproxy/web/static/app.js
index ef53c08f..04d6f282 100644
--- a/libmproxy/web/static/app.js
+++ b/libmproxy/web/static/app.js
@@ -443,7 +443,7 @@ $(function () {
 
 
 
-},{"./components/proxyapp.js":12,"./connection":14,"jquery":"jquery","react":"react","react-router":"react-router"}],4:[function(require,module,exports){
+},{"./components/proxyapp.js":15,"./connection":17,"jquery":"jquery","react":"react","react-router":"react-router"}],4:[function(require,module,exports){
 var React = require("react");
 var ReactRouter = require("react-router");
 var _ = require("lodash");
@@ -777,156 +777,399 @@ var EventLog = React.createClass({displayName: "EventLog",
 
 module.exports = EventLog;
 
-},{"../actions.js":2,"../store/view.js":19,"./common.js":4,"./virtualscroll.js":13,"lodash":"lodash","react":"react"}],6:[function(require,module,exports){
+},{"../actions.js":2,"../store/view.js":22,"./common.js":4,"./virtualscroll.js":16,"lodash":"lodash","react":"react"}],6:[function(require,module,exports){
 var React = require("react");
-var _ = require("lodash");
-
-var common = require("./common.js");
-var actions = require("../actions.js");
-var flowutils = require("../flow/utils.js");
-var toputils = require("../utils.js");
+var RequestUtils = require("../flow/utils.js").RequestUtils;
+var ResponseUtils = require("../flow/utils.js").ResponseUtils;
+var utils = require("../utils.js");
 
-var NavAction = React.createClass({displayName: "NavAction",
-    onClick: function (e) {
-        e.preventDefault();
-        this.props.onClick();
+var TLSColumn = React.createClass({displayName: "TLSColumn",
+    statics: {
+        Title: React.createClass({displayName: "Title",
+            render: function(){
+                return React.createElement("th", React.__spread({},  this.props, {className: "col-tls " + (this.props.className || "") }));
+            }
+        }),
+        sortKeyFun: function(flow){
+            return flow.request.scheme;
+        }
     },
     render: function () {
-        return (
-            React.createElement("a", {title: this.props.title, 
-                href: "#", 
-                className: "nav-action", 
-                onClick: this.onClick}, 
-                React.createElement("i", {className: "fa fa-fw " + this.props.icon})
-            )
-        );
+        var flow = this.props.flow;
+        var ssl = (flow.request.scheme == "https");
+        var classes;
+        if (ssl) {
+            classes = "col-tls col-tls-https";
+        } else {
+            classes = "col-tls col-tls-http";
+        }
+        return React.createElement("td", {className: classes});
     }
 });
 
-var FlowDetailNav = React.createClass({displayName: "FlowDetailNav",
+
+var IconColumn = React.createClass({displayName: "IconColumn",
+    statics: {
+        Title: React.createClass({displayName: "Title",
+            render: function(){
+                return React.createElement("th", React.__spread({},  this.props, {className: "col-icon " + (this.props.className || "") }));
+            }
+        })
+    },
     render: function () {
         var flow = this.props.flow;
 
-        var tabs = this.props.tabs.map(function (e) {
-            var str = e.charAt(0).toUpperCase() + e.slice(1);
-            var className = this.props.active === e ? "active" : "";
-            var onClick = function (event) {
-                this.props.selectTab(e);
-                event.preventDefault();
-            }.bind(this);
-            return React.createElement("a", {key: e, 
-                href: "#", 
-                className: className, 
-                onClick: onClick}, str);
-        }.bind(this));
+        var icon;
+        if (flow.response) {
+            var contentType = ResponseUtils.getContentType(flow.response);
 
-        var acceptButton = null;
-        if(flow.intercepted){
-            acceptButton = React.createElement(NavAction, {title: "[a]ccept intercepted flow", icon: "fa-play", onClick: actions.FlowActions.accept.bind(null, flow)});
+            //TODO: We should assign a type to the flow somewhere else.
+            if (flow.response.code == 304) {
+                icon = "resource-icon-not-modified";
+            } else if (300 <= flow.response.code && flow.response.code < 400) {
+                icon = "resource-icon-redirect";
+            } else if (contentType && contentType.indexOf("image") >= 0) {
+                icon = "resource-icon-image";
+            } else if (contentType && contentType.indexOf("javascript") >= 0) {
+                icon = "resource-icon-js";
+            } else if (contentType && contentType.indexOf("css") >= 0) {
+                icon = "resource-icon-css";
+            } else if (contentType && contentType.indexOf("html") >= 0) {
+                icon = "resource-icon-document";
+            }
         }
-        var revertButton = null;
-        if(flow.modified){
-            revertButton = React.createElement(NavAction, {title: "revert changes to flow [V]", icon: "fa-history", onClick: actions.FlowActions.revert.bind(null, flow)});
+        if (!icon) {
+            icon = "resource-icon-plain";
         }
 
-        return (
-            React.createElement("nav", {ref: "head", className: "nav-tabs nav-tabs-sm"}, 
-                tabs, 
-                React.createElement(NavAction, {title: "[d]elete flow", icon: "fa-trash", onClick: actions.FlowActions.delete.bind(null, flow)}), 
-                React.createElement(NavAction, {title: "[D]uplicate flow", icon: "fa-copy", onClick: actions.FlowActions.duplicate.bind(null, flow)}), 
-                React.createElement(NavAction, {disabled: true, title: "[r]eplay flow", icon: "fa-repeat", onClick: actions.FlowActions.replay.bind(null, flow)}), 
-                acceptButton, 
-                revertButton
-            )
+
+        icon += " resource-icon";
+        return React.createElement("td", {className: "col-icon"}, 
+            React.createElement("div", {className: icon})
         );
     }
 });
 
-var Headers = React.createClass({displayName: "Headers",
+var PathColumn = React.createClass({displayName: "PathColumn",
+    statics: {
+        Title: React.createClass({displayName: "Title",
+            render: function(){
+                return React.createElement("th", React.__spread({},  this.props, {className: "col-path " + (this.props.className || "") }), "Path");
+            }
+        }),
+        sortKeyFun: function(flow){
+            return RequestUtils.pretty_url(flow.request);
+        }
+    },
     render: function () {
-        var rows = this.props.message.headers.map(function (header, i) {
-            return (
-                React.createElement("tr", {key: i}, 
-                    React.createElement("td", {className: "header-name"}, header[0] + ":"), 
-                    React.createElement("td", {className: "header-value"}, header[1])
-                )
-            );
-        });
-        return (
-            React.createElement("table", {className: "header-table"}, 
-                React.createElement("tbody", null, 
-                    rows
-                )
-            )
+        var flow = this.props.flow;
+        return React.createElement("td", {className: "col-path"}, 
+            flow.request.is_replay ? React.createElement("i", {className: "fa fa-fw fa-repeat pull-right"}) : null, 
+            flow.intercepted ? React.createElement("i", {className: "fa fa-fw fa-pause pull-right"}) : null, 
+             RequestUtils.pretty_url(flow.request) 
         );
     }
 });
 
-var FlowDetailRequest = React.createClass({displayName: "FlowDetailRequest",
+
+var MethodColumn = React.createClass({displayName: "MethodColumn",
+    statics: {
+        Title: React.createClass({displayName: "Title",
+            render: function(){
+                return React.createElement("th", React.__spread({},  this.props, {className: "col-method " + (this.props.className || "") }), "Method");
+            }
+        }),
+        sortKeyFun: function(flow){
+            return flow.request.method;
+        }
+    },
     render: function () {
         var flow = this.props.flow;
-        var first_line = [
-            flow.request.method,
-            flowutils.RequestUtils.pretty_url(flow.request),
-            "HTTP/" + flow.request.httpversion.join(".")
-        ].join(" ");
-        var content = null;
-        if (flow.request.contentLength > 0) {
-            content = "Request Content Size: " + toputils.formatSize(flow.request.contentLength);
+        return React.createElement("td", {className: "col-method"}, flow.request.method);
+    }
+});
+
+
+var StatusColumn = React.createClass({displayName: "StatusColumn",
+    statics: {
+        Title: React.createClass({displayName: "Title",
+            render: function(){
+                return React.createElement("th", React.__spread({},  this.props, {className: "col-status " + (this.props.className || "") }), "Status");
+            }
+        }),
+        sortKeyFun: function(flow){
+            return flow.response ? flow.response.code : undefined;
+        }
+    },
+    render: function () {
+        var flow = this.props.flow;
+        var status;
+        if (flow.response) {
+            status = flow.response.code;
         } else {
-            content = React.createElement("div", {className: "alert alert-info"}, "No Content");
+            status = null;
         }
+        return React.createElement("td", {className: "col-status"}, status);
+    }
+});
 
-        //TODO: Styling
 
-        return (
-            React.createElement("section", null, 
-                React.createElement("div", {className: "first-line"}, first_line ), 
-                React.createElement(Headers, {message: flow.request}), 
-                React.createElement("hr", null), 
-                content
-            )
-        );
+var SizeColumn = React.createClass({displayName: "SizeColumn",
+    statics: {
+        Title: React.createClass({displayName: "Title",
+            render: function(){
+                return React.createElement("th", React.__spread({},  this.props, {className: "col-size " + (this.props.className || "") }), "Size");
+            }
+        }),
+        sortKeyFun: function(flow){
+            var total = flow.request.contentLength;
+            if (flow.response) {
+                total += flow.response.contentLength || 0;
+            }
+            return total;
+        }
+    },
+    render: function () {
+        var flow = this.props.flow;
+
+        var total = flow.request.contentLength;
+        if (flow.response) {
+            total += flow.response.contentLength || 0;
+        }
+        var size = utils.formatSize(total);
+        return React.createElement("td", {className: "col-size"}, size);
     }
 });
 
-var FlowDetailResponse = React.createClass({displayName: "FlowDetailResponse",
+
+var TimeColumn = React.createClass({displayName: "TimeColumn",
+    statics: {
+        Title: React.createClass({displayName: "Title",
+            render: function(){
+                return React.createElement("th", React.__spread({},  this.props, {className: "col-time " + (this.props.className || "") }), "Time");
+            }
+        }),
+        sortKeyFun: function(flow){
+            if(flow.response) {
+                return flow.response.timestamp_end - flow.request.timestamp_start;
+            }
+        }
+    },
     render: function () {
         var flow = this.props.flow;
-        var first_line = [
-            "HTTP/" + flow.response.httpversion.join("."),
-            flow.response.code,
-            flow.response.msg
-        ].join(" ");
-        var content = null;
-        if (flow.response.contentLength > 0) {
-            content = "Response Content Size: " + toputils.formatSize(flow.response.contentLength);
+        var time;
+        if (flow.response) {
+            time = utils.formatTimeDelta(1000 * (flow.response.timestamp_end - flow.request.timestamp_start));
         } else {
-            content = React.createElement("div", {className: "alert alert-info"}, "No Content");
+            time = "...";
         }
+        return React.createElement("td", {className: "col-time"}, time);
+    }
+});
 
-        //TODO: Styling
+
+var all_columns = [
+    TLSColumn,
+    IconColumn,
+    PathColumn,
+    MethodColumn,
+    StatusColumn,
+    SizeColumn,
+    TimeColumn
+];
+
+module.exports = all_columns;
+
+},{"../flow/utils.js":20,"../utils.js":23,"react":"react"}],7:[function(require,module,exports){
+var React = require("react");
+var common = require("./common.js");
+var utils = require("../utils.js");
+var _ = require("lodash");
+
+var VirtualScrollMixin = require("./virtualscroll.js");
+var flowtable_columns = require("./flowtable-columns.js");
+
+var FlowRow = React.createClass({displayName: "FlowRow",
+    render: function () {
+        var flow = this.props.flow;
+        var columns = this.props.columns.map(function (Column) {
+            return React.createElement(Column, {key: Column.displayName, flow: flow});
+        }.bind(this));
+        var className = "";
+        if (this.props.selected) {
+            className += " selected";
+        }
+        if (this.props.highlighted) {
+            className += " highlighted";
+        }
+        if (flow.intercepted) {
+            className += " intercepted";
+        }
+        if (flow.request) {
+            className += " has-request";
+        }
+        if (flow.response) {
+            className += " has-response";
+        }
 
         return (
-            React.createElement("section", null, 
-                React.createElement("div", {className: "first-line"}, first_line ), 
-                React.createElement(Headers, {message: flow.response}), 
-                React.createElement("hr", null), 
-                content
-            )
+            React.createElement("tr", {className: className, onClick: this.props.selectFlow.bind(null, flow)}, 
+                columns
+            ));
+    },
+    shouldComponentUpdate: function (nextProps) {
+        return true;
+        // Further optimization could be done here
+        // by calling forceUpdate on flow updates, selection changes and column changes.
+        //return (
+        //(this.props.columns.length !== nextProps.columns.length) ||
+        //(this.props.selected !== nextProps.selected)
+        //);
+    }
+});
+
+var FlowTableHead = React.createClass({displayName: "FlowTableHead",
+    getInitialState: function(){
+        return {
+            sortColumn: undefined,
+            sortDesc: false
+        };
+    },
+    onClick: function(Column){
+        var sortDesc = this.state.sortDesc;
+        var hasSort = Column.sortKeyFun;
+        if(Column === this.state.sortColumn){
+            sortDesc = !sortDesc;
+            this.setState({
+                sortDesc: sortDesc
+            });
+        } else {
+            this.setState({
+                sortColumn: hasSort && Column,
+                sortDesc: false
+            })
+        }
+        var sortKeyFun;
+        if(!sortDesc){
+            sortKeyFun = Column.sortKeyFun;
+        } else {
+            sortKeyFun = hasSort && function(){
+                var k = Column.sortKeyFun.apply(this, arguments);
+                if(_.isString(k)){
+                    return utils.reverseString(""+k);
+                } else {
+                    return -k;
+                }
+            }
+        }
+        this.props.setSortKeyFun(sortKeyFun);
+    },
+    render: function () {
+        var columns = this.props.columns.map(function (Column) {
+            var onClick = this.onClick.bind(this, Column);
+            var className;
+            if(this.state.sortColumn === Column) {
+                if(this.state.sortDesc){
+                    className = "sort-desc";
+                } else {
+                    className = "sort-asc";
+                }
+            }
+            return React.createElement(Column.Title, {
+                        key: Column.displayName, 
+                        onClick: onClick, 
+                        className: className});
+        }.bind(this));
+        return React.createElement("thead", null, 
+            React.createElement("tr", null, columns)
+        );
+    }
+});
+
+
+var ROW_HEIGHT = 32;
+
+var FlowTable = React.createClass({displayName: "FlowTable",
+    mixins: [common.StickyHeadMixin, common.AutoScrollMixin, VirtualScrollMixin],
+    getInitialState: function () {
+        return {
+            columns: flowtable_columns
+        };
+    },
+    _listen: function(view){
+        if(!view){
+            return;
+        }
+        view.addListener("add", this.onChange);
+        view.addListener("update", this.onChange);
+        view.addListener("remove", this.onChange);
+        view.addListener("recalculate", this.onChange);
+    },
+    componentWillMount: function () {
+        this._listen(this.props.view);
+    },
+    componentWillReceiveProps: function (nextProps) {
+        if (nextProps.view !== this.props.view) {
+            if (this.props.view) {
+                this.props.view.removeListener("add");
+                this.props.view.removeListener("update");
+                this.props.view.removeListener("remove");
+                this.props.view.removeListener("recalculate");
+            }
+            this._listen(nextProps.view);
+        }
+    },
+    getDefaultProps: function () {
+        return {
+            rowHeight: ROW_HEIGHT
+        };
+    },
+    onScrollFlowTable: function () {
+        this.adjustHead();
+        this.onScroll();
+    },
+    onChange: function () {
+        this.forceUpdate();
+    },
+    scrollIntoView: function (flow) {
+        this.scrollRowIntoView(
+            this.props.view.index(flow),
+            this.refs.body.getDOMNode().offsetTop
+        );
+    },
+    renderRow: function (flow) {
+        var selected = (flow === this.props.selected);
+        var highlighted =
+            (
+            this.props.view._highlight &&
+            this.props.view._highlight[flow.id]
+            );
+
+        return React.createElement(FlowRow, {key: flow.id, 
+            ref: flow.id, 
+            flow: flow, 
+            columns: this.state.columns, 
+            selected: selected, 
+            highlighted: highlighted, 
+            selectFlow: this.props.selectFlow}
         );
-    }
-});
-
-var FlowDetailError = React.createClass({displayName: "FlowDetailError",
+    },
     render: function () {
-        var flow = this.props.flow;
+        //console.log("render flowtable", this.state.start, this.state.stop, this.props.selected);
+        var flows = this.props.view ? this.props.view.list : [];
+
+        var rows = this.renderRows(flows);
+
         return (
-            React.createElement("section", null, 
-                React.createElement("div", {className: "alert alert-warning"}, 
-                flow.error.msg, 
-                    React.createElement("div", null, 
-                        React.createElement("small", null,  toputils.formatTimeStamp(flow.error.timestamp) )
+            React.createElement("div", {className: "flow-table", onScroll: this.onScrollFlowTable}, 
+                React.createElement("table", null, 
+                    React.createElement(FlowTableHead, {ref: "head", 
+                        columns: this.state.columns, 
+                        setSortKeyFun: this.props.setSortKeyFun}), 
+                    React.createElement("tbody", {ref: "body"}, 
+                         this.getPlaceholderTop(flows.length), 
+                        rows, 
+                         this.getPlaceholderBottom(flows.length) 
                     )
                 )
             )
@@ -934,6 +1177,15 @@ var FlowDetailError = React.createClass({displayName: "FlowDetailError",
     }
 });
 
+module.exports = FlowTable;
+
+
+},{"../utils.js":23,"./common.js":4,"./flowtable-columns.js":6,"./virtualscroll.js":16,"lodash":"lodash","react":"react"}],8:[function(require,module,exports){
+var React = require("react");
+var _ = require("lodash");
+
+var utils = require("../../utils.js");
+
 var TimeStamp = React.createClass({displayName: "TimeStamp",
     render: function () {
 
@@ -942,11 +1194,11 @@ var TimeStamp = React.createClass({displayName: "TimeStamp",
             return React.createElement("tr", null);
         }
 
-        var ts = toputils.formatTimeStamp(this.props.t);
+        var ts = utils.formatTimeStamp(this.props.t);
 
         var delta;
         if (this.props.deltaTo) {
-            delta = toputils.formatTimeDelta(1000 * (this.props.t - this.props.deltaTo));
+            delta = utils.formatTimeDelta(1000 * (this.props.t - this.props.deltaTo));
             delta = React.createElement("span", {className: "text-muted"}, "(" + delta + ")");
         } else {
             delta = null;
@@ -1086,7 +1338,7 @@ var Timing = React.createClass({displayName: "Timing",
     }
 });
 
-var FlowDetailConnectionInfo = React.createClass({displayName: "FlowDetailConnectionInfo",
+var Details = React.createClass({displayName: "Details",
     render: function () {
         var flow = this.props.flow;
         var client_conn = flow.client_conn;
@@ -1109,14 +1361,25 @@ var FlowDetailConnectionInfo = React.createClass({displayName: "FlowDetailConnec
     }
 });
 
+module.exports = Details;
+
+},{"../../utils.js":23,"lodash":"lodash","react":"react"}],9:[function(require,module,exports){
+var React = require("react");
+var _ = require("lodash");
+
+var common = require("../common.js");
+var Nav = require("./nav.js");
+var Messages = require("./messages.js");
+var Details = require("./details.js");
+
 var allTabs = {
-    request: FlowDetailRequest,
-    response: FlowDetailResponse,
-    error: FlowDetailError,
-    details: FlowDetailConnectionInfo
+    request: Messages.Request,
+    response: Messages.Response,
+    error: Messages.Error,
+    details: Details
 };
 
-var FlowDetail = React.createClass({displayName: "FlowDetail",
+var FlowView = React.createClass({displayName: "FlowView",
     mixins: [common.StickyHeadMixin, common.Navigation, common.State],
     getTabs: function (flow) {
         var tabs = [];
@@ -1163,7 +1426,7 @@ var FlowDetail = React.createClass({displayName: "FlowDetail",
         var Tab = allTabs[active];
         return (
             React.createElement("div", {className: "flow-detail", onScroll: this.adjustHead}, 
-                React.createElement(FlowDetailNav, {ref: "head", 
+                React.createElement(Nav, {ref: "head", 
                     flow: flow, 
                     tabs: tabs, 
                     active: active, 
@@ -1174,414 +1437,176 @@ var FlowDetail = React.createClass({displayName: "FlowDetail",
     }
 });
 
-module.exports = {
-    FlowDetail: FlowDetail
-};
+module.exports = FlowView;
 
-},{"../actions.js":2,"../flow/utils.js":17,"../utils.js":20,"./common.js":4,"lodash":"lodash","react":"react"}],7:[function(require,module,exports){
+},{"../common.js":4,"./details.js":8,"./messages.js":10,"./nav.js":11,"lodash":"lodash","react":"react"}],10:[function(require,module,exports){
 var React = require("react");
-var RequestUtils = require("../flow/utils.js").RequestUtils;
-var ResponseUtils = require("../flow/utils.js").ResponseUtils;
-var utils = require("../utils.js");
-
-var TLSColumn = React.createClass({displayName: "TLSColumn",
-    statics: {
-        Title: React.createClass({displayName: "Title",
-            render: function(){
-                return React.createElement("th", React.__spread({},  this.props, {className: "col-tls " + (this.props.className || "") }));
-            }
-        }),
-        sortKeyFun: function(flow){
-            return flow.request.scheme;
-        }
-    },
-    render: function () {
-        var flow = this.props.flow;
-        var ssl = (flow.request.scheme == "https");
-        var classes;
-        if (ssl) {
-            classes = "col-tls col-tls-https";
-        } else {
-            classes = "col-tls col-tls-http";
-        }
-        return React.createElement("td", {className: classes});
-    }
-});
-
-
-var IconColumn = React.createClass({displayName: "IconColumn",
-    statics: {
-        Title: React.createClass({displayName: "Title",
-            render: function(){
-                return React.createElement("th", React.__spread({},  this.props, {className: "col-icon " + (this.props.className || "") }));
-            }
-        })
-    },
-    render: function () {
-        var flow = this.props.flow;
-
-        var icon;
-        if (flow.response) {
-            var contentType = ResponseUtils.getContentType(flow.response);
-
-            //TODO: We should assign a type to the flow somewhere else.
-            if (flow.response.code == 304) {
-                icon = "resource-icon-not-modified";
-            } else if (300 <= flow.response.code && flow.response.code < 400) {
-                icon = "resource-icon-redirect";
-            } else if (contentType && contentType.indexOf("image") >= 0) {
-                icon = "resource-icon-image";
-            } else if (contentType && contentType.indexOf("javascript") >= 0) {
-                icon = "resource-icon-js";
-            } else if (contentType && contentType.indexOf("css") >= 0) {
-                icon = "resource-icon-css";
-            } else if (contentType && contentType.indexOf("html") >= 0) {
-                icon = "resource-icon-document";
-            }
-        }
-        if (!icon) {
-            icon = "resource-icon-plain";
-        }
-
 
-        icon += " resource-icon";
-        return React.createElement("td", {className: "col-icon"}, 
-            React.createElement("div", {className: icon})
-        );
-    }
-});
+var flowutils = require("../../flow/utils.js");
+var utils = require("../../utils.js");
 
-var PathColumn = React.createClass({displayName: "PathColumn",
-    statics: {
-        Title: React.createClass({displayName: "Title",
-            render: function(){
-                return React.createElement("th", React.__spread({},  this.props, {className: "col-path " + (this.props.className || "") }), "Path");
-            }
-        }),
-        sortKeyFun: function(flow){
-            return RequestUtils.pretty_url(flow.request);
-        }
-    },
+var Headers = React.createClass({displayName: "Headers",
     render: function () {
-        var flow = this.props.flow;
-        return React.createElement("td", {className: "col-path"}, 
-            flow.request.is_replay ? React.createElement("i", {className: "fa fa-fw fa-repeat pull-right"}) : null, 
-            flow.intercepted ? React.createElement("i", {className: "fa fa-fw fa-pause pull-right"}) : null, 
-             RequestUtils.pretty_url(flow.request) 
+        var rows = this.props.message.headers.map(function (header, i) {
+            return (
+                React.createElement("tr", {key: i}, 
+                    React.createElement("td", {className: "header-name"}, header[0] + ":"), 
+                    React.createElement("td", {className: "header-value"}, header[1])
+                )
+            );
+        });
+        return (
+            React.createElement("table", {className: "header-table"}, 
+                React.createElement("tbody", null, 
+                    rows
+                )
+            )
         );
     }
 });
 
-
-var MethodColumn = React.createClass({displayName: "MethodColumn",
-    statics: {
-        Title: React.createClass({displayName: "Title",
-            render: function(){
-                return React.createElement("th", React.__spread({},  this.props, {className: "col-method " + (this.props.className || "") }), "Method");
-            }
-        }),
-        sortKeyFun: function(flow){
-            return flow.request.method;
-        }
-    },
-    render: function () {
-        var flow = this.props.flow;
-        return React.createElement("td", {className: "col-method"}, flow.request.method);
-    }
-});
-
-
-var StatusColumn = React.createClass({displayName: "StatusColumn",
-    statics: {
-        Title: React.createClass({displayName: "Title",
-            render: function(){
-                return React.createElement("th", React.__spread({},  this.props, {className: "col-status " + (this.props.className || "") }), "Status");
-            }
-        }),
-        sortKeyFun: function(flow){
-            return flow.response ? flow.response.code : undefined;
-        }
-    },
-    render: function () {
-        var flow = this.props.flow;
-        var status;
-        if (flow.response) {
-            status = flow.response.code;
-        } else {
-            status = null;
-        }
-        return React.createElement("td", {className: "col-status"}, status);
-    }
-});
-
-
-var SizeColumn = React.createClass({displayName: "SizeColumn",
-    statics: {
-        Title: React.createClass({displayName: "Title",
-            render: function(){
-                return React.createElement("th", React.__spread({},  this.props, {className: "col-size " + (this.props.className || "") }), "Size");
-            }
-        }),
-        sortKeyFun: function(flow){
-            var total = flow.request.contentLength;
-            if (flow.response) {
-                total += flow.response.contentLength || 0;
-            }
-            return total;
-        }
-    },
-    render: function () {
-        var flow = this.props.flow;
-
-        var total = flow.request.contentLength;
-        if (flow.response) {
-            total += flow.response.contentLength || 0;
-        }
-        var size = utils.formatSize(total);
-        return React.createElement("td", {className: "col-size"}, size);
-    }
-});
-
-
-var TimeColumn = React.createClass({displayName: "TimeColumn",
-    statics: {
-        Title: React.createClass({displayName: "Title",
-            render: function(){
-                return React.createElement("th", React.__spread({},  this.props, {className: "col-time " + (this.props.className || "") }), "Time");
-            }
-        }),
-        sortKeyFun: function(flow){
-            if(flow.response) {
-                return flow.response.timestamp_end - flow.request.timestamp_start;
-            }
-        }
-    },
+var Request = React.createClass({displayName: "Request",
     render: function () {
         var flow = this.props.flow;
-        var time;
-        if (flow.response) {
-            time = utils.formatTimeDelta(1000 * (flow.response.timestamp_end - flow.request.timestamp_start));
+        var first_line = [
+            flow.request.method,
+            flowutils.RequestUtils.pretty_url(flow.request),
+            "HTTP/" + flow.request.httpversion.join(".")
+        ].join(" ");
+        var content = null;
+        if (flow.request.contentLength > 0) {
+            content = "Request Content Size: " + utils.formatSize(flow.request.contentLength);
         } else {
-            time = "...";
-        }
-        return React.createElement("td", {className: "col-time"}, time);
-    }
-});
-
-
-var all_columns = [
-    TLSColumn,
-    IconColumn,
-    PathColumn,
-    MethodColumn,
-    StatusColumn,
-    SizeColumn,
-    TimeColumn
-];
-
-module.exports = all_columns;
-
-},{"../flow/utils.js":17,"../utils.js":20,"react":"react"}],8:[function(require,module,exports){
-var React = require("react");
-var common = require("./common.js");
-var utils = require("../utils.js");
-var _ = require("lodash");
+            content = React.createElement("div", {className: "alert alert-info"}, "No Content");
+        }
 
-var VirtualScrollMixin = require("./virtualscroll.js");
-var flowtable_columns = require("./flowtable-columns.js");
+        //TODO: Styling
 
-var FlowRow = React.createClass({displayName: "FlowRow",
+        return (
+            React.createElement("section", null, 
+                React.createElement("div", {className: "first-line"}, first_line ), 
+                React.createElement(Headers, {message: flow.request}), 
+                React.createElement("hr", null), 
+                content
+            )
+        );
+    }
+});
+
+var Response = React.createClass({displayName: "Response",
     render: function () {
         var flow = this.props.flow;
-        var columns = this.props.columns.map(function (Column) {
-            return React.createElement(Column, {key: Column.displayName, flow: flow});
-        }.bind(this));
-        var className = "";
-        if (this.props.selected) {
-            className += " selected";
-        }
-        if (this.props.highlighted) {
-            className += " highlighted";
-        }
-        if (flow.intercepted) {
-            className += " intercepted";
-        }
-        if (flow.request) {
-            className += " has-request";
-        }
-        if (flow.response) {
-            className += " has-response";
+        var first_line = [
+            "HTTP/" + flow.response.httpversion.join("."),
+            flow.response.code,
+            flow.response.msg
+        ].join(" ");
+        var content = null;
+        if (flow.response.contentLength > 0) {
+            content = "Response Content Size: " + utils.formatSize(flow.response.contentLength);
+        } else {
+            content = React.createElement("div", {className: "alert alert-info"}, "No Content");
         }
 
+        //TODO: Styling
+
         return (
-            React.createElement("tr", {className: className, onClick: this.props.selectFlow.bind(null, flow)}, 
-                columns
-            ));
-    },
-    shouldComponentUpdate: function (nextProps) {
-        return true;
-        // Further optimization could be done here
-        // by calling forceUpdate on flow updates, selection changes and column changes.
-        //return (
-        //(this.props.columns.length !== nextProps.columns.length) ||
-        //(this.props.selected !== nextProps.selected)
-        //);
+            React.createElement("section", null, 
+                React.createElement("div", {className: "first-line"}, first_line ), 
+                React.createElement(Headers, {message: flow.response}), 
+                React.createElement("hr", null), 
+                content
+            )
+        );
     }
 });
 
-var FlowTableHead = React.createClass({displayName: "FlowTableHead",
-    getInitialState: function(){
-        return {
-            sortColumn: undefined,
-            sortDesc: false
-        };
-    },
-    onClick: function(Column){
-        var sortDesc = this.state.sortDesc;
-        var hasSort = Column.sortKeyFun;
-        if(Column === this.state.sortColumn){
-            sortDesc = !sortDesc;
-            this.setState({
-                sortDesc: sortDesc
-            });
-        } else {
-            this.setState({
-                sortColumn: hasSort && Column,
-                sortDesc: false
-            })
-        }
-        var sortKeyFun;
-        if(!sortDesc){
-            sortKeyFun = Column.sortKeyFun;
-        } else {
-            sortKeyFun = hasSort && function(){
-                var k = Column.sortKeyFun.apply(this, arguments);
-                if(_.isString(k)){
-                    return utils.reverseString(""+k);
-                } else {
-                    return -k;
-                }
-            }
-        }
-        this.props.setSortKeyFun(sortKeyFun);
-    },
+var Error = React.createClass({displayName: "Error",
     render: function () {
-        var columns = this.props.columns.map(function (Column) {
-            var onClick = this.onClick.bind(this, Column);
-            var className;
-            if(this.state.sortColumn === Column) {
-                if(this.state.sortDesc){
-                    className = "sort-desc";
-                } else {
-                    className = "sort-asc";
-                }
-            }
-            return React.createElement(Column.Title, {
-                        key: Column.displayName, 
-                        onClick: onClick, 
-                        className: className});
-        }.bind(this));
-        return React.createElement("thead", null, 
-            React.createElement("tr", null, columns)
+        var flow = this.props.flow;
+        return (
+            React.createElement("section", null, 
+                React.createElement("div", {className: "alert alert-warning"}, 
+                flow.error.msg, 
+                    React.createElement("div", null, 
+                        React.createElement("small", null,  utils.formatTimeStamp(flow.error.timestamp) )
+                    )
+                )
+            )
         );
     }
 });
 
+module.exports = {
+    Request: Request,
+    Response: Response,
+    Error: Error
+};
+
+},{"../../flow/utils.js":20,"../../utils.js":23,"react":"react"}],11:[function(require,module,exports){
+var React = require("react");
 
-var ROW_HEIGHT = 32;
+var actions = require("../../actions.js");
 
-var FlowTable = React.createClass({displayName: "FlowTable",
-    mixins: [common.StickyHeadMixin, common.AutoScrollMixin, VirtualScrollMixin],
-    getInitialState: function () {
-        return {
-            columns: flowtable_columns
-        };
-    },
-    _listen: function(view){
-        if(!view){
-            return;
-        }
-        view.addListener("add", this.onChange);
-        view.addListener("update", this.onChange);
-        view.addListener("remove", this.onChange);
-        view.addListener("recalculate", this.onChange);
-    },
-    componentWillMount: function () {
-        this._listen(this.props.view);
-    },
-    componentWillReceiveProps: function (nextProps) {
-        if (nextProps.view !== this.props.view) {
-            if (this.props.view) {
-                this.props.view.removeListener("add");
-                this.props.view.removeListener("update");
-                this.props.view.removeListener("remove");
-                this.props.view.removeListener("recalculate");
-            }
-            this._listen(nextProps.view);
-        }
-    },
-    getDefaultProps: function () {
-        return {
-            rowHeight: ROW_HEIGHT
-        };
-    },
-    onScrollFlowTable: function () {
-        this.adjustHead();
-        this.onScroll();
-    },
-    onChange: function () {
-        this.forceUpdate();
+var NavAction = React.createClass({displayName: "NavAction",
+    onClick: function (e) {
+        e.preventDefault();
+        this.props.onClick();
     },
-    scrollIntoView: function (flow) {
-        this.scrollRowIntoView(
-            this.props.view.index(flow),
-            this.refs.body.getDOMNode().offsetTop
+    render: function () {
+        return (
+            React.createElement("a", {title: this.props.title, 
+                href: "#", 
+                className: "nav-action", 
+                onClick: this.onClick}, 
+                React.createElement("i", {className: "fa fa-fw " + this.props.icon})
+            )
         );
-    },
-    renderRow: function (flow) {
-        var selected = (flow === this.props.selected);
-        var highlighted =
-            (
-            this.props.view._highlight &&
-            this.props.view._highlight[flow.id]
-            );
+    }
+});
 
-        return React.createElement(FlowRow, {key: flow.id, 
-            ref: flow.id, 
-            flow: flow, 
-            columns: this.state.columns, 
-            selected: selected, 
-            highlighted: highlighted, 
-            selectFlow: this.props.selectFlow}
-        );
-    },
+var Nav = React.createClass({displayName: "Nav",
     render: function () {
-        //console.log("render flowtable", this.state.start, this.state.stop, this.props.selected);
-        var flows = this.props.view ? this.props.view.list : [];
+        var flow = this.props.flow;
 
-        var rows = this.renderRows(flows);
+        var tabs = this.props.tabs.map(function (e) {
+            var str = e.charAt(0).toUpperCase() + e.slice(1);
+            var className = this.props.active === e ? "active" : "";
+            var onClick = function (event) {
+                this.props.selectTab(e);
+                event.preventDefault();
+            }.bind(this);
+            return React.createElement("a", {key: e, 
+                href: "#", 
+                className: className, 
+                onClick: onClick}, str);
+        }.bind(this));
+
+        var acceptButton = null;
+        if(flow.intercepted){
+            acceptButton = React.createElement(NavAction, {title: "[a]ccept intercepted flow", icon: "fa-play", onClick: actions.FlowActions.accept.bind(null, flow)});
+        }
+        var revertButton = null;
+        if(flow.modified){
+            revertButton = React.createElement(NavAction, {title: "revert changes to flow [V]", icon: "fa-history", onClick: actions.FlowActions.revert.bind(null, flow)});
+        }
 
         return (
-            React.createElement("div", {className: "flow-table", onScroll: this.onScrollFlowTable}, 
-                React.createElement("table", null, 
-                    React.createElement(FlowTableHead, {ref: "head", 
-                        columns: this.state.columns, 
-                        setSortKeyFun: this.props.setSortKeyFun}), 
-                    React.createElement("tbody", {ref: "body"}, 
-                         this.getPlaceholderTop(flows.length), 
-                        rows, 
-                         this.getPlaceholderBottom(flows.length) 
-                    )
-                )
+            React.createElement("nav", {ref: "head", className: "nav-tabs nav-tabs-sm"}, 
+                tabs, 
+                React.createElement(NavAction, {title: "[d]elete flow", icon: "fa-trash", onClick: actions.FlowActions.delete.bind(null, flow)}), 
+                React.createElement(NavAction, {title: "[D]uplicate flow", icon: "fa-copy", onClick: actions.FlowActions.duplicate.bind(null, flow)}), 
+                React.createElement(NavAction, {disabled: true, title: "[r]eplay flow", icon: "fa-repeat", onClick: actions.FlowActions.replay.bind(null, flow)}), 
+                acceptButton, 
+                revertButton
             )
         );
     }
 });
 
-module.exports = FlowTable;
-
+module.exports = Nav;
 
-},{"../utils.js":20,"./common.js":4,"./flowtable-columns.js":7,"./virtualscroll.js":13,"lodash":"lodash","react":"react"}],9:[function(require,module,exports){
+},{"../../actions.js":2,"react":"react"}],12:[function(require,module,exports){
 var React = require("react");
 
 var Footer = React.createClass({displayName: "Footer",
@@ -1600,7 +1625,7 @@ var Footer = React.createClass({displayName: "Footer",
 
 module.exports = Footer;
 
-},{"react":"react"}],10:[function(require,module,exports){
+},{"react":"react"}],13:[function(require,module,exports){
 var React = require("react");
 var $ = require("jquery");
 
@@ -1992,7 +2017,7 @@ module.exports = {
     Header: Header
 }
 
-},{"../actions.js":2,"../filt/filt.js":16,"../utils.js":20,"./common.js":4,"jquery":"jquery","react":"react"}],11:[function(require,module,exports){
+},{"../actions.js":2,"../filt/filt.js":19,"../utils.js":23,"./common.js":4,"jquery":"jquery","react":"react"}],14:[function(require,module,exports){
 var React = require("react");
 
 var common = require("./common.js");
@@ -2002,7 +2027,7 @@ var toputils = require("../utils.js");
 var views = require("../store/view.js");
 var Filt = require("../filt/filt.js");
 FlowTable = require("./flowtable.js");
-var flowdetail = require("./flowdetail.js");
+var FlowView = require("./flowview/index.js");
 
 var MainView = React.createClass({displayName: "MainView",
     mixins: [common.Navigation, common.State],
@@ -2216,7 +2241,7 @@ var MainView = React.createClass({displayName: "MainView",
         if (selected) {
             details = [
                 React.createElement(common.Splitter, {key: "splitter"}),
-                React.createElement(flowdetail.FlowDetail, {key: "flowDetails", ref: "flowDetails", flow: selected})
+                React.createElement(FlowView, {key: "flowDetails", ref: "flowDetails", flow: selected})
             ];
         } else {
             details = null;
@@ -2238,7 +2263,7 @@ var MainView = React.createClass({displayName: "MainView",
 module.exports = MainView;
 
 
-},{"../actions.js":2,"../filt/filt.js":16,"../store/view.js":19,"../utils.js":20,"./common.js":4,"./flowdetail.js":6,"./flowtable.js":8,"react":"react"}],12:[function(require,module,exports){
+},{"../actions.js":2,"../filt/filt.js":19,"../store/view.js":22,"../utils.js":23,"./common.js":4,"./flowtable.js":7,"./flowview/index.js":9,"react":"react"}],15:[function(require,module,exports){
 var React = require("react");
 var ReactRouter = require("react-router");
 var _ = require("lodash");
@@ -2333,7 +2358,7 @@ module.exports = {
     routes: routes
 };
 
-},{"../actions.js":2,"../store/store.js":18,"./common.js":4,"./eventlog.js":5,"./footer.js":9,"./header.js":10,"./mainview.js":11,"lodash":"lodash","react":"react","react-router":"react-router"}],13:[function(require,module,exports){
+},{"../actions.js":2,"../store/store.js":21,"./common.js":4,"./eventlog.js":5,"./footer.js":12,"./header.js":13,"./mainview.js":14,"lodash":"lodash","react":"react","react-router":"react-router"}],16:[function(require,module,exports){
 var React = require("react");
 
 var VirtualScrollMixin = {
@@ -2420,7 +2445,7 @@ var VirtualScrollMixin = {
 
 module.exports  = VirtualScrollMixin;
 
-},{"react":"react"}],14:[function(require,module,exports){
+},{"react":"react"}],17:[function(require,module,exports){
 
 var actions = require("./actions.js");
 
@@ -2450,7 +2475,7 @@ function Connection(url) {
 
 module.exports = Connection;
 
-},{"./actions.js":2}],15:[function(require,module,exports){
+},{"./actions.js":2}],18:[function(require,module,exports){
 
 var flux = require("flux");
 
@@ -2474,7 +2499,7 @@ module.exports = {
     AppDispatcher: AppDispatcher
 };
 
-},{"flux":"flux"}],16:[function(require,module,exports){
+},{"flux":"flux"}],19:[function(require,module,exports){
 module.exports = (function() {
   /*
    * Generated by PEG.js 0.8.0.
@@ -4250,10 +4275,10 @@ module.exports = (function() {
   };
 })();
 
-},{"../flow/utils.js":17}],17:[function(require,module,exports){
+},{"../flow/utils.js":20}],20:[function(require,module,exports){
 var _ = require("lodash");
 
-var _MessageUtils = {
+var MessageUtils = {
     getContentType: function (message) {
         return this.get_first_header(message, /^Content-Type$/i);
     },
@@ -4295,7 +4320,7 @@ var defaultPorts = {
     "https": 443
 };
 
-var RequestUtils = _.extend(_MessageUtils, {
+var RequestUtils = _.extend(MessageUtils, {
     pretty_host: function (request) {
         //FIXME: Add hostheader
         return request.host;
@@ -4309,16 +4334,16 @@ var RequestUtils = _.extend(_MessageUtils, {
     }
 });
 
-var ResponseUtils = _.extend(_MessageUtils, {});
+var ResponseUtils = _.extend(MessageUtils, {});
 
 
 module.exports = {
     ResponseUtils: ResponseUtils,
-    RequestUtils: RequestUtils
-
-}
+    RequestUtils: RequestUtils,
+    MessageUtils: MessageUtils
+};
 
-},{"lodash":"lodash"}],18:[function(require,module,exports){
+},{"lodash":"lodash"}],21:[function(require,module,exports){
 
 var _ = require("lodash");
 var $ = require("jquery");
@@ -4501,7 +4526,7 @@ module.exports = {
     FlowStore: FlowStore
 };
 
-},{"../actions.js":2,"../dispatcher.js":15,"../utils.js":20,"events":1,"jquery":"jquery","lodash":"lodash"}],19:[function(require,module,exports){
+},{"../actions.js":2,"../dispatcher.js":18,"../utils.js":23,"events":1,"jquery":"jquery","lodash":"lodash"}],22:[function(require,module,exports){
 var EventEmitter = require('events').EventEmitter;
 var _ = require("lodash");
 
@@ -4617,7 +4642,7 @@ module.exports = {
     StoreView: StoreView
 };
 
-},{"../utils.js":20,"events":1,"lodash":"lodash"}],20:[function(require,module,exports){
+},{"../utils.js":23,"events":1,"lodash":"lodash"}],23:[function(require,module,exports){
 var $ = require("jquery");
 var _ = require("lodash");
 
diff --git a/web/src/js/components/flowdetail.js b/web/src/js/components/flowdetail.js
deleted file mode 100644
index 1d019ffb..00000000
--- a/web/src/js/components/flowdetail.js
+++ /dev/null
@@ -1,399 +0,0 @@
-var React = require("react");
-var _ = require("lodash");
-
-var common = require("./common.js");
-var actions = require("../actions.js");
-var flowutils = require("../flow/utils.js");
-var toputils = require("../utils.js");
-
-var NavAction = React.createClass({
-    onClick: function (e) {
-        e.preventDefault();
-        this.props.onClick();
-    },
-    render: function () {
-        return (
-            <a title={this.props.title}
-                href="#"
-                className="nav-action"
-                onClick={this.onClick}>
-                <i className={"fa fa-fw " + this.props.icon}></i>
-            </a>
-        );
-    }
-});
-
-var FlowDetailNav = React.createClass({
-    render: function () {
-        var flow = this.props.flow;
-
-        var tabs = this.props.tabs.map(function (e) {
-            var str = e.charAt(0).toUpperCase() + e.slice(1);
-            var className = this.props.active === e ? "active" : "";
-            var onClick = function (event) {
-                this.props.selectTab(e);
-                event.preventDefault();
-            }.bind(this);
-            return <a key={e}
-                href="#"
-                className={className}
-                onClick={onClick}>{str}</a>;
-        }.bind(this));
-
-        var acceptButton = null;
-        if(flow.intercepted){
-            acceptButton = <NavAction title="[a]ccept intercepted flow" icon="fa-play" onClick={actions.FlowActions.accept.bind(null, flow)} />;
-        }
-        var revertButton = null;
-        if(flow.modified){
-            revertButton = <NavAction title="revert changes to flow [V]" icon="fa-history" onClick={actions.FlowActions.revert.bind(null, flow)} />;
-        }
-
-        return (
-            <nav ref="head" className="nav-tabs nav-tabs-sm">
-                {tabs}
-                <NavAction title="[d]elete flow" icon="fa-trash" onClick={actions.FlowActions.delete.bind(null, flow)} />
-                <NavAction title="[D]uplicate flow" icon="fa-copy" onClick={actions.FlowActions.duplicate.bind(null, flow)} />
-                <NavAction disabled title="[r]eplay flow" icon="fa-repeat" onClick={actions.FlowActions.replay.bind(null, flow)} />
-                {acceptButton}
-                {revertButton}
-            </nav>
-        );
-    }
-});
-
-var Headers = React.createClass({
-    render: function () {
-        var rows = this.props.message.headers.map(function (header, i) {
-            return (
-                <tr key={i}>
-                    <td className="header-name">{header[0] + ":"}</td>
-                    <td className="header-value">{header[1]}</td>
-                </tr>
-            );
-        });
-        return (
-            <table className="header-table">
-                <tbody>
-                    {rows}
-                </tbody>
-            </table>
-        );
-    }
-});
-
-var FlowDetailRequest = React.createClass({
-    render: function () {
-        var flow = this.props.flow;
-        var first_line = [
-            flow.request.method,
-            flowutils.RequestUtils.pretty_url(flow.request),
-            "HTTP/" + flow.request.httpversion.join(".")
-        ].join(" ");
-        var content = null;
-        if (flow.request.contentLength > 0) {
-            content = "Request Content Size: " + toputils.formatSize(flow.request.contentLength);
-        } else {
-            content = <div className="alert alert-info">No Content</div>;
-        }
-
-        //TODO: Styling
-
-        return (
-            <section>
-                <div className="first-line">{ first_line }</div>
-                <Headers message={flow.request}/>
-                <hr/>
-                {content}
-            </section>
-        );
-    }
-});
-
-var FlowDetailResponse = React.createClass({
-    render: function () {
-        var flow = this.props.flow;
-        var first_line = [
-            "HTTP/" + flow.response.httpversion.join("."),
-            flow.response.code,
-            flow.response.msg
-        ].join(" ");
-        var content = null;
-        if (flow.response.contentLength > 0) {
-            content = "Response Content Size: " + toputils.formatSize(flow.response.contentLength);
-        } else {
-            content = <div className="alert alert-info">No Content</div>;
-        }
-
-        //TODO: Styling
-
-        return (
-            <section>
-                <div className="first-line">{ first_line }</div>
-                <Headers message={flow.response}/>
-                <hr/>
-                {content}
-            </section>
-        );
-    }
-});
-
-var FlowDetailError = React.createClass({
-    render: function () {
-        var flow = this.props.flow;
-        return (
-            <section>
-                <div className="alert alert-warning">
-                {flow.error.msg}
-                    <div>
-                        <small>{ toputils.formatTimeStamp(flow.error.timestamp) }</small>
-                    </div>
-                </div>
-            </section>
-        );
-    }
-});
-
-var TimeStamp = React.createClass({
-    render: function () {
-
-        if (!this.props.t) {
-            //should be return null, but that triggers a React bug.
-            return <tr></tr>;
-        }
-
-        var ts = toputils.formatTimeStamp(this.props.t);
-
-        var delta;
-        if (this.props.deltaTo) {
-            delta = toputils.formatTimeDelta(1000 * (this.props.t - this.props.deltaTo));
-            delta = <span className="text-muted">{"(" + delta + ")"}</span>;
-        } else {
-            delta = null;
-        }
-
-        return <tr>
-            <td>{this.props.title + ":"}</td>
-            <td>{ts} {delta}</td>
-        </tr>;
-    }
-});
-
-var ConnectionInfo = React.createClass({
-
-    render: function () {
-        var conn = this.props.conn;
-        var address = conn.address.address.join(":");
-
-        var sni = <tr key="sni"></tr>; //should be null, but that triggers a React bug.
-        if (conn.sni) {
-            sni = <tr key="sni">
-                <td>
-                    <abbr title="TLS Server Name Indication">TLS SNI:</abbr>
-                </td>
-                <td>{conn.sni}</td>
-            </tr>;
-        }
-        return (
-            <table className="connection-table">
-                <tbody>
-                    <tr key="address">
-                        <td>Address:</td>
-                        <td>{address}</td>
-                    </tr>
-                    {sni}
-                </tbody>
-            </table>
-        );
-    }
-});
-
-var CertificateInfo = React.createClass({
-    render: function () {
-        //TODO: We should fetch human-readable certificate representation
-        // from the server
-        var flow = this.props.flow;
-        var client_conn = flow.client_conn;
-        var server_conn = flow.server_conn;
-
-        var preStyle = {maxHeight: 100};
-        return (
-            <div>
-            {client_conn.cert ? <h4>Client Certificate</h4> : null}
-            {client_conn.cert ? <pre style={preStyle}>{client_conn.cert}</pre> : null}
-
-            {server_conn.cert ? <h4>Server Certificate</h4> : null}
-            {server_conn.cert ? <pre style={preStyle}>{server_conn.cert}</pre> : null}
-            </div>
-        );
-    }
-});
-
-var Timing = React.createClass({
-    render: function () {
-        var flow = this.props.flow;
-        var sc = flow.server_conn;
-        var cc = flow.client_conn;
-        var req = flow.request;
-        var resp = flow.response;
-
-        var timestamps = [
-            {
-                title: "Server conn. initiated",
-                t: sc.timestamp_start,
-                deltaTo: req.timestamp_start
-            }, {
-                title: "Server conn. TCP handshake",
-                t: sc.timestamp_tcp_setup,
-                deltaTo: req.timestamp_start
-            }, {
-                title: "Server conn. SSL handshake",
-                t: sc.timestamp_ssl_setup,
-                deltaTo: req.timestamp_start
-            }, {
-                title: "Client conn. established",
-                t: cc.timestamp_start,
-                deltaTo: req.timestamp_start
-            }, {
-                title: "Client conn. SSL handshake",
-                t: cc.timestamp_ssl_setup,
-                deltaTo: req.timestamp_start
-            }, {
-                title: "First request byte",
-                t: req.timestamp_start,
-            }, {
-                title: "Request complete",
-                t: req.timestamp_end,
-                deltaTo: req.timestamp_start
-            }
-        ];
-
-        if (flow.response) {
-            timestamps.push(
-                {
-                    title: "First response byte",
-                    t: resp.timestamp_start,
-                    deltaTo: req.timestamp_start
-                }, {
-                    title: "Response complete",
-                    t: resp.timestamp_end,
-                    deltaTo: req.timestamp_start
-                }
-            );
-        }
-
-        //Add unique key for each row.
-        timestamps.forEach(function (e) {
-            e.key = e.title;
-        });
-
-        timestamps = _.sortBy(timestamps, 't');
-
-        var rows = timestamps.map(function (e) {
-            return <TimeStamp {...e}/>;
-        });
-
-        return (
-            <div>
-                <h4>Timing</h4>
-                <table className="timing-table">
-                    <tbody>
-                    {rows}
-                    </tbody>
-                </table>
-            </div>
-        );
-    }
-});
-
-var FlowDetailConnectionInfo = React.createClass({
-    render: function () {
-        var flow = this.props.flow;
-        var client_conn = flow.client_conn;
-        var server_conn = flow.server_conn;
-        return (
-            <section>
-
-                <h4>Client Connection</h4>
-                <ConnectionInfo conn={client_conn}/>
-
-                <h4>Server Connection</h4>
-                <ConnectionInfo conn={server_conn}/>
-
-                <CertificateInfo flow={flow}/>
-
-                <Timing flow={flow}/>
-
-            </section>
-        );
-    }
-});
-
-var allTabs = {
-    request: FlowDetailRequest,
-    response: FlowDetailResponse,
-    error: FlowDetailError,
-    details: FlowDetailConnectionInfo
-};
-
-var FlowDetail = React.createClass({
-    mixins: [common.StickyHeadMixin, common.Navigation, common.State],
-    getTabs: function (flow) {
-        var tabs = [];
-        ["request", "response", "error"].forEach(function (e) {
-            if (flow[e]) {
-                tabs.push(e);
-            }
-        });
-        tabs.push("details");
-        return tabs;
-    },
-    nextTab: function (i) {
-        var tabs = this.getTabs(this.props.flow);
-        var currentIndex = tabs.indexOf(this.getParams().detailTab);
-        // JS modulo operator doesn't correct negative numbers, make sure that we are positive.
-        var nextIndex = (currentIndex + i + tabs.length) % tabs.length;
-        this.selectTab(tabs[nextIndex]);
-    },
-    selectTab: function (panel) {
-        this.replaceWith(
-            "flow",
-            {
-                flowId: this.getParams().flowId,
-                detailTab: panel
-            }
-        );
-    },
-    render: function () {
-        var flow = this.props.flow;
-        var tabs = this.getTabs(flow);
-        var active = this.getParams().detailTab;
-
-        if (!_.contains(tabs, active)) {
-            if (active === "response" && flow.error) {
-                active = "error";
-            } else if (active === "error" && flow.response) {
-                active = "response";
-            } else {
-                active = tabs[0];
-            }
-            this.selectTab(active);
-        }
-
-        var Tab = allTabs[active];
-        return (
-            <div className="flow-detail" onScroll={this.adjustHead}>
-                <FlowDetailNav ref="head"
-                    flow={flow}
-                    tabs={tabs}
-                    active={active}
-                    selectTab={this.selectTab}/>
-                <Tab flow={flow}/>
-            </div>
-        );
-    }
-});
-
-module.exports = {
-    FlowDetail: FlowDetail
-};
\ No newline at end of file
diff --git a/web/src/js/components/flowview/details.js b/web/src/js/components/flowview/details.js
new file mode 100644
index 00000000..00e0116c
--- /dev/null
+++ b/web/src/js/components/flowview/details.js
@@ -0,0 +1,181 @@
+var React = require("react");
+var _ = require("lodash");
+
+var utils = require("../../utils.js");
+
+var TimeStamp = React.createClass({
+    render: function () {
+
+        if (!this.props.t) {
+            //should be return null, but that triggers a React bug.
+            return <tr></tr>;
+        }
+
+        var ts = utils.formatTimeStamp(this.props.t);
+
+        var delta;
+        if (this.props.deltaTo) {
+            delta = utils.formatTimeDelta(1000 * (this.props.t - this.props.deltaTo));
+            delta = <span className="text-muted">{"(" + delta + ")"}</span>;
+        } else {
+            delta = null;
+        }
+
+        return <tr>
+            <td>{this.props.title + ":"}</td>
+            <td>{ts} {delta}</td>
+        </tr>;
+    }
+});
+
+var ConnectionInfo = React.createClass({
+
+    render: function () {
+        var conn = this.props.conn;
+        var address = conn.address.address.join(":");
+
+        var sni = <tr key="sni"></tr>; //should be null, but that triggers a React bug.
+        if (conn.sni) {
+            sni = <tr key="sni">
+                <td>
+                    <abbr title="TLS Server Name Indication">TLS SNI:</abbr>
+                </td>
+                <td>{conn.sni}</td>
+            </tr>;
+        }
+        return (
+            <table className="connection-table">
+                <tbody>
+                    <tr key="address">
+                        <td>Address:</td>
+                        <td>{address}</td>
+                    </tr>
+                    {sni}
+                </tbody>
+            </table>
+        );
+    }
+});
+
+var CertificateInfo = React.createClass({
+    render: function () {
+        //TODO: We should fetch human-readable certificate representation
+        // from the server
+        var flow = this.props.flow;
+        var client_conn = flow.client_conn;
+        var server_conn = flow.server_conn;
+
+        var preStyle = {maxHeight: 100};
+        return (
+            <div>
+            {client_conn.cert ? <h4>Client Certificate</h4> : null}
+            {client_conn.cert ? <pre style={preStyle}>{client_conn.cert}</pre> : null}
+
+            {server_conn.cert ? <h4>Server Certificate</h4> : null}
+            {server_conn.cert ? <pre style={preStyle}>{server_conn.cert}</pre> : null}
+            </div>
+        );
+    }
+});
+
+var Timing = React.createClass({
+    render: function () {
+        var flow = this.props.flow;
+        var sc = flow.server_conn;
+        var cc = flow.client_conn;
+        var req = flow.request;
+        var resp = flow.response;
+
+        var timestamps = [
+            {
+                title: "Server conn. initiated",
+                t: sc.timestamp_start,
+                deltaTo: req.timestamp_start
+            }, {
+                title: "Server conn. TCP handshake",
+                t: sc.timestamp_tcp_setup,
+                deltaTo: req.timestamp_start
+            }, {
+                title: "Server conn. SSL handshake",
+                t: sc.timestamp_ssl_setup,
+                deltaTo: req.timestamp_start
+            }, {
+                title: "Client conn. established",
+                t: cc.timestamp_start,
+                deltaTo: req.timestamp_start
+            }, {
+                title: "Client conn. SSL handshake",
+                t: cc.timestamp_ssl_setup,
+                deltaTo: req.timestamp_start
+            }, {
+                title: "First request byte",
+                t: req.timestamp_start,
+            }, {
+                title: "Request complete",
+                t: req.timestamp_end,
+                deltaTo: req.timestamp_start
+            }
+        ];
+
+        if (flow.response) {
+            timestamps.push(
+                {
+                    title: "First response byte",
+                    t: resp.timestamp_start,
+                    deltaTo: req.timestamp_start
+                }, {
+                    title: "Response complete",
+                    t: resp.timestamp_end,
+                    deltaTo: req.timestamp_start
+                }
+            );
+        }
+
+        //Add unique key for each row.
+        timestamps.forEach(function (e) {
+            e.key = e.title;
+        });
+
+        timestamps = _.sortBy(timestamps, 't');
+
+        var rows = timestamps.map(function (e) {
+            return <TimeStamp {...e}/>;
+        });
+
+        return (
+            <div>
+                <h4>Timing</h4>
+                <table className="timing-table">
+                    <tbody>
+                    {rows}
+                    </tbody>
+                </table>
+            </div>
+        );
+    }
+});
+
+var Details = React.createClass({
+    render: function () {
+        var flow = this.props.flow;
+        var client_conn = flow.client_conn;
+        var server_conn = flow.server_conn;
+        return (
+            <section>
+
+                <h4>Client Connection</h4>
+                <ConnectionInfo conn={client_conn}/>
+
+                <h4>Server Connection</h4>
+                <ConnectionInfo conn={server_conn}/>
+
+                <CertificateInfo flow={flow}/>
+
+                <Timing flow={flow}/>
+
+            </section>
+        );
+    }
+});
+
+module.exports = Details;
\ No newline at end of file
diff --git a/web/src/js/components/flowview/index.js b/web/src/js/components/flowview/index.js
new file mode 100644
index 00000000..0c31aca5
--- /dev/null
+++ b/web/src/js/components/flowview/index.js
@@ -0,0 +1,74 @@
+var React = require("react");
+var _ = require("lodash");
+
+var common = require("../common.js");
+var Nav = require("./nav.js");
+var Messages = require("./messages.js");
+var Details = require("./details.js");
+
+var allTabs = {
+    request: Messages.Request,
+    response: Messages.Response,
+    error: Messages.Error,
+    details: Details
+};
+
+var FlowView = React.createClass({
+    mixins: [common.StickyHeadMixin, common.Navigation, common.State],
+    getTabs: function (flow) {
+        var tabs = [];
+        ["request", "response", "error"].forEach(function (e) {
+            if (flow[e]) {
+                tabs.push(e);
+            }
+        });
+        tabs.push("details");
+        return tabs;
+    },
+    nextTab: function (i) {
+        var tabs = this.getTabs(this.props.flow);
+        var currentIndex = tabs.indexOf(this.getParams().detailTab);
+        // JS modulo operator doesn't correct negative numbers, make sure that we are positive.
+        var nextIndex = (currentIndex + i + tabs.length) % tabs.length;
+        this.selectTab(tabs[nextIndex]);
+    },
+    selectTab: function (panel) {
+        this.replaceWith(
+            "flow",
+            {
+                flowId: this.getParams().flowId,
+                detailTab: panel
+            }
+        );
+    },
+    render: function () {
+        var flow = this.props.flow;
+        var tabs = this.getTabs(flow);
+        var active = this.getParams().detailTab;
+
+        if (!_.contains(tabs, active)) {
+            if (active === "response" && flow.error) {
+                active = "error";
+            } else if (active === "error" && flow.response) {
+                active = "response";
+            } else {
+                active = tabs[0];
+            }
+            this.selectTab(active);
+        }
+
+        var Tab = allTabs[active];
+        return (
+            <div className="flow-detail" onScroll={this.adjustHead}>
+                <Nav ref="head"
+                    flow={flow}
+                    tabs={tabs}
+                    active={active}
+                    selectTab={this.selectTab}/>
+                <Tab flow={flow}/>
+            </div>
+        );
+    }
+});
+
+module.exports = FlowView;
\ No newline at end of file
diff --git a/web/src/js/components/flowview/messages.js b/web/src/js/components/flowview/messages.js
new file mode 100644
index 00000000..ffbfff43
--- /dev/null
+++ b/web/src/js/components/flowview/messages.js
@@ -0,0 +1,102 @@
+var React = require("react");
+
+var flowutils = require("../../flow/utils.js");
+var utils = require("../../utils.js");
+
+var Headers = React.createClass({
+    render: function () {
+        var rows = this.props.message.headers.map(function (header, i) {
+            return (
+                <tr key={i}>
+                    <td className="header-name">{header[0] + ":"}</td>
+                    <td className="header-value">{header[1]}</td>
+                </tr>
+            );
+        });
+        return (
+            <table className="header-table">
+                <tbody>
+                    {rows}
+                </tbody>
+            </table>
+        );
+    }
+});
+
+var Request = React.createClass({
+    render: function () {
+        var flow = this.props.flow;
+        var first_line = [
+            flow.request.method,
+            flowutils.RequestUtils.pretty_url(flow.request),
+            "HTTP/" + flow.request.httpversion.join(".")
+        ].join(" ");
+        var content = null;
+        if (flow.request.contentLength > 0) {
+            content = "Request Content Size: " + utils.formatSize(flow.request.contentLength);
+        } else {
+            content = <div className="alert alert-info">No Content</div>;
+        }
+
+        //TODO: Styling
+
+        return (
+            <section>
+                <div className="first-line">{ first_line }</div>
+                <Headers message={flow.request}/>
+                <hr/>
+                {content}
+            </section>
+        );
+    }
+});
+
+var Response = React.createClass({
+    render: function () {
+        var flow = this.props.flow;
+        var first_line = [
+            "HTTP/" + flow.response.httpversion.join("."),
+            flow.response.code,
+            flow.response.msg
+        ].join(" ");
+        var content = null;
+        if (flow.response.contentLength > 0) {
+            content = "Response Content Size: " + utils.formatSize(flow.response.contentLength);
+        } else {
+            content = <div className="alert alert-info">No Content</div>;
+        }
+
+        //TODO: Styling
+
+        return (
+            <section>
+                <div className="first-line">{ first_line }</div>
+                <Headers message={flow.response}/>
+                <hr/>
+                {content}
+            </section>
+        );
+    }
+});
+
+var Error = React.createClass({
+    render: function () {
+        var flow = this.props.flow;
+        return (
+            <section>
+                <div className="alert alert-warning">
+                {flow.error.msg}
+                    <div>
+                        <small>{ utils.formatTimeStamp(flow.error.timestamp) }</small>
+                    </div>
+                </div>
+            </section>
+        );
+    }
+});
+
+module.exports = {
+    Request: Request,
+    Response: Response,
+    Error: Error
+};
\ No newline at end of file
diff --git a/web/src/js/components/flowview/nav.js b/web/src/js/components/flowview/nav.js
new file mode 100644
index 00000000..46eda707
--- /dev/null
+++ b/web/src/js/components/flowview/nav.js
@@ -0,0 +1,61 @@
+var React = require("react");
+
+var actions = require("../../actions.js");
+
+var NavAction = React.createClass({
+    onClick: function (e) {
+        e.preventDefault();
+        this.props.onClick();
+    },
+    render: function () {
+        return (
+            <a title={this.props.title}
+                href="#"
+                className="nav-action"
+                onClick={this.onClick}>
+                <i className={"fa fa-fw " + this.props.icon}></i>
+            </a>
+        );
+    }
+});
+
+var Nav = React.createClass({
+    render: function () {
+        var flow = this.props.flow;
+
+        var tabs = this.props.tabs.map(function (e) {
+            var str = e.charAt(0).toUpperCase() + e.slice(1);
+            var className = this.props.active === e ? "active" : "";
+            var onClick = function (event) {
+                this.props.selectTab(e);
+                event.preventDefault();
+            }.bind(this);
+            return <a key={e}
+                href="#"
+                className={className}
+                onClick={onClick}>{str}</a>;
+        }.bind(this));
+
+        var acceptButton = null;
+        if(flow.intercepted){
+            acceptButton = <NavAction title="[a]ccept intercepted flow" icon="fa-play" onClick={actions.FlowActions.accept.bind(null, flow)} />;
+        }
+        var revertButton = null;
+        if(flow.modified){
+            revertButton = <NavAction title="revert changes to flow [V]" icon="fa-history" onClick={actions.FlowActions.revert.bind(null, flow)} />;
+        }
+
+        return (
+            <nav ref="head" className="nav-tabs nav-tabs-sm">
+                {tabs}
+                <NavAction title="[d]elete flow" icon="fa-trash" onClick={actions.FlowActions.delete.bind(null, flow)} />
+                <NavAction title="[D]uplicate flow" icon="fa-copy" onClick={actions.FlowActions.duplicate.bind(null, flow)} />
+                <NavAction disabled title="[r]eplay flow" icon="fa-repeat" onClick={actions.FlowActions.replay.bind(null, flow)} />
+                {acceptButton}
+                {revertButton}
+            </nav>
+        );
+    }
+});
+
+module.exports = Nav;
\ No newline at end of file
diff --git a/web/src/js/components/mainview.js b/web/src/js/components/mainview.js
index 8eda2e9c..81bf3b03 100644
--- a/web/src/js/components/mainview.js
+++ b/web/src/js/components/mainview.js
@@ -7,7 +7,7 @@ var toputils = require("../utils.js");
 var views = require("../store/view.js");
 var Filt = require("../filt/filt.js");
 FlowTable = require("./flowtable.js");
-var flowdetail = require("./flowdetail.js");
+var FlowView = require("./flowview/index.js");
 
 var MainView = React.createClass({
     mixins: [common.Navigation, common.State],
@@ -221,7 +221,7 @@ var MainView = React.createClass({
         if (selected) {
             details = [
                 <common.Splitter key="splitter"/>,
-                <flowdetail.FlowDetail key="flowDetails" ref="flowDetails" flow={selected}/>
+                <FlowView key="flowDetails" ref="flowDetails" flow={selected}/>
             ];
         } else {
             details = null;
diff --git a/web/src/js/flow/utils.js b/web/src/js/flow/utils.js
index a95d4ffe..dd7f763b 100644
--- a/web/src/js/flow/utils.js
+++ b/web/src/js/flow/utils.js
@@ -1,6 +1,6 @@
 var _ = require("lodash");
 
-var _MessageUtils = {
+var MessageUtils = {
     getContentType: function (message) {
         return this.get_first_header(message, /^Content-Type$/i);
     },
@@ -42,7 +42,7 @@ var defaultPorts = {
     "https": 443
 };
 
-var RequestUtils = _.extend(_MessageUtils, {
+var RequestUtils = _.extend(MessageUtils, {
     pretty_host: function (request) {
         //FIXME: Add hostheader
         return request.host;
@@ -56,11 +56,11 @@ var RequestUtils = _.extend(_MessageUtils, {
     }
 });
 
-var ResponseUtils = _.extend(_MessageUtils, {});
+var ResponseUtils = _.extend(MessageUtils, {});
 
 
 module.exports = {
     ResponseUtils: ResponseUtils,
-    RequestUtils: RequestUtils
-
-}
\ No newline at end of file
+    RequestUtils: RequestUtils,
+    MessageUtils: MessageUtils
+};
\ No newline at end of file
-- 
cgit v1.2.3


From 1143552e1690f8b96b3d95381f7f06cbb46ead59 Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Sun, 22 Mar 2015 00:21:38 +0100
Subject: web: add content views

---
 libmproxy/web/static/app.css                  |  10 ++
 libmproxy/web/static/app.js                   | 215 ++++++++++++++++++++++----
 web/src/css/app.less                          |   1 +
 web/src/css/flowdetail.less                   |   3 +
 web/src/css/flowview.less                     |   9 ++
 web/src/js/components/flowview/contentview.js | 158 +++++++++++++++++++
 web/src/js/components/flowview/messages.js    |  17 +-
 7 files changed, 366 insertions(+), 47 deletions(-)
 create mode 100644 web/src/css/flowview.less
 create mode 100644 web/src/js/components/flowview/contentview.js

diff --git a/libmproxy/web/static/app.css b/libmproxy/web/static/app.css
index 4f24ddd9..cf2db2c6 100644
--- a/libmproxy/web/static/app.css
+++ b/libmproxy/web/static/app.css
@@ -290,6 +290,9 @@ header .menu {
   max-height: 100px;
   overflow-y: auto;
 }
+.view-selector {
+  margin-top: 10px;
+}
 .flow-detail table {
   font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
   width: 100%;
@@ -316,6 +319,13 @@ header .menu {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.flowview-image {
+  text-align: center;
+}
+.flowview-image img {
+  max-width: 100%;
+  max-height: 100%;
+}
 .eventlog {
   height: 200px;
   flex: 0 0 auto;
diff --git a/libmproxy/web/static/app.js b/libmproxy/web/static/app.js
index 04d6f282..eb8ef45e 100644
--- a/libmproxy/web/static/app.js
+++ b/libmproxy/web/static/app.js
@@ -443,7 +443,7 @@ $(function () {
 
 
 
-},{"./components/proxyapp.js":15,"./connection":17,"jquery":"jquery","react":"react","react-router":"react-router"}],4:[function(require,module,exports){
+},{"./components/proxyapp.js":16,"./connection":18,"jquery":"jquery","react":"react","react-router":"react-router"}],4:[function(require,module,exports){
 var React = require("react");
 var ReactRouter = require("react-router");
 var _ = require("lodash");
@@ -777,7 +777,7 @@ var EventLog = React.createClass({displayName: "EventLog",
 
 module.exports = EventLog;
 
-},{"../actions.js":2,"../store/view.js":22,"./common.js":4,"./virtualscroll.js":16,"lodash":"lodash","react":"react"}],6:[function(require,module,exports){
+},{"../actions.js":2,"../store/view.js":23,"./common.js":4,"./virtualscroll.js":17,"lodash":"lodash","react":"react"}],6:[function(require,module,exports){
 var React = require("react");
 var RequestUtils = require("../flow/utils.js").RequestUtils;
 var ResponseUtils = require("../flow/utils.js").ResponseUtils;
@@ -980,7 +980,7 @@ var all_columns = [
 
 module.exports = all_columns;
 
-},{"../flow/utils.js":20,"../utils.js":23,"react":"react"}],7:[function(require,module,exports){
+},{"../flow/utils.js":21,"../utils.js":24,"react":"react"}],7:[function(require,module,exports){
 var React = require("react");
 var common = require("./common.js");
 var utils = require("../utils.js");
@@ -1180,7 +1180,167 @@ var FlowTable = React.createClass({displayName: "FlowTable",
 module.exports = FlowTable;
 
 
-},{"../utils.js":23,"./common.js":4,"./flowtable-columns.js":6,"./virtualscroll.js":16,"lodash":"lodash","react":"react"}],8:[function(require,module,exports){
+},{"../utils.js":24,"./common.js":4,"./flowtable-columns.js":6,"./virtualscroll.js":17,"lodash":"lodash","react":"react"}],8:[function(require,module,exports){
+var React = require("react");
+var _ = require("lodash");
+
+var MessageUtils = require("../../flow/utils.js").MessageUtils;
+var utils = require("../../utils.js");
+
+var image_regex = /^image\/(png|jpe?g|gif|vnc.microsoft.icon|x-icon)$/i;
+var Image = React.createClass({displayName: "Image",
+    statics: {
+        matches: function (message) {
+            return image_regex.test(MessageUtils.getContentType(message));
+        }
+    },
+    render: function () {
+        var message_name = this.props.flow.request === this.props.message ? "request" : "response";
+        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 Raw = React.createClass({displayName: "Raw",
+    statics: {
+        matches: function (message) {
+            return true;
+        }
+    },
+    render: function () {
+        //FIXME
+        return React.createElement("div", null, "raw");
+    }
+});
+
+
+var Auto = React.createClass({displayName: "Auto",
+    statics: {
+        matches: function () {
+            return false; // don't match itself
+        },
+        findView: function (message) {
+            for (var i = 0; i < all.length; i++) {
+                if (all[i].matches(message)) {
+                    return all[i];
+                }
+            }
+            return all[all.length - 1];
+        }
+    },
+    render: function () {
+        var View = Auto.findView(this.props.message);
+        return React.createElement(View, React.__spread({},  this.props));
+    }
+});
+
+var all = [Auto, Image, Raw];
+
+
+var ContentEmpty = React.createClass({displayName: "ContentEmpty",
+    render: function () {
+        var message_name = this.props.flow.request === this.props.message ? "request" : "response";
+        return React.createElement("div", {className: "alert alert-info"}, "No ", message_name, " content.");
+    }
+});
+
+var ContentMissing = React.createClass({displayName: "ContentMissing",
+    render: function () {
+        var message_name = this.props.flow.request === this.props.message ? "Request" : "Response";
+        return React.createElement("div", {className: "alert alert-info"}, message_name, " content missing.");
+    }
+});
+
+var TooLarge = React.createClass({displayName: "TooLarge",
+    render: function () {
+        var size = utils.formatSize(this.props.message.contentLength);
+        return React.createElement("div", {className: "alert alert-warning"}, 
+            React.createElement("button", {onClick: this.props.onClick, className: "btn btn-xs btn-warning pull-right"}, "Display anyway"), 
+            size, " content size."
+        );
+    }
+});
+
+var ViewSelector = React.createClass({displayName: "ViewSelector",
+    render: function () {
+        var views = [];
+        for (var i = 0; i < all.length; i++) {
+            var view = all[i];
+            var className = "btn btn-default";
+            if (view === this.props.active) {
+                className += " active";
+            }
+            var text;
+            if (view === Auto) {
+                text = "auto: " + Auto.findView(this.props.message).displayName.toLowerCase();
+            } else {
+                text = view.displayName.toLowerCase();
+            }
+            views.push(
+                React.createElement("button", {
+                    key: view.displayName, 
+                    onClick: this.props.selectView.bind(null, view), 
+                    className: className}, 
+                    text
+                )
+            );
+        }
+
+        return React.createElement("div", {className: "view-selector btn-group btn-group-xs"}, views);
+    }
+});
+
+var ContentView = React.createClass({displayName: "ContentView",
+    getInitialState: function () {
+        return {
+            displayLarge: false,
+            View: Auto
+        };
+    },
+    propTypes: {
+        // It may seem a bit weird at the first glance:
+        // Every view takes the flow and the message as props, e.g.
+        // <Auto flow={flow} message={flow.request}/>
+        flow: React.PropTypes.object.isRequired,
+        message: React.PropTypes.object.isRequired,
+    },
+    selectView: function (view) {
+        this.setState({
+            View: view
+        });
+    },
+    displayLarge: function () {
+        this.setState({displayLarge: true});
+    },
+    componentWillReceiveProps: function (nextProps) {
+        if (nextProps.message !== this.props.message) {
+            this.setState(this.getInitialState());
+        }
+    },
+    render: function () {
+        var message = this.props.message;
+        if (message.contentLength === 0) {
+            return React.createElement(ContentEmpty, React.__spread({},  this.props));
+        } else if (message.contentLength === null) {
+            return React.createElement(ContentMissing, React.__spread({},  this.props));
+        } else if (message.contentLength > 1024 * 1024 * 3 && !this.state.displayLarge) {
+            return React.createElement(TooLarge, React.__spread({},  this.props, {onClick: this.displayLarge}));
+        }
+
+        return React.createElement("div", null, 
+            React.createElement(this.state.View, React.__spread({},  this.props)), 
+            React.createElement("div", {className: "text-center"}, 
+                React.createElement(ViewSelector, {selectView: this.selectView, active: this.state.View, message: message})
+            )
+        );
+    }
+});
+
+module.exports = ContentView;
+
+},{"../../flow/utils.js":21,"../../utils.js":24,"lodash":"lodash","react":"react"}],9:[function(require,module,exports){
 var React = require("react");
 var _ = require("lodash");
 
@@ -1363,7 +1523,7 @@ var Details = React.createClass({displayName: "Details",
 
 module.exports = Details;
 
-},{"../../utils.js":23,"lodash":"lodash","react":"react"}],9:[function(require,module,exports){
+},{"../../utils.js":24,"lodash":"lodash","react":"react"}],10:[function(require,module,exports){
 var React = require("react");
 var _ = require("lodash");
 
@@ -1439,11 +1599,12 @@ var FlowView = React.createClass({displayName: "FlowView",
 
 module.exports = FlowView;
 
-},{"../common.js":4,"./details.js":8,"./messages.js":10,"./nav.js":11,"lodash":"lodash","react":"react"}],10:[function(require,module,exports){
+},{"../common.js":4,"./details.js":9,"./messages.js":11,"./nav.js":12,"lodash":"lodash","react":"react"}],11:[function(require,module,exports){
 var React = require("react");
 
 var flowutils = require("../../flow/utils.js");
 var utils = require("../../utils.js");
+var ContentView = require("./contentview.js");
 
 var Headers = React.createClass({displayName: "Headers",
     render: function () {
@@ -1473,12 +1634,6 @@ var Request = React.createClass({displayName: "Request",
             flowutils.RequestUtils.pretty_url(flow.request),
             "HTTP/" + flow.request.httpversion.join(".")
         ].join(" ");
-        var content = null;
-        if (flow.request.contentLength > 0) {
-            content = "Request Content Size: " + utils.formatSize(flow.request.contentLength);
-        } else {
-            content = React.createElement("div", {className: "alert alert-info"}, "No Content");
-        }
 
         //TODO: Styling
 
@@ -1487,7 +1642,7 @@ var Request = React.createClass({displayName: "Request",
                 React.createElement("div", {className: "first-line"}, first_line ), 
                 React.createElement(Headers, {message: flow.request}), 
                 React.createElement("hr", null), 
-                content
+                React.createElement(ContentView, {flow: flow, message: flow.request})
             )
         );
     }
@@ -1501,12 +1656,6 @@ var Response = React.createClass({displayName: "Response",
             flow.response.code,
             flow.response.msg
         ].join(" ");
-        var content = null;
-        if (flow.response.contentLength > 0) {
-            content = "Response Content Size: " + utils.formatSize(flow.response.contentLength);
-        } else {
-            content = React.createElement("div", {className: "alert alert-info"}, "No Content");
-        }
 
         //TODO: Styling
 
@@ -1515,7 +1664,7 @@ var Response = React.createClass({displayName: "Response",
                 React.createElement("div", {className: "first-line"}, first_line ), 
                 React.createElement(Headers, {message: flow.response}), 
                 React.createElement("hr", null), 
-                content
+                React.createElement(ContentView, {flow: flow, message: flow.response})
             )
         );
     }
@@ -1543,7 +1692,7 @@ module.exports = {
     Error: Error
 };
 
-},{"../../flow/utils.js":20,"../../utils.js":23,"react":"react"}],11:[function(require,module,exports){
+},{"../../flow/utils.js":21,"../../utils.js":24,"./contentview.js":8,"react":"react"}],12:[function(require,module,exports){
 var React = require("react");
 
 var actions = require("../../actions.js");
@@ -1606,7 +1755,7 @@ var Nav = React.createClass({displayName: "Nav",
 
 module.exports = Nav;
 
-},{"../../actions.js":2,"react":"react"}],12:[function(require,module,exports){
+},{"../../actions.js":2,"react":"react"}],13:[function(require,module,exports){
 var React = require("react");
 
 var Footer = React.createClass({displayName: "Footer",
@@ -1625,7 +1774,7 @@ var Footer = React.createClass({displayName: "Footer",
 
 module.exports = Footer;
 
-},{"react":"react"}],13:[function(require,module,exports){
+},{"react":"react"}],14:[function(require,module,exports){
 var React = require("react");
 var $ = require("jquery");
 
@@ -2017,7 +2166,7 @@ module.exports = {
     Header: Header
 }
 
-},{"../actions.js":2,"../filt/filt.js":19,"../utils.js":23,"./common.js":4,"jquery":"jquery","react":"react"}],14:[function(require,module,exports){
+},{"../actions.js":2,"../filt/filt.js":20,"../utils.js":24,"./common.js":4,"jquery":"jquery","react":"react"}],15:[function(require,module,exports){
 var React = require("react");
 
 var common = require("./common.js");
@@ -2263,7 +2412,7 @@ var MainView = React.createClass({displayName: "MainView",
 module.exports = MainView;
 
 
-},{"../actions.js":2,"../filt/filt.js":19,"../store/view.js":22,"../utils.js":23,"./common.js":4,"./flowtable.js":7,"./flowview/index.js":9,"react":"react"}],15:[function(require,module,exports){
+},{"../actions.js":2,"../filt/filt.js":20,"../store/view.js":23,"../utils.js":24,"./common.js":4,"./flowtable.js":7,"./flowview/index.js":10,"react":"react"}],16:[function(require,module,exports){
 var React = require("react");
 var ReactRouter = require("react-router");
 var _ = require("lodash");
@@ -2358,7 +2507,7 @@ module.exports = {
     routes: routes
 };
 
-},{"../actions.js":2,"../store/store.js":21,"./common.js":4,"./eventlog.js":5,"./footer.js":12,"./header.js":13,"./mainview.js":14,"lodash":"lodash","react":"react","react-router":"react-router"}],16:[function(require,module,exports){
+},{"../actions.js":2,"../store/store.js":22,"./common.js":4,"./eventlog.js":5,"./footer.js":13,"./header.js":14,"./mainview.js":15,"lodash":"lodash","react":"react","react-router":"react-router"}],17:[function(require,module,exports){
 var React = require("react");
 
 var VirtualScrollMixin = {
@@ -2445,7 +2594,7 @@ var VirtualScrollMixin = {
 
 module.exports  = VirtualScrollMixin;
 
-},{"react":"react"}],17:[function(require,module,exports){
+},{"react":"react"}],18:[function(require,module,exports){
 
 var actions = require("./actions.js");
 
@@ -2475,7 +2624,7 @@ function Connection(url) {
 
 module.exports = Connection;
 
-},{"./actions.js":2}],18:[function(require,module,exports){
+},{"./actions.js":2}],19:[function(require,module,exports){
 
 var flux = require("flux");
 
@@ -2499,7 +2648,7 @@ module.exports = {
     AppDispatcher: AppDispatcher
 };
 
-},{"flux":"flux"}],19:[function(require,module,exports){
+},{"flux":"flux"}],20:[function(require,module,exports){
 module.exports = (function() {
   /*
    * Generated by PEG.js 0.8.0.
@@ -4275,7 +4424,7 @@ module.exports = (function() {
   };
 })();
 
-},{"../flow/utils.js":20}],20:[function(require,module,exports){
+},{"../flow/utils.js":21}],21:[function(require,module,exports){
 var _ = require("lodash");
 
 var MessageUtils = {
@@ -4343,7 +4492,7 @@ module.exports = {
     MessageUtils: MessageUtils
 };
 
-},{"lodash":"lodash"}],21:[function(require,module,exports){
+},{"lodash":"lodash"}],22:[function(require,module,exports){
 
 var _ = require("lodash");
 var $ = require("jquery");
@@ -4526,7 +4675,7 @@ module.exports = {
     FlowStore: FlowStore
 };
 
-},{"../actions.js":2,"../dispatcher.js":18,"../utils.js":23,"events":1,"jquery":"jquery","lodash":"lodash"}],22:[function(require,module,exports){
+},{"../actions.js":2,"../dispatcher.js":19,"../utils.js":24,"events":1,"jquery":"jquery","lodash":"lodash"}],23:[function(require,module,exports){
 var EventEmitter = require('events').EventEmitter;
 var _ = require("lodash");
 
@@ -4642,7 +4791,7 @@ module.exports = {
     StoreView: StoreView
 };
 
-},{"../utils.js":23,"events":1,"lodash":"lodash"}],23:[function(require,module,exports){
+},{"../utils.js":24,"events":1,"lodash":"lodash"}],24:[function(require,module,exports){
 var $ = require("jquery");
 var _ = require("lodash");
 
diff --git a/web/src/css/app.less b/web/src/css/app.less
index 26f22572..ecec3d9c 100644
--- a/web/src/css/app.less
+++ b/web/src/css/app.less
@@ -13,5 +13,6 @@ html {
 @import (less) "header.less";
 @import (less) "flowtable.less";
 @import (less) "flowdetail.less";
+@import (less) "flowview.less";
 @import (less) "eventlog.less";
 @import (less) "footer.less";
\ No newline at end of file
diff --git a/web/src/css/flowdetail.less b/web/src/css/flowdetail.less
index 7649057f..093ee14f 100644
--- a/web/src/css/flowdetail.less
+++ b/web/src/css/flowdetail.less
@@ -29,6 +29,9 @@
     }
 }
 
+.view-selector {
+  margin-top: 10px;
+}
 
 .flow-detail table {
     .monospace();
diff --git a/web/src/css/flowview.less b/web/src/css/flowview.less
new file mode 100644
index 00000000..44ae8ac2
--- /dev/null
+++ b/web/src/css/flowview.less
@@ -0,0 +1,9 @@
+.flowview-image {
+
+  text-align: center;
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+  }
+}
\ No newline at end of file
diff --git a/web/src/js/components/flowview/contentview.js b/web/src/js/components/flowview/contentview.js
new file mode 100644
index 00000000..09a64bb2
--- /dev/null
+++ b/web/src/js/components/flowview/contentview.js
@@ -0,0 +1,158 @@
+var React = require("react");
+var _ = require("lodash");
+
+var MessageUtils = require("../../flow/utils.js").MessageUtils;
+var utils = require("../../utils.js");
+
+var image_regex = /^image\/(png|jpe?g|gif|vnc.microsoft.icon|x-icon)$/i;
+var Image = React.createClass({
+    statics: {
+        matches: function (message) {
+            return image_regex.test(MessageUtils.getContentType(message));
+        }
+    },
+    render: function () {
+        var message_name = this.props.flow.request === this.props.message ? "request" : "response";
+        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 Raw = React.createClass({
+    statics: {
+        matches: function (message) {
+            return true;
+        }
+    },
+    render: function () {
+        //FIXME
+        return <div>raw</div>;
+    }
+});
+
+
+var Auto = React.createClass({
+    statics: {
+        matches: function () {
+            return false; // don't match itself
+        },
+        findView: function (message) {
+            for (var i = 0; i < all.length; i++) {
+                if (all[i].matches(message)) {
+                    return all[i];
+                }
+            }
+            return all[all.length - 1];
+        }
+    },
+    render: function () {
+        var View = Auto.findView(this.props.message);
+        return <View {...this.props}/>;
+    }
+});
+
+var all = [Auto, Image, Raw];
+
+
+var ContentEmpty = React.createClass({
+    render: function () {
+        var message_name = this.props.flow.request === this.props.message ? "request" : "response";
+        return <div className="alert alert-info">No {message_name} content.</div>;
+    }
+});
+
+var ContentMissing = React.createClass({
+    render: function () {
+        var message_name = this.props.flow.request === this.props.message ? "Request" : "Response";
+        return <div className="alert alert-info">{message_name} content missing.</div>;
+    }
+});
+
+var TooLarge = React.createClass({
+    render: function () {
+        var size = utils.formatSize(this.props.message.contentLength);
+        return <div className="alert alert-warning">
+            <button onClick={this.props.onClick} className="btn btn-xs btn-warning pull-right">Display anyway</button>
+            {size} content size.
+        </div>;
+    }
+});
+
+var ViewSelector = React.createClass({
+    render: function () {
+        var views = [];
+        for (var i = 0; i < all.length; i++) {
+            var view = all[i];
+            var className = "btn btn-default";
+            if (view === this.props.active) {
+                className += " active";
+            }
+            var text;
+            if (view === Auto) {
+                text = "auto: " + Auto.findView(this.props.message).displayName.toLowerCase();
+            } else {
+                text = view.displayName.toLowerCase();
+            }
+            views.push(
+                <button
+                    key={view.displayName}
+                    onClick={this.props.selectView.bind(null, view)}
+                    className={className}>
+                    {text}
+                </button>
+            );
+        }
+
+        return <div className="view-selector btn-group btn-group-xs">{views}</div>;
+    }
+});
+
+var ContentView = React.createClass({
+    getInitialState: function () {
+        return {
+            displayLarge: false,
+            View: Auto
+        };
+    },
+    propTypes: {
+        // It may seem a bit weird at the first glance:
+        // Every view takes the flow and the message as props, e.g.
+        // <Auto flow={flow} message={flow.request}/>
+        flow: React.PropTypes.object.isRequired,
+        message: React.PropTypes.object.isRequired,
+    },
+    selectView: function (view) {
+        this.setState({
+            View: view
+        });
+    },
+    displayLarge: function () {
+        this.setState({displayLarge: true});
+    },
+    componentWillReceiveProps: function (nextProps) {
+        if (nextProps.message !== this.props.message) {
+            this.setState(this.getInitialState());
+        }
+    },
+    render: function () {
+        var message = this.props.message;
+        if (message.contentLength === 0) {
+            return <ContentEmpty {...this.props}/>;
+        } else if (message.contentLength === null) {
+            return <ContentMissing {...this.props}/>;
+        } else if (message.contentLength > 1024 * 1024 * 3 && !this.state.displayLarge) {
+            return <TooLarge {...this.props} onClick={this.displayLarge}/>;
+        }
+
+        return <div>
+            <this.state.View {...this.props} />
+            <div className="text-center">
+                <ViewSelector selectView={this.selectView} active={this.state.View} message={message}/>
+            </div>
+        </div>;
+    }
+});
+
+module.exports = ContentView;
\ No newline at end of file
diff --git a/web/src/js/components/flowview/messages.js b/web/src/js/components/flowview/messages.js
index ffbfff43..fe8fa200 100644
--- a/web/src/js/components/flowview/messages.js
+++ b/web/src/js/components/flowview/messages.js
@@ -2,6 +2,7 @@ var React = require("react");
 
 var flowutils = require("../../flow/utils.js");
 var utils = require("../../utils.js");
+var ContentView = require("./contentview.js");
 
 var Headers = React.createClass({
     render: function () {
@@ -31,12 +32,6 @@ var Request = React.createClass({
             flowutils.RequestUtils.pretty_url(flow.request),
             "HTTP/" + flow.request.httpversion.join(".")
         ].join(" ");
-        var content = null;
-        if (flow.request.contentLength > 0) {
-            content = "Request Content Size: " + utils.formatSize(flow.request.contentLength);
-        } else {
-            content = <div className="alert alert-info">No Content</div>;
-        }
 
         //TODO: Styling
 
@@ -45,7 +40,7 @@ var Request = React.createClass({
                 <div className="first-line">{ first_line }</div>
                 <Headers message={flow.request}/>
                 <hr/>
-                {content}
+                <ContentView flow={flow} message={flow.request}/>
             </section>
         );
     }
@@ -59,12 +54,6 @@ var Response = React.createClass({
             flow.response.code,
             flow.response.msg
         ].join(" ");
-        var content = null;
-        if (flow.response.contentLength > 0) {
-            content = "Response Content Size: " + utils.formatSize(flow.response.contentLength);
-        } else {
-            content = <div className="alert alert-info">No Content</div>;
-        }
 
         //TODO: Styling
 
@@ -73,7 +62,7 @@ var Response = React.createClass({
                 <div className="first-line">{ first_line }</div>
                 <Headers message={flow.response}/>
                 <hr/>
-                {content}
+                <ContentView flow={flow} message={flow.response}/>
             </section>
         );
     }
-- 
cgit v1.2.3


From 89d66360d6f7caa9760fe56fa146396b1b4251dc Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Sun, 22 Mar 2015 00:28:08 +0100
Subject: tweak css

---
 libmproxy/web/static/app.css                |   6 +
 web/src/css/eventlog.less                   |   2 -
 web/src/css/flowdetail.less                 |  23 +--
 web/src/css/flowtable.less                  | 208 ++++++++++++++--------------
 web/src/css/flowview.less                   |  10 +-
 web/src/css/header.less                     |  32 ++---
 web/src/css/layout.less                     |   2 +-
 web/src/css/sprites.less                    |  28 ++--
 web/src/css/vendor-bootstrap-variables.less |  11 +-
 web/src/css/vendor-bootstrap.less           |   5 -
 10 files changed, 170 insertions(+), 157 deletions(-)

diff --git a/libmproxy/web/static/app.css b/libmproxy/web/static/app.css
index cf2db2c6..91e847a4 100644
--- a/libmproxy/web/static/app.css
+++ b/libmproxy/web/static/app.css
@@ -290,6 +290,9 @@ header .menu {
   max-height: 100px;
   overflow-y: auto;
 }
+.flow-detail hr {
+  margin: 0 0 5px;
+}
 .view-selector {
   margin-top: 10px;
 }
@@ -309,6 +312,9 @@ header .menu {
   width: 50%;
   padding-right: 1em;
 }
+.header-table td {
+  line-height: 1.3em;
+}
 .header-table .header-name {
   width: 33%;
   padding-right: 1em;
diff --git a/web/src/css/eventlog.less b/web/src/css/eventlog.less
index 8b0a7647..26dea3cc 100644
--- a/web/src/css/eventlog.less
+++ b/web/src/css/eventlog.less
@@ -6,7 +6,6 @@
     display: flex;
     flex-direction: column;
 
-
     > div {
         background-color: #F2F2F2;
         padding: 0 5px;
@@ -23,7 +22,6 @@
         background-color: #fcfcfc;
     }
 
-
     .fa-close {
         cursor: pointer;
         float: right;
diff --git a/web/src/css/flowdetail.less b/web/src/css/flowdetail.less
index 093ee14f..453cf425 100644
--- a/web/src/css/flowdetail.less
+++ b/web/src/css/flowdetail.less
@@ -1,13 +1,12 @@
 //TODO: Move into some utils
-.monospace(){
+.monospace() {
     font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
 }
 
-
 .flow-detail {
     width: 100%;
     overflow: auto;
-    
+
     nav {
         background-color: #F2F2F2;
     }
@@ -27,10 +26,15 @@
         max-height: 100px;
         overflow-y: auto;
     }
+
+    hr {
+        margin: 0 0 5px;
+    }
+
 }
 
 .view-selector {
-  margin-top: 10px;
+    margin-top: 10px;
 }
 
 .flow-detail table {
@@ -38,10 +42,10 @@
     width: 100%;
     table-layout: fixed;
     word-break: break-all;
-    
+
     tr {
-        &:not(:first-child){
-        border-top: 1px solid #f7f7f7;
+        &:not(:first-child) {
+            border-top: 1px solid #f7f7f7;
         }
     }
 
@@ -62,12 +66,15 @@
 }
 
 .header-table {
+    td {
+        line-height: 1.3em;
+    }
     .header-name {
         width: 33%;
         padding-right: 1em;
     }
     .header-value {
-        
+
     }
 }
 
diff --git a/web/src/css/flowtable.less b/web/src/css/flowtable.less
index d94d9370..3533983c 100644
--- a/web/src/css/flowtable.less
+++ b/web/src/css/flowtable.less
@@ -1,127 +1,127 @@
 //TODO: move into utils
 .user-select (@val) {
-    -webkit-touch-callout:  @val;
-    -webkit-user-select:    @val;
-    -khtml-user-select:     @val;
-    -moz-user-select:       @val;
-    -ms-user-select:        @val;
-    user-select:            @val;
+    -webkit-touch-callout: @val;
+    -webkit-user-select: @val;
+    -khtml-user-select: @val;
+    -moz-user-select: @val;
+    -ms-user-select: @val;
+    user-select: @val;
 }
 
 .flow-table {
-  width: 100%;
-  overflow: auto;
-
-  table {
     width: 100%;
-    table-layout: fixed;
-  }
-
-  thead {
-    background-color: #F2F2F2;
-    line-height: 23px;
-  }
-
-  th {
-    font-weight: normal;
-    box-shadow: 0 1px 0 #a6a6a6;
-    position: relative !important;
-    padding-left: 1px;
-    .user-select(none);
+    overflow: auto;
 
-    &.sort-asc, &.sort-desc {
-      background-color: lighten(#F2F2F2, 3%);
-    }
-    &.sort-asc:after, &.sort-desc:after {
-      font: normal normal normal 14px/1 FontAwesome;
-      position: absolute;
-      right: 3px;
-      top: 3px;
-      padding: 2px;
-      background-color: fadeout(lighten(#F2F2F2, 3%), 20%);
-    }
-    &.sort-asc:after {
-      content: "\f0de";
+    table {
+        width: 100%;
+        table-layout: fixed;
     }
-    &.sort-desc:after {
-      content: "\f0dd";
+
+    thead {
+        background-color: #F2F2F2;
+        line-height: 23px;
     }
 
-  }
+    th {
+        font-weight: normal;
+        box-shadow: 0 1px 0 #a6a6a6;
+        position: relative !important;
+        padding-left: 1px;
+        .user-select(none);
 
-  tr {
-    cursor: pointer;
+        &.sort-asc, &.sort-desc {
+            background-color: lighten(#F2F2F2, 3%);
+        }
+        &.sort-asc:after, &.sort-desc:after {
+            font: normal normal normal 14px/1 FontAwesome;
+            position: absolute;
+            right: 3px;
+            top: 3px;
+            padding: 2px;
+            background-color: fadeout(lighten(#F2F2F2, 3%), 20%);
+        }
+        &.sort-asc:after {
+            content: "\f0de";
+        }
+        &.sort-desc:after {
+            content: "\f0dd";
+        }
 
-    &:nth-child(even) {
-      background-color: rgba(0, 0, 0, 0.05);
-    }
-    &.selected {
-      background-color: hsla(209, 52%, 84%, 0.5) !important;
-    }
-    &.highlighted {
-      background-color: hsla(48, 100%, 50%, 0.4);
     }
-    &.highlighted:nth-child(even) {
-      background-color: hsla(48, 100%, 50%, 0.5);
+
+    tr {
+        cursor: pointer;
+
+        &:nth-child(even) {
+            background-color: rgba(0, 0, 0, 0.05);
+        }
+        &.selected {
+            background-color: hsla(209, 52%, 84%, 0.5) !important;
+        }
+        &.highlighted {
+            background-color: hsla(48, 100%, 50%, 0.4);
+        }
+        &.highlighted:nth-child(even) {
+            background-color: hsla(48, 100%, 50%, 0.5);
+        }
     }
-  }
 
-  td {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
+    td {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
 
-  @interceptorange: hsl(30, 100%, 50%);
+    @interceptorange: hsl(30, 100%, 50%);
 
-  tr.intercepted:not(.has-response) {
-    .col-path, .col-method {
-      color: @interceptorange;
+    tr.intercepted:not(.has-response) {
+        .col-path, .col-method {
+            color: @interceptorange;
+        }
     }
-  }
-  tr.intercepted.has-response {
-    .col-status, .col-size, .col-time {
-      color: @interceptorange;
+    tr.intercepted.has-response {
+        .col-status, .col-size, .col-time {
+            color: @interceptorange;
+        }
     }
-  }
 
-  .fa {
-    line-height: inherit;
-    &.pull-right {
-      margin-left: 0;
+    .fa {
+        line-height: inherit;
+        &.pull-right {
+            margin-left: 0;
+        }
     }
-  }
 
-  .col-tls {
-    width: 10px;
-  }
-  .col-tls-https {
-    background-color: rgba(0, 185, 0, 0.5);
-  }
-  .col-icon {
-    width: 32px;
-  }
-  .col-path {
-    .fa-repeat {
-      color: green;
-    }
-    .fa-pause {
-      color: @interceptorange;
-    }
-  }
-  .col-method {
-    width: 60px;
-  }
-  .col-status {
-    width: 50px;
-  }
-  .col-size {
-    width: 70px;
-  }
-  .col-time {
-    width: 50px;
-  }
-  td.col-time, td.col-size {
-    text-align: right;
-  }
+    .col-tls {
+        width: 10px;
+    }
+    .col-tls-https {
+        background-color: rgba(0, 185, 0, 0.5);
+    }
+    .col-icon {
+        width: 32px;
+    }
+    .col-path {
+        .fa-repeat {
+            color: green;
+        }
+        .fa-pause {
+            color: @interceptorange;
+        }
+    }
+    .col-method {
+        width: 60px;
+    }
+    .col-status {
+        width: 50px;
+    }
+    .col-size {
+        width: 70px;
+    }
+    .col-time {
+        width: 50px;
+    }
+    td.col-time, td.col-size {
+        text-align: right;
+    }
 }
\ No newline at end of file
diff --git a/web/src/css/flowview.less b/web/src/css/flowview.less
index 44ae8ac2..aa8a2df2 100644
--- a/web/src/css/flowview.less
+++ b/web/src/css/flowview.less
@@ -1,9 +1,9 @@
 .flowview-image {
 
-  text-align: center;
+    text-align: center;
 
-  img {
-    max-width: 100%;
-    max-height: 100%;
-  }
+    img {
+        max-width: 100%;
+        max-height: 100%;
+    }
 }
\ No newline at end of file
diff --git a/web/src/css/header.less b/web/src/css/header.less
index 57f122e8..6e61b956 100644
--- a/web/src/css/header.less
+++ b/web/src/css/header.less
@@ -2,30 +2,30 @@
 @import (reference) '../../node_modules/bootstrap/less/mixins/grid.less';
 
 header {
-  padding-top: 0.5em;
-  background-color: white;
-  @separator-color: lighten(grey, 15%);
-  .menu {
-    padding: 10px;
-    border-bottom: solid @separator-color 1px;
-  }
+    padding-top: 0.5em;
+    background-color: white;
+    @separator-color: lighten(grey, 15%);
+    .menu {
+        padding: 10px;
+        border-bottom: solid @separator-color 1px;
+    }
 }
 
 @menu-row-gutter-width: 5px;
 .menu-row {
-  .make-row(@menu-row-gutter-width);
+    .make-row(@menu-row-gutter-width);
 }
 
 .filter-input {
-  .make-md-column(3, @menu-row-gutter-width);
+    .make-md-column(3, @menu-row-gutter-width);
 }
 
 .filter-input .popover {
-  top: 27px;
-  display: block;
-  max-width: none;
-  .popover-content {
-    max-height: 500px;
-    overflow-y: auto;
-  }
+    top: 27px;
+    display: block;
+    max-width: none;
+    .popover-content {
+        max-height: 500px;
+        overflow-y: auto;
+    }
 }
\ No newline at end of file
diff --git a/web/src/css/layout.less b/web/src/css/layout.less
index f6807f24..4e96609b 100644
--- a/web/src/css/layout.less
+++ b/web/src/css/layout.less
@@ -15,7 +15,7 @@ html, body, #container {
 
 .main-view {
     flex: 1 1 auto;
-   
+
     display: flex;
     flex-direction: row;
 
diff --git a/web/src/css/sprites.less b/web/src/css/sprites.less
index 49b3600c..74131c5e 100644
--- a/web/src/css/sprites.less
+++ b/web/src/css/sprites.less
@@ -5,34 +5,42 @@
 
 // From Chrome Dev Tools
 .resource-icon-css {
-	background-image: url(images/chrome-devtools/resourceCSSIcon.png);
+    background-image: url(images/chrome-devtools/resourceCSSIcon.png);
 }
+
 .resource-icon-document {
-	background-image: url(images/chrome-devtools/resourceDocumentIcon.png);
+    background-image: url(images/chrome-devtools/resourceDocumentIcon.png);
 }
+
 .resource-icon-js {
-	background-image: url(images/chrome-devtools/resourceJSIcon.png);
+    background-image: url(images/chrome-devtools/resourceJSIcon.png);
 }
+
 .resource-icon-plain {
-	background-image: url(images/chrome-devtools/resourcePlainIcon.png);
+    background-image: url(images/chrome-devtools/resourcePlainIcon.png);
 }
 
 // Own
 .resource-icon-executable {
-	background-image: url(images/resourceExecutableIcon.png);
+    background-image: url(images/resourceExecutableIcon.png);
 }
+
 .resource-icon-flash {
-	background-image: url(images/resourceFlashIcon.png);
+    background-image: url(images/resourceFlashIcon.png);
 }
+
 .resource-icon-image {
-	background-image: url(images/resourceImageIcon.png);
+    background-image: url(images/resourceImageIcon.png);
 }
+
 .resource-icon-java {
-	background-image: url(images/resourceJavaIcon.png);
+    background-image: url(images/resourceJavaIcon.png);
 }
+
 .resource-icon-not-modified {
-	background-image: url(images/resourceNotModifiedIcon.png);
+    background-image: url(images/resourceNotModifiedIcon.png);
 }
+
 .resource-icon-redirect {
-	background-image: url(images/resourceRedirectIcon.png);
+    background-image: url(images/resourceRedirectIcon.png);
 }
\ No newline at end of file
diff --git a/web/src/css/vendor-bootstrap-variables.less b/web/src/css/vendor-bootstrap-variables.less
index b2818993..e2c37bf5 100644
--- a/web/src/css/vendor-bootstrap-variables.less
+++ b/web/src/css/vendor-bootstrap-variables.less
@@ -1,6 +1,5 @@
-
-@navbar-height:                    32px;
-@navbar-default-link-color:        #303030;
-@navbar-default-color:             #303030;
-@navbar-default-bg:                #ffffff;
-@navbar-default-border:            #e0e0e0;
+@navbar-height: 32px;
+@navbar-default-link-color: #303030;
+@navbar-default-color: #303030;
+@navbar-default-bg: #ffffff;
+@navbar-default-border: #e0e0e0;
diff --git a/web/src/css/vendor-bootstrap.less b/web/src/css/vendor-bootstrap.less
index 0b3252fe..35fda379 100644
--- a/web/src/css/vendor-bootstrap.less
+++ b/web/src/css/vendor-bootstrap.less
@@ -2,12 +2,10 @@
 @import "../../node_modules/bootstrap/less/variables.less";
 @import "vendor-bootstrap-variables.less";
 @import "../../node_modules/bootstrap/less/mixins.less";
-
 // Reset and dependencies
 @import "../../node_modules/bootstrap/less/normalize.less";
 @import "../../node_modules/bootstrap/less/print.less";
 @import "../../node_modules/bootstrap/less/glyphicons.less";
-
 // Core CSS
 @import "../../node_modules/bootstrap/less/scaffolding.less";
 @import "../../node_modules/bootstrap/less/type.less";
@@ -16,7 +14,6 @@
 @import "../../node_modules/bootstrap/less/tables.less";
 @import "../../node_modules/bootstrap/less/forms.less";
 @import "../../node_modules/bootstrap/less/buttons.less";
-
 // Components
 @import "../../node_modules/bootstrap/less/component-animations.less";
 @import "../../node_modules/bootstrap/less/dropdowns.less";
@@ -39,13 +36,11 @@
 @import "../../node_modules/bootstrap/less/responsive-embed.less";
 @import "../../node_modules/bootstrap/less/wells.less";
 @import "../../node_modules/bootstrap/less/close.less";
-
 // Components w/ JavaScript
 @import "../../node_modules/bootstrap/less/modals.less";
 @import "../../node_modules/bootstrap/less/tooltip.less";
 @import "../../node_modules/bootstrap/less/popovers.less";
 @import "../../node_modules/bootstrap/less/carousel.less";
-
 // Utility classes
 @import "../../node_modules/bootstrap/less/utilities.less";
 @import "../../node_modules/bootstrap/less/responsive-utilities.less";
-- 
cgit v1.2.3