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

Added a toolbar for going to previous and next node

Browse source
This commit is contained in:
Shing Lyu 2016-11-08 13:26:12 +08:00
parent fe82d277cd
commit 344ad61f2c
3 changed files with 33 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

2
etc/layout_viewer/css/main.css
View file

@ -24,4 +24,6 @@
right: 1em;
padding: 1em;
border-radius: 1em;
font-weight: bold;
text-align: right;
}

24
etc/layout_viewer/viewer.html
View file

@ -68,8 +68,13 @@
</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>
@ -181,6 +186,7 @@
$('#trace-tree').treeview({data: tree, levels: 3});
$('#trace-tree').on('nodeSelected', function(event, node) {
$("#flow-diffs").empty();
$('#trace-tree').treeview(true).revealNode(node);
for (var key in node.pre) {
var flow_left = node.pre[key];
@ -222,6 +228,8 @@
update_flow_tree_bgcolor(node.flow_tree, node_color_hash);
$('#flow-tree').treeview({data: [node.flow_tree], levels: 100, enableLinks: true, emptyIcon: "glyphicon glyphicon-unchecked hidden-glyphicon"});
});
$('#trace-tree').treeview(true).selectNode(0);
}
function register_toggle_unchanaged_code_handler() {
@ -231,6 +239,21 @@
});
}
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) {
@ -246,6 +269,7 @@
return false;
};
register_toggle_unchanaged_code_handler();
register_prev_next_trace_node();
});
</script>
</body>