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

14
components/layout/flow_list.rs
View file

@ -30,14 +30,14 @@ impl Serialize for FlowList {
let flow_val = ObjectBuilder::new() let flow_val = ObjectBuilder::new()
.insert("class", f.class()) .insert("class", f.class())
.insert("data", match f.class() { .insert("data", match f.class() {
FlowClass::Block => to_value(f.as_block()), FlowClass::Block => to_value(f.as_block()),
FlowClass::Inline => to_value(f.as_inline()), FlowClass::Inline => to_value(f.as_inline()),
FlowClass::Table => to_value(f.as_table()), FlowClass::Table => to_value(f.as_table()),
FlowClass::TableWrapper => to_value(f.as_table_wrapper()), FlowClass::TableWrapper => to_value(f.as_table_wrapper()),
FlowClass::TableRowGroup => to_value(f.as_table_rowgroup()), FlowClass::TableRowGroup => to_value(f.as_table_rowgroup()),
FlowClass::TableRow => to_value(f.as_table_row()), FlowClass::TableRow => to_value(f.as_table_row()),
FlowClass::TableCell => to_value(f.as_table_cell()), FlowClass::TableCell => to_value(f.as_table_cell()),
FlowClass::Flex => to_value(f.as_flex()), FlowClass::Flex => to_value(f.as_flex()),
FlowClass::ListItem | FlowClass::TableColGroup | FlowClass::TableCaption | FlowClass::ListItem | FlowClass::TableColGroup | FlowClass::TableCaption |
FlowClass::Multicol | FlowClass::MulticolColumn => { FlowClass::Multicol | FlowClass::MulticolColumn => {
Value::Null // Not implemented yet Value::Null // Not implemented yet

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

@ -24,4 +24,6 @@
right: 1em; right: 1em;
padding: 1em; padding: 1em;
border-radius: 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> </div>
<div id="toolbar"> <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" /> <input type="checkbox" name="show_unchanged" id="show_unchanged" />
<label for="show_unchanged">Show unchanged code</label> <label for="show_unchanged">Show unchanged code</label>
<br>
<a href="#top">Back to top</a> <a href="#top">Back to top</a>
</div> </div>
</div> </div>
@ -181,6 +186,7 @@
$('#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(); $("#flow-diffs").empty();
$('#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 flow_left = node.pre[key];
@ -222,6 +228,8 @@
update_flow_tree_bgcolor(node.flow_tree, node_color_hash); 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"}); $('#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() { 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() { $( document ).ready(function() {
var upload = document.getElementsByTagName('input')[0]; var upload = document.getElementsByTagName('input')[0];
upload.onchange = function (e) { upload.onchange = function (e) {
@ -246,6 +269,7 @@
return false; return false;
}; };
register_toggle_unchanaged_code_handler(); register_toggle_unchanaged_code_handler();
register_prev_next_trace_node();
}); });
</script> </script>
</body> </body>