Added a toolbar for going to previous and next node

servo · Dec 28, 2016 · 344ad61 · 344ad61
1 parent fe82d27
commit 344ad61
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 7 deletions.
diff --git 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
@@ -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
@@ -68,8 +68,13 @@ <h1> Servo Layout Viewer </h1>
                 </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>
@@ -181,6 +186,7 @@ <h1> Servo Layout Viewer </h1>
                 $('#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 @@ <h1> Servo Layout Viewer </h1>
                     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 @@ <h1> Servo Layout Viewer </h1>
               });
             }
 
+            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 @@ <h1> Servo Layout Viewer </h1>
                     return false;
                 };
                 register_toggle_unchanaged_code_handler();
+                register_prev_next_trace_node();
             });
         </script>
     </body>