Repository: firefox-devtools/profiler (2020-11-21T22:28:57Z)

Issue:
Screenshot preview is overlaying permalink
![](https://user-images.githubusercontent.com/562354/45538847-73fcda00-b808-11e8-87b0-c54f0ff0b4e0.png)

STR:

1. Open this profile: https://perfht.ml/2MKT5Hy
1. Open one of the panels at the top (eg permalink, or publish)
1. 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](https://mozilla-hub.atlassian.net/browse/FP-65)



Discussion:
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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) could be useful, as this bug is a direct application of it.
@julienw May I take this issue? Thanks :smile: 
@hritvi of course you can, thanks for your help ! Is there anything else I can help with ?
Hi @julienw happy to give this a go 
@edieblu Hey, I see @hritvi already requested to work on this some days ago. Hey @hritvi could you work on this after all ? Thanks :)
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!
Hey @julienw I would like to work on this!

Hey @Anshika-G, sure !  You can look at the comment https://github.com/devtools-html/perf.html/issues/1274#issuecomment-422030949 for some direction, but please ask if you need anything else !
Our [contributing documentation](https://github.com/devtools-html/perf.html/blob/master/CONTRIBUTING.md) has some useful information to start working on the project too.
Hey @Anshika-G, could you work on this? Do you need some more help getting started? Thanks!
Removing the `assigned` label because no update for more than 2 weeks.
Hey @julienw , can I look into this issue ?
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.
@canaltinova yes sure 🙂 🙂 🙂 🙂 🙂 

Hi @julienw , I would like to work on this issue :) CC: @canaltinova 
hey @rajmeghpara, sure! Thanks for your help :)
As discussed on Slack, @rajmeghpara will work on another issue, so this one is now up for grabs!
@julienw Could I have this bug assigned to me? Thanks!
hey @lloan, sure!
hey @lloan, are you still working on this? Please let us know and we can help you if you are blocked on anything :)
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!
@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 :)
Hi @canaltinova @julienw ! I would like to help with this issue, can I try? :) 
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.
@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. 
I would like to take up this issue as my first contribution! Can I take this up?

@rbrishabh Sure, assigning it to you. Let us know if you need anything!
hey @rbrishabh, could you have a look at the issue yet? Do you need anything? Thanks!
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! 
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.


Hey @julienw ! I am waiting for your response! Please help me get this sorted whenever you can find a little time! Thank you!
Hey @canaltinova ! I was wondering if this is still relevant? :)
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 :)
See the prior PR https://github.com/firefox-devtools/profiler/pull/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.
Hi @julienw Can I work on this?

Hi, I would like to work on this issue.



Patch:
diff --git a/src/components/app/ProfileViewer.js b/src/components/app/ProfileViewer.js
index 1248f7fc50..1ae517d0bf 100644
--- a/src/components/app/ProfileViewer.js
+++ b/src/components/app/ProfileViewer.js
@@ -105,6 +105,7 @@ class ProfileViewerImpl extends PureComponent<Props> {
                 }
           }
         >
+          <div id="screenshot-hover"></div>
           <div className="profileViewerTopBar">
             {hasZipFile ? (
               <button
diff --git a/src/components/shared/ButtonWithPanel/ArrowPanel.css b/src/components/shared/ButtonWithPanel/ArrowPanel.css
index 35e1bfe6f9..d7d6e8abdf 100644
--- a/src/components/shared/ButtonWithPanel/ArrowPanel.css
+++ b/src/components/shared/ButtonWithPanel/ArrowPanel.css
@@ -4,7 +4,7 @@
 
 .arrowPanelAnchor {
   position: absolute;
-  z-index: 10;
+  z-index: 5;
   top: 75%;
   left: 50%;
 }
diff --git a/src/components/timeline/TrackScreenshots.js b/src/components/timeline/TrackScreenshots.js
index f965fbab5d..ca69bd6757 100644
--- a/src/components/timeline/TrackScreenshots.js
+++ b/src/components/timeline/TrackScreenshots.js
@@ -231,9 +231,9 @@ const MAXIMUM_HOVER_SIZE = 350;
 const MAXIMUM_HOVER_SIZE_WHEN_SELECTING_RANGE = 100;
 
 class HoverPreview extends PureComponent<HoverPreviewProps> {
-  _overlayElement = ensureExists(
-    document.querySelector('#root-overlay'),
-    'Expected to find a root overlay element.'
+  _screenshotHoverElement = ensureExists(
+    document.querySelector('#screenshot-hover'),
+    'Expected to find a screenshot hover element.'
   );
 
   render() {
@@ -304,7 +304,7 @@ class HoverPreview extends PureComponent<HoverPreviewProps> {
           }}
         />
       </div>,
-      this._overlayElement
+      this._screenshotHoverElement
     );
   }
 }


Test patch:
diff --git a/src/test/components/TrackScreenshots.test.js b/src/test/components/TrackScreenshots.test.js
index f64b902471..9f95ead8d4 100644
--- a/src/test/components/TrackScreenshots.test.js
+++ b/src/test/components/TrackScreenshots.test.js
@@ -31,8 +31,8 @@ import { mockRaf } from '../fixtures/mocks/request-animation-frame';
 import { storeWithProfile } from '../fixtures/stores';
 import {
   getMouseEvent,
-  addRootOverlayElement,
-  removeRootOverlayElement,
+  addScreenshotHoverlement,
+  removeScreenshotHoverElement,
   fireFullClick,
 } from '../fixtures/utils';
 import { getScreenshotTrackProfile } from '../fixtures/profiles/processed-profile';
@@ -63,8 +63,8 @@ describe('timeline/TrackScreenshots', function () {
   autoMockElementSize(INITIAL_ELEMENT_SIZE);
   autoMockIntersectionObserver();
 
-  beforeEach(addRootOverlayElement);
-  afterEach(removeRootOverlayElement);
+  beforeEach(addScreenshotHoverlement);
+  afterEach(removeScreenshotHoverElement);
 
   it('matches the component snapshot', () => {
     const { container, unmount } = setup();
diff --git a/src/test/fixtures/utils.js b/src/test/fixtures/utils.js
index ad029bf197..520417989f 100644
--- a/src/test/fixtures/utils.js
+++ b/src/test/fixtures/utils.js
@@ -365,6 +365,27 @@ export function removeRootOverlayElement() {
   );
 }
 
+export function addScreenshotHoverlement() {
+  const div = document.createElement('div');
+  div.id = 'screenshot-hover';
+  ensureExists(
+    document.body,
+    'Expected the document.body to exist.'
+  ).appendChild(div);
+}
+
+export function removeScreenshotHoverElement() {
+  ensureExists(
+    document.body,
+    'Expected the document.body to exist.'
+  ).removeChild(
+    ensureExists(
+      document.querySelector('#screenshot-hover'),
+      'Expected to find a screenshot hover element to clean up.'
+    )
+  );
+}
+
 /**
  * You can't change <select>s by just clicking them using react-testing-library. This
  * utility makes it so that selects can be changed by the text that is in them.