firefox-devtools / firefox-devtools/profiler
Add a histogram type to the marker schema
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 491
- Avg merge
- 3d 46m
- Merged PRs (30d)
- 27
Description
```diff
diff --git a/src/types/markers.js b/src/types/markers.js
index 31586ee8..cbb349e6 100644
--- a/src/types/markers.js
+++ b/src/types/markers.js
@@ -101,6 +101,14 @@ export type MarkerSchema = {|
format: MarkerFormatType,
searchable?: boolean,
|}
+ | {|
+ // The name and label of the histogram
+ histogram: string,
+ // The keys in the payload to use for the histogram.
+ keys: string[],
+ // This is how the values will be formatted next to the histogram.
+ format: MarkerFormatType,
+ |}
| {|
// This type is a static bit of text that will be displayed
label: string,
```
This would then show a histogram in the tooltip and sidebar for the values given. The example marker data in pseudo-code from dpalmeiro is:
```
AUTO_PROFILER_MARKER_TEXT("ScriptExecution", JS,
MarkerInnerWindowIdFromDocShell(docShell),
profilerLabelString,
"DelazificationTime", delazificationTime,
"BaselineCompilationTime", baselineCompilationTime,
"XDRencodingTime", xdrEncodingTime);
```
Which is being filled in by this struct information: https://searchfox.org/mozilla-central/rev/16d30bafd4e5276d6d3c632fb52a6c71e739cc44/js/src/jsapi.h#195
We could then chart those values with something like:
```
function makeHistogram(marker) {
const widths = []
const maxWidth = Math.max(
marker.DelazificationTime,
marker.BaselineCompilationTime,
marker.XDRencodingTime,
)
// Add the percentage width, e.g. "90%"
widths.push((marker.DelazificationTime / maxWidth * 100) + '%');
widths.push((marker.BaselineCompilationTime / maxWidth * 100) + '%');
widths.push((marker.XDRencodingTime / maxWidth * 100) + '%');
return widths;
}
```
┆Issue is synchronized with this [Jira Task](https://mozilla-hub.atlassian.net/browse/FP-334)
Contributor guide
Assessment
This issue has not been assessed yet.