setTheme: function (theme) {
theme = theme || "light";
let mainColor = getColor(this.mainColor || "graphs-blue", theme);
this.backgroundColor = getColor("body-background", theme);
this.strokeColor = mainColor;
this.backgroundGradientStart = colorUtils.setAlpha(mainColor, 0.2);
this.backgroundGradientEnd = colorUtils.setAlpha(mainColor, 0.2);
this.selectionBackgroundColor = colorUtils.setAlpha(getColor(SELECTION_BACKGROUND_COLOR_NAME, theme), 0.25);
this.selectionStripesColor = "rgba(255, 255, 255, 0.1)";
this.maximumLineColor = colorUtils.setAlpha(mainColor, 0.4);
this.averageLineColor = colorUtils.setAlpha(mainColor, 0.7);
this.minimumLineColor = colorUtils.setAlpha(mainColor, 0.9);
}
function testColorExistence () {
var vars = ["body-background", "sidebar-background", "contrast-background", "tab-toolbar-background",
"toolbar-background", "selection-background", "selection-color",
"selection-background-semitransparent", "splitter-color", "comment", "body-color",
"body-color-alt", "content-color1", "content-color2", "content-color3",
"highlight-green", "highlight-blue", "highlight-bluegrey", "highlight-purple",
"highlight-lightorange", "highlight-orange", "highlight-red", "highlight-pink"
];
for (let type of vars) {
ok(getColor(type, "light"), `${type} is a valid color in light theme`);
ok(getColor(type, "dark"), `${type} is a valid color in light theme`);
}
}
function testGetColor() {
let BLUE_DARK = "#75BFFF";
let BLUE_LIGHT = "#0074e8";
let BLUE_FIREBUG = "#3455db";
let originalTheme = getTheme();
setTheme("dark");
is(getColor("highlight-blue"), BLUE_DARK, "correctly gets color for enabled theme.");
setTheme("light");
is(getColor("highlight-blue"), BLUE_LIGHT, "correctly gets color for enabled theme.");
setTheme("firebug");
is(getColor("highlight-blue"), BLUE_FIREBUG, "correctly gets color for enabled theme.");
setTheme("metal");
is(getColor("highlight-blue"), BLUE_LIGHT,
"correctly uses light for default theme if enabled theme not found");
is(getColor("highlight-blue", "dark"), BLUE_DARK,
"if provided and found, uses the provided theme.");
is(getColor("highlight-blue", "firebug"), BLUE_FIREBUG,
"if provided and found, uses the provided theme.");
is(getColor("highlight-blue", "metal"), BLUE_LIGHT,
"if provided and not found, defaults to light theme.");
is(getColor("somecomponents"), null, "if a type cannot be found, should return null.");
setTheme(originalTheme);
}
setTheme: function (theme) {
theme = theme || "light";
let interpreterColor = getColor("graphs-red", theme);
let baselineColor = getColor("graphs-blue", theme);
let ionColor = getColor("graphs-green", theme);
this.format = [
{ color: interpreterColor },
{ color: baselineColor },
{ color: ionColor },
];
this.backgroundColor = getColor("sidebar-background", theme);
}
async update() {
// Stop refreshing if the inspector or store is already destroyed.
if (!this.inspector || !this.store) {
return;
}
let node = this.inspector.selection.nodeFront;
let fonts = [];
let { fontOptions } = this.store.getState();
let { showAllFonts, previewText } = fontOptions;
// Clear the list of fonts if the currently selected node is not connected or a text
// or element node unless all fonts are supposed to be shown.
let isElementOrTextNode = this.inspector.selection.isElementNode() ||
this.inspector.selection.isTextNode();
if (!showAllFonts &&
(!node ||
!this.isPanelVisible() ||
!this.inspector.selection.isConnected() ||
!isElementOrTextNode)) {
this.store.dispatch(updateFonts(fonts));
return;
}
let options = {
includePreviews: true,
previewText,
previewFillStyle: getColor("body-color")
};
if (showAllFonts) {
fonts = await this.pageStyle.getAllUsedFontFaces(options)
.catch(console.error);
} else {
fonts = await this.pageStyle.getUsedFontFaces(node, options)
.catch(console.error);
}
if (!fonts || !fonts.length) {
// No fonts to display. Clear the previously shown fonts.
if (this.store) {
this.store.dispatch(updateFonts(fonts));
}
return;
}
for (let font of fonts) {
font.previewUrl = await font.preview.data.string();
}
// in case we've been destroyed in the meantime
if (!this.document) {
return;
}
this.store.dispatch(updateFonts(fonts));
this.inspector.emit("fontinspector-updated");
}
async update() {
// Stop refreshing if the inspector or store is already destroyed.
if (!this.inspector || !this.store) {
return;
}
let allFonts = [];
let fonts = [];
let otherFonts = [];
if (!this.isSelectedNodeValid()) {
this.store.dispatch(updateFonts(fonts, otherFonts, allFonts));
return;
}
const { fontOptions } = this.store.getState();
const { previewText } = fontOptions;
const options = {
includePreviews: true,
previewText,
previewFillStyle: getColor("body-color")
};
// Add the includeVariations argument into the option to get font variation data.
if (this.pageStyle.supportsFontVariations) {
options.includeVariations = true;
}
const node = this.inspector.selection.nodeFront;
fonts = await this.getFontsForNode(node, options);
allFonts = await this.getAllFonts(options);
// Get the subset of fonts from the page which are not used on the selected node.
otherFonts = allFonts.filter(font => {
return !fonts.some(nodeFont => nodeFont.name === font.name);
});
if (!fonts.length && !otherFonts.length) {
// No fonts to display. Clear the previously shown fonts.
if (this.store) {
this.store.dispatch(updateFonts(fonts, otherFonts, allFonts));
}
return;
}
for (const font of [...allFonts]) {
font.previewUrl = await font.preview.data.string();
}
// in case we've been destroyed in the meantime
if (!this.document) {
return;
}
this.store.dispatch(updateFonts(fonts, otherFonts, allFonts));
this.inspector.emit("fontinspector-updated");
}
update: Task.async(function* (showAllFonts) {
let node = this.inspector.selection.nodeFront;
let panel = this.chromeDoc.getElementById("sidebar-panel-fontinspector");
if (!node ||
!this.isActive() ||
!this.inspector.selection.isConnected() ||
!this.inspector.selection.isElementNode() ||
panel.classList.contains("dim")) {
return;
}
this._lastUpdateShowedAllFonts = showAllFonts;
let options = {
includePreviews: true,
previewText: this.getPreviewText(),
previewFillStyle: getColor("body-color")
};
let fonts = [];
if (showAllFonts) {
fonts = yield this.pageStyle.getAllUsedFontFaces(options)
.then(null, console.error);
} else {
fonts = yield this.pageStyle.getUsedFontFaces(node, options)
.then(null, console.error);
}
if (!fonts || !fonts.length) {
// No fonts to display. Clear the previously shown fonts.
this.clear();
return;
}
for (let font of fonts) {
font.previewUrl = yield font.preview.data.string();
}
// in case we've been destroyed in the meantime
if (!this.chromeDoc) {
return;
}
// Make room for the new fonts.
this.clear();
for (let font of fonts) {
this.render(font);
}
this.inspector.emit("fontinspector-updated");
}),
setTheme: function (theme) {
this.theme = theme = theme || "light";
this.backgroundColor = getColor("body-background", theme);
this.selectionBackgroundColor = colorUtils.setAlpha(getColor("selection-background", theme), 0.25);
this.selectionStripesColor = colorUtils.setAlpha("#fff", 0.1);
this.headerBackgroundColor = getColor("body-background", theme);
this.headerTextColor = getColor("body-color", theme);
this.headerTimelineStrokeColor = colorUtils.setAlpha(getColor("body-color-alt", theme), 0.25);
this.alternatingBackgroundColor = colorUtils.setAlpha(getColor("body-color", theme), 0.05);
}
buildGraphImage: function() {
const { markers, duration } = this._data;
const { canvas, ctx } = this._getNamedCanvas("markers-overview-data");
const canvasWidth = this._width;
const canvasHeight = this._height;
// Group markers into separate paint batches. This is necessary to
// draw all markers sharing the same style at once.
for (const marker of markers) {
// Again skip over markers that we're filtering -- we don't want them
// to be labeled as "Unknown"
if (!MarkerBlueprintUtils.shouldDisplayMarker(marker, this._filter)) {
continue;
}
const markerType = this._paintBatches.get(marker.name) ||
this._paintBatches.get("UNKNOWN");
markerType.batch.push(marker);
}
// Calculate each row's height, and the time-based scaling.
const groupHeight = this.rowHeight * this._pixelRatio;
const groupPadding = this.groupPadding * this._pixelRatio;
const headerHeight = this.headerHeight * this._pixelRatio;
const dataScale = this.dataScaleX = canvasWidth / duration;
// Draw the header and overview background.
ctx.fillStyle = this.headerBackgroundColor;
ctx.fillRect(0, 0, canvasWidth, headerHeight);
ctx.fillStyle = this.backgroundColor;
ctx.fillRect(0, headerHeight, canvasWidth, canvasHeight);
// Draw the alternating odd/even group backgrounds.
ctx.fillStyle = this.alternatingBackgroundColor;
ctx.beginPath();
for (let i = 0; i < this._numberOfGroups; i += 2) {
const top = headerHeight + i * groupHeight;
ctx.rect(0, top, canvasWidth, groupHeight);
}
ctx.fill();
// Draw the timeline header ticks.
const fontSize = OVERVIEW_HEADER_TEXT_FONT_SIZE * this._pixelRatio;
const fontFamily = OVERVIEW_HEADER_TEXT_FONT_FAMILY;
const textPaddingLeft = OVERVIEW_HEADER_TEXT_PADDING_LEFT * this._pixelRatio;
const textPaddingTop = OVERVIEW_HEADER_TEXT_PADDING_TOP * this._pixelRatio;
const tickInterval = TickUtils.findOptimalTickInterval({
ticksMultiple: OVERVIEW_HEADER_TICKS_MULTIPLE,
ticksSpacingMin: OVERVIEW_HEADER_TICKS_SPACING_MIN,
dataScale: dataScale
});
ctx.textBaseline = "middle";
ctx.font = fontSize + "px " + fontFamily;
ctx.fillStyle = this.headerTextColor;
ctx.strokeStyle = this.headerTimelineStrokeColor;
ctx.beginPath();
for (let x = 0; x < canvasWidth; x += tickInterval) {
const lineLeft = x;
const textLeft = lineLeft + textPaddingLeft;
const time = Math.round(x / dataScale);
const label = ProfilerGlobal.L10N.getFormatStr("timeline.tick", time);
ctx.fillText(label, textLeft, headerHeight / 2 + textPaddingTop);
ctx.moveTo(lineLeft, 0);
ctx.lineTo(lineLeft, canvasHeight);
}
ctx.stroke();
// Draw the timeline markers.
for (const [, { definition, batch }] of this._paintBatches) {
const group = this._groupMap[definition.group];
const top = headerHeight + group * groupHeight + groupPadding / 2;
const height = groupHeight - groupPadding;
const color = getColor(definition.colorName, this.theme);
ctx.fillStyle = color;
ctx.beginPath();
for (const { start, end } of batch) {
const left = start * dataScale;
const width = Math.max((end - start) * dataScale, OVERVIEW_MARKER_WIDTH_MIN);
ctx.rect(left, top, width, height);
}
ctx.fill();
// Since all the markers in this batch (thus sharing the same style) have
// been drawn, empty it. The next time new markers will be available,
// they will be sorted and drawn again.
batch.length = 0;
}
return canvas;
},