LayoutTree machinery

tracing/tracing/ui/analysis/layout_tree_sub_view.html

Index: tracing/tracing/ui/analysis/layout_tree_sub_view.html
diff --git a/tracing/tracing/ui/analysis/layout_tree_sub_view.html b/tracing/tracing/ui/analysis/layout_tree_sub_view.html
index 75a42c01d42152f540792a0cf1f86e385444c391..3db99b14ff7349f706f143767624624716674bdc 100644
--- a/tracing/tracing/ui/analysis/layout_tree_sub_view.html
+++ b/tracing/tracing/ui/analysis/layout_tree_sub_view.html
@@ -17,6 +17,191 @@ found in the LICENSE file.
 'use strict';
 
 tr.exportTo('tr.ui.analysis', function() {
+  var COLUMNS = [
+    {
+      title: 'Tag/Name',
+      value: function(layoutObject) {
+        return layoutObject.tag || ':' + layoutObject.name;
+      }
+    },
+
+    {
+      title: 'htmlId',
+      value: function(layoutObject) {
+        return layoutObject.htmlId || '';
+      }
+    },
+
+    {
+      title: 'classNames',
+      value: function(layoutObject) {
+        return layoutObject.classNames || '';
+      }
+    },
+
+    {
+      title: 'reasons',
+      value: function(layoutObject) {
+        return layoutObject.needsLayoutReasons.join(', ');
+      }
+    },
+
+    {
+      title: 'subtree',
+      value: function(layoutObject) {
+        if (!layoutObject.subtree)
+          return undefined;
+        var link = document.createElement('tr-ui-a-analysis-link');
+        link.setSelectionAndContent(new tr.model.EventSet(
+            layoutObject.subtree), 'subtree');
+        return link;
+      }
+    },
+
+    {
+      title: 'width',
+      value: function(layoutObject) {
+        return layoutObject.absoluteRect.width;
+      }
+    },
+
+    {
+      title: 'height',
+      value: function(layoutObject) {
+        return layoutObject.absoluteRect.height;
+      }
+    },
+
+    {
+      title: 'relX',
+      value: function(layoutObject) {
+        return layoutObject.relativeRect.left;
+      }
+    },
+
+    {
+      title: 'relY',
+      value: function(layoutObject) {
+        return layoutObject.relativeRect.top;
+      }
+    },
+
+    {
+      title: 'absX',
+      value: function(layoutObject) {
+        return layoutObject.absoluteRect.left;
+      }
+    },
+
+    {
+      title: 'absY',
+      value: function(layoutObject) {
+        return layoutObject.absoluteRect.top;
+      }
+    },
+
+    {
+      title: 'viewportX',
+      value: function(layoutObject) {
+        return layoutObject.viewportRelativeRect.left;
+      }
+    },
+
+    {
+      title: 'viewportY',
+      value: function(layoutObject) {
+        return layoutObject.viewportRelativeRect.top;
+      }
+    },
+
+    {
+      title: 'float',
+      value: function(layoutObject) {
+        return layoutObject.isFloat ? 'float' : '';
+      }
+    },
+
+    {
+      title: 'positioned',
+      value: function(layoutObject) {
+        return layoutObject.isPositioned ? 'positioned' : '';
+      }
+    },
+
+    {
+      title: 'relative',
+      value: function(layoutObject) {
+        return layoutObject.isRelativePositioned ? 'relative' : '';
+      }
+    },
+
+    {
+      title: 'sticky',
+      value: function(layoutObject) {
+        return layoutObject.isStickyPositioned ? 'sticky' : '';
+      }
+    },
+
+    {
+      title: 'anonymous',
+      value: function(layoutObject) {
+        return layoutObject.isAnonymous ? 'anonymous' : '';
+      }
+    },
+
+    {
+      title: 'row',
+      value: function(layoutObject) {
+        if (layoutObject.tableRow === undefined)
+          return '';
+        return layoutObject.tableRow;
+      }
+    },
+
+    {
+      title: 'col',
+      value: function(layoutObject) {
+        if (layoutObject.tableCol === undefined)
+          return '';
+        return layoutObject.tableCol;
+      }
+    },
+
+    {
+      title: 'rowSpan',
+      value: function(layoutObject) {
+        if (layoutObject.tableRowSpan === undefined)
+          return '';
+        return layoutObject.tableRowSpan;
+      }
+    },
+
+    {
+      title: 'colSpan',
+      value: function(layoutObject) {
+        if (layoutObject.tableColSpan === undefined)
+          return '';
+        return layoutObject.tableColSpan;
+      }
+    },
+
+    {
+      title: 'source',
+      value: function(layoutObject) {
+        if (layoutObject.sourceURL === undefined)
+          return '';
+        return layoutObject.sourceURL;
+      }
+    },
+
+    {
+      title: 'address',
+      value: function(layoutObject) {
+        return layoutObject.id.toString(16);
+      }
+    }
+  ];
+
   Polymer('tr-ui-a-layout-tree-sub-view', {
     set selection(selection) {
       this.currentSelection_ = selection;
@@ -32,172 +217,44 @@ tr.exportTo('tr.ui.analysis', function() {
       if (!this.currentSelection_)
         return;
 
-      var columns = [
-        {
-          title: 'Tag/Name',
-          value: function(layoutObject) {
-            return layoutObject.tag || ':' + layoutObject.name;
-          }
-        },
-
-        {
-          title: 'htmlId',
-          value: function(layoutObject) {
-            return layoutObject.htmlId || '';
-          }
-        },
-
-        {
-          title: 'classNames',
-          value: function(layoutObject) {
-            return layoutObject.classNames || '';
-          }
-        },
-
-        {
-          title: 'reasons',
-          value: function(layoutObject) {
-            return layoutObject.needsLayoutReasons.join(', ');
-          }
-        },
-
-        {
-          title: 'width',
-          value: function(layoutObject) {
-            return layoutObject.absoluteRect.width;
-          }
-        },
-
-        {
-          title: 'height',
-          value: function(layoutObject) {
-            return layoutObject.absoluteRect.height;
-          }
-        },
-
-        {
-          title: 'absX',
-          value: function(layoutObject) {
-            return layoutObject.absoluteRect.left;
-          }
-        },
-
-        {
-          title: 'absY',
-          value: function(layoutObject) {
-            return layoutObject.absoluteRect.top;
-          }
-        },
-
-        {
-          title: 'relX',
-          value: function(layoutObject) {
-            return layoutObject.relativeRect.left;
-          }
-        },
-
-        {
-          title: 'relY',
-          value: function(layoutObject) {
-            return layoutObject.relativeRect.top;
-          }
-        },
-
-        {
-          title: 'float',
-          value: function(layoutObject) {
-            return layoutObject.isFloat ? 'float' : '';
-          }
-        },
-
-        {
-          title: 'positioned',
-          value: function(layoutObject) {
-            return layoutObject.isPositioned ? 'positioned' : '';
-          }
-        },
-
-        {
-          title: 'relative',
-          value: function(layoutObject) {
-            return layoutObject.isRelativePositioned ? 'relative' : '';
-          }
-        },
-
-        {
-          title: 'sticky',
-          value: function(layoutObject) {
-            return layoutObject.isStickyPositioned ? 'sticky' : '';
-          }
-        },
-
-        {
-          title: 'anonymous',
-          value: function(layoutObject) {
-            return layoutObject.isAnonymous ? 'anonymous' : '';
-          }
-        },
-
-        {
-          title: 'row',
-          value: function(layoutObject) {
-            if (layoutObject.tableRow === undefined)
-              return '';
-            return layoutObject.tableRow;
-          }
-        },
-
-        {
-          title: 'col',
-          value: function(layoutObject) {
-            if (layoutObject.tableCol === undefined)
-              return '';
-            return layoutObject.tableCol;
-          }
-        },
-
-        {
-          title: 'rowSpan',
-          value: function(layoutObject) {
-            if (layoutObject.tableRowSpan === undefined)
-              return '';
-            return layoutObject.tableRowSpan;
-          }
-        },
-
-        {
-          title: 'colSpan',
-          value: function(layoutObject) {
-            if (layoutObject.tableColSpan === undefined)
-              return '';
-            return layoutObject.tableColSpan;
-          }
-        },
-
-        {
-          title: 'address',
-          value: function(layoutObject) {
-            return layoutObject.id.toString(16);
-          }
+      this.currentSelection_.forEach(function(layoutTreeSnapshot) {
+        if (layoutTreeSnapshot.parentLayoutTreeSnapshot) {
+          var link = document.createElement('tr-ui-a-analysis-link');
+          link.setSelectionAndContent(new tr.model.EventSet(
+              layoutTreeSnapshot.parentLayoutTreeSnapshot),
+              'parent LayoutTree');
+          link.style.display = 'block';
+          this.$.content.appendChild(link);
         }
-      ];
-
-      var table = this.ownerDocument.createElement('tr-ui-b-table');
-      table.defaultExpansionStateCallback = function(
-          layoutObject, parentLayoutObject) {
-        return true;
-      };
-      table.subRowsPropertyName = 'childLayoutObjects';
-      table.tableColumns = columns;
-      table.tableRows = this.currentSelection_.map(function(snapshot) {
-        return snapshot.rootLayoutObject;
-      });
-      table.rebuild();
-      this.$.content.appendChild(table);
+
+        if (layoutTreeSnapshot.rootLayoutTreeSnapshot != layoutTreeSnapshot) {
+          var link = document.createElement('tr-ui-a-analysis-link');
+          link.setSelectionAndContent(new tr.model.EventSet(
+                layoutTreeSnapshot.rootLayoutTreeSnapshot),
+              'root LayoutTree');
+          link.style.display = 'block';
+          this.$.content.appendChild(link);
+        }
+
+        if (layoutTreeSnapshot.rootLayoutObject) {
+          var table = this.ownerDocument.createElement('tr-ui-b-table');
+          table.defaultExpansionStateCallback = function(
+              layoutObject, parentLayoutObject) {
+            return true;
+          };
+          table.subRowsPropertyName = 'childLayoutObjects';
+          table.tableColumns = COLUMNS;
+          table.tableRows = this.currentSelection_.map(function(snapshot) {
+            return snapshot.rootLayoutObject;
+          });
+          table.rebuild();
+          this.$.content.appendChild(table);
+        }
+      }, this);
+
     }
   });
 
   return {};
 });
 </script>
-