DevTools: [lighthouse] Implement performance metrics filmstrip

third_party/WebKit/Source/devtools/front_end/audits2/audits2Panel.css

 /*
  * Copyright 2017 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 .toolbar {
     border-bottom: 1px solid #ccc;
 }
 
@@ skipping 35 matching lines @@
 }
 
 .audits2-landing-center button {
     margin-top: 20px;
 }
 
 .report-container {
     overflow: auto;
     position: relative;
 }
+
+.audits2-timeline {
+    display: flex;
+    flex-direction: column;
+    border-top: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
+    padding: 5px 0;
+    margin: 5px 0;
+}
+
+.audits2-filmstrip {
+    display: flex;
+    flex-direction: row;
+    overflow: auto;
+    margin-bottom: 20px;
+}
+
+.audits2-filmstrip .frame {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 4px;
+    flex: none;
+}
+
+.audits2-filmstrip .frame .thumbnail {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    pointer-events: none;
+    margin: 4px 0 2px;
+    border: 2px solid transparent;
+}
+
+.audits2-filmstrip .frame .thumbnail img {
+    height: auto;
+    width: 50px;
+    pointer-events: none;
+    box-shadow: 0 0 3px #bbb;

[paulirish, 2017/05/04 23:06:31]

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.

+    flex: 0 0 auto;
+}
+
+.audits2-filmstrip .frame .time {
+    margin-top: 2px;
+}
+
+.audits2-timeline-marker {
+    margin: 4px 0 6px;
+}
+
+.audits2-timeline-subtitle {
+    color: #01579B;
+}
+
+.audits2-timeline-bar {
+    border-top: 4px solid #03A9F4;
+}