Devtools Animations: Add buffer and effect selection to animation timeline

Source/devtools/front_end/animation/animationTimeline.css

 /*
  * Copyright (c) 2015 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.
  */
 
 .animation-node-row {
     width: 100%;
     display: flex;
     border-bottom: 1px dashed #ccc;
 }
 
+.animation-node-row:first-child > .animation-node-description {
+    line-height: 45px;
+}
+
+.animation-node-row:first-child > .animation-node-timeline {
+    padding-top: 5px;
+}
+
 .animation-node-description {
     display: inline-block;
     min-width: 200px;
     max-width: 200px;
     padding-left: 15px;
     overflow: hidden;
     position: relative;
     transform-style: preserve-3d;
     line-height: 40px;
     border-bottom: 1px solid hsl(0, 0%, 90%);
@@ skipping 56 matching lines @@
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
     min-width: 50px;
 }
 
 .animation-timeline-header {
     height: 44px;
     border-bottom: 1px solid #ccc;
     flex-shrink: 0;
+    display: flex;
 }
 
 .animation-timeline-header:after {
     content: "";
     height: 100%;
     position: absolute;
     width: 200px;
     left: 0;
     background-color: hsl(0, 0%, 98%);
     z-index: -1;
     border-right: 1px solid hsl(0, 0%, 90%);
 }
 
 .animation-controls {
-    width: 201px;
-    max-width: 201px;
+    flex: 0 0 200px;
     padding: 10px;
     height: 100%;
     line-height: 22px;
     background-color: hsl(0, 0%, 98%);
     border-right: 1px solid hsl(0, 0%, 90%);
 }
 
-.animation-timeline-markers {
+.animation-timeline-buffer {
     height: 100%;
-    width: calc(100% - 200px);
-    display: inline-block;
+    flex-grow: 1;
+    border-left: 1px solid #ccc;
+    display: flex;
+    padding: 0 2px;
 }
 
 .animation-time-overlay {
     background-color: black;
     opacity: 0.05;
     position: absolute;
     height: 100%;
     width: 100%;
 }
 
@@ skipping 53 matching lines @@
 }
 
 .animation-scrubber {
     opacity: 1;
     position: absolute;
     left: 230px;
     height: calc(100% - 43px);
     width: calc(100% - 200px);
     top: 43px;
     border-left: 1px solid rgba(0,0,0,0.5);
+    display: none;
 }
 
 .animation-scrubber.animation-timeline-end {
     border: none;
 }
 
 .animation-scrubber-head {
     background-color: rgba(0, 0, 0, 0.7);
     width: 60px;
     height: 23px;
@@ skipping 41 matching lines @@
     background-color: rgba(0, 0, 0, 0.7);
 }
 
 .animation-timeline-end > .animation-timeline-timer {
     visibility: hidden;
 }
 
 svg.animation-timeline-grid {
     position: absolute;
     left: 230px;
+    top: 43px;
 }
 
 rect.animation-timeline-grid-line {
     fill: hsl(0, 0%, 90%);
 }
 
 .animation-timeline-row > svg.animation-ui {
     position: absolute;
 }
 
@@ skipping 58 matching lines @@
     padding-left: 230px;
     padding-right: 30px;
     text-align: center;
     position: absolute;
     font-size: 20px;
     line-height: 32px;
     align-items: center;   justify-content: center;
     width: 100%;
     height: calc(100% - 44px);
     display: flex;
-}
+}
+
+.animation-buffer-preview {
+    height: 35px;
+    margin: 4px 2px;
+    background-color: #F3F3F3;
+    border-radius: 2px;
+    flex: 1 1;
+    padding: 4px;
+    max-width: 100px;
+}
+.animation-buffer-preview.selected {
+    background-color: hsl(217, 89%, 61%);
+}
+.animation-buffer-preview.selected > svg > line {
+    stroke: white !important;
+}
+.animation-buffer-preview > svg > line {
+    stroke-width: 1px;
+}