Home | History | Annotate | Download | only in analysis 
      1 <!DOCTYPE html>
      2 <!--
      3 Copyright 2016 The Chromium Authors. All rights reserved.
      4 Use of this source code is governed by a BSD-style license that can be
      5 found 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 
     19 tr.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