firefox-devtools / firefox-devtools/profiler

Add a histogram type to the marker schema

Open
#3,026 1 comment 0 reactions 0 assignees View on GitHub
markers
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.