Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-09-21 12:20:20 +01:00
Code Issues Projects Releases Packages Wiki Activity

Display fragment tree info on layout viewer

Browse source
This commit is contained in:
Fernando Jiménez Moreno 2020-02-13 12:23:38 +01:00
parent 67706f9c0b
commit aaa3cd9a59
1 changed files with 40 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

77
etc/layout_viewer/viewer.html
View file

@ -62,7 +62,7 @@
</div> </div>
</div> </div>
<div class="col-sm-12"> <div class="col-sm-12">
<div id="flow-diffs"></div> <div id="fragment-diffs"></div>
</div> </div>
</div> </div>
</div> </div>
@ -94,9 +94,9 @@
var fragment = Object.values(trace_node)[0]; var fragment = Object.values(trace_node)[0];
var node = { var node = {
text: Object.keys(trace_node)[0], text: Object.keys(trace_node)[0],
id: fragment.id, id: fragment.debug_id,
icon: "dummy", icon: "dummy",
href: "#diff-" + fragment.id href: "#diff-" + fragment.debug_id
}; };
if (fragment.children) { if (fragment.children) {
@ -113,27 +113,32 @@
return node; return node;
} }
function create_flow_hash(trace_node, flow_hash) { function get_fragments_info(node, fragments_info) {
var base = get_base(trace_node); const fragmentType = Object.keys(node)[0];
flow_hash[base.id] = trace_node; 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,
};
for (var i=0 ; i < trace_node.children.length ; ++i) { if (trace_node.children) {
create_flow_hash(base.children[i], flow_hash); for (var i=0 ; i < trace_node.children.length ; ++i) {
get_fragments_info(trace_node.children[i], fragments_info);
}
} }
delete trace_node.children;
} }
function flatten_trace(trace_node) { function flatten_trace(trace_node) {
var fragment_tree = create_fragment_tree(Object.values(trace_node)[0]); const node = Object.values(trace_node)[0];
var fragments_info = {};
//var flow_hash = {}; get_fragments_info(node, fragments_info);
//create_flow_hash(trace_node[0], flow_hash);
return { return {
tree: fragment_tree, tree: create_fragment_tree(node),
//flows: flow_hash, fragments_info: fragments_info,
} };
} }
function create_trace_tree_node(trace_node) { function create_trace_tree_node(trace_node) {
@ -144,8 +149,8 @@
text: trace_node.name, text: trace_node.name,
icon: "dummy", icon: "dummy",
fragment_tree: pre_trace.tree, // assume pre/post trace always have same tree! fragment_tree: pre_trace.tree, // assume pre/post trace always have same tree!
//pre: pre_trace.flows, pre: pre_trace.fragments_info,
//post: post_trace.flows, post: post_trace.fragments_info,
}; };
var trace_node = Object.values(trace_node)[0]; var trace_node = Object.values(trace_node)[0];
@ -179,40 +184,38 @@
var tree = [ create_trace_tree_node(data) ]; var tree = [ create_trace_tree_node(data) ];
$('#trace-tree').treeview({data: tree, levels: 3}); $('#trace-tree').treeview({data: tree, levels: 3});
$('#trace-tree').on('nodeSelected', function(event, node) { $('#trace-tree').on('nodeSelected', function(event, node) {
$("#flow-diffs").empty(); $("#fragment-diffs").empty();
$('#trace-tree').treeview(true).revealNode(node); $('#trace-tree').treeview(true).revealNode(node);
for (var key in node.pre) { for (var key in node.pre) {
var flow_left = node.pre[key]; var fragment_info_left = node.pre[key];
var flow_right = node.post[key]; var fragment_info_right = node.post[key];
var delta = jsondiffpatch.create({ var delta = jsondiffpatch.create({
objectHash: function(obj) { objectHash: function(obj) {
if (obj.data !== undefined && obj.data.base !== undefined) {
return obj.data.base.id;
}
if (obj.id !== undefined) {
return obj.id;
}
if (obj.index !== undefined) {
// FlexItem and FlexLine
return obj.index;
}
return JSON.stringify(obj); return JSON.stringify(obj);
} }
}).diff(flow_left, flow_right); }).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) { if (delta !== undefined) {
var diff_id = "diff-" + key; var diff_id = "diff-" + key;
$("#flow-diffs").append( $("#fragment-diffs").append(
"<div class='panel panel-default' id='" + "<div class='panel panel-default' id='" +
diff_id + diff_id +
"'><div class='panel-heading'>" + "'><div class='panel-heading'>" +
flow_left.class + " (" + key + ")" + fragment_info_left.class + " (" + key + ")" +
"</div><div class='panel-body'></div></div>"); "</div><div class='panel-body'></div></div>");
document.getElementById(diff_id).getElementsByClassName('panel-body')[0].innerHTML = document.getElementById(diff_id).getElementsByClassName('panel-body')[0].innerHTML =
jsondiffpatch.formatters.html.format(delta, flow_left); jsondiffpatch.formatters.html.format(delta, fragment_info_left);
node_color_hash[key] = "rgba(255, 0, 0, 0.7)"; node_color_hash[key] = "rgba(255, 0, 0, 0.7)";
} else { } else {
node_color_hash[key] = "rgb(212, 248, 212)"; node_color_hash[key] = "rgb(212, 248, 212)";