| 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 |