Playing Around With Z-Index

In my quest to find & squash more bugs in Mozilla, I stumbled across Firefox Profiler — Web app for Firefox performance analysis.

Browsing through the issues, looking around for a bug that’s ready and has no one assigned, I came across this one – Screenshot preview is overlaying permalink #1274.

The problem was –

Screenshots of the profiles being analysed were overlaying their permalinks

– the screenshots of the profiles being analysed were overlaying their permalinks. This made it hard for users to copy the permalink because screenshots annoyingly came up when user was trying to copy the permalink – which caused frustration.

Julien, the mentor for this bug, and for most bugs over at Firefox Profiler suggested the following fix –

Changing the z-index of a new element which contains the screenshots

Well, as I skimmed through this comment – I saw a lot of z-index throughout the comment, and the obvious question was —

What on Earth is Z-Index?!

Turns out, from the MDN documentation, the z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.

That’s where the learning began! That’s open source!
So, Z-Index is basically the depth of an element in the DOM. Not the height, nor width but the depth. Which helps us make sure which element will overlay which!


I read through the entire passage of comments – and found out that many contributors had already tried to have a go at this bug, but no one went through with it. That’s where I came in!

With great documentation provided, I was able to set up Profiler locally.

These were the steps to solve this issue –

  1. Adding a new div in the root html file which will have the z-index of screenshots.
    <div id="root-screenshot"></div>
  2. Making sure the screenshots are now under this new element.
    _overlayElement = ensureExists(
    document.querySelector('#root-screenshot'),
    'Expected to find a root screenshot element.'
    );
  3. Adding a new Z-Index for this root-screenshot element, that is less than that the Z-Index of root element (which contains permalinks) –
    #root-screenshot {
    z-index: 0;
    }
  4. Writing test cases for this new element:
export function addRootScreenshotElement() {
   const div = document.createElement('div');
   div.id = 'root-screenshot';
   ensureExists(
     document.body,
     'Expected the document.body to exist.'
   ).appendChild(div);
 }
export function removeRootScreenshotElement() {
   ensureExists(
     document.body,
     'Expected the document.body to exist.'
   ).removeChild(
     ensureExists(
       document.querySelector('#root-screenshot'),
       'Expected to find a root overlay element to clean up.'
     )
   );
 }

The last step was to import all the correct methods (for new test cases) and viola! We were good to go!

I made all these changes- and made a PR.

After a long series of changes requested by Julien.. and a lot of hustle-tussle—

GUESS WHAT?

We realized that the proposed fix was never a feasible solution for the issue.
Changing the z-index for an element and lowering it completely messed up a lot of features on the website –
Earlier there was screenshots overlaying permalinks, now there were no permalinks!

So this came up:

I still had some drive left in me, and I gave this another go! And then another! I literally played around with every single Z-Index in the Profiler and I learned awful lot about how things work!

Soon –

Well, yes, I couldn’t fix it! But I made some progress! We now know the initial solution we were trying won’t work – and I learned a lot of things!

Here’s a list of things I learned:

  1. Everything about Z-Index that’s on MDN!
  2. I learned how to write test cases in react, and see them all pass!
  3. How to change the root element a component belongs too.
  4. I learned a lot about how Profiler works, which later helped me successfully solve other bugs.

I see this as an absolute win 😉 !

Here’s to patches that you work a lot on, but they never get merged! Never undermine the learning experience!

Written with love,
Rishabh Budhiraja

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s