render: function() {
var selectedPacket = this.props.selectedPacket || {};
return (
DIV({className: "details"},
TreeView({key: "packet-detail", data: selectedPacket})
)
);
}
render: function() {
var actions = this.props.actions;
var file = this.props.data;
if (file.discardRequestBody) {
return DOM.span({className: "netInfoBodiesDiscarded"},
Locale.$STR("xhrSpy.requestBodyDiscarded")
);
}
var postData = file.request.postData;
if (!postData) {
actions.requestData("requestPostData");
// xxxHonza: localization, real spinner
return (
DOM.div({}, "Loading...")
);
}
var text = postData.text;
// URL encoded post data are nicely rendered as a list
// of parameters.
if (text && XhrUtils.isURLEncodedRequest(file)) {
var lines = text.split("\n");
var params = Url.parseURLEncodedText(lines[lines.length-1]);
text = NetInfoParams({headers: params});
}
// Multipart post data are parsed and nicely rendered
// using special template.
if (text && XhrUtils.isMultiPartRequest(file)) {
// xxxHonza: TODO FIXME
}
if (this.isJson(postData)) {
var json = this.parseJson(file);
if (json) {
return TreeView({
data: json,
mode: "tiny"
});
}
}
return (
DOM.div({className: "postTabBox"},
DOM.div({className: "panelContent netInfoResponseContent"},
text
)
)
);
}
function renderContent(value) {
var tree = TreeView({
data: JSON.parse(value),
mode: "tiny"
});
React.render(tree, document.querySelector("#content"));
var size = getRequiredSize();
postChromeMessage("resize", size);
}
render: function() {
var grip = this.state.data || this.props.data;
return (
DIV({},
TreeView({
forceUpdate: this.state.forceUpdate,
key: "content",
data: grip,
provider: this.props.provider,
mode: this.props.mode
})
)
);
}
render: function() {
var frame = this.props.frame;
var data = frame.data;
var type = frame.sent ? "send" : "receive";
var size = Str.formatSize(data.payload.length);
var payload = Str.cropString(data.payload, 50);
var time = new Date(data.timeStamp / 1000);
var timeText = time.getHours() + ":" + time.getMinutes() +
":" + time.getSeconds() + "." + time.getMilliseconds();
// Error frames have its own styling
var classNames = ["frameBubble", type];
if (frame.error) {
classNames.push("error");
}
// Selected frames are highlighted
if (this.props.selection == frame) {
classNames.push("selected");
}
// Render inline frame preview. There is just one preview displayed
var preview;
if (!preview && frame.socketIo) {
preview = TreeView({
key: "preview-socketio",
// We only show the data that is deemed interesting for the user in the
// inline previews, not the socketIO metadata
data: {"Socket IO": frame.socketIo.data},
mode: "tiny"
});
}
if (!preview && frame.sockJs) {
preview = TreeView({
key: "preview-sockjs",
data: {"SockJS": frame.sockJs},
mode: "tiny"
});
}
if (!preview && frame.json) {
preview = TreeView({
key: "preview-json",
data: {"JSON": frame.json},
mode: "tiny"
});
}
var label = (type == "send") ?
Locale.$STR("websocketmonitor.label.sent") :
Locale.$STR("websocketmonitor.label.received");
return (
div({className: classNames.join(" "), onClick: this.onClick},
div({className: "frameBox"},
div({className: "frameContent"},
div({className: "body"},
span({className: "text"}, label),
span({className: "type"}, getOpCodeLabel(frame)),
div({className: "payload"},
Str.cropString(data.payload)
),
div({className: "preview"},
preview
),
div({},
span({className: "info"}, timeText + ", " + size)
)
),
div({className: "boxArrow"})
)
)
)
);
},
render: function() {
var packet = this.props.data.packet;
var type = packet.type ? packet.type : "";
var mode = "tiny";
var classNames = ["packetPanel", this.props.data.type];
var size = Str.formatSize(this.props.data.size);
var time = this.props.data.time;
// Use String.formatTime, but how to access from the content?
var timeText = time.toLocaleTimeString() + "." + time.getMilliseconds();
var previewData = {
packet: packet
}
// Error packets have its own styling
if (packet.error) {
classNames.push("error");
}
// Selected packets are highlighted
if (this.props.selected) {
classNames.push("selected");
}
// Inline preview component
var preview = this.props.showInlineDetails ? TreeView(
{data: previewData, mode: mode}) : null;
if (this.props.data.type == "send") {
return (
DIV({className: classNames.join(" "), onClick: this.onClick},
DIV({className: "packetBox"},
DIV({className: "packetContent"},
DIV({className: "body"},
SPAN({className: "text"},
Locale.$STR("rdpInspector.label.sent") + " "
),
SPAN({className: "type"}, type),
SPAN({className: "text"},
" " + Locale.$STR("rdpInspector.label.to") + " "
),
SPAN({className: "to"}, packet.to),
SPAN({className: "info"}, timeText + ", " + size),
DIV({className: "preview"},
preview
)
),
DIV({className: "boxArrow"})
)
)
)
);
} else {
return (
DIV({className: classNames.join(" "), onClick: this.onClick},
DIV({className: "packetBox"},
DIV({className: "packetContent"},
DIV({className: "boxArrow"}),
DIV({className: "body"},
DIV({className: "from"},
SPAN({className: "text"},
Locale.$STR("rdpInspector.label.received") + " "
),
SPAN({}, type),
SPAN({className: "text"},
" " + Locale.$STR("rdpInspector.label.from") + " "),
SPAN({}, packet.from),
SPAN({className: "info"}, timeText + ", " + size)
),
DIV({className: "errorMessage"},
DIV({}, packet.error),
DIV({}, packet.message)
),
DIV({className: "preview"},
preview
)
)
)
)
)
);
}
},