diff --git a/components/layout/flow_list.rs b/components/layout/flow_list.rs index 713d68070824..42ff71bf4ea4 100644 --- a/components/layout/flow_list.rs +++ b/components/layout/flow_list.rs @@ -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 diff --git a/etc/layout_viewer/css/main.css b/etc/layout_viewer/css/main.css index d339ddc2b1a3..9522c2ccb15a 100644 --- a/etc/layout_viewer/css/main.css +++ b/etc/layout_viewer/css/main.css @@ -24,4 +24,6 @@ right: 1em; padding: 1em; border-radius: 1em; + font-weight: bold; + text-align: right; } diff --git a/etc/layout_viewer/viewer.html b/etc/layout_viewer/viewer.html index 3b5671af6042..4edca787bf45 100644 --- a/etc/layout_viewer/viewer.html +++ b/etc/layout_viewer/viewer.html @@ -68,8 +68,13 @@

Servo Layout Viewer

+ < Prev step + | + Next step > +
+
Back to top
@@ -181,6 +186,7 @@

Servo Layout Viewer

$('#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 @@

Servo Layout Viewer

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 @@

Servo Layout Viewer

}); } + 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 @@

Servo Layout Viewer

return false; }; register_toggle_unchanaged_code_handler(); + register_prev_next_trace_node(); });