1202443 - Timeline header shrinks when there are too many animations displayed

Status: RESOLVED FIXED

(DevTools :: Inspector: Animations, defect)

Description

[Patrick Brosset <:pbro>]

Attachment: header.gif

The animation-inspector panel's timeline header is supposed to be 20px high, but in some situations is shrinks down.
See attached GIF.

Comment 1

[Patrick Brosset <:pbro>]

Attachment: Bug_1202443_-_Prevent_pushing_the_timeline_header_.diff

Comment 2

[Matteo Ferretti [:zer0] [:matteo]]

Comment on attachment 8657854 [details] [diff] [review]
Bug_1202443_-_Prevent_pushing_the_timeline_header_.diff

Review of attachment 8657854 [details] [diff] [review]:
-----------------------------------------------------------------

::: browser/themes/shared/devtools/animationinspector.css
@@ +175,5 @@
>  }
>  
>  .animation-timeline .animations {
>    width: 100%;
> +  height: calc(100% - 20px);

We could also use directly `min-height: 20px` on `.animation-timeline .time-header` to avoid the problem; or there is specific reason why you use `calc` here instead?

When it's possible I usually prefer using plain value rather than "`calc`ulated" ones; if we have to calculate the `height`, I would say it's probably better store `20px` in a CSS variable, due the fact that is used in different CSS rules. That would make more clear what is about and also if we have to change that it will be only in one place.

Comment 3

[Patrick Brosset <:pbro>]

Attachment: Bug_1202443_-_Prevent_pushing_the_timeline_header_.diff

Thanks for the review.
You're right, I've changed the code to use min-height instead. I've also extracted all occurrences of 20px to variables in :root, this makes the UI a lot easier to change if we need to.

Comment 4

[Patrick Brosset <:pbro>]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=cbe4b9131f95

Comment 5

[Patrick Brosset <:pbro>]

https://treeherder.mozilla.org/#/jobs?repo=fx-team&revision=8968d387064d

Comment 6

[Patrick Brosset <:pbro>]

https://hg.mozilla.org/integration/fx-team/rev/8968d387064d

Comment 7

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/8968d387064d