mirror of
https://github.com/servo/servo.git
synced 2025-08-03 20:50:07 +01:00
Fix rebase issues and run Prettier on layout viewer code
This commit is contained in:
Fernando Jiménez Moreno
parent
a042f85083
commit
c4276aa27e
6 changed files with 380 additions and 331 deletions
|
|
@ -9,8 +9,7 @@ use crate::flow::float::{FloatBox, FloatContext};
|
|||
use crate::flow::inline::InlineFormattingContext;
|
||||
use crate::formatting_contexts::{IndependentFormattingContext, IndependentLayout, NonReplacedIFC};
|
||||
use crate::fragments::{AnonymousFragment, BoxFragment};
|
||||
use crate::fragments::{CollapsedBlockMargins, CollapsedMargin};
|
||||
use crate::fragments::{DebugId, Fragment};
|
||||
use crate::fragments::{CollapsedBlockMargins, CollapsedMargin, Fragment};
|
||||
use crate::geom::flow_relative::{Rect, Sides, Vec2};
|
||||
use crate::positioned::{AbsolutelyPositionedBox, PositioningContext};
|
||||
use crate::replaced::ReplacedContent;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
use crate::context::LayoutContext;
|
||||
use crate::dom_traversal::{Contents, NodeExt};
|
||||
use crate::formatting_contexts::IndependentFormattingContext;
|
||||
use crate::fragments::{AnonymousFragment, BoxFragment, CollapsedBlockMargins, DebugId, Fragment};
|
||||
use crate::fragments::{AnonymousFragment, BoxFragment, CollapsedBlockMargins, Fragment};
|
||||
use crate::geom::flow_relative::{Rect, Sides, Vec2};
|
||||
use crate::sizing::ContentSizesRequest;
|
||||
use crate::style_ext::{ComputedValuesExt, DisplayInside};
|
||||
|
|
|
|||
|
|
@ -166,7 +166,7 @@ impl LayoutRPC for LayoutRPCImpl {
|
|||
|
||||
pub fn process_content_box_request(
|
||||
requested_node: OpaqueNode,
|
||||
fragment_tree_root: Option<&FragmentTreeRoot>,
|
||||
fragment_tree_root: Option<Arc<FragmentTreeRoot>>,
|
||||
) -> Option<Rect<Au>> {
|
||||
let fragment_tree_root = match fragment_tree_root {
|
||||
Some(fragment_tree_root) => fragment_tree_root,
|
||||
|
|
@ -182,7 +182,7 @@ pub fn process_content_boxes_request(_requested_node: OpaqueNode) -> Vec<Rect<Au
|
|||
|
||||
pub fn process_node_geometry_request(
|
||||
requested_node: OpaqueNode,
|
||||
fragment_tree_root: Option<&FragmentTreeRoot>,
|
||||
fragment_tree_root: Option<Arc<FragmentTreeRoot>>,
|
||||
) -> Rect<i32> {
|
||||
let fragment_tree_root = match fragment_tree_root {
|
||||
Some(fragment_tree_root) => fragment_tree_root,
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ pub(crate) struct ReplacedContent {
|
|||
///
|
||||
/// * For SVG, see https://svgwg.org/svg2-draft/coords.html#SizingSVGInCSS
|
||||
/// and again https://github.com/w3c/csswg-drafts/issues/4572.
|
||||
#[derive(Debug)]
|
||||
#[derive(Debug, Serialize)]
|
||||
pub(crate) struct IntrinsicSizes {
|
||||
pub width: Option<Length>,
|
||||
pub height: Option<Length>,
|
||||
|
|
|
|||
|
|
@ -1235,10 +1235,8 @@ impl LayoutThread {
|
|||
match *reflow_goal {
|
||||
ReflowGoal::LayoutQuery(ref querymsg, _) => match querymsg {
|
||||
&QueryMsg::ContentBoxQuery(node) => {
|
||||
rw_data.content_box_response = process_content_box_request(
|
||||
node,
|
||||
(&*self.fragment_tree_root.borrow()).as_ref(),
|
||||
);
|
||||
rw_data.content_box_response =
|
||||
process_content_box_request(node, self.fragment_tree_root.borrow().clone());
|
||||
},
|
||||
&QueryMsg::ContentBoxesQuery(node) => {
|
||||
rw_data.content_boxes_response = process_content_boxes_request(node);
|
||||
|
|
@ -1253,7 +1251,7 @@ impl LayoutThread {
|
|||
&QueryMsg::ClientRectQuery(node) => {
|
||||
rw_data.client_rect_response = process_node_geometry_request(
|
||||
node,
|
||||
(&*self.fragment_tree_root.borrow()).as_ref(),
|
||||
self.fragment_tree_root.borrow().clone(),
|
||||
);
|
||||
},
|
||||
&QueryMsg::NodeScrollGeometryQuery(node) => {
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
<!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">
|
||||
<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">
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet" />
|
||||
|
||||
<!-- Treeview -->
|
||||
<link href="css/bootstrap-treeview.min.css" rel="stylesheet">
|
||||
<link href="css/bootstrap-treeview.min.css" rel="stylesheet" />
|
||||
|
||||
<!-- JSDiffPatch -->
|
||||
<link href="css/formatters/html.css" rel="stylesheet">
|
||||
<link href="css/formatters/html.css" rel="stylesheet" />
|
||||
|
||||
<!-- Custom -->
|
||||
<link href="css/main.css" rel="stylesheet">
|
||||
<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>
|
||||
|
|
@ -27,8 +27,15 @@
|
|||
<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/master/etc/layout_viewer/README.md">README</a> for instructions.</p>
|
||||
<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">
|
||||
|
|
@ -36,37 +43,35 @@
|
|||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="well">
|
||||
<input type=file>
|
||||
<input type="file" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div id="trace-tree">
|
||||
</div>
|
||||
<div id="trace-tree"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<ul id="trace-list" class="list-group">
|
||||
</ul>
|
||||
<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'>Box Tree</div>
|
||||
<div class='panel-body' id="box-tree"></div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Box Tree</div>
|
||||
<div class="panel-body" id="box-tree"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class='panel panel-default'>
|
||||
<div class='panel-heading'>Fragment Tree</div>
|
||||
<div class='panel-body' id="fragment-tree"></div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Fragment Tree</div>
|
||||
<div class="panel-body" id="fragment-tree"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
|
|
@ -79,10 +84,10 @@
|
|||
<a href="#" id="prev_trace">< Prev step</a>
|
||||
|
|
||||
<a href="#" id="next_trace">Next step ></a>
|
||||
<br>
|
||||
<br />
|
||||
<input type="checkbox" name="show_unchanged" id="show_unchanged" />
|
||||
<label for="show_unchanged">Show unchanged code</label>
|
||||
<br>
|
||||
<br />
|
||||
<a href="#top">Back to top</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -141,8 +146,8 @@
|
|||
}
|
||||
return {
|
||||
text,
|
||||
nodes,
|
||||
}
|
||||
nodes
|
||||
};
|
||||
}
|
||||
|
||||
function box_tree_from_bfc(bfc) {
|
||||
|
|
@ -151,7 +156,7 @@
|
|||
return {
|
||||
text: "BlockFormattingContext",
|
||||
info: {
|
||||
contains_floats,
|
||||
contains_floats
|
||||
},
|
||||
nodes: [box_tree_from_container(contents)]
|
||||
};
|
||||
|
|
@ -168,7 +173,7 @@
|
|||
|
||||
if (fragment.children) {
|
||||
var children = [];
|
||||
for (var i=0 ; i < fragment.children.length ; ++i) {
|
||||
for (var i = 0; i < fragment.children.length; ++i) {
|
||||
children.push(create_fragment_tree(fragment.children[i]));
|
||||
}
|
||||
|
||||
|
|
@ -188,24 +193,24 @@
|
|||
delete data.debug_id;
|
||||
fragments_info[trace_node.debug_id] = {
|
||||
class: fragmentType,
|
||||
data,
|
||||
data
|
||||
};
|
||||
|
||||
if (trace_node.children) {
|
||||
for (var i=0 ; i < trace_node.children.length ; ++i) {
|
||||
for (var i = 0; i < trace_node.children.length; ++i) {
|
||||
get_fragments_info(trace_node.children[i], fragments_info);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function flatten_trace(trace_node) {
|
||||
const fragment_tree_root = Object.values(trace_node.fragment_tree)[0];
|
||||
const fragment_tree_root = Object.values(trace_node.fragment_tree.children)[0];
|
||||
var fragments_info = {};
|
||||
get_fragments_info(fragment_tree_root, fragments_info);
|
||||
return {
|
||||
fragment_tree: create_fragment_tree(fragment_tree_root),
|
||||
box_tree: box_tree_from_bfc(trace_node.box_tree),
|
||||
fragments_info,
|
||||
fragments_info
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -221,13 +226,13 @@
|
|||
pre_boxes_info: pre_trace.boxes_info,
|
||||
post_boxes_info: post_trace.boxes_info,
|
||||
pre_fragments_info: pre_trace.fragments_info,
|
||||
post_fragments_info: post_trace.fragments_info,
|
||||
post_fragments_info: post_trace.fragments_info
|
||||
};
|
||||
|
||||
var trace_node = Object.values(trace_node)[0];
|
||||
if (trace_node.children) {
|
||||
var children = [];
|
||||
for (var i=0 ; i < trace_node.children.length ; ++i) {
|
||||
for (var i = 0; i < trace_node.children.length; ++i) {
|
||||
children.push(create_trace_tree_node(trace_node.children[i]));
|
||||
}
|
||||
|
||||
|
|
@ -239,11 +244,18 @@
|
|||
return tree_node;
|
||||
}
|
||||
|
||||
function update_fragment_tree_bgcolor(fragment_tree_node, node_color_hash) {
|
||||
fragment_tree_node.backColor = node_color_hash[fragment_tree_node.debug_id];
|
||||
function update_fragment_tree_bgcolor(
|
||||
fragment_tree_node,
|
||||
node_color_hash
|
||||
) {
|
||||
fragment_tree_node.backColor =
|
||||
node_color_hash[fragment_tree_node.debug_id];
|
||||
if (fragment_tree_node.nodes !== undefined) {
|
||||
for (var i=0 ; i < fragment_tree_node.nodes.length ; ++i) {
|
||||
update_fragment_tree_bgcolor(fragment_tree_node.nodes[i], node_color_hash)
|
||||
for (var i = 0; i < fragment_tree_node.nodes.length; ++i) {
|
||||
update_fragment_tree_bgcolor(
|
||||
fragment_tree_node.nodes[i],
|
||||
node_color_hash
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -252,28 +264,34 @@
|
|||
jsondiffpatch.formatters.html.hideUnchanged();
|
||||
|
||||
var node_color_hash = {};
|
||||
var tree = [ create_trace_tree_node(data) ];
|
||||
$('#trace-tree').treeview({data: tree, levels: 3});
|
||||
$('#trace-tree').on('nodeSelected', function(event, node) {
|
||||
var tree = [create_trace_tree_node(data)];
|
||||
$("#trace-tree").treeview({ data: tree, levels: 3 });
|
||||
$("#trace-tree").on("nodeSelected", function(event, node) {
|
||||
$("#fragment-diffs").empty();
|
||||
$('#trace-tree').treeview(true).revealNode(node);
|
||||
$("#trace-tree")
|
||||
.treeview(true)
|
||||
.revealNode(node);
|
||||
|
||||
for (var key in node.pre_fragments_info) {
|
||||
var fragment_info_left = node.pre_fragments_info[key];
|
||||
var fragment_info_right = node.post_fragments_info[key];
|
||||
|
||||
var delta = jsondiffpatch.create({
|
||||
var delta = jsondiffpatch
|
||||
.create({
|
||||
objectHash: function(obj) {
|
||||
return JSON.stringify(obj);
|
||||
}
|
||||
}).diff(fragment_info_left, fragment_info_right);
|
||||
})
|
||||
.diff(fragment_info_left, fragment_info_right);
|
||||
|
||||
if (!delta) {
|
||||
delta = jsondiffpatch.create({
|
||||
delta = jsondiffpatch
|
||||
.create({
|
||||
objectHash: function(obj) {
|
||||
return JSON.stringify(obj);
|
||||
}
|
||||
}).diff({}, fragment_info_right);
|
||||
})
|
||||
.diff({}, fragment_info_right);
|
||||
}
|
||||
|
||||
if (delta !== undefined) {
|
||||
|
|
@ -282,11 +300,21 @@
|
|||
"<div class='panel panel-default' id='" +
|
||||
diff_id +
|
||||
"'><div class='panel-heading'>" +
|
||||
fragment_info_left.class + " (" + key + ")" +
|
||||
"</div><div class='panel-body'></div></div>");
|
||||
fragment_info_left.class +
|
||||
" (" +
|
||||
key +
|
||||
")" +
|
||||
"</div><div class='panel-body'></div></div>"
|
||||
);
|
||||
|
||||
document.getElementById(diff_id).getElementsByClassName('panel-body')[0].innerHTML =
|
||||
jsondiffpatch.formatters.html.format(delta, fragment_info_left);
|
||||
document
|
||||
.getElementById(diff_id)
|
||||
.getElementsByClassName(
|
||||
"panel-body"
|
||||
)[0].innerHTML = jsondiffpatch.formatters.html.format(
|
||||
delta,
|
||||
fragment_info_left
|
||||
);
|
||||
node_color_hash[key] = "rgba(255, 0, 0, 0.7)";
|
||||
} else {
|
||||
node_color_hash[key] = "rgb(212, 248, 212)";
|
||||
|
|
@ -294,43 +322,67 @@
|
|||
}
|
||||
|
||||
update_fragment_tree_bgcolor(node.fragment_tree, node_color_hash);
|
||||
$('#fragment-tree').treeview({data: [node.fragment_tree], levels: 100, enableLinks: true, emptyIcon: "glyphicon glyphicon-unchecked hidden-glyphicon"});
|
||||
$('#box-tree').treeview({data: [node.box_tree], levels: 100, enableLinks: true, emptyIcon: "glyphicon glyphicon-unchecked hidden-glyphicon"});
|
||||
$("#fragment-tree").treeview({
|
||||
data: [node.fragment_tree],
|
||||
levels: 100,
|
||||
enableLinks: true,
|
||||
emptyIcon: "glyphicon glyphicon-unchecked hidden-glyphicon"
|
||||
});
|
||||
$("#box-tree").treeview({
|
||||
data: [node.box_tree],
|
||||
levels: 100,
|
||||
enableLinks: true,
|
||||
emptyIcon: "glyphicon glyphicon-unchecked hidden-glyphicon"
|
||||
});
|
||||
});
|
||||
|
||||
$('#trace-tree').treeview(true).selectNode(0);
|
||||
$("#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);
|
||||
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;
|
||||
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);
|
||||
$("#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);
|
||||
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) {
|
||||
$(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) {
|
||||
reader.onload = function(event) {
|
||||
new_data_loaded(JSON.parse(event.target.result));
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue