| 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 |