Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(17)

Side by Side Diff: tracing/tracing/ui/extras/chrome/cc/layer_picker.html

Issue 1923953003: [polymer] Switches .appendChild() to Polymer.dom()...appendChild() (Closed) Base URL: git@github.com:catapult-project/catapult.git@polymer10-migration
Patch Set: Created 4 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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
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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698