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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/components_lazy/FilmStripView.js

Issue 2466123002: DevTools: reformat front-end code to match chromium style. (Closed)
Patch Set: all done 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
« no previous file with comments | « third_party/WebKit/Source/devtools/front_end/components_lazy/FilmStripModel.js ('k') | third_party/WebKit/Source/devtools/front_end/components_lazy/LineLevelProfile.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 // Copyright 2015 The Chromium Authors. All rights reserved. 1 // Copyright 2015 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
5 /** 4 /**
6 * @constructor 5 * @unrestricted
7 * @extends {WebInspector.HBox}
8 */ 6 */
9 WebInspector.FilmStripView = function() 7 WebInspector.FilmStripView = class extends WebInspector.HBox {
10 { 8 constructor() {
11 WebInspector.HBox.call(this, true); 9 super(true);
12 this.registerRequiredCSS("components_lazy/filmStripView.css"); 10 this.registerRequiredCSS('components_lazy/filmStripView.css');
13 this.contentElement.classList.add("film-strip-view"); 11 this.contentElement.classList.add('film-strip-view');
14 this._statusLabel = this.contentElement.createChild("div", "label"); 12 this._statusLabel = this.contentElement.createChild('div', 'label');
15 this.reset(); 13 this.reset();
16 this.setMode(WebInspector.FilmStripView.Modes.TimeBased); 14 this.setMode(WebInspector.FilmStripView.Modes.TimeBased);
15 }
16
17 /**
18 * @param {!Element} imageElement
19 * @param {?string} data
20 */
21 static _setImageData(imageElement, data) {
22 if (data)
23 imageElement.src = 'data:image/jpg;base64,' + data;
24 }
25
26 /**
27 * @param {string} mode
28 */
29 setMode(mode) {
30 this._mode = mode;
31 this.contentElement.classList.toggle('time-based', mode === WebInspector.Fil mStripView.Modes.TimeBased);
32 this.update();
33 }
34
35 /**
36 * @param {!WebInspector.FilmStripModel} filmStripModel
37 * @param {number} zeroTime
38 * @param {number} spanTime
39 */
40 setModel(filmStripModel, zeroTime, spanTime) {
41 this._model = filmStripModel;
42 this._zeroTime = zeroTime;
43 this._spanTime = spanTime;
44 var frames = filmStripModel.frames();
45 if (!frames.length) {
46 this.reset();
47 return;
48 }
49 this.update();
50 }
51
52 /**
53 * @param {!WebInspector.FilmStripModel.Frame} frame
54 * @return {!Promise<!Element>}
55 */
56 createFrameElement(frame) {
57 var time = frame.timestamp;
58 var element = createElementWithClass('div', 'frame');
59 element.title = WebInspector.UIString('Doubleclick to zoom image. Click to v iew preceding requests.');
60 element.createChild('div', 'time').textContent = Number.millisToString(time - this._zeroTime);
61 var imageElement = element.createChild('div', 'thumbnail').createChild('img' );
62 element.addEventListener(
63 'mousedown', this._onMouseEvent.bind(this, WebInspector.FilmStripView.Ev ents.FrameSelected, time), false);
64 element.addEventListener(
65 'mouseenter', this._onMouseEvent.bind(this, WebInspector.FilmStripView.E vents.FrameEnter, time), false);
66 element.addEventListener(
67 'mouseout', this._onMouseEvent.bind(this, WebInspector.FilmStripView.Eve nts.FrameExit, time), false);
68 element.addEventListener('dblclick', this._onDoubleClick.bind(this, frame), false);
69
70 return frame.imageDataPromise()
71 .then(WebInspector.FilmStripView._setImageData.bind(null, imageElement))
72 .then(returnElement);
73 /**
74 * @return {!Element}
75 */
76 function returnElement() {
77 return element;
78 }
79 }
80
81 /**
82 * @param {number} time
83 * @return {!WebInspector.FilmStripModel.Frame}
84 */
85 frameByTime(time) {
86 /**
87 * @param {number} time
88 * @param {!WebInspector.FilmStripModel.Frame} frame
89 * @return {number}
90 */
91 function comparator(time, frame) {
92 return time - frame.timestamp;
93 }
94 // Using the first frame to fill the interval between recording start
95 // and a moment the frame is taken.
96 var frames = this._model.frames();
97 var index = Math.max(frames.upperBound(time, comparator) - 1, 0);
98 return frames[index];
99 }
100
101 update() {
102 if (!this._model)
103 return;
104 var frames = this._model.frames();
105 if (!frames.length)
106 return;
107
108 if (this._mode === WebInspector.FilmStripView.Modes.FrameBased) {
109 Promise.all(frames.map(this.createFrameElement.bind(this))).then(appendEle ments.bind(this));
110 return;
111 }
112
113 var width = this.contentElement.clientWidth;
114 var scale = this._spanTime / width;
115 this.createFrameElement(frames[0]).then(
116 continueWhenFrameImageLoaded.bind(this)); // Calculate frame width basi ng on the first frame.
117
118 /**
119 * @this {WebInspector.FilmStripView}
120 * @param {!Element} element0
121 */
122 function continueWhenFrameImageLoaded(element0) {
123 var frameWidth = Math.ceil(WebInspector.measurePreferredSize(element0, thi s.contentElement).width);
124 if (!frameWidth)
125 return;
126
127 var promises = [];
128 for (var pos = frameWidth; pos < width; pos += frameWidth) {
129 var time = pos * scale + this._zeroTime;
130 promises.push(this.createFrameElement(this.frameByTime(time)).then(fixWi dth));
131 }
132 Promise.all(promises).then(appendElements.bind(this));
133 /**
134 * @param {!Element} element
135 * @return {!Element}
136 */
137 function fixWidth(element) {
138 element.style.width = frameWidth + 'px';
139 return element;
140 }
141 }
142
143 /**
144 * @param {!Array.<!Element>} elements
145 * @this {WebInspector.FilmStripView}
146 */
147 function appendElements(elements) {
148 this.contentElement.removeChildren();
149 for (var i = 0; i < elements.length; ++i)
150 this.contentElement.appendChild(elements[i]);
151 }
152 }
153
154 /**
155 * @override
156 */
157 onResize() {
158 if (this._mode === WebInspector.FilmStripView.Modes.FrameBased)
159 return;
160 this.update();
161 }
162
163 /**
164 * @param {string} eventName
165 * @param {number} timestamp
166 */
167 _onMouseEvent(eventName, timestamp) {
168 this.dispatchEventToListeners(eventName, timestamp);
169 }
170
171 /**
172 * @param {!WebInspector.FilmStripModel.Frame} filmStripFrame
173 */
174 _onDoubleClick(filmStripFrame) {
175 new WebInspector.FilmStripView.Dialog(filmStripFrame, this._zeroTime);
176 }
177
178 reset() {
179 this._zeroTime = 0;
180 this.contentElement.removeChildren();
181 this.contentElement.appendChild(this._statusLabel);
182 }
183
184 /**
185 * @param {string} text
186 */
187 setStatusText(text) {
188 this._statusLabel.textContent = text;
189 }
17 }; 190 };
18 191
19 /** @enum {symbol} */ 192 /** @enum {symbol} */
20 WebInspector.FilmStripView.Events = { 193 WebInspector.FilmStripView.Events = {
21 FrameSelected: Symbol("FrameSelected"), 194 FrameSelected: Symbol('FrameSelected'),
22 FrameEnter: Symbol("FrameEnter"), 195 FrameEnter: Symbol('FrameEnter'),
23 FrameExit: Symbol("FrameExit"), 196 FrameExit: Symbol('FrameExit'),
24 }; 197 };
25 198
26 WebInspector.FilmStripView.Modes = { 199 WebInspector.FilmStripView.Modes = {
27 TimeBased: "TimeBased", 200 TimeBased: 'TimeBased',
28 FrameBased: "FrameBased" 201 FrameBased: 'FrameBased'
29 }; 202 };
30 203
31 WebInspector.FilmStripView.prototype = {
32 /**
33 * @param {string} mode
34 */
35 setMode: function(mode)
36 {
37 this._mode = mode;
38 this.contentElement.classList.toggle("time-based", mode === WebInspector .FilmStripView.Modes.TimeBased);
39 this.update();
40 },
41
42 /**
43 * @param {!WebInspector.FilmStripModel} filmStripModel
44 * @param {number} zeroTime
45 * @param {number} spanTime
46 */
47 setModel: function(filmStripModel, zeroTime, spanTime)
48 {
49 this._model = filmStripModel;
50 this._zeroTime = zeroTime;
51 this._spanTime = spanTime;
52 var frames = filmStripModel.frames();
53 if (!frames.length) {
54 this.reset();
55 return;
56 }
57 this.update();
58 },
59
60 /**
61 * @param {!WebInspector.FilmStripModel.Frame} frame
62 * @return {!Promise<!Element>}
63 */
64 createFrameElement: function(frame)
65 {
66 var time = frame.timestamp;
67 var element = createElementWithClass("div", "frame");
68 element.title = WebInspector.UIString("Doubleclick to zoom image. Click to view preceding requests.");
69 element.createChild("div", "time").textContent = Number.millisToString(t ime - this._zeroTime);
70 var imageElement = element.createChild("div", "thumbnail").createChild(" img");
71 element.addEventListener("mousedown", this._onMouseEvent.bind(this, WebI nspector.FilmStripView.Events.FrameSelected, time), false);
72 element.addEventListener("mouseenter", this._onMouseEvent.bind(this, Web Inspector.FilmStripView.Events.FrameEnter, time), false);
73 element.addEventListener("mouseout", this._onMouseEvent.bind(this, WebIn spector.FilmStripView.Events.FrameExit, time), false);
74 element.addEventListener("dblclick", this._onDoubleClick.bind(this, fram e), false);
75
76 return frame.imageDataPromise().then(WebInspector.FilmStripView._setImag eData.bind(null, imageElement)).then(returnElement);
77 /**
78 * @return {!Element}
79 */
80 function returnElement()
81 {
82 return element;
83 }
84 },
85
86 /**
87 * @param {number} time
88 * @return {!WebInspector.FilmStripModel.Frame}
89 */
90 frameByTime: function(time)
91 {
92 /**
93 * @param {number} time
94 * @param {!WebInspector.FilmStripModel.Frame} frame
95 * @return {number}
96 */
97 function comparator(time, frame)
98 {
99 return time - frame.timestamp;
100 }
101 // Using the first frame to fill the interval between recording start
102 // and a moment the frame is taken.
103 var frames = this._model.frames();
104 var index = Math.max(frames.upperBound(time, comparator) - 1, 0);
105 return frames[index];
106 },
107
108 update: function()
109 {
110 if (!this._model)
111 return;
112 var frames = this._model.frames();
113 if (!frames.length)
114 return;
115
116 if (this._mode === WebInspector.FilmStripView.Modes.FrameBased) {
117 Promise.all(frames.map(this.createFrameElement.bind(this))).then(app endElements.bind(this));
118 return;
119 }
120
121 var width = this.contentElement.clientWidth;
122 var scale = this._spanTime / width;
123 this.createFrameElement(frames[0]).then(continueWhenFrameImageLoaded.bin d(this)); // Calculate frame width basing on the first frame.
124
125 /**
126 * @this {WebInspector.FilmStripView}
127 * @param {!Element} element0
128 */
129 function continueWhenFrameImageLoaded(element0)
130 {
131 var frameWidth = Math.ceil(WebInspector.measurePreferredSize(element 0, this.contentElement).width);
132 if (!frameWidth)
133 return;
134
135 var promises = [];
136 for (var pos = frameWidth; pos < width; pos += frameWidth) {
137 var time = pos * scale + this._zeroTime;
138 promises.push(this.createFrameElement(this.frameByTime(time)).th en(fixWidth));
139 }
140 Promise.all(promises).then(appendElements.bind(this));
141 /**
142 * @param {!Element} element
143 * @return {!Element}
144 */
145 function fixWidth(element)
146 {
147 element.style.width = frameWidth + "px";
148 return element;
149 }
150 }
151
152 /**
153 * @param {!Array.<!Element>} elements
154 * @this {WebInspector.FilmStripView}
155 */
156 function appendElements(elements)
157 {
158 this.contentElement.removeChildren();
159 for (var i = 0; i < elements.length; ++i)
160 this.contentElement.appendChild(elements[i]);
161 }
162 },
163
164 /**
165 * @override
166 */
167 onResize: function()
168 {
169 if (this._mode === WebInspector.FilmStripView.Modes.FrameBased)
170 return;
171 this.update();
172 },
173
174 /**
175 * @param {string} eventName
176 * @param {number} timestamp
177 */
178 _onMouseEvent: function(eventName, timestamp)
179 {
180 this.dispatchEventToListeners(eventName, timestamp);
181 },
182
183 /**
184 * @param {!WebInspector.FilmStripModel.Frame} filmStripFrame
185 */
186 _onDoubleClick: function(filmStripFrame)
187 {
188 new WebInspector.FilmStripView.Dialog(filmStripFrame, this._zeroTime);
189 },
190
191 reset: function()
192 {
193 this._zeroTime = 0;
194 this.contentElement.removeChildren();
195 this.contentElement.appendChild(this._statusLabel);
196 },
197
198 /**
199 * @param {string} text
200 */
201 setStatusText: function(text)
202 {
203 this._statusLabel.textContent = text;
204 },
205
206 __proto__: WebInspector.HBox.prototype
207 };
208 204
209 /** 205 /**
210 * @param {!Element} imageElement 206 * @unrestricted
211 * @param {?string} data
212 */ 207 */
213 WebInspector.FilmStripView._setImageData = function(imageElement, data) 208 WebInspector.FilmStripView.Dialog = class extends WebInspector.VBox {
214 { 209 /**
215 if (data) 210 * @param {!WebInspector.FilmStripModel.Frame} filmStripFrame
216 imageElement.src = "data:image/jpg;base64," + data; 211 * @param {number=} zeroTime
217 }; 212 */
218 213 constructor(filmStripFrame, zeroTime) {
219 /** 214 super(true);
220 * @constructor 215 this.registerRequiredCSS('components_lazy/filmStripDialog.css');
221 * @extends {WebInspector.VBox} 216 this.contentElement.classList.add('filmstrip-dialog');
222 * @param {!WebInspector.FilmStripModel.Frame} filmStripFrame
223 * @param {number=} zeroTime
224 */
225 WebInspector.FilmStripView.Dialog = function(filmStripFrame, zeroTime)
226 {
227 WebInspector.VBox.call(this, true);
228 this.registerRequiredCSS("components_lazy/filmStripDialog.css");
229 this.contentElement.classList.add("filmstrip-dialog");
230 this.contentElement.tabIndex = 0; 217 this.contentElement.tabIndex = 0;
231 218
232 this._frames = filmStripFrame.model().frames(); 219 this._frames = filmStripFrame.model().frames();
233 this._index = filmStripFrame.index; 220 this._index = filmStripFrame.index;
234 this._zeroTime = zeroTime || filmStripFrame.model().zeroTime(); 221 this._zeroTime = zeroTime || filmStripFrame.model().zeroTime();
235 222
236 this._imageElement = this.contentElement.createChild("img"); 223 this._imageElement = this.contentElement.createChild('img');
237 var footerElement = this.contentElement.createChild("div", "filmstrip-dialog -footer"); 224 var footerElement = this.contentElement.createChild('div', 'filmstrip-dialog -footer');
238 footerElement.createChild("div", "flex-auto"); 225 footerElement.createChild('div', 'flex-auto');
239 var prevButton = createTextButton("\u25C0", this._onPrevFrame.bind(this), un defined, WebInspector.UIString("Previous frame")); 226 var prevButton =
227 createTextButton('\u25C0', this._onPrevFrame.bind(this), undefined, WebI nspector.UIString('Previous frame'));
240 footerElement.appendChild(prevButton); 228 footerElement.appendChild(prevButton);
241 this._timeLabel = footerElement.createChild("div", "filmstrip-dialog-label") ; 229 this._timeLabel = footerElement.createChild('div', 'filmstrip-dialog-label') ;
242 var nextButton = createTextButton("\u25B6", this._onNextFrame.bind(this), un defined, WebInspector.UIString("Next frame")); 230 var nextButton =
231 createTextButton('\u25B6', this._onNextFrame.bind(this), undefined, WebI nspector.UIString('Next frame'));
243 footerElement.appendChild(nextButton); 232 footerElement.appendChild(nextButton);
244 footerElement.createChild("div", "flex-auto"); 233 footerElement.createChild('div', 'flex-auto');
245 234
246 this.contentElement.addEventListener("keydown", this._keyDown.bind(this), fa lse); 235 this.contentElement.addEventListener('keydown', this._keyDown.bind(this), fa lse);
247 this.setDefaultFocusedElement(this.contentElement); 236 this.setDefaultFocusedElement(this.contentElement);
248 this._render(); 237 this._render();
238 }
239
240 _resize() {
241 if (!this._dialog) {
242 this._dialog = new WebInspector.Dialog();
243 this.show(this._dialog.element);
244 this._dialog.setWrapsContent(true);
245 this._dialog.show();
246 }
247 this._dialog.contentResized();
248 }
249
250 /**
251 * @param {!Event} event
252 */
253 _keyDown(event) {
254 switch (event.key) {
255 case 'ArrowLeft':
256 if (WebInspector.isMac() && event.metaKey)
257 this._onFirstFrame();
258 else
259 this._onPrevFrame();
260 break;
261
262 case 'ArrowRight':
263 if (WebInspector.isMac() && event.metaKey)
264 this._onLastFrame();
265 else
266 this._onNextFrame();
267 break;
268
269 case 'Home':
270 this._onFirstFrame();
271 break;
272
273 case 'End':
274 this._onLastFrame();
275 break;
276 }
277 }
278
279 _onPrevFrame() {
280 if (this._index > 0)
281 --this._index;
282 this._render();
283 }
284
285 _onNextFrame() {
286 if (this._index < this._frames.length - 1)
287 ++this._index;
288 this._render();
289 }
290
291 _onFirstFrame() {
292 this._index = 0;
293 this._render();
294 }
295
296 _onLastFrame() {
297 this._index = this._frames.length - 1;
298 this._render();
299 }
300
301 /**
302 * @return {!Promise<undefined>}
303 */
304 _render() {
305 var frame = this._frames[this._index];
306 this._timeLabel.textContent = Number.millisToString(frame.timestamp - this._ zeroTime);
307 return frame.imageDataPromise()
308 .then(WebInspector.FilmStripView._setImageData.bind(null, this._imageEle ment))
309 .then(this._resize.bind(this));
310 }
249 }; 311 };
250
251 WebInspector.FilmStripView.Dialog.prototype = {
252 _resize: function()
253 {
254 if (!this._dialog) {
255 this._dialog = new WebInspector.Dialog();
256 this.show(this._dialog.element);
257 this._dialog.setWrapsContent(true);
258 this._dialog.show();
259 }
260 this._dialog.contentResized();
261 },
262
263 /**
264 * @param {!Event} event
265 */
266 _keyDown: function(event)
267 {
268 switch (event.key) {
269 case "ArrowLeft":
270 if (WebInspector.isMac() && event.metaKey)
271 this._onFirstFrame();
272 else
273 this._onPrevFrame();
274 break;
275
276 case "ArrowRight":
277 if (WebInspector.isMac() && event.metaKey)
278 this._onLastFrame();
279 else
280 this._onNextFrame();
281 break;
282
283 case "Home":
284 this._onFirstFrame();
285 break;
286
287 case "End":
288 this._onLastFrame();
289 break;
290 }
291 },
292
293 _onPrevFrame: function()
294 {
295 if (this._index > 0)
296 --this._index;
297 this._render();
298 },
299
300 _onNextFrame: function()
301 {
302 if (this._index < this._frames.length - 1)
303 ++this._index;
304 this._render();
305 },
306
307 _onFirstFrame: function()
308 {
309 this._index = 0;
310 this._render();
311 },
312
313 _onLastFrame: function()
314 {
315 this._index = this._frames.length - 1;
316 this._render();
317 },
318
319 /**
320 * @return {!Promise<undefined>}
321 */
322 _render: function()
323 {
324 var frame = this._frames[this._index];
325 this._timeLabel.textContent = Number.millisToString(frame.timestamp - th is._zeroTime);
326 return frame.imageDataPromise().then(WebInspector.FilmStripView._setImag eData.bind(null, this._imageElement)).then(this._resize.bind(this));
327 },
328
329 __proto__: WebInspector.VBox.prototype
330 };
OLDNEW
« no previous file with comments | « third_party/WebKit/Source/devtools/front_end/components_lazy/FilmStripModel.js ('k') | third_party/WebKit/Source/devtools/front_end/components_lazy/LineLevelProfile.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698