From 4b2d80afcfb418bcb635a4e123c8c95289cf32d9 Mon Sep 17 00:00:00 2001 From: Shing Lyu Date: Thu, 20 Oct 2016 15:20:06 +0800 Subject: [PATCH 1/4] Activate flexbox layout tracing --- components/layout/flex.rs | 10 +++++----- components/layout/flow_list.rs | 15 ++++++++------- components/layout/model.rs | 2 +- components/style/logical_geometry.rs | 1 + 4 files changed, 15 insertions(+), 13 deletions(-) diff --git a/components/layout/flex.rs b/components/layout/flex.rs index 7b169674363..ef10ad5425e 100644 --- a/components/layout/flex.rs +++ b/components/layout/flex.rs @@ -35,7 +35,7 @@ use style::values::computed::{LengthOrPercentageOrAutoOrContent, LengthOrPercent /// The size of an axis. May be a specified size, a min/max /// constraint, or an unlimited size -#[derive(Debug)] +#[derive(Debug, Serialize)] enum AxisSize { Definite(Au), MinMax(SizeConstraint), @@ -102,7 +102,7 @@ fn from_flex_basis(flex_basis: LengthOrPercentageOrAutoOrContent, /// Represents a child in a flex container. Most fields here are used in /// flex size resolving, and items are sorted by the 'order' property. -#[derive(Debug)] +#[derive(Debug, Serialize)] struct FlexItem { /// Main size of a flex item, used to store results of flexible length calcuation. pub main_size: Au, @@ -240,7 +240,7 @@ impl FlexItem { /// A line in a flex container. // TODO(stshine): More fields are required to handle collapsed items and baseline alignment. -#[derive(Debug)] +#[derive(Debug, Serialize)] struct FlexLine { /// Range of items belong to this line in 'self.items'. pub range: Range, @@ -330,7 +330,7 @@ impl FlexLine { } /// A block with the CSS `display` property equal to `flex`. -#[derive(Debug)] +#[derive(Debug, Serialize)] pub struct FlexFlow { /// Data common to all block flows. block_flow: BlockFlow, @@ -496,7 +496,7 @@ impl FlexFlow { inline_end_content_edge: Au, content_inline_size: Au) { let _scope = layout_debug_scope!("flex::block_mode_assign_inline_sizes"); - debug!("block_mode_assign_inline_sizes"); + debug!("flex::block_mode_assign_inline_sizes"); // FIXME (mbrubeck): Get correct mode for absolute containing block let containing_block_mode = self.block_flow.base.writing_mode; diff --git a/components/layout/flow_list.rs b/components/layout/flow_list.rs index 8fd32af60f4..713d6807082 100644 --- a/components/layout/flow_list.rs +++ b/components/layout/flow_list.rs @@ -30,15 +30,16 @@ impl Serialize for FlowList { let flow_val = ObjectBuilder::new() .insert("class", f.class()) .insert("data", match f.class() { - FlowClass::Block => to_value(f.as_block()), - FlowClass::Inline => to_value(f.as_inline()), - FlowClass::Table => to_value(f.as_table()), - FlowClass::TableWrapper => to_value(f.as_table_wrapper()), + FlowClass::Block => to_value(f.as_block()), + FlowClass::Inline => to_value(f.as_inline()), + FlowClass::Table => to_value(f.as_table()), + FlowClass::TableWrapper => to_value(f.as_table_wrapper()), FlowClass::TableRowGroup => to_value(f.as_table_rowgroup()), - FlowClass::TableRow => to_value(f.as_table_row()), - FlowClass::TableCell => to_value(f.as_table_cell()), + FlowClass::TableRow => to_value(f.as_table_row()), + FlowClass::TableCell => to_value(f.as_table_cell()), + FlowClass::Flex => to_value(f.as_flex()), FlowClass::ListItem | FlowClass::TableColGroup | FlowClass::TableCaption | - FlowClass::Multicol | FlowClass::MulticolColumn | FlowClass::Flex => { + FlowClass::Multicol | FlowClass::MulticolColumn => { Value::Null // Not implemented yet } }) diff --git a/components/layout/model.rs b/components/layout/model.rs index 89847e0190b..8382c9af7d0 100644 --- a/components/layout/model.rs +++ b/components/layout/model.rs @@ -523,7 +523,7 @@ impl ToGfxMatrix for ComputedMatrix { /// parameter, and when it is present the constraint will be subtracted. This is /// used to adjust the constraint for `box-sizing: border-box`, and when you do so /// make sure the size you want to clamp is intended to be used for content box. -#[derive(Clone, Copy, Debug)] +#[derive(Clone, Copy, Debug, Serialize)] pub struct SizeConstraint { min_size: Au, max_size: Option, diff --git a/components/style/logical_geometry.rs b/components/style/logical_geometry.rs index 242a061b0da..badbb6851ee 100644 --- a/components/style/logical_geometry.rs +++ b/components/style/logical_geometry.rs @@ -215,6 +215,7 @@ impl Debug for DebugWritingMode { // Used to specify the logical direction. #[derive(Debug, Clone, Copy, PartialEq)] +#[cfg_attr(feature = "servo", derive(Serialize))] pub enum Direction { Inline, Block From 22ffdf8018e5b2707c2dfba06c39e875eabf8654 Mon Sep 17 00:00:00 2001 From: Shing Lyu Date: Tue, 8 Nov 2016 11:21:27 +0800 Subject: [PATCH 2/4] Fix flexbox trace loading problem in layout_viewer --- etc/layout_viewer/viewer.html | 34 +++++++++++++++++++++++++--------- 1 file changed, 25 insertions(+), 9 deletions(-) diff --git a/etc/layout_viewer/viewer.html b/etc/layout_viewer/viewer.html index 7e80756ade7..a6ea86d3c36 100644 --- a/etc/layout_viewer/viewer.html +++ b/etc/layout_viewer/viewer.html @@ -80,17 +80,28 @@ From 344ad61f2cbb0e18ca4fe80bf8b24ab3b05c42de Mon Sep 17 00:00:00 2001 From: Shing Lyu Date: Tue, 8 Nov 2016 13:26:12 +0800 Subject: [PATCH 4/4] Added a toolbar for going to previous and next node --- components/layout/flow_list.rs | 14 +++++++------- etc/layout_viewer/css/main.css | 2 ++ etc/layout_viewer/viewer.html | 24 ++++++++++++++++++++++++ 3 files changed, 33 insertions(+), 7 deletions(-) diff --git a/components/layout/flow_list.rs b/components/layout/flow_list.rs index 713d6807082..42ff71bf4ea 100644 --- a/components/layout/flow_list.rs +++ b/components/layout/flow_list.rs @@ -30,14 +30,14 @@ impl Serialize for FlowList { let flow_val = ObjectBuilder::new() .insert("class", f.class()) .insert("data", match f.class() { - FlowClass::Block => to_value(f.as_block()), - FlowClass::Inline => to_value(f.as_inline()), - FlowClass::Table => to_value(f.as_table()), - FlowClass::TableWrapper => to_value(f.as_table_wrapper()), + FlowClass::Block => to_value(f.as_block()), + FlowClass::Inline => to_value(f.as_inline()), + FlowClass::Table => to_value(f.as_table()), + FlowClass::TableWrapper => to_value(f.as_table_wrapper()), FlowClass::TableRowGroup => to_value(f.as_table_rowgroup()), - FlowClass::TableRow => to_value(f.as_table_row()), - FlowClass::TableCell => to_value(f.as_table_cell()), - FlowClass::Flex => to_value(f.as_flex()), + FlowClass::TableRow => to_value(f.as_table_row()), + FlowClass::TableCell => to_value(f.as_table_cell()), + FlowClass::Flex => to_value(f.as_flex()), FlowClass::ListItem | FlowClass::TableColGroup | FlowClass::TableCaption | FlowClass::Multicol | FlowClass::MulticolColumn => { Value::Null // Not implemented yet 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 @@
+ < Prev step + | + Next step > +
+
Back to top
@@ -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(); });