mirror of
https://github.com/servo/servo.git
synced 2025-10-04 02:29:12 +01:00
273 lines
11 KiB
HTML
273 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Servo Layout Debugger</title>
|
|
|
|
<!-- Bootstrap -->
|
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Treeview -->
|
|
<link href="css/bootstrap-treeview.min.css" rel="stylesheet">
|
|
|
|
<!-- JSDiffPatch -->
|
|
<link href="css/formatters/html.css" rel="stylesheet">
|
|
|
|
<!-- Custom -->
|
|
<link href="css/main.css" rel="stylesheet">
|
|
|
|
<!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
<body>
|
|
<div class="container" role="main">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h1> Servo Layout Viewer </h1>
|
|
<p> Check the <a href="https://github.com/servo/servo/blob/master/etc/layout_viewer/README.md">README</a> for instructions.</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-4">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="well">
|
|
<input type=file>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div id="trace-tree">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<ul id="trace-list" class="list-group">
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-8">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class='panel panel-default'>
|
|
<div class='panel-heading'>Fragment Tree</div>
|
|
<div class='panel-body' id="fragment-tree"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12">
|
|
<div id="fragment-diffs"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="toolbar">
|
|
<a href="#" id="prev_trace">< Prev step</a>
|
|
|
|
|
<a href="#" id="next_trace">Next step ></a>
|
|
<br>
|
|
<input type="checkbox" name="show_unchanged" id="show_unchanged" />
|
|
<label for="show_unchanged">Show unchanged code</label>
|
|
<br>
|
|
<a href="#top">Back to top</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- jQuery -->
|
|
<script src="js/jquery.min.js"></script>
|
|
<!-- Bootstrap -->
|
|
<script src="js/bootstrap.min.js"></script>
|
|
<!-- Treeview -->
|
|
<script src="js/bootstrap-treeview.min.js"></script>
|
|
<!-- JSDiffPatch -->
|
|
<script src="js/bundle.min.js"></script>
|
|
<script src="js/formatters.min.js"></script>
|
|
|
|
<script>
|
|
function create_fragment_tree(trace_node) {
|
|
var fragment = Object.values(trace_node)[0];
|
|
var node = {
|
|
text: Object.keys(trace_node)[0],
|
|
id: fragment.debug_id,
|
|
icon: "dummy",
|
|
href: "#diff-" + fragment.debug_id
|
|
};
|
|
|
|
if (fragment.children) {
|
|
var children = [];
|
|
for (var i=0 ; i < fragment.children.length ; ++i) {
|
|
children.push(create_fragment_tree(fragment.children[i]));
|
|
}
|
|
|
|
if (children.length > 0) {
|
|
node.nodes = children;
|
|
}
|
|
}
|
|
|
|
return node;
|
|
}
|
|
|
|
function get_fragments_info(node, fragments_info) {
|
|
const fragmentType = Object.keys(node)[0];
|
|
const trace_node = Object.assign({}, Object.values(node)[0]);
|
|
let data = Object.assign({}, trace_node);
|
|
delete data.children;
|
|
delete data.debug_id;
|
|
fragments_info[trace_node.debug_id] = {
|
|
class: fragmentType,
|
|
data,
|
|
};
|
|
|
|
if (trace_node.children) {
|
|
for (var i=0 ; i < trace_node.children.length ; ++i) {
|
|
get_fragments_info(trace_node.children[i], fragments_info);
|
|
}
|
|
}
|
|
}
|
|
|
|
function flatten_trace(trace_node) {
|
|
const node = Object.values(trace_node)[0];
|
|
var fragments_info = {};
|
|
get_fragments_info(node, fragments_info);
|
|
return {
|
|
tree: create_fragment_tree(node),
|
|
fragments_info: fragments_info,
|
|
};
|
|
}
|
|
|
|
function create_trace_tree_node(trace_node) {
|
|
var pre_trace = flatten_trace(trace_node.pre);
|
|
var post_trace = flatten_trace(trace_node.post);
|
|
|
|
var tree_node = {
|
|
text: trace_node.name,
|
|
icon: "dummy",
|
|
fragment_tree: pre_trace.tree, // assume pre/post trace always have same tree!
|
|
pre: pre_trace.fragments_info,
|
|
post: post_trace.fragments_info,
|
|
};
|
|
|
|
var trace_node = Object.values(trace_node)[0];
|
|
if (trace_node.children) {
|
|
var children = [];
|
|
for (var i=0 ; i < trace_node.children.length ; ++i) {
|
|
children.push(create_trace_tree_node(trace_node.children[i]));
|
|
}
|
|
|
|
if (children.length > 0) {
|
|
tree_node.nodes = children;
|
|
}
|
|
}
|
|
|
|
return tree_node;
|
|
}
|
|
|
|
function update_fragment_tree_bgcolor(fragment_tree_node, node_color_hash) {
|
|
fragment_tree_node.backColor = node_color_hash[fragment_tree_node.id];
|
|
if (fragment_tree_node.nodes !== undefined) {
|
|
for (var i=0 ; i < fragment_tree_node.nodes.length ; ++i) {
|
|
update_fragment_tree_bgcolor(fragment_tree_node.nodes[i], node_color_hash)
|
|
}
|
|
}
|
|
}
|
|
|
|
function new_data_loaded(data) {
|
|
jsondiffpatch.formatters.html.hideUnchanged();
|
|
|
|
var node_color_hash = {};
|
|
var tree = [ create_trace_tree_node(data) ];
|
|
$('#trace-tree').treeview({data: tree, levels: 3});
|
|
$('#trace-tree').on('nodeSelected', function(event, node) {
|
|
$("#fragment-diffs").empty();
|
|
$('#trace-tree').treeview(true).revealNode(node);
|
|
|
|
for (var key in node.pre) {
|
|
var fragment_info_left = node.pre[key];
|
|
var fragment_info_right = node.post[key];
|
|
|
|
var delta = jsondiffpatch.create({
|
|
objectHash: function(obj) {
|
|
return JSON.stringify(obj);
|
|
}
|
|
}).diff(fragment_info_left, fragment_info_right);
|
|
|
|
if (!delta) {
|
|
delta = jsondiffpatch.create({
|
|
objectHash: function(obj) {
|
|
return JSON.stringify(obj);
|
|
}
|
|
}).diff({}, fragment_info_right);
|
|
}
|
|
|
|
if (delta !== undefined) {
|
|
var diff_id = "diff-" + key;
|
|
$("#fragment-diffs").append(
|
|
"<div class='panel panel-default' id='" +
|
|
diff_id +
|
|
"'><div class='panel-heading'>" +
|
|
fragment_info_left.class + " (" + key + ")" +
|
|
"</div><div class='panel-body'></div></div>");
|
|
|
|
document.getElementById(diff_id).getElementsByClassName('panel-body')[0].innerHTML =
|
|
jsondiffpatch.formatters.html.format(delta, fragment_info_left);
|
|
node_color_hash[key] = "rgba(255, 0, 0, 0.7)";
|
|
} else {
|
|
node_color_hash[key] = "rgb(212, 248, 212)";
|
|
}
|
|
}
|
|
|
|
update_fragment_tree_bgcolor(node.fragment_tree, node_color_hash);
|
|
$('#fragment-tree').treeview({data: [node.fragment_tree], levels: 100, enableLinks: true, emptyIcon: "glyphicon glyphicon-unchecked hidden-glyphicon"});
|
|
});
|
|
|
|
$('#trace-tree').treeview(true).selectNode(0);
|
|
}
|
|
|
|
function register_toggle_unchanaged_code_handler() {
|
|
var show_unchange_box = document.getElementById("show_unchanged");
|
|
show_unchange_box.addEventListener("change", function(evt){
|
|
jsondiffpatch.formatters.html.showUnchanged(show_unchange_box.checked, null, 800);
|
|
});
|
|
}
|
|
|
|
function register_prev_next_trace_node() {
|
|
var prev_btn = document.getElementById("prev_trace");
|
|
var next_btn = document.getElementById("next_trace");
|
|
prev_btn.addEventListener("click", function(evt){
|
|
var node_id = $("#trace-tree").treeview(true).getSelected()[0].nodeId;
|
|
// We deliberatly choose to ignore the node_id out of bound case,
|
|
// since it won't break the UI usability
|
|
$("#trace-tree").treeview(true).selectNode(node_id - 1);
|
|
});
|
|
next_btn.addEventListener("click", function(evt){
|
|
var node_id = $("#trace-tree").treeview(true).getSelected()[0].nodeId;
|
|
$("#trace-tree").treeview(true).selectNode(node_id + 1);
|
|
});
|
|
}
|
|
|
|
$( document ).ready(function() {
|
|
var upload = document.getElementsByTagName('input')[0];
|
|
upload.onchange = function (e) {
|
|
e.preventDefault();
|
|
|
|
var file = upload.files[0],
|
|
reader = new FileReader();
|
|
reader.onload = function (event) {
|
|
new_data_loaded(JSON.parse(event.target.result));
|
|
};
|
|
|
|
reader.readAsText(file);
|
|
return false;
|
|
};
|
|
register_toggle_unchanaged_code_handler();
|
|
register_prev_next_trace_node();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|