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>