OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <!-- | 2 <!-- |
3 Copyright (c) 2013 The Chromium Authors. All rights reserved. | 3 Copyright (c) 2013 The Chromium Authors. All rights reserved. |
4 Use of this source code is governed by a BSD-style license that can be | 4 Use of this source code is governed by a BSD-style license that can be |
5 found in the LICENSE file. | 5 found in the LICENSE file. |
6 --> | 6 --> |
7 | 7 |
8 <link rel="import" href="/tracing/base/base64.html"> | 8 <link rel="import" href="/tracing/base/base64.html"> |
9 <link rel="import" href="/tracing/extras/chrome/cc/picture.html"> | 9 <link rel="import" href="/tracing/extras/chrome/cc/picture.html"> |
10 <link rel="import" href="/tracing/ui/analysis/generic_object_view.html"> | 10 <link rel="import" href="/tracing/ui/analysis/generic_object_view.html"> |
11 <link rel="import" href="/tracing/ui/base/drag_handle.html"> | 11 <link rel="import" href="/tracing/ui/base/drag_handle.html"> |
12 <link rel="import" href="/tracing/ui/base/hotkey_controller.html"> | 12 <link rel="import" href="/tracing/ui/base/hotkey_controller.html"> |
13 <link rel="import" href="/tracing/ui/base/info_bar.html"> | 13 <link rel="import" href="/tracing/ui/base/info_bar.html"> |
14 <link rel="import" href="/tracing/ui/base/list_view.html"> | 14 <link rel="import" href="/tracing/ui/base/list_view.html"> |
15 <link rel="import" href="/tracing/ui/base/mouse_mode_selector.html"> | 15 <link rel="import" href="/tracing/ui/base/mouse_mode_selector.html"> |
16 <link rel="import" href="/tracing/ui/base/overlay.html"> | 16 <link rel="import" href="/tracing/ui/base/overlay.html"> |
17 <link rel="import" href="/tracing/ui/base/utils.html"> | 17 <link rel="import" href="/tracing/ui/base/utils.html"> |
18 <link rel="import" | 18 <link rel="import" |
19 href="/tracing/ui/extras/chrome/cc/picture_ops_chart_summary_view.html"> | 19 href="/tracing/ui/extras/chrome/cc/picture_ops_chart_summary_view.html"> |
20 <link rel="import" href="/tracing/ui/extras/chrome/cc/picture_ops_chart_view.htm
l"> | 20 <link rel="import" href="/tracing/ui/extras/chrome/cc/picture_ops_chart_view.htm
l"> |
21 <link rel="import" href="/tracing/ui/extras/chrome/cc/picture_ops_list_view.html
"> | 21 <link rel="import" href="/tracing/ui/extras/chrome/cc/picture_ops_list_view.html
"> |
22 | 22 |
23 <template id="tr-ui-e-chrome-cc-picture-debugger-template"> | 23 <template id="tr-ui-e-chrome-cc-picture-debugger-template"> |
24 <style> | |
25 * /deep/ tr-ui-e-chrome-cc-picture-debugger { | |
26 flex: 1 1 auto; | |
27 flex-direction: row; | |
28 display: flex; | |
29 } | |
30 | |
31 * /deep/ tr-ui-e-chrome-cc-picture-debugger > tr-ui-a-generic-object-view { | |
32 flex-direction: column; | |
33 display: flex; | |
34 width: 400px; | |
35 } | |
36 | |
37 * /deep/ tr-ui-e-chrome-cc-picture-debugger > left-panel { | |
38 flex-direction: column; | |
39 display: flex; | |
40 min-width: 300px; | |
41 } | |
42 | |
43 * /deep/ tr-ui-e-chrome-cc-picture-debugger > left-panel > picture-info { | |
44 flex: 0 0 auto; | |
45 padding-top: 2px; | |
46 } | |
47 | |
48 * /deep/ tr-ui-e-chrome-cc-picture-debugger > left-panel > | |
49 picture-info .title { | |
50 font-weight: bold; | |
51 margin-left: 5px; | |
52 margin-right: 5px; | |
53 } | |
54 | |
55 * /deep/ tr-ui-e-chrome-cc-picture-debugger > tr-ui-b-drag-handle { | |
56 flex: 0 0 auto; | |
57 } | |
58 | |
59 * /deep/ tr-ui-e-chrome-cc-picture-debugger .filename { | |
60 -webkit-user-select: text; | |
61 margin-left: 5px; | |
62 } | |
63 | |
64 * /deep/ tr-ui-e-chrome-cc-picture-debugger > right-panel { | |
65 flex: 1 1 auto; | |
66 flex-direction: column; | |
67 display: flex; | |
68 } | |
69 | |
70 * /deep/ tr-ui-e-chrome-cc-picture-debugger > right-panel > | |
71 tr-ui-e-chrome-cc-picture-ops-chart-view { | |
72 min-height: 150px; | |
73 min-width : 0; | |
74 overflow-x: auto; | |
75 overflow-y: hidden; | |
76 } | |
77 | |
78 /*************************************************/ | |
79 | |
80 * /deep/ tr-ui-e-chrome-cc-picture-debugger raster-area { | |
81 background-color: #ddd; | |
82 min-height: 200px; | |
83 min-width: 200px; | |
84 overflow-y: auto; | |
85 padding-left: 5px; | |
86 } | |
87 </style> | |
88 | |
89 <left-panel> | 24 <left-panel> |
90 <picture-info> | 25 <picture-info> |
91 <div> | 26 <div> |
92 <span class='title'>Skia Picture</span> | 27 <span class='title'>Skia Picture</span> |
93 <span class='size'></span> | 28 <span class='size'></span> |
94 </div> | 29 </div> |
95 <div> | 30 <div> |
96 <input class='filename' type='text' value='skpicture.skp' /> | 31 <input class='filename' type='text' value='skpicture.skp' /> |
97 <button class='export'>Export</button> | 32 <button class='export'>Export</button> |
98 </div> | 33 </div> |
(...skipping 22 matching lines...) Expand all Loading... |
121 | 56 |
122 PictureDebugger.prototype = { | 57 PictureDebugger.prototype = { |
123 __proto__: HTMLDivElement.prototype, | 58 __proto__: HTMLDivElement.prototype, |
124 | 59 |
125 decorate() { | 60 decorate() { |
126 const node = tr.ui.b.instantiateTemplate( | 61 const node = tr.ui.b.instantiateTemplate( |
127 '#tr-ui-e-chrome-cc-picture-debugger-template', THIS_DOC); | 62 '#tr-ui-e-chrome-cc-picture-debugger-template', THIS_DOC); |
128 | 63 |
129 Polymer.dom(this).appendChild(node); | 64 Polymer.dom(this).appendChild(node); |
130 | 65 |
| 66 this.style.display = 'flex'; |
| 67 this.style.flexGrow = 1; |
| 68 this.style.flexShrink = 1; |
| 69 this.style.flexBasis = 'auto'; |
| 70 this.style.flexDirection = 'row'; |
| 71 |
| 72 const title = this.querySelector('.title'); |
| 73 title.style.fontWeight = 'bold'; |
| 74 title.style.marginLeft = '5px'; |
| 75 title.style.marginRight = '5px'; |
| 76 |
131 this.pictureAsImageData_ = undefined; | 77 this.pictureAsImageData_ = undefined; |
132 this.showOverdraw_ = false; | 78 this.showOverdraw_ = false; |
133 this.zoomScaleValue_ = 1; | 79 this.zoomScaleValue_ = 1; |
134 | 80 |
135 this.sizeInfo_ = Polymer.dom(this).querySelector('.size'); | 81 this.sizeInfo_ = Polymer.dom(this).querySelector('.size'); |
136 this.rasterArea_ = Polymer.dom(this).querySelector('raster-area'); | 82 this.rasterArea_ = Polymer.dom(this).querySelector('raster-area'); |
| 83 this.rasterArea_.style.backgroundColor = '#ddd'; |
| 84 this.rasterArea_.style.minHeight = '200px'; |
| 85 this.rasterArea_.style.minWidth = '200px'; |
| 86 this.rasterArea_.style.overflowY = 'auto'; |
| 87 this.rasterArea_.style.paddingLeft = '5px'; |
137 this.rasterCanvas_ = Polymer.dom(this.rasterArea_) | 88 this.rasterCanvas_ = Polymer.dom(this.rasterArea_) |
138 .querySelector('canvas'); | 89 .querySelector('canvas'); |
139 this.rasterCtx_ = this.rasterCanvas_.getContext('2d'); | 90 this.rasterCtx_ = this.rasterCanvas_.getContext('2d'); |
140 | 91 |
141 this.filename_ = Polymer.dom(this).querySelector('.filename'); | 92 this.filename_ = Polymer.dom(this).querySelector('.filename'); |
| 93 this.filename_.style.userSelect = 'text'; |
| 94 this.filename_.style.marginLeft = '5px'; |
142 | 95 |
143 this.drawOpsChartSummaryView_ = | 96 this.drawOpsChartSummaryView_ = |
144 new tr.ui.e.chrome.cc.PictureOpsChartSummaryView(); | 97 new tr.ui.e.chrome.cc.PictureOpsChartSummaryView(); |
145 this.drawOpsChartView_ = new tr.ui.e.chrome.cc.PictureOpsChartView(); | 98 this.drawOpsChartView_ = new tr.ui.e.chrome.cc.PictureOpsChartView(); |
146 this.drawOpsChartView_.addEventListener( | 99 this.drawOpsChartView_.addEventListener( |
147 'selection-changed', this.onChartBarClicked_.bind(this)); | 100 'selection-changed', this.onChartBarClicked_.bind(this)); |
148 | 101 |
149 this.exportButton_ = Polymer.dom(this).querySelector('.export'); | 102 this.exportButton_ = Polymer.dom(this).querySelector('.export'); |
150 this.exportButton_.addEventListener( | 103 this.exportButton_.addEventListener( |
151 'click', this.onSaveAsSkPictureClicked_.bind(this)); | 104 'click', this.onSaveAsSkPictureClicked_.bind(this)); |
152 | 105 |
153 this.trackMouse_(); | 106 this.trackMouse_(); |
154 | 107 |
155 const overdrawCheckbox = tr.ui.b.createCheckBox( | 108 const overdrawCheckbox = tr.ui.b.createCheckBox( |
156 this, 'showOverdraw', | 109 this, 'showOverdraw', |
157 'pictureView.showOverdraw', false, | 110 'pictureView.showOverdraw', false, |
158 'Show overdraw'); | 111 'Show overdraw'); |
159 | 112 |
160 const chartCheckbox = tr.ui.b.createCheckBox( | 113 const chartCheckbox = tr.ui.b.createCheckBox( |
161 this, 'showSummaryChart', | 114 this, 'showSummaryChart', |
162 'pictureView.showSummaryChart', false, | 115 'pictureView.showSummaryChart', false, |
163 'Show timing summary'); | 116 'Show timing summary'); |
164 | 117 |
165 const pictureInfo = Polymer.dom(this).querySelector('picture-info'); | 118 const pictureInfo = Polymer.dom(this).querySelector('picture-info'); |
| 119 pictureInfo.style.flexGrow = 0; |
| 120 pictureInfo.style.flexShrink = 0; |
| 121 pictureInfo.style.flexBasis = 'auto'; |
| 122 pictureInfo.style.paddingTop = '2px'; |
166 Polymer.dom(pictureInfo).appendChild(overdrawCheckbox); | 123 Polymer.dom(pictureInfo).appendChild(overdrawCheckbox); |
167 Polymer.dom(pictureInfo).appendChild(chartCheckbox); | 124 Polymer.dom(pictureInfo).appendChild(chartCheckbox); |
168 | 125 |
169 this.drawOpsView_ = new tr.ui.e.chrome.cc.PictureOpsListView(); | 126 this.drawOpsView_ = new tr.ui.e.chrome.cc.PictureOpsListView(); |
170 this.drawOpsView_.addEventListener( | 127 this.drawOpsView_.addEventListener( |
171 'selection-changed', this.onChangeDrawOps_.bind(this)); | 128 'selection-changed', this.onChangeDrawOps_.bind(this)); |
172 | 129 |
173 const leftPanel = Polymer.dom(this).querySelector('left-panel'); | 130 const leftPanel = Polymer.dom(this).querySelector('left-panel'); |
| 131 leftPanel.style.flexDirection = 'column'; |
| 132 leftPanel.style.display = 'flex'; |
| 133 leftPanel.style.minWidth = '300px'; |
174 Polymer.dom(leftPanel).appendChild(this.drawOpsChartSummaryView_); | 134 Polymer.dom(leftPanel).appendChild(this.drawOpsChartSummaryView_); |
175 Polymer.dom(leftPanel).appendChild(this.drawOpsView_); | 135 Polymer.dom(leftPanel).appendChild(this.drawOpsView_); |
176 | 136 |
177 const middleDragHandle = document.createElement('tr-ui-b-drag-handle'); | 137 const middleDragHandle = document.createElement('tr-ui-b-drag-handle'); |
| 138 middleDragHandle.style.flexGrow = 0; |
| 139 middleDragHandle.style.flexShrink = 0; |
| 140 middleDragHandle.style.flexBasis = 'auto'; |
178 middleDragHandle.horizontal = false; | 141 middleDragHandle.horizontal = false; |
179 middleDragHandle.target = leftPanel; | 142 middleDragHandle.target = leftPanel; |
180 | 143 |
181 const rightPanel = Polymer.dom(this).querySelector('right-panel'); | 144 const rightPanel = Polymer.dom(this).querySelector('right-panel'); |
182 rightPanel.replaceChild( | 145 rightPanel.style.flexGrow = 1; |
183 this.drawOpsChartView_, Polymer.dom(rightPanel) | 146 rightPanel.style.flexShrink = 1; |
184 .querySelector('tr-ui-e-chrome-cc-picture-ops-chart-view')); | 147 rightPanel.style.flexBasis = 'auto'; |
| 148 rightPanel.style.flexDirection = 'column'; |
| 149 rightPanel.style.display = 'flex'; |
| 150 const chartView = Polymer.dom(rightPanel).querySelector( |
| 151 'tr-ui-e-chrome-cc-picture-ops-chart-view'); |
| 152 chartView.style.minHeight = '150px'; |
| 153 chartView.style.minWidth = 0; |
| 154 chartView.style.overflowX = 'auto'; |
| 155 chartView.style.overflowY = 'hidden'; |
| 156 rightPanel.replaceChild(this.drawOpsChartView_, chartView); |
185 | 157 |
186 this.infoBar_ = document.createElement('tr-ui-b-info-bar'); | 158 this.infoBar_ = document.createElement('tr-ui-b-info-bar'); |
187 Polymer.dom(this.rasterArea_).appendChild(this.infoBar_); | 159 Polymer.dom(this.rasterArea_).appendChild(this.infoBar_); |
188 | 160 |
189 Polymer.dom(this).insertBefore(middleDragHandle, rightPanel); | 161 Polymer.dom(this).insertBefore(middleDragHandle, rightPanel); |
190 | 162 |
191 this.picture_ = undefined; | 163 this.picture_ = undefined; |
192 | 164 |
193 const hkc = document.createElement('tv-ui-b-hotkey-controller'); | 165 const hkc = document.createElement('tv-ui-b-hotkey-controller'); |
194 hkc.addHotKey(new tr.ui.b.HotKey({ | 166 hkc.addHotKey(new tr.ui.b.HotKey({ |
(...skipping 292 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
487 y: e.clientY - this.rasterArea_.offsetTop | 459 y: e.clientY - this.rasterArea_.offsetTop |
488 }; | 460 }; |
489 } | 461 } |
490 }; | 462 }; |
491 | 463 |
492 return { | 464 return { |
493 PictureDebugger, | 465 PictureDebugger, |
494 }; | 466 }; |
495 }); | 467 }); |
496 </script> | 468 </script> |
OLD | NEW |