From d8c8bf8136c463e630dddd9d8f820bf87bc03627 Mon Sep 17 00:00:00 2001 From: Victor Porof Date: Tue, 11 Nov 2014 09:33:53 -0500 Subject: [PATCH] Backed out changeset 942aec7a1572 for mochitest-dt failures, r=me --HG-- rename : browser/devtools/shared/test/browser_graphs-09a.js => browser/devtools/shared/test/browser_graphs-09.js rename : browser/devtools/timeline/widgets/markers-overview.js => browser/devtools/timeline/widgets/overview.js --- browser/devtools/shared/test/browser.ini | 4 +- ...ser_graphs-09a.js => browser_graphs-09.js} | 20 +- .../shared/test/browser_graphs-09b.js | 63 ------ .../shared/test/browser_graphs-09c.js | 40 ---- browser/devtools/shared/widgets/Graphs.jsm | 123 +++-------- browser/devtools/timeline/moz.build | 3 +- browser/devtools/timeline/test/browser.ini | 2 - ..._timeline_overview-initial-selection-01.js | 14 +- ..._timeline_overview-initial-selection-02.js | 10 +- .../test/browser_timeline_overview-update.js | 63 ++---- ...owser_timeline_recording-without-memory.js | 36 ---- .../test/browser_timeline_recording.js | 20 +- .../browser_timeline_waterfall-background.js | 2 +- .../browser_timeline_waterfall-generic.js | 24 +-- .../test/browser_timeline_waterfall-styles.js | 2 +- browser/devtools/timeline/timeline.js | 200 ++++-------------- browser/devtools/timeline/timeline.xul | 8 +- .../timeline/widgets/memory-overview.js | 88 -------- .../{markers-overview.js => overview.js} | 76 +++---- .../devtools/timeline/widgets/waterfall.js | 72 +++---- .../chrome/browser/devtools/timeline.dtd | 11 +- .../browser/devtools/timeline.properties | 6 - .../themes/shared/devtools/timeline.inc.css | 98 +++++---- .../themes/shared/devtools/widgets.inc.css | 30 ++- 24 files changed, 257 insertions(+), 758 deletions(-) rename browser/devtools/shared/test/{browser_graphs-09a.js => browser_graphs-09.js} (82%) delete mode 100644 browser/devtools/shared/test/browser_graphs-09b.js delete mode 100644 browser/devtools/shared/test/browser_graphs-09c.js delete mode 100644 browser/devtools/timeline/test/browser_timeline_recording-without-memory.js delete mode 100644 browser/devtools/timeline/widgets/memory-overview.js rename browser/devtools/timeline/widgets/{markers-overview.js => overview.js} (75%) diff --git a/browser/devtools/shared/test/browser.ini b/browser/devtools/shared/test/browser.ini index 78cadbf59cf9..5111259060ab 100644 --- a/browser/devtools/shared/test/browser.ini +++ b/browser/devtools/shared/test/browser.ini @@ -24,9 +24,7 @@ support-files = [browser_graphs-07a.js] [browser_graphs-07b.js] [browser_graphs-08.js] -[browser_graphs-09a.js] -[browser_graphs-09b.js] -[browser_graphs-09c.js] +[browser_graphs-09.js] [browser_graphs-10a.js] [browser_graphs-10b.js] [browser_graphs-11a.js] diff --git a/browser/devtools/shared/test/browser_graphs-09a.js b/browser/devtools/shared/test/browser_graphs-09.js similarity index 82% rename from browser/devtools/shared/test/browser_graphs-09a.js rename to browser/devtools/shared/test/browser_graphs-09.js index a64d76586d19..25f93436cd6e 100644 --- a/browser/devtools/shared/test/browser_graphs-09a.js +++ b/browser/devtools/shared/test/browser_graphs-09.js @@ -27,27 +27,11 @@ function* performTest() { } function* testGraph(graph) { - info("Should be able to set the graph data before waiting for the ready event."); + info("Should be able to set the grpah data before waiting for the ready event."); yield graph.setDataWhenReady(TEST_DATA); ok(graph.hasData(), "Data was set successfully."); - is(graph._gutter.hidden, false, - "The gutter should not be hidden because the tooltips have arrows."); - is(graph._maxTooltip.hidden, false, - "The max tooltip should not be hidden."); - is(graph._avgTooltip.hidden, false, - "The avg tooltip should not be hidden."); - is(graph._minTooltip.hidden, false, - "The min tooltip should not be hidden."); - - is(graph._maxTooltip.getAttribute("with-arrows"), "true", - "The maximum tooltip has the correct 'with-arrows' attribute."); - is(graph._avgTooltip.getAttribute("with-arrows"), "true", - "The average tooltip has the correct 'with-arrows' attribute."); - is(graph._minTooltip.getAttribute("with-arrows"), "true", - "The minimum tooltip has the correct 'with-arrows' attribute."); - is(graph._maxTooltip.querySelector("[text=info]").textContent, "max", "The maximum tooltip displays the correct info."); is(graph._avgTooltip.querySelector("[text=info]").textContent, "avg", @@ -57,7 +41,7 @@ function* testGraph(graph) { is(graph._maxTooltip.querySelector("[text=value]").textContent, "60", "The maximum tooltip displays the correct value."); - is(graph._avgTooltip.querySelector("[text=value]").textContent, "41.71", + is(graph._avgTooltip.querySelector("[text=value]").textContent, "41", "The average tooltip displays the correct value."); is(graph._minTooltip.querySelector("[text=value]").textContent, "10", "The minimum tooltip displays the correct value."); diff --git a/browser/devtools/shared/test/browser_graphs-09b.js b/browser/devtools/shared/test/browser_graphs-09b.js deleted file mode 100644 index ab29db4aae1e..000000000000 --- a/browser/devtools/shared/test/browser_graphs-09b.js +++ /dev/null @@ -1,63 +0,0 @@ -/* Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ */ - -// Tests that line graphs properly use the tooltips configuration properties. - -const TEST_DATA = [{ delta: 112, value: 48 }, { delta: 213, value: 59 }, { delta: 313, value: 60 }, { delta: 413, value: 59 }, { delta: 530, value: 59 }, { delta: 646, value: 58 }, { delta: 747, value: 60 }, { delta: 863, value: 48 }, { delta: 980, value: 37 }, { delta: 1097, value: 30 }, { delta: 1213, value: 29 }, { delta: 1330, value: 23 }, { delta: 1430, value: 10 }, { delta: 1534, value: 17 }, { delta: 1645, value: 20 }, { delta: 1746, value: 22 }, { delta: 1846, value: 39 }, { delta: 1963, value: 26 }, { delta: 2080, value: 27 }, { delta: 2197, value: 35 }, { delta: 2312, value: 47 }, { delta: 2412, value: 53 }, { delta: 2514, value: 60 }, { delta: 2630, value: 37 }, { delta: 2730, value: 36 }, { delta: 2830, value: 37 }, { delta: 2946, value: 36 }, { delta: 3046, value: 40 }, { delta: 3163, value: 47 }, { delta: 3280, value: 41 }, { delta: 3380, value: 35 }, { delta: 3480, value: 27 }, { delta: 3580, value: 39 }, { delta: 3680, value: 42 }, { delta: 3780, value: 49 }, { delta: 3880, value: 55 }, { delta: 3980, value: 60 }, { delta: 4080, value: 60 }, { delta: 4180, value: 60 }]; -let {LineGraphWidget} = Cu.import("resource:///modules/devtools/Graphs.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(); - let graph = new LineGraphWidget(doc.body, "fps"); - graph.withTooltipArrows = false; - graph.withFixedTooltipPositions = true; - - yield testGraph(graph); - - graph.destroy(); - host.destroy(); -} - -function* testGraph(graph) { - yield graph.setDataWhenReady(TEST_DATA); - - is(graph._gutter.hidden, true, - "The gutter should be hidden because the tooltips don't have arrows."); - is(graph._maxTooltip.hidden, false, - "The max tooltip should not be hidden."); - is(graph._avgTooltip.hidden, false, - "The avg tooltip should not be hidden."); - is(graph._minTooltip.hidden, false, - "The min tooltip should not be hidden."); - - is(graph._maxTooltip.getAttribute("with-arrows"), "false", - "The maximum tooltip has the correct 'with-arrows' attribute."); - is(graph._avgTooltip.getAttribute("with-arrows"), "false", - "The average tooltip has the correct 'with-arrows' attribute."); - is(graph._minTooltip.getAttribute("with-arrows"), "false", - "The minimum tooltip has the correct 'with-arrows' attribute."); - - is(parseInt(graph._maxTooltip.style.top), 8, - "The maximum tooltip is positioned correctly."); - is(parseInt(graph._avgTooltip.style.top), 8, - "The average tooltip is positioned correctly."); - is(parseInt(graph._minTooltip.style.top), 142, - "The minimum tooltip is positioned correctly."); - - is(parseInt(graph._maxGutterLine.style.top), 22, - "The maximum gutter line is positioned correctly."); - is(parseInt(graph._avgGutterLine.style.top), 61, - "The average gutter line is positioned correctly."); - is(parseInt(graph._minGutterLine.style.top), 128, - "The minimum gutter line is positioned correctly."); -} diff --git a/browser/devtools/shared/test/browser_graphs-09c.js b/browser/devtools/shared/test/browser_graphs-09c.js deleted file mode 100644 index 94c9ca9bdfb6..000000000000 --- a/browser/devtools/shared/test/browser_graphs-09c.js +++ /dev/null @@ -1,40 +0,0 @@ -/* Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ */ - -// Tests that line graphs hide the tooltips when there's no data available. - -const TEST_DATA = []; -let {LineGraphWidget} = Cu.import("resource:///modules/devtools/Graphs.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(); - let graph = new LineGraphWidget(doc.body, "fps"); - - yield testGraph(graph); - - graph.destroy(); - host.destroy(); -} - -function* testGraph(graph) { - yield graph.setDataWhenReady(TEST_DATA); - - is(graph._gutter.hidden, false, - "The gutter should not be hidden."); - is(graph._maxTooltip.hidden, true, - "The max tooltip should be hidden."); - is(graph._avgTooltip.hidden, true, - "The avg tooltip should be hidden."); - is(graph._minTooltip.hidden, true, - "The min tooltip should be hidden."); -} diff --git a/browser/devtools/shared/widgets/Graphs.jsm b/browser/devtools/shared/widgets/Graphs.jsm index 1822910571ef..9b4b901e2207 100644 --- a/browser/devtools/shared/widgets/Graphs.jsm +++ b/browser/devtools/shared/widgets/Graphs.jsm @@ -19,7 +19,6 @@ this.EXPORTED_SYMBOLS = [ const HTML_NS = "http://www.w3.org/1999/xhtml"; const GRAPH_SRC = "chrome://browser/content/devtools/graphs-frame.xhtml"; -const L10N = new ViewHelpers.L10N(); // Generic constants. @@ -45,9 +44,8 @@ const GRAPH_STRIPE_PATTERN_LINE_SPACING = 4; // px const LINE_GRAPH_DAMPEN_VALUES = 0.85; const LINE_GRAPH_MIN_SQUARED_DISTANCE_BETWEEN_POINTS = 400; // 20 px -const LINE_GRAPH_TOOLTIP_SAFE_BOUNDS = 8; // px +const LINE_GRAPH_TOOLTIP_SAFE_BOUNDS = 10; // px -const LINE_GRAPH_BACKGROUND_COLOR = "#0088cc"; const LINE_GRAPH_STROKE_WIDTH = 1; // px const LINE_GRAPH_STROKE_COLOR = "rgba(255,255,255,0.9)"; const LINE_GRAPH_HELPER_LINES_DASH = [5]; // px @@ -489,8 +487,7 @@ AbstractCanvasGraph.prototype = { * @return boolean */ hasSelection: function() { - return this._selection && - this._selection.start != null && this._selection.end != null; + return this._selection.start != null && this._selection.end != null; }, /** @@ -499,8 +496,7 @@ AbstractCanvasGraph.prototype = { * @return boolean */ hasSelectionInProgress: function() { - return this._selection && - this._selection.start != null && this._selection.end == null; + return this._selection.start != null && this._selection.end == null; }, /** @@ -556,7 +552,7 @@ AbstractCanvasGraph.prototype = { * @return boolean */ hasCursor: function() { - return this._cursor && this._cursor.x != null; + return this._cursor.x != null; }, /** @@ -1180,14 +1176,6 @@ this.LineGraphWidget = function(parent, metric, ...args) { } LineGraphWidget.prototype = Heritage.extend(AbstractCanvasGraph.prototype, { - backgroundColor: LINE_GRAPH_BACKGROUND_COLOR, - backgroundGradientStart: LINE_GRAPH_BACKGROUND_GRADIENT_START, - backgroundGradientEnd: LINE_GRAPH_BACKGROUND_GRADIENT_END, - strokeColor: LINE_GRAPH_STROKE_COLOR, - strokeWidth: LINE_GRAPH_STROKE_WIDTH, - maximumLineColor: LINE_GRAPH_MAXIMUM_LINE_COLOR, - averageLineColor: LINE_GRAPH_AVERAGE_LINE_COLOR, - minimumLineColor: LINE_GRAPH_MINIMUM_LINE_COLOR, clipheadLineColor: LINE_GRAPH_CLIPHEAD_LINE_COLOR, selectionLineColor: LINE_GRAPH_SELECTION_LINE_COLOR, selectionBackgroundColor: LINE_GRAPH_SELECTION_BACKGROUND_COLOR, @@ -1200,29 +1188,12 @@ LineGraphWidget.prototype = Heritage.extend(AbstractCanvasGraph.prototype, { */ dataOffsetX: 0, - /** - * The scalar used to multiply the graph values to leave some headroom - * on the top. - */ - dampenValuesFactor: LINE_GRAPH_DAMPEN_VALUES, - /** * Points that are too close too each other in the graph will not be rendered. * This scalar specifies the required minimum squared distance between points. */ minDistanceBetweenPoints: LINE_GRAPH_MIN_SQUARED_DISTANCE_BETWEEN_POINTS, - /** - * Specifies if min/max/avg tooltips have arrow handlers on their sides. - */ - withTooltipArrows: true, - - /** - * Specifies if min/max/avg tooltips are positioned based on the actual - * values, or just placed next to the graph corners. - */ - withFixedTooltipPositions: false, - /** * Renders the graph's data source. * @see AbstractCanvasGraph.prototype.buildGraphImage @@ -1233,8 +1204,8 @@ LineGraphWidget.prototype = Heritage.extend(AbstractCanvasGraph.prototype, { let height = this._height; let totalTicks = this._data.length; - let firstTick = totalTicks ? this._data[0].delta : 0; - let lastTick = totalTicks ? this._data[totalTicks - 1].delta : 0; + let firstTick = this._data[0].delta; + let lastTick = this._data[totalTicks - 1].delta; let maxValue = Number.MIN_SAFE_INTEGER; let minValue = Number.MAX_SAFE_INTEGER; let sumValues = 0; @@ -1246,7 +1217,7 @@ LineGraphWidget.prototype = Heritage.extend(AbstractCanvasGraph.prototype, { } let dataScaleX = this.dataScaleX = width / (lastTick - this.dataOffsetX); - let dataScaleY = this.dataScaleY = height / maxValue * this.dampenValuesFactor; + let dataScaleY = this.dataScaleY = height / maxValue * LINE_GRAPH_DAMPEN_VALUES; /** * Calculates the squared distance between two 2D points. @@ -1259,15 +1230,12 @@ LineGraphWidget.prototype = Heritage.extend(AbstractCanvasGraph.prototype, { // Draw the graph. - ctx.fillStyle = this.backgroundColor; - ctx.fillRect(0, 0, width, height); - let gradient = ctx.createLinearGradient(0, height / 2, 0, height); - gradient.addColorStop(0, this.backgroundGradientStart); - gradient.addColorStop(1, this.backgroundGradientEnd); + gradient.addColorStop(0, LINE_GRAPH_BACKGROUND_GRADIENT_START); + gradient.addColorStop(1, LINE_GRAPH_BACKGROUND_GRADIENT_END); ctx.fillStyle = gradient; - ctx.strokeStyle = this.strokeColor; - ctx.lineWidth = this.strokeWidth * this._pixelRatio; + ctx.strokeStyle = LINE_GRAPH_STROKE_COLOR; + ctx.lineWidth = LINE_GRAPH_STROKE_WIDTH * this._pixelRatio; ctx.beginPath(); let prevX = 0; @@ -1300,46 +1268,43 @@ LineGraphWidget.prototype = Heritage.extend(AbstractCanvasGraph.prototype, { // Draw the maximum value horizontal line. - ctx.strokeStyle = this.maximumLineColor; + ctx.strokeStyle = LINE_GRAPH_MAXIMUM_LINE_COLOR; ctx.lineWidth = LINE_GRAPH_HELPER_LINES_WIDTH; ctx.setLineDash(LINE_GRAPH_HELPER_LINES_DASH); ctx.beginPath(); - let maximumY = height - maxValue * dataScaleY; + let maximumY = height - maxValue * dataScaleY - ctx.lineWidth; ctx.moveTo(0, maximumY); ctx.lineTo(width, maximumY); ctx.stroke(); // Draw the average value horizontal line. - ctx.strokeStyle = this.averageLineColor; + ctx.strokeStyle = LINE_GRAPH_AVERAGE_LINE_COLOR; ctx.lineWidth = LINE_GRAPH_HELPER_LINES_WIDTH; ctx.setLineDash(LINE_GRAPH_HELPER_LINES_DASH); ctx.beginPath(); - let avgValue = totalTicks ? sumValues / totalTicks : 0; - let averageY = height - avgValue * dataScaleY; + let avgValue = sumValues / totalTicks; + let averageY = height - avgValue * dataScaleY - ctx.lineWidth; ctx.moveTo(0, averageY); ctx.lineTo(width, averageY); ctx.stroke(); // Draw the minimum value horizontal line. - ctx.strokeStyle = this.minimumLineColor; + ctx.strokeStyle = LINE_GRAPH_MINIMUM_LINE_COLOR; ctx.lineWidth = LINE_GRAPH_HELPER_LINES_WIDTH; ctx.setLineDash(LINE_GRAPH_HELPER_LINES_DASH); ctx.beginPath(); - let minimumY = height - minValue * dataScaleY; + let minimumY = height - minValue * dataScaleY - ctx.lineWidth; ctx.moveTo(0, minimumY); ctx.lineTo(width, minimumY); ctx.stroke(); // Update the tooltips text and gutter lines. - this._maxTooltip.querySelector("[text=value]").textContent = - L10N.numberWithDecimals(maxValue, 2); - this._avgTooltip.querySelector("[text=value]").textContent = - L10N.numberWithDecimals(avgValue, 2); - this._minTooltip.querySelector("[text=value]").textContent = - L10N.numberWithDecimals(minValue, 2); + this._maxTooltip.querySelector("[text=value]").textContent = maxValue|0; + this._avgTooltip.querySelector("[text=value]").textContent = avgValue|0; + this._minTooltip.querySelector("[text=value]").textContent = minValue|0; /** * Constrains a value to a range. @@ -1351,32 +1316,19 @@ LineGraphWidget.prototype = Heritage.extend(AbstractCanvasGraph.prototype, { } let bottom = height / this._pixelRatio; - let maxPosY = map(maxValue * this.dampenValuesFactor, 0, maxValue, bottom, 0); - let avgPosY = map(avgValue * this.dampenValuesFactor, 0, maxValue, bottom, 0); - let minPosY = map(minValue * this.dampenValuesFactor, 0, maxValue, bottom, 0); + let maxPosY = map(maxValue * LINE_GRAPH_DAMPEN_VALUES, 0, maxValue, bottom, 0); + let avgPosY = map(avgValue * LINE_GRAPH_DAMPEN_VALUES, 0, maxValue, bottom, 0); + let minPosY = map(minValue * LINE_GRAPH_DAMPEN_VALUES, 0, maxValue, bottom, 0); let safeTop = LINE_GRAPH_TOOLTIP_SAFE_BOUNDS; let safeBottom = bottom - LINE_GRAPH_TOOLTIP_SAFE_BOUNDS; - this._maxTooltip.style.top = (this.withFixedTooltipPositions - ? safeTop : clamp(maxPosY, safeTop, safeBottom)) + "px"; - this._avgTooltip.style.top = (this.withFixedTooltipPositions - ? safeTop : clamp(avgPosY, safeTop, safeBottom)) + "px"; - this._minTooltip.style.top = (this.withFixedTooltipPositions - ? safeBottom : clamp(minPosY, safeTop, safeBottom)) + "px"; - - this._maxGutterLine.style.top = maxPosY + "px"; - this._avgGutterLine.style.top = avgPosY + "px"; - this._minGutterLine.style.top = minPosY + "px"; - - this._maxTooltip.setAttribute("with-arrows", this.withTooltipArrows); - this._avgTooltip.setAttribute("with-arrows", this.withTooltipArrows); - this._minTooltip.setAttribute("with-arrows", this.withTooltipArrows); - - this._gutter.hidden = !this.withTooltipArrows; - this._maxTooltip.hidden = !totalTicks; - this._avgTooltip.hidden = !totalTicks; - this._minTooltip.hidden = !totalTicks; + this._maxTooltip.style.top = clamp(maxPosY, safeTop, safeBottom) + "px"; + this._avgTooltip.style.top = clamp(avgPosY, safeTop, safeBottom) + "px"; + this._minTooltip.style.top = clamp(minPosY, safeTop, safeBottom) + "px"; + this._maxGutterLine.style.top = clamp(maxPosY, safeTop, safeBottom) + "px"; + this._avgGutterLine.style.top = clamp(avgPosY, safeTop, safeBottom) + "px"; + this._minGutterLine.style.top = clamp(minPosY, safeTop, safeBottom) + "px"; return canvas; }, @@ -1514,12 +1466,6 @@ BarGraphWidget.prototype = Heritage.extend(AbstractCanvasGraph.prototype, { */ dataOffsetX: 0, - /** - * The scalar used to multiply the graph values to leave some headroom - * on the top. - */ - dampenValuesFactor: BAR_GRAPH_DAMPEN_VALUES, - /** * Bars that are too close too each other in the graph will be combined. * This scalar specifies the required minimum width of each bar. @@ -1574,7 +1520,7 @@ BarGraphWidget.prototype = Heritage.extend(AbstractCanvasGraph.prototype, { data: this._data, dataScaleX: dataScaleX, minBarsWidth: minBarsWidth - }) * this.dampenValuesFactor; + }) * BAR_GRAPH_DAMPEN_VALUES; // Draw the graph. @@ -1977,13 +1923,6 @@ this.CanvasGraphUtils = { if (!graph1 || !graph2) { return; } - - if (graph1.hasSelection()) { - graph2.setSelection(graph1.getSelection()); - } else { - graph2.dropSelection(); - } - graph1.on("selecting", () => { graph2.setSelection(graph1.getSelection()); }); diff --git a/browser/devtools/timeline/moz.build b/browser/devtools/timeline/moz.build index ba85ade9faba..bd58f06caf19 100644 --- a/browser/devtools/timeline/moz.build +++ b/browser/devtools/timeline/moz.build @@ -6,8 +6,7 @@ EXTRA_JS_MODULES.devtools.timeline += [ 'panel.js', 'widgets/global.js', - 'widgets/markers-overview.js', - 'widgets/memory-overview.js', + 'widgets/overview.js', 'widgets/waterfall.js' ] diff --git a/browser/devtools/timeline/test/browser.ini b/browser/devtools/timeline/test/browser.ini index 2f8b03ba1a98..672a89d6f92f 100644 --- a/browser/devtools/timeline/test/browser.ini +++ b/browser/devtools/timeline/test/browser.ini @@ -9,9 +9,7 @@ support-files = [browser_timeline_overview-initial-selection-01.js] [browser_timeline_overview-initial-selection-02.js] [browser_timeline_overview-update.js] -skip-if = debug # Bug 1096256 [browser_timeline_panels.js] -[browser_timeline_recording-without-memory.js] [browser_timeline_recording.js] [browser_timeline_waterfall-background.js] [browser_timeline_waterfall-generic.js] diff --git a/browser/devtools/timeline/test/browser_timeline_overview-initial-selection-01.js b/browser/devtools/timeline/test/browser_timeline_overview-initial-selection-01.js index 23c26f85502c..0c6d04f03b04 100644 --- a/browser/devtools/timeline/test/browser_timeline_overview-initial-selection-01.js +++ b/browser/devtools/timeline/test/browser_timeline_overview-initial-selection-01.js @@ -8,12 +8,9 @@ let test = Task.async(function*() { let { target, panel } = yield initTimelinePanel(SIMPLE_URL); - let { $, EVENTS, TimelineView, TimelineController } = panel.panelWin; + let { EVENTS, TimelineView, TimelineController } = panel.panelWin; let { OVERVIEW_INITIAL_SELECTION_RATIO: selectionRatio } = panel.panelWin; - $("#memory-checkbox").checked = true; - yield TimelineController.updateMemoryRecording(); - yield TimelineController.toggleRecording(); ok(true, "Recording has started."); @@ -24,22 +21,19 @@ let test = Task.async(function*() { "The overview graph was updated a bunch of times."); ok((yield waitUntil(() => TimelineController.getMarkers().length > 0)), "There are some markers available."); - ok((yield waitUntil(() => TimelineController.getMemory().length > 0)), - "There are some memory measurements available now."); yield TimelineController.toggleRecording(); ok(true, "Recording has ended."); - let interval = TimelineController.getInterval(); let markers = TimelineController.getMarkers(); - let selection = TimelineView.markersOverview.getSelection(); + let selection = TimelineView.overview.getSelection(); is((selection.start) | 0, - ((markers[0].start - interval.startTime) * TimelineView.markersOverview.dataScaleX) | 0, + ((markers[0].start - markers.startTime) * TimelineView.overview.dataScaleX) | 0, "The initial selection start is correct."); is((selection.end - selection.start) | 0, - (selectionRatio * TimelineView.markersOverview.width) | 0, + (selectionRatio * TimelineView.overview.width) | 0, "The initial selection end is correct."); yield teardown(panel); diff --git a/browser/devtools/timeline/test/browser_timeline_overview-initial-selection-02.js b/browser/devtools/timeline/test/browser_timeline_overview-initial-selection-02.js index e10a1d058d7f..af4e9639da04 100644 --- a/browser/devtools/timeline/test/browser_timeline_overview-initial-selection-02.js +++ b/browser/devtools/timeline/test/browser_timeline_overview-initial-selection-02.js @@ -8,12 +8,9 @@ let test = Task.async(function*() { let { target, panel } = yield initTimelinePanel(SIMPLE_URL); - let { $, EVENTS, TimelineView, TimelineController } = panel.panelWin; + let { EVENTS, TimelineView, TimelineController } = panel.panelWin; let { OVERVIEW_INITIAL_SELECTION_RATIO: selectionRatio } = panel.panelWin; - $("#memory-checkbox").checked = true; - yield TimelineController.updateMemoryRecording(); - yield TimelineController.toggleRecording(); ok(true, "Recording has started."); @@ -21,13 +18,10 @@ let test = Task.async(function*() { ok(true, "Recording has ended."); let markers = TimelineController.getMarkers(); - let memory = TimelineController.getMemory(); - let selection = TimelineView.markersOverview.getSelection(); + let selection = TimelineView.overview.getSelection(); is(markers.length, 0, "There are no markers available."); - is(memory.length, 0, - "There are no memory measurements available."); is(selection.start, null, "The initial selection start is correct."); is(selection.end, null, diff --git a/browser/devtools/timeline/test/browser_timeline_overview-update.js b/browser/devtools/timeline/test/browser_timeline_overview-update.js index a8274ecaa9a7..8b11c84d07a8 100644 --- a/browser/devtools/timeline/test/browser_timeline_overview-update.js +++ b/browser/devtools/timeline/test/browser_timeline_overview-update.js @@ -2,71 +2,46 @@ http://creativecommons.org/publicdomain/zero/1.0/ */ /** - * Tests if the markers and memory overviews are continuously updated. + * Tests if the overview graph is continuously updated. */ let test = Task.async(function*() { let { target, panel } = yield initTimelinePanel("about:blank"); - let { $, EVENTS, TimelineView, TimelineController } = panel.panelWin; - - $("#memory-checkbox").checked = true; - yield TimelineController.updateMemoryRecording(); + let { EVENTS, TimelineView, TimelineController } = panel.panelWin; yield DevToolsUtils.waitForTime(1000); yield TimelineController.toggleRecording(); ok(true, "Recording has started."); - ok("selectionEnabled" in TimelineView.markersOverview, - "The selection should not be enabled for the markers overview (1)."); - is(TimelineView.markersOverview.selectionEnabled, false, - "The selection should not be enabled for the markers overview (2)."); - is(TimelineView.markersOverview.hasSelection(), false, - "The markers overview shouldn't have a selection before recording."); - - ok("selectionEnabled" in TimelineView.memoryOverview, - "The selection should not be enabled for the memory overview (1)."); - is(TimelineView.memoryOverview.selectionEnabled, false, - "The selection should not be enabled for the memory overview (2)."); - is(TimelineView.memoryOverview.hasSelection(), false, - "The memory overview shouldn't have a selection before recording."); + ok("selectionEnabled" in TimelineView.overview, + "The selection should not be enabled for the overview graph (1)."); + is(TimelineView.overview.selectionEnabled, false, + "The selection should not be enabled for the overview graph (2)."); + is(TimelineView.overview.hasSelection(), false, + "The overview graph shouldn't have a selection before recording."); let updated = 0; panel.panelWin.on(EVENTS.OVERVIEW_UPDATED, () => updated++); ok((yield waitUntil(() => updated > 10)), - "The overviews were updated a bunch of times."); + "The overview graph was updated a bunch of times."); - ok("selectionEnabled" in TimelineView.markersOverview, - "The selection should still not be enabled for the markers overview (3)."); - is(TimelineView.markersOverview.selectionEnabled, false, - "The selection should still not be enabled for the markers overview (4)."); - is(TimelineView.markersOverview.hasSelection(), false, - "The markers overview should not have a selection while recording."); - - ok("selectionEnabled" in TimelineView.memoryOverview, - "The selection should still not be enabled for the memory overview (3)."); - is(TimelineView.memoryOverview.selectionEnabled, false, - "The selection should still not be enabled for the memory overview (4)."); - is(TimelineView.memoryOverview.hasSelection(), false, - "The memory overview should not have a selection while recording."); + ok("selectionEnabled" in TimelineView.overview, + "The selection should still not be enabled for the overview graph (3)."); + is(TimelineView.overview.selectionEnabled, false, + "The selection should still not be enabled for the overview graph (4)."); + is(TimelineView.overview.hasSelection(), false, + "The overview graph should not have a selection while recording."); yield TimelineController.toggleRecording(); ok(true, "Recording has ended."); is(TimelineController.getMarkers().length, 0, "There are no markers available."); - ok(TimelineController.getMemory().length >= 10, - "There are some memory measurements available."); - - is(TimelineView.markersOverview.selectionEnabled, true, - "The selection should now be enabled for the markers overview."); - is(TimelineView.markersOverview.hasSelection(), false, - "The markers overview should not have a selection after recording."); - - is(TimelineView.memoryOverview.selectionEnabled, true, - "The selection should now be enabled for the memory overview."); - is(TimelineView.memoryOverview.hasSelection(), false, - "The memory overview should not have a selection after recording."); + is(TimelineView.overview.selectionEnabled, true, + "The selection should now be enabled for the overview graph."); + is(TimelineView.overview.hasSelection(), false, + "The overview graph should not have a selection after recording."); yield teardown(panel); finish(); diff --git a/browser/devtools/timeline/test/browser_timeline_recording-without-memory.js b/browser/devtools/timeline/test/browser_timeline_recording-without-memory.js deleted file mode 100644 index 65c715977bdf..000000000000 --- a/browser/devtools/timeline/test/browser_timeline_recording-without-memory.js +++ /dev/null @@ -1,36 +0,0 @@ -/* Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ */ - -/** - * Tests if the timeline actor isn't unnecessarily asked to record memory. - */ - -let test = Task.async(function*() { - let { target, panel } = yield initTimelinePanel(SIMPLE_URL); - let { $, EVENTS, TimelineView, TimelineController } = panel.panelWin; - - yield TimelineController.toggleRecording(); - ok(true, "Recording has started."); - - let updated = 0; - panel.panelWin.on(EVENTS.OVERVIEW_UPDATED, () => updated++); - - ok((yield waitUntil(() => updated > 10)), - "The overview graph was updated a bunch of times."); - ok((yield waitUntil(() => TimelineController.getMarkers().length > 0)), - "There are some markers available."); - - yield TimelineController.toggleRecording(); - ok(true, "Recording has ended."); - - let markers = TimelineController.getMarkers(); - let memory = TimelineController.getMemory(); - - isnot(markers.length, 0, - "There are some markers available."); - is(memory.length, 0, - "There are no memory measurements available."); - - yield teardown(panel); - finish(); -}); diff --git a/browser/devtools/timeline/test/browser_timeline_recording.js b/browser/devtools/timeline/test/browser_timeline_recording.js index 04a4c482386b..b527cff126b7 100644 --- a/browser/devtools/timeline/test/browser_timeline_recording.js +++ b/browser/devtools/timeline/test/browser_timeline_recording.js @@ -7,10 +7,7 @@ let test = Task.async(function*() { let { target, panel } = yield initTimelinePanel(SIMPLE_URL); - let { $, gFront, TimelineController } = panel.panelWin; - - $("#memory-checkbox").checked = true; - yield TimelineController.updateMemoryRecording(); + let { gFront, TimelineController } = panel.panelWin; is((yield gFront.isRecording()), false, "The timeline actor should not be recording when the tool starts."); @@ -23,16 +20,13 @@ let test = Task.async(function*() { "The timeline actor should be recording now."); ok((yield waitUntil(() => TimelineController.getMarkers().length > 0)), "There are some markers available now."); - ok((yield waitUntil(() => TimelineController.getMemory().length > 0)), - "There are some memory measurements available now."); - ok("startTime" in TimelineController.getInterval(), - "A `startTime` field was set on the recording data."); - ok("endTime" in TimelineController.getInterval(), - "An `endTime` field was set on the recording data."); - - ok(TimelineController.getInterval().endTime > - TimelineController.getInterval().startTime, + ok("startTime" in TimelineController.getMarkers(), + "A `startTime` field was set on the markers array."); + ok("endTime" in TimelineController.getMarkers(), + "An `endTime` field was set on the markers array."); + ok(TimelineController.getMarkers().endTime > + TimelineController.getMarkers().startTime, "Some time has passed since the recording started."); yield teardown(panel); diff --git a/browser/devtools/timeline/test/browser_timeline_waterfall-background.js b/browser/devtools/timeline/test/browser_timeline_waterfall-background.js index 1d80e542f0ea..74c07f33a6c2 100644 --- a/browser/devtools/timeline/test/browser_timeline_waterfall-background.js +++ b/browser/devtools/timeline/test/browser_timeline_waterfall-background.js @@ -17,7 +17,7 @@ let test = Task.async(function*() { panel.panelWin.on(EVENTS.OVERVIEW_UPDATED, () => updated++); ok((yield waitUntil(() => updated > 0)), - "The overview graphs were updated a bunch of times."); + "The overview graph was updated a bunch of times."); ok((yield waitUntil(() => TimelineController.getMarkers().length > 0)), "There are some markers available."); diff --git a/browser/devtools/timeline/test/browser_timeline_waterfall-generic.js b/browser/devtools/timeline/test/browser_timeline_waterfall-generic.js index ec9f1070ba4e..f235172a9088 100644 --- a/browser/devtools/timeline/test/browser_timeline_waterfall-generic.js +++ b/browser/devtools/timeline/test/browser_timeline_waterfall-generic.js @@ -16,7 +16,7 @@ let test = Task.async(function*() { panel.panelWin.on(EVENTS.OVERVIEW_UPDATED, () => updated++); ok((yield waitUntil(() => updated > 0)), - "The overview graphs were updated a bunch of times."); + "The overview graph was updated a bunch of times."); ok((yield waitUntil(() => TimelineController.getMarkers().length > 0)), "There are some markers available."); @@ -25,42 +25,42 @@ let test = Task.async(function*() { // Test the header container. - ok($(".waterfall-header-container"), + ok($(".timeline-header-container"), "A header container should have been created."); // Test the header sidebar (left). - ok($(".waterfall-header-container > .waterfall-sidebar"), + ok($(".timeline-header-sidebar"), "A header sidebar node should have been created."); - ok($(".waterfall-header-container > .waterfall-sidebar > .waterfall-header-name"), + ok($(".timeline-header-sidebar > .timeline-header-name"), "A header name label should have been created inside the sidebar."); // Test the header ticks (right). - ok($(".waterfall-header-ticks"), + ok($(".timeline-header-ticks"), "A header ticks node should have been created."); - ok($$(".waterfall-header-ticks > .waterfall-header-tick").length > 0, + ok($$(".timeline-header-ticks > .timeline-header-tick").length > 0, "Some header tick labels should have been created inside the tick node."); // Test the markers container. - ok($(".waterfall-marker-container"), + ok($(".timeline-marker-container"), "A marker container should have been created."); // Test the markers sidebar (left). - ok($$(".waterfall-marker-container > .waterfall-sidebar").length, + ok($$(".timeline-marker-sidebar").length, "Some marker sidebar nodes should have been created."); - ok($$(".waterfall-marker-container > .waterfall-sidebar:not(spacer) > .waterfall-marker-bullet").length, + ok($$(".timeline-marker-sidebar:not(spacer) > .timeline-marker-bullet").length, "Some marker color bullets should have been created inside the sidebar."); - ok($$(".waterfall-marker-container > .waterfall-sidebar:not(spacer) > .waterfall-marker-name").length, + ok($$(".timeline-marker-sidebar:not(spacer) > .timeline-marker-name").length, "Some marker name labels should have been created inside the sidebar."); // Test the markers waterfall (right). - ok($$(".waterfall-marker-item").length, + ok($$(".timeline-marker-waterfall").length, "Some marker waterfall nodes should have been created."); - ok($$(".waterfall-marker-item:not(spacer) > .waterfall-marker-bar").length, + ok($$(".timeline-marker-waterfall:not(spacer) > .timeline-marker-bar").length, "Some marker color bars should have been created inside the waterfall."); yield teardown(panel); diff --git a/browser/devtools/timeline/test/browser_timeline_waterfall-styles.js b/browser/devtools/timeline/test/browser_timeline_waterfall-styles.js index 374ddb2487f5..fcc4d945f119 100644 --- a/browser/devtools/timeline/test/browser_timeline_waterfall-styles.js +++ b/browser/devtools/timeline/test/browser_timeline_waterfall-styles.js @@ -27,7 +27,7 @@ let test = Task.async(function*() { panel.panelWin.on(EVENTS.OVERVIEW_UPDATED, () => updated++); ok((yield waitUntil(() => updated > 0)), - "The overview graphs were updated a bunch of times."); + "The overview graph was updated a bunch of times."); ok((yield waitUntil(() => TimelineController.getMarkers().length > 0)), "There are some markers available."); diff --git a/browser/devtools/timeline/timeline.js b/browser/devtools/timeline/timeline.js index 2ec2ae555554..8960b4b2567a 100644 --- a/browser/devtools/timeline/timeline.js +++ b/browser/devtools/timeline/timeline.js @@ -12,16 +12,11 @@ devtools.lazyRequireGetter(this, "promise"); devtools.lazyRequireGetter(this, "EventEmitter", "devtools/toolkit/event-emitter"); -devtools.lazyRequireGetter(this, "MarkersOverview", - "devtools/timeline/markers-overview", true); -devtools.lazyRequireGetter(this, "MemoryOverview", - "devtools/timeline/memory-overview", true); +devtools.lazyRequireGetter(this, "Overview", + "devtools/timeline/overview", true); devtools.lazyRequireGetter(this, "Waterfall", "devtools/timeline/waterfall", true); -devtools.lazyImporter(this, "CanvasGraphUtils", - "resource:///modules/devtools/Graphs.jsm"); - devtools.lazyImporter(this, "PluralForm", "resource://gre/modules/PluralForm.jsm"); @@ -34,7 +29,7 @@ const EVENTS = { RECORDING_STARTED: "Timeline:RecordingStarted", RECORDING_ENDED: "Timeline:RecordingEnded", - // When the overview graphs are populated with new markers. + // When the overview graph is populated with new markers. OVERVIEW_UPDATED: "Timeline:OverviewUpdated", // When the waterfall view is populated with new markers. @@ -68,13 +63,9 @@ let shutdownTimeline = Task.async(function*() { */ let TimelineController = { /** - * Permanent storage for the markers and the memory measurements streamed by - * the backend, along with the start and end timestamps. + * Permanent storage for the markers streamed by the backend. */ - _starTime: 0, - _endTime: 0, _markers: [], - _memory: [], /** * Initialization function, called when the tool is started. @@ -82,9 +73,7 @@ let TimelineController = { initialize: function() { this._onRecordingTick = this._onRecordingTick.bind(this); this._onMarkers = this._onMarkers.bind(this); - this._onMemory = this._onMemory.bind(this); gFront.on("markers", this._onMarkers); - gFront.on("memory", this._onMemory); }, /** @@ -92,44 +81,16 @@ let TimelineController = { */ destroy: function() { gFront.off("markers", this._onMarkers); - gFront.off("memory", this._onMemory); - }, - - /** - * Gets the { stat, end } time interval for this recording. - * @return object - */ - getInterval: function() { - return { startTime: this._startTime, endTime: this._endTime }; }, /** * Gets the accumulated markers in this recording. - * @return array + * @return array. */ getMarkers: function() { return this._markers; }, - /** - * Gets the accumulated memory measurements in this recording. - * @return array - */ - getMemory: function() { - return this._memory; - }, - - /** - * Updates the views to show or hide the memory recording data. - */ - updateMemoryRecording: Task.async(function*() { - if ($("#memory-checkbox").checked) { - yield TimelineView.showMemoryOverview(); - } else { - yield TimelineView.hideMemoryOverview(); - } - }), - /** * Starts/stops the timeline recording and streaming. */ @@ -147,20 +108,17 @@ let TimelineController = { */ _startRecording: function*() { TimelineView.handleRecordingStarted(); - - let withMemory = $("#memory-checkbox").checked; - let startTime = yield gFront.start({ withMemory }); - + let startTime = yield gFront.start(); // Times must come from the actor in order to be self-consistent. // However, we also want to update the view with the elapsed time // even when the actor is not generating data. To do this we get // the local time and use it to compute a reasonable elapsed time. // See _onRecordingTick. this._localStartTime = performance.now(); - this._startTime = startTime; - this._endTime = startTime; + this._markers = []; - this._memory = []; + this._markers.startTime = startTime; + this._markers.endTime = startTime; this._updateId = setInterval(this._onRecordingTick, OVERVIEW_UPDATE_INTERVAL); }, @@ -173,7 +131,7 @@ let TimelineController = { // Sorting markers is only important when displayed in the waterfall. this._markers = this._markers.sort((a,b) => (a.start > b.start)); - TimelineView.handleRecordingUpdate(); + TimelineView.handleMarkersUpdate(this._markers); TimelineView.handleRecordingEnded(); yield gFront.stop(); }, @@ -185,7 +143,6 @@ let TimelineController = { _stopRecordingAndDiscardData: function*() { yield this._stopRecording(); this._markers.length = 0; - this._memory.length = 0; }, /** @@ -199,34 +156,22 @@ let TimelineController = { */ _onMarkers: function(markers, endTime) { Array.prototype.push.apply(this._markers, markers); - this._endTime = endTime; - }, - - /** - * Callback handling the "memory" event on the timeline front. - * - * @param number delta - * The number of milliseconds elapsed since epoch. - * @param object measurement - * A detailed breakdown of the current memory usage. - */ - _onMemory: function(delta, measurement) { - this._memory.push({ delta, value: measurement.total / 1024 / 1024 }); + this._markers.endTime = endTime; }, /** * Callback invoked at a fixed interval while recording. - * Updates the current time and the timeline overview. + * Updates the markers store with the current time and the timeline overview. */ _onRecordingTick: function() { // Compute an approximate ending time for the view. This is // needed to ensure that the view updates even when new data is // not being generated. - let fakeTime = this._startTime + (performance.now() - this._localStartTime); - if (fakeTime > this._endTime) { - this._endTime = fakeTime; + let fakeTime = this._markers.startTime + (performance.now() - this._localStartTime); + if (fakeTime > this._markers.endTime) { + this._markers.endTime = fakeTime; } - TimelineView.handleRecordingUpdate(); + TimelineView.handleMarkersUpdate(this._markers); } }; @@ -238,15 +183,15 @@ let TimelineView = { * Initialization function, called when the tool is started. */ initialize: Task.async(function*() { - this.markersOverview = new MarkersOverview($("#markers-overview")); + this.overview = new Overview($("#timeline-overview")); this.waterfall = new Waterfall($("#timeline-waterfall")); this._onSelecting = this._onSelecting.bind(this); this._onRefresh = this._onRefresh.bind(this); - this.markersOverview.on("selecting", this._onSelecting); - this.markersOverview.on("refresh", this._onRefresh); + this.overview.on("selecting", this._onSelecting); + this.overview.on("refresh", this._onRefresh); - yield this.markersOverview.ready(); + yield this.overview.ready(); yield this.waterfall.recalculateBounds(); }), @@ -254,40 +199,9 @@ let TimelineView = { * Destruction function, called when the tool is closed. */ destroy: function() { - this.markersOverview.off("selecting", this._onSelecting); - this.markersOverview.off("refresh", this._onRefresh); - this.markersOverview.destroy(); - - // The memory overview graph is not always available. - if (this.memoryOverview) { - this.memoryOverview.destroy(); - } - }, - - /** - * Shows the memory overview graph. - */ - showMemoryOverview: Task.async(function*() { - this.memoryOverview = new MemoryOverview($("#memory-overview")); - yield this.memoryOverview.ready(); - - let interval = TimelineController.getInterval(); - let memory = TimelineController.getMemory(); - this.memoryOverview.setData({ interval, memory }); - - CanvasGraphUtils.linkAnimation(this.markersOverview, this.memoryOverview); - CanvasGraphUtils.linkSelection(this.markersOverview, this.memoryOverview); - }), - - /** - * Hides the memory overview graph. - */ - hideMemoryOverview: function() { - if (!this.memoryOverview) { - return; - } - this.memoryOverview.destroy(); - this.memoryOverview = null; + this.overview.off("selecting", this._onSelecting); + this.overview.off("refresh", this._onRefresh); + this.overview.destroy(); }, /** @@ -296,16 +210,11 @@ let TimelineView = { */ handleRecordingStarted: function() { $("#record-button").setAttribute("checked", "true"); - $("#memory-checkbox").setAttribute("disabled", "true"); $("#timeline-pane").selectedPanel = $("#recording-notice"); - this.markersOverview.clearView(); - - // The memory overview graph is not always available. - if (this.memoryOverview) { - this.memoryOverview.clearView(); - } - + this.overview.selectionEnabled = false; + this.overview.dropSelection(); + this.overview.setData([]); this.waterfall.clearView(); window.emit(EVENTS.RECORDING_STARTED); @@ -317,28 +226,18 @@ let TimelineView = { */ handleRecordingEnded: function() { $("#record-button").removeAttribute("checked"); - $("#memory-checkbox").removeAttribute("disabled"); $("#timeline-pane").selectedPanel = $("#timeline-waterfall"); - this.markersOverview.selectionEnabled = true; + this.overview.selectionEnabled = true; - // The memory overview graph is not always available. - if (this.memoryOverview) { - this.memoryOverview.selectionEnabled = true; - } - - let interval = TimelineController.getInterval(); let markers = TimelineController.getMarkers(); - let memory = TimelineController.getMemory(); - if (markers.length) { - let start = (markers[0].start - interval.startTime) * this.markersOverview.dataScaleX; - let end = start + this.markersOverview.width * OVERVIEW_INITIAL_SELECTION_RATIO; - this.markersOverview.setSelection({ start, end }); + let start = (markers[0].start - markers.startTime) * this.overview.dataScaleX; + let end = start + this.overview.width * OVERVIEW_INITIAL_SELECTION_RATIO; + this.overview.setSelection({ start, end }); } else { - let timeStart = interval.startTime; - let timeEnd = interval.endTime; - this.waterfall.setData(markers, timeStart, timeStart, timeEnd); + let duration = markers.endTime - markers.startTime; + this.waterfall.setData(markers, markers.startTime, markers.endTime); } window.emit(EVENTS.RECORDING_ENDED); @@ -347,19 +246,12 @@ let TimelineView = { /** * Signals that a new set of markers was made available by the controller, * or that the overview graph needs to be updated. + * + * @param array markers + * A list of new markers collected since the recording has started. */ - handleRecordingUpdate: function() { - let interval = TimelineController.getInterval(); - let markers = TimelineController.getMarkers(); - let memory = TimelineController.getMemory(); - - this.markersOverview.setData({ interval, markers }); - - // The memory overview graph is not always available. - if (this.memoryOverview) { - this.memoryOverview.setData({ interval, memory }); - } - + handleMarkersUpdate: function(markers) { + this.overview.setData(markers); window.emit(EVENTS.OVERVIEW_UPDATED); }, @@ -367,21 +259,19 @@ let TimelineView = { * Callback handling the "selecting" event on the timeline overview. */ _onSelecting: function() { - if (!this.markersOverview.hasSelection() && - !this.markersOverview.hasSelectionInProgress()) { + if (!this.overview.hasSelection() && + !this.overview.hasSelectionInProgress()) { this.waterfall.clearView(); return; } - let selection = this.markersOverview.getSelection(); - let start = selection.start / this.markersOverview.dataScaleX; - let end = selection.end / this.markersOverview.dataScaleX; + let selection = this.overview.getSelection(); + let start = selection.start / this.overview.dataScaleX; + let end = selection.end / this.overview.dataScaleX; let markers = TimelineController.getMarkers(); - let interval = TimelineController.getInterval(); - - let timeStart = interval.startTime + Math.min(start, end); - let timeEnd = interval.startTime + Math.max(start, end); - this.waterfall.setData(markers, interval.startTime, timeStart, timeEnd); + let timeStart = markers.startTime + Math.min(start, end); + let timeEnd = markers.startTime + Math.max(start, end); + this.waterfall.setData(markers, timeStart, timeEnd); }, /** diff --git a/browser/devtools/timeline/timeline.xul b/browser/devtools/timeline/timeline.xul index e2921fd6ca59..ce521bd15921 100644 --- a/browser/devtools/timeline/timeline.xul +++ b/browser/devtools/timeline/timeline.xul @@ -25,17 +25,13 @@ class="devtools-toolbarbutton" oncommand="TimelineController.toggleRecording()" tooltiptext="&timelineUI.recordButton.tooltip;"/> - +