Closed Bug 1202443 Opened 4 years ago Closed 4 years ago

Timeline header shrinks when there are too many animations displayed

Categories

(DevTools :: Inspector: Animations, defect)

defect
Not set

Tracking

(firefox43 fixed)

RESOLVED FIXED
Firefox 43
Tracking Status
firefox43 --- fixed

People

(Reporter: pbro, Assigned: pbro)

References

Details

Attachments

(2 files, 1 obsolete file)

Attached image 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.
Assignee: nobody → pbrosset
Status: NEW → ASSIGNED
Attachment #8657854 - Flags: review?(zer0)
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.
Attachment #8657854 - Flags: review?(zer0) → review+
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.
Attachment #8657854 - Attachment is obsolete: true
Attachment #8658605 - Flags: review+
https://hg.mozilla.org/mozilla-central/rev/8968d387064d
Status: ASSIGNED → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 43
Component: Developer Tools: Inspector → Developer Tools: Animation Inspector
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.