Layout viewer for layout 2020

.gitignore

@@ -60,3 +60,6 @@ support/hololens/ServoApp/Release/
 support/hololens/packages/
 support/hololens/AppPackages/
 support/hololens/.vs/
+
+# Layout debugger trace files
+layout_trace*

components/layout_2020/Cargo.toml

@@ -33,6 +33,7 @@ rayon_croissant = "0.2.0"
 script_layout_interface = {path = "../script_layout_interface"}
 script_traits = {path = "../script_traits"}
 serde = "1.0"
+serde_json = "1.0"
 servo_arc = { path = "../servo_arc" }
 servo_geometry = {path = "../geometry"}
 servo_url = {path = "../url"}

components/layout_2020/flow/float.rs

@@ -10,7 +10,7 @@ use crate::style_ext::{ComputedValuesExt, DisplayInside};
 use servo_arc::Arc;
 use style::properties::ComputedValues;
 
-#[derive(Debug)]
+#[derive(Debug, Serialize)]
 pub(crate) struct FloatBox {
     pub contents: IndependentFormattingContext,
 }

components/layout_2020/flow/inline.rs

@@ -7,7 +7,7 @@ use crate::flow::float::FloatBox;
 use crate::flow::FlowLayout;
 use crate::formatting_contexts::IndependentFormattingContext;
 use crate::fragments::CollapsedBlockMargins;
-use crate::fragments::{AnonymousFragment, BoxFragment, Fragment, TextFragment};
+use crate::fragments::{AnonymousFragment, BoxFragment, DebugId, Fragment, TextFragment};
 use crate::geom::flow_relative::{Rect, Sides, Vec2};
 use crate::positioned::{relative_adjustement, AbsolutelyPositionedBox, PositioningContext};
 use crate::sizing::ContentSizes;
@@ -23,12 +23,12 @@ use style::values::specified::text::TextAlignKeyword;
 use style::Zero;
 use webrender_api::FontInstanceKey;
 
-#[derive(Debug, Default)]
+#[derive(Debug, Default, Serialize)]
 pub(crate) struct InlineFormattingContext {
     pub(super) inline_level_boxes: Vec<Arc<InlineLevelBox>>,
 }
 
