DevTools: [lighthouse] Implement performance metrics filmstrip

DevTools: [lighthouse] Implement performance metrics filmstrip

BUG=717082
Review-Url: https://codereview.chromium.org/2861053003
Cr-Commit-Position: refs/heads/master@{#470006}
Committed: https://chromium.googlesource.com/chromium/src/+/fac798ecc52156a56b4c9bb337def9ccf652592b

[pfeldman, 2017-05-04 22:23:33]

pfeldman@chromium.org changed reviewers:
+ dgozman@chromium.org, paulirish@chromium.org

[paulirish, 2017-05-04 23:06:32]

will need a rebase, but the conflict is straightforward.

the width of the metrics is based on the report width rather than thumbnails
width. 

a few comments on the filmstrip generation below. tricky if we're dealing with
1,2,3 screenshots.

https://codereview.chromium.org/2861053003/diff/1/third_party/WebKit/Source/d...
File third_party/WebKit/Source/devtools/front_end/audits2/Audits2Panel.js
(right):

https://codereview.chromium.org/2861053003/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/audits2/Audits2Panel.js:565: for
(var time = timeStep; time <= timeSpan; time += timeStep) {
a single screenshot trace will be a problem here.
example page:
http://stevesouders.com/cuzillion/?c0=hj1hfff2_0_f&c1=bi1hfff0_0_f&t=14939381...

perhaps for the loop condition: `time <= (timeSpan + timeStep)`
above in calculating timeStamp do a `numberOfFrames + 1`?

https://codereview.chromium.org/2861053003/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/audits2/Audits2Panel.js:571: if
(!frameForTime)
we'll want empty frames at the start if the first screenshot is 5s in.
So I think you want to move this `continue` to right above the `src` assignment.

https://codereview.chromium.org/2861053003/diff/1/third_party/WebKit/Source/d...
File third_party/WebKit/Source/devtools/front_end/audits2/audits2Panel.css
(right):

https://codereview.chromium.org/2861053003/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/audits2/audits2Panel.css:94:
box-shadow: 0 0 3px #bbb;
if we have empty frames in our filmstrip at 1,2,3 seconds we'll want to see
these empty boxes with shadow.
so this styling might want to move to .thumbnail, though you'll need them to be
equal height.

[pfeldman, 2017-05-05 19:37:37]

PTAL

[dgozman, 2017-05-05 20:20:05]

lgtm

[paulirish, 2017-05-05 20:40:14]

The CQ bit was checked by paulirish@chromium.org

[paulirish, 2017-05-05 20:40:14]

lgtm

[commit-bot: I haz the power, 2017-05-05 20:41:17]

CQ is trying da patch.

Follow status at:
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[commit-bot: I haz the power, 2017-05-05 21:36:35]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2017-05-05 21:36:36]

Try jobs failed on following builders:
  linux_chromium_rel_ng on master.tryserver.chromium.linux (JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.linux/builders/linux_chromium_...)

[pfeldman, 2017-05-05 22:11:49]

The CQ bit was checked by pfeldman@chromium.org

[pfeldman, 2017-05-05 22:11:50]

The patchset sent to the CQ was uploaded after l-g-t-m from
paulirish@chromium.org, dgozman@chromium.org
Link to the patchset: https://codereview.chromium.org/2861053003/#ps40001
(title: "test fixed")

[commit-bot: I haz the power, 2017-05-05 22:13:16]

CQ is trying da patch.

Follow status at:
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[commit-bot: I haz the power, 2017-05-06 00:34:02]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2017-05-06 00:34:03]

Try jobs failed on following builders:
  mac_chromium_rel_ng on master.tryserver.chromium.mac (JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.mac/builders/mac_chromium_rel_...)

[pfeldman, 2017-05-08 14:15:11]

The CQ bit was checked by pfeldman@chromium.org

[commit-bot: I haz the power, 2017-05-08 14:15:28]

CQ is trying da patch.

Follow status at:
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[commit-bot: I haz the power, 2017-05-08 16:25:20]

CQ is committing da patch.

Bot data: {"patchset_id": 40001, "attempt_start_ts": 1494252911682250,
"parent_rev": "3aa41dca5b0c069c0afc5bf9d14d671f96d35636", "commit_rev":
"fac798ecc52156a56b4c9bb337def9ccf652592b"}

[commit-bot: I haz the power, 2017-05-08 16:25:34]

Description was changed from

==========
DevTools: [lighthouse] Implement performance metrics filmstrip

BUG=717082
==========

to

==========
DevTools: [lighthouse] Implement performance metrics filmstrip

BUG=717082

Review-Url: https://codereview.chromium.org/2861053003
Cr-Commit-Position: refs/heads/master@{#470006}
Committed:
https://chromium.googlesource.com/chromium/src/+/fac798ecc52156a56b4c9bb337de...
==========

[commit-bot: I haz the power, 2017-05-08 16:25:35]

Committed patchset #3 (id:40001) as
https://chromium.googlesource.com/chromium/src/+/fac798ecc52156a56b4c9bb337de...