Show box tree node info and clean up unused code

etc/layout_viewer/css/main.css

@@ -27,3 +27,7 @@
   font-weight: bold;
   text-align: right;
 }
+
+.tree-collapse {
+  float: right;
+}

etc/layout_viewer/viewer.html

@@ -62,15 +62,32 @@
           <div class="row">
             <div class="col-sm-12">
               <div class="panel panel-default">
-                <div class="panel-heading">Box Tree</div>
+                <div class="panel-heading">
+                  Box Tree
+                  <a
+                    id="box-tree-collapse"
+                    class="tree-collapse"
+                    data-collapsed="0"
+                  ></a>
+                </div>
                 <div class="panel-body" id="box-tree"></div>
               </div>
             </div>
+            <div class="col-sm-12">
+              <div id="box-diffs"></div>
+            </div>
           </div>
           <div class="row">
             <div class="col-sm-12">
               <div class="panel panel-default">
-                <div class="panel-heading">Fragment Tree</div>
+                <div class="panel-heading">
+                  Fragment Tree
+                  <a
+                    id="fragment-tree-collapse"
+                    class="tree-collapse"
+                    data-collapsed="0"
+                  ></a>
+                </div>
                 <div class="panel-body" id="fragment-tree"></div>
               </div>
             </div>
@@ -80,16 +97,6 @@
           </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 -->
@@ -144,15 +151,28 @@
           }
           nodes = null;
         }
