1478324 - [Performance] Overlapped content in Call Tree view when dock to the side

Status: NEW

(DevTools :: Performance Tools (Profiler/Timeline), defect, P3)

Description

[Anca Soncutean [:Anca], Desktop Release QA]

Attachment: screenshot issue.png

[Affected versions]: 
- 63.0a1 (2018-07-24)
- 62.0b11 (20180723144101)
- 61.0.1 (20180704003137)

[Affected platforms]:
- Ubuntu 16.04 x64
- Ubuntu 18.04 x64

[Steps to reproduce]:
1. Open the Performance tab (Shift +F5)
2. Record a performance
3. Go to the Call Tree view
4. From Customize Developer tools and get help dropdown form, select Dock to right/Dock to left option

[Expected result]:
- Content is not overlapped

[Actual result]:
- Overlapping text makes the content undecipherable

[Regression range]: 
- Last good revision: f14898695ee0dd14615914f3e1401f17df57fdd7 (2016-03-21)
  First bad revision: 3587b25bae302c1eed72968dbd7cef883e715948 (2016-03-22)
  Pushlog:
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=f14898695ee0dd14615914f3e1401f17df57fdd7&tochange=3587b25bae302c1eed72968dbd7cef883e715948

[Additional Notes]:
- On Windows and Mac platforms, the issue is visible only when reducing the Performance page width a little (when dock to the side) or to the minimum (when page is dock to the bottom.

Comment 1

[Julien Wajsberg [:julienw]]

When the width is still large enough, the values are properly "ellipsified", but below a threshold we get this weird overlap behavior.
This element is a <description> with a `crop` attribute, _and_ some `text-ellipsis` CSS.