OLD | NEW |
1 /** | 1 /** |
2 * Copyright 2017 Google Inc. All rights reserved. | 2 * Copyright 2017 Google Inc. All rights reserved. |
3 * | 3 * |
4 * Licensed under the Apache License, Version 2.0 (the "License"); | 4 * Licensed under the Apache License, Version 2.0 (the "License"); |
5 * you may not use this file except in compliance with the License. | 5 * you may not use this file except in compliance with the License. |
6 * You may obtain a copy of the License at | 6 * You may obtain a copy of the License at |
7 * | 7 * |
8 * http://www.apache.org/licenses/LICENSE-2.0 | 8 * http://www.apache.org/licenses/LICENSE-2.0 |
9 * | 9 * |
10 * Unless required by applicable law or agreed to in writing, software | 10 * Unless required by applicable law or agreed to in writing, software |
11 * distributed under the License is distributed on an "AS IS" BASIS, | 11 * distributed under the License is distributed on an "AS IS" BASIS, |
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | 12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
13 * See the License for the specific language governing permissions and | 13 * See the License for the specific language governing permissions and |
14 * limitations under the License. | 14 * limitations under the License. |
15 */ | 15 */ |
16 'use strict'; | 16 'use strict'; |
17 | 17 |
18 /* globals self CriticalRequestChainRenderer */ | 18 /* globals self CriticalRequestChainRenderer Util */ |
19 | 19 |
20 class DetailsRenderer { | 20 class DetailsRenderer { |
21 /** | 21 /** |
22 * @param {!DOM} dom | 22 * @param {!DOM} dom |
23 */ | 23 */ |
24 constructor(dom) { | 24 constructor(dom) { |
25 /** @private {!DOM} */ | 25 /** @private {!DOM} */ |
26 this._dom = dom; | 26 this._dom = dom; |
27 /** @private {!Document|!Element} */ | 27 /** @private {!Document|!Element} */ |
28 this._templateContext; // eslint-disable-line no-unused-expressions | 28 this._templateContext; // eslint-disable-line no-unused-expressions |
(...skipping 182 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
211 * @return {!Element} | 211 * @return {!Element} |
212 */ | 212 */ |
213 _renderFilmstrip(details) { | 213 _renderFilmstrip(details) { |
214 const filmstripEl = this._dom.createElement('div', 'lh-filmstrip'); | 214 const filmstripEl = this._dom.createElement('div', 'lh-filmstrip'); |
215 | 215 |
216 for (const thumbnail of details.items) { | 216 for (const thumbnail of details.items) { |
217 const frameEl = this._dom.createChildOf(filmstripEl, 'div', 'lh-filmstrip_
_frame'); | 217 const frameEl = this._dom.createChildOf(filmstripEl, 'div', 'lh-filmstrip_
_frame'); |
218 | 218 |
219 let timing = thumbnail.timing.toLocaleString() + ' ms'; | 219 let timing = thumbnail.timing.toLocaleString() + ' ms'; |
220 if (thumbnail.timing > 1000) { | 220 if (thumbnail.timing > 1000) { |
221 timing = Math.round(thumbnail.timing / 100) / 10 + ' s'; | 221 timing = Util.formatNumber(thumbnail.timing / 1000) + ' s'; |
222 } | 222 } |
223 | 223 |
224 const timingEl = this._dom.createChildOf(frameEl, 'div', 'lh-filmstrip__ti
mestamp'); | 224 const timingEl = this._dom.createChildOf(frameEl, 'div', 'lh-filmstrip__ti
mestamp'); |
225 timingEl.textContent = timing; | 225 timingEl.textContent = timing; |
226 | 226 |
227 const base64data = thumbnail.data; | 227 const base64data = thumbnail.data; |
228 this._dom.createChildOf(frameEl, 'img', 'lh-filmstrip__thumbnail', { | 228 this._dom.createChildOf(frameEl, 'img', 'lh-filmstrip__thumbnail', { |
229 src: `data:image/jpeg;base64,${base64data}`, | 229 src: `data:image/jpeg;base64,${base64data}`, |
230 alt: `Screenshot at ${timing}`, | 230 alt: `Screenshot at ${timing}`, |
231 }); | 231 }); |
(...skipping 87 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
319 /** @typedef {{ | 319 /** @typedef {{ |
320 * type: string, | 320 * type: string, |
321 * url: ({text: string}|undefined), | 321 * url: ({text: string}|undefined), |
322 * mimeType: ({text: string}|undefined) | 322 * mimeType: ({text: string}|undefined) |
323 * }} | 323 * }} |
324 */ | 324 */ |
325 DetailsRenderer.ThumbnailDetails; // eslint-disable-line no-unused-expressions | 325 DetailsRenderer.ThumbnailDetails; // eslint-disable-line no-unused-expressions |
326 | 326 |
327 /** @typedef {{ | 327 /** @typedef {{ |
328 * type: string, | 328 * type: string, |
| 329 * scale: number, |
329 * items: !Array<{timing: number, timestamp: number, data: string}>, | 330 * items: !Array<{timing: number, timestamp: number, data: string}>, |
330 * }} | 331 * }} |
331 */ | 332 */ |
332 DetailsRenderer.FilmstripDetails; // eslint-disable-line no-unused-expressions | 333 DetailsRenderer.FilmstripDetails; // eslint-disable-line no-unused-expressions |
OLD | NEW |