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