Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-04 05:00:08 +01:00
Code Issues Projects Releases Packages Wiki Activity

Fix rebase issues and run Prettier on layout viewer code

Browse source
This commit is contained in:
Fernando Jiménez Moreno 2020-02-17 16:38:23 +01:00
parent a042f85083
commit c4276aa27e
6 changed files with 380 additions and 331 deletions
Download patch file Download diff file Expand all files Collapse all files

3
components/layout_2020/flow/mod.rs
View file

@ -9,8 +9,7 @@ use crate::flow::float::{FloatBox, FloatContext};
use crate::flow::inline::InlineFormattingContext; use crate::flow::inline::InlineFormattingContext;
use crate::formatting_contexts::{IndependentFormattingContext, IndependentLayout, NonReplacedIFC}; use crate::formatting_contexts::{IndependentFormattingContext, IndependentLayout, NonReplacedIFC};
use crate::fragments::{AnonymousFragment, BoxFragment}; use crate::fragments::{AnonymousFragment, BoxFragment};
use crate::fragments::{CollapsedBlockMargins, CollapsedMargin}; use crate::fragments::{CollapsedBlockMargins, CollapsedMargin, Fragment};
use crate::fragments::{DebugId, Fragment};
use crate::geom::flow_relative::{Rect, Sides, Vec2}; use crate::geom::flow_relative::{Rect, Sides, Vec2};
use crate::positioned::{AbsolutelyPositionedBox, PositioningContext}; use crate::positioned::{AbsolutelyPositionedBox, PositioningContext};
use crate::replaced::ReplacedContent; use crate::replaced::ReplacedContent;

2
components/layout_2020/positioned.rs
View file

@ -5,7 +5,7 @@
use crate::context::LayoutContext; use crate::context::LayoutContext;
use crate::dom_traversal::{Contents, NodeExt}; use crate::dom_traversal::{Contents, NodeExt};
use crate::formatting_contexts::IndependentFormattingContext; 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::geom::flow_relative::{Rect, Sides, Vec2};
use crate::sizing::ContentSizesRequest; use crate::sizing::ContentSizesRequest;
use crate::style_ext::{ComputedValuesExt, DisplayInside}; use crate::style_ext::{ComputedValuesExt, DisplayInside};

4
components/layout_2020/query.rs
View file

