Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(646)

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/timeline/TimelinePaintProfilerView.js

Issue 2493373002: DevTools: rename WebInspector into modules. (Closed)
Patch Set: for bots Created 4 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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 };
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698