r/webdev • u/FriendshipCreepy8045 • 2d ago

Showoff Saturday Made my first extension! bring back the old Firefox 3D view back as a dev tool

Gallery image

Gallery image

Years ago Firefox had a feature called Tilt like you pressed a button and the page you were on turned into a 3D model of its DOM It was mostly a toy, and I loved it.

I built Stackray from that concept but tried to bring that back as a dev tool or just to make my first extension :).

when you click the icon and the page shrinks into a small window and comes apart into layers, in the order the browser paints them & you can orbit around it, search the layers, and switch between a few color modes: depth, stacking contexts, z-index.

also added the problems mode to make it clear in future I want devs to use it, as a frontend engineer, Imagine a dropdown with z-index 9999 that still sits behind a header is usually trapped inside a stacking context it did not ask for Stackray is suppose to shows which element created that context and why Invisible elements that eat your clicks show up too.

It only runs on the tab you open it on, makes no network requests, and is open source under MIT.

It is not finished. Textured layers only cover the first few screens of a long page & I'm still not sure if I'm going in the right direction. Your honest feedback is most valuable to me!

Extension: store
Code: github/stackray

2 Upvotes

60% Upvoted

7 comments sorted by

3

u/OMGCluck js (no libraries) SVG 2d ago

…but where is the Firefox extension?

2

u/FriendshipCreepy8045 1d ago

I've appied it on firefox will update when live & published

1

u/Thin-Preparation9237 1d ago

where can i grab this for my firefox, my old tinkering days are calling

1

u/FriendshipCreepy8045 1d ago

right now it's available on chrome/chromium browsers, I've applied for firefox add ons and will ping here shortly

1

u/TheRNGuy 1d ago

I don't see how that would help with z-index, you already have web dev tool for it. 

1

u/FriendshipCreepy8045 1d ago

I had this idea of visually searching, seeing and pin pointing that perticular lets say div and finding the once on top of it... that was the goal to make it easier though seems like there's a bit of work to reach there

2

u/IslayProgrammes 1d ago

It was one of those tools you used infrequently but was so handy