| OLD | NEW |
| 1 // Copyright 2014 The Chromium Authors. All rights reserved. | 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 | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 /** | 4 /** |
| 5 * @unrestricted | 5 * @unrestricted |
| 6 */ | 6 */ |
| 7 WebInspector.TimelinePaintProfilerView = class extends WebInspector.SplitWidget
{ | 7 Timeline.TimelinePaintProfilerView = class extends UI.SplitWidget { |
| 8 /** | 8 /** |
| 9 * @param {!WebInspector.TimelineFrameModel} frameModel | 9 * @param {!TimelineModel.TimelineFrameModel} frameModel |
| 10 */ | 10 */ |
| 11 constructor(frameModel) { | 11 constructor(frameModel) { |
| 12 super(false, false); | 12 super(false, false); |
| 13 this.element.classList.add('timeline-paint-profiler-view'); | 13 this.element.classList.add('timeline-paint-profiler-view'); |
| 14 this.setSidebarSize(60); | 14 this.setSidebarSize(60); |
| 15 this.setResizable(false); | 15 this.setResizable(false); |
| 16 | 16 |
| 17 this._frameModel = frameModel; | 17 this._frameModel = frameModel; |
| 18 this._logAndImageSplitWidget = new WebInspector.SplitWidget(true, false); | 18 this._logAndImageSplitWidget = new UI.SplitWidget(true, false); |
| 19 this._logAndImageSplitWidget.element.classList.add('timeline-paint-profiler-
log-split'); | 19 this._logAndImageSplitWidget.element.classList.add('timeline-paint-profiler-
log-split'); |
| 20 this.setMainWidget(this._logAndImageSplitWidget); | 20 this.setMainWidget(this._logAndImageSplitWidget); |
| 21 this._imageView = new WebInspector.TimelinePaintImageView(); | 21 this._imageView = new Timeline.TimelinePaintImageView(); |
| 22 this._logAndImageSplitWidget.setMainWidget(this._imageView); | 22 this._logAndImageSplitWidget.setMainWidget(this._imageView); |
| 23 | 23 |
| 24 this._paintProfilerView = new WebInspector.PaintProfilerView(this._imageView
.showImage.bind(this._imageView)); | 24 this._paintProfilerView = new LayerViewer.PaintProfilerView(this._imageView.
showImage.bind(this._imageView)); |
| 25 this._paintProfilerView.addEventListener( | 25 this._paintProfilerView.addEventListener( |
| 26 WebInspector.PaintProfilerView.Events.WindowChanged, this._onWindowChang
ed, this); | 26 LayerViewer.PaintProfilerView.Events.WindowChanged, this._onWindowChange
d, this); |
| 27 this.setSidebarWidget(this._paintProfilerView); | 27 this.setSidebarWidget(this._paintProfilerView); |
| 28 | 28 |
| 29 this._logTreeView = new WebInspector.PaintProfilerCommandLogView(); | 29 this._logTreeView = new LayerViewer.PaintProfilerCommandLogView(); |
| 30 this._logAndImageSplitWidget.setSidebarWidget(this._logTreeView); | 30 this._logAndImageSplitWidget.setSidebarWidget(this._logTreeView); |
| 31 } | 31 } |
| 32 | 32 |
| 33 /** | 33 /** |
| 34 * @override | 34 * @override |
| 35 */ | 35 */ |
| 36 wasShown() { | 36 wasShown() { |
| 37 if (this._needsUpdateWhenVisible) { | 37 if (this._needsUpdateWhenVisible) { |
| 38 this._needsUpdateWhenVisible = false; | 38 this._needsUpdateWhenVisible = false; |
| 39 this._update(); | 39 this._update(); |
| 40 } | 40 } |
| 41 } | 41 } |
| 42 | 42 |
| 43 /** | 43 /** |
| 44 * @param {!WebInspector.PaintProfilerSnapshot} snapshot | 44 * @param {!SDK.PaintProfilerSnapshot} snapshot |
| 45 */ | 45 */ |
| 46 setSnapshot(snapshot) { | 46 setSnapshot(snapshot) { |
| 47 this._releaseSnapshot(); | 47 this._releaseSnapshot(); |
| 48 this._pendingSnapshot = snapshot; | 48 this._pendingSnapshot = snapshot; |
| 49 this._event = null; | 49 this._event = null; |
| 50 this._updateWhenVisible(); | 50 this._updateWhenVisible(); |
| 51 } | 51 } |
| 52 | 52 |
| 53 /** | 53 /** |
| 54 * @param {!WebInspector.Target} target | 54 * @param {!SDK.Target} target |
| 55 * @param {!WebInspector.TracingModel.Event} event | 55 * @param {!SDK.TracingModel.Event} event |
| 56 * @return {boolean} | 56 * @return {boolean} |
| 57 */ | 57 */ |
| 58 setEvent(target, event) { | 58 setEvent(target, event) { |
| 59 this._releaseSnapshot(); | 59 this._releaseSnapshot(); |
| 60 this._target = target; | 60 this._target = target; |
| 61 this._pendingSnapshot = null; | 61 this._pendingSnapshot = null; |
| 62 this._event = event; | 62 this._event = event; |
| 63 | 63 |
| 64 this._updateWhenVisible(); | 64 this._updateWhenVisible(); |
| 65 if (this._event.name === WebInspector.TimelineModel.RecordType.Paint) | 65 if (this._event.name === TimelineModel.TimelineModel.RecordType.Paint) |
| 66 return !!WebInspector.TimelineData.forEvent(event).picture; | 66 return !!TimelineModel.TimelineData.forEvent(event).picture; |
| 67 if (this._event.name === WebInspector.TimelineModel.RecordType.RasterTask) | 67 if (this._event.name === TimelineModel.TimelineModel.RecordType.RasterTask) |
| 68 return this._frameModel.hasRasterTile(this._event); | 68 return this._frameModel.hasRasterTile(this._event); |
| 69 return false; | 69 return false; |
| 70 } | 70 } |
| 71 | 71 |
| 72 _updateWhenVisible() { | 72 _updateWhenVisible() { |
| 73 if (this.isShowing()) | 73 if (this.isShowing()) |
| 74 this._update(); | 74 this._update(); |
| 75 else | 75 else |
| 76 this._needsUpdateWhenVisible = true; | 76 this._needsUpdateWhenVisible = true; |
| 77 } | 77 } |
| 78 | 78 |
| 79 _update() { | 79 _update() { |
| 80 this._logTreeView.setCommandLog(null, []); | 80 this._logTreeView.setCommandLog(null, []); |
| 81 this._paintProfilerView.setSnapshotAndLog(null, [], null); | 81 this._paintProfilerView.setSnapshotAndLog(null, [], null); |
| 82 | 82 |
| 83 var snapshotPromise; | 83 var snapshotPromise; |
| 84 if (this._pendingSnapshot) | 84 if (this._pendingSnapshot) |
| 85 snapshotPromise = Promise.resolve({rect: null, snapshot: this._pendingSnap
shot}); | 85 snapshotPromise = Promise.resolve({rect: null, snapshot: this._pendingSnap
shot}); |
| 86 else if (this._event.name === WebInspector.TimelineModel.RecordType.Paint) { | 86 else if (this._event.name === TimelineModel.TimelineModel.RecordType.Paint)
{ |
| 87 var picture = WebInspector.TimelineData.forEvent(this._event).picture; | 87 var picture = TimelineModel.TimelineData.forEvent(this._event).picture; |
| 88 snapshotPromise = picture.objectPromise() | 88 snapshotPromise = picture.objectPromise() |
| 89 .then(data => WebInspector.PaintProfilerSnapshot.loa
d(this._target, data['skp64'])) | 89 .then(data => SDK.PaintProfilerSnapshot.load(this._t
arget, data['skp64'])) |
| 90 .then(snapshot => snapshot && {rect: null, snapshot:
snapshot}); | 90 .then(snapshot => snapshot && {rect: null, snapshot:
snapshot}); |
| 91 } else if (this._event.name === WebInspector.TimelineModel.RecordType.Raster
Task) { | 91 } else if (this._event.name === TimelineModel.TimelineModel.RecordType.Raste
rTask) { |
| 92 snapshotPromise = this._frameModel.rasterTilePromise(this._event); | 92 snapshotPromise = this._frameModel.rasterTilePromise(this._event); |
| 93 } else { | 93 } else { |
| 94 console.assert(false, 'Unexpected event type or no snapshot'); | 94 console.assert(false, 'Unexpected event type or no snapshot'); |
| 95 return; | 95 return; |
| 96 } | 96 } |
| 97 snapshotPromise.then(snapshotWithRect => { | 97 snapshotPromise.then(snapshotWithRect => { |
| 98 this._releaseSnapshot(); | 98 this._releaseSnapshot(); |
| 99 if (!snapshotWithRect) { | 99 if (!snapshotWithRect) { |
| 100 this._imageView.showImage(); | 100 this._imageView.showImage(); |
| 101 return; | 101 return; |
| 102 } | 102 } |
| 103 var snapshot = snapshotWithRect.snapshot; | 103 var snapshot = snapshotWithRect.snapshot; |
| 104 this._lastLoadedSnapshot = snapshot; | 104 this._lastLoadedSnapshot = snapshot; |
| 105 this._imageView.setMask(snapshotWithRect.rect); | 105 this._imageView.setMask(snapshotWithRect.rect); |
| 106 snapshot.commandLog().then(log => onCommandLogDone.call(this, snapshot, sn
apshotWithRect.rect, log)); | 106 snapshot.commandLog().then(log => onCommandLogDone.call(this, snapshot, sn
apshotWithRect.rect, log)); |
| 107 }); | 107 }); |
| 108 | 108 |
| 109 /** | 109 /** |
| 110 * @param {!WebInspector.PaintProfilerSnapshot} snapshot | 110 * @param {!SDK.PaintProfilerSnapshot} snapshot |
| 111 * @param {?Protocol.DOM.Rect} clipRect | 111 * @param {?Protocol.DOM.Rect} clipRect |
| 112 * @param {!Array.<!WebInspector.PaintProfilerLogItem>=} log | 112 * @param {!Array.<!SDK.PaintProfilerLogItem>=} log |
| 113 * @this {WebInspector.TimelinePaintProfilerView} | 113 * @this {Timeline.TimelinePaintProfilerView} |
| 114 */ | 114 */ |
| 115 function onCommandLogDone(snapshot, clipRect, log) { | 115 function onCommandLogDone(snapshot, clipRect, log) { |
| 116 this._logTreeView.setCommandLog(snapshot.target(), log || []); | 116 this._logTreeView.setCommandLog(snapshot.target(), log || []); |
| 117 this._paintProfilerView.setSnapshotAndLog(snapshot, log || [], clipRect); | 117 this._paintProfilerView.setSnapshotAndLog(snapshot, log || [], clipRect); |
| 118 } | 118 } |
| 119 } | 119 } |
| 120 | 120 |
| 121 _releaseSnapshot() { | 121 _releaseSnapshot() { |
| 122 if (!this._lastLoadedSnapshot) | 122 if (!this._lastLoadedSnapshot) |
| 123 return; | 123 return; |
| 124 this._lastLoadedSnapshot.release(); | 124 this._lastLoadedSnapshot.release(); |
| 125 this._lastLoadedSnapshot = null; | 125 this._lastLoadedSnapshot = null; |
| 126 } | 126 } |
| 127 | 127 |
| 128 _onWindowChanged() { | 128 _onWindowChanged() { |
| 129 this._logTreeView.updateWindow(this._paintProfilerView.selectionWindow()); | 129 this._logTreeView.updateWindow(this._paintProfilerView.selectionWindow()); |
| 130 } | 130 } |
| 131 }; | 131 }; |
| 132 | 132 |
| 133 /** | 133 /** |
| 134 * @unrestricted | 134 * @unrestricted |
| 135 */ | 135 */ |
| 136 WebInspector.TimelinePaintImageView = class extends WebInspector.Widget { | 136 Timeline.TimelinePaintImageView = class extends UI.Widget { |
| 137 constructor() { | 137 constructor() { |
| 138 super(true); | 138 super(true); |
| 139 this.registerRequiredCSS('timeline/timelinePaintProfiler.css'); | 139 this.registerRequiredCSS('timeline/timelinePaintProfiler.css'); |
| 140 this.contentElement.classList.add('fill', 'paint-profiler-image-view'); | 140 this.contentElement.classList.add('fill', 'paint-profiler-image-view'); |
| 141 this._imageContainer = this.contentElement.createChild('div', 'paint-profile
r-image-container'); | 141 this._imageContainer = this.contentElement.createChild('div', 'paint-profile
r-image-container'); |
| 142 this._imageElement = this._imageContainer.createChild('img'); | 142 this._imageElement = this._imageContainer.createChild('img'); |
| 143 this._maskElement = this._imageContainer.createChild('div'); | 143 this._maskElement = this._imageContainer.createChild('div'); |
| 144 this._imageElement.addEventListener('load', this._updateImagePosition.bind(t
his), false); | 144 this._imageElement.addEventListener('load', this._updateImagePosition.bind(t
his), false); |
| 145 | 145 |
| 146 this._transformController = new WebInspector.TransformController(this.conten
tElement, true); | 146 this._transformController = new LayerViewer.TransformController(this.content
Element, true); |
| 147 this._transformController.addEventListener( | 147 this._transformController.addEventListener( |
| 148 WebInspector.TransformController.Events.TransformChanged, this._updateIm
agePosition, this); | 148 LayerViewer.TransformController.Events.TransformChanged, this._updateIma
gePosition, this); |
| 149 } | 149 } |
| 150 | 150 |
| 151 /** | 151 /** |
| 152 * @override | 152 * @override |
| 153 */ | 153 */ |
| 154 onResize() { | 154 onResize() { |
| 155 if (this._imageElement.src) | 155 if (this._imageElement.src) |
| 156 this._updateImagePosition(); | 156 this._updateImagePosition(); |
| 157 } | 157 } |
| 158 | 158 |
| (...skipping 18 matching lines...) Expand all Loading... |
| 177 style.borderTopWidth = this._maskRectangle.y + 'px'; | 177 style.borderTopWidth = this._maskRectangle.y + 'px'; |
| 178 style.borderRightWidth = (width - this._maskRectangle.x - this._maskRectan
gle.width) + 'px'; | 178 style.borderRightWidth = (width - this._maskRectangle.x - this._maskRectan
gle.width) + 'px'; |
| 179 style.borderBottomWidth = (height - this._maskRectangle.y - this._maskRect
angle.height) + 'px'; | 179 style.borderBottomWidth = (height - this._maskRectangle.y - this._maskRect
angle.height) + 'px'; |
| 180 } | 180 } |
| 181 this._transformController.setScaleConstraints(0.5, 10 / scale); | 181 this._transformController.setScaleConstraints(0.5, 10 / scale); |
| 182 var matrix = new WebKitCSSMatrix() | 182 var matrix = new WebKitCSSMatrix() |
| 183 .scale(this._transformController.scale(), this._transformCo
ntroller.scale()) | 183 .scale(this._transformController.scale(), this._transformCo
ntroller.scale()) |
| 184 .translate(clientWidth / 2, clientHeight / 2) | 184 .translate(clientWidth / 2, clientHeight / 2) |
| 185 .scale(scale, scale) | 185 .scale(scale, scale) |
| 186 .translate(-width / 2, -height / 2); | 186 .translate(-width / 2, -height / 2); |
| 187 var bounds = WebInspector.Geometry.boundsForTransformedPoints(matrix, [0, 0,
0, width, height, 0]); | 187 var bounds = Common.Geometry.boundsForTransformedPoints(matrix, [0, 0, 0, wi
dth, height, 0]); |
| 188 this._transformController.clampOffsets( | 188 this._transformController.clampOffsets( |
| 189 paddingX - bounds.maxX, clientWidth - paddingX - bounds.minX, paddingY -
bounds.maxY, | 189 paddingX - bounds.maxX, clientWidth - paddingX - bounds.minX, paddingY -
bounds.maxY, |
| 190 clientHeight - paddingY - bounds.minY); | 190 clientHeight - paddingY - bounds.minY); |
| 191 matrix = new WebKitCSSMatrix() | 191 matrix = new WebKitCSSMatrix() |
| 192 .translate(this._transformController.offsetX(), this._transform
Controller.offsetY()) | 192 .translate(this._transformController.offsetX(), this._transform
Controller.offsetY()) |
| 193 .multiply(matrix); | 193 .multiply(matrix); |
| 194 this._imageContainer.style.webkitTransform = matrix.toString(); | 194 this._imageContainer.style.webkitTransform = matrix.toString(); |
| 195 } | 195 } |
| 196 | 196 |
| 197 /** | 197 /** |
| 198 * @param {string=} imageURL | 198 * @param {string=} imageURL |
| 199 */ | 199 */ |
| 200 showImage(imageURL) { | 200 showImage(imageURL) { |
| 201 this._imageContainer.classList.toggle('hidden', !imageURL); | 201 this._imageContainer.classList.toggle('hidden', !imageURL); |
| 202 if (imageURL) | 202 if (imageURL) |
| 203 this._imageElement.src = imageURL; | 203 this._imageElement.src = imageURL; |
| 204 } | 204 } |
| 205 | 205 |
| 206 /** | 206 /** |
| 207 * @param {?Protocol.DOM.Rect} maskRectangle | 207 * @param {?Protocol.DOM.Rect} maskRectangle |
| 208 */ | 208 */ |
| 209 setMask(maskRectangle) { | 209 setMask(maskRectangle) { |
| 210 this._maskRectangle = maskRectangle; | 210 this._maskRectangle = maskRectangle; |
| 211 this._maskElement.classList.toggle('hidden', !maskRectangle); | 211 this._maskElement.classList.toggle('hidden', !maskRectangle); |
| 212 } | 212 } |
| 213 }; | 213 }; |
| OLD | NEW |