Screenshot preview is overlaying permalink

[zoepage]

STR:

1. Open this profile: https://perfht.ml/2MKT5Hy
2. Open one of the panels at the top (eg permalink, or publish)
3. hover the screenshots below

=> as you'll notice, the screenshots are going over the panels. But they should go below, ie, the panels should be on top.

┆Issue is synchronized with this Jira Task

[julienw]

Here is an example of a profile with screenshots: https://perfht.ml/2MKT5Hy.

This is where the z-index for the permalink is defined:
https://github.com/devtools-html/perf.html/blob/f9fa9309ec19ee0a4718b1d1fe0524b5e725243a/src/components/shared/ArrowPanel.css#L5-L10

This is where the z-index for the screenshot hover is defined:
https://github.com/devtools-html/perf.html/blob/f9fa9309ec19ee0a4718b1d1fe0524b5e725243a/src/components/timeline/TrackScreenshots.css#L30-L35

So it "looks like" that the stacking contexts are well defined.

But the permalink is actually inside the #root element, that also has a z-index defined (and applied as a child of a flex element):
https://github.com/devtools-html/perf.html/blob/f9fa9309ec19ee0a4718b1d1fe0524b5e725243a/res/css/style.css#L30-L32

I tried to manually remove this z-index with the devtools, and this seems to fix the issue. But this z-index has been added as part of the work on tooltips by @gregtatum, so I think that for tooltips it is actually intended that they'd go over the application's "chrome".

So the solution might be that we want to add the screenshots to a separate root element than the one for tooltips (#root-overlay) and that we set a smaller z-index on this element than on #root. I haven't tried it but this should work.

This is where we define which element the screenshots are added to:
https://github.com/devtools-html/perf.html/blob/f9fa9309ec19ee0a4718b1d1fe0524b5e725243a/src/components/timeline/TrackScreenshots.js#L62-L65

I think this could be easily taken by a contributor, so I'm marking it like so. The MDN documentation about stacking contexts could be useful, as this bug is a direct application of it.

[hritvi]

@julienw May I take this issue? Thanks 😄

[julienw]

@hritvi of course you can, thanks for your help ! Is there anything else I can help with ?

[edieblu]

Hi @julienw happy to give this a go

[julienw]

@edieblu Hey, I see @hritvi already requested to work on this some days ago. Hey @hritvi could you work on this after all ? Thanks :)

[julienw]

Hey @hritvi, because I got no answer from you, I'll remove the assigned label and make this issue available for another contributor. Please write another comment if you still work on this :) Thanks!

[Anshika-G]

Hey @julienw I would like to work on this!

[julienw]

Hey @Anshika-G, sure ! You can look at the comment #1274 (comment) for some direction, but please ask if you need anything else !
Our contributing documentation has some useful information to start working on the project too.

[julienw]

Hey @Anshika-G, could you work on this? Do you need some more help getting started? Thanks!

[julienw]

Removing the assigned label because no update for more than 2 weeks.

[PhoeniXAbhisheK]

Hey @julienw , can I look into this issue ?

[canova]

Hey @PhoeniXAbhisheK, I just assigned #1371 to you. Let's wait until you fix that one. This issue is up for grabs in the meantime.

[PhoeniXAbhisheK]

@canaltinova yes sure 🙂 🙂 🙂 🙂 🙂

[rajmeghpara]

Hi @julienw , I would like to work on this issue :) CC: @canaltinova

[julienw]

hey @rajmeghpara, sure! Thanks for your help :)

[julienw]

As discussed on Slack, @rajmeghpara will work on another issue, so this one is now up for grabs!

[lloan]

@julienw Could I have this bug assigned to me? Thanks!

[canova]

hey @lloan, are you still working on this? Please let us know and we can help you if you are blocked on anything :)

[lloan]

Thanks for asking @canaltinova! Been working on the netmonitor tools project and as that one is on Phabricator, this one completely slipped my mind. If anyone else is interested in working on it, please do assign it to them, otherwise, I can work on it this week. Thanks a ton!

[canova]

@lloan thanks for letting us know :) I'll unassign it so someone can grab it if they are interested. Let us know if you want to work on it again :)

[alejandroclose]

Hi @canaltinova @julienw ! I would like to help with this issue, can I try? :)

[julienw]

Hey @alejandroclose, yes sure, that would be lovely! Assigning to you then :)
You can find information to start with at the start of the thread, but please ask here or on slack if you need anything.

[alejandroclose]

@julienw I'm sorry but I haven't been able to see this, and I believe I won't have time for the next weeks... Maybe if it's still available I can retake it. Thank you for the opportunity and sorry again for any inconvenience.

[rbrishabh]

I would like to take up this issue as my first contribution! Can I take this up?

[canova]

@rbrishabh Sure, assigning it to you. Let us know if you need anything!

[julienw]

hey @rbrishabh, could you have a look at the issue yet? Do you need anything? Thanks!

[rbrishabh]

Yes. I read through everything you posted. I just had some trouble with my machine which is fixed now. I will work on this right now and I'll comment here if I get stuck. Thanks!

[rbrishabh]

Hi @julienw! I am sorry for the delay. I have read through this entirely.
I understood stacking contexts, thanks to the wonderful MDN documentation.

So this is what I need to do:

1. I need to add screenshots to a separate root element. For this I need to change the "#root-overlay" to a different root element in TrackScreenshots.js.
2. I need to increase z-index in timelineTrackScreenshotHover css class in TrackScreenshots.css to something more than 10, which is the value of z-index in arrowPanelAnchor css class in ArrowPanel.css.

So I think I can change the value of z-index in timelineTrackScreenshotHover css class in TrackScreenshots.css to 12? Would that be okay?

Also, what other root element can I use instead of "root-overlay"?

Thanks a lot. I am just getting started so the questions might be a little off the mark. I hope you don't mind.

[rbrishabh]

Hey @julienw ! I am waiting for your response! Please help me get this sorted whenever you can find a little time! Thank you!

[rbrishabh]

Hey @canaltinova ! I was wondering if this is still relevant? :)

[julienw]

Hey, sorry for the delay, as I was away for holidays! (and as was @canaltinova :) ).

You can use a new root element called root-screenshot for example. Also the new z-index needs to be abled on that new element.
I hope this is clearer!

Also the best way to get started is actually write the code and see if this fixes the problem ;) Then you can ask feedback by pushing the code to a draft pull request so that we can have a look at some actual code.

I hope this is clearer! Please ask if you need anything more :)

[julienw]

See the prior PR #2187: this isn't as easy as we initially thought, and will need some investigation to fix this. That's why I've removed the "good first issue" label.

[qmya]

Hi @julienw Can I work on this?

[Riju19]

Hi, I would like to work on this issue.