1// Copyright 2014 The Chromium Authors. All rights reserved. 2// Use of this source code is governed by a BSD-style license that can be 3// found in the LICENSE file. 4 5/** 6 * @constructor 7 * @extends {WebInspector.SplitView} 8 */ 9WebInspector.TimelinePaintProfilerView = function() 10{ 11 WebInspector.SplitView.call(this, false, false); 12 this.element.classList.add("timeline-paint-profiler-view"); 13 14 this.setSidebarSize(60); 15 this.setResizable(false); 16 this._logAndImageSplitView = new WebInspector.SplitView(true, false); 17 this._logAndImageSplitView.show(this.mainElement()); 18 this._imageView = new WebInspector.TimelinePaintImageView(); 19 this._imageView.show(this._logAndImageSplitView.mainElement()); 20 21 this._paintProfilerView = new WebInspector.PaintProfilerView(this._imageView.showImage.bind(this._imageView)); 22 this._paintProfilerView.addEventListener(WebInspector.PaintProfilerView.Events.WindowChanged, this._onWindowChanged, this); 23 this._paintProfilerView.show(this.sidebarElement()); 24 25 this._logTreeView = new WebInspector.PaintProfilerCommandLogView(); 26 this._logTreeView.show(this._logAndImageSplitView.sidebarElement()); 27} 28 29WebInspector.TimelinePaintProfilerView.prototype = { 30 wasShown: function() 31 { 32 if (this._updateWhenVisible) { 33 this._updateWhenVisible = false; 34 this._update(); 35 } 36 }, 37 38 /** 39 * @param {?WebInspector.Target} target 40 * @param {string} encodedPicture 41 */ 42 setPicture: function(target, encodedPicture) 43 { 44 this._disposeSnapshot(); 45 this._picture = encodedPicture; 46 this._target = target; 47 if (this.isShowing()) 48 this._update(); 49 else 50 this._updateWhenVisible = true; 51 }, 52 53 _update: function() 54 { 55 this._logTreeView.setCommandLog(null, []); 56 this._paintProfilerView.setSnapshotAndLog(null, []); 57 if (!this._target) 58 return; 59 WebInspector.PaintProfilerSnapshot.load(this._target, this._picture, onSnapshotLoaded.bind(this)); 60 /** 61 * @param {?WebInspector.PaintProfilerSnapshot} snapshot 62 * @this WebInspector.TimelinePaintProfilerView 63 */ 64 function onSnapshotLoaded(snapshot) 65 { 66 this._disposeSnapshot(); 67 this._lastLoadedSnapshot = snapshot; 68 snapshot.commandLog(onCommandLogDone.bind(this, snapshot)); 69 } 70 71 /** 72 * @param {!WebInspector.PaintProfilerSnapshot=} snapshot 73 * @param {!Array.<!WebInspector.PaintProfilerLogItem>=} log 74 * @this {WebInspector.TimelinePaintProfilerView} 75 */ 76 function onCommandLogDone(snapshot, log) 77 { 78 this._logTreeView.setCommandLog(snapshot.target(), log); 79 this._paintProfilerView.setSnapshotAndLog(snapshot || null, log || []); 80 } 81 }, 82 83 _disposeSnapshot: function() 84 { 85 if (!this._lastLoadedSnapshot) 86 return; 87 this._lastLoadedSnapshot.dispose(); 88 this._lastLoadedSnapshot = null; 89 }, 90 91 _onWindowChanged: function() 92 { 93 var window = this._paintProfilerView.windowBoundaries(); 94 this._logTreeView.updateWindow(window.left, window.right); 95 }, 96 97 __proto__: WebInspector.SplitView.prototype 98}; 99 100/** 101 * @constructor 102 * @extends {WebInspector.View} 103 */ 104WebInspector.TimelinePaintImageView = function() 105{ 106 WebInspector.View.call(this); 107 this.element.classList.add("fill", "paint-profiler-image-view"); 108 this._imageElement = this.element.createChild("img"); 109 this._imageElement.addEventListener("load", this._updateImagePosition.bind(this), false); 110 111 this._transformController = new WebInspector.TransformController(this.element, true); 112 this._transformController.addEventListener(WebInspector.TransformController.Events.TransformChanged, this._updateImagePosition, this); 113} 114 115WebInspector.TimelinePaintImageView.prototype = { 116 onResize: function() 117 { 118 this._updateImagePosition(); 119 }, 120 121 _updateImagePosition: function() 122 { 123 var width = this._imageElement.width; 124 var height = this._imageElement.height; 125 126 var paddingFactor = 1.1; 127 var scaleX = this.element.clientWidth / width / paddingFactor; 128 var scaleY = this.element.clientHeight / height / paddingFactor; 129 var scale = Math.min(scaleX, scaleY); 130 131 var matrix = new WebKitCSSMatrix() 132 .translate(this._transformController.offsetX(), this._transformController.offsetY()) 133 .scale(this._transformController.scale(), this._transformController.scale()) 134 .translate(this.element.clientWidth / 2, this.element.clientHeight / 2) 135 .scale(scale, scale) 136 .translate(-width / 2, -height / 2); 137 138 this._imageElement.style.webkitTransform = matrix.toString(); 139 }, 140 141 /** 142 * @param {string=} imageURL 143 */ 144 showImage: function(imageURL) 145 { 146 this._imageElement.classList.toggle("hidden", !imageURL); 147 this._imageElement.src = imageURL; 148 }, 149 150 __proto__: WebInspector.View.prototype 151}; 152