Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-07-22 23:03:42 +01:00
Code Issues Projects Releases Packages Wiki Activity

Auto merge of #13829 - shinglyu:layout_viewer, r=mbrubeck

Browse source 
Layout viewer fixes

<!-- Please describe your changes on the following line: -->

This is a followup for #13432. This patch should be landed after #13740 to accommodate the change in JSON format in #13740. It also included some UI layout fixes to make the UI more readable. I'm splitting the commits for easier review, I'll squash them after a r+.
---

<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `__` with appropriate data: -->
- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [ ] These changes fix #__ (github issue number if applicable).

<!-- Either: -->
- [ ] There are tests for these changes OR
- [x] These changes do not require tests because it's just a external debug tool

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->

<!-- Reviewable:start -->
---

This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/13829)

<!-- Reviewable:end -->
This commit is contained in:
bors-servo 2016-11-02 18:34:26 -05:00 • committed by GitHub
commit 524ed82700
3 changed files with 32 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,9 +1,17 @@
body {
padding-top: 70px;
padding-bottom: 30px;
}
.primary {
border: 1px solid gray;
border-radius: 8px;
}
.list-group-item {
overflow-wrap: break-word;
}
#trace-tree {
max-height: 80vh;
overflow-y: auto;
}
.hidden-glyphicon {
visibility:hidden;
}

2
etc/layout_viewer/js/bootstrap-treeview.min.js vendored
View file

File diff suppressed because one or more lines are too long

44
etc/layout_viewer/viewer.html
View file

@ -24,24 +24,15 @@
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Servo Layout Debugger</a>
</div>
</div>
</div>
<div class="container" role="main">
<div class="row">
<div class="col-sm-3">
<div class="col-sm-12">
<h1> Servo Layout Viewer </h1>
<p> Check the <a href="https://github.com/servo/servo/blob/master/etc/layout_viewer/README.md">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">
@ -62,7 +53,7 @@
</div>
</div>
</div>
<div class="col-sm-9">
<div class="col-sm-8">
<div class="row">
<div class="col-sm-12">
<div class='panel panel-default'>
@ -94,6 +85,7 @@
text: trace_node.class + " (" + trace_node.data.base.id + ")",
id: trace_node.data.base.id,
icon: "dummy",
href: "#diff-" + trace_node.data.base.id
};
var children = [];
@ -131,8 +123,8 @@
}
function create_tree_node(trace_node) {
var pre_trace = flatten_trace(JSON.parse(trace_node.pre));
var post_trace = flatten_trace(JSON.parse(trace_node.post));
var pre_trace = flatten_trace(trace_node.pre);
var post_trace = flatten_trace(trace_node.post);
var tree_node = {
text: trace_node.name,
@ -192,13 +184,13 @@
if (delta !== undefined) {
var diff_id = "diff-" + key;
$("#flow-diffs").append(
"<div class='panel panel-default'><div class='panel-heading'>" +
flow_left.class + " (" + key + ")" +
"</div><div class='panel-body' id=" +
diff_id +
"></div></div>");
"<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).innerHTML =
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 {
@ -207,7 +199,7 @@
}
update_flow_tree_bgcolor(node.flow_tree, node_color_hash);
$('#flow-tree').treeview({data: [node.flow_tree], levels: 100});
$('#flow-tree').treeview({data: [node.flow_tree], levels: 100, enableLinks: true, emptyIcon: "glyphicon glyphicon-unchecked hidden-glyphicon"});
});
}