layout_tree_sub_view.html revision cef7893435aa41160dd1255c43cb8498279738cc 
1<!DOCTYPE html>
2<!--
3Copyright 2016 The Chromium Authors. All rights reserved.
4Use of this source code is governed by a BSD-style license that can be
5found in the LICENSE file.
6-->
7
8<link rel="import" href="/tracing/ui/analysis/analysis_sub_view.html">
9
10<polymer-element name="tr-ui-a-layout-tree-sub-view"
11    extends="tr-ui-a-sub-view">
12  <template>
13    <div id="content"></div>
14  </template>
15</polymer-element>
16<script>
17'use strict';
18
19tr.exportTo('tr.ui.analysis', function() {
20  Polymer('tr-ui-a-layout-tree-sub-view', {
21    set selection(selection) {
22      this.currentSelection_ = selection;
23      this.updateContents_();
24    },
25
26    get selection() {
27      return this.currentSelection_;
28    },
29
30    updateContents_: function() {
31      this.$.content.textContent = '';
32      if (!this.currentSelection_)
33        return;
34
35      var columns = [
36        {
37          title: 'Tag/Name',
38          value: function(layoutObject) {
39            return layoutObject.tag || ':' + layoutObject.name;
40          }
41        },
42
43        {
44          title: 'htmlId',
45          value: function(layoutObject) {
46            return layoutObject.htmlId || '';
47          }
48        },
49
50        {
51          title: 'classNames',
52          value: function(layoutObject) {
53            return layoutObject.classNames || '';
54          }
55        },
56
57        {
58          title: 'reasons',
59          value: function(layoutObject) {
60            return layoutObject.needsLayoutReasons.join(', ');
61          }
62        },
63
64        {
65          title: 'width',
66          value: function(layoutObject) {
67            return layoutObject.absoluteRect.width;
68          }
69        },
70
71        {
72          title: 'height',
73          value: function(layoutObject) {
74            return layoutObject.absoluteRect.height;
75          }
76        },
77
78        {
79          title: 'absX',
80          value: function(layoutObject) {
81            return layoutObject.absoluteRect.left;
82          }
83        },
84
85        {
86          title: 'absY',
87          value: function(layoutObject) {
88            return layoutObject.absoluteRect.top;
89          }
90        },
91
92        {
93          title: 'relX',
94          value: function(layoutObject) {
95            return layoutObject.relativeRect.left;
96          }
97        },
98
99        {
100          title: 'relY',
101          value: function(layoutObject) {
102            return layoutObject.relativeRect.top;
103          }
104        },
105
106        {
107          title: 'float',
108          value: function(layoutObject) {
109            return layoutObject.isFloat ? 'float' : '';
110          }
111        },
112
113        {
114          title: 'positioned',
115          value: function(layoutObject) {
116            return layoutObject.isPositioned ? 'positioned' : '';
117          }
118        },
119
120        {
121          title: 'relative',
122          value: function(layoutObject) {
123            return layoutObject.isRelativePositioned ? 'relative' : '';
124          }
125        },
126
127        {
128          title: 'sticky',
129          value: function(layoutObject) {
130            return layoutObject.isStickyPositioned ? 'sticky' : '';
131          }
132        },
133
134        {
135          title: 'anonymous',
136          value: function(layoutObject) {
137            return layoutObject.isAnonymous ? 'anonymous' : '';
138          }
139        },
140
141        {
142          title: 'row',
143          value: function(layoutObject) {
144            if (layoutObject.tableRow === undefined)
145              return '';
146            return layoutObject.tableRow;
147          }
148        },
149
150        {
151          title: 'col',
152          value: function(layoutObject) {
153            if (layoutObject.tableCol === undefined)
154              return '';
155            return layoutObject.tableCol;
156          }
157        },
158
159        {
160          title: 'rowSpan',
161          value: function(layoutObject) {
162            if (layoutObject.tableRowSpan === undefined)
163              return '';
164            return layoutObject.tableRowSpan;
165          }
166        },
167
168        {
169          title: 'colSpan',
170          value: function(layoutObject) {
171            if (layoutObject.tableColSpan === undefined)
172              return '';
173            return layoutObject.tableColSpan;
174          }
175        },
176
177        {
178          title: 'address',
179          value: function(layoutObject) {
180            return layoutObject.id.toString(16);
181          }
182        }
183      ];
184
185      var table = this.ownerDocument.createElement('tr-ui-b-table');
186      table.defaultExpansionStateCallback = function(
187          layoutObject, parentLayoutObject) {
188        return true;
189      };
190      table.subRowsPropertyName = 'childLayoutObjects';
191      table.tableColumns = columns;
192      table.tableRows = this.currentSelection_.map(function(snapshot) {
193        return snapshot.rootLayoutObject;
194      });
195      table.rebuild();
196      this.$.content.appendChild(table);
197    }
198  });
199
200  return {};
201});
202</script>
203
204