Skip to content

Display nicer time units in the timeline ruler for values that are be…#4774

Merged
fqueze merged 1 commit into
firefox-devtools:mainfrom
fqueze:better-time-units-in-ruler
Oct 12, 2023
Merged

Display nicer time units in the timeline ruler for values that are be…#4774
fqueze merged 1 commit into
firefox-devtools:mainfrom
fqueze:better-time-units-in-ruler

Conversation

@fqueze

@fqueze fqueze commented Oct 11, 2023

Copy link
Copy Markdown
Contributor

…tter expressed in minutes or hours.

This will be useful for build profiles from treeherder that are typically more than 10 minutes long.
I've wanted to do this for a long time, and it turned out to be easier than I thought, as I had already done most of the preparation work in #4748.

Example profile: https://share.firefox.dev/46EOekZ

@fqueze fqueze requested a review from julienw October 11, 2023 08:59
@codecov

codecov Bot commented Oct 11, 2023

Copy link
Copy Markdown

Codecov Report

Attention: 13 lines in your changes are missing coverage. Please review.

Comparison is base (b1c4852) 88.33% compared to head (665fd60) 88.30%.

❗ Current head 665fd60 differs from pull request most recent head 8f5abcb. Consider uploading reports for the commit 8f5abcb to get more accurate results

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #4774      +/-   ##
==========================================
- Coverage   88.33%   88.30%   -0.04%     
==========================================
  Files         301      301              
  Lines       26824    26838      +14     
  Branches     7240     7245       +5     
==========================================
+ Hits        23696    23698       +2     
- Misses       2915     2924       +9     
- Partials      213      216       +3     
Files Coverage Δ
src/utils/format-numbers.js 85.11% <100.00%> (+0.08%) ⬆️
src/components/timeline/Ruler.js 64.86% <38.09%> (-30.97%) ⬇️

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Comment on lines +26 to +43
for (const seconds of [15, 20, 30]) {
const number = seconds * 1000;
if (uglyNumber <= number) {
return number;
}
}
for (const minutes of [1, 2, 5, 10, 15, 20, 30]) {
const number = minutes * 60 * 1000;
if (uglyNumber <= number) {
return number;
}
}
for (const hours of [1, 2, 3, 4, 6, 8, 12, 24, 48]) {
const number = hours * 3600 * 1000;
if (uglyNumber <= number) {
return number;
}
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe I'm missing something, but it looks like we could just return number here instead of doing all these loops? Indeed you're not returning anything specific from the loops and the various conditions...

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The point of these loops is to decide which value to assign in the 'number' variable. The possible values for 'number' are pre-defined by the values in the arrays. Then the first 'number' value that's < ugglyNumber is what we keep (ie. return).

@julienw julienw left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good to me.

Just a few comments:

  1. 11min0s could be just 11min
  2. I also wonder if min is a bit too long and clutters the view, especially when there are seconds, so maybe we could shorten it to m when we have seconds. Or even: which is kind of standard.

What do you think?

@fqueze

fqueze commented Oct 12, 2023

Copy link
Copy Markdown
Contributor Author

Thanks for the review!

1. `11min0s` could be just `11min`

This was the previous behavior, and IMO it looked poor when there was on the same line a mix of values with just minutes and a values with minutes and seconds. Eg.
image

I even considered ensuring we show seconds always with 2 digits so that the size of all labels is the same. I decided to ignore that part because I would have needed to find a way to keep a single digit when there are no minutes. Ie. show "9s" but "1min09s", and that would have complicated the code even more.

2. I also wonder if `min` is a bit too long and clutters the view, especially when there are seconds, so maybe we could shorten it to `m` when we have seconds. Or even`:` which is kind of standard.

I don't have a strong opinion. But all these values should probably be localized, and that might be a good time to decide how long we want them to be. So I would prefer that we keep that for a separate PR.

@julienw

julienw commented Oct 12, 2023

Copy link
Copy Markdown
Contributor

Thanks for the review!

1. `11min0s` could be just `11min`

This was the previous behavior, and IMO it looked poor when there was on the same line a mix of values with just minutes and a values with minutes and seconds. Eg. image

I even considered ensuring we show seconds always with 2 digits so that the size of all labels is the same. I decided to ignore that part because I would have needed to find a way to keep a single digit when there are no minutes. Ie. show "9s" but "1min09s", and that would have complicated the code even more.

Thanks for the explanation, makes sense to me.

2. I also wonder if `min` is a bit too long and clutters the view, especially when there are seconds, so maybe we could shorten it to `m` when we have seconds. Or even`:` which is kind of standard.

I don't have a strong opinion. But all these values should probably be localized, and that might be a good time to decide how long we want them to be. So I would prefer that we keep that for a separate PR.

I think I'd prefer to switch to m now for a less cluttered view.

@fqueze fqueze force-pushed the better-time-units-in-ruler branch from 665fd60 to 8f5abcb Compare October 12, 2023 13:26
@fqueze fqueze merged commit e3647d0 into firefox-devtools:main Oct 12, 2023
@canova canova mentioned this pull request Oct 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants