Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Visual inheritance and layer inspect, aka show dom with 3D perspective #244

Open
argyleink opened this issue Dec 3, 2018 · 1 comment
Open
Labels
⚡️ feature New tricks for the tool-palette 🔎 needs tested pending validation from target users

Comments

@argyleink
Copy link
Member

argyleink commented Dec 3, 2018

screen shot 2018-12-03 at 2 50 35 pm

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:

  1. does the feature do the whole page or just the selected element(s)?
  2. should we animate going into and out from that state?
  3. 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

@argyleink argyleink added ⚡️ feature New tricks for the tool-palette 🔎 needs tested pending validation from target users labels Dec 3, 2018
@argyleink argyleink pinned this issue Feb 21, 2019
@samuellembke
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
⚡️ feature New tricks for the tool-palette 🔎 needs tested pending validation from target users
Projects
None yet
Development

No branches or pull requests

3 participants
@argyleink @samuellembke and others