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 |