DevTools: [lighthouse] Implement performance metrics filmstrip

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

Index: third_party/WebKit/Source/devtools/front_end/audits2/audits2Panel.css
diff --git a/third_party/WebKit/Source/devtools/front_end/audits2/audits2Panel.css b/third_party/WebKit/Source/devtools/front_end/audits2/audits2Panel.css
index b42f83d359b4a61828d7bdb282ebf3cb4cee5078..7e2ed1475c4982478ae04b17f940a53c3b46b987 100644
--- a/third_party/WebKit/Source/devtools/front_end/audits2/audits2Panel.css
+++ b/third_party/WebKit/Source/devtools/front_end/audits2/audits2Panel.css
@@ -53,3 +53,60 @@
     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;
+}