Bug 1119234 - FlameGraph initially selects only half of the profile on retina displays, r=jsantell
authorVictor Porof <vporof@mozilla.com>
Sun, 11 Jan 2015 12:56:30 -0500
changeset 240006 3c5a88aaae96aa0f1cc464e0d019023057d89e11
parent 240005 5032626927f25877c355a1e8e64f012fcb8e0937
child 240007 8f5999879de82c176ef9d90a43ddb67b7834e046
push id7472
push userraliiev@mozilla.com
push dateMon, 12 Jan 2015 20:36:27 +0000
treeherdermozilla-aurora@300ca104f8fb [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjsantell
bugs1119234
milestone37.0a1
Bug 1119234 - FlameGraph initially selects only half of the profile on retina displays, r=jsantell
browser/devtools/shared/test/browser.ini
browser/devtools/shared/test/browser_flame-graph-03.js
browser/devtools/shared/test/browser_flame-graph-03a.js
browser/devtools/shared/test/browser_flame-graph-03b.js
browser/devtools/shared/test/browser_flame-graph-utils.js
browser/devtools/shared/widgets/FlameGraph.jsm
--- a/browser/devtools/shared/test/browser.ini
+++ b/browser/devtools/shared/test/browser.ini
@@ -12,17 +12,18 @@ support-files =
   leakhunt.js
 
 [browser_css_color.js]
 [browser_cubic-bezier-01.js]
 [browser_cubic-bezier-02.js]
 [browser_cubic-bezier-03.js]
 [browser_flame-graph-01.js]
 [browser_flame-graph-02.js]
-[browser_flame-graph-03.js]
+[browser_flame-graph-03a.js]
+[browser_flame-graph-03b.js]
 [browser_flame-graph-04.js]
 [browser_flame-graph-utils.js]
 [browser_graphs-01.js]
 [browser_graphs-02.js]
 [browser_graphs-03.js]
 [browser_graphs-04.js]
 [browser_graphs-05.js]
 [browser_graphs-06.js]
rename from browser/devtools/shared/test/browser_flame-graph-03.js
rename to browser/devtools/shared/test/browser_flame-graph-03a.js
--- a/browser/devtools/shared/test/browser_flame-graph-03.js
+++ b/browser/devtools/shared/test/browser_flame-graph-03a.js
@@ -41,53 +41,53 @@ function testGraph(graph) {
   is(graph.getDataWindowStart(), 0,
     "The selection start boundary is correct (1).");
   is(graph.getDataWindowEnd(), TEST_WIDTH,
     "The selection end boundary is correct (1).");
 
   scroll(graph, 200, HORIZONTAL_AXIS, 10);
   is(graph.getDataWindowStart() | 0, 100,
     "The selection start boundary is correct (2).");
-  is(graph.getDataWindowEnd() | 0, 300,
+  is(graph.getDataWindowEnd() | 0, 200,
     "The selection end boundary is correct (2).");
 
   scroll(graph, -200, HORIZONTAL_AXIS, 10);
-  is(graph.getDataWindowStart() | 0, 0,
+  is(graph.getDataWindowStart() | 0, 50,
     "The selection start boundary is correct (3).");
-  is(graph.getDataWindowEnd() | 0, 200,
+  is(graph.getDataWindowEnd() | 0, 150,
     "The selection end boundary is correct (3).");
 
   scroll(graph, 200, VERTICAL_AXIS, TEST_WIDTH / 2);
-  is(graph.getDataWindowStart() | 0, 0,
+  is(graph.getDataWindowStart() | 0, 46,
     "The selection start boundary is correct (4).");
-  is(graph.getDataWindowEnd() | 0, 207,
+  is(graph.getDataWindowEnd() | 0, 153,
     "The selection end boundary is correct (4).");
 
   scroll(graph, -200, VERTICAL_AXIS, TEST_WIDTH / 2);
-  is(graph.getDataWindowStart() | 0, 7,
+  is(graph.getDataWindowStart() | 0, 50,
     "The selection start boundary is correct (5).");
-  is(graph.getDataWindowEnd() | 0, 199,
+  is(graph.getDataWindowEnd() | 0, 149,
     "The selection end boundary is correct (5).");
 
   dragStart(graph, TEST_WIDTH / 2);
-  is(graph.getDataWindowStart() | 0, 7,
+  is(graph.getDataWindowStart() | 0, 50,
     "The selection start boundary is correct (6).");
-  is(graph.getDataWindowEnd() | 0, 199,
+  is(graph.getDataWindowEnd() | 0, 149,
     "The selection end boundary is correct (6).");
 
   hover(graph, TEST_WIDTH / 2 - 10);
-  is(graph.getDataWindowStart() | 0, 16,
+  is(graph.getDataWindowStart() | 0, 55,
     "The selection start boundary is correct (7).");
-  is(graph.getDataWindowEnd() | 0, 209,
+  is(graph.getDataWindowEnd() | 0, 154,
     "The selection end boundary is correct (7).");
 
   dragStop(graph, 10);
-  is(graph.getDataWindowStart() | 0, 93,
+  is(graph.getDataWindowStart() | 0, 95,
     "The selection start boundary is correct (8).");
-  is(graph.getDataWindowEnd() | 0, 286,
+  is(graph.getDataWindowEnd() | 0, 194,
     "The selection end boundary is correct (8).");
 }
 
 // EventUtils just doesn't work!
 
 function hover(graph, x, y = 1) {
   x /= window.devicePixelRatio;
   y /= window.devicePixelRatio;
new file mode 100644
--- /dev/null
+++ b/browser/devtools/shared/test/browser_flame-graph-03b.js
@@ -0,0 +1,68 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Tests that selections in the flame graph widget work properly on HiDPI.
+
+let TEST_DATA = [{ color: "#f00", blocks: [{ x: 0, y: 0, width: 50, height: 20, text: "FOO" }, { x: 50, y: 0, width: 100, height: 20, text: "BAR" }] }, { color: "#00f", blocks: [{ x: 0, y: 30, width: 30, height: 20, text: "BAZ" }] }];
+let TEST_WIDTH = 200;
+let TEST_HEIGHT = 100;
+let TEST_DPI_DENSITIY = 2;
+
+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 test = Task.async(function*() {
+  yield promiseTab("about:blank");
+  yield performTest();
+  gBrowser.removeCurrentTab();
+  finish();
+});
+
+function* performTest() {
+  let [host, win, doc] = yield createHost();
+  doc.body.setAttribute("style", "position: fixed; width: 100%; height: 100%; margin: 0;");
+
+  let graph = new FlameGraph(doc.body, TEST_DPI_DENSITIY);
+  graph.fixedWidth = TEST_WIDTH;
+  graph.fixedHeight = TEST_HEIGHT;
+
+  yield graph.ready();
+
+  testGraph(graph);
+
+  graph.destroy();
+  host.destroy();
+}
+
+function testGraph(graph) {
+  graph.setData(TEST_DATA);
+
+  is(graph.getDataWindowStart(), 0,
+    "The selection start boundary is correct on HiDPI (1).");
+  is(graph.getDataWindowEnd(), TEST_WIDTH * TEST_DPI_DENSITIY,
+    "The selection end boundary is correct on HiDPI (1).");
+
+  scroll(graph, 10000, HORIZONTAL_AXIS, 1);
+
+  is(graph.getDataWindowStart(), 380,
+    "The selection start boundary is correct on HiDPI (2).");
+  is(graph.getDataWindowEnd(), TEST_WIDTH * TEST_DPI_DENSITIY,
+    "The selection end boundary is correct on HiDPI (2).");
+}
+
+// EventUtils just doesn't work!
+
+let HORIZONTAL_AXIS = 1;
+let VERTICAL_AXIS = 2;
+
+function scroll(graph, wheel, axis, x, y = 1) {
+  x /= window.devicePixelRatio;
+  y /= window.devicePixelRatio;
+  graph._onMouseMove({ clientX: x, clientY: y });
+  graph._onMouseWheel({ clientX: x, clientY: y, axis, detail: wheel, axis,
+    HORIZONTAL_AXIS,
+    VERTICAL_AXIS
+  });
+}
--- a/browser/devtools/shared/test/browser_flame-graph-utils.js
+++ b/browser/devtools/shared/test/browser_flame-graph-utils.js
@@ -10,22 +10,21 @@ let test = Task.async(function*() {
   yield performTest();
   gBrowser.removeCurrentTab();
   finish();
 });
 
 function* performTest() {
   let out = FlameGraphUtils.createFlameGraphDataFromSamples(TEST_DATA);
 
-  dump(">>> " + out + "\n");
-  dump(">>> " + out.toSource() + "\n");
-
   ok(out, "Some data was outputted properly");
   is(out.length, 10, "The outputted length is correct.");
 
+  info("Got flame graph data:\n" + out.toSource() + "\n");
+
   for (let i = 0; i < out.length; i++) {
     let found = out[i];
     let expected = EXPECTED_OUTPUT[i];
 
     is(found.blocks.length, expected.blocks.length,
       "The correct number of blocks were found in this bucket.");
 
     for (let j = 0; j < found.blocks.length; j++) {
--- a/browser/devtools/shared/widgets/FlameGraph.jsm
+++ b/browser/devtools/shared/widgets/FlameGraph.jsm
@@ -710,17 +710,17 @@ FlameGraph.prototype = {
   },
 
   /**
    * Makes sure the start and end points of the current selection
    * are withing the graph's visible bounds, and that they form a selection
    * wider than the allowed minimum width.
    */
   _normalizeSelectionBounds: function() {
-    let canvasWidth = this._width * 2;
+    let canvasWidth = this._width;
     let canvasHeight = this._height;
 
     let { start, end } = this._selection;
     let minSelectionWidth = GRAPH_MIN_SELECTION_WIDTH * this._pixelRatio;
 
     if (start < 0) {
       start = 0;
     }