| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <!-- | 2 <!-- |
| 3 Copyright (c) 2015 The Chromium Authors. All rights reserved. | 3 Copyright (c) 2015 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 243 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 254 height = Math.max(height, this.picture_.layerRect.height); | 254 height = Math.max(height, this.picture_.layerRect.height); |
| 255 } | 255 } |
| 256 | 256 |
| 257 return { | 257 return { |
| 258 width: width, | 258 width: width, |
| 259 height: height | 259 height: height |
| 260 }; | 260 }; |
| 261 }, | 261 }, |
| 262 | 262 |
| 263 scheduleUpdateContents_: function() { | 263 scheduleUpdateContents_: function() { |
| 264 if (this.updateContentsPending_) | 264 if (this.updateContentsPending_) return; |
| 265 return; | 265 |
| 266 this.updateContentsPending_ = true; | 266 this.updateContentsPending_ = true; |
| 267 tr.b.requestAnimationFrameInThisFrameIfPossible( | 267 tr.b.requestAnimationFrameInThisFrameIfPossible( |
| 268 this.updateContents_.bind(this) | 268 this.updateContents_.bind(this) |
| 269 ); | 269 ); |
| 270 }, | 270 }, |
| 271 | 271 |
| 272 updateContents_: function() { | 272 updateContents_: function() { |
| 273 this.updateContentsPending_ = false; | 273 this.updateContentsPending_ = false; |
| 274 | 274 |
| 275 if (this.picture_) { | 275 if (this.picture_) { |
| 276 Polymer.dom(this.sizeInfo_).textContent = '(' + | 276 Polymer.dom(this.sizeInfo_).textContent = '(' + |
| 277 this.picture_.layerRect.width + ' x ' + | 277 this.picture_.layerRect.width + ' x ' + |
| 278 this.picture_.layerRect.height + ')'; | 278 this.picture_.layerRect.height + ')'; |
| 279 } | 279 } |
| 280 | 280 |
| 281 // Return if picture hasn't finished rasterizing. | 281 // Return if picture hasn't finished rasterizing. |
| 282 if (!this.pictureAsImageData_) | 282 if (!this.pictureAsImageData_) return; |
| 283 return; | |
| 284 | 283 |
| 285 this.infoBar_.visible = false; | 284 this.infoBar_.visible = false; |
| 286 this.infoBar_.removeAllButtons(); | 285 this.infoBar_.removeAllButtons(); |
| 287 if (this.pictureAsImageData_.error) { | 286 if (this.pictureAsImageData_.error) { |
| 288 this.infoBar_.message = 'Cannot rasterize...'; | 287 this.infoBar_.message = 'Cannot rasterize...'; |
| 289 this.infoBar_.addButton('More info...', function(e) { | 288 this.infoBar_.addButton('More info...', function(e) { |
| 290 var overlay = new tr.ui.b.Overlay(); | 289 var overlay = new tr.ui.b.Overlay(); |
| 291 Polymer.dom(overlay).textContent = this.pictureAsImageData_.error; | 290 Polymer.dom(overlay).textContent = this.pictureAsImageData_.error; |
| 292 overlay.visible = true; | 291 overlay.visible = true; |
| 293 e.stopPropagation(); | 292 e.stopPropagation(); |
| 294 return false; | 293 return false; |
| 295 }.bind(this)); | 294 }.bind(this)); |
| 296 this.infoBar_.visible = true; | 295 this.infoBar_.visible = true; |
| 297 } | 296 } |
| 298 | 297 |
| 299 this.drawPicture_(); | 298 this.drawPicture_(); |
| 300 }, | 299 }, |
| 301 | 300 |
| 302 drawPicture_: function() { | 301 drawPicture_: function() { |
| 303 var size = this.getRasterCanvasSize_(); | 302 var size = this.getRasterCanvasSize_(); |
| 304 if (size.width !== this.rasterCanvas_.width) | 303 if (size.width !== this.rasterCanvas_.width) { |
| 305 this.rasterCanvas_.width = size.width; | 304 this.rasterCanvas_.width = size.width; |
| 306 if (size.height !== this.rasterCanvas_.height) | 305 } |
| 306 if (size.height !== this.rasterCanvas_.height) { |
| 307 this.rasterCanvas_.height = size.height; | 307 this.rasterCanvas_.height = size.height; |
| 308 } |
| 308 | 309 |
| 309 this.rasterCtx_.clearRect(0, 0, size.width, size.height); | 310 this.rasterCtx_.clearRect(0, 0, size.width, size.height); |
| 310 | 311 |
| 311 if (!this.picture_ || !this.pictureAsImageData_.imageData) | 312 if (!this.picture_ || !this.pictureAsImageData_.imageData) return; |
| 312 return; | |
| 313 | 313 |
| 314 var imgCanvas = this.pictureAsImageData_.asCanvas(); | 314 var imgCanvas = this.pictureAsImageData_.asCanvas(); |
| 315 var w = imgCanvas.width; | 315 var w = imgCanvas.width; |
| 316 var h = imgCanvas.height; | 316 var h = imgCanvas.height; |
| 317 this.rasterCtx_.drawImage(imgCanvas, 0, 0, w, h, | 317 this.rasterCtx_.drawImage(imgCanvas, 0, 0, w, h, |
| 318 0, 0, w * this.zoomScaleValue_, | 318 0, 0, w * this.zoomScaleValue_, |
| 319 h * this.zoomScaleValue_); | 319 h * this.zoomScaleValue_); |
| 320 }, | 320 }, |
| 321 | 321 |
| 322 rasterize_: function() { | 322 rasterize_: function() { |
| (...skipping 15 matching lines...) Expand all Loading... |
| 338 var selected = this.displayItemListView_.selectedElement; | 338 var selected = this.displayItemListView_.selectedElement; |
| 339 | 339 |
| 340 if (!selected) { | 340 if (!selected) { |
| 341 this.picture = this.displayItemList_; | 341 this.picture = this.displayItemList_; |
| 342 return; | 342 return; |
| 343 } | 343 } |
| 344 | 344 |
| 345 var index = Array.prototype.indexOf.call( | 345 var index = Array.prototype.indexOf.call( |
| 346 this.displayItemListView_.children, selected); | 346 this.displayItemListView_.children, selected); |
| 347 var displayItem = this.displayItemList_.items[index]; | 347 var displayItem = this.displayItemList_.items[index]; |
| 348 if (displayItem && displayItem.skp64) | 348 if (displayItem && displayItem.skp64) { |
| 349 this.picture = new tr.e.cc.Picture( | 349 this.picture = new tr.e.cc.Picture( |
| 350 displayItem.skp64, this.displayItemList_.layerRect); | 350 displayItem.skp64, this.displayItemList_.layerRect); |
| 351 else | 351 } else { |
| 352 this.picture = undefined; | 352 this.picture = undefined; |
| 353 } |
| 353 }, | 354 }, |
| 354 | 355 |
| 355 onDisplayItemInfoClick_: function(e) { | 356 onDisplayItemInfoClick_: function(e) { |
| 356 if (e && e.target === this.displayItemInfo_) { | 357 if (e && e.target === this.displayItemInfo_) { |
| 357 this.displayItemListView_.selectedElement = undefined; | 358 this.displayItemListView_.selectedElement = undefined; |
| 358 } | 359 } |
| 359 }, | 360 }, |
| 360 | 361 |
| 361 updateDrawOpsList_: function(showOpsList) { | 362 updateDrawOpsList_: function(showOpsList) { |
| 362 if (showOpsList) { | 363 if (showOpsList) { |
| (...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 395 | 396 |
| 396 onBeginZoom_: function(e) { | 397 onBeginZoom_: function(e) { |
| 397 this.isZooming_ = true; | 398 this.isZooming_ = true; |
| 398 | 399 |
| 399 this.lastMouseViewPos_ = this.extractRelativeMousePosition_(e); | 400 this.lastMouseViewPos_ = this.extractRelativeMousePosition_(e); |
| 400 | 401 |
| 401 e.preventDefault(); | 402 e.preventDefault(); |
| 402 }, | 403 }, |
| 403 | 404 |
| 404 onUpdateZoom_: function(e) { | 405 onUpdateZoom_: function(e) { |
| 405 if (!this.isZooming_) | 406 if (!this.isZooming_) return; |
| 406 return; | |
| 407 | 407 |
| 408 var currentMouseViewPos = this.extractRelativeMousePosition_(e); | 408 var currentMouseViewPos = this.extractRelativeMousePosition_(e); |
| 409 | 409 |
| 410 // Take the distance the mouse has moved and we want to zoom at about | 410 // Take the distance the mouse has moved and we want to zoom at about |
| 411 // 1/1000th of that speed. 0.01 feels jumpy. This could possibly be tuned | 411 // 1/1000th of that speed. 0.01 feels jumpy. This could possibly be tuned |
| 412 // more if people feel it's too slow. | 412 // more if people feel it's too slow. |
| 413 this.zoomScaleValue_ += | 413 this.zoomScaleValue_ += |
| 414 ((this.lastMouseViewPos_.y - currentMouseViewPos.y) * 0.001); | 414 ((this.lastMouseViewPos_.y - currentMouseViewPos.y) * 0.001); |
| 415 this.zoomScaleValue_ = Math.max(this.zoomScaleValue_, 0.1); | 415 this.zoomScaleValue_ = Math.max(this.zoomScaleValue_, 0.1); |
| 416 | 416 |
| 417 this.drawPicture_(); | 417 this.drawPicture_(); |
| 418 | 418 |
| 419 this.lastMouseViewPos_ = currentMouseViewPos; | 419 this.lastMouseViewPos_ = currentMouseViewPos; |
| 420 }, | 420 }, |
| 421 | 421 |
| 422 onEndZoom_: function(e) { | 422 onEndZoom_: function(e) { |
| 423 this.lastMouseViewPos_ = undefined; | 423 this.lastMouseViewPos_ = undefined; |
| 424 this.isZooming_ = false; | 424 this.isZooming_ = false; |
| 425 e.preventDefault(); | 425 e.preventDefault(); |
| 426 }, | 426 }, |
| 427 | 427 |
| 428 extractRelativeMousePosition_: function(e) { | 428 extractRelativeMousePosition_: function(e) { |
| 429 return { | 429 return { |
| 430 x: e.clientX - this.rasterArea_.offsetLeft, | 430 x: e.clientX - this.rasterArea_.offsetLeft, |
| 431 y: e.clientY - this.rasterArea_.offsetTop | 431 y: e.clientY - this.rasterArea_.offsetTop |
| 432 }; | 432 }; |
| 433 }, | 433 }, |
| 434 | 434 |
| 435 saveFile_: function(filename, rawData) { | 435 saveFile_: function(filename, rawData) { |
| 436 if (!rawData) | 436 if (!rawData) return; |
| 437 return; | |
| 438 | 437 |
| 439 // Convert this String into an Uint8Array | 438 // Convert this String into an Uint8Array |
| 440 var length = rawData.length; | 439 var length = rawData.length; |
| 441 var arrayBuffer = new ArrayBuffer(length); | 440 var arrayBuffer = new ArrayBuffer(length); |
| 442 var uint8Array = new Uint8Array(arrayBuffer); | 441 var uint8Array = new Uint8Array(arrayBuffer); |
| 443 for (var c = 0; c < length; c++) | 442 for (var c = 0; c < length; c++) { |
| 444 uint8Array[c] = rawData.charCodeAt(c); | 443 uint8Array[c] = rawData.charCodeAt(c); |
| 444 } |
| 445 | 445 |
| 446 // Create a blob URL from the binary array. | 446 // Create a blob URL from the binary array. |
| 447 var blob = new Blob([uint8Array], {type: 'application/octet-binary'}); | 447 var blob = new Blob([uint8Array], {type: 'application/octet-binary'}); |
| 448 var blobUrl = window.URL.createObjectURL(blob); | 448 var blobUrl = window.URL.createObjectURL(blob); |
| 449 | 449 |
| 450 // Create a link and click on it. | 450 // Create a link and click on it. |
| 451 var link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a'); | 451 var link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a'); |
| 452 link.href = blobUrl; | 452 link.href = blobUrl; |
| 453 link.download = filename; | 453 link.download = filename; |
| 454 var event = document.createEvent('MouseEvents'); | 454 var event = document.createEvent('MouseEvents'); |
| (...skipping 12 matching lines...) Expand all Loading... |
| 467 var rawData = tr.b.Base64.atob(this.picture_.getBase64SkpData()); | 467 var rawData = tr.b.Base64.atob(this.picture_.getBase64SkpData()); |
| 468 this.saveFile_(this.skpFilename_.value, rawData); | 468 this.saveFile_(this.skpFilename_.value, rawData); |
| 469 } | 469 } |
| 470 }; | 470 }; |
| 471 | 471 |
| 472 return { | 472 return { |
| 473 DisplayItemDebugger, | 473 DisplayItemDebugger, |
| 474 }; | 474 }; |
| 475 }); | 475 }); |
| 476 </script> | 476 </script> |
| OLD | NEW |