From a8c2547306759bb473f553691ad67e35f3787e59 Mon Sep 17 00:00:00 2001
From: Victor Porof <vporof@mozilla.com>
Date: Sun, 11 Jan 2015 12:56:31 -0500
Subject: [PATCH] Bug 1119927 - Small UI changes for the timeline marker
 details in the new perf too, r=jsantell

---
 browser/devtools/performance/views/overview.js        | 8 ++++----
 browser/devtools/timeline/widgets/markers-overview.js | 3 +--
 browser/themes/shared/devtools/performance.inc.css    | 7 ++-----
 browser/themes/shared/devtools/timeline.inc.css       | 6 ++----
 4 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/browser/devtools/performance/views/overview.js b/browser/devtools/performance/views/overview.js
index 451a96a2c2a2..8435d4df4121 100644
--- a/browser/devtools/performance/views/overview.js
+++ b/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();
 
diff --git a/browser/devtools/timeline/widgets/markers-overview.js b/browser/devtools/timeline/widgets/markers-overview.js
index 6d7e857494bb..a6a25680e107 100644
--- a/browser/devtools/timeline/widgets/markers-overview.js
+++ b/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";
 
diff --git a/browser/themes/shared/devtools/performance.inc.css b/browser/themes/shared/devtools/performance.inc.css
index 920ddfb552d8..3c2e722974dd 100644
--- a/browser/themes/shared/devtools/performance.inc.css
+++ b/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;
 }
 
diff --git a/browser/themes/shared/devtools/timeline.inc.css b/browser/themes/shared/devtools/timeline.inc.css
index 99c2e668b81e..270ad9a706e7 100644
--- a/browser/themes/shared/devtools/timeline.inc.css
+++ b/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;
 }