Adds z-index visualization plugin

[addyosmani]

This change introduces a z-index visualization plugin. The idea is to render a box with the z-index value for each child, to help developers debug index stacking. Each box is given a random color to help distinguish what you're seeing.

Below you can see the plugin being used on a few sites:

Very open to additional commits being added by @argyleink to improve this. A few areas it could be improved:

Feel free to let me know if this isn't a great fit for this project :)

• Command-name: I added zindex and z-index, however if there's something better, please feel free to change it
• Visualization: I'm aware of 3D DOM viz work being explored by some DevTools teams right now, but still like the simplicity this visualization offers :) I'm sure this could be improved. Potentially tweaking font-size, the model for setting colors or logic for how to determine what to visualize.
• Bugs: On pages heavily using z-index you can end up with boxes which overlap. One could argue an MVP doesn't need to tackle this, but it's definitely visible sometimes. It could be fixed with a model for avoiding overlapping positions of what is drawn.

This work is inspired by a bookmarklet Mr. @paulirish wrote 10 years ago :)

Original gist Non-jQuery rewrite this is based on

[argyleink]

deployed PR to Glitch for QA and hands on testing: https://addy-zindex.glitch.me

worked as advertised! i do see 1 or 2 ui nudges i can make in a fork. i'll post a follow up comment with a new glitch link containing some mods.

awesome work!

[argyleink]

alright, spent 30m to see what i could improve! had a lot of fun playing. even tried some backdrop filter stuff lol. here's what i thought ended up being an improvement, watcha think?

changes:

• removed outline on element and put it on the overlay
• used typed OM
• added additional styles so page styles dont leak in (might be good to shadow dom this eventually)
• centered z-index over the elements

source
demo

[addyosmani]

alright, spent 30m to see what i could improve! had a lot of fun playing. even tried some backdrop filter stuff lol. here's what i thought ended up being an improvement, watcha think?

Love it! Thanks for spending time tweaking the implementation. Wdyt about us bumping up the font-size just a smidge for readability? Rest looks pretty ace. Also like the idea of centering the z-index to avoid clashes.

added additional styles so page styles dont leak in (might be good to shadow dom this eventually)

👍

[argyleink]

def down to bump up the font size, no prob! think we should filter out the visbug element? i dont think user's care about it's z-index.

[addyosmani]

Yeah, we should probably filter out the VisBug element. That makes sense. For the font size bump, do you have preferences here around units? (px, rem, em)

[argyleink]

I suggest pixels, since em's/rem's would inherit from rando page styles. but, you're also a plugin and not visbug, so there's some forgiveness.

[addyosmani]

How would you feel about 13-14px?

[argyleink]

i'd feel good about it! an overachiever would make a range of values from like 12 - 20, and would pick somewhere in the spectrum based on the size of the element the label will go into. lol, like a big node would get a bigger label, and tiny nodes would get the smallest label. but, honestly, i think the PR you submitted, even as it was originally, was totally acceptable. so whatever you wanna iron out is all icing on an already great cake.

[argyleink]

the label custom element from visbug had some css i wanted to reference for this labels, found it here https://github.com/GoogleChromeLabs/ProjectVisBug/blob/master/app/components/selection/label.element.css. i updated the demo with some of the resets and updated it to 14px and added a filter to check for visbug 👍 things look great!

https://adm-zindex.glitch.me

then, i was curious about a plugin using visbug's web components.. and a few minutes later, made this demo!

https://ce-zindex.glitch.me

with the custom elements:

• ui looks visbug native
• doesnt change the dom of the targets
• wont have to battle any z-index nesting scenarios, yer on top
• plugin is 30 loc's!

[addyosmani]

i updated the demo with some of the resets and updated it to 14px and added a filter to check for visbug 👍 things look great!

Thanks for experimenting with 14px. This looks a lot more readable and I think the average user will find this an improvement over the original values.

then, i was curious about a plugin using visbug's web components.. and a few minutes later, made this demo!

Nice! I'm going to play around with this update, in particular how it would handle nested components with different z-index values. I have a feeling the UX is just a wee bit nicer than the original proposal.

[addyosmani]

Okay, I'm sold on the revisions. Even with slightly overlapping elements we're able to visualize their independent z-index values while keeping them readable. I also like that these additions kept the original logic pretty in tact 👍 Thanks for collaborating on improving this, Adam! 🤗

The one shift these last sets of changes from the update introduce is that the snippet can no longer be pasted in FF/Safari DevTools and 'just work' the same. On the whole, I think that's fine and we can re-implement some of these tweaks in the gist for anyone that wishes to get this working in other browsers.

In short, I and the doggos approve of the direction here. If there's anything remaining from your Glitch you'd like to bring back in here, would you like to go ahead and commit those to the branch/PR? I wasn't sure if there were also docs changes needed so will defer to you to let me know :)

[addyosmani]

🎉 Thanks for being open to this change and helping iterate towards a nicer version of it! SG on the Firefox support bits. Looking forward to how that comes together!

I have a few other ideas for VisBug plugins I may try to PR in the new year. Appreciate how straight-forward contributing was 👍

nbd at all - could you let me know when this change makes its way to a release? ☺️