firefox-devtools / firefox-devtools/profiler
The algorithm to control the ellipsis in our canvas-based panels can be improved
- 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
Assessment
This issue has not been assessed yet.