| 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/color_scheme.html"> | 8 <link rel="import" href="/tracing/base/color_scheme.html"> |
| 9 <link rel="import" href="/tracing/ui/base/draw_helpers.html"> | 9 <link rel="import" href="/tracing/ui/base/draw_helpers.html"> |
| 10 <link rel="import" href="/tracing/ui/base/ui.html"> | 10 <link rel="import" href="/tracing/ui/base/ui.html"> |
| (...skipping 105 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 116 this.model_.addEventListener('annotationChange', | 116 this.model_.addEventListener('annotationChange', |
| 117 this.updateAnnotations_.bind(this)); | 117 this.updateAnnotations_.bind(this)); |
| 118 }, | 118 }, |
| 119 | 119 |
| 120 get hasVisibleContent() { | 120 get hasVisibleContent() { |
| 121 return this.children.length > 0; | 121 return this.children.length > 0; |
| 122 }, | 122 }, |
| 123 | 123 |
| 124 updateContents_: function() { | 124 updateContents_: function() { |
| 125 Polymer.dom(this).textContent = ''; | 125 Polymer.dom(this).textContent = ''; |
| 126 if (!this.model_) | 126 if (!this.model_) return; |
| 127 return; | |
| 128 | 127 |
| 129 if (this.upperMode_) | 128 if (this.upperMode_) { |
| 130 this.updateContentsForUpperMode_(); | 129 this.updateContentsForUpperMode_(); |
| 131 else | 130 } else { |
| 132 this.updateContentsForLowerMode_(); | 131 this.updateContentsForLowerMode_(); |
| 132 } |
| 133 }, | 133 }, |
| 134 | 134 |
| 135 updateContentsForUpperMode_: function() { | 135 updateContentsForUpperMode_: function() { |
| 136 }, | 136 }, |
| 137 | 137 |
| 138 updateContentsForLowerMode_: function() { | 138 updateContentsForLowerMode_: function() { |
| 139 if (this.model_.userModel.expectations.length > 1) { | 139 if (this.model_.userModel.expectations.length > 1) { |
| 140 var mrt = new tr.ui.tracks.InteractionTrack(this.viewport_); | 140 var mrt = new tr.ui.tracks.InteractionTrack(this.viewport_); |
| 141 mrt.model = this.model_; | 141 mrt.model = this.model_; |
| 142 Polymer.dom(this).appendChild(mrt); | 142 Polymer.dom(this).appendChild(mrt); |
| (...skipping 17 matching lines...) Expand all Loading... |
| 160 | 160 |
| 161 // Get a sorted list of processes. | 161 // Get a sorted list of processes. |
| 162 var processes = this.model_.getAllProcesses(); | 162 var processes = this.model_.getAllProcesses(); |
| 163 processes.sort(tr.model.Process.compare); | 163 processes.sort(tr.model.Process.compare); |
| 164 | 164 |
| 165 for (var i = 0; i < processes.length; ++i) { | 165 for (var i = 0; i < processes.length; ++i) { |
| 166 var process = processes[i]; | 166 var process = processes[i]; |
| 167 | 167 |
| 168 var track = new tr.ui.tracks.ProcessTrack(this.viewport); | 168 var track = new tr.ui.tracks.ProcessTrack(this.viewport); |
| 169 track.process = process; | 169 track.process = process; |
| 170 if (!track.hasVisibleContent) | 170 if (!track.hasVisibleContent) continue; |
| 171 continue; | |
| 172 | 171 |
| 173 Polymer.dom(this).appendChild(track); | 172 Polymer.dom(this).appendChild(track); |
| 174 } | 173 } |
| 175 this.viewport_.rebuildEventToTrackMap(); | 174 this.viewport_.rebuildEventToTrackMap(); |
| 176 this.viewport_.rebuildContainerToTrackMap(); | 175 this.viewport_.rebuildContainerToTrackMap(); |
| 177 this.vSyncTimes_ = this.model_.device.vSyncTimestamps; | 176 this.vSyncTimes_ = this.model_.device.vSyncTimestamps; |
| 178 | 177 |
| 179 this.updateAnnotations_(); | 178 this.updateAnnotations_(); |
| 180 }, | 179 }, |
| 181 | 180 |
| (...skipping 11 matching lines...) Expand all Loading... |
| 193 this.annotationViews_ = []; | 192 this.annotationViews_ = []; |
| 194 var annotations = this.model_.getAllAnnotations(); | 193 var annotations = this.model_.getAllAnnotations(); |
| 195 for (var i = 0; i < annotations.length; i++) { | 194 for (var i = 0; i < annotations.length; i++) { |
| 196 this.annotationViews_.push( | 195 this.annotationViews_.push( |
| 197 annotations[i].getOrCreateView(this.viewport_)); | 196 annotations[i].getOrCreateView(this.viewport_)); |
| 198 } | 197 } |
| 199 this.invalidateDrawingContainer(); | 198 this.invalidateDrawingContainer(); |
| 200 }, | 199 }, |
| 201 | 200 |
| 202 addEventsToTrackMap: function(eventToTrackMap) { | 201 addEventsToTrackMap: function(eventToTrackMap) { |
| 203 if (!this.model_) | 202 if (!this.model_) return; |
| 204 return; | |
| 205 | 203 |
| 206 var tracks = this.children; | 204 var tracks = this.children; |
| 207 for (var i = 0; i < tracks.length; ++i) | 205 for (var i = 0; i < tracks.length; ++i) { |
| 208 tracks[i].addEventsToTrackMap(eventToTrackMap); | 206 tracks[i].addEventsToTrackMap(eventToTrackMap); |
| 207 } |
| 209 | 208 |
| 210 if (this.instantEvents === undefined) | 209 if (this.instantEvents === undefined) return; |
| 211 return; | |
| 212 | 210 |
| 213 var vp = this.viewport_; | 211 var vp = this.viewport_; |
| 214 this.instantEvents.forEach(function(ev) { | 212 this.instantEvents.forEach(function(ev) { |
| 215 eventToTrackMap.addEvent(ev, this); | 213 eventToTrackMap.addEvent(ev, this); |
| 216 }.bind(this)); | 214 }.bind(this)); |
| 217 }, | 215 }, |
| 218 | 216 |
| 219 appendDeviceTrack_: function() { | 217 appendDeviceTrack_: function() { |
| 220 var device = this.model.device; | 218 var device = this.model.device; |
| 221 var track = new tr.ui.tracks.DeviceTrack(this.viewport); | 219 var track = new tr.ui.tracks.DeviceTrack(this.viewport); |
| 222 track.device = this.model.device; | 220 track.device = this.model.device; |
| 223 if (!track.hasVisibleContent) | 221 if (!track.hasVisibleContent) return; |
| 224 return; | |
| 225 Polymer.dom(this).appendChild(track); | 222 Polymer.dom(this).appendChild(track); |
| 226 }, | 223 }, |
| 227 | 224 |
| 228 appendKernelTrack_: function() { | 225 appendKernelTrack_: function() { |
| 229 var kernel = this.model.kernel; | 226 var kernel = this.model.kernel; |
| 230 var track = new tr.ui.tracks.KernelTrack(this.viewport); | 227 var track = new tr.ui.tracks.KernelTrack(this.viewport); |
| 231 track.kernel = this.model.kernel; | 228 track.kernel = this.model.kernel; |
| 232 if (!track.hasVisibleContent) | 229 if (!track.hasVisibleContent) return; |
| 233 return; | |
| 234 Polymer.dom(this).appendChild(track); | 230 Polymer.dom(this).appendChild(track); |
| 235 }, | 231 }, |
| 236 | 232 |
| 237 appendCpuUsageTrack_: function() { | 233 appendCpuUsageTrack_: function() { |
| 238 var track = new tr.ui.tracks.CpuUsageTrack(this.viewport); | 234 var track = new tr.ui.tracks.CpuUsageTrack(this.viewport); |
| 239 track.initialize(this.model); | 235 track.initialize(this.model); |
| 240 if (!track.hasVisibleContent) | 236 if (!track.hasVisibleContent) return; |
| 241 return; | 237 |
| 242 this.appendChild(track); | 238 this.appendChild(track); |
| 243 }, | 239 }, |
| 244 | 240 |
| 245 appendCpuUsageTrack_: function() { | 241 appendCpuUsageTrack_: function() { |
| 246 var track = new tr.ui.tracks.CpuUsageTrack(this.viewport); | 242 var track = new tr.ui.tracks.CpuUsageTrack(this.viewport); |
| 247 track.initialize(this.model); | 243 track.initialize(this.model); |
| 248 if (!track.hasVisibleContent) | 244 if (!track.hasVisibleContent) return; |
| 249 return; | 245 |
| 250 this.appendChild(track); | 246 this.appendChild(track); |
| 251 }, | 247 }, |
| 252 | 248 |
| 253 drawTrack: function(type) { | 249 drawTrack: function(type) { |
| 254 var ctx = this.context(); | 250 var ctx = this.context(); |
| 255 if (!this.model_) | 251 if (!this.model_) return; |
| 256 return; | |
| 257 | 252 |
| 258 var pixelRatio = window.devicePixelRatio || 1; | 253 var pixelRatio = window.devicePixelRatio || 1; |
| 259 var bounds = this.getBoundingClientRect(); | 254 var bounds = this.getBoundingClientRect(); |
| 260 var canvasBounds = ctx.canvas.getBoundingClientRect(); | 255 var canvasBounds = ctx.canvas.getBoundingClientRect(); |
| 261 | 256 |
| 262 ctx.save(); | 257 ctx.save(); |
| 263 ctx.translate(0, pixelRatio * (bounds.top - canvasBounds.top)); | 258 ctx.translate(0, pixelRatio * (bounds.top - canvasBounds.top)); |
| 264 | 259 |
| 265 var dt = this.viewport.currentDisplayTransform; | 260 var dt = this.viewport.currentDisplayTransform; |
| 266 var viewLWorld = dt.xViewToWorld(0); | 261 var viewLWorld = dt.xViewToWorld(0); |
| (...skipping 11 matching lines...) Expand all Loading... |
| 278 ctx.restore(); | 273 ctx.restore(); |
| 279 return; | 274 return; |
| 280 } | 275 } |
| 281 | 276 |
| 282 this.drawFlowArrows_(viewLWorld, viewRWorld); | 277 this.drawFlowArrows_(viewLWorld, viewRWorld); |
| 283 ctx.restore(); | 278 ctx.restore(); |
| 284 return; | 279 return; |
| 285 | 280 |
| 286 case tr.ui.tracks.DrawType.INSTANT_EVENT: | 281 case tr.ui.tracks.DrawType.INSTANT_EVENT: |
| 287 if (!this.model_.instantEvents || | 282 if (!this.model_.instantEvents || |
| 288 this.model_.instantEvents.length === 0) | 283 this.model_.instantEvents.length === 0) { |
| 289 break; | 284 break; |
| 285 } |
| 290 | 286 |
| 291 tr.ui.b.drawInstantSlicesAsLines( | 287 tr.ui.b.drawInstantSlicesAsLines( |
| 292 ctx, | 288 ctx, |
| 293 this.viewport.currentDisplayTransform, | 289 this.viewport.currentDisplayTransform, |
| 294 viewLWorld, | 290 viewLWorld, |
| 295 viewRWorld, | 291 viewRWorld, |
| 296 bounds.height, | 292 bounds.height, |
| 297 this.model_.instantEvents, | 293 this.model_.instantEvents, |
| 298 4); | 294 4); |
| 299 | 295 |
| (...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 339 | 335 |
| 340 var events = | 336 var events = |
| 341 this.model_.flowIntervalTree.findIntersection(viewLWorld, viewRWorld); | 337 this.model_.flowIntervalTree.findIntersection(viewLWorld, viewRWorld); |
| 342 | 338 |
| 343 // When not showing flow events, show only highlighted/selected ones. | 339 // When not showing flow events, show only highlighted/selected ones. |
| 344 var onlyHighlighted = !this.viewport.showFlowEvents; | 340 var onlyHighlighted = !this.viewport.showFlowEvents; |
| 345 var canvasBounds = ctx.canvas.getBoundingClientRect(); | 341 var canvasBounds = ctx.canvas.getBoundingClientRect(); |
| 346 for (var i = 0; i < events.length; ++i) { | 342 for (var i = 0; i < events.length; ++i) { |
| 347 if (onlyHighlighted && | 343 if (onlyHighlighted && |
| 348 events[i].selectionState !== SelectionState.SELECTED && | 344 events[i].selectionState !== SelectionState.SELECTED && |
| 349 events[i].selectionState !== SelectionState.HIGHLIGHTED) | 345 events[i].selectionState !== SelectionState.HIGHLIGHTED) { |
| 350 continue; | 346 continue; |
| 347 } |
| 351 this.drawFlowArrow_(ctx, events[i], canvasBounds, pixWidth); | 348 this.drawFlowArrow_(ctx, events[i], canvasBounds, pixWidth); |
| 352 } | 349 } |
| 353 }, | 350 }, |
| 354 | 351 |
| 355 drawFlowArrow_: function(ctx, flowEvent, | 352 drawFlowArrow_: function(ctx, flowEvent, |
| 356 canvasBounds, pixWidth) { | 353 canvasBounds, pixWidth) { |
| 357 var pixelRatio = window.devicePixelRatio || 1; | 354 var pixelRatio = window.devicePixelRatio || 1; |
| 358 | 355 |
| 359 var startTrack = this.viewport.trackForEvent(flowEvent.startSlice); | 356 var startTrack = this.viewport.trackForEvent(flowEvent.startSlice); |
| 360 var endTrack = this.viewport.trackForEvent(flowEvent.endSlice); | 357 var endTrack = this.viewport.trackForEvent(flowEvent.endSlice); |
| 361 | 358 |
| 362 // TODO(nduca): Figure out how to draw flow arrows even when | 359 // TODO(nduca): Figure out how to draw flow arrows even when |
| 363 // processes are collapsed, bug #931. | 360 // processes are collapsed, bug #931. |
| 364 if (startTrack === undefined || endTrack === undefined) | 361 if (startTrack === undefined || endTrack === undefined) return; |
| 365 return; | |
| 366 | 362 |
| 367 var startBounds = startTrack.getBoundingClientRect(); | 363 var startBounds = startTrack.getBoundingClientRect(); |
| 368 var endBounds = endTrack.getBoundingClientRect(); | 364 var endBounds = endTrack.getBoundingClientRect(); |
| 369 | 365 |
| 370 if (flowEvent.selectionState === SelectionState.SELECTED) { | 366 if (flowEvent.selectionState === SelectionState.SELECTED) { |
| 371 ctx.shadowBlur = 1; | 367 ctx.shadowBlur = 1; |
| 372 ctx.shadowColor = 'red'; | 368 ctx.shadowColor = 'red'; |
| 373 ctx.shadowOffsety = 2; | 369 ctx.shadowOffsety = 2; |
| 374 ctx.strokeStyle = 'red'; | 370 ctx.strokeStyle = 'red'; |
| 375 } else if (flowEvent.selectionState === SelectionState.HIGHLIGHTED) { | 371 } else if (flowEvent.selectionState === SelectionState.HIGHLIGHTED) { |
| (...skipping 23 matching lines...) Expand all Loading... |
| 399 ctx.shadowOffsetX = 0; | 395 ctx.shadowOffsetX = 0; |
| 400 ctx.strokeStyle = 'rgba(0, 0, 0, 0.4)'; | 396 ctx.strokeStyle = 'rgba(0, 0, 0, 0.4)'; |
| 401 } | 397 } |
| 402 } | 398 } |
| 403 | 399 |
| 404 var startSize = startBounds.left + startBounds.top + | 400 var startSize = startBounds.left + startBounds.top + |
| 405 startBounds.bottom + startBounds.right; | 401 startBounds.bottom + startBounds.right; |
| 406 var endSize = endBounds.left + endBounds.top + | 402 var endSize = endBounds.left + endBounds.top + |
| 407 endBounds.bottom + endBounds.right; | 403 endBounds.bottom + endBounds.right; |
| 408 // Nothing to do if both ends of the track are collapsed. | 404 // Nothing to do if both ends of the track are collapsed. |
| 409 if (startSize === 0 && endSize === 0) | 405 if (startSize === 0 && endSize === 0) return; |
| 410 return; | |
| 411 | 406 |
| 412 var startY = this.calculateTrackY_(startTrack, canvasBounds); | 407 var startY = this.calculateTrackY_(startTrack, canvasBounds); |
| 413 var endY = this.calculateTrackY_(endTrack, canvasBounds); | 408 var endY = this.calculateTrackY_(endTrack, canvasBounds); |
| 414 | 409 |
| 415 var pixelStartY = pixelRatio * startY; | 410 var pixelStartY = pixelRatio * startY; |
| 416 var pixelEndY = pixelRatio * endY; | 411 var pixelEndY = pixelRatio * endY; |
| 417 var half = (flowEvent.end - flowEvent.start) / 2; | 412 var half = (flowEvent.end - flowEvent.start) / 2; |
| 418 | 413 |
| 419 ctx.beginPath(); | 414 ctx.beginPath(); |
| 420 ctx.moveTo(flowEvent.start, pixelStartY); | 415 ctx.moveTo(flowEvent.start, pixelStartY); |
| 421 ctx.bezierCurveTo( | 416 ctx.bezierCurveTo( |
| 422 flowEvent.start + half, pixelStartY, | 417 flowEvent.start + half, pixelStartY, |
| 423 flowEvent.start + half, pixelEndY, | 418 flowEvent.start + half, pixelEndY, |
| 424 flowEvent.end, pixelEndY); | 419 flowEvent.end, pixelEndY); |
| 425 ctx.stroke(); | 420 ctx.stroke(); |
| 426 | 421 |
| 427 var arrowWidth = 5 * pixWidth * pixelRatio; | 422 var arrowWidth = 5 * pixWidth * pixelRatio; |
| 428 var distance = flowEvent.end - flowEvent.start; | 423 var distance = flowEvent.end - flowEvent.start; |
| 429 if (distance <= (2 * arrowWidth)) | 424 if (distance <= (2 * arrowWidth)) return; |
| 430 return; | |
| 431 | 425 |
| 432 var tipX = flowEvent.end; | 426 var tipX = flowEvent.end; |
| 433 var tipY = pixelEndY; | 427 var tipY = pixelEndY; |
| 434 var arrowHeight = (endBounds.height / 4) * pixelRatio; | 428 var arrowHeight = (endBounds.height / 4) * pixelRatio; |
| 435 tr.ui.b.drawTriangle(ctx, | 429 tr.ui.b.drawTriangle(ctx, |
| 436 tipX, tipY, | 430 tipX, tipY, |
| 437 tipX - arrowWidth, tipY - arrowHeight, | 431 tipX - arrowWidth, tipY - arrowHeight, |
| 438 tipX - arrowWidth, tipY + arrowHeight); | 432 tipX - arrowWidth, tipY + arrowHeight); |
| 439 ctx.fill(); | 433 ctx.fill(); |
| 440 }, | 434 }, |
| (...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 479 for (var i = 0; i < stripes.length; i++) { | 473 for (var i = 0; i < stripes.length; i++) { |
| 480 var xLeftView = dt.xWorldToView(stripes[i].min); | 474 var xLeftView = dt.xWorldToView(stripes[i].min); |
| 481 var xRightView = dt.xWorldToView(stripes[i].max); | 475 var xRightView = dt.xWorldToView(stripes[i].max); |
| 482 ctx.fillRect(xLeftView, 0, xRightView - xLeftView, height); | 476 ctx.fillRect(xLeftView, 0, xRightView - xLeftView, height); |
| 483 } | 477 } |
| 484 }, | 478 }, |
| 485 | 479 |
| 486 calculateTrackY_: function(track, canvasBounds) { | 480 calculateTrackY_: function(track, canvasBounds) { |
| 487 var bounds = track.getBoundingClientRect(); | 481 var bounds = track.getBoundingClientRect(); |
| 488 var size = bounds.left + bounds.top + bounds.bottom + bounds.right; | 482 var size = bounds.left + bounds.top + bounds.bottom + bounds.right; |
| 489 if (size === 0) | 483 if (size === 0) { |
| 490 return this.calculateTrackY_( | 484 return this.calculateTrackY_( |
| 491 Polymer.dom(track).parentNode, canvasBounds); | 485 Polymer.dom(track).parentNode, canvasBounds); |
| 486 } |
| 492 | 487 |
| 493 return bounds.top - canvasBounds.top + (bounds.height / 2); | 488 return bounds.top - canvasBounds.top + (bounds.height / 2); |
| 494 }, | 489 }, |
| 495 | 490 |
| 496 addIntersectingEventsInRangeToSelectionInWorldSpace: function( | 491 addIntersectingEventsInRangeToSelectionInWorldSpace: function( |
| 497 loWX, hiWX, viewPixWidthWorld, selection) { | 492 loWX, hiWX, viewPixWidthWorld, selection) { |
| 498 function onPickHit(instantEvent) { | 493 function onPickHit(instantEvent) { |
| 499 selection.push(instantEvent); | 494 selection.push(instantEvent); |
| 500 } | 495 } |
| 501 var instantEventWidth = 3 * viewPixWidthWorld; | 496 var instantEventWidth = 3 * viewPixWidthWorld; |
| (...skipping 15 matching lines...) Expand all Loading... |
| 517 tr.ui.tracks.ContainerTrack.prototype.addClosestEventToSelection. | 512 tr.ui.tracks.ContainerTrack.prototype.addClosestEventToSelection. |
| 518 apply(this, arguments); | 513 apply(this, arguments); |
| 519 } | 514 } |
| 520 }; | 515 }; |
| 521 | 516 |
| 522 return { | 517 return { |
| 523 ModelTrack, | 518 ModelTrack, |
| 524 }; | 519 }; |
| 525 }); | 520 }); |
| 526 </script> | 521 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2776653002:
[ESLint] Fix violations when enabling curly rule in eslint. (Closed)
