format javascript

16 files changed, 497 insertions, 462 deletions

diff --git a/libmproxy/web/static/js/app.js b/libmproxy/web/static/js/app.js
index 92d6c4c8..8c898673 100644
--- a/libmproxy/web/static/js/app.js
+++ b/libmproxy/web/static/js/app.js
@@ -1,172 +1,188 @@
 const PayloadSources = {
-  VIEW_ACTION: "VIEW_ACTION",
-  SERVER_ACTION: "SERVER_ACTION"
+    VIEW_ACTION: "VIEW_ACTION",
+    SERVER_ACTION: "SERVER_ACTION"
 };
 
 
-
-  function Dispatcher() {"use strict";
-    this.callbacks = [];
-  }
-
-  Dispatcher.prototype.register=function(callback){"use strict";
-    this.callbacks.push(callback);
-  };
-
-  Dispatcher.prototype.unregister=function(callback){"use strict";
-    var index = this.callbacks.indexOf(f);
-    if (index >= 0) {
-      this.callbacks.splice(this.callbacks.indexOf(f), 1);
+    function Dispatcher() {"use strict";
+        this.callbacks = [];
     }
-  };
-
-  Dispatcher.prototype.dispatch=function(payload){"use strict";
-    console.debug("dispatch", payload);
-    this.callbacks.forEach(function(callback)  {
-        callback(payload);
-    });
-  };
-
+    Dispatcher.prototype.register=function(callback) {"use strict";
+        this.callbacks.push(callback);
+    };
+    Dispatcher.prototype.unregister=function(callback) {"use strict";
+        var index = this.callbacks.indexOf(f);
+        if (index >= 0) {
+            this.callbacks.splice(this.callbacks.indexOf(f), 1);
+        }
+    };
+    Dispatcher.prototype.dispatch=function(payload) {"use strict";
+        console.debug("dispatch", payload);
+        this.callbacks.forEach(function(callback)  {
+            callback(payload);
+        });
+    };
 
 
 AppDispatcher = new Dispatcher();
-AppDispatcher.dispatchViewAction = function(action){
-  action.actionSource = PayloadSources.VIEW_ACTION;
-  this.dispatch(action);
+AppDispatcher.dispatchViewAction = function(action) {
+    action.actionSource = PayloadSources.VIEW_ACTION;
+    this.dispatch(action);
 };
-AppDispatcher.dispatchServerAction = function(action){
-  action.actionSource = PayloadSources.SERVER_ACTION;
-  this.dispatch(action);
+AppDispatcher.dispatchServerAction = function(action) {
+    action.actionSource = PayloadSources.SERVER_ACTION;
+    this.dispatch(action);
 };
 var ActionTypes = {
-  SETTINGS_UPDATE: "SETTINGS_UPDATE",
-  EVENTLOG_ADD: "EVENTLOG_ADD"
+    SETTINGS_UPDATE: "SETTINGS_UPDATE",
+    EVENTLOG_ADD: "EVENTLOG_ADD"
 };
 
 var SettingsActions = {
-  update:function(settings) {
-  	settings = _.merge({}, SettingsStore.getAll(), settings);
-  	//TODO: Update server.
-
-  	//Facebook Flux: We do an optimistic update on the client already.
-    AppDispatcher.dispatchViewAction({
-      actionType: ActionTypes.SETTINGS_UPDATE,
-      settings: settings
-    });
-  }
+    update:function(settings) {
+        settings = _.merge({}, SettingsStore.getAll(), settings);
+        //TODO: Update server.
+
+        //Facebook Flux: We do an optimistic update on the client already.
+        AppDispatcher.dispatchViewAction({
+            actionType: ActionTypes.SETTINGS_UPDATE,
+            settings: settings
+        });
+    }
 };
 
-	function EventEmitter() {"use strict";
-		this.listeners = {};
-	}
-	EventEmitter.prototype.emit=function(event) {"use strict";
-		if (!(event in this.listeners)) {
-			return;
-		}
-		this.listeners[event].forEach(function(listener) {
-			listener.apply(this, arguments);
-		}.bind(this));
-	};
-	EventEmitter.prototype.addListener=function(event, f) {"use strict";
-		this.listeners[event] = this.listeners[event] || [];
-		this.listeners[event].push(f);
-	};
-	EventEmitter.prototype.removeListener=function(event, f) {"use strict";
-		if (!(event in this.listeners)) {
-			return false;
-		}
-		var index = this.listeners[event].indexOf(f);
-		if (index >= 0) {
-			this.listeners[event].splice(index, 1);
-		}
-	};
+    function EventEmitter() {"use strict";
+        this.listeners = {};
+    }
+    EventEmitter.prototype.emit=function(event) {"use strict";
+        if (!(event in this.listeners)) {
+            return;
+        }
+        this.listeners[event].forEach(function(listener) {
+            listener.apply(this, arguments);
+        }.bind(this));
+    };
+    EventEmitter.prototype.addListener=function(event, f) {"use strict";
+        this.listeners[event] = this.listeners[event] || [];
+        this.listeners[event].push(f);
+    };
+    EventEmitter.prototype.removeListener=function(event, f) {"use strict";
+        if (!(event in this.listeners)) {
+            return false;
+        }
+        var index = this.listeners[event].indexOf(f);
+        if (index >= 0) {
+            this.listeners[event].splice(index, 1);
+        }
+    };
 
 for(var EventEmitter____Key in EventEmitter){if(EventEmitter.hasOwnProperty(EventEmitter____Key)){_SettingsStore[EventEmitter____Key]=EventEmitter[EventEmitter____Key];}}var ____SuperProtoOfEventEmitter=EventEmitter===null?null:EventEmitter.prototype;_SettingsStore.prototype=Object.create(____SuperProtoOfEventEmitter);_SettingsStore.prototype.constructor=_SettingsStore;_SettingsStore.__superConstructor__=EventEmitter;
-	function _SettingsStore() {"use strict";
-		EventEmitter.call(this);
-		this.settings = { version: "0.12", showEventLog: true }; //FIXME: Need to get that from somewhere.
-	}
-	_SettingsStore.prototype.getAll=function() {"use strict";
-		return this.settings;
-	};
-	_SettingsStore.prototype.handle=function(action) {"use strict";
-		switch (action.actionType) {
-			case ActionTypes.SETTINGS_UPDATE:
-				this.settings = action.settings;
-				this.emit("change");
-				break;
-			default:
-				return;
-		}
-	};
+    function _SettingsStore() {"use strict";
+        EventEmitter.call(this);
+
+        //FIXME: What do we do if we haven't requested anything from the server yet?
+        this.settings = {
+            version: "0.12",
+            showEventLog: true
+        }; 
+    }
+    _SettingsStore.prototype.getAll=function() {"use strict";
+        return this.settings;
+    };
+    _SettingsStore.prototype.handle=function(action) {"use strict";
+        switch (action.actionType) {
+            case ActionTypes.SETTINGS_UPDATE:
+                this.settings = action.settings;
+                this.emit("change");
+                break;
+            default:
+                return;
+        }
+    };
 
 var SettingsStore = new _SettingsStore();
 AppDispatcher.register(SettingsStore.handle.bind(SettingsStore));
+//
+// We have an EventLogView and an EventLogStore:
+// The basic architecture is that one can request views on the event log
+// from the store, which returns a view object and then deals with getting the data required for the view.
+// The view object is accessed by React components and distributes updates etc.
+//
+// See also: components/EventLog.react.js
 
 for(var EventEmitter____Key in EventEmitter){if(EventEmitter.hasOwnProperty(EventEmitter____Key)){EventLogView[EventEmitter____Key]=EventEmitter[EventEmitter____Key];}}var ____SuperProtoOfEventEmitter=EventEmitter===null?null:EventEmitter.prototype;EventLogView.prototype=Object.create(____SuperProtoOfEventEmitter);EventLogView.prototype.constructor=EventLogView;EventLogView.__superConstructor__=EventEmitter;
-	function EventLogView(store, live){"use strict";
-		EventEmitter.call(this);
-		this.$EventLogView_store = store;
-		this.live = live;
-		this.log = [];
-
-		this.add = this.add.bind(this);
-
-		if(live){
-			this.$EventLogView_store.addListener("new_entry", this.add);
-		}
-		
-	}
-	EventLogView.prototype.close=function() {"use strict";
-		this.$EventLogView_store.removeListener("new_entry", this.add);
-	};
-	EventLogView.prototype.getAll=function() {"use strict";
-		return this.log;
-	};
-
-	EventLogView.prototype.add=function(entry){"use strict";
-		this.log.push(entry);
-		this.emit("change");
-	};
-	EventLogView.prototype.add_bulk=function(messages){"use strict";
-		var log = messages;
-		var last_id = log[log.length-1].id;
-		var to_add = _.filter(this.log, function(entry)  {return entry.id > last_id;});
-		this.log = log.concat(to_add);
-		this.emit("change");
-	};
+    function EventLogView(store, live) {"use strict";
+        EventEmitter.call(this);
+        this.$EventLogView_store = store;
+        this.live = live;
+        this.log = [];
+
+        this.add = this.add.bind(this);
+
+        if (live) {
+            this.$EventLogView_store.addListener("new_entry", this.add);
+        }
+    }
+    EventLogView.prototype.close=function() {"use strict";
+        this.$EventLogView_store.removeListener("new_entry", this.add);
+    };
+    EventLogView.prototype.getAll=function() {"use strict";
+        return this.log;
+    };
+    EventLogView.prototype.add=function(entry) {"use strict";
+        this.log.push(entry);
+        this.emit("change");
+    };
+    EventLogView.prototype.add_bulk=function(messages) {"use strict";
+        var log = messages;
+        var last_id = log[log.length - 1].id;
+        var to_add = _.filter(this.log, function(entry)  {return entry.id > last_id;});
+        this.log = log.concat(to_add);
+        this.emit("change");
+    };
 
 
 for(EventEmitter____Key in EventEmitter){if(EventEmitter.hasOwnProperty(EventEmitter____Key)){_EventLogStore[EventEmitter____Key]=EventEmitter[EventEmitter____Key];}}_EventLogStore.prototype=Object.create(____SuperProtoOfEventEmitter);_EventLogStore.prototype.constructor=_EventLogStore;_EventLogStore.__superConstructor__=EventEmitter;function _EventLogStore(){"use strict";if(EventEmitter!==null){EventEmitter.apply(this,arguments);}}
-	_EventLogStore.prototype.getView=function(since){"use strict";
-		var view = new EventLogView(this, !since);
-
-		//TODO: Really do bulk retrieval of last messages.
-
-		window.setTimeout(function(){
-			view.add_bulk([
-				{ id:1, message: "Hello World"},
-				{ id:2, message: "I was already transmitted as an event."}
-				]);
-		}, 100);
-
-		var id = 2;
-		view.add({id:id++, message: "I was already transmitted as an event."});
-		view.add({id:id++, message: "I was only transmitted as an event before the bulk was added.."});
-		window.setInterval(function(){
-			view.add({id: id++, message: "."});
-		}, 1000);
-		return view;
-	};
-	_EventLogStore.prototype.handle=function(action) {"use strict";
-		switch (action.actionType) {
-			case ActionTypes.EVENTLOG_ADD:
-				this.emit("new_message", action.message);
-				break;
-			default:
-				return;
-		}
-	};
+    _EventLogStore.prototype.getView=function(since) {"use strict";
+        var view = new EventLogView(this, !since);
+
+        //TODO: Really do bulk retrieval of last messages.
+        window.setTimeout(function() {
+            view.add_bulk([{
+                id: 1,
+                message: "Hello World"
+            }, {
+                id: 2,
+                message: "I was already transmitted as an event."
+            }]);
+        }, 100);
+
+        var id = 2;
+        view.add({
+            id: id++,
+            message: "I was already transmitted as an event."
+        });
+        view.add({
+            id: id++,
+            message: "I was only transmitted as an event before the bulk was added.."
+        });
+        window.setInterval(function() {
+            view.add({
+                id: id++,
+                message: "."
+            });
+        }, 1000);
+        return view;
+    };
+    _EventLogStore.prototype.handle=function(action) {"use strict";
+        switch (action.actionType) {
+            case ActionTypes.EVENTLOG_ADD:
+                this.emit("new_message", action.message);
+                break;
+            default:
+                return;
+        }
+    };
 
 var EventLogStore = new _EventLogStore();
 AppDispatcher.register(EventLogStore.handle.bind(EventLogStore));
@@ -177,11 +193,9 @@ AppDispatcher.register(EventLogStore.handle.bind(EventLogStore));
         }
         this.root = root;
     }
-
     _Connection.prototype.init=function() {"use strict";
         this.openWebSocketConnection();
     };
-
     _Connection.prototype.openWebSocketConnection=function() {"use strict";
         this.ws = new WebSocket(this.root.replace("http", "ws") + "/ws");
         var ws = this.ws;
@@ -191,7 +205,6 @@ AppDispatcher.register(EventLogStore.handle.bind(EventLogStore));
         ws.onerror = this.onerror.bind(this);
         ws.onclose = this.onclose.bind(this);
     };
-
     _Connection.prototype.onopen=function(open) {"use strict";
         console.log("onopen", this, arguments);
     };
@@ -206,7 +219,6 @@ AppDispatcher.register(EventLogStore.handle.bind(EventLogStore));
         console.log("onclose", this, arguments);
     };
 
