Skip to content
Permalink
Browse files

Show harView in response tree, display binany images

  • Loading branch information...
dvdbng committed Jan 7, 2016
1 parent 16ca7d8 commit e9428a7b2c0dffb089ded67a3478e01912252b00
Showing with 96 additions and 104 deletions.
  1. +3 −14 splash/resources.py
  2. +93 −90 splash/ui/main.js
@@ -429,9 +429,6 @@ def render_GET(self, request):
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
%(cm_resources)s
<link rel="stylesheet" href="/_ui/style.css">
<style>
</style>
</head>
<body class="harBody no-lua" style="color:#000">
<div class="container"> <!-- style="margin: 0 auto; width: 95%%;"-->
@@ -477,18 +474,11 @@ def render_GET(self, request):
</div>
</div>
<div class="pagePreview" style="display:none">
<h3>
Network Activity
<a href="" style="display:none" id="har-download"><small>(download as .har)</small></a>
</h3>
</div>
<div id="harview" style="display: none;">
<div id="content" version="Splash %(version)s"></div>
<div id="result" style="display: none;">
<span class="key">Splash Response</span><span class="colon">:</span>
<span class="obj-item"></span>
</div>
<div id="result"><span class="key">Splash Response</span><span class="colon">: </span></div>
<div id="errorMessage" style="display:none">
<h4>HTTP Error <span id='errorStatus'></span></h4>
<h4>Type: <span id='errorType'></span></h4>
@@ -498,7 +488,6 @@ def render_GET(self, request):
</div>
</div>
<script data-main="_harviewer/scripts/harViewer" src="_harviewer/scripts/require.js"></script>
<script> var splash = %(options)s; </script>
<script src="/_ui/main.js"> </script>
</body>
@@ -29,9 +29,9 @@ if(splash.lua_enabled) {
var init_editor = function init_editor(){
if(splash.lua_enabled && !splash.editor) {
/* Create editor */
var textarea = $('#lua-code-editor:visible');
if (textarea.length) {
textarea.val(params.lua_source || splash.example_script || "");
var textarea = $('#lua-code-editor');
textarea.val(params.lua_source || splash.example_script || "");
if (textarea.is(':visible')) {
var editor = splash.editor = CodeMirror.fromTextArea(textarea[0], CODEMIRROR_OPTIONS);
editor.setSize(464, 464);
editor.on("keyup", function (cm, event) {
@@ -54,58 +54,65 @@ if(splash.lua_enabled) {
});
}

var harViewerLoaded = $.Deferred();
/* Initialize HAR viewer & send AJAX requests */
$("#content").bind("onViewerPreInit", function(event){
// Get application object
var viewer = event.target.repObject;

// Remove unnecessary/unsupported tabs
viewer.removeTab("Home");
viewer.removeTab("DOM");
viewer.removeTab("About");
viewer.removeTab("Schema");
// Hide the tab bar
viewer.showTabBar(false);
function loadHarViewer(har) {
if(splash.harLoaded) {
return $(); // Multiple har files in response, only show UI for the first one
}
splash.harLoaded = true;
// Load HARViewer libraries
$('<script data-main="_harviewer/scripts/harViewer" src="_harviewer/scripts/require.js"></script>').appendTo(document.body);

// Remove toolbar buttons
var preview = viewer.getTab("Preview");
preview.toolbar.removeButton("download");
preview.toolbar.removeButton("clear");
preview.toolbar.removeButton("showTimeline");
var $container = $('<div/>')
.addClass('indent').attr('id', 'content') // Id is hardcoded into harviewer
.text('Loading HARViewer...');

var events = [
{name: "_onStarted", description: "Page processing is started"},
{name: "_onPrepareStart", description: "Rendering begins"},
{name: "_onFullViewportSet", description: "Viewport is changed to full"},
{name: "_onCustomJsExecuted", description: "Custom JavaScript is executed"},
{name: "_onScreenshotPrepared", description: "Screenshot is taken"},
{name: "_onPngRendered", description: "Screenshot is encoded"},
{name: "_onHtmlRendered", description: "HTML is rendered"},
{name: "_onIframesRendered", description: "Iframes info is calculated"},
];
/* Initialize HAR viewer */
$container.bind("onViewerPreInit", function(event){
// Get application object
var viewer = event.target.repObject;

for (var i=0; i<events.length; i++){
var obj = events[i];
obj.classes = "customEventBar " + obj.name;
preview.addPageTiming(obj);
}
// Remove unnecessary/unsupported tabs
viewer.removeTab("Home");
viewer.removeTab("DOM");
viewer.removeTab("About");
viewer.removeTab("Schema");
// Hide the tab bar
viewer.showTabBar(false);

// Make sure stats are visible to the user by default
preview.showStats(true);
});
// Remove toolbar buttons
var preview = viewer.getTab("Preview");
preview.toolbar.removeButton("download");
preview.toolbar.removeButton("clear");
preview.toolbar.removeButton("showTimeline");

$("#content").bind("onViewerHARLoaded", function(event){
$('#harviewer_loading').remove();
});
var events = [
{name: "_onStarted", description: "Page processing is started"},
{name: "_onPrepareStart", description: "Rendering begins"},
{name: "_onFullViewportSet", description: "Viewport is changed to full"},
{name: "_onCustomJsExecuted", description: "Custom JavaScript is executed"},
{name: "_onScreenshotPrepared", description: "Screenshot is taken"},
{name: "_onPngRendered", description: "Screenshot is encoded"},
{name: "_onHtmlRendered", description: "HTML is rendered"},
{name: "_onIframesRendered", description: "Iframes info is calculated"},
];

$("#content").bind("onViewerInit", function(event){
var viewer = event.target.repObject;
harViewerLoaded.resolve(viewer);
});
for (var i=0; i<events.length; i++){
var obj = events[i];
obj.classes = "customEventBar " + obj.name;
preview.addPageTiming(obj);
}

function download_link(data, encoding, name){
// Make sure stats are visible to the user by default
preview.showStats(true);
console.log('viewerpreinit');
});

$container.bind("onViewerInit", function(event){
console.log('viewerinit');
var viewer = event.target.repObject;
viewer.appendPreview(har);
});
return $container;
}

function renderString(s, $cnt) {
@@ -166,17 +173,13 @@ function renderObject(obj, $cnt) {
if(obj.log && obj.log.creator && obj.log.creator.name === 'Splash') { // Test if it's a har object
$cnt.addClass('har')
.append('<span class="type">HAR data</span>')
.append(
$('<a/>').addClass('action')
.text('view')
)
.append(
$('<a/>').addClass('action')
.text('view')
.attr('download', splash.pageName + '.har')
.attr('href', "data:application/json;charset=utf-8," + encodeURIComponent(JSON.stringify(obj)))
.text('download')
);
).append(loadHarViewer(obj));
return;
}
if($.isArray(obj)) {
@@ -224,54 +227,54 @@ if(splash.params) {

// Send request to splash
$("#status").text("Rendering, please wait..");
$.ajax(splash.lua_enabled ? '/execute' : '/render.json', {
"contentType": "application/json",
"dataType": "json",
"type": "POST",
"data": JSON.stringify(params)
}).done(function(data){
if (!data){
$("#status").text("Empty result");
}
splash.result = data;

renderValue(data, $('#result'));
var xhr = new XMLHttpRequest();

//if (har){
// harViewerLoaded.then(function(viewer){
// viewer.appendPreview(har);
// var downloadLink = $('#har-download');
// var harData = "application/json;charset=utf-8," + encodeURIComponent(JSON.stringify(har));
// downloadLink.attr("href", "data:" + harData);
// downloadLink.attr("download", "activity.har");
// downloadLink.show();
// });
//}
//if (png) {
// $(".pagePreview img").attr("src", "data:image/png;base64," + png);
//}
//if (jpeg) {
// $(".pagePreview img").attr("src", "data:image/jpeg;base64," + jpeg);
//}
//$("#renderedHTML").val(html);
//$(".pagePreview").show();
$("#status").text("Success");
}).fail(function(xhr, status, err){
$("#errorStatus").text(xhr.status + " (" + err + ")");
err = xhr.responseJSON;
var resp = JSON.stringify(err, null, 4);
$("#errorData").text(resp);
var onError = function onError(err){
$("#errorStatus").text(xhr.status + " (" + xhr.statusText + ")");
$("#errorData").text(JSON.stringify(err, null, 4));
$("#errorMessage").show();
$("#status").text("Error occured");
$("#errorMessageText").text(err.info.message);
$("#errorDescription").text(err.description);

var errType = err.type;
if (err.info.type){
errType += ' -> ' + err.info.type;
}
$("#errorType").text(errType);
});
};

xhr.onreadystatechange = function(){
if (this.readyState === 4){
var blob = this.response;
var reader = new FileReader();
var isImage = /^image\//.test(blob.type);
reader.addEventListener("loadend", function() {
var data = reader.result;
if(isImage) {
data = data.replace(/^data:[^;]+;[^,]+,/, '');
} else if (/json/.test(blob.type)) {
data = JSON.parse(data);
}
if(xhr.status === 200) {
$('#result').show();
splash.result = data;
renderValue(data, $('#result').find('.obj-item'));
$("#status").text(data ? "Success" : "Empty result");
} else {
onError(data);
}
});
if(isImage) {
data = reader.readAsDataURL(blob);
} else {
data = reader.readAsText(blob);
}
}
};
xhr.open('POST', splash.lua_enabled ? '/execute' : '/render.json');
xhr.setRequestHeader('content-type', 'application/json');
xhr.responseType = 'blob'; // Need blob in case an image is returned directly
xhr.send(JSON.stringify(params));
}

})();

0 comments on commit e9428a7

Please sign in to comment.
You can’t perform that action at this time.