Auto merge of #14124 - shinglyu:flexbox-trace, r=glennw

Flexbox trace

<!-- Please describe your changes on the following line: -->
This is a follow up for #13740, so r? @jdm

The first patch enables JSON serialization for flexbox flows, the second one fixed format incompatibilities for the layout viewer.

The 3rd and 4th patches are just layout viewer UI enhancements, we could split that to a spearate PR if you prefer.

---
<!-- 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
- [x] These changes fix #13846  (github issue number if applicable).

<!-- Either: -->
- [ ] There are tests for these changes OR
- [x] These changes do not require tests because it's a trivial 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/14124)
<!-- Reviewable:end -->

6 files changed, 83 insertions, 16 deletions

diff --git a/components/layout/flex.rs b/components/layout/flex.rs
index 7b8d694494c..c40c6a1b433 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<usize>,
@@ -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..42ff71bf4ea 100644
--- a/components/layout/flow_list.rs
+++ b/components/layout/flow_list.rs
@@ -37,8 +37,9 @@ impl Serialize for FlowList {
                     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::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<Au>,
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
diff --git a/etc/layout_viewer/css/main.css b/etc/layout_viewer/css/main.css
index 33b85a97249..9522c2ccb15 100644
--- a/etc/layout_viewer/css/main.css
+++ b/etc/layout_viewer/css/main.css
@@ -15,3 +15,15 @@
 .hidden-glyphicon {
   visibility:hidden;
 }
+
+#toolbar {
+  background: rgba(255,255,255,0.5);
+  box-shadow: 0.5em 0.5em 2em lightgrey;
+  position: fixed;
+  top: 1em;
+  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 7e80756ade7..4edca787bf4 100644
--- a/etc/layout_viewer/viewer.html
+++ b/etc/layout_viewer/viewer.html
@@ -67,6 +67,16 @@
                     </div>
                 </div>
             </div>
+            <div id="toolbar">
+              <a href="#" id="prev_trace">< Prev step</a>
+              |
+              <a href="#" id="next_trace">Next step ></a>
+              <br>
+              <input type="checkbox" name="show_unchanged" id="show_unchanged" />
+              <label for="show_unchanged">Show unchanged code</label>
+              <br>
+              <a href="#top">Back to top</a>
+            </div>
         </div>
 
         <!-- jQuery -->
@@ -80,17 +90,28 @@
         <script src="js/formatters.min.js"></script>
 
         <script>
+            function get_base(trace_node) {
+                if (typeof(trace_node.data.base) == "undefined" && typeof(trace_node.data.block_flow) != "undefined") {
+                  return trace_node.data.block_flow.base;
+                }
+                else {
+                  return trace_node.data.base;
+                }
+            }
+
             function create_flow_tree(trace_node) {
+                var base = get_base(trace_node);
+
                 var node = {
-                    text: trace_node.class + " (" + trace_node.data.base.id + ")",
-                    id: trace_node.data.base.id,
+                    text: trace_node.class + " (" + base.id + ")",
+                    id: base.id,
                     icon: "dummy",
-                    href: "#diff-" + trace_node.data.base.id
+                    href: "#diff-" + base.id
                 };
 
                 var children = [];
-                for (var i=0 ; i < trace_node.data.base.children.length ; ++i) {
-                    children.push(create_flow_tree(trace_node.data.base.children[i]));
+                for (var i=0 ; i < base.children.length ; ++i) {
+                    children.push(create_flow_tree(base.children[i]));
                 }
 
                 if (children.length > 0) {
@@ -101,13 +122,14 @@
             }
 
             function create_flow_hash(trace_node, flow_hash) {
-                flow_hash[trace_node.data.base.id] = trace_node;
+                var base = get_base(trace_node);
+                flow_hash[base.id] = trace_node;
 
-                for (var i=0 ; i < trace_node.data.base.children.length ; ++i) {
-                    create_flow_hash(trace_node.data.base.children[i], flow_hash);
+                for (var i=0 ; i < base.children.length ; ++i) {
+                    create_flow_hash(base.children[i], flow_hash);
                 }
 
-                delete trace_node.data.base.children;
+                delete base.children;
             }
 
             function flatten_trace(trace_node) {
@@ -164,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];
@@ -177,6 +200,10 @@
                                 if (obj.id !== undefined) {
                                     return obj.id;
                                 }
+                                if (obj.index !== undefined) {
+                                    // FlexItem and FlexLine
+                                    return obj.index;
+                                }
                                 return JSON.stringify(obj);
                             }
                         }).diff(flow_left, flow_right);
@@ -201,6 +228,30 @@
                     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() {
+              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);
+              });
+            }
+
+            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() {
@@ -217,6 +268,8 @@
                     reader.readAsText(file);
                     return false;
                 };
+                register_toggle_unchanaged_code_handler();
+                register_prev_next_trace_node();
             });
         </script>
     </body>