Home | History | Annotate | Download | only in timeline 
      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  */
      9 WebInspector.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 
     29 WebInspector.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  */
    104 WebInspector.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 
    115 WebInspector.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