Client-side cleanup

- Remove grunt
- Formatting and spacing. There shall be 4 spaces in a tab. Not 3. Not
5. And 2 is right out.

10 files changed, 110 insertions, 280 deletions

diff --git a/libmproxy/web/static/js/app.js b/libmproxy/web/static/js/app.js
index 8dada810..eeb6e5dd 100644
--- a/libmproxy/web/static/js/app.js
+++ b/libmproxy/web/static/js/app.js
@@ -206,15 +206,15 @@ var App = React.createClass({displayName: 'App',
         this.setState({settings: settings.getAll()});
     },
     render: function () {
-    return (
-      React.DOM.div({id: "container"}, 
-        Header({settings: this.state.settings}), 
-        React.DOM.div({id: "main"}, 
-            this.props.activeRouteHandler({settings: this.state.settings})
-        ), 
-        Footer(null)
-      )
-    );
+      return (
+        React.DOM.div({id: "container"}, 
+          Header({settings: this.state.settings}), 
+          React.DOM.div({id: "main"}, 
+              this.props.activeRouteHandler({settings: this.state.settings})
+          ), 
+          Footer(null)
+        )
+      );
     }
 });
 
@@ -231,20 +231,18 @@ var TrafficTable = React.createClass({displayName: 'TrafficTable',
         flowStore.addChangeListener(this.onFlowsChange);
 
         $.getJSON("/flows.json").success(function (flows) {
-
             flows.forEach(function (flow, i) {
                 window.setTimeout(function () {
                     flowStore.addFlow(flow);
                 }, _.random(i*400,i*400+1000));
             });
-
         }.bind(this));
     },
     componentWillUnmount: function(){
         this.state.flowStore.close();
     },
     onFlowsChange: function(event, flows){
-       this.setState({flows: flows.getAll()});
+        this.setState({flows: flows.getAll()});
     },
     render: function () {
        var flows = this.state.flows.map(function(flow){
diff --git a/web/Gruntfile.js b/web/Gruntfile.js
deleted file mode 100644
index 5fe5a402..00000000
--- a/web/Gruntfile.js
+++ /dev/null
@@ -1,154 +0,0 @@
-var cssfiles = {
-    "../libmproxy/web/static/css/app.css": "src/css/app.less",
-    "../libmproxy/web/static/css/vendor.css": "src/css/vendor.less",
-};
-var jsfiles = {
-    "../libmproxy/web/static/js/vendor.js": [
-        'src/vendor/jquery/jquery.js',
-        'src/vendor/lodash/lodash.js',
-        'src/vendor/react/react-with-addons.js',
-        'src/vendor/react-router/react-router.js',
-        'src/vendor/react-bootstrap/react-bootstrap.js',
-    ],
-    "../libmproxy/web/static/js/app.js": [
-        'src/js/datastructures.compiled.js',
-        'src/js/footer.compiled.js',
-        'src/js/header.compiled.js',
-        'src/js/mitmproxy.compiled.js',
-    ],
-};
-
-module.exports = function (grunt) {
-    "use strict";
-    grunt.initConfig({
-        pkg: grunt.file.readJSON("package.json"),
-        copy: {
-            all: {
-                files: [
-                    {
-                        expand: true,
-                        flatten: true,
-                        src: ['src/vendor/fontawesome/fontawesome-webfont.*'],
-                        dest: '../libmproxy/web/static/fonts'
-                    }
-                ],
-            }
-        },
-        less: {
-            dev: {
-                options: {
-                    paths: ["src/css"],
-                    sourceMap: true
-                },
-                files: cssfiles
-            },
-            prod: {
-                options: {
-                    paths: ["src/css"],
-                    cleancss: true,
-                    report: "gzip"
-                },
-                files: cssfiles
-            }
-        },
-        react: {
-            all: {
-                files: [{
-                    expand: true,
-                    cwd: 'src/js',
-                    src: ['*.react.js','*.es6.js'],
-                    dest: 'src/js',
-                    ext: '.compiled.js'
-                }]
-            },
-            options: {
-                harmony: true
-            }
-        },
-        uglify: {
-            dev: {
-                options: {
-                    mangle: false,
-                    compress: false,
-                    beautify: true,
-                    sourceMap: true,
-                    sourceMapIncludeSources: true,
-                },
-                files: jsfiles
-            },
-            prod: {
-                options: {
-                    report: "gzip",
-                    compress: true,
-                },
-                files: jsfiles
-            },
-        },
-        jshint: {
-            options: {
-                jshintrc: ".jshintrc",
-            },
-            all: ['src/js/*.js','!src/js/*.react.js'],
-            gruntfile: ['Gruntfile.js']
-        },
-        qunit: {
-            all: ['src/test.html']
-        },
-        watch: {
-            less: {
-                files: ['src/css/**'],
-                tasks: ['less:dev'],
-                options: {
-                    livereload: true,
-                }
-            },
-            jsx: {
-                files: ['src/js/*.react.js','src/js/*.es6.js'],
-                tasks: ['react:all'],
-            },
-            js: {
-                files: ['src/js/*.js'],
-                tasks: ['jshint:all', 'uglify:dev'],
-                options: {
-                    livereload: true,
-                }
-            },
-            copy: {
-                files: ['src/*.html', 'src/examples/**'],
-                tasks: ['copy:all'],
-                options: {
-                    livereload: true,
-                }
-            },
-            gruntfile: {
-                files: './Gruntfile.js',
-                tasks: ['jshint:gruntfile'],
-            },
-        },
-        notify: {
-            done: {
-                options: {
-                    message: 'Done!'
-                }
-            }
-        }
-    });
-
-    grunt.loadNpmTasks('grunt-contrib-less');
-    grunt.loadNpmTasks('grunt-contrib-watch');
-    grunt.loadNpmTasks('grunt-contrib-jshint');
-    grunt.loadNpmTasks('grunt-contrib-uglify');
-    grunt.loadNpmTasks('grunt-contrib-copy');
-    grunt.loadNpmTasks('grunt-contrib-qunit');
-    grunt.loadNpmTasks('grunt-notify');
-    grunt.loadNpmTasks('grunt-shell');
-    grunt.loadNpmTasks('grunt-react');
-    grunt.registerTask(
-        'prod', ['react:all', 'jshint:all', 'copy:all', 'uglify:prod', 'less:prod']
-    );
-    grunt.registerTask(
-        'dev', ['react:all', 'jshint:all', 'copy:all', 'uglify:dev', 'less:dev']
-    );
-    grunt.registerTask('test', ['qunit:all']);
-
-};
\ No newline at end of file
diff --git a/web/package.json b/web/package.json
index 7bae0fa5..6adb6687 100644
--- a/web/package.json
+++ b/web/package.json
@@ -5,17 +5,6 @@
     "bower": "",
     "bower-installer": "^0.8.4",
     "clean-css": "",
-    "grunt": "",
-    "grunt-contrib-connect": "",
-    "grunt-contrib-copy": "",
-    "grunt-contrib-jshint": "",
-    "grunt-contrib-less": "",
-    "grunt-contrib-qunit": "",
-    "grunt-contrib-uglify": "",
-    "grunt-contrib-watch": "",
-    "grunt-notify": "",
-    "grunt-react": "",
-    "grunt-shell": "",
     "gulp": "^3.8.8",
     "gulp-concat": "^2.4.0",
     "gulp-jshint": "^1.8.4",
diff --git a/web/src/css/app.less b/web/src/css/app.less
index 4efb8ceb..ff3c614c 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/footer.less b/web/src/css/footer.less
index 4c0035c8..69ab62ce 100644
--- a/web/src/css/footer.less
+++ b/web/src/css/footer.less
@@ -1,4 +1,4 @@
 footer {
-  padding: 0 10px;
-  //text-align: center;
+	padding: 0 10px;
+	//text-align: center;
 }
\ No newline at end of file
diff --git a/web/src/css/header.less b/web/src/css/header.less
index 998c0612..4f4af121 100644
--- a/web/src/css/header.less
+++ b/web/src/css/header.less
@@ -1,62 +1,60 @@
 header {
+    background-color: white;
 
-  background-color: white;
-
-  .title-bar {
-    line-height: 25px;
-    text-align: center;
-  }
-
-  @separator-color: lighten(grey, 15%);
-
-  nav {
-
-    border-bottom: solid @separator-color 1px;
-
-    a {
-      display: inline-block;
-      padding: 3px 14px;
-      margin: 0 2px -1px;
-      border: solid transparent 1px;
-      //text-transform: uppercase;
-      //font-family: Lato;
-
-      &.active {
-        border-color: @separator-color;
-        border-bottom-color: white;
-      }
-      &:hover {
-        /*
-        @preview: lightgrey;
-        border-top-color: @preview;
-        border-left-color: @preview;
-        border-right-color: @preview;
-        */
-        text-decoration: none;
-      }
-      &.special {
-        @special-color: #396cad;
-        color: white;
-        background-color: @special-color;
-        border-bottom-color: @special-color;
-        &:hover {
-          background-color: lighten(@special-color, 10%);
-        }
-      }
+    .title-bar {
+        line-height: 25px;
+        text-align: center;
     }
 
-    &:before {
-      content: " ";
-    }
+    @separator-color: lighten(grey, 15%);
+
+    nav {
+        border-bottom: solid @separator-color 1px;
+
+        a {
+            display: inline-block;
+            padding: 3px 14px;
+            margin: 0 2px -1px;
+            border: solid transparent 1px;
+            //text-transform: uppercase;
+            //font-family: Lato;
+
+            &.active {
+            border-color: @separator-color;
+            border-bottom-color: white;
+            }
+            &:hover {
+                /*
+                @preview: lightgrey;
+                border-top-color: @preview;
+                border-left-color: @preview;
+                border-right-color: @preview;
+                */
+                text-decoration: none;
+            }
+            &.special {
+                @special-color: #396cad;
+                color: white;
+                background-color: @special-color;
+                border-bottom-color: @special-color;
+                &:hover {
+                    background-color: lighten(@special-color, 10%);
+                }
+            }
+        }
 
-    &:after {
-      clear: both;
-    }
+        &:before {
+            content: " ";
+        }
 
-  }
+        &:after {
+            clear: both;
+        }
+
+    }
 
-  .menu {
-    height: 100px;
-    border-bottom: solid @separator-color 1px;
-  }
+    .menu {
+        height: 100px;
+        border-bottom: solid @separator-color 1px;
+    }
 }
\ No newline at end of file
diff --git a/web/src/css/layout.less b/web/src/css/layout.less
index e1f22249..7c5f79b9 100644
--- a/web/src/css/layout.less
+++ b/web/src/css/layout.less
@@ -1,36 +1,36 @@
 html, body, #container {
-  height: 100%;
-  margin: 0;
-  overflow: hidden;
+    height: 100%;
+    margin: 0;
+    overflow: hidden;
 }
 
 header, footer {
-  display: block;
+    display: block;
 }
 
 @headerheight: 153px;
 @footerheight: 25px;
 
 #container {
-  //Set padding on container so that #main can take 100% height
-  //If we don't do it, the scrollbars will be too large.
-  padding: @headerheight 0 @footerheight;
+    //Set padding on container so that #main can take 100% height
+    //If we don't do it, the scrollbars will be too large.
+    padding: @headerheight 0 @footerheight;
 }
 
 header {
-  height: @headerheight;
-  //Substract #container padding
-  margin-top: -@headerheight;
+    height: @headerheight;
+    //Substract #container padding
+    margin-top: -@headerheight;
 }
 
 #main {
-  height: 100%;
-  display: block;
-  overflow-y: auto;
+    height: 100%;
+    display: block;
+    overflow-y: auto;
 }
 
 footer {
-  //This starts at the beginning of the #container padding, all fine.
-  height: @footerheight;
-  line-height: @footerheight;
+    //This starts at the beginning of the #container padding, all fine.
+    height: @footerheight;
+    line-height: @footerheight;
 }
diff --git a/web/src/js/footer.react.js b/web/src/js/footer.react.js
index 9b36d841..1b65e19d 100644
--- a/web/src/js/footer.react.js
+++ b/web/src/js/footer.react.js
@@ -2,8 +2,10 @@
 
 var Footer = React.createClass({
     render : function(){
-        return (<footer>
-            <span className="label label-success">transparent mode</span>
-            </footer>);
+        return (
+            <footer>
+                <span className="label label-success">transparent mode</span>
+            </footer>
+        );
     }
 });
\ No newline at end of file
diff --git a/web/src/js/header.react.js b/web/src/js/header.react.js
index b204eeb8..85dc3106 100644
--- a/web/src/js/header.react.js
+++ b/web/src/js/header.react.js
@@ -1,17 +1,17 @@
 /** @jsx React.DOM */
 
 var MainMenu = React.createClass({
-    render : function(){
+    render: function(){
         return (<div>Main Menu</div>);
     }
 });
 var ToolsMenu = React.createClass({
-    render : function(){
+    render: function(){
         return (<div>Tools Menu</div>);
     }
 });
 var ReportsMenu = React.createClass({
-    render : function(){
+    render: function(){
         return (<div>Reports Menu</div>);
     }
 });
@@ -36,7 +36,7 @@ var _Header_Entries = {
 
 var Header = React.createClass({
     getInitialState: function(){
-      return {active: "main"};
+        return {active: "main"};
     },
     handleClick: function(active){
         this.setState({active: active});
@@ -47,7 +47,6 @@ var Header = React.createClass({
         console.log("File click");
     },
     render: function(){
-
         var header = [];
         for(var item in _Header_Entries){
             var classes = this.state.active == item ? "active" : "";
@@ -58,16 +57,16 @@ var Header = React.createClass({
         var menu = _Header_Entries[this.state.active].menu();
         return (
         <header>
-          <div className="title-bar">
-              mitmproxy { this.props.settings.version }
-          </div>
-          <nav>
-              <a href="#" className="special" onClick={this.handleFileClick}> File </a>
-            {header}
-          </nav>
-          <div className="menu">
-              { menu }
-          </div>
+            <div className="title-bar">
+                mitmproxy { this.props.settings.version }
+            </div>
+            <nav>
+            <a href="#" className="special" onClick={this.handleFileClick}> File </a>
+                {header}
+            </nav>
+            <div className="menu">
+                { menu }
+            </div>
         </header>);
     }
 });
\ No newline at end of file
diff --git a/web/src/js/mitmproxy.react.js b/web/src/js/mitmproxy.react.js
index cdb6221d..609d2014 100644
--- a/web/src/js/mitmproxy.react.js
+++ b/web/src/js/mitmproxy.react.js
@@ -19,15 +19,15 @@ var App = React.createClass({
         this.setState({settings: settings.getAll()});
     },
     render: function () {
-    return (
-      <div id="container">
-        <Header settings={this.state.settings}/>
-        <div id="main">
-            <this.props.activeRouteHandler settings={this.state.settings}/>
+      return (
+        <div id="container">
+          <Header settings={this.state.settings}/>
+          <div id="main">
+              <this.props.activeRouteHandler settings={this.state.settings}/>
+          </div>
+          <Footer/>
         </div>
-        <Footer/>
-      </div>
-    );
+      );
     }
 });
 
@@ -44,20 +44,18 @@ var TrafficTable = React.createClass({
         flowStore.addChangeListener(this.onFlowsChange);
 
         $.getJSON("/flows.json").success(function (flows) {
-
             flows.forEach(function (flow, i) {
                 window.setTimeout(function () {
                     flowStore.addFlow(flow);
                 }, _.random(i*400,i*400+1000));
             });
-
         }.bind(this));
     },
     componentWillUnmount: function(){
         this.state.flowStore.close();
     },
     onFlowsChange: function(event, flows){
-       this.setState({flows: flows.getAll()});
+        this.setState({flows: flows.getAll()});
     },
     render: function () {
        var flows = this.state.flows.map(function(flow){