OLD | NEW |
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 | 4 |
5 /** | 5 /** |
6 * @constructor | 6 * @constructor |
7 * @extends {WebInspector.HBox} | 7 * @extends {WebInspector.HBox} |
8 */ | 8 */ |
9 WebInspector.FilmStripView = function() | 9 WebInspector.FilmStripView = function() |
10 { | 10 { |
11 WebInspector.HBox.call(this, true); | 11 WebInspector.HBox.call(this, true); |
12 this.registerRequiredCSS("components_lazy/filmStripView.css"); | 12 this.registerRequiredCSS("components_lazy/filmStripView.css"); |
13 this.contentElement.classList.add("film-strip-view"); | 13 this.contentElement.classList.add("film-strip-view"); |
14 this._statusLabel = this.contentElement.createChild("div", "label"); | 14 this._statusLabel = this.contentElement.createChild("div", "label"); |
15 this.reset(); | 15 this.reset(); |
16 this.setMode(WebInspector.FilmStripView.Modes.TimeBased); | 16 this.setMode(WebInspector.FilmStripView.Modes.TimeBased); |
17 } | 17 }; |
18 | 18 |
19 /** @enum {symbol} */ | 19 /** @enum {symbol} */ |
20 WebInspector.FilmStripView.Events = { | 20 WebInspector.FilmStripView.Events = { |
21 FrameSelected: Symbol("FrameSelected"), | 21 FrameSelected: Symbol("FrameSelected"), |
22 FrameEnter: Symbol("FrameEnter"), | 22 FrameEnter: Symbol("FrameEnter"), |
23 FrameExit: Symbol("FrameExit"), | 23 FrameExit: Symbol("FrameExit"), |
24 } | 24 }; |
25 | 25 |
26 WebInspector.FilmStripView.Modes = { | 26 WebInspector.FilmStripView.Modes = { |
27 TimeBased: "TimeBased", | 27 TimeBased: "TimeBased", |
28 FrameBased: "FrameBased" | 28 FrameBased: "FrameBased" |
29 } | 29 }; |
30 | 30 |
31 WebInspector.FilmStripView.prototype = { | 31 WebInspector.FilmStripView.prototype = { |
32 /** | 32 /** |
33 * @param {string} mode | 33 * @param {string} mode |
34 */ | 34 */ |
35 setMode: function(mode) | 35 setMode: function(mode) |
36 { | 36 { |
37 this._mode = mode; | 37 this._mode = mode; |
38 this.contentElement.classList.toggle("time-based", mode === WebInspector
.FilmStripView.Modes.TimeBased); | 38 this.contentElement.classList.toggle("time-based", mode === WebInspector
.FilmStripView.Modes.TimeBased); |
39 this.update(); | 39 this.update(); |
(...skipping 157 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
197 | 197 |
198 /** | 198 /** |
199 * @param {string} text | 199 * @param {string} text |
200 */ | 200 */ |
201 setStatusText: function(text) | 201 setStatusText: function(text) |
202 { | 202 { |
203 this._statusLabel.textContent = text; | 203 this._statusLabel.textContent = text; |
204 }, | 204 }, |
205 | 205 |
206 __proto__: WebInspector.HBox.prototype | 206 __proto__: WebInspector.HBox.prototype |
207 } | 207 }; |
208 | 208 |
209 /** | 209 /** |
210 * @param {!Element} imageElement | 210 * @param {!Element} imageElement |
211 * @param {?string} data | 211 * @param {?string} data |
212 */ | 212 */ |
213 WebInspector.FilmStripView._setImageData = function(imageElement, data) | 213 WebInspector.FilmStripView._setImageData = function(imageElement, data) |
214 { | 214 { |
215 if (data) | 215 if (data) |
216 imageElement.src = "data:image/jpg;base64," + data; | 216 imageElement.src = "data:image/jpg;base64," + data; |
217 } | 217 }; |
218 | 218 |
219 /** | 219 /** |
220 * @constructor | 220 * @constructor |
221 * @extends {WebInspector.VBox} | 221 * @extends {WebInspector.VBox} |
222 * @param {!WebInspector.FilmStripModel.Frame} filmStripFrame | 222 * @param {!WebInspector.FilmStripModel.Frame} filmStripFrame |
223 * @param {number=} zeroTime | 223 * @param {number=} zeroTime |
224 */ | 224 */ |
225 WebInspector.FilmStripView.Dialog = function(filmStripFrame, zeroTime) | 225 WebInspector.FilmStripView.Dialog = function(filmStripFrame, zeroTime) |
226 { | 226 { |
227 WebInspector.VBox.call(this, true); | 227 WebInspector.VBox.call(this, true); |
(...skipping 11 matching lines...) Expand all Loading... |
239 var prevButton = createTextButton("\u25C0", this._onPrevFrame.bind(this), un
defined, WebInspector.UIString("Previous frame")); | 239 var prevButton = createTextButton("\u25C0", this._onPrevFrame.bind(this), un
defined, WebInspector.UIString("Previous frame")); |
240 footerElement.appendChild(prevButton); | 240 footerElement.appendChild(prevButton); |
241 this._timeLabel = footerElement.createChild("div", "filmstrip-dialog-label")
; | 241 this._timeLabel = footerElement.createChild("div", "filmstrip-dialog-label")
; |
242 var nextButton = createTextButton("\u25B6", this._onNextFrame.bind(this), un
defined, WebInspector.UIString("Next frame")); | 242 var nextButton = createTextButton("\u25B6", this._onNextFrame.bind(this), un
defined, WebInspector.UIString("Next frame")); |
243 footerElement.appendChild(nextButton); | 243 footerElement.appendChild(nextButton); |
244 footerElement.createChild("div", "flex-auto"); | 244 footerElement.createChild("div", "flex-auto"); |
245 | 245 |
246 this.contentElement.addEventListener("keydown", this._keyDown.bind(this), fa
lse); | 246 this.contentElement.addEventListener("keydown", this._keyDown.bind(this), fa
lse); |
247 this.setDefaultFocusedElement(this.contentElement); | 247 this.setDefaultFocusedElement(this.contentElement); |
248 this._render(); | 248 this._render(); |
249 } | 249 }; |
250 | 250 |
251 WebInspector.FilmStripView.Dialog.prototype = { | 251 WebInspector.FilmStripView.Dialog.prototype = { |
252 _resize: function() | 252 _resize: function() |
253 { | 253 { |
254 if (!this._dialog) { | 254 if (!this._dialog) { |
255 this._dialog = new WebInspector.Dialog(); | 255 this._dialog = new WebInspector.Dialog(); |
256 this.show(this._dialog.element); | 256 this.show(this._dialog.element); |
257 this._dialog.setWrapsContent(true); | 257 this._dialog.setWrapsContent(true); |
258 this._dialog.show(); | 258 this._dialog.show(); |
259 } | 259 } |
(...skipping 60 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
320 * @return {!Promise<undefined>} | 320 * @return {!Promise<undefined>} |
321 */ | 321 */ |
322 _render: function() | 322 _render: function() |
323 { | 323 { |
324 var frame = this._frames[this._index]; | 324 var frame = this._frames[this._index]; |
325 this._timeLabel.textContent = Number.millisToString(frame.timestamp - th
is._zeroTime); | 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)); | 326 return frame.imageDataPromise().then(WebInspector.FilmStripView._setImag
eData.bind(null, this._imageElement)).then(this._resize.bind(this)); |
327 }, | 327 }, |
328 | 328 |
329 __proto__: WebInspector.VBox.prototype | 329 __proto__: WebInspector.VBox.prototype |
330 } | 330 }; |
OLD | NEW |