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