Bug 1202443 - Prevent pushing the timeline header up when there are many animations; r=zer0
authorPatrick Brosset <pbrosset@mozilla.com>
Wed, 09 Sep 2015 11:28:04 +0200
changeset 294119 8968d387064d001fe3a8eac583d9b48a26c58140
parent 294118 076c517796268734a28ff0b45adbd3118b6be428
child 294120 7c8e40e00bfe521953b69051e5d59551a684c346
push id5245
push userraliiev@mozilla.com
push dateThu, 29 Oct 2015 11:30:51 +0000
treeherdermozilla-beta@dac831dc1bd0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerszer0
bugs1202443
milestone43.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1202443 - Prevent pushing the timeline header up when there are many animations; r=zer0
browser/themes/shared/devtools/animationinspector.css
--- a/browser/themes/shared/devtools/animationinspector.css
+++ b/browser/themes/shared/devtools/animationinspector.css
@@ -8,17 +8,22 @@
   --even-animation-timeline-background-color: rgba(255,255,255,0.03);
 }
 
 .theme-light {
   --even-animation-timeline-background-color: rgba(128,128,128,0.03);
 }
 
 :root {
+  /* How high should toolbars be */
+  --toolbar-height: 20px;
+  /* How wide should the sidebar be */
   --timeline-sidebar-width: 150px;
+  /* How high should animations displayed in the timeline be */
+  --timeline-animation-height: 20px;
 }
 
 html {
   height: 100%;
 }
 
 body {
   margin: 0;
@@ -33,32 +38,32 @@ body {
 /* The top toolbar, containing the toggle-all button */
 
 #toolbar {
   border-bottom: 1px solid var(--theme-splitter-color);
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-end;
-  height: 20px;
+  height: var(--toolbar-height);
 }
 
 #toolbar .label {
   padding: 1px 4px;
 }
 
 #toggle-all {
   border-width: 0 0 0 1px;
-  min-height: 20px;
+  min-height: var(--toolbar-height);
 }
 
 /* The main animations container */
 
 #players {
-  height: calc(100% - 20px);
+  height: calc(100% - var(--toolbar-height));
   overflow: auto;
 }
 
 /* The error message, shown when an invalid/unanimated element is selected */
 
 #error-message {
   padding-top: 10%;
   text-align: center;
@@ -154,17 +159,17 @@ body {
   right: -6px;
   border-top: 5px solid red;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
 }
 
 .animation-timeline .time-header {
   margin-left: var(--timeline-sidebar-width);
-  height: 20px;
+  min-height: var(--toolbar-height);
   overflow: hidden;
   position: relative;
   /* This is the same color as the time graduations in
      browser/devtools/animationinspector/utils.js */
   border-bottom: 1px solid rgba(128, 136, 144, .5);
   cursor: col-resize;
   -moz-user-select: none;
 }
@@ -182,17 +187,17 @@ body {
   padding: 0;
   list-style-type: none;
 }
 
 /* Animation block widgets */
 
 .animation-timeline .animation {
   margin: 4px 0;
-  height: 20px;
+  height: var(--timeline-animation-height);
   position: relative;
 }
 
 .animation-timeline .animation:nth-child(2n) {
   background-color: var(--even-animation-timeline-background-color);
 }
 
 .animation-timeline .animation .target {
@@ -367,17 +372,17 @@ body {
        its tooltip appears on hover */
     z-index: 1;
     position: relative;
 }
 
 /* Timeline wiget */
 
 .timeline {
-  height: 20px;
+  height: var(--timeline-animation-height);
   width: 100%;
   display: flex;
   flex-direction: row;
   border-bottom: 1px solid var(--theme-splitter-color);
 }
 
 .timeline .playback-controls {
   display: flex;