From 15b0d115ef5d7cac3d48ed99e15b1187cb4d0577 Mon Sep 17 00:00:00 2001 From: Victor Porof Date: Sun, 11 Jan 2015 12:56:30 -0500 Subject: [PATCH] Bug 1119234 - FlameGraph initially selects only half of the profile on retina displays, r=jsantell --HG-- rename : browser/devtools/shared/test/browser_flame-graph-03.js => browser/devtools/shared/test/browser_flame-graph-03a.js --- browser/devtools/shared/test/browser.ini | 3 +- ...graph-03.js => browser_flame-graph-03a.js} | 26 +++---- .../shared/test/browser_flame-graph-03b.js | 68 +++++++++++++++++++ .../shared/test/browser_flame-graph-utils.js | 5 +- .../devtools/shared/widgets/FlameGraph.jsm | 2 +- 5 files changed, 86 insertions(+), 18 deletions(-) rename browser/devtools/shared/test/{browser_flame-graph-03.js => browser_flame-graph-03a.js} (87%) create mode 100644 browser/devtools/shared/test/browser_flame-graph-03b.js diff --git a/browser/devtools/shared/test/browser.ini b/browser/devtools/shared/test/browser.ini index 4ce09002147..287cf374cff 100644 --- a/browser/devtools/shared/test/browser.ini +++ b/browser/devtools/shared/test/browser.ini @@ -17,7 +17,8 @@ support-files = [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] diff --git a/browser/devtools/shared/test/browser_flame-graph-03.js b/browser/devtools/shared/test/browser_flame-graph-03a.js similarity index 87% rename from browser/devtools/shared/test/browser_flame-graph-03.js rename to browser/devtools/shared/test/browser_flame-graph-03a.js index ae17aff4677..087638e6e9c 100644 --- a/browser/devtools/shared/test/browser_flame-graph-03.js +++ b/browser/devtools/shared/test/browser_flame-graph-03a.js @@ -46,43 +46,43 @@ function testGraph(graph) { 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)."); } diff --git a/browser/devtools/shared/test/browser_flame-graph-03b.js b/browser/devtools/shared/test/browser_flame-graph-03b.js new file mode 100644 index 00000000000..613ac6daf1e --- /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 + }); +} diff --git a/browser/devtools/shared/test/browser_flame-graph-utils.js b/browser/devtools/shared/test/browser_flame-graph-utils.js index 7493ad84842..f56044c7c5b 100644 --- a/browser/devtools/shared/test/browser_flame-graph-utils.js +++ b/browser/devtools/shared/test/browser_flame-graph-utils.js @@ -15,12 +15,11 @@ let test = Task.async(function*() { 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]; diff --git a/browser/devtools/shared/widgets/FlameGraph.jsm b/browser/devtools/shared/widgets/FlameGraph.jsm index 946078c4538..b6224d5b7b9 100644 --- a/browser/devtools/shared/widgets/FlameGraph.jsm +++ b/browser/devtools/shared/widgets/FlameGraph.jsm @@ -715,7 +715,7 @@ FlameGraph.prototype = { * 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;