| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>Servo Layout Debugger</title> |
| |
| <!-- Bootstrap --> |
| <link href="css/bootstrap.min.css" rel="stylesheet"> |
| |
| <!-- Treeview --> |
| <link href="css/bootstrap-treeview.min.css" rel="stylesheet"> |
| |
| <!-- JSDiffPatch --> |
| <link href="css/formatters/html.css" rel="stylesheet"> |
| |
| <!-- Custom --> |
| <link href="css/main.css" rel="stylesheet"> |
| |
| <!--[if lt IE 9]> |
| <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> |
| <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> |
| <![endif]--> |
| </head> |
| <body> |
| <div class="container" role="main"> |
| <div class="row"> |
| <div class="col-sm-12"> |
| <h1> Servo Layout Viewer </h1> |
| <p> Check the <a href="https://github.com/servo/servo/blob/main/etc/layout_viewer/README">README</a> for instructions.</p> |
| </div> |
| </div> |
| <div class="row"> |
| <div class="col-sm-4"> |
| <div class="row"> |
| <div class="col-sm-12"> |
| <div class="well"> |
| <input type=file> |
| </div> |
| </div> |
| </div> |
| <div class="row"> |
| <div class="col-sm-12"> |
| <div id="trace-tree"> |
| </div> |
| </div> |
| </div> |
| <div class="row"> |
| <div class="col-sm-12"> |
| <ul id="trace-list" class="list-group"> |
| </ul> |
| </div> |
| </div> |
| </div> |
| <div class="col-sm-8"> |
| <div class="row"> |
| <div class="col-sm-12"> |
| <div class='panel panel-default'> |
| <div class='panel-heading'>Flow Tree</div> |
| <div class='panel-body' id="flow-tree"></div> |
| </div> |
| </div> |
| <div class="col-sm-12"> |
| <div id="flow-diffs"></div> |
| </div> |
| </div> |
| </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> |
| |
| <!-- jQuery --> |
| <script src="js/jquery.min.js"></script> |
| <!-- Bootstrap --> |
| <script src="js/bootstrap.min.js"></script> |
| <!-- Treeview --> |
| <script src="js/bootstrap-treeview.min.js"></script> |
| <!-- JSDiffPatch --> |
| <script src="js/bundle.min.js"></script> |
| <script src="js/formatters.min.js"></script> |
| |
| <script> |
| function get_base(trace_node) { |
| if (typeof(trace_node.data.base) == "undefined" && typeof(trace_node.data.block_flow) != "undefined") { |
| return trace_node.data.block_flow.base; |
| } |
| else { |
| return trace_node.data.base; |
| } |
| } |
| |
| function create_flow_tree(trace_node) { |
| var base = get_base(trace_node); |
| |
| var node = { |
| text: trace_node.class + " (" + base.id + ")", |
| id: base.id, |
| icon: "dummy", |
| href: "#diff-" + base.id |
| }; |
| |
| var children = []; |
| for (var i=0 ; i < base.children.length ; ++i) { |
| children.push(create_flow_tree(base.children[i])); |
| } |
| |
| if (children.length > 0) { |
| node.nodes = children; |
| } |
| |
| return node; |
| } |
| |
| function create_flow_hash(trace_node, flow_hash) { |
| var base = get_base(trace_node); |
| flow_hash[base.id] = trace_node; |
| |
| for (var i=0 ; i < base.children.length ; ++i) { |
| create_flow_hash(base.children[i], flow_hash); |
| } |
| |
| delete base.children; |
| } |
| |
| function flatten_trace(trace_node) { |
| var flow_tree = create_flow_tree(trace_node.children[0]); |
| |
| var flow_hash = {}; |
| create_flow_hash(trace_node.children[0], flow_hash); |
| |
| return { |
| tree: flow_tree, |
| flows: flow_hash, |
| } |
| } |
| |
| function create_tree_node(trace_node) { |
| var pre_trace = flatten_trace(trace_node.pre); |
| var post_trace = flatten_trace(trace_node.post); |
| |
| var tree_node = { |
| text: trace_node.name, |
| icon: "dummy", |
| flow_tree: pre_trace.tree, // assume pre/post trace always have same tree! |
| pre: pre_trace.flows, |
| post: post_trace.flows, |
| }; |
| |
| var children = []; |
| |
| for (var i=0 ; i < trace_node.children.length ; ++i) { |
| children.push(create_tree_node(trace_node.children[i])); |
| } |
| |
| if (children.length > 0) { |
| tree_node.nodes = children; |
| } |
| |
| return tree_node; |
| } |
| |
| function update_flow_tree_bgcolor(flow_tree_node, node_color_hash) { |
| flow_tree_node.backColor = node_color_hash[flow_tree_node.id]; |
| if (flow_tree_node.nodes !== undefined) { |
| for (var i=0 ; i < flow_tree_node.nodes.length ; ++i) { |
| update_flow_tree_bgcolor(flow_tree_node.nodes[i], node_color_hash) |
| } |
| } |
| } |
| |
| function new_data_loaded(data) { |
| jsondiffpatch.formatters.html.hideUnchanged(); |
| |
| var node_color_hash = {}; |
| var tree = [ create_tree_node(data) ]; |
| $('#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]; |
| var flow_right = node.post[key]; |
| |
| var delta = jsondiffpatch.create({ |
| objectHash: function(obj) { |
| if (obj.data !== undefined && obj.data.base !== undefined) { |
| return obj.data.base.id; |
| } |
| if (obj.id !== undefined) { |
| return obj.id; |
| } |
| if (obj.index !== undefined) { |
| // FlexItem and FlexLine |
| return obj.index; |
| } |
| return JSON.stringify(obj); |
| } |
| }).diff(flow_left, flow_right); |
| |
| if (delta !== undefined) { |
| var diff_id = "diff-" + key; |
| $("#flow-diffs").append( |
| "<div class='panel panel-default' id='" + |
| diff_id + |
| "'><div class='panel-heading'>" + |
| flow_left.class + " (" + key + ")" + |
| "</div><div class='panel-body'></div></div>"); |
| |
| document.getElementById(diff_id).getElementsByClassName('panel-body')[0].innerHTML = |
| jsondiffpatch.formatters.html.format(delta, flow_left); |
| node_color_hash[key] = "rgba(255, 0, 0, 0.7)"; |
| } else { |
| node_color_hash[key] = "rgb(212, 248, 212)"; |
| } |
| } |
| |
| 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() { |
| var show_unchange_box = document.getElementById("show_unchanged"); |
| show_unchange_box.addEventListener("change", function(evt){ |
| jsondiffpatch.formatters.html.showUnchanged(show_unchange_box.checked, null, 800); |
| }); |
| } |
| |
| 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) { |
| e.preventDefault(); |
| |
| var file = upload.files[0], |
| reader = new FileReader(); |
| reader.onload = function (event) { |
| new_data_loaded(JSON.parse(event.target.result)); |
| }; |
| |
| reader.readAsText(file); |
| return false; |
| }; |
| register_toggle_unchanaged_code_handler(); |
| register_prev_next_trace_node(); |
| }); |
| </script> |
| </body> |
| </html> |
