aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--libmproxy/web/static/css/app.css14
-rw-r--r--libmproxy/web/static/js/app.js116
-rw-r--r--web/src/css/flowtable.less12
-rw-r--r--web/src/js/components/flowtable.jsx.js23
-rw-r--r--web/src/js/components/header.jsx.js55
-rw-r--r--web/src/js/components/mainview.jsx.js27
-rw-r--r--web/src/js/flow/utils.js13
7 files changed, 88 insertions, 172 deletions
diff --git a/libmproxy/web/static/css/app.css b/libmproxy/web/static/css/app.css
index 69c98657..5af87b67 100644
--- a/libmproxy/web/static/css/app.css
+++ b/libmproxy/web/static/css/app.css
@@ -157,18 +157,24 @@ header .menu {
.flow-table tr {
cursor: pointer;
}
+.flow-table tr:nth-child(even) {
+ background-color: rgba(0, 0, 0, 0.05);
+}
.flow-table tr.selected {
background-color: rgba(193, 215, 235, 0.5) !important;
}
+.flow-table tr.highlighted {
+ background-color: rgba(255, 204, 0, 0.4) !important;
+}
+.flow-table tr.highlighted:nth-child(even) {
+ background-color: rgba(255, 204, 0, 0.5) !important;
+}
.flow-table td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
-.flow-table tr:nth-child(even) {
- background-color: rgba(0, 0, 0, 0.05);
-}
-.flow-table .col-tls {
+.flow-table tr .col-tls {
width: 10px;
}
.flow-table .col-tls-https {
diff --git a/libmproxy/web/static/js/app.js b/libmproxy/web/static/js/app.js
index 6a9ce4fd..50474353 100644
--- a/libmproxy/web/static/js/app.js
+++ b/libmproxy/web/static/js/app.js
@@ -2092,17 +2092,6 @@ var RequestUtils = _.extend(_MessageUtils, {
});
var ResponseUtils = _.extend(_MessageUtils, {});
-
-HighlightColors = [
- "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#1f77b4", "#bcbd22", "#17becf",
- "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#aec7e8", "#dbdb8d", "#9edae5"
-];
-FadedHighlightColors = HighlightColors.map(function (color) {
- return "rgba(" +
- parseInt(color.substr(1, 2), 16) + "," +
- parseInt(color.substr(3, 2), 16) + "," +
- parseInt(color.substr(5, 2), 16) + ",0.3)";
-});
function ListStore() {
EventEmitter.call(this);
this.reset();
@@ -2668,7 +2657,7 @@ var FilterInput = React.createClass({displayName: 'FilterInput',
}
},
remove: function () {
- if(this.props.onRemove) {
+ if (this.props.onRemove) {
this.props.onRemove();
}
},
@@ -2715,7 +2704,7 @@ var MainMenu = React.createClass({displayName: 'MainMenu',
getInitialState: function () {
return {
filter: this.getQuery()[Query.FILTER] || "",
- highlight: (this.getQuery()[Query.HIGHLIGHT] || "").split("&").map(decodeURIComponent)
+ highlight: this.getQuery()[Query.HIGHLIGHT] || ""
};
},
statics: {
@@ -2733,55 +2722,18 @@ var MainMenu = React.createClass({displayName: 'MainMenu',
applyFilter: function (filter, highlight) {
var d = {};
d[Query.FILTER] = filter;
- d[Query.HIGHLIGHT] = highlight.map(encodeURIComponent).join("&");
+ d[Query.HIGHLIGHT] = highlight;
this.setQuery(d);
},
onFilterChange: function (val) {
this.setState({filter: val});
this.applyFilter(val, this.state.highlight);
},
- onHighlightChange: function (index, val) {
- var highlight = this.state.highlight.slice();
- highlight[index] = val;
- if (highlight[highlight.length - 1] !== "" && highlight.length < 14) {
- highlight.push("");
- }
- this.setState({
- highlight: highlight
- });
- this.applyFilter(this.state.filter, highlight);
- },
- onHighlightRemove: function (index) {
- if (this.state.highlight.length > 1 && index < this.state.highlight.length - 1) {
- var highlight = this.state.highlight.slice();
- highlight.splice(index, 1);
- this.setState({
- highlight: highlight
- });
- }
- this.refs["highlight-" + Math.max(0, index - 1)].focus();
- },
- getColor: function (index) {
- return HighlightColors[index];
+ onHighlightChange: function (val) {
+ this.setState({highlight: val});
+ this.applyFilter(this.state.filter, val);
},
render: function () {
- var highlightFilterInputs = [];
- for (var i = 0; i < this.state.highlight.length; i++) {
- highlightFilterInputs.push(React.createElement("span", {key: "placeholder-" + i}, " "));
- highlightFilterInputs.push(
- React.createElement(FilterInput, {
- key: "highlight-" + i,
- ref: "highlight-" + i,
- type: "tag",
- color: this.getColor(i),
- value: this.state.highlight[i],
- onChange: this.onHighlightChange.bind(this, i),
- onRemove: this.onHighlightRemove.bind(this, i)}
- )
- );
-
- }
-
return (
React.createElement("div", null,
React.createElement("button", {className: "btn " + (this.props.settings.showEventLog ? "btn-primary" : "btn-default"), onClick: this.toggleEventLog},
@@ -2794,11 +2746,11 @@ var MainMenu = React.createClass({displayName: 'MainMenu',
" Clear Flows"
),
" ",
- React.createElement("form", {className: "form-inline", style: {display:"inline"}},
+ React.createElement("form", {className: "form-inline", style: {display: "inline"}},
React.createElement(FilterInput, {type: "filter", color: "black", value: this.state.filter, onChange: this.onFilterChange}),
- highlightFilterInputs
+ " ",
+ React.createElement(FilterInput, {type: "tag", color: "hsl(48, 100%, 50%)", value: this.state.highlight, onChange: this.onHighlightChange})
)
-
)
);
}
@@ -3110,27 +3062,14 @@ var FlowRow = React.createClass({displayName: 'FlowRow',
}.bind(this));
var className = "";
if (this.props.selected) {
- className += "selected";
+ className += " selected";
}
-
- var highlight_count = flow._highlight.length;
- if (highlight_count > 0) {
- var background = "linear-gradient(90deg";
- for(var i =0; i < highlight_count; i++){
- var tag = flow._highlight[i];
- var ps = (100 * i / highlight_count) + "%";
- var pe = (100 * (i + 1) / highlight_count) + "%";
- background += ("," + tag + " " + ps + "," + tag + " " + pe);
- }
- background += ")";
+ if (this.props.highlighted) {
+ className += " highlighted";
}
- style = {
- background: background
- };
-
return (
- React.createElement("tr", {className: className, onClick: this.props.selectFlow.bind(null, flow), style: style},
+ React.createElement("tr", {className: className, onClick: this.props.selectFlow.bind(null, flow)},
columns
));
},
@@ -3199,11 +3138,13 @@ var FlowTable = React.createClass({displayName: 'FlowTable',
},
renderRow: function (flow) {
var selected = (flow === this.props.selected);
+ var highlighted = (this.props.view._highlight && this.props.view._highlight[flow.id].length > 0);
return React.createElement(FlowRow, {key: flow.id,
ref: flow.id,
flow: flow,
columns: this.state.columns,
selected: selected,
+ highlighted: highlighted,
selectFlow: this.props.selectFlow}
);
},
@@ -3594,21 +3535,30 @@ var MainView = React.createClass({displayName: 'MainView',
};
},
getViewFilt: function () {
- var filt = Filt.parse(this.getQuery()[Query.FILTER] || "");
- var highlight = (this.getQuery()[Query.HIGHLIGHT] || "").split("&")
- .map(decodeURIComponent)
- .map(function (filtstr) {
- return filtstr.trim() !== "" ? Filt.parse(filtstr) : false;
- });
+ try {
+ var filt = Filt.parse(this.getQuery()[Query.FILTER] || "");
+ var highlightStr = this.getQuery()[Query.HIGHLIGHT];
+ var highlight = highlightStr ? [Filt.parse(highlightStr)] : [];
+ } catch(e){
+ console.error("Error when processing filter: " + e);
+ }
+
+ var FadedHighlightColors = ["hsla(57, 100%, 50%, 0.33)"];
+
return function filter_and_highlight(flow) {
- flow._highlight = [];
+ var view = this.state.view;
+ if(!view._highlight){
+ view._highlight = {};
+ }
+ view._highlight[flow.id] = [];
+
for (var i = 0; i < highlight.length; i++) {
if (highlight[i] && highlight[i](flow)) {
- flow._highlight.push(FadedHighlightColors[i]);
+ view._highlight[flow.id].push(FadedHighlightColors[i]);
}
}
return filt(flow);
- };
+ }.bind(this);
},
getViewSort: function () {
},
diff --git a/web/src/css/flowtable.less b/web/src/css/flowtable.less
index 64fd86b9..2b0e8df3 100644
--- a/web/src/css/flowtable.less
+++ b/web/src/css/flowtable.less
@@ -19,9 +19,19 @@
tr {
cursor: pointer;
+
+ &:nth-child(even) {
+ background-color : rgba(0,0,0,0.05);
+ }
&.selected {
background-color: hsla(209, 52%, 84%, 0.5) !important;
}
+ &.highlighted {
+ background-color: hsla(48, 100%, 50%, 0.4) !important;
+ }
+ &.highlighted:nth-child(even) {
+ background-color: hsla(48, 100%, 50%, 0.5) !important;
+ }
}
td {
@@ -30,7 +40,7 @@
text-overflow: ellipsis;
}
- tr:nth-child(even) { background-color : rgba(0,0,0,0.05); }
+ tr
.col-tls {
width: 10px;
diff --git a/web/src/js/components/flowtable.jsx.js b/web/src/js/components/flowtable.jsx.js
index 00c2d4c1..50caaab3 100644
--- a/web/src/js/components/flowtable.jsx.js
+++ b/web/src/js/components/flowtable.jsx.js
@@ -6,27 +6,14 @@ var FlowRow = React.createClass({
}.bind(this));
var className = "";
if (this.props.selected) {
- className += "selected";
+ className += " selected";
}
-
- var highlight_count = flow._highlight.length;
- if (highlight_count > 0) {
- var background = "linear-gradient(90deg";
- for(var i =0; i < highlight_count; i++){
- var tag = flow._highlight[i];
- var ps = (100 * i / highlight_count) + "%";
- var pe = (100 * (i + 1) / highlight_count) + "%";
- background += ("," + tag + " " + ps + "," + tag + " " + pe);
- }
- background += ")";
+ if (this.props.highlighted) {
+ className += " highlighted";
}
- style = {
- background: background
- };
-
return (
- <tr className={className} onClick={this.props.selectFlow.bind(null, flow)} style={style}>
+ <tr className={className} onClick={this.props.selectFlow.bind(null, flow)}>
{columns}
</tr>);
},
@@ -95,11 +82,13 @@ var FlowTable = React.createClass({
},
renderRow: function (flow) {
var selected = (flow === this.props.selected);
+ var highlighted = (this.props.view._highlight && this.props.view._highlight[flow.id].length > 0);
return <FlowRow key={flow.id}
ref={flow.id}
flow={flow}
columns={this.state.columns}
selected={selected}
+ highlighted={highlighted}
selectFlow={this.props.selectFlow}
/>;
},
diff --git a/web/src/js/components/header.jsx.js b/web/src/js/components/header.jsx.js
index a975f57b..9e090770 100644
--- a/web/src/js/components/header.jsx.js
+++ b/web/src/js/components/header.jsx.js
@@ -71,7 +71,7 @@ var FilterInput = React.createClass({
}
},
remove: function () {
- if(this.props.onRemove) {
+ if (this.props.onRemove) {
this.props.onRemove();
}
},
@@ -118,7 +118,7 @@ var MainMenu = React.createClass({
getInitialState: function () {
return {
filter: this.getQuery()[Query.FILTER] || "",
- highlight: (this.getQuery()[Query.HIGHLIGHT] || "").split("&").map(decodeURIComponent)
+ highlight: this.getQuery()[Query.HIGHLIGHT] || ""
};
},
statics: {
@@ -136,55 +136,18 @@ var MainMenu = React.createClass({
applyFilter: function (filter, highlight) {
var d = {};
d[Query.FILTER] = filter;
- d[Query.HIGHLIGHT] = highlight.map(encodeURIComponent).join("&");
+ d[Query.HIGHLIGHT] = highlight;
this.setQuery(d);
},
onFilterChange: function (val) {
this.setState({filter: val});
this.applyFilter(val, this.state.highlight);
},
- onHighlightChange: function (index, val) {
- var highlight = this.state.highlight.slice();
- highlight[index] = val;
- if (highlight[highlight.length - 1] !== "" && highlight.length < 14) {
- highlight.push("");
- }
- this.setState({
- highlight: highlight
- });
- this.applyFilter(this.state.filter, highlight);
- },
- onHighlightRemove: function (index) {
- if (this.state.highlight.length > 1 && index < this.state.highlight.length - 1) {
- var highlight = this.state.highlight.slice();
- highlight.splice(index, 1);
- this.setState({
- highlight: highlight
- });
- }
- this.refs["highlight-" + Math.max(0, index - 1)].focus();
- },
- getColor: function (index) {
- return HighlightColors[index];
+ onHighlightChange: function (val) {
+ this.setState({highlight: val});
+ this.applyFilter(this.state.filter, val);
},
render: function () {
- var highlightFilterInputs = [];
- for (var i = 0; i < this.state.highlight.length; i++) {
- highlightFilterInputs.push(<span key={"placeholder-" + i}> </span>);
- highlightFilterInputs.push(
- <FilterInput
- key={"highlight-" + i}
- ref={"highlight-" + i}
- type="tag"
- color={this.getColor(i)}
- value={this.state.highlight[i]}
- onChange={this.onHighlightChange.bind(this, i)}
- onRemove={this.onHighlightRemove.bind(this, i)}
- />
- );
-
- }
-
return (
<div>
<button className={"btn " + (this.props.settings.showEventLog ? "btn-primary" : "btn-default")} onClick={this.toggleEventLog}>
@@ -197,11 +160,11 @@ var MainMenu = React.createClass({
&nbsp;Clear Flows
</button>
&nbsp;
- <form className="form-inline" style={{display:"inline"}}>
+ <form className="form-inline" style={{display: "inline"}}>
<FilterInput type="filter" color="black" value={this.state.filter} onChange={this.onFilterChange} />
- { highlightFilterInputs }
+ &nbsp;
+ <FilterInput type="tag" color="hsl(48, 100%, 50%)" value={this.state.highlight} onChange={this.onHighlightChange}/>
</form>
-
</div>
);
}
diff --git a/web/src/js/components/mainview.jsx.js b/web/src/js/components/mainview.jsx.js
index e6718413..be20a357 100644
--- a/web/src/js/components/mainview.jsx.js
+++ b/web/src/js/components/mainview.jsx.js
@@ -12,21 +12,30 @@ var MainView = React.createClass({
};
},
getViewFilt: function () {
- var filt = Filt.parse(this.getQuery()[Query.FILTER] || "");
- var highlight = (this.getQuery()[Query.HIGHLIGHT] || "").split("&")
- .map(decodeURIComponent)
- .map(function (filtstr) {
- return filtstr.trim() !== "" ? Filt.parse(filtstr) : false;
- });
+ try {
+ var filt = Filt.parse(this.getQuery()[Query.FILTER] || "");
+ var highlightStr = this.getQuery()[Query.HIGHLIGHT];
+ var highlight = highlightStr ? [Filt.parse(highlightStr)] : [];
+ } catch(e){
+ console.error("Error when processing filter: " + e);
+ }
+
+ var FadedHighlightColors = ["hsla(57, 100%, 50%, 0.33)"];
+
return function filter_and_highlight(flow) {
- flow._highlight = [];
+ var view = this.state.view;
+ if(!view._highlight){
+ view._highlight = {};
+ }
+ view._highlight[flow.id] = [];
+
for (var i = 0; i < highlight.length; i++) {
if (highlight[i] && highlight[i](flow)) {
- flow._highlight.push(FadedHighlightColors[i]);
+ view._highlight[flow.id].push(FadedHighlightColors[i]);
}
}
return filt(flow);
- };
+ }.bind(this);
},
getViewSort: function () {
},
diff --git a/web/src/js/flow/utils.js b/web/src/js/flow/utils.js
index 31780651..113f0b1a 100644
--- a/web/src/js/flow/utils.js
+++ b/web/src/js/flow/utils.js
@@ -54,15 +54,4 @@ var RequestUtils = _.extend(_MessageUtils, {
}
});
-var ResponseUtils = _.extend(_MessageUtils, {});
-
-HighlightColors = [
- "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#1f77b4", "#bcbd22", "#17becf",
- "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#aec7e8", "#dbdb8d", "#9edae5"
-];
-FadedHighlightColors = HighlightColors.map(function (color) {
- return "rgba(" +
- parseInt(color.substr(1, 2), 16) + "," +
- parseInt(color.substr(3, 2), 16) + "," +
- parseInt(color.substr(5, 2), 16) + ",0.3)";
-}); \ No newline at end of file
+var ResponseUtils = _.extend(_MessageUtils, {}); \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-26 03:01:35 +0000