This repository was archived by the owner on Sep 15, 2026. It is now read-only.
Repository navigation
This repository was archived by the owner on Sep 15, 2026. It is now read-only.
Visual inheritance and layer inspect, aka show dom with 3D perspective #244
Description
there is a rad feature of the devtools called layers, though shown is xlayers, and i want it for designers and i want in right there with the live dom! i want tab navigation to keep working and all the tools. i want to change properties of a DOM that's rotated in 3D space and spread out so i can understand which layer is in control of what.
i suspect LOE on this to be interesting minimal. some UX considerations are:
- does the feature do the whole page or just the selected element(s)?
- should we animate going into and out from that state?
- put the whole feature behind a hotkey? it sounds utilitarian enough that i may want to quick flip it on/off
inheritance inspection
layer inspection
Reacted by Adrian D. Alvarez, xyz, Aleksandr Langolf, Sascha Becker, Wassim Chegham, Sean Lynch, Howard Chiam and Denis Churilov
Activity
samuellembke commentedon Dec 17, 2023
If you mean the "Layers" tool in chrome dev tools, the depth of the elements is dictated by the z-index, as far as I understand it. What you mean seems very complex, and the effort might not be worth the results.
Also to get any page into a 3d context would require the page content to be put into a wrapper element which would be transformed, this could lead to allot of pages breaking, as position fixed elements would break inside some wrapper elements and it would also create isolation layers that could break website effects.
But the feature would definitely be very cool haha, if you have a practical idea to implement it I would love to help build a proof of concept