@ -166,7 +166,7 @@ impl LayoutRPC for LayoutRPCImpl {
pub fn process_content_box_request( pub fn process_content_box_request(
requested_node: OpaqueNode, requested_node: OpaqueNode,
fragment_tree_root: Option<&FragmentTreeRoot>, fragment_tree_root: Option<Arc<FragmentTreeRoot>>,
) -> Option<Rect<Au>> { ) -> Option<Rect<Au>> {
let fragment_tree_root = match fragment_tree_root { let fragment_tree_root = match fragment_tree_root {
Some(fragment_tree_root) => 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( pub fn process_node_geometry_request(
requested_node: OpaqueNode, requested_node: OpaqueNode,
fragment_tree_root: Option<&FragmentTreeRoot>, fragment_tree_root: Option<Arc<FragmentTreeRoot>>,
) -> Rect<i32> { ) -> Rect<i32> {
let fragment_tree_root = match fragment_tree_root { let fragment_tree_root = match fragment_tree_root {
Some(fragment_tree_root) => fragment_tree_root, Some(fragment_tree_root) => fragment_tree_root,

2
components/layout_2020/replaced.rs
View file

@ -34,7 +34,7 @@ pub(crate) struct ReplacedContent {
/// ///
/// * For SVG, see https://svgwg.org/svg2-draft/coords.html#SizingSVGInCSS /// * For SVG, see https://svgwg.org/svg2-draft/coords.html#SizingSVGInCSS
/// and again https://github.com/w3c/csswg-drafts/issues/4572. /// and again https://github.com/w3c/csswg-drafts/issues/4572.
#[derive(Debug)] #[derive(Debug, Serialize)]
pub(crate) struct IntrinsicSizes { pub(crate) struct IntrinsicSizes {
pub width: Option<Length>, pub width: Option<Length>,
pub height: Option<Length>, pub height: Option<Length>,

8
components/layout_thread_2020/lib.rs
View file

@ -1235,10 +1235,8 @@ impl LayoutThread {
match *reflow_goal { match *reflow_goal {
ReflowGoal::LayoutQuery(ref querymsg, _) => match querymsg { ReflowGoal::LayoutQuery(ref querymsg, _) => match querymsg {
&QueryMsg::ContentBoxQuery(node) => { &QueryMsg::ContentBoxQuery(node) => {
rw_data.content_box_response = process_content_box_request( rw_data.content_box_response =
node, process_content_box_request(node, self.fragment_tree_root.borrow().clone());
(&*self.fragment_tree_root.borrow()).as_ref(),
);
}, },
&QueryMsg::ContentBoxesQuery(node) => { &QueryMsg::ContentBoxesQuery(node) => {
rw_data.content_boxes_response = process_content_boxes_request(node); rw_data.content_boxes_response = process_content_boxes_request(node);
@ -1253,7 +1251,7 @@ impl LayoutThread {
&QueryMsg::ClientRectQuery(node) => { &QueryMsg::ClientRectQuery(node) => {
rw_data.client_rect_response = process_node_geometry_request( rw_data.client_rect_response = process_node_geometry_request(
node, node,
(&*self.fragment_tree_root.borrow()).as_ref(), self.fragment_tree_root.borrow().clone(),
); );
}, },
&QueryMsg::NodeScrollGeometryQuery(node) => { &QueryMsg::NodeScrollGeometryQuery(node) => {

154
etc/layout_viewer/viewer.html
View file

@ -1,22 +1,22 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Servo Layout Debugger</title> <title>Servo Layout Debugger</title>
<!-- Bootstrap --> <!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap.min.css" rel="stylesheet" />
<!-- Treeview --> <!-- Treeview -->
<link href="css/bootstrap-treeview.min.css" rel="stylesheet"> <link href="css/bootstrap-treeview.min.css" rel="stylesheet" />
<!-- JSDiffPatch --> <!-- JSDiffPatch -->
<link href="css/formatters/html.css" rel="stylesheet"> <link href="css/formatters/html.css" rel="stylesheet" />
<!-- Custom --> <!-- Custom -->
<link href="css/main.css" rel="stylesheet"> <link href="css/main.css" rel="stylesheet" />
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
@ -28,7 +28,14 @@
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12">
<h1>Servo Layout Viewer</h1> <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> <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> </div>
<div class="row"> <div class="row">
@ -36,37 +43,35 @@
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12">
<div class="well"> <div class="well">
<input type=file> <input type="file" />
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12">
<div id="trace-tree"> <div id="trace-tree"></div>
</div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12">
<ul id="trace-list" class="list-group"> <ul id="trace-list" class="list-group"></ul>
</ul>
</div> </div>
</div> </div>
</div> </div>
<div class="col-sm-8"> <div class="col-sm-8">
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12">
<div class='panel panel-default'> <div class="panel panel-default">
<div class='panel-heading'>Box Tree</div> <div class="panel-heading">Box Tree</div>
<div class='panel-body' id="box-tree"></div> <div class="panel-body" id="box-tree"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12">
<div class='panel panel-default'> <div class="panel panel-default">
<div class='panel-heading'>Fragment Tree</div> <div class="panel-heading">Fragment Tree</div>
<div class='panel-body' id="fragment-tree"></div> <div class="panel-body" id="fragment-tree"></div>
</div> </div>
</div> </div>
<div class="col-sm-12"> <div class="col-sm-12">
@ -79,10 +84,10 @@
<a href="#" id="prev_trace">< Prev step</a> <a href="#" id="prev_trace">< Prev step</a>
| |
<a href="#" id="next_trace">Next step ></a> <a href="#" id="next_trace">Next step ></a>
<br> <br />
<input type="checkbox" name="show_unchanged" id="show_unchanged" /> <input type="checkbox" name="show_unchanged" id="show_unchanged" />
<label for="show_unchanged">Show unchanged code</label> <label for="show_unchanged">Show unchanged code</label>
<br> <br />
<a href="#top">Back to top</a> <a href="#top">Back to top</a>
</div> </div>
</div> </div>
@ -141,8 +146,8 @@
} }
return { return {
text, text,
nodes, nodes
} };
} }
function box_tree_from_bfc(bfc) { function box_tree_from_bfc(bfc) {
@ -151,7 +156,7 @@
return { return {
text: "BlockFormattingContext", text: "BlockFormattingContext",
info: { info: {
contains_floats, contains_floats
}, },
nodes: [box_tree_from_container(contents)] nodes: [box_tree_from_container(contents)]
}; };
@ -188,7 +193,7 @@
delete data.debug_id; delete data.debug_id;
fragments_info[trace_node.debug_id] = { fragments_info[trace_node.debug_id] = {
class: fragmentType, class: fragmentType,
data, data
}; };
if (trace_node.children) { if (trace_node.children) {
@ -199,13 +204,13 @@
} }
function flatten_trace(trace_node) { 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 = {}; var fragments_info = {};
get_fragments_info(fragment_tree_root, fragments_info); get_fragments_info(fragment_tree_root, fragments_info);
return { return {
fragment_tree: create_fragment_tree(fragment_tree_root), fragment_tree: create_fragment_tree(fragment_tree_root),
box_tree: box_tree_from_bfc(trace_node.box_tree), box_tree: box_tree_from_bfc(trace_node.box_tree),
fragments_info, fragments_info
}; };
} }
@ -221,7 +226,7 @@
pre_boxes_info: pre_trace.boxes_info, pre_boxes_info: pre_trace.boxes_info,
post_boxes_info: post_trace.boxes_info, post_boxes_info: post_trace.boxes_info,
pre_fragments_info: pre_trace.fragments_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]; var trace_node = Object.values(trace_node)[0];
@ -239,11 +244,18 @@
return tree_node; return tree_node;
} }
function update_fragment_tree_bgcolor(fragment_tree_node, node_color_hash) { function update_fragment_tree_bgcolor(
fragment_tree_node.backColor = node_color_hash[fragment_tree_node.debug_id]; fragment_tree_node,
node_color_hash
) {
fragment_tree_node.backColor =
node_color_hash[fragment_tree_node.debug_id];
if (fragment_tree_node.nodes !== undefined) { if (fragment_tree_node.nodes !== undefined) {
for (var i = 0; i < fragment_tree_node.nodes.length; ++i) { for (var i = 0; i < fragment_tree_node.nodes.length; ++i) {
update_fragment_tree_bgcolor(fragment_tree_node.nodes[i], node_color_hash) update_fragment_tree_bgcolor(
fragment_tree_node.nodes[i],
node_color_hash
);
} }
} }
} }
@ -253,27 +265,33 @@
var node_color_hash = {}; var node_color_hash = {};
var tree = [create_trace_tree_node(data)]; var tree = [create_trace_tree_node(data)];
$('#trace-tree').treeview({data: tree, levels: 3}); $("#trace-tree").treeview({ data: tree, levels: 3 });
$('#trace-tree').on('nodeSelected', function(event, node) { $("#trace-tree").on("nodeSelected", function(event, node) {
$("#fragment-diffs").empty(); $("#fragment-diffs").empty();
$('#trace-tree').treeview(true).revealNode(node); $("#trace-tree")
.treeview(true)
.revealNode(node);
for (var key in node.pre_fragments_info) { for (var key in node.pre_fragments_info) {
var fragment_info_left = node.pre_fragments_info[key]; var fragment_info_left = node.pre_fragments_info[key];
var fragment_info_right = node.post_fragments_info[key]; var fragment_info_right = node.post_fragments_info[key];
var delta = jsondiffpatch.create({ var delta = jsondiffpatch
.create({
objectHash: function(obj) { objectHash: function(obj) {
return JSON.stringify(obj); return JSON.stringify(obj);
} }
}).diff(fragment_info_left, fragment_info_right); })
.diff(fragment_info_left, fragment_info_right);
if (!delta) { if (!delta) {
delta = jsondiffpatch.create({ delta = jsondiffpatch
.create({
objectHash: function(obj) { objectHash: function(obj) {
return JSON.stringify(obj); return JSON.stringify(obj);
} }
}).diff({}, fragment_info_right); })
.diff({}, fragment_info_right);
} }
if (delta !== undefined) { if (delta !== undefined) {
@ -282,11 +300,21 @@
"<div class='panel panel-default' id='" + "<div class='panel panel-default' id='" +
diff_id + diff_id +
"'><div class='panel-heading'>" + "'><div class='panel-heading'>" +
fragment_info_left.class + " (" + key + ")" + fragment_info_left.class +
"</div><div class='panel-body'></div></div>"); " (" +
key +
")" +
"</div><div class='panel-body'></div></div>"
);
document.getElementById(diff_id).getElementsByClassName('panel-body')[0].innerHTML = document
jsondiffpatch.formatters.html.format(delta, fragment_info_left); .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)"; node_color_hash[key] = "rgba(255, 0, 0, 0.7)";
} else { } else {
node_color_hash[key] = "rgb(212, 248, 212)"; node_color_hash[key] = "rgb(212, 248, 212)";
@ -294,17 +322,33 @@
} }
update_fragment_tree_bgcolor(node.fragment_tree, node_color_hash); 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"}); $("#fragment-tree").treeview({
$('#box-tree').treeview({data: [node.box_tree], levels: 100, enableLinks: true, emptyIcon: "glyphicon glyphicon-unchecked hidden-glyphicon"}); 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() { function register_toggle_unchanaged_code_handler() {
var show_unchange_box = document.getElementById("show_unchanged"); var show_unchange_box = document.getElementById("show_unchanged");
show_unchange_box.addEventListener("change", function(evt) { show_unchange_box.addEventListener("change", function(evt) {
jsondiffpatch.formatters.html.showUnchanged(show_unchange_box.checked, null, 800); jsondiffpatch.formatters.html.showUnchanged(
show_unchange_box.checked,
null,
800
);
}); });
} }
@ -312,19 +356,27 @@
var prev_btn = document.getElementById("prev_trace"); var prev_btn = document.getElementById("prev_trace");
var next_btn = document.getElementById("next_trace"); var next_btn = document.getElementById("next_trace");
prev_btn.addEventListener("click", function(evt) { prev_btn.addEventListener("click", function(evt) {
var node_id = $("#trace-tree").treeview(true).getSelected()[0].nodeId; var node_id = $("#trace-tree")
.treeview(true)
.getSelected()[0].nodeId;
// We deliberatly choose to ignore the node_id out of bound case, // We deliberatly choose to ignore the node_id out of bound case,
// since it won't break the UI usability // 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) { next_btn.addEventListener("click", function(evt) {
var node_id = $("#trace-tree").treeview(true).getSelected()[0].nodeId; var node_id = $("#trace-tree")
$("#trace-tree").treeview(true).selectNode(node_id + 1); .treeview(true)
.getSelected()[0].nodeId;
$("#trace-tree")
.treeview(true)
.selectNode(node_id + 1);
}); });
} }
$(document).ready(function() { $(document).ready(function() {
var upload = document.getElementsByTagName('input')[0]; var upload = document.getElementsByTagName("input")[0];
upload.onchange = function(e) { upload.onchange = function(e) {
e.preventDefault(); e.preventDefault();