+
+        let info;
+        if (
+          box_type != "BlockLevelBoxes" &&
+          box_type != "InlineFormattingContext"
+        ) {
+          info = Object.assign({}, Object.values(container)[0]);
+          delete info.children;
+          delete info.contents;
+          delete info.tag;
+        }
+
         return {
           text,
-          nodes
+          nodes,
+          info
         };
       }
 
       function box_tree_from_bfc(bfc) {
         const { contains_floats, contents } = bfc;
-        var block_container = Object.values(contents)[0];
+        let block_container = Object.values(contents)[0];
         return {
           text: "BlockFormattingContext",
           info: {
@@ -163,17 +183,16 @@
       }
 
       function create_fragment_tree(root) {
-        var fragment = Object.values(root)[0];
+        let fragment = Object.values(root)[0];
-        var node = {
+        let node = {
           text: Object.keys(root)[0],
           id: fragment.debug_id,
-          icon: "dummy",
           href: "#diff-" + fragment.debug_id
         };
 
         if (fragment.children) {
-          var children = [];
+          let children = [];
-          for (var i = 0; i < fragment.children.length; ++i) {
+          for (let i = 0; i < fragment.children.length; ++i) {
             children.push(create_fragment_tree(fragment.children[i]));
           }
 
@@ -182,58 +201,38 @@
           }
         }
 
+        node.info = Object.assign({}, fragment);
+        delete node.info.children;
+        delete node.info.debug_id;
+
         return node;
       }
 
-      function get_fragments_info(node, fragments_info) {
-        const fragmentType = Object.keys(node)[0];
-        const trace_node = Object.assign({}, Object.values(node)[0]);
-        let data = Object.assign({}, trace_node);
-        delete data.children;
-        delete data.debug_id;
-        fragments_info[trace_node.debug_id] = {
-          class: fragmentType,
-          data
-        };
-
-        if (trace_node.children) {
-          for (var i = 0; i < trace_node.children.length; ++i) {
-            get_fragments_info(trace_node.children[i], fragments_info);
-          }
-        }
-      }
-
       function flatten_trace(trace_node) {
-        const fragment_tree_root = Object.values(trace_node.fragment_tree.children)[0];
+        const fragment_tree_root = Object.values(
-        var fragments_info = {};
+          trace_node.fragment_tree.children
-        get_fragments_info(fragment_tree_root, fragments_info);
+        )[0];
         return {
           fragment_tree: create_fragment_tree(fragment_tree_root),
-          box_tree: box_tree_from_bfc(trace_node.box_tree),
+          box_tree: box_tree_from_bfc(trace_node.box_tree)
-          fragments_info
         };
       }
 
       function create_trace_tree_node(trace_node) {
-        var pre_trace = flatten_trace(trace_node.pre);
+        const trace = flatten_trace(trace_node.pre);
-        var post_trace = flatten_trace(trace_node.post);
 
-        var tree_node = {
+        let tree_node = {
           text: trace_node.name,
           icon: "dummy",
-          box_tree: pre_trace.box_tree,
+          box_tree: trace.box_tree,
-          fragment_tree: pre_trace.fragment_tree,
+          fragment_tree: trace.fragment_tree
-          pre_boxes_info: pre_trace.boxes_info,
-          post_boxes_info: post_trace.boxes_info,
-          pre_fragments_info: pre_trace.fragments_info,
-          post_fragments_info: post_trace.fragments_info
         };
 
-        var trace_node = Object.values(trace_node)[0];
+        let node = Object.values(trace_node)[0];
-        if (trace_node.children) {
+        if (node.children) {
-          var children = [];
+          let children = [];
-          for (var i = 0; i < trace_node.children.length; ++i) {
+          for (let i = 0; i < node.children.length; ++i) {
-            children.push(create_trace_tree_node(trace_node.children[i]));
+            children.push(create_trace_tree_node(node.children[i]));
           }
 
           if (children.length > 0) {
@@ -244,27 +243,11 @@
         return tree_node;
       }
 
-      function update_fragment_tree_bgcolor(
-        fragment_tree_node,
-        node_color_hash
-      ) {
-        fragment_tree_node.backColor =
-          node_color_hash[fragment_tree_node.debug_id];
-        if (fragment_tree_node.nodes !== undefined) {
-          for (var i = 0; i < fragment_tree_node.nodes.length; ++i) {
-            update_fragment_tree_bgcolor(
-              fragment_tree_node.nodes[i],
-              node_color_hash
-            );
-          }
-        }
-      }
-
       function new_data_loaded(data) {
         jsondiffpatch.formatters.html.hideUnchanged();
 
-        var node_color_hash = {};
+        let node_color_hash = {};
-        var tree = [create_trace_tree_node(data)];
+        let tree = [create_trace_tree_node(data)];
         $("#trace-tree").treeview({ data: tree, levels: 3 });
         $("#trace-tree").on("nodeSelected", function(event, node) {
           $("#fragment-diffs").empty();
@@ -272,67 +255,62 @@
             .treeview(true)
             .revealNode(node);
 
-          for (var key in node.pre_fragments_info) {
+          const on_tree_node_selected = tree => (event, data) => {
-            var fragment_info_left = node.pre_fragments_info[key];
+            $(`#${tree}-diffs`).empty();
-            var fragment_info_right = node.post_fragments_info[key];
+            if (!data.info) return;
-
+            // XXX(ferjm) no diff for now.
-            var delta = jsondiffpatch
+            const delta = jsondiffpatch
               .create({
                 objectHash: function(obj) {
                   return JSON.stringify(obj);
                 }
               })
-              .diff(fragment_info_left, fragment_info_right);
+              .diff({}, data.info);
 
-            if (!delta) {
+            const json = jsondiffpatch.formatters.html.format(delta, data.info);
-              delta = jsondiffpatch
-                .create({
-                  objectHash: function(obj) {
-                    return JSON.stringify(obj);
-                  }
-                })
-                .diff({}, fragment_info_right);
-            }
 
-            if (delta !== undefined) {
+            $(`#${tree}-diffs`).append(
-              var diff_id = "diff-" + key;
+              "<div class='panel panel-default'><div class='panel-heading'>" +
-              $("#fragment-diffs").append(
+                data.text +
-                "<div class='panel panel-default' id='" +
+                "</div><div class='panel-body'>" +
-                  diff_id +
+                json +
-                  "'><div class='panel-heading'>" +
+                "</div></div>"
-                  fragment_info_left.class +
-                  " (" +
-                  key +
-                  ")" +
-                  "</div><div class='panel-body'></div></div>"
             );
+          };
 
-              document
+          const on_fragment_tree_node_selected = on_tree_node_selected(
-                .getElementById(diff_id)
+            "fragment"
-                .getElementsByClassName(
-                  "panel-body"
-                )[0].innerHTML = jsondiffpatch.formatters.html.format(
-                delta,
-                fragment_info_left
           );
-              node_color_hash[key] = "rgba(255, 0, 0, 0.7)";
+          const on_box_tree_node_selected = on_tree_node_selected("box");
-            } else {
-              node_color_hash[key] = "rgb(212, 248, 212)";
-            }
-          }
 
-          update_fragment_tree_bgcolor(node.fragment_tree, node_color_hash);
           $("#fragment-tree").treeview({
             data: [node.fragment_tree],
             levels: 100,
-            enableLinks: true,
+            enableLinks: false,
-            emptyIcon: "glyphicon glyphicon-unchecked hidden-glyphicon"
+            emptyIcon: "glyphicon glyphicon-unchecked hidden-glyphicon",
+            onNodeSelected: on_fragment_tree_node_selected
           });
+
           $("#box-tree").treeview({
             data: [node.box_tree],
             levels: 100,
-            enableLinks: true,
+            enableLinks: false,
-            emptyIcon: "glyphicon glyphicon-unchecked hidden-glyphicon"
+            emptyIcon: "glyphicon glyphicon-unchecked hidden-glyphicon",
+            onNodeSelected: on_box_tree_node_selected
+          });
+
+          ["fragment", "box"].forEach(key => {
+            const collapsable = $(`#${key}-tree-collapse`);
+            collapsable.html("Collapse all").on("click", () => {
+              const collapsed = collapsable.data("collapsed");
+              if (collapsed == 0) {
+                $(`#${key}-tree`).treeview("collapseAll");
+              } else {
+                $(`#${key}-tree`).treeview("expandAll");
+              }
+              collapsable.html(collapsed == 0 ? "Expand all" : "Collapse all");
+              collapsable.data("collapsed", collapsed == 0 ? 1 : 0);
+            });
           });
         });
 
@@ -341,46 +319,12 @@
           .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() {
-        var upload = document.getElementsByTagName("input")[0];
+        let upload = document.getElementsByTagName("input")[0];
         upload.onchange = function(e) {
           e.preventDefault();
 
-          var file = upload.files[0],
+          let file = upload.files[0],
             reader = new FileReader();
           reader.onload = function(event) {
             new_data_loaded(JSON.parse(event.target.result));
@@ -389,8 +333,6 @@
           reader.readAsText(file);
           return false;
         };
-        register_toggle_unchanaged_code_handler();
-        register_prev_next_trace_node();
       });
     </script>
   </body>