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="stylesheet" href="/tracing/ui/extras/chrome/cc/layer_picker.css"> | 8 <link rel="stylesheet" href="/tracing/ui/extras/chrome/cc/layer_picker.css"> |
9 | 9 |
10 <link rel="import" href="/tracing/extras/chrome/cc/constants.html"> | 10 <link rel="import" href="/tracing/extras/chrome/cc/constants.html"> |
(...skipping 30 matching lines...) Expand all Loading... |
41 | 41 |
42 | 42 |
43 this.itemList_ = new tr.ui.b.ListView(); | 43 this.itemList_ = new tr.ui.b.ListView(); |
44 Polymer.dom(this).appendChild(this.controls_); | 44 Polymer.dom(this).appendChild(this.controls_); |
45 | 45 |
46 Polymer.dom(this).appendChild(this.itemList_); | 46 Polymer.dom(this).appendChild(this.itemList_); |
47 | 47 |
48 this.itemList_.addEventListener( | 48 this.itemList_.addEventListener( |
49 'selection-changed', this.onItemSelectionChanged_.bind(this)); | 49 'selection-changed', this.onItemSelectionChanged_.bind(this)); |
50 | 50 |
51 this.controls_.appendChild(tr.ui.b.createSelector( | 51 Polymer.dom(this.controls_).appendChild(tr.ui.b.createSelector( |
52 this, 'whichTree', | 52 this, 'whichTree', |
53 'layerPicker.whichTree', constants.ACTIVE_TREE, | 53 'layerPicker.whichTree', constants.ACTIVE_TREE, |
54 [{label: 'Active tree', value: constants.ACTIVE_TREE}, | 54 [{label: 'Active tree', value: constants.ACTIVE_TREE}, |
55 {label: 'Pending tree', value: constants.PENDING_TREE}, | 55 {label: 'Pending tree', value: constants.PENDING_TREE}, |
56 {label: 'Render pass quads', value: RENDER_PASS_QUADS}])); | 56 {label: 'Render pass quads', value: RENDER_PASS_QUADS}])); |
57 | 57 |
58 this.showPureTransformLayers_ = false; | 58 this.showPureTransformLayers_ = false; |
59 var showPureTransformLayers = tr.ui.b.createCheckBox( | 59 var showPureTransformLayers = tr.ui.b.createCheckBox( |
60 this, 'showPureTransformLayers', | 60 this, 'showPureTransformLayers', |
61 'layerPicker.showPureTransformLayers', false, | 61 'layerPicker.showPureTransformLayers', false, |
62 'Transform layers'); | 62 'Transform layers'); |
63 showPureTransformLayers.classList.add('show-transform-layers'); | 63 showPureTransformLayers.classList.add('show-transform-layers'); |
64 showPureTransformLayers.title = | 64 showPureTransformLayers.title = |
65 'When checked, pure transform layers are shown'; | 65 'When checked, pure transform layers are shown'; |
66 this.controls_.appendChild(showPureTransformLayers); | 66 Polymer.dom(this.controls_).appendChild(showPureTransformLayers); |
67 }, | 67 }, |
68 | 68 |
69 get lthiSnapshot() { | 69 get lthiSnapshot() { |
70 return this.lthiSnapshot_; | 70 return this.lthiSnapshot_; |
71 }, | 71 }, |
72 | 72 |
73 set lthiSnapshot(lthiSnapshot) { | 73 set lthiSnapshot(lthiSnapshot) { |
74 this.lthiSnapshot_ = lthiSnapshot; | 74 this.lthiSnapshot_ = lthiSnapshot; |
75 this.updateContents_(); | 75 this.updateContents_(); |
76 }, | 76 }, |
(...skipping 113 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
190 var selectedRenderPassId; | 190 var selectedRenderPassId; |
191 if (this.selection_ && this.selection_.associatedRenderPassId) | 191 if (this.selection_ && this.selection_.associatedRenderPassId) |
192 selectedRenderPassId = this.selection_.associatedRenderPassId; | 192 selectedRenderPassId = this.selection_.associatedRenderPassId; |
193 | 193 |
194 var renderPassInfos = this.getRenderPassInfos_(); | 194 var renderPassInfos = this.getRenderPassInfos_(); |
195 renderPassInfos.forEach(function(renderPassInfo) { | 195 renderPassInfos.forEach(function(renderPassInfo) { |
196 var renderPass = renderPassInfo.renderPass; | 196 var renderPass = renderPassInfo.renderPass; |
197 var id = renderPassInfo.id; | 197 var id = renderPassInfo.id; |
198 | 198 |
199 var item = this.createElementWithDepth_(renderPassInfo.depth); | 199 var item = this.createElementWithDepth_(renderPassInfo.depth); |
200 var labelEl = item.appendChild(tr.ui.b.createSpan()); | 200 var labelEl = Polymer.dom(item).appendChild(tr.ui.b.createSpan()); |
201 | 201 |
202 labelEl.textContent = renderPassInfo.name + ' ' + id; | 202 labelEl.textContent = renderPassInfo.name + ' ' + id; |
203 item.renderPass = renderPass; | 203 item.renderPass = renderPass; |
204 item.renderPassId = id; | 204 item.renderPassId = id; |
205 this.itemList_.appendChild(item); | 205 Polymer.dom(this.itemList_).appendChild(item); |
206 | 206 |
207 if (id == selectedRenderPassId) { | 207 if (id == selectedRenderPassId) { |
208 renderPass.selectionState = | 208 renderPass.selectionState = |
209 tr.model.SelectionState.SELECTED; | 209 tr.model.SelectionState.SELECTED; |
210 } | 210 } |
211 }, this); | 211 }, this); |
212 }, | 212 }, |
213 | 213 |
214 updateLayerContents_: function() { | 214 updateLayerContents_: function() { |
215 this.changingItemSelection_ = true; | 215 this.changingItemSelection_ = true; |
216 try { | 216 try { |
217 this.itemList_.clear(); | 217 this.itemList_.clear(); |
218 | 218 |
219 var selectedLayerId; | 219 var selectedLayerId; |
220 if (this.selection_ && this.selection_.associatedLayerId) | 220 if (this.selection_ && this.selection_.associatedLayerId) |
221 selectedLayerId = this.selection_.associatedLayerId; | 221 selectedLayerId = this.selection_.associatedLayerId; |
222 | 222 |
223 var layerInfos = this.getLayerInfos_(); | 223 var layerInfos = this.getLayerInfos_(); |
224 layerInfos.forEach(function(layerInfo) { | 224 layerInfos.forEach(function(layerInfo) { |
225 var layer = layerInfo.layer; | 225 var layer = layerInfo.layer; |
226 var id = layer.layerId; | 226 var id = layer.layerId; |
227 | 227 |
228 var item = this.createElementWithDepth_(layerInfo.depth); | 228 var item = this.createElementWithDepth_(layerInfo.depth); |
229 var labelEl = item.appendChild(tr.ui.b.createSpan()); | 229 var labelEl = Polymer.dom(item).appendChild(tr.ui.b.createSpan()); |
230 | 230 |
231 labelEl.textContent = layerInfo.name + ' ' + id; | 231 labelEl.textContent = layerInfo.name + ' ' + id; |
232 | 232 |
233 var notesEl = item.appendChild(tr.ui.b.createSpan()); | 233 var notesEl = Polymer.dom(item).appendChild(tr.ui.b.createSpan()); |
234 if (layerInfo.isMaskLayer) | 234 if (layerInfo.isMaskLayer) |
235 notesEl.textContent += '(mask)'; | 235 notesEl.textContent += '(mask)'; |
236 if (layerInfo.isReplicaLayer) | 236 if (layerInfo.isReplicaLayer) |
237 notesEl.textContent += '(replica)'; | 237 notesEl.textContent += '(replica)'; |
238 | 238 |
239 if (layer.gpuMemoryUsageInBytes !== undefined) { | 239 if (layer.gpuMemoryUsageInBytes !== undefined) { |
240 var rounded = bytesToRoundedMegabytes(layer.gpuMemoryUsageInBytes); | 240 var rounded = bytesToRoundedMegabytes(layer.gpuMemoryUsageInBytes); |
241 if (rounded !== 0) | 241 if (rounded !== 0) |
242 notesEl.textContent += ' (' + rounded + ' MB)'; | 242 notesEl.textContent += ' (' + rounded + ' MB)'; |
243 } | 243 } |
244 | 244 |
245 item.layer = layer; | 245 item.layer = layer; |
246 this.itemList_.appendChild(item); | 246 Polymer.dom(this.itemList_).appendChild(item); |
247 | 247 |
248 if (layer.layerId == selectedLayerId) { | 248 if (layer.layerId == selectedLayerId) { |
249 layer.selectionState = tr.model.SelectionState.SELECTED; | 249 layer.selectionState = tr.model.SelectionState.SELECTED; |
250 item.selected = true; | 250 item.selected = true; |
251 } | 251 } |
252 }, this); | 252 }, this); |
253 } finally { | 253 } finally { |
254 this.changingItemSelection_ = false; | 254 this.changingItemSelection_ = false; |
255 } | 255 } |
256 }, | 256 }, |
257 | 257 |
258 createElementWithDepth_: function(depth) { | 258 createElementWithDepth_: function(depth) { |
259 var item = document.createElement('div'); | 259 var item = document.createElement('div'); |
260 | 260 |
261 var indentEl = item.appendChild(tr.ui.b.createSpan()); | 261 var indentEl = Polymer.dom(item).appendChild(tr.ui.b.createSpan()); |
262 indentEl.style.whiteSpace = 'pre'; | 262 indentEl.style.whiteSpace = 'pre'; |
263 for (var i = 0; i < depth; i++) | 263 for (var i = 0; i < depth; i++) |
264 indentEl.textContent = indentEl.textContent + ' '; | 264 indentEl.textContent = indentEl.textContent + ' '; |
265 return item; | 265 return item; |
266 }, | 266 }, |
267 | 267 |
268 onItemSelectionChanged_: function(e) { | 268 onItemSelectionChanged_: function(e) { |
269 if (this.changingItemSelection_) | 269 if (this.changingItemSelection_) |
270 return; | 270 return; |
271 if (this.renderPassQuads_) | 271 if (this.renderPassQuads_) |
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
313 this.selection_ = selection; | 313 this.selection_ = selection; |
314 this.updateContents_(); | 314 this.updateContents_(); |
315 } | 315 } |
316 }; | 316 }; |
317 | 317 |
318 return { | 318 return { |
319 LayerPicker: LayerPicker | 319 LayerPicker: LayerPicker |
320 }; | 320 }; |
321 }); | 321 }); |
322 </script> | 322 </script> |
OLD | NEW |