aboutsummaryrefslogtreecommitdiffstats
path: root/web/src/js/components
diff options
context:
space:
mode:
Diffstat (limited to 'web/src/js/components')
-rw-r--r--web/src/js/components/eventlog.jsx.js24
-rw-r--r--web/src/js/components/flowtable-columns.jsx.js50
-rw-r--r--web/src/js/components/flowtable.jsx.js56
-rw-r--r--web/src/js/components/footer.jsx.js2
-rw-r--r--web/src/js/components/header.jsx.js23
-rw-r--r--web/src/js/components/utils.jsx.js52
6 files changed, 106 insertions, 101 deletions
diff --git a/web/src/js/components/eventlog.jsx.js b/web/src/js/components/eventlog.jsx.js
index 34d84cdf..4d61a39c 100644
--- a/web/src/js/components/eventlog.jsx.js
+++ b/web/src/js/components/eventlog.jsx.js
@@ -1,8 +1,8 @@
var LogMessage = React.createClass({
- render: function(){
+ render: function () {
var entry = this.props.entry;
var indicator;
- switch(entry.level){
+ switch (entry.level) {
case "web":
indicator = <i className="fa fa-fw fa-html5"></i>;
break;
@@ -18,13 +18,13 @@ var LogMessage = React.createClass({
</div>
);
},
- shouldComponentUpdate: function(){
+ shouldComponentUpdate: function () {
return false; // log entries are immutable.
}
});
var EventLogContents = React.createClass({
- mixins:[AutoScrollMixin],
+ mixins: [AutoScrollMixin],
getInitialState: function () {
return {
log: []
@@ -44,8 +44,8 @@ var EventLogContents = React.createClass({
});
},
render: function () {
- var messages = this.state.log.map(function(row) {
- if(!this.props.filter[row.level]){
+ var messages = this.state.log.map(function (row) {
+ if (!this.props.filter[row.level]) {
return null;
}
return <LogMessage key={row.id} entry={row}/>;
@@ -55,11 +55,11 @@ var EventLogContents = React.createClass({
});
var ToggleFilter = React.createClass({
- toggle: function(e){
+ toggle: function (e) {
e.preventDefault();
return this.props.toggleLevel(this.props.name);
},
- render: function(){
+ render: function () {
var className = "label ";
if (this.props.active) {
className += "label-primary";
@@ -74,11 +74,11 @@ var ToggleFilter = React.createClass({
{this.props.name}
</a>
);
- }
+ }
});
var EventLog = React.createClass({
- getInitialState: function(){
+ getInitialState: function () {
return {
filter: {
"debug": false,
@@ -92,7 +92,7 @@ var EventLog = React.createClass({
showEventLog: false
});
},
- toggleLevel: function(level){
+ toggleLevel: function (level) {
var filter = this.state.filter;
filter[level] = !filter[level];
this.setState({filter: filter});
@@ -101,7 +101,7 @@ var EventLog = React.createClass({
return (
<div className="eventlog">
<div>
- Eventlog
+ Eventlog
<div className="pull-right">
<ToggleFilter name="debug" active={this.state.filter.debug} toggleLevel={this.toggleLevel}/>
<ToggleFilter name="info" active={this.state.filter.info} toggleLevel={this.toggleLevel}/>
diff --git a/web/src/js/components/flowtable-columns.jsx.js b/web/src/js/components/flowtable-columns.jsx.js
index 8a44c072..1aa256c4 100644
--- a/web/src/js/components/flowtable-columns.jsx.js
+++ b/web/src/js/components/flowtable-columns.jsx.js
@@ -1,14 +1,14 @@
var TLSColumn = React.createClass({
statics: {
- renderTitle: function(){
+ renderTitle: function () {
return <th key="tls" className="col-tls"></th>;
}
},
- render: function(){
+ render: function () {
var flow = this.props.flow;
var ssl = (flow.request.scheme == "https");
var classes;
- if(ssl){
+ if (ssl) {
classes = "col-tls col-tls-https";
} else {
classes = "col-tls col-tls-http";
@@ -20,23 +20,23 @@ var TLSColumn = React.createClass({
var IconColumn = React.createClass({
statics: {
- renderTitle: function(){
+ renderTitle: function () {
return <th key="icon" className="col-icon"></th>;
}
},
- render: function(){
+ render: function () {
var flow = this.props.flow;
var icon;
- if(flow.response){
+ 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) {
+ if (flow.response.code == 304) {
icon = "resource-icon-not-modified";
- } else if(300 <= flow.response.code && flow.response.code < 400) {
+ } else if (300 <= flow.response.code && flow.response.code < 400) {
icon = "resource-icon-redirect";
- } else if(contentType && contentType.indexOf("image") >= 0) {
+ } else if (contentType && contentType.indexOf("image") >= 0) {
icon = "resource-icon-image";
} else if (contentType && contentType.indexOf("javascript") >= 0) {
icon = "resource-icon-js";
@@ -46,23 +46,25 @@ var IconColumn = React.createClass({
icon = "resource-icon-document";
}
}
- if(!icon){
+ if (!icon) {
icon = "resource-icon-plain";
}
icon += " resource-icon";
- return <td className="col-icon"><div className={icon}></div></td>;
+ return <td className="col-icon">
+ <div className={icon}></div>
+ </td>;
}
});
var PathColumn = React.createClass({
statics: {
- renderTitle: function(){
+ renderTitle: function () {
return <th key="path" className="col-path">Path</th>;
}
},
- render: function(){
+ render: function () {
var flow = this.props.flow;
return <td className="col-path">{flow.request.scheme + "://" + flow.request.host + flow.request.path}</td>;
}
@@ -71,11 +73,11 @@ var PathColumn = React.createClass({
var MethodColumn = React.createClass({
statics: {
- renderTitle: function(){
+ renderTitle: function () {
return <th key="method" className="col-method">Method</th>;
}
},
- render: function(){
+ render: function () {
var flow = this.props.flow;
return <td className="col-method">{flow.request.method}</td>;
}
@@ -84,14 +86,14 @@ var MethodColumn = React.createClass({
var StatusColumn = React.createClass({
statics: {
- renderTitle: function(){
+ renderTitle: function () {
return <th key="status" className="col-status">Status</th>;
}
},
- render: function(){
+ render: function () {
var flow = this.props.flow;
var status;
- if(flow.response){
+ if (flow.response) {
status = flow.response.code;
} else {
status = null;
@@ -103,15 +105,15 @@ var StatusColumn = React.createClass({
var SizeColumn = React.createClass({
statics: {
- renderTitle: function(){
+ renderTitle: function () {
return <th key="size" className="col-size">Size</th>;
}
},
- render: function(){
+ render: function () {
var flow = this.props.flow;
var total = flow.request.contentLength;
- if(flow.response){
+ if (flow.response) {
total += flow.response.contentLength || 0;
}
var size = formatSize(total);
@@ -122,14 +124,14 @@ var SizeColumn = React.createClass({
var TimeColumn = React.createClass({
statics: {
- renderTitle: function(){
+ renderTitle: function () {
return <th key="time" className="col-time">Time</th>;
}
},
- render: function(){
+ render: function () {
var flow = this.props.flow;
var time;
- if(flow.response){
+ if (flow.response) {
time = formatTimeDelta(1000 * (flow.response.timestamp_end - flow.request.timestamp_start));
} else {
time = "...";
diff --git a/web/src/js/components/flowtable.jsx.js b/web/src/js/components/flowtable.jsx.js
index 2baf728f..6b56e512 100644
--- a/web/src/js/components/flowtable.jsx.js
+++ b/web/src/js/components/flowtable.jsx.js
@@ -1,11 +1,11 @@
var FlowRow = React.createClass({
- render: function(){
+ render: function () {
var flow = this.props.flow;
- var columns = this.props.columns.map(function(Column){
+ var columns = this.props.columns.map(function (Column) {
return <Column key={Column.displayName} flow={flow}/>;
}.bind(this));
var className = "";
- if(this.props.selected){
+ if (this.props.selected) {
className += "selected";
}
return (
@@ -13,35 +13,37 @@ var FlowRow = React.createClass({
{columns}
</tr>);
},
- shouldComponentUpdate: function(nextProps){
+ shouldComponentUpdate: function (nextProps) {
var isEqual = (
- this.props.columns.length === nextProps.columns.length &&
- this.props.selected === nextProps.selected &&
- this.props.flow.response === nextProps.flow.response);
+ this.props.columns.length === nextProps.columns.length &&
+ this.props.selected === nextProps.selected &&
+ this.props.flow.response === nextProps.flow.response);
return !isEqual;
}
});
var FlowTableHead = React.createClass({
- render: function(){
- var columns = this.props.columns.map(function(column){
+ render: function () {
+ var columns = this.props.columns.map(function (column) {
return column.renderTitle();
}.bind(this));
- return <thead><tr>{columns}</tr></thead>;
+ return <thead>
+ <tr>{columns}</tr>
+ </thead>;
}
});
var FlowTableBody = React.createClass({
- render: function(){
- var rows = this.props.flows.map(function(flow){
+ render: function () {
+ var rows = this.props.flows.map(function (flow) {
var selected = (flow == this.props.selected);
return <FlowRow key={flow.id}
- ref={flow.id}
- flow={flow}
- columns={this.props.columns}
- selected={selected}
- selectFlow={this.props.selectFlow}
- />;
+ ref={flow.id}
+ flow={flow}
+ columns={this.props.columns}
+ selected={selected}
+ selectFlow={this.props.selectFlow}
+ />;
}.bind(this));
return <tbody>{rows}</tbody>;
}
@@ -55,7 +57,7 @@ var FlowTable = React.createClass({
columns: all_columns
};
},
- scrollIntoView: function(flow){
+ scrollIntoView: function (flow) {
// Now comes the fun part: Scroll the flow into the view.
var viewport = this.getDOMNode();
var flowNode = this.refs.body.refs[flow.id].getDOMNode();
@@ -68,9 +70,9 @@ var FlowTable = React.createClass({
// -thead_height pixel earlier.
flowNode_top -= this.refs.body.getDOMNode().offsetTop;
- if(flowNode_top < viewport_top){
+ if (flowNode_top < viewport_top) {
viewport.scrollTop = flowNode_top;
- } else if(flowNode_bottom > viewport_bottom) {
+ } else if (flowNode_bottom > viewport_bottom) {
viewport.scrollTop = flowNode_bottom - viewport.offsetHeight;
}
},
@@ -79,14 +81,14 @@ var FlowTable = React.createClass({
<div className="flow-table" onScroll={this.adjustHead}>
<table>
<FlowTableHead ref="head"
- columns={this.state.columns}/>
+ columns={this.state.columns}/>
<FlowTableBody ref="body"
- flows={this.props.flows}
- selected={this.props.selected}
- selectFlow={this.props.selectFlow}
- columns={this.state.columns}/>
+ flows={this.props.flows}
+ selected={this.props.selected}
+ selectFlow={this.props.selectFlow}
+ columns={this.state.columns}/>
</table>
</div>
- );
+ );
}
});
diff --git a/web/src/js/components/footer.jsx.js b/web/src/js/components/footer.jsx.js
index 6ba253bf..73fadef2 100644
--- a/web/src/js/components/footer.jsx.js
+++ b/web/src/js/components/footer.jsx.js
@@ -5,6 +5,6 @@ var Footer = React.createClass({
<footer>
{mode != "regular" ? <span className="label label-success">{mode} mode</span> : null}
</footer>
- );
+ );
}
});
diff --git a/web/src/js/components/header.jsx.js b/web/src/js/components/header.jsx.js
index 5c905889..e50c4274 100644
--- a/web/src/js/components/header.jsx.js
+++ b/web/src/js/components/header.jsx.js
@@ -12,10 +12,11 @@ var MainMenu = React.createClass({
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
+ <i className="fa fa-database"></i>
+ Display Event Log
</button>
</div>
- );
+ );
}
});
@@ -61,25 +62,25 @@ var Header = React.createClass({
console.log("File click");
},
render: function () {
- var header = header_entries.map(function(entry, i){
+ var header = header_entries.map(function (entry, i) {
var classes = React.addons.classSet({
active: entry == this.state.active
});
return (
- <a key={i}
- href="#"
- className={classes}
- onClick={this.handleClick.bind(this, entry)}
+ <a key={i}
+ href="#"
+ className={classes}
+ onClick={this.handleClick.bind(this, entry)}
>
{ entry.title}
</a>
- );
+ );
}.bind(this));
-
+
return (
<header>
<div className="title-bar">
- mitmproxy { this.props.settings.version }
+ mitmproxy { this.props.settings.version }
</div>
<nav className="nav-tabs nav-tabs-lg">
<a href="#" className="special" onClick={this.handleFileClick}> File </a>
@@ -89,6 +90,6 @@ var Header = React.createClass({
<this.state.active settings={this.props.settings}/>
</div>
</header>
- );
+ );
}
});
diff --git a/web/src/js/components/utils.jsx.js b/web/src/js/components/utils.jsx.js
index 22aca577..b1d9a006 100644
--- a/web/src/js/components/utils.jsx.js
+++ b/web/src/js/components/utils.jsx.js
@@ -6,85 +6,85 @@ var Splitter = React.createClass({
axis: "x"
};
},
- getInitialState: function(){
+ getInitialState: function () {
return {
applied: false,
startX: false,
startY: false
};
},
- onMouseDown: function(e){
+ onMouseDown: function (e) {
this.setState({
startX: e.pageX,
startY: e.pageY
});
- window.addEventListener("mousemove",this.onMouseMove);
- window.addEventListener("mouseup",this.onMouseUp);
+ window.addEventListener("mousemove", this.onMouseMove);
+ window.addEventListener("mouseup", this.onMouseUp);
// Occasionally, only a dragEnd event is triggered, but no mouseUp.
- window.addEventListener("dragend",this.onDragEnd);
+ window.addEventListener("dragend", this.onDragEnd);
},
- onDragEnd: function(){
- this.getDOMNode().style.transform="";
- window.removeEventListener("dragend",this.onDragEnd);
- window.removeEventListener("mouseup",this.onMouseUp);
- window.removeEventListener("mousemove",this.onMouseMove);
+ onDragEnd: function () {
+ this.getDOMNode().style.transform = "";
+ window.removeEventListener("dragend", this.onDragEnd);
+ window.removeEventListener("mouseup", this.onMouseUp);
+ window.removeEventListener("mousemove", this.onMouseMove);
},
- onMouseUp: function(e){
+ onMouseUp: function (e) {
this.onDragEnd();
var node = this.getDOMNode();
var prev = node.previousElementSibling;
var next = node.nextElementSibling;
- var dX = e.pageX-this.state.startX;
- var dY = e.pageY-this.state.startY;
+ var dX = e.pageX - this.state.startX;
+ var dY = e.pageY - this.state.startY;
var flexBasis;
- if(this.props.axis === "x"){
+ if (this.props.axis === "x") {
flexBasis = prev.offsetWidth + dX;
} else {
flexBasis = prev.offsetHeight + dY;
}
- prev.style.flex = "0 0 "+Math.max(0, flexBasis)+"px";
+ prev.style.flex = "0 0 " + Math.max(0, flexBasis) + "px";
next.style.flex = "1 1 auto";
this.setState({
applied: true
});
},
- onMouseMove: function(e){
+ onMouseMove: function (e) {
var dX = 0, dY = 0;
- if(this.props.axis === "x"){
- dX = e.pageX-this.state.startX;
+ if (this.props.axis === "x") {
+ dX = e.pageX - this.state.startX;
} else {
- dY = e.pageY-this.state.startY;
+ dY = e.pageY - this.state.startY;
}
- this.getDOMNode().style.transform = "translate("+dX+"px,"+dY+"px)";
+ this.getDOMNode().style.transform = "translate(" + dX + "px," + dY + "px)";
},
- reset: function(willUnmount) {
+ reset: function (willUnmount) {
if (!this.state.applied) {
return;
}
var node = this.getDOMNode();
var prev = node.previousElementSibling;
var next = node.nextElementSibling;
-
+
prev.style.flex = "";
next.style.flex = "";
- if(!willUnmount){
+ if (!willUnmount) {
this.setState({
applied: false
});
}
},
- componentWillUnmount: function(){
+ componentWillUnmount: function () {
this.reset(true);
},
- render: function(){
+ render: function () {
var className = "splitter";
- if(this.props.axis === "x"){
+ if (this.props.axis === "x") {
className += " splitter-x";
} else {
className += " splitter-y";
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-06 02:05:59 +0000