Cristian Fogel [:cfogel] Reporter
	Description • 6 years ago

[Affected versions]:
- Firefox 63.0a1 (2018-07-30) 

[Affected platforms]:
- win 10x64, Ubuntu 16.04LTS, macOS 10.13.4

[Steps to reproduce]:
1. Launch Firefox;
2. Access the following link: https://rawgit.com/dadaa/3b73f847427025b51ba1ab7333013d0c/raw/77f3f0bb884875a179c3407f73bf8a8dd54751c9/doc_simple_animation.html
3. Open DevTools inspector - animation tab;
4. Observe the animation UI

[Expected result]:
- UI elements don't overlap

[Actual result]:
- for the timer indicator, in the first section hearders overlap/are visible 

[Regression range]:
- Bug 1468475 resulted after a mozregression run
- last good: 2018-07-12 08:55:33.060000
- first bad: 2018-07-12 08:58:54.411000

[Additional notes]:
- attached screenshot with the issue

	Pascal Chevrel:pascalc (PTO until April 26)
	Comment 1 • 6 years ago

Mantaroh, it seems that your patch in bug 1468475 caused this regresssion, could you have a look please? Thanks

	Mantaroh Yoshinaga[:mantaroh] Assignee
	Comment 2 • 6 years ago

(In reply to Pascal Chevrel:pascalc from comment #1)
> Mantaroh, it seems that your patch in bug 1468475 caused this regresssion,
> could you have a look please? Thanks

Sure. I'll look into this.

Thanks.

	Mantaroh Yoshinaga[:mantaroh] Assignee
	Comment 3 • 6 years ago

We might need to calculate label width from DOM element correctly in order to prevent overflowed label. This WIP patch will calculate label width from temporary div element:

https://hg.mozilla.org/try/rev/0e296e14889a28a79feb52529cb600e44d2ab8ae

	Mantaroh Yoshinaga[:mantaroh] Assignee
	Comment 4 • 6 years ago

This patch uses the getDerivedStateFromProps since the componentWillReceiveProps
is deprecated from React 16.3. The reason of storing tick lines element into
this component's state is this component need to calculate label's width from
tick lines element, this getDerivedStateFromProps is the static function
so that we can't access to 'this component' scope.

For detail, see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html.

	Mantaroh Yoshinaga[:mantaroh] Assignee
	Comment 5 • 6 years ago

This patch will skip the first graduation by calculating and checking the width
of the label.

	Mantaroh Yoshinaga[:mantaroh] Assignee
	Comment 6 • 6 years ago

This patch will clip the overflowed tick label. In order to check the width,
this patch add the max-width into tick label element.

Furthermore, componentWillReceiveProps is deprecated from React 16.3.
So this patch will use componentDidUpdate instead of it.

	Phabricator Automation
	Comment 7 • 6 years ago

Comment on attachment 8998087 [details]
Bug 1479756 - Clip the overlapped header tick label. r?daisuke

Daisuke Akatsuka (:daisuke) has approved the revision.

https://phabricator.services.mozilla.com/D2818

	Pulsebot
	Comment 8 • 6 years ago

Pushed by mantaroh@gmail.com:
https://hg.mozilla.org/integration/autoland/rev/ff1da250bce2
Clip the overlapped header tick label. r=daisuke

	Arthur Iakab [arthur_iakab]
	Comment 9 • 6 years ago
bugherder

https://hg.mozilla.org/mozilla-central/rev/ff1da250bce2

	Cristian Fogel [:cfogel] Reporter
	Comment 10 • 6 years ago

Confirmed fix on Win10x64, MacOS10.13.4, Ubuntu 16.04LTS.