firefox-devtools / firefox-devtools/profiler

The algorithm to control the ellipsis in our canvas-based panels can be improved

Open
#3,691 5 comments 0 reactions 0 assignees View on GitHub
flame graph markers polish stack chart
Dominant language
TypeScript
Stars
1.5k
Forks
491
Avg merge
3d 5h
Merged PRs (30d)
30

Description

The algorithm to control the ellipsis is implemented in https://github.com/firefox-devtools/profiler/blob/main/src/utils/text-measurement.js.

We can see in several profiles how it's not perfect: sometimes the text is cut too soon, sometimes too late. This is because we use an approximation in https://github.com/firefox-devtools/profiler/blob/bf0d12fe12d02855b9b8945c1a4d7f477d472aec/src/utils/text-measurement.js#L82-L92. We use this approximation because using the real measure in a loop is presumably too slow.

We could try various things:

* bisection instead of this dumb loop, possibly only a few measures would be necessary
* use a well positioned element for just the text, and let the browser do its thing

This measurement is used in all our canvas-based panels: marker chart, flame graph, stack chart.

[This profile](https://profiler.firefox.com/public/def4zbt1tyg8w0x7nkdtq8g7s6h3ad0ndz7jbzg/marker-chart/?globalTrackOrder=de0wc&hiddenGlobalTracks=12&hiddenLocalTracksByPid=29495-1w46~21926-0&localTrackOrderByPid=29495-780w6~5123-0~29556-0~526-0~29603-0~29692-01~5023-0~5053-01~29650-0~29726-0~4975-0~29481-0~21926-10&thread=c&timelineType=cpu-category&v=6) has a bunch of problems in the marker chart, some are too long (look at the Runnable line, or the label starting with PWebRenderBridge), some are too short (especially the network request here).

We should also probably avoid drawing a few characters only (there are even some examples where only the ellipsis is displayed, this is clearly useless).

┆Issue is synchronized with this [Jira Task](https://mozilla-hub.atlassian.net/browse/FP-461)

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.