1197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch// Copyright 2014 The Chromium Authors. All rights reserved. 2197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch// Use of this source code is governed by a BSD-style license that can be 3197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch// found in the LICENSE file. 4197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch 5197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch/** 6197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch * @constructor 7197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch * @extends {WebInspector.SplitView} 8197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch */ 9197021e6b966cfb06891637935ef33fff06433d1Ben MurdochWebInspector.TimelinePaintProfilerView = function() 10197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch{ 11197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch WebInspector.SplitView.call(this, false, false); 12197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this.element.classList.add("timeline-paint-profiler-view"); 13197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch 14197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this.setSidebarSize(60); 15197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this.setResizable(false); 16197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this._logAndImageSplitView = new WebInspector.SplitView(true, false); 17197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this._logAndImageSplitView.show(this.mainElement()); 18197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this._imageView = new WebInspector.TimelinePaintImageView(); 19197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this._imageView.show(this._logAndImageSplitView.mainElement()); 20197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch 21197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this._paintProfilerView = new WebInspector.PaintProfilerView(this._imageView.showImage.bind(this._imageView)); 22197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this._paintProfilerView.addEventListener(WebInspector.PaintProfilerView.Events.WindowChanged, this._onWindowChanged, this); 23197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this._paintProfilerView.show(this.sidebarElement()); 24197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch 25197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this._logTreeView = new WebInspector.PaintProfilerCommandLogView(); 26197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this._logTreeView.show(this._logAndImageSplitView.sidebarElement()); 27197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch} 28197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch 29197021e6b966cfb06891637935ef33fff06433d1Ben MurdochWebInspector.TimelinePaintProfilerView.prototype = { 30197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch wasShown: function() 31197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch { 32197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch if (this._updateWhenVisible) { 33197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this._updateWhenVisible = false; 34197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this._update(); 35197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch } 36197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch }, 37197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch 38197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch /** 39c1847b1379d12d0e05df27436bf19a9b1bf12deaTorne (Richard Coles) * @param {?WebInspector.Target} target 40197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch * @param {string} encodedPicture 41197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch */ 42c1847b1379d12d0e05df27436bf19a9b1bf12deaTorne (Richard Coles) setPicture: function(target, encodedPicture) 43197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch { 44197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this._disposeSnapshot(); 45197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this._picture = encodedPicture; 46c1847b1379d12d0e05df27436bf19a9b1bf12deaTorne (Richard Coles) this._target = target; 47197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch if (this.isShowing()) 48197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this._update(); 49197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch else 50197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this._updateWhenVisible = true; 51197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch }, 52197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch 53197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch _update: function() 54197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch { 557242dc3dbeb210b5e876a3c42d1ec1a667fc621aPrimiano Tucci this._logTreeView.setCommandLog(null, []); 567242dc3dbeb210b5e876a3c42d1ec1a667fc621aPrimiano Tucci this._paintProfilerView.setSnapshotAndLog(null, []); 57c1847b1379d12d0e05df27436bf19a9b1bf12deaTorne (Richard Coles) if (!this._target) 58197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch return; 59c1847b1379d12d0e05df27436bf19a9b1bf12deaTorne (Richard Coles) WebInspector.PaintProfilerSnapshot.load(this._target, this._picture, onSnapshotLoaded.bind(this)); 60197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch /** 61197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch * @param {?WebInspector.PaintProfilerSnapshot} snapshot 62197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch * @this WebInspector.TimelinePaintProfilerView 63197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch */ 64197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch function onSnapshotLoaded(snapshot) 65197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch { 66197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this._disposeSnapshot(); 67197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this._lastLoadedSnapshot = snapshot; 68197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch snapshot.commandLog(onCommandLogDone.bind(this, snapshot)); 69197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch } 70197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch 71197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch /** 72197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch * @param {!WebInspector.PaintProfilerSnapshot=} snapshot 73197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch * @param {!Array.<!WebInspector.PaintProfilerLogItem>=} log 74197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch * @this {WebInspector.TimelinePaintProfilerView} 75197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch */ 76197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch function onCommandLogDone(snapshot, log) 77197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch { 78197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this._logTreeView.setCommandLog(snapshot.target(), log); 79197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this._paintProfilerView.setSnapshotAndLog(snapshot || null, log || []); 80197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch } 81197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch }, 82197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch 83197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch _disposeSnapshot: function() 84197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch { 85197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch if (!this._lastLoadedSnapshot) 86197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch return; 87197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this._lastLoadedSnapshot.dispose(); 88197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this._lastLoadedSnapshot = null; 89197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch }, 90197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch 91197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch _onWindowChanged: function() 92197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch { 93197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch var window = this._paintProfilerView.windowBoundaries(); 94197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this._logTreeView.updateWindow(window.left, window.right); 95197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch }, 96197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch 97197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch __proto__: WebInspector.SplitView.prototype 98197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch}; 99197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch 100197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch/** 101197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch * @constructor 102197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch * @extends {WebInspector.View} 103197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch */ 104197021e6b966cfb06891637935ef33fff06433d1Ben MurdochWebInspector.TimelinePaintImageView = function() 105197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch{ 106197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch WebInspector.View.call(this); 107197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this.element.classList.add("fill", "paint-profiler-image-view"); 108197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this._imageElement = this.element.createChild("img"); 109197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this._imageElement.addEventListener("load", this._updateImagePosition.bind(this), false); 110197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch 111197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this._transformController = new WebInspector.TransformController(this.element, true); 112197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this._transformController.addEventListener(WebInspector.TransformController.Events.TransformChanged, this._updateImagePosition, this); 113197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch} 114197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch 115197021e6b966cfb06891637935ef33fff06433d1Ben MurdochWebInspector.TimelinePaintImageView.prototype = { 116197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch onResize: function() 117197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch { 118197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this._updateImagePosition(); 119197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch }, 120197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch 121197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch _updateImagePosition: function() 122197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch { 123197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch var width = this._imageElement.width; 124197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch var height = this._imageElement.height; 125197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch 126197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch var paddingFactor = 1.1; 127197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch var scaleX = this.element.clientWidth / width / paddingFactor; 128197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch var scaleY = this.element.clientHeight / height / paddingFactor; 129197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch var scale = Math.min(scaleX, scaleY); 130197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch 131197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch var matrix = new WebKitCSSMatrix() 132197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch .translate(this._transformController.offsetX(), this._transformController.offsetY()) 133197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch .scale(this._transformController.scale(), this._transformController.scale()) 134197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch .translate(this.element.clientWidth / 2, this.element.clientHeight / 2) 135197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch .scale(scale, scale) 136197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch .translate(-width / 2, -height / 2); 137197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch 138197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this._imageElement.style.webkitTransform = matrix.toString(); 139197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch }, 140197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch 141197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch /** 142197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch * @param {string=} imageURL 143197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch */ 144197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch showImage: function(imageURL) 145197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch { 146197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this._imageElement.classList.toggle("hidden", !imageURL); 147197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch this._imageElement.src = imageURL; 148197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch }, 149197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch 150197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch __proto__: WebInspector.View.prototype 151197021e6b966cfb06891637935ef33fff06433d1Ben Murdoch}; 152