Bug 1416104 - Part 7: Make animated property list scrollable. r=gl

MozReview-Commit-ID: Abs3XL4I6SM

--HG--
extra : rebase_source : 730e99e29842d6e4a0ec8bbbd70d07141effbc96

devtools/client/themes/animation.css

@@ -25,6 +25,10 @@
   height: 100%;
 }
 
+#animation-container .uncontrolled {
+  overflow: hidden;
+}
+
 /* Animation List Container */
 .animation-list-container {
   display: flex;
@@ -224,6 +228,10 @@
 
 /* Animation Detail */
 .animation-detail-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
   width: 100%;
 }
 
@@ -231,6 +239,14 @@
   white-space: nowrap;
 }
 
+/* Animated Property List Container */
+.animated-property-list-container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
 /* Animated Property List Header */
 .animated-property-list-header {
   display: flex;
@@ -241,7 +257,7 @@
 /* Keyframes Progress Tick List */
 .keyframes-progress-tick-list {
   margin-right: var(--graph-right-offset);
-  position: relative;
+  position: absolute;
   width: calc(100% - var(--sidebar-width) - var(--graph-right-offset));
 }
 
@@ -260,8 +276,10 @@
 
 /* Animated Property List */
 .animated-property-list {
+  flex: 1;
   list-style-type: none;
   margin-top: 0;
+  overflow-y: auto;
   padding: 0;
 }