src/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePaintProfilerView.js

   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 };