_renderLocalBuildSection() {
const { objdirs } = this.props;
return details(
{ className: "perf-settings-details" },
summary(
{
className: "perf-settings-summary",
id: "perf-settings-local-build-summary",
},
"Local build:"
),
div(
{ className: "perf-settings-details-contents" },
div(
{ className: "perf-settings-details-contents-slider" },
p(null,
`If you're profiling a build that you have compiled yourself, on this
machine, please add your build's objdir to the list below so that
it can be used to look up symbol information.`),
DirectoryPicker({
dirs: objdirs,
onAdd: this._handleAddObjdir,
onRemove: this._handleRemoveObjdir,
}),
)
)
);
}
/**
* Render fonts used on the selected node grouped by font-family.
*
* @param {Array} fonts
* Fonts used on selected node.
* @return {DOMNode}
*/
renderUsedFonts(fonts) {
if (!fonts.length) {
return null;
}
// Group fonts by family name.
const fontGroups = fonts.reduce((acc, font) => {
const family = font.CSSFamilyName.toString();
acc[family] = acc[family] || [];
acc[family].push(font);
return acc;
}, {});
const renderedFontGroups = Object.keys(fontGroups).map(family => {
return this.renderFontGroup(family, fontGroups[family]);
});
const topFontsList = renderedFontGroups.slice(0, MAX_FONTS);
const moreFontsList = renderedFontGroups.slice(MAX_FONTS, renderedFontGroups.length);
const moreFonts = !moreFontsList.length
? null
: dom.details({},
dom.summary({},
dom.span({ className: "label-open" }, getStr("fontinspector.showMore")),
dom.span({ className: "label-close" }, getStr("fontinspector.showLess"))
),
moreFontsList
);
return dom.label(
{
className: "font-control font-control-used-fonts",
},
dom.span(
{
className: "font-control-label",
},
getStr("fontinspector.fontsUsedLabel")
),
dom.div(
{
className: "font-control-box",
},
topFontsList,
moreFonts
)
);
}
_renderThreads() {
return details(
{ className: "perf-settings-details" },
summary(
{
className: "perf-settings-summary",
id: "perf-settings-threads-summary",
},
"Threads:"
),
// Contain the overflow of the slide down animation with the first div.
div(
{ className: "perf-settings-details-contents" },
// Provide a second <div> element for the contents of the slide down animation.
div(
{ className: "perf-settings-details-contents-slider" },
div(
{ className: "perf-settings-thread-columns" },
threadColumns.map(this._renderThreadsColumns),
),
div(
{ className: "perf-settings-row" },
label(
{
className: "perf-settings-text-label",
title: "These thread names are a comma separated list that is used to " +
"enable profiling of the threads in the profiler. The name needs to " +
"be only a partial match of the thread name to be included. It " +
"is whitespace sensitive.",
},
div({}, "Add custom threads by name:"),
input({
className: "perf-settings-text-input",
id: "perf-settings-thread-text",
type: "text",
value: this.state.temporaryThreadText === null
? this.props.threads
: this.state.temporaryThreadText,
onBlur: this._handleThreadTextCleanup,
onFocus: this._setThreadTextFromInput,
onChange: this._setThreadTextFromInput,
})
)
)
)
)
);
}
render() {
const { children } = this.props;
return dom.details(
{
className: "details--log",
},
Localized({
id: this.getLocalizationString(),
},
dom.summary(
{},
this.getLocalizationString()
)
),
children
);
}
_renderFeatures() {
return details(
{ className: "perf-settings-details" },
summary(
{
className: "perf-settings-summary",
id: "perf-settings-features-summary",
},
"Features:"
),
div(
{ className: "perf-settings-details-contents" },
div(
{ className: "perf-settings-details-contents-slider" },
featureCheckboxes.map(({name, value, title, recommended}) => label(
{
className: "perf-settings-checkbox-label perf-settings-feature-label",
key: value,
},
input({
className: "perf-settings-checkbox",
id: `perf-settings-feature-checkbox-${value}`,
type: "checkbox",
value,
checked: this.props.features.includes(value),
onChange: this._handleFeaturesCheckboxChange,
}),
div({ className: "perf-settings-feature-name" }, name),
div(
{ className: "perf-settings-feature-title" },
title,
recommended
? span(
{ className: "perf-settings-subtext" },
" (Recommended on by default.)"
)
: null
)
))
)
)
);
}
renderFamilesNotUsed(familiesNotUsed = []) {
if (!familiesNotUsed.length) {
return null;
}
const familiesList = familiesNotUsed.map(family => {
return dom.div(
{
className: "font-family-unused",
},
family
);
});
return dom.details(
{},
dom.summary(
{},
getStr("fontinspector.familiesUnusedLabel")
),
familiesList
);
}
/**
* Render font family, font name, and metadata for all fonts used on selected node.
*
* @param {Array} fonts
* Fonts used on selected node.
* @param {Array} families
* Font familes declared on selected node.
* @return {DOMNode}
*/
renderFontFamily(fonts, families) {
if (!fonts.length) {
return null;
}
const topUsedFontsList = this.renderFontList(fonts.slice(0, MAX_FONTS));
const moreUsedFontsList = this.renderFontList(fonts.slice(MAX_FONTS, fonts.length));
const moreUsedFonts = moreUsedFontsList === null
? null
: dom.details({},
dom.summary({},
dom.span({ className: "label-open" }, getStr("fontinspector.showMore")),
dom.span({ className: "label-close" }, getStr("fontinspector.showLess"))
),
moreUsedFontsList
);
return dom.label(
{
className: "font-control font-control-family",
},
dom.span(
{
className: "font-control-label",
},
getStr("fontinspector.fontFamilyLabel")
),
dom.div(
{
className: "font-control-box",
},
topUsedFontsList,
moreUsedFonts,
this.renderFamilesNotUsed(families.notUsed)
)
);
}