mirror of
https://github.com/Grasscutters/mitmproxy.git
synced 2025-01-30 23:09:44 +00:00
checkin assets
This commit is contained in:
Maximilian Hils
parent
e9966428bd
commit
89b8e1ce8c
2012
libmproxy/web/flows.json
Normal file
2012
libmproxy/web/flows.json
Normal file
File diff suppressed because it is too large
Load Diff
87
libmproxy/web/static/css/app.css
Normal file
87
libmproxy/web/static/css/app.css
Normal file
@ -0,0 +1,87 @@
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
html,
|
||||
body,
|
||||
#container {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
header,
|
||||
footer {
|
||||
display: block;
|
||||
}
|
||||
#container {
|
||||
padding: 153px 0 25px;
|
||||
}
|
||||
header {
|
||||
height: 153px;
|
||||
margin-top: -153px;
|
||||
}
|
||||
#main {
|
||||
height: 100%;
|
||||
display: block;
|
||||
overflow-y: auto;
|
||||
}
|
||||
footer {
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
header {
|
||||
background-color: white;
|
||||
}
|
||||
header .title-bar {
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
header nav {
|
||||
border-bottom: solid #a6a6a6 1px;
|
||||
}
|
||||
header nav a {
|
||||
display: inline-block;
|
||||
padding: 3px 14px;
|
||||
margin: 0 2px -1px;
|
||||
border: solid transparent 1px;
|
||||
}
|
||||
header nav a.active {
|
||||
border-color: #a6a6a6;
|
||||
border-bottom-color: white;
|
||||
}
|
||||
header nav a:hover {
|
||||
/*
|
||||
@preview: lightgrey;
|
||||
border-top-color: @preview;
|
||||
border-left-color: @preview;
|
||||
border-right-color: @preview;
|
||||
*/
|
||||
text-decoration: none;
|
||||
}
|
||||
header nav a.special {
|
||||
color: white;
|
||||
background-color: #396cad;
|
||||
border-bottom-color: #396cad;
|
||||
}
|
||||
header nav a.special:hover {
|
||||
background-color: #5386c6;
|
||||
}
|
||||
header nav:before {
|
||||
content: " ";
|
||||
}
|
||||
header nav:after {
|
||||
clear: both;
|
||||
}
|
||||
header .menu {
|
||||
height: 100px;
|
||||
border-bottom: solid #a6a6a6 1px;
|
||||
}
|
||||
footer {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=../css/app.css.map */
|
||||
7963
libmproxy/web/static/css/vendor.css
Normal file
7963
libmproxy/web/static/css/vendor.css
Normal file
File diff suppressed because it is too large
Load Diff
18
libmproxy/web/static/index.html
Normal file
18
libmproxy/web/static/index.html
Normal file
@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>mitmproxy</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="css/vendor.css"/>
|
||||
<link rel="stylesheet" href="css/app.css"/>
|
||||
<script src="js/vendor.js"></script>
|
||||
<script src="js/app.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="mitmproxy"></div>
|
||||
</body>
|
||||
<script>
|
||||
app = React.renderComponent(routes, document.body);
|
||||
</script>
|
||||
</html>
|
||||
272
libmproxy/web/static/js/app.js
Normal file
272
libmproxy/web/static/js/app.js
Normal file
@ -0,0 +1,272 @@
|
||||
|
||||
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(event, this);
|
||||
}.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.indexOf(f);
|
||||
if (index >= 0) {
|
||||
this.listeners.splice(this.listeners.indexOf(f), 1);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var FLOW_CHANGED = "flow.changed";
|
||||
|
||||
for(var EventEmitter____Key in EventEmitter){if(EventEmitter.hasOwnProperty(EventEmitter____Key)){FlowStore[EventEmitter____Key]=EventEmitter[EventEmitter____Key];}}var ____SuperProtoOfEventEmitter=EventEmitter===null?null:EventEmitter.prototype;FlowStore.prototype=Object.create(____SuperProtoOfEventEmitter);FlowStore.prototype.constructor=FlowStore;FlowStore.__superConstructor__=EventEmitter;
|
||||
function FlowStore() {"use strict";
|
||||
EventEmitter.call(this);
|
||||
this.flows = [];
|
||||
}
|
||||
|
||||
FlowStore.prototype.getAll=function() {"use strict";
|
||||
return this.flows;
|
||||
};
|
||||
|
||||
FlowStore.prototype.close=function(){"use strict";
|
||||
console.log("FlowStore.close()");
|
||||
this.listeners = [];
|
||||
};
|
||||
|
||||
FlowStore.prototype.emitChange=function() {"use strict";
|
||||
return this.emit(FLOW_CHANGED);
|
||||
};
|
||||
|
||||
FlowStore.prototype.addChangeListener=function(f) {"use strict";
|
||||
this.addListener(FLOW_CHANGED, f);
|
||||
};
|
||||
|
||||
FlowStore.prototype.removeChangeListener=function(f) {"use strict";
|
||||
this.removeListener(FLOW_CHANGED, f);
|
||||
};
|
||||
|
||||
|
||||
for(var FlowStore____Key in FlowStore){if(FlowStore.hasOwnProperty(FlowStore____Key)){DummyFlowStore[FlowStore____Key]=FlowStore[FlowStore____Key];}}var ____SuperProtoOfFlowStore=FlowStore===null?null:FlowStore.prototype;DummyFlowStore.prototype=Object.create(____SuperProtoOfFlowStore);DummyFlowStore.prototype.constructor=DummyFlowStore;DummyFlowStore.__superConstructor__=FlowStore;
|
||||
function DummyFlowStore(flows) {"use strict";
|
||||
FlowStore.call(this);
|
||||
this.flows = flows;
|
||||
}
|
||||
|
||||
DummyFlowStore.prototype.addFlow=function(flow) {"use strict";
|
||||
this.flows.push(flow);
|
||||
this.emitChange();
|
||||
};
|
||||
|
||||
|
||||
|
||||
var SETTINGS_CHANGED = "settings.changed";
|
||||
|
||||
for(EventEmitter____Key in EventEmitter){if(EventEmitter.hasOwnProperty(EventEmitter____Key)){Settings[EventEmitter____Key]=EventEmitter[EventEmitter____Key];}}Settings.prototype=Object.create(____SuperProtoOfEventEmitter);Settings.prototype.constructor=Settings;Settings.__superConstructor__=EventEmitter;
|
||||
function Settings(){"use strict";
|
||||
EventEmitter.call(this);
|
||||
this.settings = false;
|
||||
}
|
||||
|
||||
Settings.prototype.getAll=function(){"use strict";
|
||||
return this.settings;
|
||||
};
|
||||
|
||||
Settings.prototype.emitChange=function() {"use strict";
|
||||
return this.emit(SETTINGS_CHANGED);
|
||||
};
|
||||
|
||||
Settings.prototype.addChangeListener=function(f) {"use strict";
|
||||
this.addListener(SETTINGS_CHANGED, f);
|
||||
};
|
||||
|
||||
Settings.prototype.removeChangeListener=function(f) {"use strict";
|
||||
this.removeListener(SETTINGS_CHANGED, f);
|
||||
};
|
||||
|
||||
|
||||
for(var Settings____Key in Settings){if(Settings.hasOwnProperty(Settings____Key)){DummySettings[Settings____Key]=Settings[Settings____Key];}}var ____SuperProtoOfSettings=Settings===null?null:Settings.prototype;DummySettings.prototype=Object.create(____SuperProtoOfSettings);DummySettings.prototype.constructor=DummySettings;DummySettings.__superConstructor__=Settings;
|
||||
function DummySettings(settings){"use strict";
|
||||
Settings.call(this);
|
||||
this.settings = settings;
|
||||
}
|
||||
DummySettings.prototype.update=function(obj){"use strict";
|
||||
_.merge(this.settings, obj);
|
||||
this.emitChange();
|
||||
};
|
||||
|
||||
/** @jsx React.DOM */
|
||||
|
||||
var Footer = React.createClass({displayName: 'Footer',
|
||||
render : function(){
|
||||
return (React.DOM.footer(null,
|
||||
React.DOM.span({className: "label label-success"}, "transparent mode")
|
||||
));
|
||||
}
|
||||
});
|
||||
/** @jsx React.DOM */
|
||||
|
||||
var MainMenu = React.createClass({displayName: 'MainMenu',
|
||||
render : function(){
|
||||
return (React.DOM.div(null, "Main Menu"));
|
||||
}
|
||||
});
|
||||
var ToolsMenu = React.createClass({displayName: 'ToolsMenu',
|
||||
render : function(){
|
||||
return (React.DOM.div(null, "Tools Menu"));
|
||||
}
|
||||
});
|
||||
var ReportsMenu = React.createClass({displayName: 'ReportsMenu',
|
||||
render : function(){
|
||||
return (React.DOM.div(null, "Reports Menu"));
|
||||
}
|
||||
});
|
||||
|
||||
var _Header_Entries = {
|
||||
main: {
|
||||
title: "Traffic",
|
||||
route: "main",
|
||||
menu: MainMenu
|
||||
},
|
||||
tools: {
|
||||
title: "Tools",
|
||||
route: "main",
|
||||
menu: ToolsMenu
|
||||
},
|
||||
reports: {
|
||||
title: "Visualization",
|
||||
route: "reports",
|
||||
menu: ReportsMenu
|
||||
}
|
||||
};
|
||||
|
||||
var Header = React.createClass({displayName: 'Header',
|
||||
getInitialState: function(){
|
||||
return {active: "main"};
|
||||
},
|
||||
handleClick: function(active){
|
||||
this.setState({active: active});
|
||||
ReactRouter.transitionTo(_Header_Entries[active].route);
|
||||
return false;
|
||||
},
|
||||
handleFileClick: function(){
|
||||
console.log("File click");
|
||||
},
|
||||
render: function(){
|
||||
|
||||
var header = [];
|
||||
for(var item in _Header_Entries){
|
||||
var classes = this.state.active == item ? "active" : "";
|
||||
header.push(React.DOM.a({key: item, href: "#", className: classes,
|
||||
onClick: this.handleClick.bind(this, item)}, _Header_Entries[item].title));
|
||||
}
|
||||
|
||||
var menu = _Header_Entries[this.state.active].menu();
|
||||
return (
|
||||
React.DOM.header(null,
|
||||
React.DOM.div({className: "title-bar"},
|
||||
"mitmproxy ", this.props.settings.version
|
||||
),
|
||||
React.DOM.nav(null,
|
||||
React.DOM.a({href: "#", className: "special", onClick: this.handleFileClick}, " File "),
|
||||
header
|
||||
),
|
||||
React.DOM.div({className: "menu"},
|
||||
menu
|
||||
)
|
||||
));
|
||||
}
|
||||
});
|
||||
/** @jsx React.DOM */
|
||||
|
||||
var App = React.createClass({displayName: 'App',
|
||||
getInitialState: function () {
|
||||
return {
|
||||
settings: {} //TODO: How explicit should we get here?
|
||||
//List all subattributes?
|
||||
};
|
||||
},
|
||||
componentDidMount: function () {
|
||||
//TODO: Replace DummyStore with real settings over WS (https://facebook.github.io/react/tips/initial-ajax.html)
|
||||
var settingsStore = new DummySettings({
|
||||
version: "0.12"
|
||||
});
|
||||
this.setState({settingsStore: settingsStore});
|
||||
settingsStore.addChangeListener(this.onSettingsChange);
|
||||
},
|
||||
onSettingsChange: function(event, settings){
|
||||
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)
|
||||
)
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var TrafficTable = React.createClass({displayName: 'TrafficTable',
|
||||
getInitialState: function(){
|
||||
return {
|
||||
flows: []
|
||||
};
|
||||
},
|
||||
componentDidMount: function () {
|
||||
var flowStore = new DummyFlowStore([]);
|
||||
this.setState({flowStore: flowStore});
|
||||
|
||||
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()});
|
||||
},
|
||||
render: function () {
|
||||
var flows = this.state.flows.map(function(flow){
|
||||
return React.DOM.div(null, flow.request.method, " ", flow.request.scheme, "://", flow.request.host, flow.request.path);
|
||||
});
|
||||
return React.DOM.pre(null, flows);
|
||||
}
|
||||
});
|
||||
|
||||
var Reports = React.createClass({displayName: 'Reports',
|
||||
render: function(){
|
||||
return (React.DOM.div(null, "Report Editor"));
|
||||
}
|
||||
});
|
||||
|
||||
var routes = (
|
||||
ReactRouter.Routes({location: "hash"},
|
||||
ReactRouter.Route({name: "app", path: "/", handler: App},
|
||||
ReactRouter.Route({name: "main", handler: TrafficTable}),
|
||||
ReactRouter.Route({name: "reports", handler: Reports}),
|
||||
ReactRouter.Redirect({to: "main"})
|
||||
)
|
||||
)
|
||||
);
|
||||
//# sourceMappingURL=app.js.map
|
||||
46211
libmproxy/web/static/js/vendor.js
Normal file
46211
libmproxy/web/static/js/vendor.js
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user