| Index: third_party/WebKit/Source/devtools/front_end/timeline/TimelinePaintProfilerView.js
|
| diff --git a/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePaintProfilerView.js b/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePaintProfilerView.js
|
| index 4a98134ac7f8a153dc3ecf1ac5ef7764377ad77a..684437f628e55a8206e8431accce6296421bffb8 100644
|
| --- a/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePaintProfilerView.js
|
| +++ b/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePaintProfilerView.js
|
| @@ -1,220 +1,212 @@
|
| // Copyright 2014 The Chromium Authors. All rights reserved.
|
| // Use of this source code is governed by a BSD-style license that can be
|
| // found in the LICENSE file.
|
| -
|
| /**
|
| - * @constructor
|
| - * @param {!WebInspector.TimelineFrameModel} frameModel
|
| - * @extends {WebInspector.SplitWidget}
|
| + * @unrestricted
|
| */
|
| -WebInspector.TimelinePaintProfilerView = function(frameModel)
|
| -{
|
| - WebInspector.SplitWidget.call(this, false, false);
|
| - this.element.classList.add("timeline-paint-profiler-view");
|
| +WebInspector.TimelinePaintProfilerView = class extends WebInspector.SplitWidget {
|
| + /**
|
| + * @param {!WebInspector.TimelineFrameModel} frameModel
|
| + */
|
| + constructor(frameModel) {
|
| + super(false, false);
|
| + this.element.classList.add('timeline-paint-profiler-view');
|
| this.setSidebarSize(60);
|
| this.setResizable(false);
|
|
|
| this._frameModel = frameModel;
|
| this._logAndImageSplitWidget = new WebInspector.SplitWidget(true, false);
|
| - this._logAndImageSplitWidget.element.classList.add("timeline-paint-profiler-log-split");
|
| + this._logAndImageSplitWidget.element.classList.add('timeline-paint-profiler-log-split');
|
| this.setMainWidget(this._logAndImageSplitWidget);
|
| this._imageView = new WebInspector.TimelinePaintImageView();
|
| this._logAndImageSplitWidget.setMainWidget(this._imageView);
|
|
|
| this._paintProfilerView = new WebInspector.PaintProfilerView(this._imageView.showImage.bind(this._imageView));
|
| - this._paintProfilerView.addEventListener(WebInspector.PaintProfilerView.Events.WindowChanged, this._onWindowChanged, this);
|
| + this._paintProfilerView.addEventListener(
|
| + WebInspector.PaintProfilerView.Events.WindowChanged, this._onWindowChanged, this);
|
| this.setSidebarWidget(this._paintProfilerView);
|
|
|
| this._logTreeView = new WebInspector.PaintProfilerCommandLogView();
|
| this._logAndImageSplitWidget.setSidebarWidget(this._logTreeView);
|
| -};
|
| -
|
| -WebInspector.TimelinePaintProfilerView.prototype = {
|
| - wasShown: function()
|
| - {
|
| - if (this._needsUpdateWhenVisible) {
|
| - this._needsUpdateWhenVisible = false;
|
| - this._update();
|
| - }
|
| - },
|
| + }
|
| +
|
| + /**
|
| + * @override
|
| + */
|
| + wasShown() {
|
| + if (this._needsUpdateWhenVisible) {
|
| + this._needsUpdateWhenVisible = false;
|
| + this._update();
|
| + }
|
| + }
|
| +
|
| + /**
|
| + * @param {!WebInspector.PaintProfilerSnapshot} snapshot
|
| + */
|
| + setSnapshot(snapshot) {
|
| + this._releaseSnapshot();
|
| + this._pendingSnapshot = snapshot;
|
| + this._event = null;
|
| + this._updateWhenVisible();
|
| + }
|
| +
|
| + /**
|
| + * @param {!WebInspector.Target} target
|
| + * @param {!WebInspector.TracingModel.Event} event
|
| + * @return {boolean}
|
| + */
|
| + setEvent(target, event) {
|
| + this._releaseSnapshot();
|
| + this._target = target;
|
| + this._pendingSnapshot = null;
|
| + this._event = event;
|
| +
|
| + this._updateWhenVisible();
|
| + if (this._event.name === WebInspector.TimelineModel.RecordType.Paint)
|
| + return !!event.picture;
|
| + if (this._event.name === WebInspector.TimelineModel.RecordType.RasterTask)
|
| + return this._frameModel.hasRasterTile(this._event);
|
| + return false;
|
| + }
|
| +
|
| + _updateWhenVisible() {
|
| + if (this.isShowing())
|
| + this._update();
|
| + else
|
| + this._needsUpdateWhenVisible = true;
|
| + }
|
| +
|
| + _update() {
|
| + this._logTreeView.setCommandLog(null, []);
|
| + this._paintProfilerView.setSnapshotAndLog(null, [], null);
|
| +
|
| + var snapshotPromise;
|
| + if (this._pendingSnapshot)
|
| + snapshotPromise = Promise.resolve({rect: null, snapshot: this._pendingSnapshot});
|
| + else if (this._event.name === WebInspector.TimelineModel.RecordType.Paint) {
|
| + snapshotPromise = this._event.picture.objectPromise()
|
| + .then(data => WebInspector.PaintProfilerSnapshot.load(this._target, data['skp64']))
|
| + .then(snapshot => snapshot && {rect: null, snapshot: snapshot});
|
| + } else if (this._event.name === WebInspector.TimelineModel.RecordType.RasterTask) {
|
| + snapshotPromise = this._frameModel.rasterTilePromise(this._event);
|
| + } else {
|
| + console.assert(false, 'Unexpected event type or no snapshot');
|
| + return;
|
| + }
|
| + snapshotPromise.then(snapshotWithRect => {
|
| + this._releaseSnapshot();
|
| + if (!snapshotWithRect) {
|
| + this._imageView.showImage();
|
| + return;
|
| + }
|
| + var snapshot = snapshotWithRect.snapshot;
|
| + this._lastLoadedSnapshot = snapshot;
|
| + this._imageView.setMask(snapshotWithRect.rect);
|
| + snapshot.commandLog().then(log => onCommandLogDone.call(this, snapshot, snapshotWithRect.rect, log));
|
| + });
|
|
|
| /**
|
| * @param {!WebInspector.PaintProfilerSnapshot} snapshot
|
| + * @param {?DOMAgent.Rect} clipRect
|
| + * @param {!Array.<!WebInspector.PaintProfilerLogItem>=} log
|
| + * @this {WebInspector.TimelinePaintProfilerView}
|
| */
|
| - setSnapshot: function(snapshot)
|
| - {
|
| - this._releaseSnapshot();
|
| - this._pendingSnapshot = snapshot;
|
| - this._event = null;
|
| - this._updateWhenVisible();
|
| - },
|
| -
|
| - /**
|
| - * @param {!WebInspector.Target} target
|
| - * @param {!WebInspector.TracingModel.Event} event
|
| - * @return {boolean}
|
| - */
|
| - setEvent: function(target, event)
|
| - {
|
| - this._releaseSnapshot();
|
| - this._target = target;
|
| - this._pendingSnapshot = null;
|
| - this._event = event;
|
| -
|
| - this._updateWhenVisible();
|
| - if (this._event.name === WebInspector.TimelineModel.RecordType.Paint)
|
| - return !!event.picture;
|
| - if (this._event.name === WebInspector.TimelineModel.RecordType.RasterTask)
|
| - return this._frameModel.hasRasterTile(this._event);
|
| - return false;
|
| - },
|
| -
|
| - _updateWhenVisible: function()
|
| - {
|
| - if (this.isShowing())
|
| - this._update();
|
| - else
|
| - this._needsUpdateWhenVisible = true;
|
| - },
|
| -
|
| - _update: function()
|
| - {
|
| - this._logTreeView.setCommandLog(null, []);
|
| - this._paintProfilerView.setSnapshotAndLog(null, [], null);
|
| -
|
| - var snapshotPromise;
|
| - if (this._pendingSnapshot)
|
| - snapshotPromise = Promise.resolve({rect: null, snapshot: this._pendingSnapshot});
|
| - else if (this._event.name === WebInspector.TimelineModel.RecordType.Paint) {
|
| - snapshotPromise = this._event.picture.objectPromise()
|
| - .then(data => WebInspector.PaintProfilerSnapshot.load(this._target, data["skp64"]))
|
| - .then(snapshot => snapshot && {rect: null, snapshot: snapshot});
|
| - } else if (this._event.name === WebInspector.TimelineModel.RecordType.RasterTask) {
|
| - snapshotPromise = this._frameModel.rasterTilePromise(this._event);
|
| - } else {
|
| - console.assert(false, "Unexpected event type or no snapshot");
|
| - return;
|
| - }
|
| - snapshotPromise.then(snapshotWithRect => {
|
| - this._releaseSnapshot();
|
| - if (!snapshotWithRect) {
|
| - this._imageView.showImage();
|
| - return;
|
| - }
|
| - var snapshot = snapshotWithRect.snapshot;
|
| - this._lastLoadedSnapshot = snapshot;
|
| - this._imageView.setMask(snapshotWithRect.rect);
|
| - snapshot.commandLog().then(log => onCommandLogDone.call(this, snapshot, snapshotWithRect.rect, log));
|
| - });
|
| -
|
| - /**
|
| - * @param {!WebInspector.PaintProfilerSnapshot} snapshot
|
| - * @param {?DOMAgent.Rect} clipRect
|
| - * @param {!Array.<!WebInspector.PaintProfilerLogItem>=} log
|
| - * @this {WebInspector.TimelinePaintProfilerView}
|
| - */
|
| - function onCommandLogDone(snapshot, clipRect, log)
|
| - {
|
| - this._logTreeView.setCommandLog(snapshot.target(), log || []);
|
| - this._paintProfilerView.setSnapshotAndLog(snapshot, log || [], clipRect);
|
| - }
|
| - },
|
| -
|
| - _releaseSnapshot: function()
|
| - {
|
| - if (!this._lastLoadedSnapshot)
|
| - return;
|
| - this._lastLoadedSnapshot.release();
|
| - this._lastLoadedSnapshot = null;
|
| - },
|
| -
|
| - _onWindowChanged: function()
|
| - {
|
| - this._logTreeView.updateWindow(this._paintProfilerView.selectionWindow());
|
| - },
|
| -
|
| - __proto__: WebInspector.SplitWidget.prototype
|
| + function onCommandLogDone(snapshot, clipRect, log) {
|
| + this._logTreeView.setCommandLog(snapshot.target(), log || []);
|
| + this._paintProfilerView.setSnapshotAndLog(snapshot, log || [], clipRect);
|
| + }
|
| + }
|
| +
|
| + _releaseSnapshot() {
|
| + if (!this._lastLoadedSnapshot)
|
| + return;
|
| + this._lastLoadedSnapshot.release();
|
| + this._lastLoadedSnapshot = null;
|
| + }
|
| +
|
| + _onWindowChanged() {
|
| + this._logTreeView.updateWindow(this._paintProfilerView.selectionWindow());
|
| + }
|
| };
|
|
|
| /**
|
| - * @constructor
|
| - * @extends {WebInspector.Widget}
|
| + * @unrestricted
|
| */
|
| -WebInspector.TimelinePaintImageView = function()
|
| -{
|
| - WebInspector.Widget.call(this, true);
|
| - this.registerRequiredCSS("timeline/timelinePaintProfiler.css");
|
| - this.contentElement.classList.add("fill", "paint-profiler-image-view");
|
| - this._imageContainer = this.contentElement.createChild("div", "paint-profiler-image-container");
|
| - this._imageElement = this._imageContainer.createChild("img");
|
| - this._maskElement = this._imageContainer.createChild("div");
|
| - this._imageElement.addEventListener("load", this._updateImagePosition.bind(this), false);
|
| +WebInspector.TimelinePaintImageView = class extends WebInspector.Widget {
|
| + constructor() {
|
| + super(true);
|
| + this.registerRequiredCSS('timeline/timelinePaintProfiler.css');
|
| + this.contentElement.classList.add('fill', 'paint-profiler-image-view');
|
| + this._imageContainer = this.contentElement.createChild('div', 'paint-profiler-image-container');
|
| + this._imageElement = this._imageContainer.createChild('img');
|
| + this._maskElement = this._imageContainer.createChild('div');
|
| + this._imageElement.addEventListener('load', this._updateImagePosition.bind(this), false);
|
|
|
| this._transformController = new WebInspector.TransformController(this.contentElement, true);
|
| - this._transformController.addEventListener(WebInspector.TransformController.Events.TransformChanged, this._updateImagePosition, this);
|
| -};
|
| -
|
| -WebInspector.TimelinePaintImageView.prototype = {
|
| - onResize: function()
|
| - {
|
| - if (this._imageElement.src)
|
| - this._updateImagePosition();
|
| - },
|
| -
|
| - _updateImagePosition: function()
|
| - {
|
| - var width = this._imageElement.naturalWidth;
|
| - var height = this._imageElement.naturalHeight;
|
| - var clientWidth = this.contentElement.clientWidth;
|
| - var clientHeight = this.contentElement.clientHeight;
|
| -
|
| - var paddingFraction = 0.1;
|
| - var paddingX = clientWidth * paddingFraction;
|
| - var paddingY = clientHeight * paddingFraction;
|
| - var scaleX = (clientWidth - paddingX) / width;
|
| - var scaleY = (clientHeight - paddingY) / height;
|
| - var scale = Math.min(scaleX, scaleY);
|
| -
|
| - if (this._maskRectangle) {
|
| - var style = this._maskElement.style;
|
| - style.width = width + "px";
|
| - style.height = height + "px";
|
| - style.borderLeftWidth = this._maskRectangle.x + "px";
|
| - style.borderTopWidth = this._maskRectangle.y + "px";
|
| - style.borderRightWidth = (width - this._maskRectangle.x - this._maskRectangle.width) + "px";
|
| - style.borderBottomWidth = (height - this._maskRectangle.y - this._maskRectangle.height) + "px";
|
| - }
|
| - this._transformController.setScaleConstraints(0.5, 10 / scale);
|
| - var matrix = new WebKitCSSMatrix()
|
| - .scale(this._transformController.scale(), this._transformController.scale())
|
| - .translate(clientWidth / 2, clientHeight / 2)
|
| - .scale(scale, scale)
|
| - .translate(-width / 2, -height / 2);
|
| - var bounds = WebInspector.Geometry.boundsForTransformedPoints(matrix, [0, 0, 0, width, height, 0]);
|
| - this._transformController.clampOffsets(paddingX - bounds.maxX, clientWidth - paddingX - bounds.minX,
|
| - paddingY - bounds.maxY, clientHeight - paddingY - bounds.minY);
|
| - matrix = new WebKitCSSMatrix().translate(this._transformController.offsetX(), this._transformController.offsetY()).multiply(matrix);
|
| - this._imageContainer.style.webkitTransform = matrix.toString();
|
| - },
|
| -
|
| - /**
|
| - * @param {string=} imageURL
|
| - */
|
| - showImage: function(imageURL)
|
| - {
|
| - this._imageContainer.classList.toggle("hidden", !imageURL);
|
| - if (imageURL)
|
| - this._imageElement.src = imageURL;
|
| - },
|
| -
|
| - /**
|
| - * @param {?DOMAgent.Rect} maskRectangle
|
| - */
|
| - setMask: function(maskRectangle)
|
| - {
|
| - this._maskRectangle = maskRectangle;
|
| - this._maskElement.classList.toggle("hidden", !maskRectangle);
|
| - },
|
| -
|
| - __proto__: WebInspector.Widget.prototype
|
| + this._transformController.addEventListener(
|
| + WebInspector.TransformController.Events.TransformChanged, this._updateImagePosition, this);
|
| + }
|
| +
|
| + /**
|
| + * @override
|
| + */
|
| + onResize() {
|
| + if (this._imageElement.src)
|
| + this._updateImagePosition();
|
| + }
|
| +
|
| + _updateImagePosition() {
|
| + var width = this._imageElement.naturalWidth;
|
| + var height = this._imageElement.naturalHeight;
|
| + var clientWidth = this.contentElement.clientWidth;
|
| + var clientHeight = this.contentElement.clientHeight;
|
| +
|
| + var paddingFraction = 0.1;
|
| + var paddingX = clientWidth * paddingFraction;
|
| + var paddingY = clientHeight * paddingFraction;
|
| + var scaleX = (clientWidth - paddingX) / width;
|
| + var scaleY = (clientHeight - paddingY) / height;
|
| + var scale = Math.min(scaleX, scaleY);
|
| +
|
| + if (this._maskRectangle) {
|
| + var style = this._maskElement.style;
|
| + style.width = width + 'px';
|
| + style.height = height + 'px';
|
| + style.borderLeftWidth = this._maskRectangle.x + 'px';
|
| + style.borderTopWidth = this._maskRectangle.y + 'px';
|
| + style.borderRightWidth = (width - this._maskRectangle.x - this._maskRectangle.width) + 'px';
|
| + style.borderBottomWidth = (height - this._maskRectangle.y - this._maskRectangle.height) + 'px';
|
| + }
|
| + this._transformController.setScaleConstraints(0.5, 10 / scale);
|
| + var matrix = new WebKitCSSMatrix()
|
| + .scale(this._transformController.scale(), this._transformController.scale())
|
| + .translate(clientWidth / 2, clientHeight / 2)
|
| + .scale(scale, scale)
|
| + .translate(-width / 2, -height / 2);
|
| + var bounds = WebInspector.Geometry.boundsForTransformedPoints(matrix, [0, 0, 0, width, height, 0]);
|
| + this._transformController.clampOffsets(
|
| + paddingX - bounds.maxX, clientWidth - paddingX - bounds.minX, paddingY - bounds.maxY,
|
| + clientHeight - paddingY - bounds.minY);
|
| + matrix = new WebKitCSSMatrix()
|
| + .translate(this._transformController.offsetX(), this._transformController.offsetY())
|
| + .multiply(matrix);
|
| + this._imageContainer.style.webkitTransform = matrix.toString();
|
| + }
|
| +
|
| + /**
|
| + * @param {string=} imageURL
|
| + */
|
| + showImage(imageURL) {
|
| + this._imageContainer.classList.toggle('hidden', !imageURL);
|
| + if (imageURL)
|
| + this._imageElement.src = imageURL;
|
| + }
|
| +
|
| + /**
|
| + * @param {?DOMAgent.Rect} maskRectangle
|
| + */
|
| + setMask(maskRectangle) {
|
| + this._maskRectangle = maskRectangle;
|
| + this._maskElement.classList.toggle('hidden', !maskRectangle);
|
| + }
|
| };
|
|
|