-
 var Connection = new _Connection();
 /** @jsx React.DOM */
 
@@ -217,21 +229,23 @@ var MainMenu = React.createClass({displayName: 'MainMenu',
         });
     },
     render:function(){
-        return React.DOM.div(null, 
-            React.DOM.button({className: "btn " + (this.props.settings.showEventLog ? "btn-primary" : "btn-default"), onClick: this.toggleEventLog}, 
+        return (
+            React.DOM.div(null, 
+                React.DOM.button({className: "btn " + (this.props.settings.showEventLog ? "btn-primary" : "btn-default"), onClick: this.toggleEventLog}, 
                 React.DOM.i({className: "fa fa-database"}), " Display Event Log"
+                )
             )
-            );
+        );
     }
 });
 var ToolsMenu = React.createClass({displayName: 'ToolsMenu',
     render:function(){
-        return (React.DOM.div(null, "Tools Menu"));
+        return React.DOM.div(null, "Tools Menu");
     }
 });
 var ReportsMenu = React.createClass({displayName: 'ReportsMenu',
     render:function(){
-        return (React.DOM.div(null, "Reports Menu"));
+        return React.DOM.div(null, "Reports Menu");
     }
 });
 
@@ -268,7 +282,6 @@ var Header = React.createClass({displayName: 'Header',
     handleFileClick:function(){
         console.log("File click");
     },
-
     render:function(){
         var header = [];
         for(var item in _Header_Entries){
@@ -292,74 +305,78 @@ var Header = React.createClass({displayName: 'Header',
                 React.DOM.div({className: "menu"}, 
                     menu 
                 )
-            ));
+            )
+        );
     }
 });
 /** @jsx React.DOM */
 
 var TrafficTable = React.createClass({displayName: 'TrafficTable',
-    getInitialState: function(){
+    getInitialState:function() {
         return {
             flows: []
         };
     },
-    componentDidMount:function(){
+    componentDidMount:function() {
         //this.flowStore = FlowStore.getView();
         //this.flowStore.addListener("change",this.onFlowChange);
     },
-    componentWillUnmount:function(){
+    componentWillUnmount:function() {
         //this.flowStore.removeListener("change",this.onFlowChange);
         //this.flowStore.close();
     },
-    onFlowChange:function(){
+    onFlowChange:function() {
         this.setState({
             //flows: this.flowStore.getAll()
         });
     },
-    render: function () {
-       /*var flows = this.state.flows.map(function(flow){
-           return <div>{flow.request.method} {flow.request.scheme}://{flow.request.host}{flow.request.path}</div>;
-       }); *//**/
-       x = "Flow";
-       i = 12;
-       while(i--) x += x;
-       return React.DOM.div(null, React.DOM.pre(null, x));
-   }
+    render:function() {
+        /*var flows = this.state.flows.map(function(flow){
+        return <div>{flow.request.method} {flow.request.scheme}://{flow.request.host}{flow.request.path}</div>;
+        }); */
+        //Dummy Text for layout testing
+        x = "Flow";
+        i = 12;
+        while (i--) x += x;
+        return ( 
+            React.DOM.div(null, React.DOM.pre(null, " ", x, " ")) 
+        );
+    }
 });
 /** @jsx React.DOM */
 
 var EventLog = React.createClass({displayName: 'EventLog',
-	getInitialState:function(){
-		return {
-			log: []
-		};
-	},
-	componentDidMount:function(){
-		this.log = EventLogStore.getView();
-		this.log.addListener("change",this.onEventLogChange);
-	},
-	componentWillUnmount:function(){
-		this.log.removeListener("change",this.onEventLogChange);
-		this.log.close();
-	},
-	onEventLogChange:function(){
-		this.setState({
-			log: this.log.getAll()
-		});
-	},
-	close:function(){
-		SettingsActions.update({
-			showEventLog: false
-		});
-	},
-    render:function(){
-    	var messages = this.state.log.map(function(row)  {return React.DOM.div({key: row.id}, row.message);});
+    getInitialState:function() {
+        return {
+            log: []
+        };
+    },
+    componentDidMount:function() {
+        this.log = EventLogStore.getView();
+        this.log.addListener("change", this.onEventLogChange);
+    },
+    componentWillUnmount:function() {
+        this.log.removeListener("change", this.onEventLogChange);
+        this.log.close();
+    },
+    onEventLogChange:function() {
+        this.setState({
+            log: this.log.getAll()
+        });
+    },
+    close:function() {
+        SettingsActions.update({
+            showEventLog: false
+        });
+    },
+    render:function() {
+        var messages = this.state.log.map(function(row)  {return React.DOM.div({key: row.id}, row.message);});
         return (
             React.DOM.div({className: "eventlog"}, 
-            React.DOM.pre(null, 
-            React.DOM.i({className: "fa fa-close close-button", onClick: this.close}), 
-            messages
-            )
+                React.DOM.pre(null, 
+                    React.DOM.i({className: "fa fa-close close-button", onClick: this.close}), 
+                    messages
+                )
             )
         );
     }
@@ -379,54 +396,54 @@ var Footer = React.createClass({displayName: 'Footer',
 
 //TODO: Move out of here, just a stub.
 var Reports = React.createClass({displayName: 'Reports',
-   render:function(){
-       return (React.DOM.div(null, "Report Editor"));
-   }
+    render:function(){
+        return React.DOM.div(null, "Report Editor");
+    }
 });
 
 
 
 var ProxyAppMain = React.createClass({displayName: 'ProxyAppMain',
     getInitialState:function(){
-      return { settings: SettingsStore.getAll() };
+        return { settings: SettingsStore.getAll() };
     },
     componentDidMount:function(){
-      SettingsStore.addListener("change", this.onSettingsChange);
+        SettingsStore.addListener("change", this.onSettingsChange);
     },
     componentWillUnmount:function(){
-      SettingsStore.removeListener("change", this.onSettingsChange);
+        SettingsStore.removeListener("change", this.onSettingsChange);
     },
     onSettingsChange:function(){
-      console.log("onSettingsChange");
-      this.setState({settings: SettingsStore.getAll()});
+        console.log("onSettingsChange");
+        this.setState({settings: SettingsStore.getAll()});
     },
     render:function() {
-      return (
-        React.DOM.div({id: "container"}, 
-          Header({settings: this.state.settings}), 
-          React.DOM.div({id: "main"}, this.props.activeRouteHandler(null)), 
-          this.state.settings.showEventLog ? EventLog(null) : null, 
-          Footer(null)
-        )
-      );
+        return (
+            React.DOM.div({id: "container"}, 
+            Header({settings: this.state.settings}), 
+            React.DOM.div({id: "main"}, this.props.activeRouteHandler(null)), 
+            this.state.settings.showEventLog ? EventLog(null) : null, 
+            Footer(null)
+            )
+            );
     }
 });
 
 
 var ProxyApp = (
-  ReactRouter.Routes({location: "hash"}, 
-    ReactRouter.Route({name: "app", path: "/", handler: ProxyAppMain}, 
-        ReactRouter.Route({name: "main", handler: TrafficTable}), 
-        ReactRouter.Route({name: "reports", handler: Reports}), 
-        ReactRouter.Redirect({to: "main"})
+    ReactRouter.Routes({location: "hash"}, 
+        ReactRouter.Route({name: "app", path: "/", handler: ProxyAppMain}, 
+            ReactRouter.Route({name: "main", handler: TrafficTable}), 
+            ReactRouter.Route({name: "reports", handler: Reports}), 
+            ReactRouter.Redirect({to: "main"})
+        )
     )
-  )
 );
 
-$(function(){
+$(function() {
 
-  Connection.init();
-  app = React.renderComponent(ProxyApp, document.body);
+    Connection.init();
+    app = React.renderComponent(ProxyApp, document.body);
 
 });
 //# sourceMappingURL=app.js.map
\ No newline at end of file
diff --git a/web/gulpfile.js b/web/gulpfile.js
index 3aebcd95..6f72016b 100644
--- a/web/gulpfile.js
+++ b/web/gulpfile.js
@@ -98,7 +98,7 @@ gulp.task("scripts-prod", ["scripts-app-prod", "scripts-vendor-prod"]);
 gulp.task("jshint", function () {
     return gulp.src(["src/js/**"])
         .pipe(dont_break_on_errors())
-        .pipe(react({harmony: true}))
+        .pipe(react({harmony: false /* Do not do Harmony transformation for JSHint */}))
         .pipe(jshint())
         .pipe(jshint.reporter("jshint-stylish"))
 });
diff --git a/web/src/css/app.less b/web/src/css/app.less
index ce9d9149..a5ff516d 100644
--- a/web/src/css/app.less
+++ b/web/src/css/app.less
@@ -1,10 +1,10 @@
 // www.paulirish.com/2012/box-sizing-border-box-ftw/
 html {
-	box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 *, *:before, *:after {
-	box-sizing: inherit;
+    box-sizing: inherit;
 }
 
 @import (less) "layout.less";
diff --git a/web/src/css/eventlog.less b/web/src/css/eventlog.less
index 8ad304aa..6b0c0e61 100644
--- a/web/src/css/eventlog.less
+++ b/web/src/css/eventlog.less
@@ -1,22 +1,22 @@
 .eventlog {
 
-	flex: 0 0 auto;
+    flex: 0 0 auto;
 
-	pre {
-		margin: 0;
-		border-radius: 0;
-		height: 200px;
-		overflow: auto;
-	}
+    pre {
+        margin: 0;
+        border-radius: 0;
+        height: 200px;
+        overflow: auto;
+    }
 
-	.close-button {
-		float: right;
-		margin: -9px;
-		padding: 4px;
-		cursor: pointer;
-		color: grey;
-		&:hover {
-			color: black;
-		}
-	}
+    .close-button {
+        float: right;
+        margin: -9px;
+        padding: 4px;
+        cursor: pointer;
+        color: grey;
+        &:hover {
+            color: black;
+        }
+    }
 }
\ No newline at end of file
diff --git a/web/src/css/footer.less b/web/src/css/footer.less
index be7a1d76..c041a022 100644
--- a/web/src/css/footer.less
+++ b/web/src/css/footer.less
@@ -1,4 +1,4 @@
 footer {
-	box-shadow: 0 -1px 3px lightgray;
-	padding: 0px 10px 3px;
+    box-shadow: 0 -1px 3px lightgray;
+    padding: 0px 10px 3px;
 }
\ No newline at end of file
diff --git a/web/src/js/Connection.es6.js b/web/src/js/Connection.es6.js
index 05d86c93..7250dd39 100644
--- a/web/src/js/Connection.es6.js
+++ b/web/src/js/Connection.es6.js
@@ -5,11 +5,9 @@ class _Connection {
         }
         this.root = root;
     }
-
     init() {
         this.openWebSocketConnection();
     }
-
     openWebSocketConnection() {
         this.ws = new WebSocket(this.root.replace("http", "ws") + "/ws");
         var ws = this.ws;
@@ -19,7 +17,6 @@ class _Connection {
         ws.onerror = this.onerror.bind(this);
         ws.onclose = this.onclose.bind(this);
     }
-
     onopen(open) {
         console.log("onopen", this, arguments);
     }
@@ -33,6 +30,5 @@ class _Connection {
     onclose(close) {
         console.log("onclose", this, arguments);
     }
-
 }
 var Connection = new _Connection();
\ No newline at end of file
diff --git a/web/src/js/Dispatcher.es6.js b/web/src/js/Dispatcher.es6.js
index 6ac17f9f..f1f36cc8 100644
--- a/web/src/js/Dispatcher.es6.js
+++ b/web/src/js/Dispatcher.es6.js
@@ -1,40 +1,35 @@
 const PayloadSources = {
-  VIEW_ACTION: "VIEW_ACTION",
-  SERVER_ACTION: "SERVER_ACTION"
+    VIEW_ACTION: "VIEW_ACTION",
+    SERVER_ACTION: "SERVER_ACTION"
 };
 
 class Dispatcher {
-
-  constructor() {
-    this.callbacks = [];
-  }
-
-  register(callback){
-    this.callbacks.push(callback);
-  }
-
-  unregister(callback){
-    var index = this.callbacks.indexOf(f);
-    if (index >= 0) {
-      this.callbacks.splice(this.callbacks.indexOf(f), 1);
+    constructor() {
+        this.callbacks = [];
+    }
+    register(callback) {
+        this.callbacks.push(callback);
+    }
+    unregister(callback) {
+        var index = this.callbacks.indexOf(f);
+        if (index >= 0) {
+            this.callbacks.splice(this.callbacks.indexOf(f), 1);
+        }
+    }
+    dispatch(payload) {
+        console.debug("dispatch", payload);
+        this.callbacks.forEach((callback) => {
+            callback(payload);
+        });
     }
-  }
-
-  dispatch(payload){
-    console.debug("dispatch", payload);
-    this.callbacks.forEach((callback) => {
-        callback(payload);
-    });
-  }
-
 }
 
 AppDispatcher = new Dispatcher();
-AppDispatcher.dispatchViewAction = function(action){
-  action.actionSource = PayloadSources.VIEW_ACTION;
-  this.dispatch(action);
+AppDispatcher.dispatchViewAction = function(action) {
+    action.actionSource = PayloadSources.VIEW_ACTION;
+    this.dispatch(action);
 };
-AppDispatcher.dispatchServerAction = function(action){
-  action.actionSource = PayloadSources.SERVER_ACTION;
-  this.dispatch(action);
+AppDispatcher.dispatchServerAction = function(action) {
+    action.actionSource = PayloadSources.SERVER_ACTION;
+    this.dispatch(action);
 };
\ No newline at end of file
diff --git a/web/src/js/actions.es6.js b/web/src/js/actions.es6.js
index 6b3a5870..55cb4552 100644
--- a/web/src/js/actions.es6.js
+++ b/web/src/js/actions.es6.js
@@ -1,17 +1,17 @@
 var ActionTypes = {
-  SETTINGS_UPDATE: "SETTINGS_UPDATE",
-  EVENTLOG_ADD: "EVENTLOG_ADD"
+    SETTINGS_UPDATE: "SETTINGS_UPDATE",
+    EVENTLOG_ADD: "EVENTLOG_ADD"
 };
 
 var SettingsActions = {
-  update(settings) {
-  	settings = _.merge({}, SettingsStore.getAll(), settings);
-  	//TODO: Update server.
+    update(settings) {
+        settings = _.merge({}, SettingsStore.getAll(), settings);
+        //TODO: Update server.
 
-  	//Facebook Flux: We do an optimistic update on the client already.
-    AppDispatcher.dispatchViewAction({
-      actionType: ActionTypes.SETTINGS_UPDATE,
-      settings: settings
-    });
-  }
+        //Facebook Flux: We do an optimistic update on the client already.
+        AppDispatcher.dispatchViewAction({
+            actionType: ActionTypes.SETTINGS_UPDATE,
+            settings: settings
+        });
+    }
 };
\ No newline at end of file
diff --git a/web/src/js/app.js b/web/src/js/app.js
index 2049ef25..3af4c79c 100644
--- a/web/src/js/app.js
+++ b/web/src/js/app.js
@@ -1,6 +1,6 @@
-$(function(){
+$(function() {
 
-  Connection.init();
-  app = React.renderComponent(ProxyApp, document.body);
+    Connection.init();
+    app = React.renderComponent(ProxyApp, document.body);
 
 });
\ No newline at end of file
diff --git a/web/src/js/components/EventLog.react.js b/web/src/js/components/EventLog.react.js
index 3a7dedc8..6c7a7c58 100644
--- a/web/src/js/components/EventLog.react.js
+++ b/web/src/js/components/EventLog.react.js
@@ -1,37 +1,37 @@
 /** @jsx React.DOM */
 
 var EventLog = React.createClass({
-	getInitialState(){
-		return {
-			log: []
-		};
-	},
-	componentDidMount(){
-		this.log = EventLogStore.getView();
-		this.log.addListener("change",this.onEventLogChange);
-	},
-	componentWillUnmount(){
-		this.log.removeListener("change",this.onEventLogChange);
-		this.log.close();
-	},
-	onEventLogChange(){
-		this.setState({
-			log: this.log.getAll()
-		});
-	},
-	close(){
-		SettingsActions.update({
-			showEventLog: false
-		});
-	},
-    render(){
-    	var messages = this.state.log.map(row => <div key={row.id}>{row.message}</div>);
+    getInitialState() {
+        return {
+            log: []
+        };
+    },
+    componentDidMount() {
+        this.log = EventLogStore.getView();
+        this.log.addListener("change", this.onEventLogChange);
+    },
+    componentWillUnmount() {
+        this.log.removeListener("change", this.onEventLogChange);
+        this.log.close();
+    },
+    onEventLogChange() {
+        this.setState({
+            log: this.log.getAll()
+        });
+    },
+    close() {
+        SettingsActions.update({
+            showEventLog: false
+        });
+    },
+    render() {
+        var messages = this.state.log.map(row => (<div key={row.id}>{row.message}</div>));
         return (
             <div className="eventlog">
-            <pre>
-            <i className="fa fa-close close-button" onClick={this.close}></i>
-            {messages}
-            </pre>
+                <pre>
+                    <i className="fa fa-close close-button" onClick={this.close}></i>
+                    {messages}
+                </pre>
             </div>
         );
     }
diff --git a/web/src/js/components/Header.react.js b/web/src/js/components/Header.react.js
index 41202463..0131d350 100644
--- a/web/src/js/components/Header.react.js
+++ b/web/src/js/components/Header.react.js
@@ -7,21 +7,23 @@ var MainMenu = React.createClass({
         });
     },
     render(){
-        return <div>
-            <button className={"btn " + (this.props.settings.showEventLog ? "btn-primary" : "btn-default")} onClick={this.toggleEventLog}>
+        return (
+            <div>
+                <button className={"btn " + (this.props.settings.showEventLog ? "btn-primary" : "btn-default")} onClick={this.toggleEventLog}>
                 <i className="fa fa-database"></i> Display Event Log
-            </button>
-            </div>;
+                </button>
+            </div>
+        );
     }
 });
 var ToolsMenu = React.createClass({
     render(){
-        return (<div>Tools Menu</div>);
+        return <div>Tools Menu</div>;
     }
 });
 var ReportsMenu = React.createClass({
     render(){
-        return (<div>Reports Menu</div>);
+        return <div>Reports Menu</div>;
     }
 });
 
@@ -58,7 +60,6 @@ var Header = React.createClass({
     handleFileClick(){
         console.log("File click");
     },
-
     render(){
         var header = [];
         for(var item in _Header_Entries){
@@ -82,6 +83,7 @@ var Header = React.createClass({
                 <div className="menu">
                     { menu }
                 </div>
-            </header>);
+            </header>
+        );
     }
 });
\ No newline at end of file
diff --git a/web/src/js/components/ProxyApp.react.js b/web/src/js/components/ProxyApp.react.js
index fc21ecd8..01adb089 100644
--- a/web/src/js/components/ProxyApp.react.js
+++ b/web/src/js/components/ProxyApp.react.js
@@ -2,46 +2,46 @@
 
 //TODO: Move out of here, just a stub.
 var Reports = React.createClass({
-   render(){
-       return (<div>Report Editor</div>);
-   }
+    render(){
+        return <div>Report Editor</div>;
+    }
 });
 
 
 
 var ProxyAppMain = React.createClass({
     getInitialState(){
-      return { settings: SettingsStore.getAll() };
+        return { settings: SettingsStore.getAll() };
     },
     componentDidMount(){
-      SettingsStore.addListener("change", this.onSettingsChange);
+        SettingsStore.addListener("change", this.onSettingsChange);
     },
     componentWillUnmount(){
-      SettingsStore.removeListener("change", this.onSettingsChange);
+        SettingsStore.removeListener("change", this.onSettingsChange);
     },
     onSettingsChange(){
-      console.log("onSettingsChange");
-      this.setState({settings: SettingsStore.getAll()});
+        console.log("onSettingsChange");
+        this.setState({settings: SettingsStore.getAll()});
     },
     render() {
-      return (
-        <div id="container">
-          <Header settings={this.state.settings}/>
-          <div id="main"><this.props.activeRouteHandler/></div>
-          {this.state.settings.showEventLog ? <EventLog/> : null}
-          <Footer/>
-        </div>
-      );
+        return (
+            <div id="container">
+            <Header settings={this.state.settings}/>
+            <div id="main"><this.props.activeRouteHandler/></div>
+            {this.state.settings.showEventLog ? <EventLog/> : null}
+            <Footer/>
+            </div>
+            );
     }
 });
 
 
 var ProxyApp = (
-  <ReactRouter.Routes location="hash">
-    <ReactRouter.Route name="app" path="/" handler={ProxyAppMain}>
-        <ReactRouter.Route name="main" handler={TrafficTable}/>
-        <ReactRouter.Route name="reports" handler={Reports}/>
-        <ReactRouter.Redirect to="main"/>
-    </ReactRouter.Route>
-  </ReactRouter.Routes>
+    <ReactRouter.Routes location="hash">
+        <ReactRouter.Route name="app" path="/" handler={ProxyAppMain}>
+            <ReactRouter.Route name="main" handler={TrafficTable}/>
+            <ReactRouter.Route name="reports" handler={Reports}/>
+            <ReactRouter.Redirect to="main"/>
+        </ReactRouter.Route>
+    </ReactRouter.Routes>
 );
diff --git a/web/src/js/components/TrafficTable.react.js b/web/src/js/components/TrafficTable.react.js
index d6a4f200..7e9e26e3 100644
--- a/web/src/js/components/TrafficTable.react.js
+++ b/web/src/js/components/TrafficTable.react.js
@@ -1,31 +1,34 @@
 /** @jsx React.DOM */
 
 var TrafficTable = React.createClass({
-    getInitialState: function(){
+    getInitialState() {
         return {
             flows: []
         };
     },
-    componentDidMount(){
+    componentDidMount() {
         //this.flowStore = FlowStore.getView();
         //this.flowStore.addListener("change",this.onFlowChange);
     },
-    componentWillUnmount(){
+    componentWillUnmount() {
         //this.flowStore.removeListener("change",this.onFlowChange);
         //this.flowStore.close();
     },
-    onFlowChange(){
+    onFlowChange() {
         this.setState({
             //flows: this.flowStore.getAll()
         });
     },
-    render: function () {
-       /*var flows = this.state.flows.map(function(flow){
-           return <div>{flow.request.method} {flow.request.scheme}://{flow.request.host}{flow.request.path}</div>;
-       }); *//**/
-       x = "Flow";
-       i = 12;
-       while(i--) x += x;
-       return <div><pre>{x}</pre></div>;
-   }
+    render() {
+        /*var flows = this.state.flows.map(function(flow){
+        return <div>{flow.request.method} {flow.request.scheme}://{flow.request.host}{flow.request.path}</div>;
+        }); */
+        //Dummy Text for layout testing
+        x = "Flow";
+        i = 12;
+        while (i--) x += x;
+        return ( 
+            <div><pre> { x } </pre></div> 
+        );
+    }
 });
\ No newline at end of file
diff --git a/web/src/js/stores/EventLogStore.es6.js b/web/src/js/stores/EventLogStore.es6.js
index 55401690..e470f44f 100644
--- a/web/src/js/stores/EventLogStore.es6.js
+++ b/web/src/js/stores/EventLogStore.es6.js
@@ -1,67 +1,84 @@
-class EventLogView extends EventEmitter {
-	constructor(store, live){
-		super();
-		this._store = store;
-		this.live = live;
-		this.log = [];
+//
+// We have an EventLogView and an EventLogStore:
+// The basic architecture is that one can request views on the event log
+// from the store, which returns a view object and then deals with getting the data required for the view.
+// The view object is accessed by React components and distributes updates etc.
+//
+// See also: components/EventLog.react.js
 
-		this.add = this.add.bind(this);
+class EventLogView extends EventEmitter {
+    constructor(store, live) {
+        super();
+        this._store = store;
+        this.live = live;
+        this.log = [];
 
-		if(live){
-			this._store.addListener("new_entry", this.add);
-		}
-		
-	}
-	close() {
-		this._store.removeListener("new_entry", this.add);
-	}
-	getAll() {
-		return this.log;
-	}
+        this.add = this.add.bind(this);
 
-	add(entry){
-		this.log.push(entry);
-		this.emit("change");
-	}
-	add_bulk(messages){
-		var log = messages;
-		var last_id = log[log.length-1].id;
-		var to_add = _.filter(this.log, entry => entry.id > last_id);
-		this.log = log.concat(to_add);
-		this.emit("change");
-	}
+        if (live) {
+            this._store.addListener("new_entry", this.add);
+        }
+    }
+    close() {
+        this._store.removeListener("new_entry", this.add);
+    }
+    getAll() {
+        return this.log;
+    }
+    add(entry) {
+        this.log.push(entry);
+        this.emit("change");
+    }
+    add_bulk(messages) {
+        var log = messages;
+        var last_id = log[log.length - 1].id;
+        var to_add = _.filter(this.log, entry => entry.id > last_id);
+        this.log = log.concat(to_add);
+        this.emit("change");
+    }
 }
 
 class _EventLogStore extends EventEmitter {
-	getView(since){
-		var view = new EventLogView(this, !since);
-
-		//TODO: Really do bulk retrieval of last messages.
+    getView(since) {
+        var view = new EventLogView(this, !since);
 
-		window.setTimeout(function(){
-			view.add_bulk([
-				{ id:1, message: "Hello World"},
-				{ id:2, message: "I was already transmitted as an event."}
-				]);
-		}, 100);
+        //TODO: Really do bulk retrieval of last messages.
+        window.setTimeout(function() {
+            view.add_bulk([{
+                id: 1,
+                message: "Hello World"
+            }, {
+                id: 2,
+                message: "I was already transmitted as an event."
+            }]);
+        }, 100);
 
-		var id = 2;
-		view.add({id:id++, message: "I was already transmitted as an event."});
-		view.add({id:id++, message: "I was only transmitted as an event before the bulk was added.."});
-		window.setInterval(function(){
-			view.add({id: id++, message: "."});
-		}, 1000);
-		return view;
-	}
-	handle(action) {
-		switch (action.actionType) {
-			case ActionTypes.EVENTLOG_ADD:
-				this.emit("new_message", action.message);
-				break;
-			default:
-				return;
-		}
-	}
+        var id = 2;
+        view.add({
+            id: id++,
+            message: "I was already transmitted as an event."
+        });
+        view.add({
+            id: id++,
+            message: "I was only transmitted as an event before the bulk was added.."
+        });
+        window.setInterval(function() {
+            view.add({
+                id: id++,
+                message: "."
+            });
+        }, 1000);
+        return view;
+    }
+    handle(action) {
+        switch (action.actionType) {
+            case ActionTypes.EVENTLOG_ADD:
+                this.emit("new_message", action.message);
+                break;
+            default:
+                return;
+        }
+    }
 }
 var EventLogStore = new _EventLogStore();
 AppDispatcher.register(EventLogStore.handle.bind(EventLogStore));
\ No newline at end of file
diff --git a/web/src/js/stores/SettingsStore.es6.js b/web/src/js/stores/SettingsStore.es6.js
index dea4597c..2743161e 100644
--- a/web/src/js/stores/SettingsStore.es6.js
+++ b/web/src/js/stores/SettingsStore.es6.js
@@ -1,21 +1,26 @@
 class _SettingsStore extends EventEmitter {
-	constructor() {
-		super();
-		this.settings = { version: "0.12", showEventLog: true }; //FIXME: Need to get that from somewhere.
-	}
-	getAll() {
-		return this.settings;
-	}
-	handle(action) {
-		switch (action.actionType) {
-			case ActionTypes.SETTINGS_UPDATE:
-				this.settings = action.settings;
-				this.emit("change");
-				break;
-			default:
-				return;
-		}
-	}
+    constructor() {
+        super();
+
+        //FIXME: What do we do if we haven't requested anything from the server yet?
+        this.settings = {
+            version: "0.12",
+            showEventLog: true
+        }; 
+    }
+    getAll() {
+        return this.settings;
+    }
+    handle(action) {
+        switch (action.actionType) {
+            case ActionTypes.SETTINGS_UPDATE:
+                this.settings = action.settings;
+                this.emit("change");
+                break;
+            default:
+                return;
+        }
+    }
 }
 var SettingsStore = new _SettingsStore();
-AppDispatcher.register(SettingsStore.handle.bind(SettingsStore));
+AppDispatcher.register(SettingsStore.handle.bind(SettingsStore));
\ No newline at end of file
diff --git a/web/src/js/stores/base.es6.js b/web/src/js/stores/base.es6.js
index d5d0c7ab..1dc4ca2f 100644
--- a/web/src/js/stores/base.es6.js
+++ b/web/src/js/stores/base.es6.js
@@ -1,26 +1,26 @@
 class EventEmitter {
-	constructor() {
-		this.listeners = {};
-	}
-	emit(event) {
-		if (!(event in this.listeners)) {
-			return;
-		}
-		this.listeners[event].forEach(function(listener) {
-			listener.apply(this, arguments);
-		}.bind(this));
-	}
-	addListener(event, f) {
-		this.listeners[event] = this.listeners[event] || [];
-		this.listeners[event].push(f);
-	}
-	removeListener(event, f) {
-		if (!(event in this.listeners)) {
-			return false;
-		}
-		var index = this.listeners[event].indexOf(f);
-		if (index >= 0) {
-			this.listeners[event].splice(index, 1);
-		}
-	}
+    constructor() {
+        this.listeners = {};
+    }
+    emit(event) {
+        if (!(event in this.listeners)) {
+            return;
+        }
+        this.listeners[event].forEach(function(listener) {
+            listener.apply(this, arguments);
+        }.bind(this));
+    }
+    addListener(event, f) {
+        this.listeners[event] = this.listeners[event] || [];
+        this.listeners[event].push(f);
+    }
+    removeListener(event, f) {
+        if (!(event in this.listeners)) {
+            return false;
+        }
+        var index = this.listeners[event].indexOf(f);
+        if (index >= 0) {
+            this.listeners[event].splice(index, 1);
+        }
+    }
 }
\ No newline at end of file