Bug 1119927 - Small UI changes for the timeline marker details in the new perf too, r=jsantell
authorVictor Porof <vporof@mozilla.com>
Sun, 11 Jan 2015 12:56:31 -0500
changeset 249097 062050b11b10c12fa54246f3080db4595916e34a
parent 249096 ec51aa2aaefd02b5fd15c12890f5abfcdebe546e
child 249098 621fadc8702b0157080a90cc236be864b44911b0
push id4489
push userraliiev@mozilla.com
push dateMon, 23 Feb 2015 15:17:55 +0000
treeherdermozilla-beta@fd7c3dc24146 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjsantell
bugs1119927
milestone37.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 1119927 - Small UI changes for the timeline marker details in the new perf too, r=jsantell
browser/devtools/performance/views/overview.js
browser/devtools/timeline/widgets/markers-overview.js
browser/themes/shared/devtools/performance.inc.css
browser/themes/shared/devtools/timeline.inc.css
--- a/browser/devtools/performance/views/overview.js
+++ b/browser/devtools/performance/views/overview.js
@@ -7,19 +7,19 @@
 // backend. Make sure this isn't lower than DEFAULT_TIMELINE_DATA_PULL_TIMEOUT
 // in toolkit/devtools/server/actors/timeline.js
 const OVERVIEW_UPDATE_INTERVAL = 200; // ms
 
 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
 
 /**
  * View handler for the overview panel's time view, displaying
  * framerate, markers and memory over time.
  */
@@ -77,17 +77,17 @@ let OverviewView = {
   }),
 
   /**
    * Sets up the markers overivew graph.
    */
   _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();
 
     CanvasGraphUtils.linkAnimation(this.framerateGraph, this.markersOverview);
     CanvasGraphUtils.linkSelection(this.framerateGraph, this.markersOverview);
   }),
 
   /**
--- a/browser/devtools/timeline/widgets/markers-overview.js
+++ b/browser/devtools/timeline/widgets/markers-overview.js
@@ -16,19 +16,18 @@ Cu.import("resource:///modules/devtools/
 
 const { colorUtils: { setAlpha }} = require("devtools/css-color");
 const { getColor } = require("devtools/shared/theme");
 
 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";
 
 const OVERVIEW_HEADER_TICKS_MULTIPLE = 100; // ms
 const OVERVIEW_HEADER_TICKS_SPACING_MIN = 75; // px
 const OVERVIEW_HEADER_SAFE_BOUNDS = 50; // px
 const OVERVIEW_HEADER_TEXT_FONT_SIZE = 9; // px
 const OVERVIEW_HEADER_TEXT_FONT_FAMILY = "sans-serif";
--- a/browser/themes/shared/devtools/performance.inc.css
+++ b/browser/themes/shared/devtools/performance.inc.css
@@ -329,31 +329,28 @@
 .waterfall-marker-location:hover,
 .waterfall-marker-location:focus {
    text-decoration: underline;
 }
 
 #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;
 }
 
 .marker-details-labelname {
   -moz-padding-end: 4px;
 }
 
 .marker-details-type {
--- a/browser/themes/shared/devtools/timeline.inc.css
+++ b/browser/themes/shared/devtools/timeline.inc.css
@@ -212,30 +212,28 @@
 .waterfall-marker-location:hover,
 .waterfall-marker-location:focus {
    text-decoration: underline;
 }
 
 #timeline-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;
   border: 1px solid;
   border-radius: 1px;
 }
 
-.marker-details-start,
-.marker-details-end,
-.marker-details-duration {
+#timeline-waterfall-details > * {
   padding-top: 3px;
 }
 
 .marker-details-labelname {
   -moz-padding-end: 4px;
 }
 
 .marker-details-type {