Skip to content
Permalink
Browse files

Added a toolbar for going to previous and next node

  • Loading branch information
shinglyu committed Dec 28, 2016
1 parent fe82d27 commit 344ad61f2cbb0e18ca4fe80bf8b24ab3b05c42de
Showing with 33 additions and 7 deletions.
  1. +7 −7 components/layout/flow_list.rs
  2. +2 −0 etc/layout_viewer/css/main.css
  3. +24 −0 etc/layout_viewer/viewer.html
@@ -30,14 +30,14 @@ impl Serialize for FlowList {
let flow_val = ObjectBuilder::new()
.insert("class", f.class())
.insert("data", match f.class() {
FlowClass::Block => to_value(f.as_block()),
FlowClass::Inline => to_value(f.as_inline()),
FlowClass::Table => to_value(f.as_table()),
FlowClass::TableWrapper => to_value(f.as_table_wrapper()),
FlowClass::Block => to_value(f.as_block()),
FlowClass::Inline => to_value(f.as_inline()),
FlowClass::Table => to_value(f.as_table()),
FlowClass::TableWrapper => to_value(f.as_table_wrapper()),
FlowClass::TableRowGroup => to_value(f.as_table_rowgroup()),
FlowClass::TableRow => to_value(f.as_table_row()),
FlowClass::TableCell => to_value(f.as_table_cell()),
FlowClass::Flex => to_value(f.as_flex()),
FlowClass::TableRow => to_value(f.as_table_row()),
FlowClass::TableCell => to_value(f.as_table_cell()),
FlowClass::Flex => to_value(f.as_flex()),
FlowClass::ListItem | FlowClass::TableColGroup | FlowClass::TableCaption |
FlowClass::Multicol | FlowClass::MulticolColumn => {
Value::Null // Not implemented yet
@@ -24,4 +24,6 @@
right: 1em;
padding: 1em;
border-radius: 1em;
font-weight: bold;
text-align: right;
}
@@ -68,8 +68,13 @@ <h1> Servo Layout Viewer </h1>
</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 @@ <h1> Servo Layout Viewer </h1>
$('#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 @@ <h1> Servo Layout Viewer </h1>
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 @@ <h1> Servo Layout Viewer </h1>
});
}

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 @@ <h1> Servo Layout Viewer </h1>
return false;
};
register_toggle_unchanaged_code_handler();
register_prev_next_trace_node();
});
</script>
</body>

0 comments on commit 344ad61

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