| 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"> |
| (...skipping 223 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 234 }, | 234 }, |
| 235 | 235 |
| 236 onSaveAsSkPictureClicked_: function() { | 236 onSaveAsSkPictureClicked_: function() { |
| 237 // Decode base64 data into a String | 237 // Decode base64 data into a String |
| 238 var rawData = tr.b.Base64.atob(this.picture_.getBase64SkpData()); | 238 var rawData = tr.b.Base64.atob(this.picture_.getBase64SkpData()); |
| 239 | 239 |
| 240 // Convert this String into an Uint8Array | 240 // Convert this String into an Uint8Array |
| 241 var length = rawData.length; | 241 var length = rawData.length; |
| 242 var arrayBuffer = new ArrayBuffer(length); | 242 var arrayBuffer = new ArrayBuffer(length); |
| 243 var uint8Array = new Uint8Array(arrayBuffer); | 243 var uint8Array = new Uint8Array(arrayBuffer); |
| 244 for (var c = 0; c < length; c++) | 244 for (var c = 0; c < length; c++) { |
| 245 uint8Array[c] = rawData.charCodeAt(c); | 245 uint8Array[c] = rawData.charCodeAt(c); |
| 246 } |
| 246 | 247 |
| 247 // Create a blob URL from the binary array. | 248 // Create a blob URL from the binary array. |
| 248 var blob = new Blob([uint8Array], {type: 'application/octet-binary'}); | 249 var blob = new Blob([uint8Array], {type: 'application/octet-binary'}); |
| 249 var blobUrl = window.webkitURL.createObjectURL(blob); | 250 var blobUrl = window.webkitURL.createObjectURL(blob); |
| 250 | 251 |
| 251 // Create a link and click on it. BEST API EVAR! | 252 // Create a link and click on it. BEST API EVAR! |
| 252 var link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a'); | 253 var link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a'); |
| 253 link.href = blobUrl; | 254 link.href = blobUrl; |
| 254 link.download = this.filename_.value; | 255 link.download = this.filename_.value; |
| 255 var event = document.createEvent('MouseEvents'); | 256 var event = document.createEvent('MouseEvents'); |
| (...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 296 var height = | 297 var height = |
| 297 Math.max(parseInt(style.height), this.picture_.layerRect.height); | 298 Math.max(parseInt(style.height), this.picture_.layerRect.height); |
| 298 | 299 |
| 299 return { | 300 return { |
| 300 width: width, | 301 width: width, |
| 301 height: height | 302 height: height |
| 302 }; | 303 }; |
| 303 }, | 304 }, |
| 304 | 305 |
| 305 scheduleUpdateContents_: function() { | 306 scheduleUpdateContents_: function() { |
| 306 if (this.updateContentsPending_) | 307 if (this.updateContentsPending_) return; |
| 307 return; | 308 |
| 308 this.updateContentsPending_ = true; | 309 this.updateContentsPending_ = true; |
| 309 tr.b.requestAnimationFrameInThisFrameIfPossible( | 310 tr.b.requestAnimationFrameInThisFrameIfPossible( |
| 310 this.updateContents_.bind(this) | 311 this.updateContents_.bind(this) |
| 311 ); | 312 ); |
| 312 }, | 313 }, |
| 313 | 314 |
| 314 updateContents_: function() { | 315 updateContents_: function() { |
| 315 this.updateContentsPending_ = false; | 316 this.updateContentsPending_ = false; |
| 316 | 317 |
| 317 if (this.picture_) { | 318 if (this.picture_) { |
| 318 Polymer.dom(this.sizeInfo_).textContent = '(' + | 319 Polymer.dom(this.sizeInfo_).textContent = '(' + |
| 319 this.picture_.layerRect.width + ' x ' + | 320 this.picture_.layerRect.width + ' x ' + |
| 320 this.picture_.layerRect.height + ')'; | 321 this.picture_.layerRect.height + ')'; |
| 321 } | 322 } |
| 322 | 323 |
| 323 this.drawOpsChartView_.updateChartContents(); | 324 this.drawOpsChartView_.updateChartContents(); |
| 324 this.drawOpsChartView_.scrollSelectedItemIntoViewIfNecessary(); | 325 this.drawOpsChartView_.scrollSelectedItemIntoViewIfNecessary(); |
| 325 | 326 |
| 326 // Return if picture hasn't finished rasterizing. | 327 // Return if picture hasn't finished rasterizing. |
| 327 if (!this.pictureAsImageData_) | 328 if (!this.pictureAsImageData_) return; |
| 328 return; | |
| 329 | 329 |
| 330 this.infoBar_.visible = false; | 330 this.infoBar_.visible = false; |
| 331 this.infoBar_.removeAllButtons(); | 331 this.infoBar_.removeAllButtons(); |
| 332 if (this.pictureAsImageData_.error) { | 332 if (this.pictureAsImageData_.error) { |
| 333 this.infoBar_.message = 'Cannot rasterize...'; | 333 this.infoBar_.message = 'Cannot rasterize...'; |
| 334 this.infoBar_.addButton('More info...', function(e) { | 334 this.infoBar_.addButton('More info...', function(e) { |
| 335 var overlay = new tr.ui.b.Overlay(); | 335 var overlay = new tr.ui.b.Overlay(); |
| 336 Polymer.dom(overlay).textContent = this.pictureAsImageData_.error; | 336 Polymer.dom(overlay).textContent = this.pictureAsImageData_.error; |
| 337 overlay.visible = true; | 337 overlay.visible = true; |
| 338 e.stopPropagation(); | 338 e.stopPropagation(); |
| 339 return false; | 339 return false; |
| 340 }.bind(this)); | 340 }.bind(this)); |
| 341 this.infoBar_.visible = true; | 341 this.infoBar_.visible = true; |
| 342 } | 342 } |
| 343 | 343 |
| 344 this.drawPicture_(); | 344 this.drawPicture_(); |
| 345 }, | 345 }, |
| 346 | 346 |
| 347 drawPicture_: function() { | 347 drawPicture_: function() { |
| 348 var size = this.getRasterCanvasSize_(); | 348 var size = this.getRasterCanvasSize_(); |
| 349 if (size.width !== this.rasterCanvas_.width) | 349 if (size.width !== this.rasterCanvas_.width) { |
| 350 this.rasterCanvas_.width = size.width; | 350 this.rasterCanvas_.width = size.width; |
| 351 if (size.height !== this.rasterCanvas_.height) | 351 } |
| 352 if (size.height !== this.rasterCanvas_.height) { |
| 352 this.rasterCanvas_.height = size.height; | 353 this.rasterCanvas_.height = size.height; |
| 354 } |
| 353 | 355 |
| 354 this.rasterCtx_.clearRect(0, 0, size.width, size.height); | 356 this.rasterCtx_.clearRect(0, 0, size.width, size.height); |
| 355 | 357 |
| 356 if (!this.pictureAsImageData_.imageData) | 358 if (!this.pictureAsImageData_.imageData) return; |
| 357 return; | |
| 358 | 359 |
| 359 var imgCanvas = this.pictureAsImageData_.asCanvas(); | 360 var imgCanvas = this.pictureAsImageData_.asCanvas(); |
| 360 var w = imgCanvas.width; | 361 var w = imgCanvas.width; |
| 361 var h = imgCanvas.height; | 362 var h = imgCanvas.height; |
| 362 this.rasterCtx_.drawImage(imgCanvas, 0, 0, w, h, | 363 this.rasterCtx_.drawImage(imgCanvas, 0, 0, w, h, |
| 363 0, 0, w * this.zoomScaleValue_, | 364 0, 0, w * this.zoomScaleValue_, |
| 364 h * this.zoomScaleValue_); | 365 h * this.zoomScaleValue_); |
| 365 }, | 366 }, |
| 366 | 367 |
| 367 rasterize_: function() { | 368 rasterize_: function() { |
| (...skipping 47 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 415 this.drawOpsChartView_.selectedOpIndex = | 416 this.drawOpsChartView_.selectedOpIndex = |
| 416 this.drawOpsView_.selectedOpIndex; | 417 this.drawOpsView_.selectedOpIndex; |
| 417 }, | 418 }, |
| 418 | 419 |
| 419 set showOverdraw(v) { | 420 set showOverdraw(v) { |
| 420 this.showOverdraw_ = v; | 421 this.showOverdraw_ = v; |
| 421 this.rasterize_(); | 422 this.rasterize_(); |
| 422 }, | 423 }, |
| 423 | 424 |
| 424 set showSummaryChart(chartShouldBeVisible) { | 425 set showSummaryChart(chartShouldBeVisible) { |
| 425 if (chartShouldBeVisible) | 426 if (chartShouldBeVisible) { |
| 426 this.drawOpsChartSummaryView_.show(); | 427 this.drawOpsChartSummaryView_.show(); |
| 427 else | 428 } else { |
| 428 this.drawOpsChartSummaryView_.hide(); | 429 this.drawOpsChartSummaryView_.hide(); |
| 430 } |
| 429 }, | 431 }, |
| 430 | 432 |
| 431 trackMouse_: function() { | 433 trackMouse_: function() { |
| 432 this.mouseModeSelector_ = document.createElement( | 434 this.mouseModeSelector_ = document.createElement( |
| 433 'tr-ui-b-mouse-mode-selector'); | 435 'tr-ui-b-mouse-mode-selector'); |
| 434 this.mouseModeSelector_.targetElement = this.rasterArea_; | 436 this.mouseModeSelector_.targetElement = this.rasterArea_; |
| 435 Polymer.dom(this.rasterArea_).appendChild(this.mouseModeSelector_); | 437 Polymer.dom(this.rasterArea_).appendChild(this.mouseModeSelector_); |
| 436 | 438 |
| 437 this.mouseModeSelector_.supportedModeMask = | 439 this.mouseModeSelector_.supportedModeMask = |
| 438 tr.ui.b.MOUSE_SELECTOR_MODE.ZOOM; | 440 tr.ui.b.MOUSE_SELECTOR_MODE.ZOOM; |
| (...skipping 11 matching lines...) Expand all Loading... |
| 450 | 452 |
| 451 onBeginZoom_: function(e) { | 453 onBeginZoom_: function(e) { |
| 452 this.isZooming_ = true; | 454 this.isZooming_ = true; |
| 453 | 455 |
| 454 this.lastMouseViewPos_ = this.extractRelativeMousePosition_(e); | 456 this.lastMouseViewPos_ = this.extractRelativeMousePosition_(e); |
| 455 | 457 |
| 456 e.preventDefault(); | 458 e.preventDefault(); |
| 457 }, | 459 }, |
| 458 | 460 |
| 459 onUpdateZoom_: function(e) { | 461 onUpdateZoom_: function(e) { |
| 460 if (!this.isZooming_) | 462 if (!this.isZooming_) return; |
| 461 return; | |
| 462 | 463 |
| 463 var currentMouseViewPos = this.extractRelativeMousePosition_(e); | 464 var currentMouseViewPos = this.extractRelativeMousePosition_(e); |
| 464 | 465 |
| 465 // Take the distance the mouse has moved and we want to zoom at about | 466 // Take the distance the mouse has moved and we want to zoom at about |
| 466 // 1/1000th of that speed. 0.01 feels jumpy. This could possibly be tuned | 467 // 1/1000th of that speed. 0.01 feels jumpy. This could possibly be tuned |
| 467 // more if people feel it's too slow. | 468 // more if people feel it's too slow. |
| 468 this.zoomScaleValue_ += | 469 this.zoomScaleValue_ += |
| 469 ((this.lastMouseViewPos_.y - currentMouseViewPos.y) * 0.001); | 470 ((this.lastMouseViewPos_.y - currentMouseViewPos.y) * 0.001); |
| 470 this.zoomScaleValue_ = Math.max(this.zoomScaleValue_, 0.1); | 471 this.zoomScaleValue_ = Math.max(this.zoomScaleValue_, 0.1); |
| 471 | 472 |
| (...skipping 14 matching lines...) Expand all Loading... |
| 486 y: e.clientY - this.rasterArea_.offsetTop | 487 y: e.clientY - this.rasterArea_.offsetTop |
| 487 }; | 488 }; |
| 488 } | 489 } |
| 489 }; | 490 }; |
| 490 | 491 |
| 491 return { | 492 return { |
| 492 PictureDebugger, | 493 PictureDebugger, |
| 493 }; | 494 }; |
| 494 }); | 495 }); |
| 495 </script> | 496 </script> |
| OLD | NEW |