Bug 1119927 - Small UI changes for the timeline marker details in the new perf too, r=jsantell

browser/devtools/performance/views/overview.js

@@ -12,9 +12,9 @@ const FRAMERATE_GRAPH_LOW_RES_INTERVAL = 100; // ms
 const FRAMERATE_GRAPH_HIGH_RES_INTERVAL = 16; // ms
 
 const FRAMERATE_GRAPH_HEIGHT = 45; // px
-const MARKERS_GRAPH_HEADER_HEIGHT = 12; // px
-const MARKERS_GRAPH_BODY_HEIGHT = 45; // 9px * 5 groups
-const MARKERS_GROUP_VERTICAL_PADDING = 3.5; // px
+const MARKERS_GRAPH_HEADER_HEIGHT = 14; // px
+const MARKERS_GRAPH_ROW_HEIGHT = 11; // px
+const MARKERS_GROUP_VERTICAL_PADDING = 5; // px
 const MEMORY_GRAPH_HEIGHT = 30; // px
 
 const GRAPH_SCROLL_EVENTS_DRAIN = 50; // ms
@@ -82,7 +82,7 @@ let OverviewView = {
   _showMarkersGraph: Task.async(function *() {
     this.markersOverview = new MarkersOverview($("#markers-overview"), TIMELINE_BLUEPRINT);
     this.markersOverview.headerHeight = MARKERS_GRAPH_HEADER_HEIGHT;
-    this.markersOverview.bodyHeight = MARKERS_GRAPH_BODY_HEIGHT;
+    this.markersOverview.rowHeight = MARKERS_GRAPH_ROW_HEIGHT;
     this.markersOverview.groupPadding = MARKERS_GROUP_VERTICAL_PADDING;
     yield this.markersOverview.ready();
 

browser/devtools/timeline/widgets/markers-overview.js

@@ -21,9 +21,8 @@ loader.lazyRequireGetter(this, "L10N",
   "devtools/timeline/global", true);
 
 const OVERVIEW_HEADER_HEIGHT = 14; // px
-const OVERVIEW_ROW_HEIGHT = 11; // row height
+const OVERVIEW_ROW_HEIGHT = 11; // px
 
-const OVERVIEW_BODY_HEIGHT = 55; // 11px * 5 groups
 const OVERVIEW_SELECTION_LINE_COLOR = "#666";
 const OVERVIEW_CLIPHEAD_LINE_COLOR = "#555";
 

browser/themes/shared/devtools/performance.inc.css

@@ -334,21 +334,18 @@
 #waterfall-details {
   -moz-padding-start: 8px;
   -moz-padding-end: 8px;
-  padding-top: 8vh;
+  padding-top: 2vh;
   overflow: auto;
 }
 
 .marker-details-bullet {
   width: 8px;
   height: 8px;
-  margin: 0 8px;
   border: 1px solid;
   border-radius: 1px;
 }
 
-.marker-details-start,
-.marker-details-end,
-.marker-details-duration {
+#waterfall-details > * {
   padding-top: 3px;
 }
 

browser/themes/shared/devtools/timeline.inc.css

@@ -217,7 +217,7 @@
 #timeline-waterfall-details {
   -moz-padding-start: 8px;
   -moz-padding-end: 8px;
-  padding-top: 8vh;
+  padding-top: 2vh;
   overflow: auto;
 }
 
@@ -228,9 +228,7 @@
   border-radius: 1px;
 }
 
-.marker-details-start,
-.marker-details-end,
-.marker-details-duration {
+#timeline-waterfall-details > * {
   padding-top: 3px;
 }