mirror of
https://github.com/Grasscutters/mitmproxy.git
synced 2024-11-22 07:08:10 +00:00
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.
This commit is contained in:
Aldo Cortesi
parent
2cefd05be9
commit
563078df24
@ -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){
|
||||
|
||||
154
web/Gruntfile.js
154
web/Gruntfile.js
@ -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']);
|
||||
|
||||
};
|
||||
@ -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",
|
||||
|
||||
@ -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";
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
footer {
|
||||
padding: 0 10px;
|
||||
//text-align: center;
|
||||
padding: 0 10px;
|
||||
//text-align: center;
|
||||
}
|
||||
@ -1,62 +1,60 @@
|
||||
header {
|
||||
background-color: white;
|
||||
|
||||
background-color: white;
|
||||
.title-bar {
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
@separator-color: lighten(grey, 15%);
|
||||
|
||||
@separator-color: lighten(grey, 15%);
|
||||
nav {
|
||||
border-bottom: solid @separator-color 1px;
|
||||
|
||||
nav {
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: 3px 14px;
|
||||
margin: 0 2px -1px;
|
||||
border: solid transparent 1px;
|
||||
//text-transform: uppercase;
|
||||
//font-family: Lato;
|
||||
|
||||
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%);
|
||||
&.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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: " ";
|
||||
}
|
||||
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: " ";
|
||||
.menu {
|
||||
height: 100px;
|
||||
border-bottom: solid @separator-color 1px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.menu {
|
||||
height: 100px;
|
||||
border-bottom: solid @separator-color 1px;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -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>);
|
||||
}
|
||||
});
|
||||
@ -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){
|
||||
|
||||
Loading…
Reference in New Issue
Block a user