Bug 1120231 - Trim vertical padding to maximize available vertical space in the new performance tool, r=jsantell
authorVictor Porof <vporof@mozilla.com>
Mon, 12 Jan 2015 10:49:18 -0500
changeset 223413 6b85abb2bc19fcf3d76eeb70861d38350af9360c
parent 223412 b2e112d0e6af6471db3e24ba9ed2a3fdaba985e6
child 223414 036dce7553a106843a828cb5cac3b6250908058a
push id28093
push userkwierso@gmail.com
push dateTue, 13 Jan 2015 04:00:18 +0000
treeherdermozilla-central@3d846527576f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjsantell
bugs1120231
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 1120231 - Trim vertical padding to maximize available vertical space in the new performance tool, r=jsantell
browser/devtools/performance/views/overview.js
browser/devtools/shared/test/browser_flame-graph-04.js
browser/devtools/shared/widgets/FlameGraph.jsm
browser/devtools/timeline/widgets/markers-overview.js
browser/themes/shared/devtools/performance.inc.css
--- a/browser/devtools/performance/views/overview.js
+++ b/browser/devtools/performance/views/overview.js
@@ -6,20 +6,20 @@
 // No sense updating the overview more often than receiving data from the
 // 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 FRAMERATE_GRAPH_HEIGHT = 40; // px
 const MARKERS_GRAPH_HEADER_HEIGHT = 14; // px
-const MARKERS_GRAPH_ROW_HEIGHT = 11; // px
-const MARKERS_GROUP_VERTICAL_PADDING = 5; // px
+const MARKERS_GRAPH_ROW_HEIGHT = 10; // px
+const MARKERS_GROUP_VERTICAL_PADDING = 4; // 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.
  */
--- a/browser/devtools/shared/test/browser_flame-graph-04.js
+++ b/browser/devtools/shared/test/browser_flame-graph-04.js
@@ -1,15 +1,15 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 // Tests that text metrics in the flame graph widget work properly.
 
 let HTML_NS = "http://www.w3.org/1999/xhtml";
-let FLAME_GRAPH_BLOCK_TEXT_FONT_SIZE = 9; // px
+let FLAME_GRAPH_BLOCK_TEXT_FONT_SIZE = 8; // px
 let FLAME_GRAPH_BLOCK_TEXT_FONT_FAMILY = "sans-serif";
 let {ViewHelpers} = Cu.import("resource:///modules/devtools/ViewHelpers.jsm", {});
 let {FlameGraph} = Cu.import("resource:///modules/devtools/FlameGraph.jsm", {});
 let {DOMHelpers} = Cu.import("resource:///modules/devtools/DOMHelpers.jsm", {});
 let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
 let {Hosts} = devtools.require("devtools/framework/toolbox-hosts");
 
 let L10N = new ViewHelpers.L10N();
--- a/browser/devtools/shared/widgets/FlameGraph.jsm
+++ b/browser/devtools/shared/widgets/FlameGraph.jsm
@@ -24,30 +24,30 @@ const GRAPH_RESIZE_EVENTS_DRAIN = 100; /
 
 const GRAPH_WHEEL_ZOOM_SENSITIVITY = 0.00035;
 const GRAPH_WHEEL_SCROLL_SENSITIVITY = 0.5;
 const GRAPH_MIN_SELECTION_WIDTH = 10; // ms
 
 const TIMELINE_TICKS_MULTIPLE = 5; // ms
 const TIMELINE_TICKS_SPACING_MIN = 75; // px
 
-const OVERVIEW_HEADER_HEIGHT = 18; // px
+const OVERVIEW_HEADER_HEIGHT = 16; // px
 const OVERVIEW_HEADER_SAFE_BOUNDS = 50; // px
 const OVERVIEW_HEADER_TEXT_COLOR = "#18191a";
 const OVERVIEW_HEADER_TEXT_FONT_SIZE = 9; // px
 const OVERVIEW_HEADER_TEXT_FONT_FAMILY = "sans-serif";
 const OVERVIEW_HEADER_TEXT_PADDING_LEFT = 6; // px
 const OVERVIEW_HEADER_TEXT_PADDING_TOP = 5; // px
 const OVERVIEW_TIMELINE_STROKES = "#ddd";
 
 const FLAME_GRAPH_BLOCK_BORDER = 1; // px
 const FLAME_GRAPH_BLOCK_TEXT_COLOR = "#000";
-const FLAME_GRAPH_BLOCK_TEXT_FONT_SIZE = 9; // px
+const FLAME_GRAPH_BLOCK_TEXT_FONT_SIZE = 8; // px
 const FLAME_GRAPH_BLOCK_TEXT_FONT_FAMILY = "sans-serif";
-const FLAME_GRAPH_BLOCK_TEXT_PADDING_TOP = 1; // px
+const FLAME_GRAPH_BLOCK_TEXT_PADDING_TOP = 0; // px
 const FLAME_GRAPH_BLOCK_TEXT_PADDING_LEFT = 3; // px
 const FLAME_GRAPH_BLOCK_TEXT_PADDING_RIGHT = 3; // px
 
 /**
  * A flamegraph visualization. This implementation is responsable only with
  * drawing the graph, using a data source consisting of rectangles and
  * their corresponding widths.
  *
@@ -794,17 +794,17 @@ FlameGraph.prototype = {
    */
   _onResize: function() {
     if (this.hasData()) {
       setNamedTimeout(this._uid, GRAPH_RESIZE_EVENTS_DRAIN, this.refresh);
     }
   }
 };
 
-const FLAME_GRAPH_BLOCK_HEIGHT = 12; // px
+const FLAME_GRAPH_BLOCK_HEIGHT = 11; // px
 
 const PALLETTE_SIZE = 10;
 const PALLETTE_HUE_OFFSET = Math.random() * 90;
 const PALLETTE_HUE_RANGE = 270;
 const PALLETTE_SATURATION = 60;
 const PALLETTE_BRIGHTNESS = 75;
 const PALLETTE_OPACITY = 0.7;
 
--- a/browser/devtools/timeline/widgets/markers-overview.js
+++ b/browser/devtools/timeline/widgets/markers-overview.js
@@ -235,14 +235,14 @@ MarkersOverview.prototype = Heritage.ext
    */
   setTheme: function (theme) {
     theme = theme || "light";
     this.backgroundColor = getColor("body-background", theme);
     this.selectionBackgroundColor = setAlpha(getColor("selection-background", theme), 0.25);
     this.selectionStripesColor = setAlpha("#fff", 0.1);
     this.headerBackgroundColor = getColor("body-background", theme);
     this.headerTextColor = getColor("body-color", theme);
-    this.headerTimelineStrokeColor = setAlpha(getColor("body-color-alt", theme), 0.1);
+    this.headerTimelineStrokeColor = setAlpha(getColor("body-color-alt", theme), 0.25);
     this.alternatingBackgroundColor = setAlpha(getColor("body-color", theme), 0.05);
   }
 });
 
 exports.MarkersOverview = MarkersOverview;
--- a/browser/themes/shared/devtools/performance.inc.css
+++ b/browser/themes/shared/devtools/performance.inc.css
@@ -271,17 +271,18 @@
   -moz-border-end: 1px solid var(--theme-splitter-color);
 }
 
 .waterfall-marker-container:hover > .waterfall-sidebar {
   background-color: transparent;
 }
 
 .waterfall-header-name {
-  padding: 4px;
+  padding: 2px 4px;
+  font-size: 90%;
 }
 
 .waterfall-header-tick {
   width: 100px;
   font-size: 9px;
   transform-origin: left center;
   color: var(--theme-body-color);
 }