mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1121180 - Support dark theme in flamecharts for the performance tool. r=vp 

--HG--
rename : browser/devtools/shared/widgets/FlameGraph.jsm => browser/devtools/shared/widgets/FlameGraph.js
This commit is contained in:
Jordan Santell 2015-04-06 11:53:00 -04:00
Родитель 494b81298b
Коммит a2ecc81eb0
17 изменённых файлов: 126 добавлений и 95 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

8
browser/devtools/performance/performance-controller.js
Просмотреть файл

@ -47,13 +47,13 @@ devtools.lazyRequireGetter(this, "JITOptimizations",
"devtools/shared/profiler/jit", true);
devtools.lazyRequireGetter(this, "OptionsView",
"devtools/shared/options-view", true);
devtools.lazyRequireGetter(this, "FlameGraphUtils",
"devtools/shared/widgets/FlameGraph", true);
devtools.lazyRequireGetter(this, "FlameGraph",
"devtools/shared/widgets/FlameGraph", true);
devtools.lazyImporter(this, "CanvasGraphUtils",
"resource:///modules/devtools/Graphs.jsm");
devtools.lazyImporter(this, "FlameGraphUtils",
"resource:///modules/devtools/FlameGraph.jsm");
devtools.lazyImporter(this, "FlameGraph",
"resource:///modules/devtools/FlameGraph.jsm");
devtools.lazyImporter(this, "SideMenuWidget",
"resource:///modules/devtools/SideMenuWidget.jsm");
devtools.lazyImporter(this, "PluralForm",

12
browser/devtools/performance/views/details-js-flamegraph.js
Просмотреть файл

@ -24,10 +24,13 @@ let JsFlameGraphView = Heritage.extend(DetailsSubview, {
this.graph = new FlameGraph($("#js-flamegraph-view"));
this.graph.timelineTickUnits = L10N.getStr("graphs.ms");
this.graph.setTheme(PerformanceController.getTheme());
yield this.graph.ready();
this._onRangeChangeInGraph = this._onRangeChangeInGraph.bind(this);
this._onThemeChanged = this._onThemeChanged.bind(this);
PerformanceController.on(EVENTS.THEME_CHANGED, this._onThemeChanged);
this.graph.on("selecting", this._onRangeChangeInGraph);
}),
@ -37,6 +40,7 @@ let JsFlameGraphView = Heritage.extend(DetailsSubview, {
destroy: Task.async(function* () {
DetailsSubview.destroy.call(this);
PerformanceController.off(EVENTS.THEME_CHANGED, this._onThemeChanged);
this.graph.off("selecting", this._onRangeChangeInGraph);
yield this.graph.destroy();
@ -93,5 +97,13 @@ let JsFlameGraphView = Heritage.extend(DetailsSubview, {
FlameGraphUtils.removeFromCache(samples);
},
/**
* Called when `devtools.theme` changes.
*/
_onThemeChanged: function (_, theme) {
this.graph.setTheme(theme);
this.graph.refresh({ force: true });
},
toString: () => "[object JsFlameGraphView]"
});

12
browser/devtools/performance/views/details-memory-flamegraph.js
Просмотреть файл

@ -23,10 +23,13 @@ let MemoryFlameGraphView = Heritage.extend(DetailsSubview, {
this.graph = new FlameGraph($("#memory-flamegraph-view"));
this.graph.timelineTickUnits = L10N.getStr("graphs.ms");
this.graph.setTheme(PerformanceController.getTheme());
yield this.graph.ready();
this._onRangeChangeInGraph = this._onRangeChangeInGraph.bind(this);
this._onThemeChanged = this._onThemeChanged.bind(this);
PerformanceController.on(EVENTS.THEME_CHANGED, this._onThemeChanged);
this.graph.on("selecting", this._onRangeChangeInGraph);
}),
@ -36,6 +39,7 @@ let MemoryFlameGraphView = Heritage.extend(DetailsSubview, {
destroy: Task.async(function* () {
DetailsSubview.destroy.call(this);
PerformanceController.off(EVENTS.THEME_CHANGED, this._onThemeChanged);
this.graph.off("selecting", this._onRangeChangeInGraph);
yield this.graph.destroy();
@ -91,5 +95,13 @@ let MemoryFlameGraphView = Heritage.extend(DetailsSubview, {
FlameGraphUtils.removeFromCache(samples);
},
/**
* Called when `devtools.theme` changes.
*/
_onThemeChanged: function (_, theme) {
this.graph.setTheme(theme);
this.graph.refresh({ force: true });
},
toString: () => "[object MemoryFlameGraphView]"
});

2
browser/devtools/shared/moz.build
Просмотреть файл

@ -21,7 +21,6 @@ EXTRA_JS_MODULES.devtools += [
'widgets/AbstractTreeItem.jsm',
'widgets/BreadcrumbsWidget.jsm',
'widgets/Chart.jsm',
'widgets/FlameGraph.jsm',
'widgets/Graphs.jsm',
'widgets/GraphsWorker.js',
'widgets/SideMenuWidget.jsm',
@ -65,6 +64,7 @@ EXTRA_JS_MODULES.devtools.shared.widgets += [
'widgets/CubicBezierPresets.js',
'widgets/CubicBezierWidget.js',
'widgets/FastListWidget.js',
'widgets/FlameGraph.js',
'widgets/Spectrum.js',
'widgets/TableWidget.js',
'widgets/Tooltip.js',

2
browser/devtools/shared/test/browser_flame-graph-01.js
Просмотреть файл

@ -3,7 +3,7 @@
// Tests that flame graph widget works properly.
let {FlameGraph} = Cu.import("resource:///modules/devtools/FlameGraph.jsm", {});
let {FlameGraph} = devtools.require("devtools/shared/widgets/FlameGraph");
let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
add_task(function*() {

2
browser/devtools/shared/test/browser_flame-graph-02.js
Просмотреть файл

@ -3,7 +3,7 @@
// Tests that flame graph widgets may have a fixed width or height.
let {FlameGraph} = Cu.import("resource:///modules/devtools/FlameGraph.jsm", {});
let {FlameGraph} = devtools.require("devtools/shared/widgets/FlameGraph");
let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
add_task(function*() {

2
browser/devtools/shared/test/browser_flame-graph-03a.js
Просмотреть файл

@ -8,7 +8,7 @@ let TEST_BOUNDS = { startTime: 0, endTime: 150 };
let TEST_WIDTH = 200;
let TEST_HEIGHT = 100;
let {FlameGraph} = Cu.import("resource:///modules/devtools/FlameGraph.jsm", {});
let {FlameGraph} = devtools.require("devtools/shared/widgets/FlameGraph");
let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
add_task(function*() {

2
browser/devtools/shared/test/browser_flame-graph-03b.js
Просмотреть файл

@ -9,7 +9,7 @@ let TEST_WIDTH = 200;
let TEST_HEIGHT = 100;
let TEST_DPI_DENSITIY = 2;
let {FlameGraph} = Cu.import("resource:///modules/devtools/FlameGraph.jsm", {});
let {FlameGraph} = devtools.require("devtools/shared/widgets/FlameGraph");
let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
add_task(function*() {

2
browser/devtools/shared/test/browser_flame-graph-03c.js
Просмотреть файл

@ -9,7 +9,7 @@ let TEST_WIDTH = 200;
let TEST_HEIGHT = 100;
let TEST_DPI_DENSITIY = 2;
let {FlameGraph} = Cu.import("resource:///modules/devtools/FlameGraph.jsm", {});
let {FlameGraph} = devtools.require("devtools/shared/widgets/FlameGraph");
let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
add_task(function*() {

4
browser/devtools/shared/test/browser_flame-graph-04.js
Просмотреть файл

@ -4,10 +4,10 @@
// 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 = 8; // px
let FLAME_GRAPH_BLOCK_TEXT_FONT_SIZE = 9; // 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 {FlameGraph} = devtools.require("devtools/shared/widgets/FlameGraph");
let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
let L10N = new ViewHelpers.L10N();

52
browser/devtools/shared/test/browser_flame-graph-utils-01.js
Просмотреть файл

@ -4,7 +4,7 @@
// Tests that text metrics and data conversion from profiler samples
// widget work properly in the flame graph.
let {FlameGraphUtils} = Cu.import("resource:///modules/devtools/FlameGraph.jsm", {});
let {FlameGraphUtils, FLAME_GRAPH_BLOCK_HEIGHT} = devtools.require("devtools/shared/widgets/FlameGraph");
add_task(function*() {
yield promiseTab("about:blank");
@ -111,7 +111,7 @@ let EXPECTED_OUTPUT = [{
x: 50,
y: 0,
width: 410,
height: 11,
height: FLAME_GRAPH_BLOCK_HEIGHT,
text: "A"
}]
}, {
@ -121,9 +121,9 @@ let EXPECTED_OUTPUT = [{
rawLocation: "B"
},
x: 50,
y: 11,
y: FLAME_GRAPH_BLOCK_HEIGHT,
width: 160,
height: 11,
height: FLAME_GRAPH_BLOCK_HEIGHT,
text: "B"
}, {
srcData: {
@ -131,9 +131,9 @@ let EXPECTED_OUTPUT = [{
rawLocation: "B"
},
x: 330,
y: 11,
y: FLAME_GRAPH_BLOCK_HEIGHT,
width: 130,
height: 11,
height: FLAME_GRAPH_BLOCK_HEIGHT,
text: "B"
}]
}, {
@ -145,7 +145,7 @@ let EXPECTED_OUTPUT = [{
x: 0,
y: 0,
width: 50,
height: 11,
height: FLAME_GRAPH_BLOCK_HEIGHT,
text: "M"
}, {
srcData: {
@ -153,9 +153,9 @@ let EXPECTED_OUTPUT = [{
rawLocation: "C"
},
x: 50,
y: 22,
y: FLAME_GRAPH_BLOCK_HEIGHT * 2,
width: 50,
height: 11,
height: FLAME_GRAPH_BLOCK_HEIGHT,
text: "C"
}, {
srcData: {
@ -163,9 +163,9 @@ let EXPECTED_OUTPUT = [{
rawLocation: "C"
},
x: 330,
y: 22,
y: FLAME_GRAPH_BLOCK_HEIGHT * 2,
width: 130,
height: 11,
height: FLAME_GRAPH_BLOCK_HEIGHT,
text: "C"
}]
}, {
@ -175,9 +175,9 @@ let EXPECTED_OUTPUT = [{
rawLocation: "N"
},
x: 0,
y: 11,
y: FLAME_GRAPH_BLOCK_HEIGHT,
width: 50,
height: 11,
height: FLAME_GRAPH_BLOCK_HEIGHT,
text: "N"
}, {
srcData: {
@ -185,9 +185,9 @@ let EXPECTED_OUTPUT = [{
rawLocation: "D"
},
x: 100,
y: 22,
y: FLAME_GRAPH_BLOCK_HEIGHT * 2,
width: 110,
height: 11,
height: FLAME_GRAPH_BLOCK_HEIGHT,
text: "D"
}, {
srcData: {
@ -197,7 +197,7 @@ let EXPECTED_OUTPUT = [{
x: 460,
y: 0,
width: 40,
height: 11,
height: FLAME_GRAPH_BLOCK_HEIGHT,
text: "X"
}]
}, {
@ -207,9 +207,9 @@ let EXPECTED_OUTPUT = [{
rawLocation: "E"
},
x: 210,
y: 11,
y: FLAME_GRAPH_BLOCK_HEIGHT,
width: 120,
height: 11,
height: FLAME_GRAPH_BLOCK_HEIGHT,
text: "E"
}, {
srcData: {
@ -217,9 +217,9 @@ let EXPECTED_OUTPUT = [{
rawLocation: "Y"
},
x: 460,
y: 11,
y: FLAME_GRAPH_BLOCK_HEIGHT,
width: 40,
height: 11,
height: FLAME_GRAPH_BLOCK_HEIGHT,
text: "Y"
}]
}, {
@ -229,9 +229,9 @@ let EXPECTED_OUTPUT = [{
rawLocation: "P"
},
x: 0,
y: 22,
y: FLAME_GRAPH_BLOCK_HEIGHT * 2,
width: 50,
height: 11,
height: FLAME_GRAPH_BLOCK_HEIGHT,
text: "P"
}, {
srcData: {
@ -239,9 +239,9 @@ let EXPECTED_OUTPUT = [{
rawLocation: "F"
},
x: 210,
y: 22,
y: FLAME_GRAPH_BLOCK_HEIGHT * 2,
width: 120,
height: 11,
height: FLAME_GRAPH_BLOCK_HEIGHT,
text: "F"
}, {
srcData: {
@ -249,9 +249,9 @@ let EXPECTED_OUTPUT = [{
rawLocation: "Z"
},
x: 460,
y: 22,
y: FLAME_GRAPH_BLOCK_HEIGHT * 2,
width: 40,
height: 11,
height: FLAME_GRAPH_BLOCK_HEIGHT,
text: "Z"
}]
}, {

8
browser/devtools/shared/test/browser_flame-graph-utils-02.js
Просмотреть файл

@ -3,7 +3,7 @@
// Tests consecutive duplicate frames are removed from the flame graph data.
let {FlameGraphUtils} = Cu.import("resource:///modules/devtools/FlameGraph.jsm", {});
let {FlameGraphUtils, FLAME_GRAPH_BLOCK_HEIGHT} = devtools.require("devtools/shared/widgets/FlameGraph");
add_task(function*() {
yield promiseTab("about:blank");
@ -73,7 +73,7 @@ let EXPECTED_OUTPUT = [{
x: 0,
y: 0,
width: 50,
height: 11,
height: FLAME_GRAPH_BLOCK_HEIGHT,
text: "A"
}]
}, {
@ -83,9 +83,9 @@ let EXPECTED_OUTPUT = [{
rawLocation: "B"
},
x: 0,
y: 11,
y: FLAME_GRAPH_BLOCK_HEIGHT,
width: 50,
height: 11,
height: FLAME_GRAPH_BLOCK_HEIGHT,
text: "B"
}]
}, {

12
browser/devtools/shared/test/browser_flame-graph-utils-03.js
Просмотреть файл

@ -3,7 +3,7 @@
// Tests if platform frames are removed from the flame graph data.
let {FlameGraphUtils} = Cu.import("resource:///modules/devtools/FlameGraph.jsm", {});
let {FlameGraphUtils, FLAME_GRAPH_BLOCK_HEIGHT} = devtools.require("devtools/shared/widgets/FlameGraph");
let {FrameNode} = devtools.require("devtools/shared/profiler/tree-model");
add_task(function*() {
@ -72,7 +72,7 @@ let EXPECTED_OUTPUT = [{
x: 0,
y: 0,
width: 50,
height: 11,
height: FLAME_GRAPH_BLOCK_HEIGHT,
text: "http://A"
}, {
srcData: {
@ -80,9 +80,9 @@ let EXPECTED_OUTPUT = [{
rawLocation: "file://C"
},
x: 0,
y: 22,
y: FLAME_GRAPH_BLOCK_HEIGHT * 2,
width: 50,
height: 11,
height: FLAME_GRAPH_BLOCK_HEIGHT,
text: "file://C"
}]
}, {
@ -102,9 +102,9 @@ let EXPECTED_OUTPUT = [{
rawLocation: "https://B"
},
x: 0,
y: 11,
y: FLAME_GRAPH_BLOCK_HEIGHT,
width: 50,
height: 11,
height: FLAME_GRAPH_BLOCK_HEIGHT,
text: "https://B"
}]
}, {

20
browser/devtools/shared/test/browser_flame-graph-utils-04.js
Просмотреть файл

@ -3,7 +3,7 @@
// Tests if (idle) nodes are added when necessary in the flame graph data.
let {FlameGraphUtils} = Cu.import("resource:///modules/devtools/FlameGraph.jsm", {});
let {FlameGraphUtils, FLAME_GRAPH_BLOCK_HEIGHT} = devtools.require("devtools/shared/widgets/FlameGraph");
let {FrameNode} = devtools.require("devtools/shared/profiler/tree-model");
add_task(function*() {
@ -96,7 +96,7 @@ let EXPECTED_OUTPUT = [{
x: 0,
y: 0,
width: 50,
height: 11,
height: FLAME_GRAPH_BLOCK_HEIGHT,
text: "http://A"
}, {
srcData: {
@ -104,9 +104,9 @@ let EXPECTED_OUTPUT = [{
rawLocation: "file://C"
},
x: 0,
y: 22,
y: FLAME_GRAPH_BLOCK_HEIGHT * 2,
width: 50,
height: 11,
height: FLAME_GRAPH_BLOCK_HEIGHT,
text: "file://C"
}, {
srcData: {
@ -116,7 +116,7 @@ let EXPECTED_OUTPUT = [{
x: 100,
y: 0,
width: 50,
height: 11,
height: FLAME_GRAPH_BLOCK_HEIGHT,
text: "http://A"
}]
}, {
@ -128,7 +128,7 @@ let EXPECTED_OUTPUT = [{
x: 50,
y: 0,
width: 50,
height: 11,
height: FLAME_GRAPH_BLOCK_HEIGHT,
text: "\m/"
}]
}, {
@ -146,9 +146,9 @@ let EXPECTED_OUTPUT = [{
rawLocation: "https://B"
},
x: 0,
y: 11,
y: FLAME_GRAPH_BLOCK_HEIGHT,
width: 50,
height: 11,
height: FLAME_GRAPH_BLOCK_HEIGHT,
text: "https://B"
}, {
srcData: {
@ -156,9 +156,9 @@ let EXPECTED_OUTPUT = [{
rawLocation: "https://B"
},
x: 100,
y: 11,
y: FLAME_GRAPH_BLOCK_HEIGHT,
width: 50,
height: 11,
height: FLAME_GRAPH_BLOCK_HEIGHT,
text: "https://B"
}]
}, {

2
browser/devtools/shared/test/browser_flame-graph-utils-05.js
Просмотреть файл

@ -3,7 +3,7 @@
// Tests that flame graph data is cached, and that the cache may be cleared.
let {FlameGraphUtils} = Cu.import("resource:///modules/devtools/FlameGraph.jsm", {});
let {FlameGraphUtils} = devtools.require("devtools/shared/widgets/FlameGraph");
add_task(function*() {
yield promiseTab("about:blank");

2
browser/devtools/shared/test/browser_flame-graph-utils-hash.js
Просмотреть файл

@ -3,7 +3,7 @@
// Tests if (idle) nodes are added when necessary in the flame graph data.
let {FlameGraphUtils} = Cu.import("resource:///modules/devtools/FlameGraph.jsm", {});
let {FlameGraphUtils} = devtools.require("devtools/shared/widgets/FlameGraph");
let test = Task.async(function*() {
let hash1 = FlameGraphUtils._getStringHash("abc");

77
browser/devtools/shared/widgets/FlameGraph.jsm → browser/devtools/shared/widgets/FlameGraph.js
Просмотреть файл

@ -3,18 +3,12 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
const Cu = Components.utils;
Cu.import("resource:///modules/devtools/ViewHelpers.jsm");
Cu.import("resource:///modules/devtools/Graphs.jsm");
const promise = Cu.import("resource://gre/modules/Promise.jsm", {}).Promise;
const {Task} = Cu.import("resource://gre/modules/Task.jsm", {});
const {EventEmitter} = Cu.import("resource://gre/modules/devtools/event-emitter.js", {});
this.EXPORTED_SYMBOLS = [
"FlameGraph",
"FlameGraphUtils"
];
const { ViewHelpers } = require("resource:///modules/devtools/ViewHelpers.jsm");
const { AbstractCanvasGraph, GraphArea, GraphAreaDragger } = require("resource:///modules/devtools/Graphs.jsm");
const { Promise } = require("resource://gre/modules/Promise.jsm");
const { Task } = require("resource://gre/modules/Task.jsm");
const { getColor } = require("devtools/shared/theme");
const EventEmitter = require("devtools/toolkit/event-emitter");
const HTML_NS = "http://www.w3.org/1999/xhtml";
const GRAPH_SRC = "chrome://browser/content/devtools/graphs-frame.xhtml";
@ -34,17 +28,14 @@ const TIMELINE_TICKS_MULTIPLE = 5; // ms
const TIMELINE_TICKS_SPACING_MIN = 75; // px
const OVERVIEW_HEADER_HEIGHT = 16; // px
const OVERVIEW_HEADER_BACKGROUND = "rgba(255,255,255,0.7)";
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 OVERVIEW_HEADER_TIMELINE_STROKE_COLOR = "rgba(128, 128, 128, 0.5)";
const FLAME_GRAPH_BLOCK_BORDER = 1; // px
const FLAME_GRAPH_BLOCK_TEXT_COLOR = "#000";
const FLAME_GRAPH_BLOCK_TEXT_FONT_SIZE = 8; // px
const FLAME_GRAPH_BLOCK_TEXT_FONT_SIZE = 9; // px
const FLAME_GRAPH_BLOCK_TEXT_FONT_FAMILY = "sans-serif";
const FLAME_GRAPH_BLOCK_TEXT_PADDING_TOP = 0; // px
const FLAME_GRAPH_BLOCK_TEXT_PADDING_LEFT = 3; // px
@ -101,7 +92,9 @@ function FlameGraph(parent, sharpness) {
EventEmitter.decorate(this);
this._parent = parent;
this._ready = promise.defer();
this._ready = Promise.defer();
this.setTheme();
AbstractCanvasGraph.createIframe(GRAPH_SRC, parent, iframe => {
this._iframe = iframe;
@ -215,14 +208,6 @@ FlameGraph.prototype = {
this.emit("destroyed");
}),
/**
* Rendering options. Subclasses should override these.
*/
overviewHeaderBackgroundColor: OVERVIEW_HEADER_BACKGROUND,
overviewHeaderTextColor: OVERVIEW_HEADER_TEXT_COLOR,
overviewTimelineStrokes: OVERVIEW_TIMELINE_STROKES,
blockTextColor: FLAME_GRAPH_BLOCK_TEXT_COLOR,
/**
* Makes sure the canvas graph is of the specified width or height, and
* doesn't flex to fit all the available space.
@ -330,14 +315,19 @@ FlameGraph.prototype = {
/**
* Updates this graph to reflect the new dimensions of the parent node.
*
* @param boolean options.force
* Force redraw everything.
*/
refresh: function() {
refresh: function(options={}) {
let bounds = this._parent.getBoundingClientRect();
let newWidth = this.fixedWidth || bounds.width;
let newHeight = this.fixedHeight || bounds.height;
// Prevent redrawing everything if the graph's width & height won't change.
if (this._width == newWidth * this._pixelRatio &&
// Prevent redrawing everything if the graph's width & height won't change,
// except if force=true.
if (!options.force &&
this._width == newWidth * this._pixelRatio &&
this._height == newHeight * this._pixelRatio) {
this.emit("refresh-cancelled");
return;
@ -354,6 +344,19 @@ FlameGraph.prototype = {
this.emit("refresh");
},
/**
* Sets the theme via `theme` to either "light" or "dark",
* and updates the internal styling to match. Requires a redraw
* to see the effects.
*/
setTheme: function (theme) {
theme = theme || "light";
this.overviewHeaderBackgroundColor = getColor("body-background", theme);
this.overviewHeaderTextColor = getColor("body-color", theme);
// Hard to get a color that is readable across both themes for the text on the flames
this.blockTextColor = getColor(theme === "dark" ? "selection-color" : "body-color", theme);
},
/**
* The contents of this graph are redrawn only when something changed,
* like the data source, or the selection bounds etc. This flag tracks
@ -385,8 +388,8 @@ FlameGraph.prototype = {
let selection = this._selection;
let selectionWidth = selection.end - selection.start;
let selectionScale = canvasWidth / selectionWidth;
this._drawPyramid(this._data, this._verticalOffset, selection.start, selectionScale);
this._drawTicks(selection.start, selectionScale);
this._drawPyramid(this._data, this._verticalOffset, selection.start, selectionScale);
this._shouldRedraw = false;
},
@ -416,7 +419,7 @@ FlameGraph.prototype = {
ctx.textBaseline = "top";
ctx.font = fontSize + "px " + fontFamily;
ctx.fillStyle = this.overviewHeaderTextColor;
ctx.strokeStyle = this.overviewTimelineStrokes;
ctx.strokeStyle = OVERVIEW_HEADER_TIMELINE_STROKE_COLOR;
ctx.beginPath();
for (let x = -scaledOffset % tickInterval; x < canvasWidth; x += tickInterval) {
@ -926,14 +929,14 @@ FlameGraph.prototype = {
}
};
const FLAME_GRAPH_BLOCK_HEIGHT = 11; // px
const FLAME_GRAPH_BLOCK_HEIGHT = 12; // 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;
const PALLETTE_SATURATION = 100;
const PALLETTE_BRIGHTNESS = 65;
const PALLETTE_OPACITY = 0.55;
const COLOR_PALLETTE = Array.from(Array(PALLETTE_SIZE)).map((_, i) => "hsla" +
"(" + ((PALLETTE_HUE_OFFSET + (i / PALLETTE_SIZE * PALLETTE_HUE_RANGE))|0 % 360) +
@ -1114,3 +1117,7 @@ let FlameGraphUtils = {
return hash;
}
};
exports.FlameGraph = FlameGraph;
exports.FlameGraphUtils = FlameGraphUtils;
exports.FLAME_GRAPH_BLOCK_HEIGHT = FLAME_GRAPH_BLOCK_HEIGHT;