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 |