diff options
| author | Shing Lyu <shing.lyu@gmail.com> | 2016-11-08 13:26:12 +0800 |
|---|---|---|
| committer | Shing Lyu <shing.lyu@gmail.com> | 2016-12-28 15:31:48 +0800 |
| commit | 344ad61f2cbb0e18ca4fe80bf8b24ab3b05c42de (patch) | |
| tree | 49e0ba316d96ee008b558ec53b137d5fa252e3e2 /etc/layout_viewer | |
| parent | fe82d277cd8fd41c67c59991765e89720a42baa7 (diff) | |
| download | servo-344ad61f2cbb0e18ca4fe80bf8b24ab3b05c42de.tar.gz servo-344ad61f2cbb0e18ca4fe80bf8b24ab3b05c42de.zip | |
Added a toolbar for going to previous and next node
Diffstat (limited to 'etc/layout_viewer')
| -rw-r--r-- | etc/layout_viewer/css/main.css | 2 | ||||
| -rw-r--r-- | etc/layout_viewer/viewer.html | 24 |
2 files changed, 26 insertions, 0 deletions
diff --git a/etc/layout_viewer/css/main.css b/etc/layout_viewer/css/main.css index d339ddc2b1a..9522c2ccb15 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 3b5671af604..4edca787bf4 100644 --- a/etc/layout_viewer/viewer.html +++ b/etc/layout_viewer/viewer.html @@ -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> |