-#[derive(Debug)]
+#[derive(Debug, Serialize)]
 pub(crate) enum InlineLevelBox {
     InlineBox(InlineBox),
     TextRun(TextRun),
@@ -37,19 +37,21 @@ pub(crate) enum InlineLevelBox {
     Atomic(IndependentFormattingContext),
 }
 
-#[derive(Debug)]
+#[derive(Debug, Serialize)]
 pub(crate) struct InlineBox {
     pub tag: OpaqueNode,
+    #[serde(skip_serializing)]
     pub style: Arc<ComputedValues>,
     pub first_fragment: bool,
     pub last_fragment: bool,
     pub children: Vec<Arc<InlineLevelBox>>,
 }
 
 /// https://www.w3.org/TR/css-display-3/#css-text-run
-#[derive(Debug)]
+#[derive(Debug, Serialize)]
 pub(crate) struct TextRun {
     pub tag: OpaqueNode,
+    #[serde(skip_serializing)]
     pub parent_style: Arc<ComputedValues>,
     pub text: String,
 }
@@ -713,6 +715,7 @@ impl TextRun {
                 .fragments_so_far
                 .push(Fragment::Text(TextFragment {
                     tag: self.tag,
+                    debug_id: DebugId::new(),
                     parent_style: self.parent_style.clone(),
                     rect,
                     ascent: font_ascent.into(),

components/layout_2020/flow/mod.rs

@@ -8,8 +8,8 @@ use crate::context::LayoutContext;
 use crate::flow::float::{FloatBox, FloatContext};
 use crate::flow::inline::InlineFormattingContext;
 use crate::formatting_contexts::{IndependentFormattingContext, IndependentLayout, NonReplacedIFC};
-use crate::fragments::{AnonymousFragment, BoxFragment, Fragment};
-use crate::fragments::{CollapsedBlockMargins, CollapsedMargin};
+use crate::fragments::{AnonymousFragment, BoxFragment};
+use crate::fragments::{CollapsedBlockMargins, CollapsedMargin, Fragment};
 use crate::geom::flow_relative::{Rect, Sides, Vec2};
 use crate::positioned::{AbsolutelyPositionedBox, PositioningContext};
 use crate::replaced::ReplacedContent;
@@ -30,22 +30,23 @@ mod root;
 
 pub use root::{BoxTreeRoot, FragmentTreeRoot};
 
-#[derive(Debug)]
+#[derive(Debug, Serialize)]
 pub(crate) struct BlockFormattingContext {
     pub contents: BlockContainer,
     pub contains_floats: bool,
 }
 
-#[derive(Debug)]
+#[derive(Debug, Serialize)]
 pub(crate) enum BlockContainer {
     BlockLevelBoxes(Vec<Arc<BlockLevelBox>>),
     InlineFormattingContext(InlineFormattingContext),
 }
 
-#[derive(Debug)]
+#[derive(Debug, Serialize)]
 pub(crate) enum BlockLevelBox {
     SameFormattingContextBlock {
         tag: OpaqueNode,
+        #[serde(skip_serializing)]
         style: Arc<ComputedValues>,
         contents: BlockContainer,
     },

components/layout_2020/flow/root.rs

@@ -28,8 +28,10 @@ use style::properties::ComputedValues;
 use style::values::computed::Length;
 use style_traits::CSSPixel;
 
+#[derive(Serialize)]
 pub struct BoxTreeRoot(BlockFormattingContext);
 
+#[derive(Serialize)]
 pub struct FragmentTreeRoot {
     /// The children of the root of the fragment tree.
     children: Vec<Fragment>,

components/layout_2020/formatting_contexts.rs

@@ -18,9 +18,10 @@ use style::properties::ComputedValues;
 use style::values::computed::Length;
 
 /// https://drafts.csswg.org/css-display/#independent-formatting-context
-#[derive(Debug)]
+#[derive(Debug, Serialize)]
 pub(crate) struct IndependentFormattingContext {
     pub tag: OpaqueNode,
+    #[serde(skip_serializing)]
     pub style: Arc<ComputedValues>,
 
     /// If it was requested during construction
@@ -38,7 +39,7 @@ pub(crate) struct IndependentLayout {
 
 // Private so that code outside of this module cannot match variants.
 // It should got through methods instead.
-#[derive(Debug)]
+#[derive(Debug, Serialize)]
 enum IndependentFormattingContextContents {
     Flow(BlockFormattingContext),
 

components/layout_2020/fragments.rs

@@ -4,8 +4,12 @@
 
 use crate::geom::flow_relative::{Rect, Sides, Vec2};
 use crate::geom::{PhysicalPoint, PhysicalRect};
+#[cfg(debug_assertions)]
+use crate::layout_debug;
 use gfx::text::glyph::GlyphStore;
 use gfx_traits::print_tree::PrintTree;
+#[cfg(not(debug_assertions))]
+use serde::ser::{Serialize, Serializer};
 use servo_arc::Arc as ServoArc;
 use std::sync::Arc;
 use style::computed_values::overflow_x::T as ComputedOverflow;
@@ -16,15 +20,19 @@ use style::values::computed::Length;
 use style::Zero;
 use webrender_api::{FontInstanceKey, ImageKey};
 
+#[derive(Serialize)]
 pub(crate) enum Fragment {
     Box(BoxFragment),
     Anonymous(AnonymousFragment),
     Text(TextFragment),
     Image(ImageFragment),
 }
 
+#[derive(Serialize)]
 pub(crate) struct BoxFragment {
     pub tag: OpaqueNode,
+    pub debug_id: DebugId,
+    #[serde(skip_serializing)]
     pub style: ServoArc<ComputedValues>,
     pub children: Vec<Fragment>,
 
@@ -43,20 +51,23 @@ pub(crate) struct BoxFragment {
     pub scrollable_overflow_from_children: PhysicalRect<Length>,
 }
 
+#[derive(Serialize)]
 pub(crate) struct CollapsedBlockMargins {
     pub collapsed_through: bool,
     pub start: CollapsedMargin,
     pub end: CollapsedMargin,
 }
 
-#[derive(Clone, Copy)]
+#[derive(Clone, Copy, Serialize)]
 pub(crate) struct CollapsedMargin {
     max_positive: Length,
     min_negative: Length,
 }
 
 /// Can contain child fragments with relative coordinates, but does not contribute to painting itself.
+#[derive(Serialize)]
 pub(crate) struct AnonymousFragment {
+    pub debug_id: DebugId,
     pub rect: Rect<Length>,
     pub children: Vec<Fragment>,
     pub mode: WritingMode,
@@ -65,18 +76,26 @@ pub(crate) struct AnonymousFragment {
     pub scrollable_overflow: PhysicalRect<Length>,
 }
 
+#[derive(Serialize)]
 pub(crate) struct TextFragment {
+    pub debug_id: DebugId,
     pub tag: OpaqueNode,
+    #[serde(skip_serializing)]
     pub parent_style: ServoArc<ComputedValues>,
     pub rect: Rect<Length>,
     pub ascent: Length,
+    #[serde(skip_serializing)]
     pub font_key: FontInstanceKey,
     pub glyphs: Vec<Arc<GlyphStore>>,
 }
 
+#[derive(Serialize)]
 pub(crate) struct ImageFragment {
+    pub debug_id: DebugId,
+    #[serde(skip_serializing)]
     pub style: ServoArc<ComputedValues>,
     pub rect: Rect<Length>,
+    #[serde(skip_serializing)]
     pub image_key: ImageKey,
 }
 
@@ -119,6 +138,7 @@ impl Fragment {
 impl AnonymousFragment {
     pub fn no_op(mode: WritingMode) -> Self {
         Self {
+            debug_id: DebugId::new(),
             children: vec![],
             rect: Rect::zero(),
             mode,
@@ -136,6 +156,7 @@ impl AnonymousFragment {
             )
         });
         AnonymousFragment {
+            debug_id: DebugId::new(),
             rect,
             children,
             mode,
@@ -175,6 +196,7 @@ impl BoxFragment {
             });
         BoxFragment {
             tag,
+            debug_id: DebugId::new(),
             style,
             children,
             content_rect,
@@ -342,3 +364,33 @@ impl CollapsedMargin {
         self.max_positive + self.min_negative
     }
 }
+
+#[cfg(not(debug_assertions))]
+#[derive(Clone)]
+pub struct DebugId;
+
+#[cfg(debug_assertions)]
+#[derive(Clone, Serialize)]
+#[serde(transparent)]
+pub struct DebugId(u16);
+
+#[cfg(not(debug_assertions))]
+impl DebugId {
+    pub fn new() -> DebugId {
+        DebugId
+    }
+}
+
+#[cfg(debug_assertions)]
+impl DebugId {
+    pub fn new() -> DebugId {
+        DebugId(layout_debug::generate_unique_debug_id())
+    }
+}
+
+#[cfg(not(debug_assertions))]
+impl Serialize for DebugId {
+    fn serialize<S: Serializer>(&self, serializer: S) -> Result<S::Ok, S::Error> {
+        serializer.serialize_str(&format!("{:p}", &self))
+    }
+}

components/layout_2020/geom.rs

@@ -18,19 +18,19 @@ pub type PhysicalRect<U> = euclid::Rect<U, CSSPixel>;
 pub type PhysicalSides<U> = euclid::SideOffsets2D<U, CSSPixel>;
 
 pub(crate) mod flow_relative {
-    #[derive(Clone)]
+    #[derive(Clone, Serialize)]
     pub(crate) struct Vec2<T> {
         pub inline: T,
         pub block: T,
     }
 
-    #[derive(Clone)]
+    #[derive(Clone, Serialize)]
     pub(crate) struct Rect<T> {
         pub start_corner: Vec2<T>,
         pub size: Vec2<T>,
     }
 
-    #[derive(Clone, Debug)]
+    #[derive(Clone, Serialize)]
     pub(crate) struct Sides<T> {
         pub inline_start: T,
         pub inline_end: T,