Devtools Animations: Add buffer and effect selection to animation timeline

Source/devtools/front_end/animation/animationTimeline.css

Index: Source/devtools/front_end/animation/animationTimeline.css
diff --git a/Source/devtools/front_end/animation/animationTimeline.css b/Source/devtools/front_end/animation/animationTimeline.css
index 49766af6fd8beb7248dbf96f1fef32f984702d64..21f71bda51ff48a1dda07ddac09f0c5c0108779f 100644
--- a/Source/devtools/front_end/animation/animationTimeline.css
+++ b/Source/devtools/front_end/animation/animationTimeline.css
@@ -10,6 +10,14 @@
     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;
@@ -86,6 +94,7 @@ circle.animation-keyframe-point {
     height: 44px;
     border-bottom: 1px solid #ccc;
     flex-shrink: 0;
+    display: flex;
 }
 
 .animation-timeline-header:after {
@@ -100,8 +109,7 @@ circle.animation-keyframe-point {
 }
 
 .animation-controls {
-    width: 201px;
-    max-width: 201px;
+    flex: 0 0 200px;
     padding: 10px;
     height: 100%;
     line-height: 22px;
@@ -109,10 +117,12 @@ circle.animation-keyframe-point {
     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 {
@@ -185,6 +195,7 @@ input[type=range].animation-playback-slider::-webkit-slider-thumb {
     width: calc(100% - 200px);
     top: 43px;
     border-left: 1px solid rgba(0,0,0,0.5);
+    display: none;
 }
 
 .animation-scrubber.animation-timeline-end {
@@ -246,6 +257,7 @@ input[type=range].animation-playback-slider::-webkit-slider-thumb {
 svg.animation-timeline-grid {
     position: absolute;
     left: 230px;
+    top: 43px;
 }
 
 rect.animation-timeline-grid-line {
@@ -324,4 +336,23 @@ text.animation-timeline-grid-label {
     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;
+}